Arduino con Esp8266 / Esp-01 Cliente Web

El ESP8266 es un chip de bajo costo Wi-Fi con una pila TCP/IP completa y un microcontrolador, fabricado por Espressif, una empresa afincada en Shanghai, China.

El primer chip se hace conocido en los mercados alrededor de agosto de 2014 con el módulo ESP-01, desarrollado por la empresa AI-Thinker. Este pequeño módulo permite a otros microcontroladores conectarse a un red inalámbrica Wi-Fi y realizar conexiones simples con TCP/IP usando comandos al estilo Hayes.1

Es importante recalcar que el ESP8266 es un microcontrolador que puede incluso reemplazar al Arduino dependiendo la aplicación, pudiendo cargar lógica de programación en su memoria, incluso, utilizando el Arduino IDE. La programación no es tan sencilla como en el Arduino, pero es una utilidad muy eficiente y de bajo costo. En otras entradas estaremos viendo como utilizar el ESP8266 sin el Arduino.

En esta ocasión vamos a configurar un módulo ESP-01 para que dote a nuestro Arduino de funcionalidad Wifi.

Inicialmente, debemos diferenciar el módulo ESP-01 y establecer comunicación con el. Estos módulos vienen con comunicación a 9600bps (azul) y 115200bps (negro).

Vamos a armar un circuito en el que el Arduino sirva de pasarela de comunicación (passthrough) para comunicarnos directamente con el ESP-01 a través del Puerto Serial del Arduino (Pin 0 y 1) usando el terminal. En mi caso, tengo un modulo de 115200 (negro).

Nótese que conecté el TX con TX y el RX con RX. De ese modo hacemos la pasarela. También es importante dejar en RESET el Arduino, para que no ejecute lógica. A continuación el diagrama:

Vamos a conectar el USB en el Arduino y abrir el Terminal, reiniciar el módulo y deberíamos obtener la respuesta “ready”. Ignorar los caracteres aleatorios que salen al inicio de la respuesta, forman parte del firmware del módulo. Nota que mi terminal esta en 115200bps.

Ingresé el comando “AT”, obteniendo la respuesta “OK”. Una lista de todos los comandos AT disponibles está aquí. Básicamente lo mas importante es entender lo siguiente:

En el programa, podemos usar el módulo ESP-01 en el puerto Serial del Arduino, pero perderíamos la comunicación. Si usamos un Arduino Mega no hay problemas, porque tenemos Serial1, Serial2 y Serial3 disponibles. Sin embargo, si vamos a utilizar Arduino UNO, lo hacemos a través de la libreria SoftwareSerial, por lo que es importante bajar la velocidad de comunicación del ESP-01 a 9600bps, ya que sencillamente el SoftwareSerial a 115200bps no funciona.

 

Para el fin mencionado anteriormente entonces utilizamos el siguiente comando: “AT+UART_DEF=9600,8,1,0,0”

Obtenemos la respuesta “OK” y es básicamente el único comando que vamos a utilizar antes de proceder a configurar el Arduino con el ESP-01 Wifi. Movemos el terminal a 9600bps, y con el comando “AT”, obtenemos “OK”.

Ahora hacemos las conexiones para el Cliente Web:

Existen diversos métodos de configuración del ESP-01 con el Arduino: usando los mismos comandos AT, o utilizando algunas librerías para tal efecto. Entre las librerías que existen, vamos a usar WiFiEsp. Esta librería provee una funcionalidad casi idéntica al Shield Arduino Wifi.

Abrimos el ejemplo de la librería: “WebClientRepeating”

Cambiamos:

char ssid[] = “wifiSSID”; // your network SSID (name)
char pass[] = “wifiPassword”; // your network password

Y nota que ahora RX y TX están cruzados:

SoftwareSerial Serial1(6, 7); // RX, TX

Recuerda quitar el jumper RESET del Arduino. Cargamos el programa y si todo sale bien en el terminal deberíamos obtener esta respuesta:

Cambié el Server de Conexión a mi servidor local (Apache) y creé un HTML sencillo que me mostrara un mensaje, para probar la funcionalidad. Aquí está el código y la respuesta.

 

 

Por último, las conexiones vistas son en ambiente de laboratorio. ES IMPORTANTE señalar lo siguiente:

  • La alimentación 3.3v del ESP8266 en condiciones de alto trabajo llega a consumir 200ma. El pin de 3.3v del Arduino en sus especificaciones maneja 50mA. Es por esto, que en condiciones de trabajo podemos dañar el pin. Lo cual hace que sea necesario el uso de una fuente externa para la alimentación del ESP-01.
  • Por el mismo motivo de diferencias de voltaje, se recomienda utilizar un divisor de voltaje entre el pin TX del Arduino y el RX del ESP-01, para ajustar los niveles de voltaje y evitar daños.
  • Estas recomendaciones son para un montaje final, sin embargo, como comentado, en el laboratorio, sin tiempos de trabajo prolongados, todo funciona perfectamente sin daños.
  • Esta serían las conexiones mencionadas.

 

¿Por que Laravel, Bootstrap y VueJS?

Entonces buscamos un tutorial de HTML y PHP y aprendemos a escribir “HOLA MUNDO” en el navegador. ¿Y entonces? Como pasamos de aquí a una página interactiva, que consulte valores en una base de datos, se refresque automaticamente y que de paso sea visualmente atractiva.

El camino por recorrer es largo, y no es porque sea dificil, sino porque son muchos caminos que podemos elegir para llegar al mismo destino. Entonces sucede que pasamos mas tiempo eligiendo el camino que recorriendolo.

Puedes elegir caminos tortuosos, sin ayudas en la carretera y con un sol inclemente…  Entonces nos fuimos con HTML, PHP y MySQL puro, como la vieja usanza.

Pero luego vimos que existen un sinfín de diversas tecnologías, todas buenas, y realmente no se quiere defender el camino elegido como el mejor, sino uno que cumple con los requerimientos de nuestros proyectos y que de paso, nos guste. Para un equipo de trabajo que viene del mundo de la automatización de procesos y la programación estructurada toca estudiar nuevos conceptos, y uno de ellos es el Modelo-Vista-Controlador (MVC), lo cual es una lectura obligatoria para entender de que va todo este mundo.

Es por esto que aunque para muchos programadores web, tal vez el microcontrolador y el C++ sean de mirar de lejos, el Arduino nos es muy divertido y sencillo de programar, ya que comparado con la forma de programar los micros hace 10 años, es un juguete.

Backend:

Entonces tocó elegir entre un sinfín de frameworks para facilitar el trabajo. Y realmente entender con la práctica y no con teoría la diferencia entre el Backend y Frontend.

  • Basados en PHP: Laravel, Symfony, Zend Framework, CodeIgniter, CakePHP, FuelPHP, Yii 2, Phalcon.
  • Basado en Python: Django, Piramid, Web2py, TurboGears.
  • Basado en NodeJS (Javascript): Express.

Si, hay tantos y realmente no se estudiaron todos, sino los mas populares. Cada uno con sus pro y contra, ventajas y desventajas.

Y nos decidimos por Laravel cuando conocimos y nos enamoramos de Eloquent.

Eloquent es el ORM (Object-Relational mapping) que incluye Laravel para manejar de una forma fácil y sencilla los procesos correspondientes al manejo de bases de datos en nuestro proyecto. Transforma las consultas SQL a un sistema MVC lo que nos permite procesar consultas SQL directamente y así protegernos de la inyección SQL. En otras palabras, es poder usar la información almacenada dentro de la base de datos sin tener que usar sentencias SQL en el codigo, sino con funciones y variables directamente.

Verdaderamente Laravel tiene muchísimas otras funcionalidades super interesantes como los son Blade, las Rutas y la gran comunidad y documentación existente; pero Eloquent fué amor a primera vista. La mayoría de nuestra aplicaciones funcionan con API, por lo que la interacción con la base de datos y la generación de una respuesta del tipo Json son fundamentales, lo cual Laravel simplifica.

Adicionalmente a estos puntos, utilizar el framework nos permite organizar el código y facilita el trabajo en equipo bajo un mismo ambiente de desarrollo. Podemos sumar que la mayoría de los hosting tienen PHP, por lo que la implementación de un framework PHP en un hosting sencillo ahorra muchas cosas, desde el presupuesto hasta la preparación de los servidores.

Frontend:

Es verdad que el trabajo pesado lo hace el servidor en el backend, tras bambalinas; pero lo bonito es lo que vende, y en este punto hay que ser bastante detallista para obtener los mejores resultados posibles. Es por esto que bootstrap fué una tecnología a usar por defecto para obtener estilos visualmente atractivos sin querer reinventar la rueda.

Las páginas web en las que navegabas de aqui para allá y los formularios que te envian a una página de confirmación para despues regresar al inicio quedaron en el pasado; entonces surgen nombres como jquery, ajax, axios, etc. El hecho es que tenemos otro sin fin de librerías y frameworks de desarrollo basados en NodeJS y Javascript para la visualización de páginas web y el desarrollo de una SPA (Single-Page Application): React, Angular, VueJS, Meteor, Ember, Backbone, Aurelia, etc. Tampoco los estudiamos todos pero si lo suficiente para comprender que para nuestros fines no necesitamos un framework tan complejo con Angular, en el hay que instalar y preparar toda una plataforma de desarrollo antes de escribir la primera línea de codigo.

Es por ello que decidimos usar VueJS para el desarrollo de una SPA, el refrescamiento en tiempo real de la página y la incorporación de los componentes necesarios a medida. La elección viene fundamentada por tres puntos:

  • La curva de aprendizaje de VueJS es bastante sencilla.
  • El framework es progresivo, es decir, se puede usar e incorporar a la medida. Se puede iniciar una aplicación llamando al CDN (tipo Bootstrap), así como también crear una estación de desarrollo completa (tipo Angular).
  • Laravel trae todo preparado para la incorporación de VueJS y estaremos usando Laravel Mix para el desarrollo de los proyectos que involucren ambas tecnologías.

Arduino UNO: Sensor de Temperatura y Humedad + LCD

Iniciamos nuestro Proyecto de Estación de Temperatura y Humedad con Arduino Wifi, API Laravel, Bootstrap y Chartist.

Antes que nada asumimos que ya posees conocimientos intermedios de cómo utilizar el Arduino IDE, instalar librerias y ejecutar programas en el microcontrolador.

Objetivo: Obtener la temperatura y humedad del ambiente y presentarla en una pantalla LCD.

 

Estaremos usando el módulo DHT11 que es un sensor de temperatura y humedad digital de bajo costo. Utiliza un sensor capacitivo de humedad y un termistor para medir el aire circundante, y muestra los datos mediante una señal digital en el pin de datos (no hay pines de entrada analógica). Se pueden tomar mediciones cada 2 segundos.
Obtendremos la librería para el DHT11 aquí.

También usaremos una pantalla LCD 16×2 con adaptador I2C, para utilizar sólo 2 líneas de datos.
Obtendremos la librería LiquidCrystal_I2C aquí.

Por último, tendremos la funcionalidad de un pulsador, que permitirá encender o apagar la luz de fondo de la pantalla LCD. Ideal para mantenerla apagada cuando no se necesite visualizar la información en vivo.

El esquemático quedaría así:

Paso 1: DHT11

Utilizando el ejemplo incluido en la librería obtenemos este resultado. Es importante cambiar el delay a 2000, ya que como se describió, 2seg es la rata de muestreo más baja a la que puede trabajar el módulo.

 

Paso 2: LCD

Conectamos la Pantalla LCD como se muestra en el diagrama y podemos utilizar los ejemplos de la librería LiquidCrystal_I2C para obtener funcionalidad.

Algunos datos importantes para lograr el funcionamiento:

  • Debes conocer la dirección de tu pantalla. Generalmente vienen con 0x27, pero hemos probado algunas con otras direcciones. Para esto, utiliza el programa i2cScanner.
  • Asegurate de conectar correctamente los pines SCA y SCL del bus I2C en el Arduino. Puedes probar invertirlos si no funcionan.
  • Cuando estan nuevas, el adaptador I2C de la Pantalla LCD puede venir con el contraste en cero. Ajusta el contraste en el potenciómetro del módulo con un destornillador de bornera.

En este enlace se puede obtener información mas detallada de como conectar y hacer funcionar la pantalla LCD.

 

Paso 3: El pulsador

Conectamos el pulsador utilizando una resistencia pull-up, en el pin 8 tal como se muestra en el diagrama para obtener la funcionalidad de encender o apagar la luz de fondo (backlight) de la Pantalla LCD.

 

Montaje y Código Final

 

Estación de Temperatura y Humedad con Arduino Wifi, API Laravel y Highcharts

Para reforzar todo el aprendizaje que se ha adquirido, se nos vino a la mente crear una estación, cuya aplicación principal será la de monitorear la temperatura y humedad en cuartos con equipos electrónicos y transmitir dicha información vía wifi a nuestro servidor, donde podremos observar las tendencias y generar alertas cuando se necesario.

El diagrama principal va así:

Estaremos desarrollando el sistema en modo local hasta el último paso, donde lo subiremos al servidor.

Vamos a dividir el proyecto en varias etapas e iremos actualizando esta entrada hasta completarlas todas, de la siguiente manera:

  • Arduino: Sensor de Temperatura y Humedad con LCD.
  • Arduino: Comunicación wifi con módulo esp8266.
  • Backend: Base de Datos, API Laravel.
  • Integrando el Arduino con el Backend.
  • Frontend: petición API & Hightcharts
  • Subiendo al servidor y pruebas finales.