Guia per a desenvolupar l'ex07 dels exercicis de QML

ex07a_01

ex07a_01.pro

QT += quick mqtt
// ...

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12 

Window {
   width: 640
   height: 480
   visible: true
   title: qsTr("ex07a - v0.1")
   EstatMqtt{
       anchors.centerIn: parent
   }
}

EstatMqtt.qml

import QtQuick 2.4

EstatMqttForm {
}

EstatMqttForm.ui.qml

import QtQuick 2.4
import QtQuick.Controls 2.15

Item {
   id: item1
   width: 400
   height: 400
   property alias btConnecta: btConnecta
   property alias textInfo: textInfo

   Text {
       id: textInfo
       y: 56
       height: 53
       color: "#ee2222"
       text: qsTr("MQTT desconnectat")
       anchors.left: parent.left
       anchors.right: parent.right
       anchors.bottom: btConnecta.top
       font.pixelSize: 35
       horizontalAlignment: Text.AlignHCenter
       anchors.bottomMargin: 25
       anchors.rightMargin: 10
       anchors.leftMargin: 10
       font.bold: true
   }

   Button {
       id: btConnecta
       x: 164
       y: 214
       text: qsTr("&Connecta")
       anchors.verticalCenter: parent.verticalCenter
       anchors.horizontalCenter: parent.horizontalCenter
   }
}

ex07a_02

EstatMqttForm.ui.qml

   property alias btLedBlanc: btLedBlanc

   Button {
       id: btLedBlanc
       x: 169
       text: qsTr("Encén led blanc")
       anchors.top: btConnecta.bottom
       anchors.horizontalCenterOffset: 0
       anchors.topMargin: 25
       anchors.horizontalCenter: btConnecta.horizontalCenter
       enabled: false
   }

main.qml

   title: qsTr("ex07a - v0.2")
   EstatMqtt{
       anchors.centerIn: parent

       btConnecta.onClicked: {
           textInfo.text = (textInfo.text === qsTr("MQTT desconnectat"))?qsTr("MQTT connectat"):qsTr("MQTT desconnectat")
           textInfo.color = (textInfo.text === qsTr("MQTT desconnectat"))?"#ee2222":"#22ee22"
           btConnecta.text = (textInfo.text === qsTr("MQTT desconnectat"))?qsTr("&Connecta"):qsTr("Des&connecta")
           btLedBlanc.enabled = (textInfo.text === qsTr("MQTT desconnectat"))?false:true
       }
       btLedBlanc.onClicked: {
           btLedBlanc.text = (btLedBlanc.text === qsTr("Encén led blanc"))?qsTr("Apaga led blanc"):qsTr("Encén led blanc")
       }
   }

ex07a_03

rerefonsmqtt.h

#ifndef REREFONSMQTT_H
#define REREFONSMQTT_H

#include <QObject>
#include <QMqttClient>

class RerefonsMqtt : public QObject
{
   Q_OBJECT
public:
   explicit RerefonsMqtt(QObject *parent = nullptr);

signals:
   void senyalEstatConnexioMqtt(int nEstatConnexioMqtt);

public slots:
   void vBotoConnectaDesconnectaMqtt();

private:
   int m_nEstat;
};

#endif // REREFONSMQTT_H

rerefonsmqtt.cpp

#include "rerefonsmqtt.h"

RerefonsMqtt::RerefonsMqtt(QObject *parent) : QObject(parent)
{
   m_nEstat = 1;
}

void RerefonsMqtt::vBotoConnectaDesconnectaMqtt(){
   if(m_nEstat > 2)
       m_nEstat = 0;

   emit senyalEstatConnexioMqtt(m_nEstat++);
}

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>

#include "rerefonsmqtt.h"

int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
   QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif

   QGuiApplication app(argc, argv);

   qmlRegisterType<RerefonsMqtt>("desDel.rerefonsMqtt",1,0,"RerefonsMqtt");

   QQmlApplicationEngine engine;
   const QUrl url(QStringLiteral("qrc:/main.qml"));
   QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                    &app, [url](QObject *obj, const QUrl &objUrl) {
       if (!obj && url == objUrl)
           QCoreApplication::exit(-1);
   }, Qt::QueuedConnection);
   engine.load(url);

   return app.exec();
}

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12 // <---
import desDel.rerefonsMqtt 1.0 // <---

ApplicationWindow { // <--- !!!!
   width: 640
   height: 480
   visible: true
   title: qsTr("ex07a - v0.3")

   RerefonsMqtt{ // <--- !!!!
       id: rfMqtt

       onSenyalEstatConnexioMqtt: {
           console.log(nEstatConnexioMqtt)
       }
   }

   EstatMqtt{
       id: eMqtt // <--- !!!!

       anchors.centerIn: parent

       btConnecta.onClicked: {
           textInfo.text = (textInfo.text === qsTr("MQTT desconnectat"))?qsTr("MQTT connectat"):qsTr("MQTT desconnectat")
           textInfo.color = (textInfo.text === qsTr("MQTT desconnectat"))?"#ee2222":"#22ee22"
           btConnecta.text = (textInfo.text === qsTr("MQTT desconnectat"))?qsTr("&Connecta"):qsTr("Des&connecta")
           btLedBlanc.enabled = (textInfo.text === qsTr("MQTT desconnectat"))?false:true

           rfMqtt.vBotoConnectaDesconnectaMqtt() // <--- !!!!
       }
       btLedBlanc.onClicked: {
           btLedBlanc.text = (btLedBlanc.text === qsTr("Encén led blanc"))?qsTr("Apaga led blanc"):qsTr("Encén led blanc")
       }
   }
}

ex07a_04

main.qml

ApplicationWindow { 
   id: aw
   width: 640
   height: 480
   visible: true
   title: qsTr("ex07a - v0.4")

   function actualitzaFrontal(nEstatConnexioMqtt){
       switch(nEstatConnexioMqtt){
       case 0:
           eMqtt.textInfo.text = qsTr("MQTT desconnectat")
           eMqtt.textInfo.color = "#ee2222"
           eMqtt.btConnecta.text =qsTr("&Connecta")
           eMqtt.btConnecta.enabled = true
           eMqtt.btLedBlanc.enabled = false
           break;
       case 1:
           eMqtt.textInfo.text = qsTr("MQTT connectant")
           eMqtt.textInfo.color = "#2222ee"
           //eMqtt.btConnecta.enabled = false
           eMqtt.btLedBlanc.enabled = false
           break;
       case 2:
           eMqtt.textInfo.text = qsTr("MQTT connectat")
           eMqtt.textInfo.color = "#22ee22"
           eMqtt.btConnecta.text =qsTr("Des&connecta")
           eMqtt.btConnecta.enabled = true
           eMqtt.btLedBlanc.enabled = true
           break;
       }
   }

   RerefonsMqtt{ 
       id: rfMqtt

       onSenyalEstatConnexioMqtt: {
           console.log(nEstatConnexioMqtt)
           aw.actualitzaFrontal(nEstatConnexioMqtt)
       }
   }

   EstatMqtt{
       id: eMqtt // <--- !!!!
       anchors.centerIn: parent

       btConnecta.onClicked: {
           rfMqtt.vBotoConnectaDesconnectaMqtt() // <--- !!!!
       }
       btLedBlanc.onClicked: {
           btLedBlanc.text = (btLedBlanc.text === qsTr("Encén led blanc"))?qsTr("Apaga led blanc"):qsTr("Encén led blanc")
       }
   }
}

ex07a_05

credencials.h

#ifndef CREDENCIALS_H
#define CREDENCIALS_H

#define BROKER_NAME "formacio.things.cat"
#define BROKER_PORT 1883
#define BROKER_USER "ecat"
#define BROKER_PASSWORD "clotClot"

#endif // CREDENCIALS_H

rerefonsmqtt.h

#include <QMqttClient>
#include "credencials.h"
// ...
private:
   int m_nEstat;
   QMqttClient *m_client;

private slots:
   void updateLogStateChange();
   void brokerDisconnected();
// ...