Monitor de temperatura web con esp8266 y arduino


En este post vamos crear un monitor de temperatura web con esp8266 y arduino

oscar Escrito por oscar 16 January 2020 11982 5

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.

Proyecto monitor temperatura web
Proyecto monitor temperatura web

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.

Proyecto Descripción
LM35 con arduino En este post esta el paso a paso de como conectar el sensor de temperatura al arduino.
ESP8266 conexión a mqtt con arduino En este post vamos a hacer la primera conexión entre mqtt usando como servidor mosquitto y el esp8266-01 conectado al arduino, se va a explicar paso a paso que se necesita para poder enviar un mensaje y poderlo visualizar por el momento en la terminar serial.
Nodos básicos con node red En un post anterior hablamos de node red y explicamos como instalar este software usando la docker, en este post vamos a ver los nodos básicos con los que trabajaremos para crear los proyectos de iot a la par con el esp8266. Antes de iniciar solo vamos a mencionar los bloques y su descripción, en otros post daremos detalle de cada uno de ellos con ejemplos que podamos hacer.

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.

Material Cantidad Descripción
LM35 1 Sensor de temperatura
ESP8266 1 Modulo WiFi
Arduino 1 En este post trabajamos con el arduino uno
Cables de conexión 1 Los usaremos para conectar el sensor y el WiFi

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.

Arduino ESP8266 temperatura breadboard
Arduino ESP8266 temperatura breadboard
Arduino ESP8266 temperatura schem
Arduino ESP8266 temperatura schem
Arduino ESP8266 temperatura foto
Arduino ESP8266 temperatura foto

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.

Pruebas arduino
Pruebas arduino

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.

Arduino ESP8266 temperatura nodered
Arduino ESP8266 temperatura nodered

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.

Nodo Nombre Parámetros de configuración

mqtt in

mqtt in

Server

localhost:1883

Topic

temperatura

debug

debug

Output

msg.payload

text input

text input

Group

Default

Size

auto

Label

Temperatura

Value format

{{msg.payload}}

chart

chart

Group

Default

Size

auto

Type

Gauge

Label

Temperatura

Value format

{{value}}

Units

° C

Range

min:0, max:40

gauge

gauge

Group

Default

Size

auto

Label

Temperatura

Type

Line chart

X-axis

last:1 hours OR 1000 points

x-axis Label

HH:mm:ss

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.

Diagrama de nodos node red
Diagrama de nodos node red

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.
Explicación de código

 

#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:

Pruebas de funcionamiento
Pruebas de funcionamiento

Comentario

Debe aceptar antes de enviar

07 November 2023 14:40

Hola. Excelente lo que hacés!!!! Yo estoy haciendo algo parecido, sólo que, como mido mas de 10 variables, las senso con el arduino uno y se las mando al esp8266 para que las suba a la red.  Ya hice el sketch y se las manda arduino y el esp8266 las recibe...cómo me aconsejas para que las suba a la red? Gracias.

hcaballerog
hcaballerog

15 May 2020 09:16

muy interesante tu proyecto veo que el codigo que muestras es para el arduino uno pero y que codigo debe llevar el esp8266?
oscar
oscar

16 May 2020 19:54

Hola, hablas con oscar gracias por comentar En este caso el ESP8266 no lleva ningún código, como lo explico en el post lo único que debes hacer con el es actualizar el firmware como lo explico es este post http://codigoelectronica.com/blog/esp8266-conexion-a-mqtt-con-arduino#firmware-para-wifiesp, la comunicación, conexión y configuración la realiza la librería WiFiEsp y PubSubClient, ademas del código del arduino, en este caso o se requiere nada adicional. Quedo atento a cualquier comentario adicional
ferbale00
ferbale00

11 October 2021 14:54

Pero en este caso a fuerzas tiene que estar conectado al pc? o si puedo ponerle una fuente de alimentación externa
oscar
oscar

04 September 2022 18:41

Para este ejemplo si se tiene que estar conectado al pc, ya que estamos viendo la salida de los logs, pero se puede usar una fuente externa.

Se esta trabajando en un post que explica cómo conectar y alimentar el arduino o cualquier proyecto