i'm trying to create a speed gauge with a custom needle, and when i try to run the code weird things happen to my needle. It has it's own qml file the code is down below and i called it as a omponent in my speed.qml .this is how my needle is behaving :(https://i.sstatic.net/rh0cVYkZ.png) (https://i.sstatic.net/TpuNlgJj.png)it just keeps going back and forth between those two positions.this is the speedNeedle.qml code:
import QtQuick 6.2Item { id: speedNeedle property int value: 0 property int startAngle: 0 property real angleLength: 1.0 width: parent.width height: parent.height Rectangle { id: needle width: speedNeedle.width * 0.02 height: speedNeedle.height * 0.45 color: "red" anchors.horizontalCenter: parent.horizontalCenter antialiasing: true y: id_root.height * 0.05 transform: Rotation { origin.x: needle.width / 2 origin.y: needle.height angle: speedNeedle.startAngle + speedNeedle.value * speedNeedle.angleLength } }}
and this is the speed.qml code:
import QtQuick 6.2import QtQuick.Controls 6.2Item { id: id_root property int value: 0 Rectangle { id: id_speed property int numberIndexs: 11 property int startAngle: 234 property int angleLength: 23 property int maxSpeed: 200 anchors.centerIn: parent height: Math.min(id_root.width, id_root.height) width: height radius: width / 2 color: "black" border.color: "light green" border.width: id_speed.height * 0.02 Repeater { model: id_speed.numberIndexs Item { height: id_speed.height / 2 transform: [ Rotation { origin.x: 0 origin.y: id_speed.height / 2 angle: index * id_speed.angleLength + id_speed.startAngle } ] x: id_speed.width / 2 Rectangle { height: id_speed.height * 0.05 width: height / 2 color: "light green" antialiasing: true anchors.horizontalCenter: parent.horizontalCenter anchors.top: parent.top anchors.topMargin: id_speed.height * 0.03 } Text { anchors.horizontalCenter: parent.horizontalCenter x: 0 y: id_speed.height * 0.09 color: "light green" rotation: 360 - (index * id_speed.angleLength + id_speed.startAngle) text: index * (id_speed.maxSpeed / (id_speed.numberIndexs - 1)) font.pixelSize: id_speed.height * 0.05 font.family: "Comic Sans MS" } } } } Rectangle { id: id_center anchors.centerIn: parent height: id_speed.height * 0.1 width: height radius: width / 2 color: "red" } Text { anchors.horizontalCenter: parent.horizontalCenter anchors.top: id_speed.verticalCenter anchors.topMargin: id_speed.height * 0.1 text: "Speed\n km/h" color: "light green" font.pixelSize: id_speed.height * 0.1 font.family: "Comic Sans MS" } SpeedNeedle { id: id_speedNeedle anchors { top: id_speed.top bottom: id_speed.bottom horizontalCenter: parent.horizontalCenter } value: id_root.value startAngle: id_speed.startAngle angleLength: id_speed.angleLength / (id_speed.maxSpeed / (id_speed.numberIndexs - 1)) }}
any ideas how to fix it also if you have any suggestion on how to improve my code you are welcome to tell me and thank you!
i tried using other code alternatives given by chatgpt but it still the same problem.i'm expecting when i run the application my needle stays in one position which is the first value(in this case is 0).