How to handle qt c++ with qml by keeping MVC architcture

Question

I have a gauge.qml as shown below

Gauge.qml

Item {
    property real gaugevalue //this determine the gaugevalue.
    width: 100
    height: 100

    Rectangle {

        Image {
            x: 0
            y: 0
            source: "qrc:/gaugebg.png"
        }

        Image {
            x: 50
            y: 49
            source: "qrc:/needle.png";
            rotation: 0
            // I am doing some rotation logic with gaugevalue. please ignore logic for now
            transform: Rotation {
                origin.x: 10; origin.y:10;
                angle: gaugevalue
            }
        }
    }
 }

Also, I have a main.qml as shown below, in which I have placed my gauge

main.qml

Window {
    id: main
    width: 640
    height: 480

    //gauge position
    property int gaugeX: 50
    property int gaugeY: 60

    Gauge {
        id : id_gauge
        gaugevalue : 50  //Now I am setting the gaugevalue from here. I need this to be controlled from my GaugeController class. 

        x:gaugeX
        y:gaugeY
    }
}

What I am trying to achieve is make my code fit into MVC architecture. I am planning to write a 'GaugeController' class in C++ which will set the 'gaugevalue' (and more properties later). I really confused by reading many articles which leads to think in different way (I see many solution like using Q_PROPERTY or setProperty etc. (refer to this link : https://www.zhieng.com/exposing-qml-object-pointer-to-cc/). So It would be great if you could correct my code to achieve this in MVC architecture.

Answer 1

using qmlRegisterType<>() and then create an instance of GuageController in your QML file which can be used to control Guage by passing values via signals/slots

---

main.cpp

    qmlRegisterType<GaugeController>("myApp", 1, 0, "GaugeController");

---

main.qml

import myApp 1.0
...
GaugeController {
         id: id_controller

         // heres how you implment a method as a SLOT via QML
         onGaugeValueChanged(gaugeValue): {
            id_gauge.gaugeValue = id_controller.gaugeValue
          }
}

---

gaugeController.cpp

class GaugeController : public QQuickItem
{
    Q_OBJECT


    // Q_PROPERTY MACRO allows the property to be read by QML
    Q_PROPERTY(int gaugeValue READ gaugeValue WRITE setGaugeValue NOTIFY gaugeValueChanged)

public: 


    int gaugeValue() { return _gaugeValue; };

signals:

    void gaugeValueChanged();
public slots:
    void setGaugeValue(newVal) { _gaugeValue = newVal; }

private: 

    int _gaugeValue;

---

** EDIT **

from main.qml to pass parameters to GuageController

 GaugeController {
       id: controller
       gaugeValue:  10
  }
  //  or

  function myfunction {   controller.gaugeValue = 5 }