https://www.binefa.com/index.php?action=history&feed=atom&title=Introducci%C3%B3_a_l%27%C3%BAs_del_Node-REDIntroducció a l'ús del Node-RED - Historial de revisió2026-05-05T12:07:05ZHistorial de revisió per a aquesta pàgina del wikiMediaWiki 1.33.0https://www.binefa.com/index.php?title=Introducci%C3%B3_a_l%27%C3%BAs_del_Node-RED&diff=11127&oldid=prevJordi Binefa: /* Comunicació MQTT entre el NodeRED i la placa IoT-02 */2025-10-29T18:07:50Z<p><span dir="auto"><span class="autocomment">Comunicació MQTT entre el NodeRED i la placa IoT-02</span></span></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ca">
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">← Versió més antiga</td>
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">Revisió del 18:07, 29 oct 2025</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l6" >Línia 6:</td>
<td colspan="2" class="diff-lineno">Línia 6:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Al minut 2:20 del primer vídeo de la classe invertida es fa referència a un broker diferent al que tenim programat a la placa.'''</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Al minut 2:20 del primer vídeo de la classe invertida es fa referència a un broker diferent al que tenim programat a la placa.'''</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>--></div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>--><ins class="diffchange diffchange-inline"><!--</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Les credencials a utilitzar són aquestes:'''</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Les credencials a utilitzar són aquestes:'''</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l12" >Línia 12:</td>
<td colspan="2" class="diff-lineno">Línia 12:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> const int mqtt_port = '''1883'''; </div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> const int mqtt_port = '''1883'''; </div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> const char* mqtt_user = "'''user'''";</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> const char* mqtt_user = "'''user'''";</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> const char* mqtt_password = "'''pass'''";</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> const char* mqtt_password = "'''pass'''";<ins class="diffchange diffchange-inline">--></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><!--[[Assignació de ports per al curs 2022-2023]]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><!--[[Assignació de ports per al curs 2022-2023]]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<!-- diff cache key wiki_binefa_com:diff::1.12:old-11126:rev-11127 -->
</table>Jordi Binefahttps://www.binefa.com/index.php?title=Introducci%C3%B3_a_l%27%C3%BAs_del_Node-RED&diff=11126&oldid=prevJordi Binefa: Es crea la pàgina amb «= Comunicació MQTT entre el NodeRED i la placa IoT-02 = <!-- Assignació de ports per al curs 2023-2024 '''El firmware de la placa IoT-02 per al dia d'avui és e...».2025-10-29T18:07:02Z<p>Es crea la pàgina amb «= Comunicació MQTT entre el NodeRED i la placa IoT-02 = <!-- <a href="/index.php?title=Assignaci%C3%B3_de_ports_per_al_curs_2023-2024&action=edit&redlink=1" class="new" title="Assignació de ports per al curs 2023-2024 (encara no existeix)">Assignació de ports per al curs 2023-2024</a> '''El firmware de la placa IoT-02 per al dia d'avui és e...».</p>
<p><b>Pàgina nova</b></p><div>= Comunicació MQTT entre el NodeRED i la placa IoT-02 =<br />
<!-- [[Assignació de ports per al curs 2023-2024]]<br />
<br />
'''El firmware de la placa IoT-02 per al dia d'avui és el mateix que vam utilitzar l'últim dia''': [https://www.binefa.cat/training/iot02/IoT-02_mqtt_json_upcSchool_broker1.zip firmware per gestionar, també, l'ús de JSON a la placa IoT-02]. [https://github.com/jordibinefa/IoT-02/tree/master/codes/IoT-02_mqtt_sync_upcSchool_broker1 Firmware IoT-02_mqtt_json_upcSchool_broker1 a GitHub]<br />
<br />
'''Al minut 2:20 del primer vídeo de la classe invertida es fa referència a un broker diferent al que tenim programat a la placa.'''<br />
<br />
--><br />
'''Les credencials a utilitzar són aquestes:'''<br />
<br />
const char* mqtt_server = "'''vps656540.ovh.net'''"; // Your MQTT broker<br />
const int mqtt_port = '''1883'''; <br />
const char* mqtt_user = "'''user'''";<br />
const char* mqtt_password = "'''pass'''";<br />
<!--[[Assignació de ports per al curs 2022-2023]]<br />
<br />
'''Nou firmware de la placa IoT-02 per al dia d'avui''' (s'han afegit temes MQTT per treballar amb JSON): [https://www.binefa.cat/training/iot02/IoT-02_mqtt_json_upcSchool_broker2.zip firmware per gestionar l'ús de JSON a la placa IoT-02]. [https://github.com/jordibinefa/IoT-02/tree/master/codes/IoT-02_mqtt_json_upcSchool_broker2 Firmware IoT-02_mqtt_json_upcSchool_broker2 a GitHub]--><br />
== Subscripció i publicació ==<br />
[[Image:Nodered20220402a00.png|center|Comunicació MQTT entre el NodeRED i la placa IoT-02]]<br />
<br />
=== Exercici '''NodeRED-01''' ===<br />
Implementeu el vostre flux per rebre l'estat dels tres botons (de manera asíncrona, quan hi ha un canvi) de la placa IoT-02.<br />
<br />
= Panell de Control (''Dashboard'') =<br />
[https://flows.nodered.org/node/node-red-dashboard Cal instal·lar el conjunt de nodes ''node-red-dashboard'']<br />
== Node '''commutador''' (''switch'') ==<br />
El node commutador envia un ''payload'' personalitzat per a l'estat ''ON'' i l'estat ''OFF''.<br />
<br />
[[Image:Nodered20220402b01.png|center|Flux commutador leds]]<br />
<br />
<br />
[[Image:Nodered20220402b00.png|center|Visualització commutador leds]]<br />
=== Exercici '''NodeRED-02''' ===<br />
Poseu 5 commutadors (Control dels 4 leds i l'estat del relé biestable de la placa IoT-02).<br />
<br />
== Nodes de '''text''', '''botó''' i '''variables de flux'''. Canvi de color d'un punt (representació d'un led) ==<br />
El node botó envia un ''payload'' personalitzat quan es prem.<br />
<br />
[[Image:Nodered20220402c01.png|center|Flux canvi de color d'un punt]]<br />
<br />
<br />
[[Image:Nodered20220402c00.png|center|Visualització canvi de color d'un punt]]<br />
<br />
Al ''Value format'' del node de text:<br />
<nowiki><font color={{msg.color}} ><i class="fa fa-circle" style="font-size:24px;"></i></font></nowiki><br />
<br />
Funció '''FF3399''':<br />
msg.color = "#FF3399"<br />
return msg;<br />
<br />
Funció '''{R,G,B} -> {0,0,0}''':<br />
flow.set("R","00");<br />
flow.set("G","00");<br />
flow.set("B","00");<br />
flow.set("RGB","#"+flow.get("R")+flow.get("G")+flow.get("B"));<br />
msg.color = flow.get("RGB");<br />
return msg;<br />
<br />
Funció '''R -> FF''':<br />
flow.set("R","FF");<br />
flow.set("RGB","#"+flow.get("R")+flow.get("G")+flow.get("B"));<br />
msg.color = flow.get("RGB");<br />
return msg;<br />
<br />
Funció '''R -> 00''':<br />
flow.set("R","00");<br />
flow.set("RGB","#"+flow.get("R")+flow.get("G")+flow.get("B"));<br />
msg.color = flow.get("RGB");<br />
return msg;<br />
<br />
[https://www.binefa.cat/training/upcSchool/2022/20220402/ledMulticolor.nodered.json Flux ledMulticolor.nodered.json]<br />
=== Exercici '''NodeRED-03''' ===<br />
Feu una visualització d'un punt que representa un led multicolor. A la placa IoT-02:<br />
<br />
* Quan el botó '''IO0''' estigui premut incorpora el color '''vermell''' al punt multicolor representat al panell de control del NodeRED<br />
<br />
* Quan el botó IO0 no estigui premut treu el color vermell al punt multicolor representat al panell de control del NodeRED<br />
<br />
* Quan el botó '''I34''' estigui premut incorpora el color '''verd''' al punt multicolor representat al panell de control del NodeRED<br />
<br />
* Quan el botó I34 no estigui premut treu el color verd al punt multicolor representat al panell de control del NodeRED<br />
<br />
* Quan el botó '''I35''' estigui premut incorpora el color '''blau''' al punt multicolor representat al panell de control del NodeRED<br />
<br />
* Quan el botó I35 no estigui premut treu el color blau al punt multicolor representat al panell de control del NodeRED<br />
<br />
== '''Simulació de generació d'una dada'''. Aleatorització controlada pel panell de control ==<br />
[[Image:12nodeRedRandomUi.png|center|Generació de dades aleatòries]]<br />
<br />
En seleccionar el commutador (''switch'') '''Randomize''' comença la generació de dades aleatòries. En deseleccionar-lo s'atura la generació de dades. El node commutador envia un ''payload'' personalitzat per a l'estat ''ON'' i l'estat ''OFF''.<br />
<br />
[[Image:14nodeRedRandomUi.png|center|Generació de dades aleatòries]]<br />
<br />
[https://www.binefa.cat/training/upcSchool/2022/20220402/14nodeRedRandomUi.nodered.json Codi per al NodeRED que genera dades aleatòries]<br />
<br />
Funció '''Randomizing (On/Off)''':<br />
flow.set("Randomizing",msg.payload);<br />
return msg;<br />
<br />
Funció '''random value in range (20.0,30.0)''':<br />
msg.payload = parseFloat( (200 + Math.floor(Math.random() * 101))/10); // value between 20.0 and 30.0<br />
return msg;<br />
<br />
=== Exercici '''NodeRED-04''' ===<br />
Importeu el [https://www.binefa.cat/training/upcSchool/2022/20220402/14nodeRedRandomUi.nodered.json flux 14nodeRedRandomUi] i verifiqueu el funcionament.<br />
<br />
== Conversió de '''JSON''' a text i text a JSON ==<br />
[[Image:Nodered20220402d00.png|center|Flux JSON -> TXT i TXT -> JSON]]<br />
<br />
[https://www.binefa.cat/training/upcSchool/2022/20220402/jsonTxt.nodered.json Flux jsonTxt.nodered.json]<br />
<br />
* Funció '''genero json''':<br />
var json00 = {}<br />
json00.nombre = "Joan"<br />
json00.apellido = "Pérez"<br />
json00.edad = 26<br />
msg.payload = json00<br />
return msg;<br />
<br />
* Funció '''genero txt''':<br />
var txt = "{\"apellido\":\"Martínez\",\"nombre\":\"Meritxell\",\"edad\":28}"<br />
msg.payload = txt<br />
return msg;<br />
<br />
== Passarel·la '''HTTP a MQTT''' ==<br />
[[Image:Nodered20220402e00.png|center|Flux HTTP a MQTT]]<br />
<br />
[https://www.binefa.cat/training/upcSchool/2022/20220402/httpMqtt.nodered.json Flux httpMqtt.nodered.json]<br />
<br />
[http://vps656540.ovh.net:2222/mqtt?topic=/7C9EBDEA5BA0/ledW&&payload=0 Apagant] led blanc:<br />
[[Image:Nodered20220402e01.png|center|Apagant led blanc. HTTP a MQTT]]<br />
<br />
[http://vps656540.ovh.net:2222/mqtt?topic=/7C9EBDEA5BA0/ledW&&payload=1 Encenent] led blanc:<br />
[[Image:Nodered20220402e02.png|center|Encenent led blanc. HTTP a MQTT]]<br />
<br />
* Funció '''bridge''':<br />
msg.topic = msg.req.query['topic'];<br />
msg.payload = msg.req.query['payload'];<br />
return msg;<br />
<br />
* Funció '''response''':<br />
msg.payload = "Tema: "+msg.req.query['topic']+", missatge: "+msg.req.query['payload'];<br />
return msg;<br />
<br />
=== Exercici '''NodeRED-05''' ===<br />
Implementeu el vostre flux per canviar l'estat dels leds i el relé biestable de la placa IoT-02.<br />
<br />
== Node '''exec''' ==<br />
El node '''exec''' executa ordres del sistema operatiu.<br />
<br />
[[Image:Nodered20220402h00.png|center|Flux amb node exec]]<br />
<br />
[https://www.binefa.cat/training/upcSchool/2022/20220402/exec.nodered.json Flux exec.nodered.json]<br />
<br />
== Enviament de JSON a la placa IoT-02 ==<br />
<br />
[[Image:Nodered20220402f00.png|center|Flux de JSON en node Inject a NodeRED]]<br />
<br />
[[Image:Nodered20220402f01.png|center|Edició de JSON en node Inject a NodeRED]]<br />
<br />
[https://www.binefa.cat/training/upcSchool/2022/20220402/jsonLeds.json Flux jsonLeds.json]<br />
<br />
* Al codi Arduino es diferencia el tipus '''bool''' del tipus '''int''':<br />
if (szTopic == String("/" + String(sMac) + TOPIC_JSON_LEDS ).c_str()) {<br />
JSONVar myObject = JSON.parse(szPayload);<br />
if (JSON.typeof(myObject) == "undefined") {<br />
Serial.println("Parsing input failed!");<br />
return;<br />
}<br />
if (myObject.hasOwnProperty("ledW")) {<br />
digitalWrite(LED_W, ('''bool''')myObject["ledW"]);<br />
} <br />
if (myObject.hasOwnProperty("ledR")) {<br />
digitalWrite(LED_R, ('''int''')myObject["ledR"]);<br />
}<br />
if (myObject.hasOwnProperty("ledY")) {<br />
digitalWrite(LED_Y, ('''int''')myObject["ledY"]);<br />
}<br />
if (myObject.hasOwnProperty("ledG")) {<br />
digitalWrite(LED_G, ('''int''')myObject["ledG"]);<br />
}<br />
}<br />
<br />
== Recepció de JSON des de la placa IoT-02 ==<br />
Es rep un text. El node JSON converteix el text a un objecte JSON. És un node bidireccional (si entra un objecte JSON surt un text).<br />
<br />
[[Image:Nodered20220402g00.png|center|Flux recepció de JSON]]<br />
<br />
[https://www.binefa.cat/training/upcSchool/2022/20220402/jsonIn.nodered.json Flux jsonIn.nodered.json]<br />
<br />
=== Exercici '''NodeRED-06''' ===<br />
Implementeu un sistema SCADA (supervisió i control) que mostri en ''widgets'' diferents de tipus rellotge la temperatura, humitat relativa i nivell de llum (des de la placa IoT-02). També una gràfica de la temperatura en funció del temps. A la part de control de la placa IoT-02 hi ha un commutador, quan està activat el relé es posa en estat SET, s'encén el led vermell (i apaga el verd) i apareix SET a la pantalla OLED. Quan es desactiva el commutador el relé es posa en estat RESET, s'encén el led verd (i apaga el vermell) i apareix RESET a la pantalla OLED.</div>Jordi Binefa