Speedometer with QML

Snoopy

Hello,

I want to develop a speedometer-control like a circular gauge in a car. I want to show the speed with the needle
and additionally I want to so set the speed by moving the needle like a handle with touch gesture.

Which control from QML would be the best to make it ? QML offers three controls:
Circular Gauge and Dial in Qt Quick Extras, and a Dial in Quick Controls 2.

Has somebody an idea or experience in this topic ?

Thanks

Best regards

Snoopy

? Offline

Hi! Here's a small example which is written entirely in QML:

MyGauge.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

Item {
    id: myGauge

    property real size: 400;
    property real angle: 0

    // private:

    width: size;
    height: size;

    Rectangle {
        id: background
        anchors.fill: parent
        color: "grey";
        radius: myGauge.size / 2.0;
        border.color: "red";
        border.width: 5;
    }

    Rectangle {
        id: needle

        property real len: myGauge.size / 2.0 * 0.85;
        property real w: 10;

        color: "white";
        width: w;
        height: len
        antialiasing: true;

        transform: [
            Rotation { origin.x: 0; origin.y: 0; angle: myGauge.angle; }
            , Translate { x: myGauge.size / 2.0 - needle.w / 2.0; y: myGauge.size / 2.0 - needle.w / 2.0 }
        ]
    }

    MouseArea {
        anchors.fill: parent
        property bool isDragMode: false
        hoverEnabled: true;

        function setAngleFromPosition(px, py) {
            var y1 = myGauge.size / 2.0;
            var x1 = myGauge.size / 2.0;
            var y2 = py;
            var x2 = px;

            var m = (y2 - y1) / (x2 - x1);
            var alpha = Math.atan(m) * (180.0 / Math.PI);;

            if (x2 < x1) {
                myGauge.angle = alpha + 90;
            } else {
                myGauge.angle = alpha + 270;
            }
        }

        onReleased: isDragMode = false;

        onPressAndHold: {
            isDragMode = true;
            setAngleFromPosition(mouse.x, mouse.y)
        }

        onPositionChanged: {
            if (!isDragMode)
                return;
            setAngleFromPosition(mouse.x, mouse.y)
        }
    }

}

main.qml

import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    color: "white";

    Row {
        MyGauge {
            id: myGauge
            onAngleChanged: spinBox.value = angle
        }
        SpinBox {
            id: spinBox
            from: 0
            to: 360
            stepSize: 1
            onValueModified: myGauge.angle = value
        }
    }
}

Snoopy

@Wieland

Thank you for the example. Looks very good. I think I can use it as starting point to the topic.

Best regards

Snoopy

Sattiy

@Snoopy Hello, if you have completed the assignment, would you mind sharing the source code or github repository if you have mad e any that would be a great help