QML Automotive Cluster Interface

Totino

Hi everyone!

I started learning Qt and QML with a simple (and orrible :D) project of an Automotive Cluster Instrument interface. Below you can find the code for my project:

Automotive Cluster Interface Project

I'm struggling trying to place the needle.png image right on the same position as the guideline (CircularGauge.qml). I tried also the rotation (commented in the code) but I can't find the correct value of the rotation and the correct position of the needle. The result I have obtained is in the pic below:

I have also implemented some logic with C++ code trying to animate the needle when the key "W" and "S" are pressed, just like a real car, simulating the acceleration and the deceleration. I think that the logic should be correct, but I can't connect this code to QML to control the animation. The logic is implemented in the C++ class (ControlLogic.h, ControlLogic.cpp).

I want first to get the right position of the needle and then add an animation that moves with the control logic implemented. I also asked ChatGPT to help on this topics but it give me always the same incorrect answer. Any advice is welcome, also some tips to improve the code.

Thank you everyone!

JoeCFD

Had a quick look at your code.
engine.rootContext()->setContextProperty("controlLogic", &controlLogic);
controlLogic is visible to your qml files. But nowhere it is applied. Maybe use Connections inside your QML files to catch signals from controlLogic to make control changes.

Totino

@JoeCFD Thank you, I was thinking about the connections, so I will read the docs on this. Any advice on how to place the two dials correctly?

Totino

I have updated the code, now the two dials match exactly the position but the animation is not rotating on the central point of the gauges.. if you want to reproduce and suggest something to resolve, you can get the updated code HERE

JoeCFD

@Totino add the following in your main.qml?

    Connections: {
        target: controlLogic

        function onRpmChanged()() {
             console.log( "rpm changed ")
        }

        function onSpeedChanged()() {
            console.log( "speed changed ")
        }
    }

crimson1023

Hi, I can't access your project.

However you can refer to this documentation.
https://doc.qt.io/qt-5/qtqml-cppintegration-topic.html

And then @JoeCFD 's guide that is using setContextProperty in main.cpp and Connections for .qml is really useful. Follow it.

JoeCFD

@crimson1023 said in QML Automotive Cluster Interface:

setContextProperty

ContextProperties are outdated and shouldn’t be used for Qt 6.5+ Apps from here:
ekkesapps.wordpress.com/qt-6-in-action/qmake-cmake/qml_singleton/

Totino

Hi @crimson1023 I have leaved a comment with the new updated project you can see that in the link. My problem now is that I can't rotate the dials correctly.. Also thank you @JoeCFD but I don't understand how to set the connection between my C++ class and my QML code. I must use the connections but I can't write the code properly