電子羅盤儀表盤如何變刻度尺平移
- 一. 演示效果
- 二. 代碼添加
- 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: 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地面站
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/255256.html
標籤：其他
上一篇：C++物件模型總結