QGC地面站手把手教你改——电子罗盘仪表盘如何变刻度尺平移(双仪表变单仪表)
电子罗盘仪表盘如何变刻度尺平移
- 一. 演示效果
- 二. 代码添加
-
- 1. 上层代码修改
- 2. 航线刻度尺具体实现
所有的热爱都要不遗余力，真正喜欢它便给它更高的优先级，和更多的时间吧！
关于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: [email protected]
*/
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地面站