Guia per a desenvolupar l'ex07 dels exercicis de QML
Salta a la navegació
Salta a la cerca
Contingut
Avís important
Hom espera que feu aquest exerici 7 de Exercicis de QML fent servir propietats, tal i com s'ha ensenyat als Vídeos QML. Aquesta solució que us faig arribar és fent servir senyals, però vosaltres heu d'implementar la solució fent servir propietats.
ex07a
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(); // ...
rerefonsmqtt.cpp
// ... #include <QtCore/QDateTime> #include <QtMqtt/QMqttClient> #include <QDebug> RerefonsMqtt::RerefonsMqtt(QObject *parent) : QObject(parent) { m_client = new QMqttClient(this); m_client->setHostname(BROKER_NAME); m_client->setPort(BROKER_PORT); m_nEstat = 1; connect(m_client, &QMqttClient::stateChanged, this, &RerefonsMqtt::updateLogStateChange); connect(m_client, &QMqttClient::disconnected, this, &RerefonsMqtt::brokerDisconnected); } void RerefonsMqtt::vBotoConnectaDesconnectaMqtt(){ if (m_client->state() == QMqttClient::Disconnected) { m_client->setUsername(BROKER_USER); m_client->setPassword(BROKER_PASSWORD); m_client->connectToHost(); } else { m_client->disconnectFromHost(); } } void RerefonsMqtt::updateLogStateChange(){ const QString content = QDateTime::currentDateTime().toString() + QLatin1String(": State Change") + QString::number(m_client->state()) + QLatin1Char('\n'); qDebug() << content; emit senyalEstatConnexioMqtt(m_nEstat = m_client->state()); } void RerefonsMqtt::brokerDisconnected(){ qDebug() << "Broker desconnectat!"; }
ex07a_06
temes.h
#ifndef TEMES_H #define TEMES_H #define TOPIC_LED_W "/ledW" #endif // TEMES_H
rerefonsmqtt.h
// ... #include "temes.h" #define MAC_PLACA "AABBCCDDEE01" // ... public: explicit RerefonsMqtt(QObject *parent = nullptr); ~RerefonsMqtt(); // ... public slots: void vBotoConnectaDesconnectaMqtt(); void vPublicaEstatLed(QString szQuinLed,QString szEstat); // ...
rerefonsmqtt.cpp
RerefonsMqtt::~RerefonsMqtt(){ if (m_client->state() == QMqttClient::Connected || m_client->state() == QMqttClient::Connecting) { m_client->disconnectFromHost(); } }
void RerefonsMqtt::vPublicaEstatLed(QString szQuinLed,QString szEstat){ if(szQuinLed == "w" || szQuinLed == "W" || szQuinLed == "ledW"){ QString szTopic = QString("/") + MAC_PLACA + TOPIC_LED_W; qDebug() << "Tema: " << szTopic << ", Missatge: " << szEstat; if (m_client->publish(szTopic, szEstat.toUtf8()) == -1) qDebug() << "Error. No es pot publicar el missatge"; } }
main.qml
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") rfMqtt.vPublicaEstatLed("w",(btLedBlanc.text === qsTr("Encén led blanc"))?"0":"1") } }
ex07b
ex07b_07
temes.h
#ifndef TEMES_H #define TEMES_H #define TOPIC_LED_W "/ledW" #define TOPIC_BT_I35 "/btI35" #endif // TEMES_H
rerefonsmqtt.cpp
RerefonsMqtt::RerefonsMqtt(QObject *parent) : QObject(parent) { // ... connect(m_client, &QMqttClient::messageReceived, this, [this](const QByteArray &message, const QMqttTopicName &topic) { const QString content = QDateTime::currentDateTime().toString() + QLatin1String(" Received Topic: ") + topic.name() + QLatin1String(" Message: ") + message + QLatin1Char('\n'); qDebug() << content; }); }
void RerefonsMqtt::updateLogStateChange(){ const QString content = QDateTime::currentDateTime().toString() + QLatin1String(": State Change") + QString::number(m_client->state()) + QLatin1Char('\n'); qDebug() << content; emit senyalEstatConnexioMqtt(m_nEstat = m_client->state()); if(m_nEstat == 2){ QString szSubscriptionTopic = QString("/") + MAC_PLACA + TOPIC_BT_I35; auto subscription = m_client->subscribe(szSubscriptionTopic); if (!subscription) { qDebug() << "Error: No m'hi puc subscriure. Hi ha una connexió vàlida?"; return; }else qDebug() << "Subscrit a " << szSubscriptionTopic; } }
ex07b_08
rerefonsmqtt.h
// ... private slots: void updateLogStateChange(); void brokerDisconnected(); void vGestionaMissatgeRebut(const QByteArray &message, const QMqttTopicName &topic); // ...
rerefonsmqtt.cpp
RerefonsMqtt::RerefonsMqtt(QObject *parent) : QObject(parent) { m_client = new QMqttClient(this); m_client->setHostname(BROKER_NAME); m_client->setPort(BROKER_PORT); m_nEstat = 1; connect(m_client, &QMqttClient::stateChanged, this, &RerefonsMqtt::updateLogStateChange); connect(m_client, &QMqttClient::disconnected, this, &RerefonsMqtt::brokerDisconnected); connect(m_client, &QMqttClient::messageReceived, this, &RerefonsMqtt::vGestionaMissatgeRebut); }
void RerefonsMqtt::vGestionaMissatgeRebut(const QByteArray &message, const QMqttTopicName &topic){ const QString content = QDateTime::currentDateTime().toString() + QLatin1String(" Received Topic: ") + topic.name() + QLatin1String(" Message: ") + message + QLatin1Char('\n'); qDebug() << content; // Amb més d'un tema subscrit caldria filtrar per tema ( topic.name() ) if(message == "I35 pressed"){ qDebug() << "Botó I35 premut"; } if(message == "I35 released"){ qDebug() << "Botó I35 no premut"; } }
ex07b_09
rerefonsmqtt.h
signals: void senyalEstatConnexioMqtt(int nEstatConnexioMqtt); void senyalBotoI35(QString qszTextBotoI35);
rerefonsmqtt.cpp
void RerefonsMqtt::vGestionaMissatgeRebut(const QByteArray &message, const QMqttTopicName &topic){ // ... if(message == "I35 pressed"){ qDebug() << "Botó I35 premut"; emit senyalBotoI35("Botó I35 premut"); } if(message == "I35 released"){ qDebug() << "Botó I35 no premut"; emit senyalBotoI35("Botó I35 no premut"); } }
main.qml
// ... function actualitzaFrontal(nEstatConnexioMqtt){ switch(nEstatConnexioMqtt){ case 0: // ... eMqtt.textBotoI35.visible = false break; case 1: // ... case 2: // ... eMqtt.textBotoI35.visible = true break; } } // ...
RerefonsMqtt{ id: rfMqtt onSenyalEstatConnexioMqtt: { console.log(nEstatConnexioMqtt) aw.actualitzaFrontal(nEstatConnexioMqtt) } onSenyalBotoI35: { console.log(qszTextBotoI35) eMqtt.textBotoI35.text = qszTextBotoI35 } }
EstatMqttForm.ui.qml
// .. property alias textBotoI35: textBotoI35 // .. Text { id: textBotoI35 x: 188 text: qsTr("Botó I35 no premut") anchors.top: btLedBlanc.bottom font.pixelSize: 15 horizontalAlignment: Text.AlignHCenter font.bold: true minimumPixelSize: 24 anchors.topMargin: 25 anchors.horizontalCenter: parent.horizontalCenter } // ..