Monitor de temperatura web con esp8266 y arduino

Vídeo

A continuación, encontrara el vídeo en donde se explica el funcionamiento del circuito.

Acerca del proyecto

En este post vamos a mostrar la temperatura del ambiente en un navegador web, donde usaremos los conocimientos en post que ya trabajamos, utilizaremos servidores y herramientas para transmitir mensajes por la red WiFi y por ultimo crearemos las aplicaciones web por medio de nodos con una interfaz gráfica.

Conocimiento previo

Para realizar este proyecto se requiere conocimiento previo de los siguientes temas, si aun no has trabajado con lo que se menciona en la siguiente tabla, allí están los links a los post para que puedas dar un repaso adicional o puedas recordar el conocimiento necesario para poder realizar este proyecto.

Materiales

Si has trabajado con arduino y ya realizaste los montajes que dejamos en conocimientos previos, deberías tener todo lo necesario, pero aun te dejamos los materiales que vamos a necesitar.

Circuito

Observemos en la siguiente imagen donde estamos conectando el arduino al esp8266 como lo describo en su post, adicionalmente conectamos el LM35 sensor de temperatura donde en su post también explico como conectarlo y su funcionamiento.

Prueba del circuito

Hasta este punto podemos hacer una prueba del funcionamiento del circuito el cual podemos verificar la conexión a la red y obtener la temperatura del sensor, si aun no tenemos el servidor mosquitto, para ello vamos a realizar los siguientes pasos.

Instalar node red y mosquitto

Ahora vamos a crear el servidor con el entorno de trabajo con node red y el servicio mqtt para crear y registrar el topic, para facilitarnos usaremos a docker, quien nos permite configurar el entorno con las imagenes de node red y mosquitto, para ello vamos a realizar los siguientes pasos.

Primero creamos una carpeta que llamáramos arduino-esp8266-temperatura, dentro de esta carpeta crearemos otra carpeta que llamaremos nodered, dentro de nodered creamos el archivo Dockerfile, al cual vamos a colocar lo siguiente:

FROM nodered/node-red
RUN npm install node-red-dashboard

Este archivo le indicamos a docker que use la imagen de node red oficial en en este caso es la nodered/node-red, la cual traerá la mas reciente, luego vamos a instalar con npm un complemento para poder crear una pagina web con los nodos para ello usamos RUN npm install node-red-dashboard.

Nos devolvemos a la carpeta arduino-esp8266-temperatura y creamos el archivo docker-compose.yml, al cual le adicionamos la siguiente información:

#Versión 3 de docker-compose
version: '3'

services: #Creamos los servicios que ejecutara docker
  mqtt: #Creamos el servicio mqtt
    image: eclipse-mosquitto:latest
    container_name: 'mqttserver'
    ports: #Publicamos los puertos de mqtt
      - '1883:1883'
      - "9001:9001"
  nodered: #Creamos el servicio node red
    build: ./nodered
    container_name: 'nodered'
    ports: #Publicamos los puertos de nodered
      - '1880:1880'
    depends_on:
      - mqtt

Este archivo es el que docker-compose usara para arrancar los servicios, la estructura inicial nos debera quedar de la siguiente forma:

arduino-esp8266-temperatura
│   docker-compose.yml
└───nodered
        Dockerfile

Ahora ejecutamos el comando de docker compose para iniciar los servicios de node red y mosquitto, el comando completo es el siguiente:

docker-compose up

Al terminar de descargar las imagenes, instalar los paquetes y de ejecutar el comando nos muestra la siguiente salida por la terminal.

PS C:\code\ejemplo-docker-nodered> docker-compose up
Starting mqttserver ... done
Starting nodered    ... done
Attaching to mqttserver, nodered
mqttserver | 1579051891: mosquitto version 1.5.8 starting
mqttserver | 1579051891: Config loaded from /mosquitto/config/mosquitto.conf.
mqttserver | 1579051891: Opening ipv4 listen socket on port 1883.
mqttserver | 1579051891: Opening ipv6 listen socket on port 1883.
nodered    | 15 Jan 01:32:02 - [info] Starting flows
nodered    | 15 Jan 01:32:03 - [info] Started flows
nodered    | 15 Jan 01:32:03 - [info] [mqtt-broker:7b511d35.83f054] Connected to broker: mqtt://192.168.0.6:1883
nodered    | 15 Jan 01:32:03 - [info] Server now running at http://127.0.0.1:1880/

Si nos muestra el resultado anterior en la terminal, nos indica que mosquitto inicio en el puerto 1883 y nos indica que en el puerto 1880 inicia la interfaz node red.

Node red

Como mencionamos anteriormente, node red es una interfaz que gráfica de programación que permite crear distintas aplicaciones iot por medio de nodos, normalmente el servidor inicia el el puerto 1880, como se observa en la siguiente imagen.

En este post no detallaremos todos los nodos, pero vamos a comentar cuales son los que estamos usando y la configuración básica para poder hacer la prueba y visualizar los datos, en la siguiente tabla detallamos los nodos.

La conexión de los nodos es la siguiente, básicamente obtenemos los datos del topic que corresponde al nodo mqtt in, y los enviamos a los distintos nodos que se encargaran de crear el dashboard para mostrar la información.

A continuación, esta el json del proyecto para que lo pueda importar en node red.

[{"id":"1288afa3.688f4","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"7b511d35.83f054","type":"mqtt-broker","z":"","name":"","broker":"192.168.0.6","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"d0eacf09.bfbb5","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false},{"id":"6ad37f55.e855c","type":"ui_group","z":"","name":"Default","tab":"d0eacf09.bfbb5","disp":true,"width":"6","collapse":false},{"id":"d5464b69.c17928","type":"mqtt in","z":"1288afa3.688f4","name":"","topic":"temperatura","qos":"2","broker":"7b511d35.83f054","x":350,"y":220,"wires":[["e3a51c48.f3918","de97127d.9f472","4dcc192.a7262e8","4b1d0cbb.6dc824"]]},{"id":"e3a51c48.f3918","type":"debug","z":"1288afa3.688f4","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":590,"y":220,"wires":[]},{"id":"de97127d.9f472","type":"ui_gauge","z":"1288afa3.688f4","name":"","group":"6ad37f55.e855c","order":0,"width":0,"height":0,"gtype":"gage","title":"Temperatura","label":"° C","format":"{{value}}","min":0,"max":"40","colors":["#0080ff","#47a91d","#ff8080"],"seg1":"","seg2":"","x":590,"y":300,"wires":[]},{"id":"4dcc192.a7262e8","type":"ui_chart","z":"1288afa3.688f4","name":"","group":"6ad37f55.e855c","order":0,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1F77B4","#AEC7E8","#FF7F0E","#2CA02C","#98DF8A","#D62728","#FF9896","#9467BD","#C5B0D5"],"useOldStyle":false,"outputs":1,"x":570,"y":340,"wires":[[]]},{"id":"4b1d0cbb.6dc824","type":"ui_text","z":"1288afa3.688f4","group":"6ad37f55.e855c","order":0,"width":0,"height":0,"name":"","label":"Temperatura","format":"{{msg.payload}}","layout":"row-spread","x":590,"y":260,"wires":[]}]

Código arduino

Expliquemos el código paso a paso, para poderlo analizar mejor antes de entrar a verlo al detalle.

• Primero vamos a incluir las librerías necesarias para realizar la comunicación, el link de descarga son los mencionados en los materiales, estas librerías se deben cargar al programa arruino.
• Vamos a declarar una serie de variables en donde guardaremos el nombre de la red, contraseña y nombre del servidor.
• Después inicializaremos los objetos correspondientes WiFiEspClient, PubSubClient, y softwareserial.
• Ahora la primera acción que vamos a realizar es iniciar con el wifi, en donde validaremos si esta conectado y comunicándose el modulo, luego vamos a realizar la conexión al modulo con el nombre de la red y la contraseña.
• Después de tener conexión al wifi indicamos cual es el servidor en donde esta mosquitto con el fin de abrir una conexión permanente para poder enviar información al topic.
• Finalmente enviamos la cadena de texto con el dato que necesitamos enviar.

#include <WiFiEsp.h>
#include <WiFiEspClient.h>
#include <PubSubClient.h>
#include "SoftwareSerial.h"

//Conexión a la red wifi: nombre de la red y contraseña
#define WIFI_AP "NOMBRE_RED_WIFI"
#define WIFI_PASSWORD "CONTRASEÑA"

//Nombre o IP del servidor mosquitto
char server[50] = "IP_SERVIDOR";

//Inicializamos el objeto de cliente esp
WiFiEspClient espClient;

//Iniciamos el objeto subscriptor del cliente 
//con el objeto del cliente
PubSubClient client(espClient);

//Conexión serial para el esp con una comunicación
//serial, pines 2: rx y 3: tx
SoftwareSerial soft(2, 3);

//Contador para el envio de datos
unsigned long lastSend;

int status = WL_IDLE_STATUS;

void setup() {
    //Inicializamos la comunicación serial para el log
    Serial.begin(9600);
    //Iniciamos la conexión a la red WiFi
    InitWiFi();
    //Colocamos la referencia del servidor y el puerto
    client.setServer( server, 1883 );
    lastSend = 0;
}

void loop() {
    //Validamos si el modulo WiFi aun esta conectado a la red
    status = WiFi.status();
    if(status != WL_CONNECTED) {
        //Si falla la conexión, reconectamos el modulo
        reconnectWifi();
    }

    //Validamos si esta la conexión del servidor
    if(!client.connected() ) {
        //Si falla reintentamos la conexión
        reconnectClient();
    }

    //Creamos un contador para enviar la data cada 2 segundos
    if(millis() - lastSend > 2000 ) {
        sendDataTopic();
        lastSend = millis();
    }

    client.loop();
}

void sendDataTopic()
{
    Serial.println("Envianto Datos");
    String payload = "";
    float valueAdc = analogRead(0);
    float volts = (valueAdc / 1023.0) * 5;
    float celsius = volts * 100.00; 
    
    payload += celsius;
    
    char attributes[100];
    payload.toCharArray( attributes, 100 );
    client.publish( "temperatura", attributes );
    Serial.println( attributes );
}

//Inicializamos la conexión a la red wifi
void InitWiFi()
{
    //Inicializamos el puerto serial
    soft.begin(9600);
    //Iniciamos la conexión wifi
    WiFi.init(&soft);
    //Verificamos si se pudo realizar la conexión al wifi
    //si obtenemos un error, lo mostramos por log y denememos el programa
    if (WiFi.status() == WL_NO_SHIELD) {
        Serial.println("El modulo WiFi no esta presente");
        while (true);
    }
    reconnectWifi();
}

void reconnectWifi() {
    Serial.println("Iniciar conección a la red WIFI");
    while(status != WL_CONNECTED) {
        Serial.print("Intentando conectarse a WPA SSID: ");
        Serial.println(WIFI_AP);
        //Conectar a red WPA/WPA2
        status = WiFi.begin(WIFI_AP, WIFI_PASSWORD);
        delay(500);
    }
    Serial.println("Conectado a la red WIFI");
}

void reconnectClient() {
    //Creamos un loop en donde intentamos hacer la conexión
    while(!client.connected()) {
        Serial.print("Conectando a: ");
        Serial.println(server);
        //Creamos una nueva cadena de conexión para el servidor
        //e intentamos realizar la conexión nueva
        //si requiere usuario y contraseña la enviamos connect(clientId, username, password)
        String clientId = "ESP8266Client-" + String(random(0xffff), HEX);
        if(client.connect(clientId.c_str())) {
            Serial.println("[DONE]");
        } else {
            Serial.print( "[FAILED] [ rc = " );
            Serial.print( client.state() );
            Serial.println( " : reintentando en 5 segundos]" );
            delay( 5000 );
        }
    }
}

Prueba funcionamiento

Realicemos un resumen del paso a paso para entender que es lo que realizamos en el post, esto lo hacemos para tener en cuenta cada paso y no fallen las pruebas de funcionamiento, entonces:

Para poder visualizar la temperatura en el navegador web hay que tener si o si, un servidor mosquitto escuchando todas las peticiones en los topic correspondientes, tenemos que tener el circuito con el sensor de temperatura funcionando correctamente y que pueda realizar la conexión a la red WiFi y al servidor masquitto, por ultimo tenemos que realizar la interfaz que va a mostrar los datos, esto con ayuda de node red, veamos los pasos.

• Realizamos la conexión del circuito, el cual podemos ir paso a paso también, conectar el sensor de temperatura, validar que este funcionando y que nos muestra los datos correctamente.
• Procedemos a conectar el ESP8266, verificamos que se conecte a la red WIFi y que intente conectarse al servidor mosquitto, este nos dará un error de conexión por que no lo hemos creado, esto lo hacemos en el siguiente paso.
• Como menciono en el post usaremos a docker para facilitarnos el trabajo aunque puedes instalar los programas, entonces el código que usaremos para iniciar las dos imágenes, la del mosquitto y la del node red, si tiene problemas con este paso me pueden preguntar.
• Cuando inicien los servidores estos se inician el 1883 para el mqtt de mosquitto y 1880 para el node red.
• Si volvemos a probar el arduino con el ESP8266 este nos debería conectar correctamente al WiFi y al servidor mosquitto con el topic temperatura y no debería mostrarnos ningún error.
• Ahora para la construcción de la interfaz web usaremos el complemento "node-red-dashboard" que nos carga los nodos del dashboard para node red, seguimos la configuración que dejamos en las imágenes o el código json para importar el tablero.

Realizamos el despliegue al del programa y para visualizar los interfaz ingresamos a http://IP_DEL_SERVIDOR:1880/ui, ejemplo http://localhost:1880/ui.

Si todos los pasos están correctos hasta acá, nos debería mostrar las la temperatura como podemos ver el la siguiente imagen: