InicioTarjetas de DesarrolloESP32Dashboard de temperatura con Adafruit IO, ESP32 y DHT22

Dashboard de temperatura con Adafruit IO, ESP32 y DHT22

En el siguiente tutorial aprenderás a realizar una conexión a la plataforma de Adafruit IO utilizando el ESP32 y así poder visualizar de manera gráfica la temperatura que registre el DHT22.

Lista de materiales:

Lo primero que debes hacer es crear una cuenta beta  Adafruit io, solo da clic en “comenzar gratis” y se abrirá un formulario el cual debes de llenar, en la siguiente imagen se muestra como debes hacerlo:

Hacer una cuenta en Adafruit io

Ya que creaste la cuenta te saldrá una ventana para confirmar tus datos, seleccionar tu color favorito y elegir tu zona horaria, después de hacer estos cambios dar clic en “guardar ajustes”. De esta manera ya estará lista tu cuenta de Adafruit IO.

Lo siguiente que tendrás que hacer será dirigirte en panel IO para crear lo siguiente, un FEED, DASHBOARDS y ver tu KEY ya que lo necesitaremos más adelante. En la siguiente imagen se muestran los pasos que debes seguir:

Dashboard de temperatura con Adafruit IO, ESP32 y DHT22 Perfil

Ir al panel de IO

Crear un feed en Adafruit IO

Lo siguiente que tendrás que hacer será realizar un FEED. Pero te preguntaras que es un FEED, este es un núcleo que contiene metadatos sobre los datos que recibirá o enviará Adafruit IO.

Para este ejemplo crearemos un FEED llamado “temperatura”, este nos servirá para almacenar las lecturas del sensor DHT22, estas lecturas se enviaran a Adafruit IO con la placa ESP32.

Para crear el FEED siga los siguientes pasos:

  1. Ir a la pestaña o al menú FEED
  2. Dar clic en el icono para crear un nuevo FEED
  3. Se abrirá un formulario, debes poner el nombre “Temperatura” y ponerle una pequeña descripción
  4. Dar clic en Create

En la siguiente imagen tendrás los pasos que debes de seguir:

Dashboard de temperatura con Adafruit IO, ESP32 y DHT22 Configuración de Feed

Como crear un FEED

Al finalizar los pasos anteriores, deberías poder visualizar en la pantalla el feed creado como se muestra a continuación:

Dashboard de temperatura con Adafruit IO, ESP32 y DHT22 Feed Creado

FEED creado

Crear Dashboard en Adafruit IO

Ya que creaste el FEED, lo siguiente será crear un panel DASHBOARD, este  servirá para agregar gráficas o tableros dinámicos para visualizar las lecturas del sensor DHT22, que se estará almacenando en el FEED llamado temperatura.

Para crear el Dashboard sigue los siguientes pasos:

  1. Ir a la pestaña o al menú Dashboards
  2. Dar clic en New Dashboard
  3. Se abrirá un formulario, debes poner el nombre y una breve descripción
  4. Dar clic en Create

En la siguiente imagen tendrás los pasos que debes de seguir:

Como crear un DASHBOARD

De la misma manera que el Feed, una vez creado el Dashboard, se mostrará de la siguiente manera:

Dashboard de temperatura con Adafruit IO, ESP32 y DHT22 Dashboard Creado

Dashboard creado

Insertar gráficas o tableros dinámicos en el panel de DASHBOARD

En este tutorial agregaremos el tablero llamado “Gauge” o indicador desde el Dashboard creado anteriormente para visualizar las lecturas del sensor DHT22, solo debes de seguir los siguientes pasos:

  1. Dentro del Dashboard Temperatura, dar click sobre el icono del engrane
  2. Ir a + Create New Block
  3. Dar clic en el tablero Gauge
  4. Seleccionar el nombre del FEED temperatura que creamos anteriormente 
  5. Dar clic en siguiente paso Next step
  6. Se abrirá un formulario debes poner un al nombre del tablero, valor mínimo y máximo, el ancho del medidor y la etiqueta, lo demás lo puedes dejar como estaba
  7. Dar clic en crear tablero Create block

En la siguiente imagen tendrás los pasos que debes de seguir:

Dashboard de temperatura con Adafruit IO, ESP32 y DHT22 Crear bloque

Añadir el tablero Gauge

Obtener la clave secreta de Adafruit IO

Por último tendrás que copiar el nombre de usuario y la clave, ya que estos parámetros los necesitarás para agregarlos en el código de Arduino. Debes guardar estos parámetros en un lugar seguro que solo tu tengas acceso de lo contrario cualquier persona que pueda ver estos datos podrá manipular la información de los feeds.

Para obtener estos parámetros sigue los siguientes pasos:

  1. Dar clic en el icono de la llave “API Key”
  2. Copiar el Username y el Active Key
  3. Para salir dar clic en la x

Como saber el Username y la KEY

Librería y código de Adafruit IO con ESP32

Para conectar la placa ESP32 a Adafruit IO y enviar las lecturas del sensor DHT22 debes descargar la siguiente librería que nos proporciona Adafruit:

Y las librerías:

Ya que descargaste las librerías, abre el IDE de Arduino y dirígete a la pestaña programa, da un clic en “Incluir Librería” y se desplegará una ventana, selecciona la opción de “Añadir biblioteca .ZIP”, después selecciona la librerías que descargaste anteriormente.

Después deberás copiar  y pegar el siguiente código en el Arduino IDE y agregar los paramentos de USERNAME y KEY, de igual manera debes ingresar una conexión a Internet definiendo los parámetros de nombre de la red Wifi en la línea de código WLAN_SSDI y la contraseña de la red en la línea de código WLAN_PASS.

Sera lo único que agregaras al código, recuerda seleccionar la placa NodeMCU-32S, verificar el puerto COM y después compilar y cargar el código a tu ESP32. El pin de datos del sensor DHT22 esta conectado al pin D4 del ESP32 si es tu caso y estas utilizando otro pin digital cambiarlo en el código.

#include <WiFi.h> 
#include "Adafruit_MQTT.h"
#include "Adafruit_MQTT_Client.h"

/*************************Variables del dht22***********************************/
#include <DHT.h> //Cargamos la librería DHT
#define DHTTYPE DHT22 //Definimos el modelo del sensor DHT22
#define DHTPIN 4 // Se define el pin 4 del ESP32 para conectar el pin de datos del DHT22
DHT dht(DHTPIN, DHTTYPE); 
/********************Parametros de conexion Wifi*******************************/

#define WLAN_SSID       "*****"  // Ingresa el nombre de tu red         
#define WLAN_PASS       "*****"  // Ingresa la contraseña de tu red 
/************************* Adafruit.io Setup *********************************/
#define AIO_SERVER "io.adafruit.com"
#define AIO_SERVERPORT 1883 // Use 8883 para SSL
#define AIO_USERNAME "****" // Reemplace con su nombre de usuario
#define AIO_KEY "****" // Reemplace con su Clave de autenticación
/************ Estado global (¡no necesita cambiar esto!) *********************/

// Crea una clase WiFiClient para conectarse al servidor MQTT
WiFiClient client;
// o ... use WiFiFlientSecure para SSL
//WiFiClientSecure client;

// Configuración cliente MQTT pasando, cliente WiFi y servidor MQTT y los detalles de inicio de sesión.
Adafruit_MQTT_Client mqtt(&client, AIO_SERVER, AIO_SERVERPORT, AIO_USERNAME, AIO_KEY);

/***************** Feeds que se definieron en Adafruit IO *******************/

// Configuracion para publicar los feeds
Adafruit_MQTT_Publish temperatura = Adafruit_MQTT_Publish(&mqtt, AIO_USERNAME"/feeds/temperatura"); 

/****************************************************************************/

void MQTT_connect();

void setup()
{
dht.begin(); 
 pinMode(DHTPIN, INPUT);
  Serial.begin(115200);
  delay(10);

/*************************Conexión a la red wifi**************************/

Serial.println();
Serial.print("Connecting to ");
Serial.println(WLAN_SSID);

WiFi.begin(WLAN_SSID, WLAN_PASS);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println();
Serial.println("WiFi conectado");
Serial.println("IP address: "); 
Serial.println(WiFi.localIP());
}
/****************************************************************************/

void loop()
{

MQTT_connect();

float tem = dht.readTemperature(); //Se lee la temperatura

Serial.print(F("\n Lectura"));
Serial.print(tem);
Serial.print("...");

if (! temperatura.publish(tem)) {
Serial.println(F("Failed"));
} else {
Serial.println(F("OK!"));
}

 delay(2000);
}

void MQTT_connect() {
int8_t ret;
// Detener si ya está conectado
if (mqtt.connected()) {
return;
}

Serial.print("Conectando a MQTT... ");

uint8_t retries = 3;

while ((ret = mqtt.connect()) != 0) { // connect devolverá 0 para conectado
Serial.println(mqtt.connectErrorString(ret));
Serial.println("Re-intentando la conexión MQTT en 5 segundos...");
mqtt.disconnect();
delay(5000); // espera 5 segundos
retries--;
if (retries == 0) {
// La conexión falla y espera a que se reinicie
while (1);
}
}
Serial.println("MQTT Conectado!"); 
}

Listo si has seguido todos los pasos ya podrás visualizar la lectura de temperatura del sensor DHT22 en Adafruit IO,  utilizando la placa ESP32 como se muestra a continuación:

Indicador Gauge recibiendo lecturas del DHT22

Nota: Las capturas del tutorial fueron tomadas en noviembre 2022, es posible que la interfaz de la plataforma Adafruit haya sido actualizada

TUTORIALES RELACIONADOS