Internet de les coses amb ESP32 i ESP8266

Exemples Referència Plaques   Recursos CITCEA
Projectes Programació Perifèrics   Inici

Enviem les lectures de temperatura i humitat amb MQTT

En aquest exemple enviarem les lectures de temperatura i humitat fent servir MQTT. Farem servir un selector per indicar si volem veure la temperatura o la humitat i un camp de text ens indicarà el valor de la magnitud demanada. El programa del microcontrolador seria el que surt a continuació i que més endavant comentarem. Aquest programa es basa en el de l'exemple del LED però amb alguns canvis.

// Està parcialment basat en programes de Demetrio Pina i Fábio Souza
#include <SPI.h>    // Carreguem la biblioteca SPI
#include <WiFiNINA.h>    // Carreguem la biblioteca WiFiNINA
#include <PubSubClient.h>   // Biblioteca per a MQTT
#include <Adafruit_NeoPixel.h>
#include "DHT.h"
#define DHTPIN 2
#define DHTTYPE DHT22
const char idXarxa[] = "xarxa-wifi";    // Nom del punt d'accés 
const char contrasenya[] = "contrasenya-wifi";    // Contrasenya de connexió 
const char servidor[] = "broker.mqtt-dashboard.com";    // Contrasenya de connexió 
WiFiClient clientwifi;   // Client Wi-Fi
PubSubClient client(clientwifi);    // Client MQTT
DHT dht(DHTPIN, DHTTYPE);
void connecta_xarxa() {
  delay(1000);
  Serial.print("Connectant a la xarxa ");
  Serial.println(idXarxa);
  WiFi.begin(idXarxa, contrasenya);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.print(".");
  }
  Serial.print("Connectat!");
  Serial.print("Adreça IP: ");
  Serial.println(WiFi.localIP());
}
// Aquesta funció s'executarà automàticament quan es detecti un canvi
void callback(char* topic, byte* payload, unsigned int length) {
  float valor;
  String lectura;
  char envia[25];  // Aquí hi posarem el que volem enviar
                   // Suposem que no arribarem a 25 caràcters
  Serial.print("Payload:  ");
  Serial.println(payload[0]);
  if (payload[0] == 'T'){
    valor = dht.readTemperature();
    lectura = String(valor);
    lectura.replace('.', ',');
    lectura = lectura + " C";
    lectura.toCharArray(envia, 25);  // Cal convertir a char
    client.publish("oba_temphumi_lec", envia);  // Ho enviem al servidor
  }
  if (payload[0] == 'H'){
    valor = dht.readHumidity();
    lectura = String(valor);
    lectura.replace('.', ',');
    lectura = lectura + " %";
    lectura.toCharArray(envia, 25);  // Cal convertir a char
    client.publish("oba_temphumi_lec", envia);  // Ho enviem al servidor
  }
}
void connecta_mqtt() {
  while (!client.connected()) {
    Serial.println("Connectant al servidor MQTT");
    if (client.connect("oba_mqtt")) {
      Serial.println("Connectat!");
      client.subscribe("oba_temphumi_sel");
    } else {
      Serial.println("Ha fallat la connexió!");
      Serial.print("Resposta = ");
      Serial.println(client.state());
      delay(5000);
    }
  }
}
void setup() {    // Inicialització
  Serial.begin(9600);
  dht.begin();
  connecta_xarxa();
  client.setServer(servidor, 1883);
  client.setCallback(callback);
}
void loop() {    // Programa que es repeteix indefinidament
  if (!client.connected()) {
    connecta_mqtt();
  }
  client.loop();  // Consulta el servidor MQTT
}

Segons el valor rebut llegim una magnitud o l'altra. Un cop llegida, la convertim en String per poder-hi treballar. El primer que fem és canviar el punt decimal, propi de la notació anglesa, per la coma que fem servir nosaltres. Després hi afegim les unitats, amb el seu espai de separació, i ho convertim a char perquè la funció publish necessita aquest tipus de variable.

Un cop tenim fet el programa per al microcontrolador, cal preparar l'aplicació per tal que es puguin comunicar. En aquesta pàgina podem trobar informació més general sobre l'ús de l'aplicació. Per a aquest exemple en concret, cal crear un espai per al projecte picant al botó ⊕ i deixant la majoria de paràmetres per defecte. Només haurem d'editar els següents:

Paràmetre Exemple Comentaris
Name Temperatura i humitat Qualsevol nom que ens permeti diferenciar el projecte dels altres
Address broker.mqtt-dashboard.com Adreça del servidor MQTT que fem servir
Port 1883 Port emprat pel servidor, el normal és 1883

Després d'acabar la configuració, picarem sobre la icona Disquet

Dins del projecte posarem dos elements. Un selector (multi choice), amb dues opcions, per indicar quina lectura volem i un text (text) per mostrar-ne el valor. Els paràmetres que hem de configurar al multi choice són:

Paràmetre Exemple Comentaris
Name Mesura Qualsevol nom que ens permeti diferenciar aquest element d'altres similars
Topic (sub) oba_temphumi_sel L'etiqueta que hem posat al programa
Main text size Medium Mida de la lletra del text que es mostrarà
Main text color Color de la lletra del text que es mostrarà
Options Payload T Text que s'enviarà en seleccionar aquesta opció
Label Temperatura Text que sortirà com a opció
Payload H Text que s'enviarà en seleccionar aquesta opció
Label Humitat Text que sortirà com a opció

Després d'acabar la configuració, picarem sobre la icona Disquet

Els paràmentres que hem de configurar al text són:

Paràmetre Exemple Comentaris
Name Valor Qualsevol nom que ens permeti diferenciar aquest element d'altres similars
Topic (sub) oba_temphumi_lec L'etiqueta que hem posat al programa
Main text size Small Mida de la lletra del text que es mostrarà
Main text color Color de la lletra del text que es mostrarà

Després d'acabar la configuració, picarem sobre la icona Disquet

L'aspecte dels botons de l'aplicació serà el que es mostra a les imatges següents. En picar en el selector, podrem triar l'opció.

Botons de l'aplicació           Botons de l'aplicació

Versió sense interacció

En l'exemple anterior hem posat un selector per triar si volíem veure la temperatura o la humitat però, de fet, podríem veure les dues coses a la vegada, ja sigui mostrant-les en un sol text o en dos. Anem a fer un programa que mostri els dos valors en un text cada segon.

Ara des de l'aplicació no s'enviarà res i, per tant, no cal la funció callback ni subscriure cap etiqueta. Posarem, doncs, l'enviament dels valors en el bucle.

// Està parcialment basat en programes de Demetrio Pina i Fábio Souza
#include <SPI.h>    // Carreguem la biblioteca SPI
#include <WiFiNINA.h>    // Carreguem la biblioteca WiFiNINA
#include <PubSubClient.h>   // Biblioteca per a MQTT
#include <Adafruit_NeoPixel.h>
#include "DHT.h"
#define DHTPIN 2
#define DHTTYPE DHT22
const char idXarxa[] = "xarxa-wifi";    // Nom del punt d'accés 
const char contrasenya[] = "contrasenya-wifi";    // Contrasenya de connexió 
const char servidor[] = "broker.mqtt-dashboard.com";    // Contrasenya de connexió 
WiFiClient clientwifi;   // Client Wi-Fi
PubSubClient client(clientwifi);    // Client MQTT
DHT dht(DHTPIN, DHTTYPE);
float valor;
String temp, humi, lectura;
char envia[25];  // Aquí hi posarem el que volem enviar
                 // Suposem que no arribarem a 25 caràcters
void connecta_xarxa() {
  delay(1000);
  Serial.print("Connectant a la xarxa ");
  Serial.println(idXarxa);
  WiFi.begin(idXarxa, contrasenya);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.print(".");
  }
  Serial.print("Connectat!");
  Serial.print("Adreça IP: ");
  Serial.println(WiFi.localIP());
}
void connecta_mqtt() {
  while (!client.connected()) {
    Serial.println("Connectant al servidor MQTT");
    if (client.connect("oba_mqtt")) {
      Serial.println("Connectat!");
    } else {
      Serial.println("Ha fallat la connexió!");
      Serial.print("Resposta = ");
      Serial.println(client.state());
      delay(5000);
    }
  }
}
void setup() {    // Inicialització
  Serial.begin(9600);
  dht.begin();
  connecta_xarxa();
  client.setServer(servidor, 1883);
}
void loop() {    // Programa que es repeteix indefinidament
  if (!client.connected()) {
    connecta_mqtt();
  }
  valor = dht.readTemperature();
  temp = String(valor);
  valor = dht.readHumidity();
  humi = String(valor);
  temp.replace('.', ',');
  humi.replace('.', ',');
  temp = temp + " C";
  humi = humi+ " %";
  lectura = temp + "\n" + humi;
  lectura.toCharArray(envia, 25);  // Cal convertir a char
  client.publish("oba_temphumi_lec", envia);  // Ho enviem al servidor
  client.loop();  // Consulta el servidor MQTT
  delay(1000);
}

Un cop tenim fet el programa per al microcontrolador, cal preparar l'aplicació per tal que es puguin comunicar. En aquesta pàgina podem trobar informació més general sobre l'ús de l'aplicació. Per a aquest exemple en concret, cal crear un espai per al projecte picant al botó ⊕ i deixant la majoria de paràmetres per defecte. Només haurem d'editar els següents:

Paràmetre Exemple Comentaris
Name Temperatura i humitat Qualsevol nom que ens permeti diferenciar el projecte dels altres
Address broker.mqtt-dashboard.com Adreça del servidor MQTT que fem servir
Port 1883 Port emprat pel servidor, el normal és 1883

Després d'acabar la configuració, picarem sobre la icona Disquet

Dins del projecte només posarem un element, un text (text) on es mostrarà el valor. Els paràmentres que hem de configurar al text són:

Paràmetre Exemple Comentaris
Name Valor Qualsevol nom que ens permeti diferenciar aquest element d'altres similars
Topic (sub) oba_temphumi_lec L'etiqueta que hem posat al programa
Main text size Medium Mida de la lletra del text que es mostrarà
Main text color Color de la lletra del text que es mostrarà

Després d'acabar la configuració, picarem sobre la icona Disquet

L'aspecte del botó de l'aplicació serà el que es mostra a la imatge següent.

Botons de l'aplicació

Versió amb dos quadres de text

El programa següent és molt similar a l'anterior però fa servir dos text, un per a cada magnitud. Ara caldran dues etiquetes per posar les lectures.

// Està parcialment basat en programes de Demetrio Pina i Fábio Souza
#include <SPI.h>    // Carreguem la biblioteca SPI
#include <WiFiNINA.h>    // Carreguem la biblioteca WiFiNINA
#include <PubSubClient.h>   // Biblioteca per a MQTT
#include <Adafruit_NeoPixel.h>
#include "DHT.h"
#define DHTPIN 2
#define DHTTYPE DHT22
const char idXarxa[] = "xarxa-wifi";    // Nom del punt d'accés 
const char contrasenya[] = "contrasenya-wifi";    // Contrasenya de connexió 
const char servidor[] = "broker.mqtt-dashboard.com";    // Contrasenya de connexió 
WiFiClient clientwifi;   // Client Wi-Fi
PubSubClient client(clientwifi);    // Client MQTT
DHT dht(DHTPIN, DHTTYPE);
float valor;
String lectura;
char envia[25];  // Aquí hi posarem el que volem enviar
                 // Suposem que no arribarem a 25 caràcters
void connecta_xarxa() {
  delay(1000);
  Serial.print("Connectant a la xarxa ");
  Serial.println(idXarxa);
  WiFi.begin(idXarxa, contrasenya);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.print(".");
  }
  Serial.print("Connectat!");
  Serial.print("Adreça IP: ");
  Serial.println(WiFi.localIP());
}
void connecta_mqtt() {
  while (!client.connected()) {
    Serial.println("Connectant al servidor MQTT");
    if (client.connect("oba_mqtt")) {
      Serial.println("Connectat!");
    } else {
      Serial.println("Ha fallat la connexió!");
      Serial.print("Resposta = ");
      Serial.println(client.state());
      delay(5000);
    }
  }
}
void setup() {    // Inicialització
  Serial.begin(9600);
  dht.begin();
  connecta_xarxa();
  client.setServer(servidor, 1883);
}
void loop() {    // Programa que es repeteix indefinidament
  if (!client.connected()) {
    connecta_mqtt();
  }
  valor = dht.readTemperature();
  lectura = String(valor);
  lectura.replace('.', ',');
  lectura = lectura + " C";
  lectura.toCharArray(envia, 25);  // Cal convertir a char
  client.publish("oba_temphumi_t", envia);  // Ho enviem al servidor
  valor = dht.readHumidity();
  lectura = String(valor);
  lectura.replace('.', ',');
  lectura = lectura + " %";
  lectura.toCharArray(envia, 25);  // Cal convertir a char
  client.publish("oba_temphumi_h", envia);  // Ho enviem al servidor
  client.loop();  // Consulta el servidor MQTT
  delay(1000);
}

Un cop tenim fet el programa per al microcontrolador, cal preparar l'aplicació per tal que es puguin comunicar. En aquesta pàgina podem trobar informació més general sobre l'ús de l'aplicació. Per a aquest exemple en concret, cal crear un espai per al projecte picant al botó ⊕ i deixant la majoria de paràmetres per defecte. Només haurem d'editar els següents:

Paràmetre Exemple Comentaris
Name Temperatura i humitat Qualsevol nom que ens permeti diferenciar el projecte dels altres
Address broker.mqtt-dashboard.com Adreça del servidor MQTT que fem servir
Port 1883 Port emprat pel servidor, el normal és 1883

Després d'acabar la configuració, picarem sobre la icona Disquet

Dins del projecte només posarem dos elements text (text) on es mostrarà els valors. Els paràmentres que hem de configurar a cada text són:

Quadre Paràmetre Exemple Comentaris
Temperatura Name Temperatura Qualsevol nom que ens permeti diferenciar aquest element d'altres similars
Topic (sub) oba_temphumi_t L'etiqueta que hem posat al programa
Main text size Medium Mida de la lletra del text que es mostrarà
Main text color Color de la lletra del text que es mostrarà
Humitat Name Humitat Qualsevol nom que ens permeti diferenciar aquest element d'altres similars
Topic (sub) oba_temphumi_h L'etiqueta que hem posat al programa
Main text size Medium Mida de la lletra del text que es mostrarà
Main text color Color de la lletra del text que es mostrarà

Després d'acabar la configuració, picarem sobre la icona Disquet

L'aspecte dels botons de l'aplicació serà el que es mostra a la imatge següent.

Botons de l'aplicació

 

 

 

 

 

 

 

 

 

 

Llicència de Creative Commons
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.