La librería WiFiManager sirve para configurar los parámetros de una red WiFi desde un móvil en un ESP8266. Todo esto sin tener que tocar ni una línea de código, simplemente rellenando un formulario en una página web.
Hasta ahora, los ejemplos que hemos visto en el blog para conectar una placa como NodeMCU a una red WiFi pasaban por configurar en el código el SSID y la contraseña de dicha red. Esto tiene un gran inconveniente ¿qué sucede si uno de estos dos parámetros cambia? No queda otra que cargar un nuevo programa.
Sin embargo, la librería WiFiManager nos permite configurar una nueva red WiFi sin cargar un nuevo código. A parte, tiene más funcionalidades que iremos viendo en este artículo.
Se trata de una librería de código abierto que puedes encontrar en GitHub y que nos permite dotar a los dispositivos del IoT Maker de algo más de independencia.
En este artículo aprenderás:
- Cómo funciona WiFiManager
- Instalación de la librería
- Configuración y programación
- Alternativas a WiFimanager
¿Estás preparado? Abre el IDE de Arduino, saca tu placa basada en ESP8266 y empecemos este tutorial práctico.
Indice de contenidos
- 1 Cómo funciona WiFiManager
- 2 Instalación de la librería WiFiManager
- 3 Primer ejemplo con WiFiManager
- 4 Cómo configurar red WiFi del ESP8266 desde el móvil
- 5 LED indicador del modo WiFiManager
- 6 Parámetros adicionales con WiFiManager
- 7 Alternativas a WiFiMamager
- 8 Conclusiones sobre la librería WiFiManager
Cómo funciona WiFiManager
Ya has visto en varios tutoriales que para conectar un ESP8266 a una red WiFi necesitas 3 cosas. Primero que el ESP8266 esté en modo estación es decir, como cualquier dispositivo que tenemos por casa y se conecta a la red WiFi.
Lo siguiente es facilitar el nombre de la red WiFi (llamado SSID) y, si está protegida, una contraseña.
El problema reside cuando te llevas ese proyecto basado en el ESP8266 a otro sitio donde hay otra red WiFi diferente. Hasta ahora, lo que haces es editar el código del ESP8266 y modificar el SSID y la contraseña de la red WiFi.
Si no lo modificas, el ESP8266 lo que hace es intentar conectar a la red WiFi y si no puede pues da algún tipo de error.
Aquí es donde entra WiFiManager. En el caso de que no se pueda conectar a la red WiFi que tiene configurada por defecto, crea un access point o punto de acceso y activa un servidor de DNS y un servidor web.
Entonces, desde cualquier dispositivo con WiFi (un ordenador, un portátil, un teléfono o una tablet) te conectas a ese access point. A través de un portal cautivo aparecerá una ventana emergente que te permite configurar la red WiFi sin tener que cargar de nuevo el programa.
Pero no sólo eso, también puedes configurar otros datos como el broker MQTT o la IP de Node-RED o lo que quieras. Todo sin tener que editar ni una línea de código.
Instalación de la librería WiFiManager
Creo que si no eres nuevo en el blog ya sabrás cómo se instalan las librerías de Arduino. Si no es así, te recomiendo que leas el tutorial Cómo instalar y gestionar librerías de Arduino.
Se pueden instalar librerías de 3 formas:
- A través del gestor de librerías del IDE de Arduino.
- Descargando un archivo .zip con el código.
- Copiando todo el código en la carpeta libraries del IDE de Arduino.
Cualquiera de estas tres formas es válida. Yo prefiero utilizar la primera para instalar la librería WiFiManager así que vamos a continuar utilizando este método.
Abre el IDE de Arduino y ves a la opción del menú Programa>Incluir Librerías>Gestionar librerías. Se abrirá una ventana emergente donde podremos buscar la librería para instalarla.
Busca wifimanager e instala la que pone WiFiManager by tzapu y le das al botón de instalar.
Esto instalará tanto el código como los ejemplos. Ahora ya podemos probar la librería WiFiManager
Primer ejemplo con WiFiManager
En este primer ejemplo vas a utilizar la funcionalidad principal de la librería WiFiManager con un ESP8266. Da lo mismo si utilizas una placa NodeMCU o cualquier otra compatible con el ESP8266.
El código que tiene que cargar en la placa sería el siguiente.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
#include <ESP8266WiFi.h> #include <DNSServer.h> #include <ESP8266WebServer.h > #include <WiFiManager.h> void setup() { Serial.begin(115200); // Creamos una instancia de la clase WiFiManager WiFiManager wifiManager; // Descomentar para resetear configuración //wifiManager.resetSettings(); // Cremos AP y portal cautivo wifiManager.autoConnect("ESP8266Temp"); Serial.println("Ya estás conectado"); } void loop() {} |
Son muy pocas líneas de código pero suficiente para que puedas configurar la red WiFi desde el tu teléfono móvil.
Lo primero es importar las librerías líneas 1-4. Necesitas 4 librerías ESP8266WiFi, DNSServer, ESP8266WebServer y WiFiManager.
El servidor de DNS sirve para redirigir el tráfico a la página web o portal donde configurar la WiFi. El servidor web se encargará de proporcionar la página web donde introducirás el SSID y la contraseña de la red WiFi.
En la función setup() se crea una instancia a la clase WiFiManager, línea 11, que se encarga de toda la gestión del sistema. Con la función autoConnect, línea 17, se crea el access point y el portal cautivo. Cuando el código llega a la línea 17 se queda bloqueado hasta que consigue conectarse a una red WiFi. Si no consigue conectarse a una red WiFi no seguirá con la ejecución del resto del código.
La función autoConnect puede admitir varios parámetros para indicar el nombre o SSID y la contraseña del access point que crea el ESP8266.
Por ejemplo si escribes wifiManager.autoConnect(“NOMBRE-AP”, “PASS-AP”) estás indicando que la red WiFi del access point tiene el nombre NOMBRE-AP y la contraseña PASS-AP. La longitud de la contraseña debe ser entre 8 y 63 caracteres alfanuméricos.
En este caso sólo ponemos el nombre de la red WiFi del access point. Es interesante poner un nombre descriptivo si tienes más de un ESP8266 configurado con la librería WiFiManager. ESP8266Temp puede indicar que es el ESP8266 que mide la temperatura por ejemplo.
También puedes hacer la llamada a la función autoConnect sin parámetros. En este caso generará un nombre automáticamente compuesto por la palabra ESP seguido de un ID obtenido del propio chip. Eso sí, no tendrá contraseña.
Ahora carga el código y abre el monitor serie. Verás que empiezan a aparecer mensajes donde todos empiezan por *WM: Estos mensajes los escribe automáticamente la librería WiFiManager ya que por defecto está activado el modo depuración por el monitor serie. Si quieres desactivar el modo depuración o debug utiliza la función wifiManager.setDebugOutput(false). Se recomienda que en la fase de desarrollo se mantenga el modo depuración activo.
Estos mensajes son muy útiles porque nos permiten saber qué está sucediendo dentro del ESP8266. En este caso concreto nos está diciendo que está utilizando los datos de la última red WiFi que ha utilizado el ESP8266.
Tengo que aclarar una cosa. Ya sea con la librería WiFiManager o sin ella, el ESP8266 tiene un procedimiento que almacena las credenciales de la última conexión WiFi que ha utilizado. Por eso, aunque en este caso no se haya configurado nada, consigue conectarse a una red WiFi.
Para probar la librería WiFiManager lo mejor es descomentar la línea de código donde pone wifiManager.resetSettings(), línea 14.
Esta función de la librería WiFiManager borra las credenciales. Ahora vuelve a cargar el código en el ESP8266 y abre el monitor serie. Aparecerá algo parecido a esto.
Como puedes comprobar ahora los mensajes son diferentes. La librería WiFiManager nos está diciendo que ha creado un access point que se llama ESP8266Temp y que tiene la IP 192.168.4.1
En este punto ya puedes configurar la red WiFi desde el móvil o cualquier otro dispositivo con conexión WiFi.
Cómo configurar red WiFi del ESP8266 desde el móvil
La función principal de WiFiManager es que podemos configurar la red WiFi sin tener que cargar de nuevo el código. Pero ¿cómo puedo hacerlo?
El procedimiento es muy sencillo y es muy parecido al que utilizas cuando te conectas a una red WiFi de un hotel o centro comercial.
En el caso de WiFiManager, el ESP8266 crea su propia red WiFi a la que te tienes que conectar e introducir el SSID y la contraseña de la red a la que quieres conectar el dispositivo.
Para conseguir esto, WiFiManager crea un servidor web, un servidor de DNS y un portal cautivo.
Vamos a ver los pasos que hay que seguir para que lo entiendas mejor.
Deja el monitor serie abierto porque aparecerán mensajes importantes. Para seguir los siguientes pasos puedes hacerlo con tu móvil, con una tablet o cualquier aparato con conexión WiFi. Yo he utilizado el móvil y por eso se muestran las pantallas desde un móvil. El resto de dispositivos no se diferenciará mucho de lo que vas a ver aquí.
Conexión del dispositivo a la red WiFi del ESP8266
Abre tu dispositivo y acceder a las redes WiFi, donde seguramente esté la de tu casa o trabajo. Busca la que pone ESP8266Temp. Si recuerdas, este es el parámetro que hemos pasado a la función wifimanager.autoConnect().
La tienes que seleccionar y conectarte a ella. En el caso de que hayas pasado un segundo parámetro a la función wifimanager.autoConnect(«ESP8266Temp», «12345678»), ese segundo parámetro será la contraseña. Te recomiendo que si dejas un dispositivo en cualquier sitio donde no lo tengas controlado, pongas una contraseña.
Una vez que estés conectado te aparecerá el portal cautivo con la página web donde puedes elegir entre cuatro opciones.
Configurar WiFi
Vamos a configurar la red WiFi. Necesitarás el SSID y la contraseña. Si haces click en la opción Configure WiFi accederás a la página para configurar la WiFi. También puedes hacerlo con el botón Configure WiFi (No Scan) pero en este caso no escanea las redes WiFi alrededor y te tocará introducir el SSID a mano.
Por ejemplo la red WiFi a la que voy a conectar el ESP8266 es INVITADOS que la he seleccionado en la lista. Luego escribe la contraseña y le das al botón de Save. Esta opción guarda el SSID y la contraseña dentro de la memoria del microcontrolador.
Aparecerá un mensaje en inglés informando que las credenciales se han guardado y que está intentando conectar el ESP8266 a la red. En caso de que falle, deberás volver a conectar al access point otra vez.
En el monitor serie puedes ver más información del proceso de configuración. Es conveniente ir revisando los mensajes sobre todo al principio para saber qué está haciendo.
Si todo ha ido bien, ya tendrás configurada la red WiFi y el ESP8266 se habrá conectado con éxito.
Sólo queda por ver una cosa y es ¿cómo sé si el ESP8266 está en modo access point o se ha conectado a la red?
Para este caso lo mejor es tener un código de luces utilizando el LED integrado en la placa (si tiene), que nos indique en qué modo se encuentra. Es lo que vamos a ver a continuación.
LED indicador del modo WiFiManager
Estoy seguro que ya te ha pasado probando el ejercicio anterior. De repente no sabes en qué modo está el WiFiManager. Es lógico, o miras el monitor serie o es imposible adivinarlo.
Además, el modo depuración no lo tendrás activado cuando coloques el ESP8266 en su lugar final. Te aconsejo que lo apagues.
Si tu placa tiene un LED integrado, puedes utilizarlo para mostrar información de en qué modo está. Si no tiene LED siempre puedes conectar uno.
Para gestionar el LED voy a utilizar la librería Ticker. Esta librería es un temporizador es decir, ejecuta una tarea cada intervalo de tiempo configurable. No hace falta instalar la librería Ticker ya que viene incluída en el core de ESP8266.
Vamos a empezar con el código.
Incluir librerías y declaración de variables
|
1 2 3 4 5 6 7 8 9 10 11 |
#include <ESP8266WiFi.h> #include <DNSServer.h> #include <ESP8266WebServer.h > #include <WiFiManager.h> #include <Ticker.h> // Instancia a la clase Ticker Ticker ticker; // Pin LED azul byte pinLed = D4; |
Lo primero es importar las librerías ESP8266Wifi, DNSServer, ESP8266WebServer, WiFiManager y Ticker. Líneas 1 a 5.
Luego declara el objeto ticker de la clase Ticker, línea 8, y una variable que se llama pinLed del tipo byte en la línea 11. Esta variable contendrá el número del pin donde está conectado el LED integrado en la placa. En el caso de NodeMCU es D0 o D4 ya que tiene dos LEDs.
Función parpadeoLed()
|
1 2 3 4 5 |
void parpadeoLed(){ // Cambiar de estado el LED byte estado = digitalRead(pinLed); digitalWrite(pinLed, !estado); } |
Esta función será la encargada de hacer parpadear el LED cuando se necesite. Lo único que hace es cambiar al estado contrario la salida digital donde está conectado.
Función setup()
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
void setup() { Serial.begin(115200); // Modo del pin pinMode(pinLed, OUTPUT); // Empezamos el temporizador que hará parpadear el LED ticker.attach(0.2, parpadeoLed); // Creamos una instancia de la clase WiFiManager WiFiManager wifiManager; // Descomentar para resetear configuración //wifiManager.resetSettings(); // Cremos AP y portal cautivo y comprobamos si // se establece la conexión if(!wifiManager.autoConnect("ESP8266Temp")){ Serial.println("Fallo en la conexión (timeout)"); ESP.reset(); delay(1000); } Serial.println("Ya estás conectado"); // Eliminamos el temporizador ticker.detach(); // Apagamos el LED digitalWrite(pinLed, HIGH); } |
Dentro de la función setup() es donde configuras WiFiManager y gestionas el LED.
La idea es hacer que el LED parpadee cuando está en modo access point y que esté apagado cuando se haya conectado a la red WiFi. Es importante este último paso si estás utilizando pilas o baterías.
Si ya has leído el artículo del relé WiFi Sonoff basado en ESP8266, todo esto te sonará. Este dispositivo tiene la misma función cuando está en modo configuración.
El código es muy parecido al que ya hemos visto. Me voy a saltar todo lo que tiene que ver con WiFiManager.
En la línea 27 hay que llamar a la función ticker.attach() con dos argumentos. Esta función programa un temporizador.
El primer parámetro es cada cuánto tiempo quieres que se ejecute una tarea indicado en segundos. 0,2 segundos equivalen a 200 milisegundos.
El segundo parámetro es la función que quieres que se ejecute cada vez que pase el tiempo. En este caso llama a la función parpadeoLed(). A este tipo de funciones se le suele llamar callback en programación.
A continuación se configura WiFiManager como hemos visto. En la línea 46, llamamos a la función ticker.detach() que elimina el temporizador que habíamos creado. Es lógico, si el código llega hasta aquí es que o hemos configurado la red WiFi a través de la web, o ya estaba configurada.
Por último, en la línea 49, apagamos el LED integrado en la placa. Ojo con esto, en las placas NodeMCU el LED está invertido y por lo tanto cuando tenemos HIGH se apaga y con LOW se enciende.
Función loop()
|
1 |
void loop() {} |
En la función loop() pondrás la lógica para, por ejemplo, enviar la geolocalización a través de la WiFi con un NodeMCU. También puedes enviar la temperatura o cualquier cosa que se te ocurra.
Lo bueno es que ya tienes configurada la red WiFi así que haz uso de ella como quieras.
Sólo te queda una cosa, carga el código a la placa y haz la prueba.
Código completo
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
#include <ESP8266WiFi.h> #include <DNSServer.h> #include <ESP8266WebServer.h > #include <WiFiManager.h> #include <Ticker.h> // Instancia a la clase Ticker Ticker ticker; // Pin LED azul byte pinLed = D4; void parpadeoLed(){ // Cambiar de estado el LED byte estado = digitalRead(pinLed); digitalWrite(pinLed, !estado); } void setup() { Serial.begin(115200); // Modo del pin pinMode(pinLed, OUTPUT); // Empezamos el temporizador que hará parpadear el LED ticker.attach(0.2, parpadeoLed); // Creamos una instancia de la clase WiFiManager WiFiManager wifiManager; // Descomentar para resetear configuración //wifiManager.resetSettings(); // Cremos AP y portal cautivo y comprobamos si // se establece la conexión if(!wifiManager.autoConnect("ESP8266Temp")){ Serial.println("Fallo en la conexión (timeout)"); ESP.reset(); delay(1000); } Serial.println("Ya estás conectado"); // Eliminamos el temporizador ticker.detach(); // Apagamos el LED digitalWrite(pinLed, HIGH); } void loop() {} |
Parámetros adicionales con WiFiManager
A parte de poder configurar la red WiFi, WiFiManager te permite gestionar otro tipo de parámetros como una IP, una URL o la API Key de un servicio web. WiFimanager no se encarga de almacenar estos parámetros, sólo se encarga de recogerlos de la web de configuración.
Tu mismo eres el encargado de almacenar esa información en algún sitio. Puedes almacenarlo en la memoria EEPROM, enviarlo a un servicio externo o plataforma en la nube o utilizar el sistema de ficheros SPIFFS.
Esta última opción es la más utilizada (en mi caso).
El sistema SPIFFS utiliza la memoria flash del ESP8266 como si fuera un disco duro de un ordenador.
Debes tener en cuenta que si utilizas el sistema de ficheros SPIFFS convivirán dentro de la flash toda esta información y el propio programa. Aún así, cuando subas un nuevo programa los datos que tenías guardados no se borrarán.
SPIFFS divide la memoria flash reservando parte para el programa y parte para el sistema de archivos. Lo que ocupe cada parte depende de la placa que estemos utilizando.
Si utilizas un NodeMCU de 4MB, el IDE de Arduino te da la posibilidad de utilizar 0MB, 1MB, 2MB o 3MB para SPIFFS.
Elegir una opción u otra dependerá del tamaño del programa que vas a utilizar y de la información que vas a almacenar.
En este tutorial no voy a entrar en más detalle sobre esta función de WiFiManager ya que se extendería mucho. Para utilizar SPIFFS necesitas tener instaladas la librería FS y ArduinoJson.
Cómo funciona y cómo hay que configurarlo lo dejo para otro artículo. Si tienes mucho interés deja un comentario al final de esta página.
Alternativas a WiFiMamager
WiFiManager fue la primera librería que apareción en el panorama del ESP8266 y por lo tanto es la más popular. Sin embargo, hay otras alternativas que podemos tener en cuenta. A continuación te enumero algunas de ellas:
Algunas de ellas tiene más funcionalidades como actualización OTA o configuración de broker MQTT. Busca la que mejor se adapte a tu proyecto y la utilizas. Eso sí, no te olvides de mencionar al creador y compartir el código que crees :)
Conclusiones sobre la librería WiFiManager
Hasta aquí este tutorial donde hemos visto la librería WiFiManager. Esta librería es fundamental si quieres utilizar tus prototipos como producto final e incluso si los quieres comercializar.
Lo más importante es que esta librería evitará que la persona que configure la red WiFi tenga que tener conocimientos de Arduino y la programación.
Has visto que es muy sencillo hacer una configuración básica, pero se pueden hacer cosas muy interesantes. Te animo que sigas investigando sobre la librería WiFiManager para ESP8266 y que compartas con nosotros tus experiencias en los comentarios de esta artículo.
