全景AR增强监视系统硬件资源的健康状态管理之场景实现

1、写在前面

前面我们已经了解如何获取软硬件资源，并使用消息队列向外发布，并将其称之为 ​​Monitor​​。

假设你已经布置好 ​​Monitor​​，并且网络一切正常。

现在，我们要将所有布置好的机器放入场景，并以某种方式展现即可。

2、正文开始

• 首先，我们需要一个列表，这个列表表明了监控的机器列表，它代表 ​​Monitor​​ 运行的机器：

这个可以从 ​​SkeyeIVMS​​ 提供的接口中直接获取到。

/**
     * @brief healthStatus 获取健康状态列表
     * @return QVariantList {
     *                            "serverId": 1
     *                            "serverParentId":
     *                            "serverIsMain":
     *                            "serverChName":
     *                            "serverEnName":
     *                            "serverAddress":
     *                            "entryType":
     *                            "panoId":
     *                            "state":
     *                        }
     **/
    QVariantList healthStatus() {
        ......
        QVariantList entries;
        //从SkeyeIVMS获取健康状态列表
        QNetworkManager::get(.....);
        ......
        QJsonDocument doc = QJsonDocument::fromJson(QByteArray(data.toUtf8()), &error);
        if (error.error == QJsonParseError::NoError) {
            const auto &array = doc.array();
            //解析array
            entries = parse(array);
            return entries;
        }
    }

• 接着，我们需要把拿到的 ​​QVariantList​​​ 来生成 ​​Qml 场景​​。

这里以根项为场景，然后使用 ​​Repeator​​​ 将 ​​QVariantList​​ 进行布局：

Item {
    id: scene
    
    function createCameras(devices) {
      let width = cameraRepeater.cameraWidth;
      let height = cameraRepeater.cameraHeight;
      let spacing = cameraRepeater.spacing;
      let panoCount = devices.length;
      let rows = Math.ceil(Math.sqrt(panoCount));
      let preStartX = 0;
      let maxWidth = 0;
      for (let i = 0; i < panoCount; i++) {
        let model = [];
        let device = panoManager.deviceModel.find(devices[i].panoId);

        let cameraCount = 0;
        let panoObj = {
          cameraId: devices[i].serverId,
          cameraName: devices[i].serverChName,
          cameraIsMain: devices[i].serverIsMain,
          cameraAddress: devices[i].serverAddress,
          cameraType: -1, //全景
          cameraStatus: devices[i].state
        };
        model.push(panoObj);

        if (device !== null)  {
          let cameras = device.cameras;
          cameraCount = cameras.length;
          for (let j = 0; j < cameras.length; j++) {
            let camera = cameras[j];
            let obj = {
              cameraId: devices[i].serverId,
              cameraName: camera.name,
              cameraType: camera.cameraType,
              cameraStatus: HealthStatus.OnLine,
              cameraIsMain: devices[i].serverIsMain,
              cameraAddress: devices[i].serverAddress,
            };
            model.push(obj);
          }
          print(device.panoName)
        }

        let distance = width * (cameraCount + 1) + spacing * (cameraCount + 1);
        let startPosX = preStartX;
        let startPosY = (i % rows) * 200;
        let endPosX = startPosX + distance;
        let endPosY = startPosY;
        maxWidth = Math.max(maxWidth, endPosX);
        preStartX = ((i + 1) % rows) == 0 ? maxWidth + 150 : preStartX;

        cameraListModel.append({
                   startPosX: startPosX,
                   startPosY: startPosY,
                   endPosX: endPosX,
                   endPosY: endPosY,
                   cameraModel: model
                 })
      }

      cameraRepeater.rows = rows;
      cameraRepeater.height = rows * 180;
      cameraRepeater.width = maxWidth == 0 ? preStartX : maxWidth;
    }
    
    Repeater {
      id: cameraRepeater
      model: ListModel { id: cameraListModel }
      delegate: cameraDelegate
      property int rows: 0
      property int cameraWidth: 42
      property int cameraHeight: 56
      property int spacing: 60
    }
  }

• 其中，​​cameraDelegate​​ 为实际的设备代理(这里是相机设备)：

对于全景和相机的区分，简单判断 ​​cameraType​​ 的值即可。

• 最后，将 ​​QVariantList​​​ 与 ​​cameraListModel​​关联起来：

function createScene() {
    let model = healthStatusManager.healthStatus;
    let devices = [];
    for (let i = 0; i < model.length; i++) {
      let entryType = model[i].entryType;
      if (entryType === HealthStatus.Pano || entryType === HealthStatus.PanoSpare || entryType === HealthStatus.Camera) {
        devices.push(model[i]);
      }
    }

    cameraListModel.clear();
    scene.createCameras(devices);
  }

最终 ​​SkeyeARS​​ 中的效果如下；

关于SkeyeARS

SkeyeARS全景AR增强监视系统， 是视开科技开发的一款基于宽场景多路视频无缝拼接、视频实时增强、监视目标增强显示、目标自动跟踪、视频存储回放、远程数据传输和多通道全景视频同步显示等功能的综合视频AR增强监视系统，广泛应用于智慧交通、智慧城市、智慧机场等大场景智能监控领域。