Unsolved 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
-
@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