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


  • Moderators

    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
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.