asynchronous web controlled thermostat

Termostato controlado por la web asíncrono ESP32

Este proyecto surgió de una discusión que tuve con Yves Bourdon, en el foro de laboratorio de tutorías Nerd Random, sobre cómo implementar una interfaz web actualizada para controlar un ESP32, sin necesidad de recargar toda la página o enviar un formulario. En otras palabras, la idea aquí es realizar solicitudes asincrónicas del navegador del cliente para consultar el microcontrolador sobre el estado de los datos que se mostrarán, y luego realizar actualizaciones locales de la interfaz de usuario tan pronto como se reciban los datos proporcionados por el ESP32.

Existen varias técnicas para lograr esto, incluido el uso de WebSockets, que prefiero a los métodos tradicionales que dependen de AJAX. Sin embargo, Yves quería entender cómo implementar esta técnica con AJAX. Este es el propósito de este proyecto. Otro seguirá para ilustrar cómo continuar con WebSockets ...

Descripción general del proyecto

Para responder a la solicitud inicial de Yves de un termostato conectado, elegí configurar un circuito bastante simple con un sensor de temperatura ESP32 y DHT11 (pero cualquier sensor puede hacer el trabajo). También agregué un LED para indicar por un flash los momentos en que el navegador interroga al ESP32 para obtener la temperatura actual. Y la interfaz de usuario para controlar el ESP32 es compatible con cualquier navegador moderno. Especialmente en los teléfonos inteligentes:

La interfaz web permite al usuario ajustar el rango de temperatura del termostato. Tan pronto como se cambia uno de los umbrales, se envía una solicitud HTTP asincrónica al ESP32 para almacenar el nuevo rango de temperatura en su memoria EEPROM. De esta manera, si el ESP32 se reiniciara por cualquier motivo (después de una falla de energía, por ejemplo), el termostato se inicializaría con el último rango de temperatura registrado. Un botón Reboot permite que esta función se pruebe reiniciando el comando ESP32 en el comando.

Cada vez que se toma la lectura de temperatura actual, la interfaz se actualiza de una manera totalmente transparente, sin la necesidad de recargar la página. Y la pantalla de temperatura se adapta automáticamente a la situación cambiando el color para indicar si todo está bien o si está fuera del rango permitido. También puede ocurrir un error de lectura en el sensor. La pantalla tendrá esto en cuenta:

Lecturas preliminares

Para comprender completamente lo que estamos haciendo aquí, le sugiero que eche un vistazo al siguiente tutorial sobre tutoriales nerd aleatorios:

Servidor web de termostato ESP32/ESP8266: salida de control basada en la temperatura

Si no está familiarizado con el uso de lanchas, le animo a que también lea este tutorial:

Servidor web ESP32 usando spiffs (sistema de archivos flash SPI)

Piezas requeridas

• 1 ESP32
• 1 sensor de temperatura DHT11
• 1 LED
• 2 resistencias (220 Ω y 4.7 kΩ)

Diagrama de cableado y pinouts

• GPIO23 está conectado al ánodo del LED
• El cátodo del LED está conectado al suelo a través de una resistencia de 220 Ω
• GPIO32 está conectado al pin de datos del sensor de temperatura DHT11
• DHT11 se aplica en su pin de datos con una resistencia de 4.7 kΩ

El código

Desarrollé mi código con el editor de código PaltFormio IDE y Visual Studio. Por lo tanto, el programa principal se llama main.cpp y se encuentra en el directorio src . Si está utilizando el Arduino IDE, deberá mover este programa a la raíz del proyecto y cambiarlo como tal:

 mv src/main.cpp esp32-asynchronous-web-controlled-thermostat.ino

La estructura del código

El código se divide en tres directorios:

• src contiene el código C ++ para compilar y cargar al ESP32
• data contienen el código fuente de la interfaz de usuario web para cargar en los spiffs ESP32
• scss contiene el código fuente de las hojas de estilo CSS en formato SCSS

La interfaz de usuario web se almacenará en el sistema de archivos de memoria Flash ESP32 como 5 archivos separados:

• index.html (la estructura de la interfaz)
• index.css (el diseño gráfico de la interfaz)
• index.js (el programa de administración de interfaz dinámica)
• D7MR.woff2 (la fuente utilizada para pantallas numéricas)
• favicon.ico (El pequeño icono para el navegador)

La interfaz web está formateada gráficamente por una hoja de estilo CSS. El código fuente está escrito en formato SCSS (SASSY CSS) y se compila utilizando el programa sass para obtener el archivo CSS. Vea el sitio web oficial de SASS para obtener más información.

En general, la sintaxis SCSS está muy cerca de CSS. Si desea modificar el archivo de origen, deberá instalar la herramienta sass y volver a compilar el archivo CSS de la siguiente manera:

 sass -t compressed --sourcemap=none --update scss:data

Pero también puede modificar directamente el archivo CSS si no desea instalar una herramienta adicional.

Implementación de AJAX

Propongo aquí dos técnicas para implementar intercambios asíncronos entre el navegador del cliente y el servidor web que se ejecuta en el ESP32:

• Un método clásico que utiliza el objeto XMLHttpRequest de JavaScript
• Un método más moderno que utiliza el protocolo async/esperanza de JavaScript

Entonces tiene la opción de usar uno u otro.

He comentado cuidadosamente sobre todo el código para que sea más fácil de entender. No dude en venir y hacer preguntas en el foro respondiendo esta publicación dedicada al proyecto.

Créditos

• Especialmente me gustaría agradecerme ningún desarrollo , autor de la fantástica biblioteca ESP32AsyncWebServer que hace que nuestra vida sea mucho más fácil cuando queremos interactuar con ESP32 a través de una aplicación web.

• También me gustaría agradecer a Keshikan por su Fuente regular Mini Modern MiniG7 que usé para las pantallas digitales de la interfaz.