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

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 }