Crear un interface Web para controlar el ESP8266


Volvemos con la sección del ESP8266. Después de muchas entradas donde hemos ido introduciéndonos progresivamente los conceptos, por fin nos toca ver cómo montar un interface web para el ESP8266.

Para seguir esta entrada es muy recomendable que hayáis seguido las entradas anteriores, en especial las dos últimas sobre cómo realizar acciones / recibir información en formato JSON mediante AJAX y websockets, y la de cómo usar Material Design.

¿Sí? ¿Seguro? ¿Venís con los deberes hechos? Pues entonces no tendremos ningún problema en seguir esta entrada, que va a consistir en hacer un interface web para controlar el ESP8266.

En este interface vamos a visualizar el estado de las entradas digitales del ESP8266, en el ejemplo D0, D5, D6 y D7.

Anuncio:

Además, podremos simularemos actuar los pines D8, D9 como salidas y sobre el D10 como salida PWM.

Más un "plus" donde podremos disparar acciones, es decir, funciones que habremos definido en el ESP8266 y en las que haríais … pues lo que quisierais hacer.

En este ejemplo, las lecturas de los estados de las entradas digitales van a ser "reales". Sin embargo las salidas y acciones las mantenemos "simuladas", es decir, mostraremos el puerto de serie. Esto lo hacemos por seguridad, para que podáis probar el ejemplo independientemente de a lo que tengáis conectado el ESP8266 y evitemos "chispar" algo.

Si estáis seguro, simplemente sustituir el código por el necesario para poner la salida digital o el PWM al valor oportuno.

¿Parece ambicioso? Bueno, es juntar las partes que hemos visto anteriormente, para ilustrar como podríamos montar un interface Web para controlar el ESP8266. Aunque nos queda bastante código por delante, así que ¡manos a la obra!

Nuestro programa principal queda de la siguiente forma.

Hemos usado la librería "ReactiveArduino" para responder a los cambios en los pins, iniciado el servidor y los websockets, e incorporado los 'includes' oportunos.

Por su parte, nuestra definición del servidor en el fichero 'server.h', muy sencilla ya que vamos a ir por websocket y no necesitamos definir endpoints.

Por otro lado, nuestro fichero 'API.h' queda de la siguiente forma,

Donde únicamente tenemos tres acciones de callback, una para establecer la acción de fijar una salida digital, otra para fijar un PWM, y otra para realizar acciones genéricas. Estas funciones son las que, por seguridad, dejamos como simplemente mostrar por puerto serie. Cambiarlas para vuestro proyecto según necesitéis.

En cuanto a nuestro fichero 'WebSockets.hpp' tenemos

Que, como vemos, se encarga de recibir las peticiones por websocket, y realizar la función oportuna en función del tipo de acción recibida.

Por otro lado, también contiene la función 'updateGPIO', que es llamada ante un cambio de estado un pin, y se encarga de hacer un broadcast a todos los clientes, informándoles del nuevo estado.

Hasta aquí, por parte del backend. En la parte del cliente, nuestra página web es un poco más larga que la anterior (el precio a pagar por ser menos fea),

Nuestro fichero Javascript 'main.js' también es un poco más largo, aunque sigue siendo sencillo. Básicamente, hemos ampliado las funciones con las necesidades de nuestro nuevo UI.

Finalmente, tenemos un mini fichero CSS donde únicamente hemos definido los estilos para los labels que muestran ON/OFF en la sección de entradas.

Ahora, subimos todo este código al ESP8266 y comprobamos que el interface web se actualiza inmediatamente al cambiar el estado y, al ejecutar acciones sobre los botones, el puerto serie muestra correctamente las acciones recibidas.

Esto ya es un "buen ejemplo" de lo que podemos hacer con un ESP8266. ¡Pero siempre se puede mejorar! Hasta ahora hemos usado un vanilla Javascript (Javascript sin librerías) para la lógica del cliente. Lo cual, siempre es algo deseable.

Pero la tendencia de la programación es los lenguajes declarativos. ¿Es posible en nuestro pequeño ESP8266? ¡Pues sí! Así que, en la próxima entrada, nos adentraremos en el uso de VueJS en el ESP8266. ¡Hasta la próxima!

Descarga el código

Todo el código de esta entrada está disponible para su descarga en GitHub.

Si te ha gustado esta entrada y quieres leer más sobre ESP8266 puedes consultar la sección
tutoriales de ESP8266

Anuncio:

Previous Obtener orientación y altitud (AHRS) con IMU 9DOF y RTIMULib Arduino
Next Qué son las vías en una PCB y cuál es su función
1000
2 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
newest oldest
erik

Hola,
Primero de todo geniales artículos muy fáciles de entender y muy bien explicados!Mi pregunta es saber si esta serie de artículos que dices que son para el esp8266 son también compatibles con el ESP32?

Rafael Reina

Hola Luis. Funciona perfecto contra el cliente Web.
Pero necesitaria conectarme desde otro ESP8266 como cliente para preguntar la temperatura del servidor y conectar la caldera, como ejemplo para entendernos.
He encontrado un articulo en ***link removed*** pero no logro hacerlo funcionar. Falla al hacer el Handshake
Creo que un articulo sobre como implementar un cliente en una ESP8266 seria muy interesante.
Y muchas gracias por tu magnifico trabajo