La finalidad de este tutorial es crear un servidor web dentro de la placa NodeMCU, para que sirva de control de algún dispositivo a distancia, como por ejemplo, un invernadero.
Pasaremos a explicar paso a paso, cada una de las etapas más importantes
Como vemos en la imagen, vamos a preparar nuestra placa para que trabaje en modo servidor. Esto hace que , bajo una petición http que se formule desde un cliente ( tu dispositivo ), el nodeMCU muestre la información que contiene en su código.
En la parte derecha se muestra la información, donde se representa el estado del pin GPIO, la temperatura, humedad y presión.
Para facilitar el aprendizaje , vamos a hacerlo funcionar como dispositivo que encienda y apage un led, para luego incorporar los elementos de medida atmosférica
En el cliente vemos un texto con botones, etc. Esto es gracias a los archivos html y css que tenemos que incluir en la memoria flash del nodeMCU.
En resumidas cuentas
1º El servidor web controla un LED conectado al ESP8266 GPIO
2. Este es el LED del ESP8266 de la placa
2º La página del servidor web muestra dos botones: ON y OFF - para encender
y apagar el GPIO 2;
3º La página del servidor web también muestra el estado actual de GPIO;
4º También utilizará un sensor BME280 para mostrar las lecturas del sensor
(temperatura, humedad y presión).
Preparamos el ESP8266 usando el IDE de Arduino, así que debes tener
instalado los archivos necesarios para el ESP8266. Ya lo hicimos
en la anterior práctica. Dejamos el enlace
Instalar la placa ESP8266 en Arduino IDE
Para subir archivos al Sistema de Archivos Flash ESP8266 SPI (SPIFFS),
usaremos el plugin Filesystem Uploader. Instala el plugin en tu IDE de
Arduino:
Instalar el cargador del sistema de ficheros ESP8266 en Arduino IDE
Una librería es pequeño programa que contiene una colección de
funciones para incluir en tu programa (sketch ) y que
proporciona una cierta funcionalidad específica.
A día de hoy, esta librería no está disponible para su descarga a través del gestor de librerías del IDE de Arduino. Lo vamos a hacer de forma manual
1º Haga clic aquí para descargar la biblioteca de ESPAsyncWebServer. Es un archivo comprimido que hemos obtenido de sus creadores ( ver ->https://github.com/me-no-dev/ESPAsyncWebServer-< )
2º Encontramos una carpeta zip, que la descomprimimos
3º La carpeta que obtenemos, renombrarla como ESPAsyncWebServer
4º Buscamos dónde está instalado el IDE de ardino, y vamos a la sección libraries ( librerias )
5º Dentro de esa carpeta, añadimos la carpeta renombrada ESPAsyncWebServer
Otra forma es hacerlo directamente desde Programa ->Librerias -> Añadir
libreria zip, pero tenemos que asegurarnos que se sube la librería sin la
terminación master
Si salimos del IDE y entramos de nuevo, veremos que ya aparece la librería
La librería ESPAsyncWebServer también necesita la librería ESPAsyncTCP
para que pueda funcionar correctamente. Pasos para instalar la biblioteca
ESPAsyncTCP:
1º Haga clic aquí para descargar la
biblioteca ESPAsyncTCP. Al igual que en caso anterior, al
descomprimir la carpeta, vemos que acaba en master.
2º Descomprimimos, y llevamos la carpeta de nuevo a la carpeta librerias del IDE
3º Cambiar el nombre de la carpeta de ESPAsyncTCP-master a ESPAsyncTCP
También se puede hacer como antes usando la herramienta de incluir la librería
Luego volveremos a incluir otras librerías para la estación meteorológica, pero por el momento, con esto es suficiente
A la hora de mostrar la página del servidor, tenemos dos archivos que son necesarios. El primero es un html donde se muestra la información que vemos en la primera imagen de este tutorial. El segundo archivo es una hoja de estilos css, que da forma a cada elemento del archivo html, por ejemplo, el color de los botones, el tamaño de las fuentes, etc
Una vez creado esos archivos, los tenemos que incluir dentro de una carpeta llamada "data", junto al archivo .ino del proyecto. Ver imagen
Una vez que tenemos los archivos , los podemos subir utilizando la herramienta antes instalada Filesystem Uploader
Para hacer este paso, dejo el enlace con los dos archivos ( html y css ) con nodemcu y uso de SPIFFS
Para subirlo, procedemos de la siguiente manera
1º Creamos un proyecto nuevo. No importa que esté vacio.
2º Lo guardamos en algún lugar de nuestro PC
3º Abrimos la carpeta que se ha creado, y bajamos el archivo anterior. descomprimimos y hacemos que la carpeta data esté junto a nuestro proyecto ( ver imagen de arriba )
4º En la imagen superior se ve la ruta para subir los dos archivos. Nos debe dar un mensaje positivo si se han subido bien
Por último, vamos a añadir en nuestro proyecto ( abierto antes ) el
siguiente código
A destacar dentro del código tenemos
1º procesador()
La función processor() atribuye un valor a los marcadores de posición que
hemos creado en el archivo HTML. Acepta como argumento el marcador de
posición y debería devolver una cadena que reemplazará al marcador de
posición. La función processor() tiene la siguiente estructura, donde
añadimos explicaciones ( siempre empezando con // para que no se
ejecuten como código ) :
String processor(const String& var){ //Generamos la variable de cadena processor que además será una función Serial.println(var); //
esta función primero verifica si el marcador de posición es el ESTADO que hemos creado en el archivo HTML.
{if(var == "STATE"){
//Si lo está, entonces, de acuerdo con el estado del LED, ponemos la variable ledState en ON u OFF.
if(digitalRead(ledPin)){ ledState = "ON"; } else{ ledState = "OFF"; }
//Finalmente, se devuelve la variable ledState. Esto reemplaza el marcador de posición STATE con el valor de cadena ledState.
Serial.print(ledState); return ledState; }
Ya funciona ?. Bueno ahora pasaremos a detallar algunas cosas importantes dentro del archivo html
HTML requiere un curso aparte y este no es nuestro propósito. Veremos algunas cosas para que los alumnos se hagan una idea de la programación html y pueda modificar según nos interese. En la cabecera tenemos
<link rel="stylesheet" type="text/css" href="style.css">
La etiqueta <link> le indica al archivo HTML que está utilizando una hoja
de estilo externa para formatear el aspecto de la página. El atributo rel
especifica la naturaleza del archivo. que en este caso es una hoja de
estilo ( CSS ).
El atributo type se establece en "text/css" para indicar que es
un archivo CSS .
El atributo href indica la ubicación del archivo. Como el archivo CSS y HTML están en la misma carpeta, sólo se pone el nombre del archivo: style.css. Si style.css estuviese ubicado en otra carpeta como estilos, entonces deberiamos poner
<link rel="stylesheet" type="text/css" href="estilos/style.css">
Las etiquetas html empiezan con <> y acaban con </>, de esta forma , si
aparece una p, es relativa a párrafo , o si tenemos una a, se refiere a un
enlace. Veremos esta parte
La primera línea escribe GPIO state y luego aparece una variable que se toma del programa que hay en el nodeMCU.. La variable %STATE% tomara el valor ON o OFF
En la siguiente línea hay dos enlaces en dos botones. El primero lleva a la misma página pero con la terminación /on, de forma que si nuestra ip es 192.168.1.139, aparecerá en el navegador 192.168.1.139/on. Lo mismo para el siguiente botón
La siguiente parte consiste en tener acceso a nuestro dispositivo desde fuera de nuestra red. Para ello vamos a ver este
Tutorial para tener acceso a nuestra red local desde Internet
Como trabajo final , vamos a hacer un proyecto para desarrollar en casa
a) BMP280 modulo sensor presión barométrica
b) Interruptor Reed switch magnetico abierto N-O
c) MQ135 MQ-135 Sensor calidad del aire
d) HCSR501 Modulo Sensor Detector de movimiento PIR HC-SR501
e) MQ-7 modulo CO sensor detector gas monóxido de carbono
Una vez completada esta primera parte, pasamos a incorporar el BME 280 para hacer nuestra estación meteorológica.
Ver -> Estación Meteorológica con NodeMCU
Bibliografia https://randomnerdtutorials.com/esp8266-web-server-spiffs-nodemcu/
Enlaces del NodeMCU ( ESP 8266 )
Diseño PCB Principios básicos de antenas