QGC地面站手把手教你改——电子罗盘仪表盘如何变刻度尺平移(双仪表变单仪表)

---

所有的热爱都要不遗余力，真正喜欢它便给它更高的优先级，和更多的时间吧！

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

---

一. 演示效果

    姿态仪表盘和电子罗盘双仪表当然非常好，但如果能整合到一个仪表上当然也不错，这里仅是提供了一种思路而已。老规矩看下面的航向刻度，就是今天要实现的目标，清晰度不够，将就下~

并没有关闭原来的电子罗盘仪表盘，这样也可以对比下数据正确性和效果。

二. 代码添加

本文是在v4.0.11源码上修改，各个版本的完整源码，包括最新的Stab_v4.1，可以点击这里。

1. 上层代码修改

     首先定位到姿态显示源码位置上，恩，就是在 “src\FlightMap\Widgets\QGCInstrumentWidget.qml” 中，在此中修改三处，具体见注释，省略部分代码

//QGCInstrumentWidget.qml

import QtQuick 2.3
...

Rectangle {
    id:             root
    ...
    property real   _availableValueHeight: maxHeight - (root.height + _valuesItem.anchors.topMargin)

    ///--YAW刻度修改1: +1  航向角的数据源
    property real   _heading:         activeVehicle ? activeVehicle.heading.rawValue : 0

    // Prevent all clicks from going through to lower layers
    DeadMouseArea {
        anchors.fill: parent
    }

    QGCPalette { id: qgcPal }

	//姿态仪表盘的显示
    QGCAttitudeWidget {
        id:                 attitude
        anchors.leftMargin: _topBottomMargin
        anchors.left:       parent.left
        size:               _innerRadius * 2
        vehicle:            activeVehicle
        anchors.verticalCenter: parent.verticalCenter
    }
    
    ///--YAW刻度修改2: +11   刻度的调用，里面具体的实现往后看
    CCHYawIndicator {
        id:                         yawWidget
        width:                      parent.width
        height:                     20
        anchors {
            horizontalCenter:       parent.horizontalCenter
            top:                    parent.bottom;
            topMargin:              ScreenTools.defaultFontPixelHeight / 4
        }
        _headingAngle:              _heading;
    }
    
    //电子罗盘仪表盘的显示
    QGCCompassWidget {
        id:                 compass
        anchors.leftMargin: _spacing
        anchors.left:       attitude.right
        size:               _innerRadius * 2
        vehicle:            activeVehicle
        anchors.verticalCenter: parent.verticalCenter
    }

	//数值的显示，其中修改只需要在刻度尺下面就好
    Item {
        id:                 _valuesItem
        anchors.topMargin:  ScreenTools.defaultFontPixelHeight / 4

        ///--YAW刻度修改3: -1+1
//      anchors.top:        parent.bottom
        anchors.top:        yawWidget.bottom

        width:              parent.width
        height:             _valuesWidget.height
        visible:            widgetRoot.showValues
	...
    }
}

2. 航线刻度尺具体实现

     核心代码如下，通过Repeater重复矩形刻度和数值，然后通过平移来实现航向角的变化。

     设计中，将每一刻度间隔实际相差14，刻度宽为1，同时把两刻度间的实际角度也设定为15。这样就是1宽度代表了1个yaw的角度。

property int   _scale:          15 //一个小刻度代表15°

Row{
    id: _ccYawIndicatorRow;
    anchors.horizontalCenter: parent.horizontalCenter
    spacing: (_scale-1)                             //每一个刻度的间距，本身宽度为1
    Repeater {
        id:                                     _ccYawIndicatorRep;
        model:                                  24+16+1 //对应yaw的360°
        Rectangle {
            property int yaw: getYawValue(modelData)

            width:                              1;
            height:                             (yaw % (_scale*2)) === 0 ? _longDash : _shortDash
            color:                              "#66FFFF"//_color
            antialiasing:                       true
            smooth:                             true
            QGCLabel {
                ...
                text:                           getESWN(yaw) //_yaw3;
                color:                          "#66FFFF"//_color
                visible:                        (yaw != 360) && ((yaw % (_scale*2)) === 0)
            }
        }
    }
}
//刚开始的时候，指针在180°，指向0°的话需要右移180°，对应需要平移多少宽度呢？
//15°对应15的实际距离  1°对应了1的实际距离
transform: [ Translate {
         x:  -_headingAngle + 180 + 1  //向右平移180
        }]

完整代码如下，注意多看注释，新增文件"CCHYawIndicator.qml" 完整路径如下：

qgroundcontrol\src\FlightMap\Widgets\CCHYawIndicator.qml

/**
 *   @brief QGC Yaw Indicator
 *   @author: chuck_chee@163.com
 */
import QtQuick 2.3
import QGroundControl.ScreenTools 1.0
import QGroundControl.Controls 1.0

Rectangle {
    border.color:                   "white"
    border.width:                   1
    color:                          "black"
    radius:                         height/2

    property real _headingAngle
    property real _longDash:        height/2 *0.8
    property real _shortDash:       _longDash*0.7
    property color _color:          "white"
    property int   _scale:          15 //一个小刻度代表15°

    /* 0~8~32~40  15°一个刻度  120/15 = 8  360/15=24
    0~8:  对应的240°~360° ，为了看起来像个循环，左边多120°
    8~32：对应的0~360°
    32~40: 对应的0~120°，为了看起来像个循环，右边多120°
    */
    function getYawValue(inputYaw) {
        var outputYaw = 0
        if(inputYaw >= 32) {
            outputYaw = (inputYaw-32)*_scale
        }
        else if((inputYaw >= 8) && (inputYaw < 32)) {
            outputYaw = (inputYaw-8)*_scale
        }
        else if(inputYaw < 8) {
            outputYaw = (16+inputYaw) * _scale   //  (24-(8-x))*15
        }
        return outputYaw
    }

    //省略了NE、SE、SW、NW四个特殊方位
    function getESWN(yaw) {
        var yawESWN
        if(yaw === 0) {
            yawESWN = "N"
        }else if(yaw === 90) {
            yawESWN = "E"
        }else if(yaw === 180) {
            yawESWN = "S"
        }else if(yaw === 270) {
            yawESWN = "W"
        }else {
            yawESWN = yaw
        }
        return yawESWN
    }

    ///固定的黄色箭头，黄色箭头资源自己添加哦，我在阿里巴巴矢量图上找的
    QGCColoredImage {
        height:                 parent.height*0.8
        width:                  height * 2
        source:                 "/qmlimages/downArrow.svg"
        fillMode:               Image.PreserveAspectFit
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top:            parent.top
        anchors.topMargin:      -4
        color:                  "yellow"
    }

    //为了把左右两边的刻度剪掉，另加一个Item
    Item {
        height:                         parent.height
        width:                          parent.width - (radius*2)  //为了把左右两边的刻度剪掉
        anchors.horizontalCenter:       parent.horizontalCenter
        clip: 							true             //开启剪切功能, 最外层剪切，很重要

        Item {
            width : parent.width;
            height: parent.height;
            Row{
                id: _ccYawIndicatorRow;
                anchors.horizontalCenter: parent.horizontalCenter
                spacing: (_scale-1)                             //每一个刻度的间距，本身宽度为1
                Repeater {
                    id:                                     _ccYawIndicatorRep;
                    model:                                  24+16+1 //对应yaw的360°
                    Rectangle {
                        property int yaw: getYawValue(modelData)

                        width:                              1;
                        height:                             (yaw % (_scale*2)) === 0 ? _longDash : _shortDash
                        color:                              "#66FFFF"
                        antialiasing:                       true
                        smooth:                             true
                        QGCLabel {
                            anchors.horizontalCenter:       parent.horizontalCenter
                            anchors.verticalCenter:         parent.verticalCenter
                            anchors.verticalCenterOffset:   _longDash;
                            smooth:                         true
                            font.pointSize:                 ScreenTools.defaultFontPointSize * 0.85
                            font.bold:                      true
                            text:                           getESWN(yaw) //_yaw3;
                            color:                          "#66FFFF"//_color
                            visible:                        (yaw != 360) && ((yaw % (_scale*2)) === 0)
                        }
                    }
                }
            }

            //刚开始的时候，指针在180°，指向0°的话需要右移180°，对应需要平移多少宽度呢？
            //15°对应15的实际距离  1°对应了1的实际距离
            transform: [ Translate {
                     x:  -_headingAngle + 180 + 1  //向右平移180
                    }]
        }

    }
}

这只是单仪表的一个思路，顺便可以再学学QML的Repeater 、Translate 等，如能再整合空速、地速、相对高度、海拔高速等更好啦。

---

以上有任何我没写明白或错误的欢迎留言，我会一直在的~

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