QML仿 大疆ipad地面站 底部仪表盘

主要 利用QML  自带 Dial类型 和 Canvas 实现

1,主文件 BottomInfo.qml

import QtQuick 2.0
import QtQuick.Layouts 1.3

import QGroundControl               1.0
import QGroundControl.FlightDisplay 1.0
import QGroundControl.FlightMap     1.0
import QGroundControl.ScreenTools   1.0
import QGroundControl.Controls      1.0
import QGroundControl.Palette       1.0
import QGroundControl.Vehicle       1.0
import QGroundControl.Controllers   1.0
import QGroundControl.FactSystem    1.0

Item {
    id:root
    property var _activeVehicle:        QGroundControl.multiVehicleManager.activeVehicle
    readonly property real _outerRingRatio: 0.95
    readonly property real _innerRingRatio: 0.80
    property var bottomWidth: 800

    Rectangle{
        id:rootRectangle
        anchors.left: parent.left
        anchors.bottom: parent.bottom
        color: "black"
        opacity: 0.8
        height: 100
        width: bottomWidth


        RowLayout{
            id:rowLayout
            width: parent.width
            height: parent.height
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            spacing: 20

            CustomDial{
                id:remainFlight
                anchors.bottom: parent.bottom

                dialText: qsTr("剩余航程")
                dialMax: 10
                width: 100
                height: 100
                dialUnit:"M"
            }


            Rectangle{
                width: 1
                height: parent.height
                anchors.top: parent.top
                anchors.bottom: parent.bottom
            }
            CustomDial{
                id:heightDial
                anchors.bottom: parent.bottom

                dialText: qsTr("高度")
                dialMax: 10
                width: 100
                height: 100
                dialUnit:"M"
            }
            Item {
                id:attitudeItem
                width:  150
                height: outerCompass.height
                anchors.bottom: parent.bottom
                CompassRing {
                    id:                 outerCompass
                    size:               parent.width * _outerRingRatio
                    vehicle:            _activeVehicle
                    anchors.horizontalCenter: parent.horizontalCenter
                    visible:            true //!_showLargeCompass
                }

                QGCAttitudeWidget {
                    id:             attitudeWidget
                    size:           parent.width * _innerRingRatio
                    anchors.centerIn:   outerCompass
                    vehicle:_activeVehicle
                    showHeading:        true //!_showLargeCompass
                    _rollAngle:   _activeVehicle ? _activeVehicle.roll.rawValue  : 0
                    _pitchAngle:  _activeVehicle ? _activeVehicle.pitch.rawValue : 0
                }
            }

            CustomDial{
                id:verticalSpeedDial
                anchors.bottom: parent.bottom
                dialText: qsTr("垂直速度")
                dialMax: 10
                width: 100
                height: 100
            }

            Rectangle{
                width: 1
                height: parent.height
                anchors.top: parent.top
                anchors.bottom: parent.bottom
            }
            CustomDial{
                id:horizontalSpeedDial
                anchors.bottom: parent.bottom
                dialText: qsTr("水平速度")
                width: 100
                height: 100
                dialMax: 10
                dialValue:_activeVehicle?_activeVehicle.groundSpeed.valueString:0
            }
        }
    }
}

 

2,速度 仪表盘 CustomDial.qml

import QtQuick 2.2
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4

Rectangle{
    id:dial_rect
    width: 170
    height: 170
    border.width: 10
    border.color: Qt.rgba(0,0,0)
    color: Qt.rgba(0,0,0)
    radius: width/2

    property var dialText: qsTr("速度")
    property var dialMax: 10
    property var dialMin: 0
    property var dialValue: 8
    property string dialUnit: " M/s"
    Dial {
        id:dial
        value: dialValue
        enabled: false
        Text {
            anchors.centerIn: parent
            id: value_text
            color:"white"
            font.family: "黑体"
            font.bold: false
            font.pixelSize: 10
            text:dialText
        }
        Text{
            id:mode_text;
            y:parent.height/2+value_text.height
            x:parent.width/2+5
            font.pixelSize: 18
            text: dial.value.toFixed(1).toString()+dialUnit
            color: "white"
            font.family: "方正兰亭超细黑简体"
        }

        anchors.centerIn: parent
        tickmarksVisible: false
        stepSize: 0.1
        maximumValue: dialMax
        minimumValue: dialMin
        onValueChanged: {
            canvas.requestPaint()
            console.log(value)
        }
        Canvas{
            id:canvasGray
            width: dial_rect.width
            height: dial_rect.height
            anchors.centerIn: parent
            contextType: "2d"
            antialiasing:true
            onPaint: {
                var ctx = getContext("2d")
                ctx.clearRect(0, 0, width, height)
                ctx.lineWidth = 15
                ctx.strokeStyle = "gray"
                ctx.fillStyle = "transparent"
                ctx.beginPath()
                ctx.arc(width/2,height/2,width/2-15,Math.PI/2,Math.PI*2)
                ctx.fill()
                ctx.stroke()

            }
        }

        Canvas{
            id:canvas
            width: dial_rect.width
            height: dial_rect.height
            anchors.centerIn: parent
            contextType: "2d"
            antialiasing:true
            onPaint: {
                var ctx = getContext("2d")
                ctx.clearRect(0, 0, width, height)
                ctx.lineWidth = 15
                ctx.strokeStyle = "#0efa88"
                ctx.fillStyle = "transparent"
                ctx.beginPath()
                var endAngle = Math.PI/2+(dial.value/(dial.maximumValue-dial.minimumValue)*Math.PI*3/2)
                ctx.arc(width/2,height/2,width/2-15,Math.PI/2,endAngle)
                ctx.fill()
                ctx.stroke()

            }
        }
        style: DialStyle {
            labelInset: 0
            handle :Rectangle{
            }
            background: Rectangle{
                color:Qt.rgba(0,0,0)
                implicitWidth: dial_rect.width
                implicitHeight: dial_rect.height
                radius: implicitWidth/2
                border.color: Qt.rgba(0,0,0)
                border.width: 2
                Rectangle{
                    anchors.centerIn: parent
                    width: dial_rect.width
                    height: dial_rect.height
                    color: "black"
                    radius: width/2
                    //opacity: 0.08;
                }
            }
        }
    }
}

 

三，利用 QGC 自定义指令 测试