Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Speedometer with QML



  • 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



  • 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
            }
        }
    }
    


  • @Wieland

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

    Best regards

    Snoopy


Log in to reply