一. 要实现的目标

当飞机在地图上飞行时，实现飞机图标实时跟随一个参数小面板，让用户对关键信息一目了然。此参数小面板设置为半透明，可实时跟随飞机图标移动，显示内容包括电池剩余百分比、电池电压、飞行模式、地速、空速、爬升速度、相对高度、飞行距离等关键参数。如下gif：

二. 代码分析与修改

1. 飞行地图文件的分析与修改

代码如下：(FlightDisplayViewMap.qml):

// Add the vehicles to the map  244行
MapItemView {                                           //标记1model: QGroundControl.multiVehicleManager.vehicles  //标记2delegate: VehicleMapItem {                            //标记3vehicle:               objectcoordinate:           object.coordinate       //标记4map:                   flightMapsize:                  mainIsMap ? ScreenTools.defaultFontPixelHeight * 3 : ScreenTools.defaultFontPixelHeight//z:              QGroundControl.zOrderVehicles  //总修改1-1}z:              QGroundControl.zOrderTopMost         //总修改1-2
}

参考：QT Creator 帮助中搜 “MapItemView”，MapQuickItem

● 标记1：MapItemView是用来构成Map的一部分的。它数据主要是源自model（ListModel、RouteModel等）。和ListView 相似，也是mode-delegate模型。仅仅不同于MapItemView的代理Delegate需要为地图控件，即位置设置为经纬度坐标。ListView的Delegate控件为桌面控件，位置设置为屏幕位置。 MapItemView类型只有在包含在Map中时才有意义，它不能独立存在。

● 标记2：model：提供数据给委托定义的mapItem(VehicleMapItem)，由它提供的信息(飞行模式、地速、空速、爬升速度、相对高度、飞行距离)作为Map ItemView的输入，下面再具体讲解。记住model 仅支持 “QAbstractItemModel” 的基础模型。

显然 “QGroundControl.multiVehicleManager.vehicles” 是 QAbstractItemModel 类型的，如下：

// src\Vehicle\MultiVehicleManager.h:100
QmlObjectListModel* vehicles(void) { return &_vehicles; }

● 标记3：delegate：定义了模型中的每个项改如何显示。要求 delegate 必须为组件，且包含一个map Item， “MapQuickItem”类型的居多。

● 标记4：coordinate：定位坐标。为什么能动态跟随，此为最关键的属性，它在C++ vehiclel 类中会实时更新。(NOTIFY修饰的属性，下文会讲到)

coordinate是“MapQuickItem”的一个属性。此属性保存MapQuickItem的锚点坐标。在地图显示时，由anchorPoint指定的sourceItem上的点与此坐标保持会一致。

在此MapItemView中。object 对应的就是 vehicles ，委托了VehicleMapItem来实现，VehicleMapItem为MapQuickItem类型的。MapQuickItem的sourceItem指定了一个Item来如何显示。该Item就是9行3列的关键参数的显示信息。

● 修改1： 此文件中仅修改一处“z” 属性，是为了让面板在顶层显示。记得放在“MapItemView”的属性下，不然不会生效，这很关键

接下来让我再看看代理中的文件吧！

2. 代理文件中数据源

上文提到 model，由它提供的飞行模式、地速、空速、爬升速度、相对高度、飞行距离的。

flightMode、roll、groundSpeed都是在“VehicleMapItem”中定义的变量。 object.flightMode、object.roll.rawValue、 object.groundSpeed.rawValue来自于“vehicles”。那么再看下 C++中的Vehicle吧

● 修改2： 在文件头增加如下属性：

//总修改2： (object = vehicle = QGroundControl.multiVehicleManager.vehicles)
property string flightMode:           vehicle.flightMode;
property real   roll:                 vehicle.roll.rawValue;
property real   groundSpeed:          vehicle.groundSpeed.rawValue;
property real   airSpeed:             vehicle.airSpeed.rawValue;
property real   climbRate:            vehicle.climbRate.rawValue;
property real   altitudeRelative:     vehicle.altitudeRelative.rawValue;
property real   flightDistance:       vehicle.flightDistance.rawValue;
property real   distanceToHome:       object.distanceToHome.rawValue;
property real   batteryPercentRemain: object.battery.percentRemaining.value
property real   batteryVoltage:       object.battery.voltage.value;

object = vehicle = QGroundControl.multiVehicleManager.vehicles ，让我们在看看vehicle类…

● C++中的Vehicle类的分析。
要在QML实时显示，那么必须是“NOTIFY”修饰的信号，它给属性关联一个信号，当属性的值发生变化时就会触发该信号。比下flightMode属性，

  Q_PROPERTY(QString              flightMode              READ flightMode             WRITE setFlightMode             NOTIFY flightModeChanged)

C++和QML之间不懂如何交互的可以点击这里：Qt Quick Qml 之QML与C++ 混合编程学习

当我们在 C++中改变该参数值时，发射 flightModeChanged 信号，来通知 qml 相关的属性有更改，进而实现相关的状态更改。没有“NOTIFY”修饰的，不会实时触发，也不会动态更新了。

但是是不是发现在Vehicle类中，一些关键的属性并没有使用NOTIFY ？

如下：

Fact* roll                              () { return &_rollFact; }
Fact* rollRate                          () { return &_rollRateFact; }
Fact* pitchRate                         () { return &_pitchRateFact; }
Fact* yawRate                           () { return &_yawRateFact; }
Fact* airSpeed                          () { return &_airSpeedFact; }
Fact* groundSpeed                       () { return &_groundSpeedFact; }
Fact* climbRate                         () { return &_climbRateFact; }

仔细分析Fact类：

class Fact : public QObject
{Q_OBJECT
...Q_PROPERTY(QString      shortDescription        READ shortDescription                                   CONSTANT)Q_PROPERTY(QString      units                   READ cookedUnits                                        CONSTANT)Q_PROPERTY(QVariant     value                   READ cookedValue            WRITE setCookedValue        NOTIFY valueChanged)Q_PROPERTY(QVariant     rawValue                READ rawValue               WRITE setRawValue           NOTIFY rawValueChanged)
}

发现“rawValue ”也用“NOTIFY”修饰了。所以问题就很简单了，直接去到 “rawValue” 就好

...
property string flightMode:           vehicle.flightMode;
property real   roll:                 vehicle.roll.rawValue;
property real   groundSpeed:          vehicle.groundSpeed.rawValue;
property real   airSpeed:             vehicle.airSpeed.rawValue;
property real   climbRate:            vehicle.climbRate.rawValue;
...

3. 代理文件中显示形式

● 修改3： 在MapQuickItem中的“ sourceItem: Item "中最后增加矩形框：

Rectangle {id:                         cchVehicleStatusView;anchors.bottom:             vehicleIcon.top;anchors.bottomMargin:  4anchors.horizontalCenter:   vehicleIcon.horizontalCenter;color:                      "#DDDDFF"radius:                     10width:                      buttonColumn.implicitWidth * 1.1height:                     buttonColumn.implicitHeight * 1.1opacity :                   0.8;border.color:               "black"border.width:               2Column {id:                 buttonColumnwidth:              statusNameRepeater.implicitWidthheight:             statusNameRepeater.implicitHeightanchors.top:        parent.topanchors.topMargin:  6anchors.left:       parent.leftanchors.leftMargin: 6spacing:            ScreenTools.defaultFontPixelHeight / 2Repeater {id:     statusNameRepeatermodel:  9property var statusNames:  [ "电池剩余百分比: ", "电池电压: ", qsTr("飞行模式："), qsTr("地速: "), qsTr("空速: "), qsTr("爬升速度: "), qsTr("相对高度: "), qsTr("飞行距离: "),"到home点距离: "]property var statusValues: [batteryPercentRemain, batteryVoltage, flightMode, groundSpeed.toFixed(2), airSpeed.toFixed(2), climbRate.toFixed(2), altitudeRelative.toFixed(2), flightDistance.toFixed(2), distanceToHome.toFixed(2)]property var statusUnits: ["%", "v", "", "(m/s)", "(m/s)", "(m/s)", "(m)", "(m)", "(m)"]Row{id: _rowQGCLabel {color:                            "#424200"horizontalAlignment:              Text.AlignHCenterfont.pointSize:                   ScreenTools.mediumFontPointSize * 1.0text:                             statusNameRepeater.statusNames[index]font.bold:                        true}QGCLabel {color:                            "#336666"horizontalAlignment:              Text.AlignHCenterfont.pointSize:                   ScreenTools.mediumFontPointSize *1.0text:                             statusNameRepeater.statusValues[index] + statusNameRepeater.statusUnits[index]font.bold:                        true}}}}
}

这个Column和Row的嵌套布局的详细解释，可以看我的 QT Quick QML 布局——定位置布局(Row、Column、Grid、Flow和Repeater) 总结。这里不再介绍。

如下绿色框中：

有其他想法的，可以在飞行视图中，增加一个控件，来配置矩形框是否显示；还可以增加一个定时器让变化的数据高亮显示；有UI美工支持的还可以弄个炫酷的皮肤。为什么要这样呢？

没有别的原因，一切为狂拽酷炫，哈哈！具体就不一一介绍啦，自己开动小脑袋瓜子哦~

关于QGC地面站其它文章请点击这里: QGC地面站

QGC地面站手把手教你改——如何添加跟随面板显示关键参数相关推荐

QGC地面站手把手教你改——如何添加qmldir模块文件
QGC中手把手教你添加qmldir模块 1. 新建qmldir文件 2. 新建QML文件 3. qrc中添加qmldir和QML文件 4. 修改qmldir和QML文件 5. 如何使用 6. pro文 ...
QGC(QGroundControl)地面站手把手教你改——高德地图的添加和瓦片地图在线资源
如何添加高德地图和瓦片地图在线资源 1. 演示效果 2. 代码添加 3. 瓦片地图在线资源 3.1 高德地图 3.2 天地图 3.3 其它地图源相关链接所有的热爱都要不遗余力,真正喜欢它便给它更高的 ...
ConvNeXt：手把手教你改模型
作者:镜子(香港中文大学计算机科学硕士) 本文经过作者同意转载 A ConvNet for the 2020s 我愿称之为2022年cv算法工程师抄作业必备手册,手把手教你改模型,把ResNet50 ...
win8r桌面的计算机图在哪调出来,Win8如何在桌面上显示“我的电脑”图标,手把手教你Win8如何在桌面上显示我的电脑...
随着Windows XP光荣退役,最近很多电脑用户都将系统升级到了Win8.1系统.不过Win8.1系统令不少小白摸不着头脑,当装好win8系统后,进入桌面后,会发现桌面上只有一个回收站图标,那些熟悉 ...
python贝叶斯优化算法_【干货】手把手教你Python实现自动贝叶斯调整超参数
[导读]机器学习中,调参是一项繁琐但至关重要的任务,因为它很大程度上影响了算法的性能.手动调参十分耗时,网格和随机搜索不需要人力,但需要很长的运行时间.因此,诞生了许多自动调整超参数的方法.贝叶斯优化 ...
pyecharts官网使用说明书---保姆级手把手教你画图版
pyecharts官网使用说明书---保姆级手把手教你画图版 1.画图脚本结构 2.参数的类型 3.参数与结构相结合 3.1图表函数 3.2add数据 3.3全局配置参数 3.4系列配置参数 4.总结 ...
笑傲江湖客户端服务器地址修改,《笑傲江湖》改键调整操作手把手教你玩笑傲...
<笑傲江湖>采用全新引擎AngelicaIII打造,秉承原著武侠精髓,首推新派动作武侠网游概念--融入动作及格斗游戏要素,强调真实的打击感与流畅的动作连贯度,并运用方向判定.位移闪避.移动 ...
苹果手机怎么在照片上添加文字_手机照片如何添加文字？原来方法这么简单，花1分钟手把手教...
手机照片如何添加文字?原来方法这么简单,花1分钟手把手教最近很多人私信笔者,手机拍摄的照片怎样添加好看的文字,今天笔者准备了4种方法,一起来看看吧! 1.自带水印功能(安卓手机) 一般人都是直接拍照 ...
wps纸张大小设置成A4_word2010页面设置：手把手教你添加页眉、页脚、页码、边框和底纹...
word 2010是目前office应用里最常用的了,那么基础的入门知识你都会了吗? 今天就来手把手教大家进行简单的页面设置. 1．添加页眉.页脚页眉位于页面的顶端,页脚位于页面的底端,它们不占用正 ...

QGC地面站手把手教你改——如何添加跟随面板显示关键参数

如何添加跟随面板显示关键参数