基于QML的飞行仪表

飞行仪表

以下来自百度百科：
飞行仪表是测定和表示飞机数据的工具，飞机中必不可少的一部分，飞行员根据飞行仪表表示的数据才能正确地做出判断。
飞行员在飞行时，特别是无外界视觉参考的仪表飞行时，必须参考飞行仪表的数据，才能顺畅地飞行。
良好的飞行仪表设计可以使飞行员与飞机进行良好的人机交互，既减轻飞行员的负担又避免出错，切实提高人机工效。

来源

在GitHub上找到几个飞行仪表的项目，下载了一个基于Qml的项目，源代码看起来也很简单，不过对于我这样还没入门的来说，还是有很大的学习价值和参考意义的，原来可以这么简单。不过现在还没弄清楚一些仪表的工作原理，还有Qml中.svg文件是怎么制作出来的。与C++的交互还是要进一步消化，这里把交互部分先省去，以后再添加。
简单起见，这次仅搬来了基本的六个仪表（Basic Six），后续把所有的都搬过来吧。

代码

来看一下姿态表的代码，姿态改变的时候，有部分是要做变形处理的：

import QtQuick 2.0

Item {
    width: 2 * radius
    height: 2 * radius

    required property double radius
    property double roll: 0
    property double pitch: 0
    readonly property double pixelPerDegree: 1.7

    property double deltaFaceX: 0
    property double deltaFaceY: 0

    onRollChanged: update()
    onPitchChanged: update()

    function update()
    {
        var tempPitch = pitch
        if(tempPitch < -20) tempPitch = -20
        if(tempPitch > 20) tempPitch = 20

        deltaFaceX = (face.width  / 240) * pixelPerDegree * tempPitch * Math.sin(Math.PI * roll / 180.0)
        deltaFaceY = (face.height / 240) * pixelPerDegree * tempPitch * Math.cos(Math.PI * roll / 180.0)
    }


    CustomImage {
        anchors.fill: parent
        source: "../Resources/ai/ai_back.svg"
        rotation: -roll
    }

    CustomImage {
        id: face
        anchors.fill: parent
        source: "../Resources/ai/ai_face.svg"

        transform: [
            Rotation {
                origin.x: 0.5 * face.width
                origin.y: 0.5 * face.height
                axis {
                    x: 0
                    y: 0
                    z: 1
                }
                angle: -roll
            },

            Translate {
                x: deltaFaceX
                y: deltaFaceY
            }
        ]
    }

    CustomImage {
        anchors.fill: parent
        source: "../Resources/ai/ai_ring.svg"
        rotation: -roll
    }

    CustomImage {
        anchors.fill: parent
        source: "../Resources/ai/ai_case.svg"
    }
}

主Qml代码如下：

import "sixbasic"
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.0

Window {
    minimumWidth: 800
    minimumHeight: 600
    title: "Basic Six"
    color: "#ffffff"
    visible: true

    GridLayout{
        columns: 3
        anchors
        {
            fill:parent
            margins: 16
        }

        Item {
            Layout.fillWidth: true
            Layout.fillHeight: true

            AirspeedIndicator {
                radius: 0.5 * Math.min(parent.width, parent.height)
//                airspeed: pfd.airspeed
            }
        }

        Item {
            Layout.fillWidth: true
            Layout.fillHeight: true

            AttitudeIndicator{
                radius: 0.5 * Math.min(parent.width,parent.height)
//                roll: pfd.roll
//                pitch: pfd.pitch
            }
        }

        Item {
            Layout.fillHeight: true
            Layout.fillWidth: true

        Altimeter{
            radius: 0.5 * Math.min(parent.width, parent.height)
//            altitude: pfd.altitude
//            pressure: pfd.pressure
            }
        }

        Item{
            Layout.fillWidth: true
            Layout.fillHeight: true

            TurnCoordinator {
                radius: 0.5 * Math.min(parent.width, parent.height)
//                turnRate: pfd.turnRate
//                slipSkid: pfd.slipSkid
            }
        }


        Item {
            Layout.fillWidth: true
            Layout.fillHeight: true

            HeadingIndicator {
                radius: 0.5 * Math.min(parent.width, parent.height)
//                heading: pfd.heading
            }
        }

        Item {
            Layout.fillWidth: true
            Layout.fillHeight: true

            VerticalSpeedIndicator {
                radius: 0.5 * Math.min(parent.width, parent.height)
//                climbRate: pfd.climbRate
            }
        }

    }
}

运行结果

数据均为初始化数据。

引用

感谢berkbavas及其他贡献者！！
berkbavas /QmlFlightInstruments