"¡Crea un servidor web en ESP8266 con SPIFFS y sorpréndete con NodeMCU!" Contenido: Aprende cómo configurar un servidor web en tu ESP8266 utilizando SPIFFS, el sistema de archivos de flash SPI, y descubre todas las posibilidades que te ofrece NodeMCU para tus proyectos de IoT. ¡No te lo pierdas!

¿Te gustaría aprender a crear un servidor web utilizando ESP8266 con SPIFFS? En este artículo te enseñaremos paso a paso cómo configurar tu NodeMCU para que funcione como un servidor web, permitiéndote almacenar archivos en su memoria flash. ¡No te pierdas esta oportunidad de ampliar tus conocimientos en programación de microcontroladores!

Este tutorial muestra cómo construir un servidor web usando Arduino IDE que sirve archivos HTML y CSS almacenados en el sistema de archivos ESP8266 NodeMCU (SPIFFS). En lugar de tener que escribir el texto HTML y CSS en el boceto de Arduino, creamos archivos HTML y CSS separados.

Servidor web ESP8266 con SPIFFS (SPI Flash File System) - NodeMCU

El servidor web que creamos muestra cómo controlar las salidas ESP8266 y mostrar los valores de los sensores. Como ejemplo, controlamos un LED y mostramos los valores del sensor desde un sensor BME280.

Puede utilizar los conceptos aprendidos en este tutorial para controlar cualquier salida o mostrar valores de sensores de otros sensores.

Recomendaciones de literatura: Servidor web ESP32 con SPIFFS

Contenido

Descripción del proyecto

Antes de pasar directamente al proyecto, es importante describir la tarea de nuestro servidor web para que sea más fácil de entender.

El servidor web controla un LED conectado al ESP8266 GPIO 2. Este es el LED integrado del ESP8266. Puedes controlar cualquier otro GPIO;
En el lado del servidor web, se muestran dos botones: ON y OFF – para encender y apagar GPIO 2;
El lado del servidor web también muestra el estado actual de GPIO;
También utilizan un sensor BME280 para mostrar los valores del sensor (temperatura, humedad y presión).

La siguiente imagen muestra un diagrama simplificado que demuestra cómo funciona todo.

requisitos

Antes de continuar con este proyecto, asegúrese de revisar todos los siguientes requisitos previos.

1. Instale la placa ESP8266 en el IDE de Arduino

Estamos programando el ESP8266 usando Arduino IDE, por lo que se debe instalar el complemento ESP8266. Sigue el siguiente tutorial para instalarlo:

Instale la placa ESP8266 en Arduino IDE (Windows, Mac OS X, Linux)

2. Complemento de carga del sistema de archivos

Para cargar archivos al sistema de archivos Flash SPI ESP8266 (SPIFFS), utilizamos el complemento Filesystem Uploader. Instale el complemento en su IDE de Arduino:

Instale el cargador del sistema de archivos ESP8266 en el IDE de Arduino

3. Instalación de bibliotecas

Una de las formas más sencillas de crear un servidor web con archivos del sistema de archivos es utilizar el ESPAsyncWebServer Biblioteca.

Instalación de la biblioteca ESPAsyncWebServer

Esta biblioteca no se puede descargar a través del administrador de bibliotecas del IDE de Arduino. Por lo tanto, debe seguir los pasos a continuación para instalar la biblioteca:

Haga clic aquí para descargar la biblioteca ESPAsyncWebServer. Deberías tener una carpeta .zip en tu carpeta de Descargas.
Extraiga la carpeta .zip y debería obtener la carpeta ESPAsyncWebServer-master.
Cambie el nombre de su carpeta de ~~Maestro ESPAsyncWebServer~~ a ESPAsyncWebServer
Mueva la carpeta ESPAsyncWebServer a la carpeta de bibliotecas de instalación de Arduino IDE.

Alternativamente puedes Bosquejo > incluir biblioteca > biblioteca .zip y seleccione la biblioteca que descargó anteriormente.

Instalación de ESPAsyncTCP

La biblioteca ESPAsyncWebServer también requiere la Biblioteca ESPAsyncTCP para funcionar correctamente. Siga los siguientes pasos para instalar la biblioteca ESPAsyncTCP:

Haga clic aquí para descargar la biblioteca ESPAsyncTCP. Deberías tener una carpeta .zip en tu carpeta de Descargas.
Extraiga la carpeta .zip y debería obtener la carpeta ESPAsyncTCP-master.
Cambie el nombre de su carpeta de ~~Maestro ESPAsyncTCP~~ a ESPAsyncTCP
Mueva la carpeta ESPAsyncTCP a la carpeta de bibliotecas de instalación de Arduino IDE.
Finalmente, vuelva a abrir su IDE de Arduino

Alternativamente puedes Bosquejo > incluir biblioteca > biblioteca .zip y seleccione la biblioteca que descargó anteriormente.

Instalación de bibliotecas BME280

En este tutorial mostraremos lecturas de un sensor BME280 (instrucción usando ESP8266). Necesita instalar las siguientes bibliotecas:

Puede instalar estas bibliotecas a través del Administrador de bibliotecas IDE de Arduino. Ir a Bosquejo > Incluir bibliotecas > Administrar bibliotecas. Luego busque el nombre de las bibliotecas para instalarlas.

Piezas requeridas

Para continuar con este proyecto necesitarás las siguientes piezas:

ESP8266 (leer Las mejores placas de desarrollo ESP8266)
Módulo de sensores BME280 (Instrucciones para BME280)
LED de 5 mm
Resistencia de 330 ohmios
tablero de circuitos
Cables de puente

Puedes utilizar los enlaces anteriores o ir directamente MakerAdvisor.com/tools ¡Para encontrar todas las piezas para tus proyectos al mejor precio!

Representación esquemática

Conecte todos los componentes siguiendo el siguiente diagrama esquemático.

BME280	ESP8266
vino	3,3 V
Dimensiones	Dimensiones
SCL	GPIO5
ASD	GPIO4

Organiza tus archivos

Para crear el servidor web necesitarás tres archivos diferentes. El boceto de Arduino, el archivo HTML y el archivo CSS. Los archivos HTML y CSS deben estar en una carpeta llamada Datos en la carpeta de bocetos de Arduino como se muestra a continuación:

Creando el archivo HTML

Crea uno Pagina principal Archivo con el siguiente contenido o Descargue todos los archivos del proyecto aquí:

<!DOCTYPE html>
<!-- 
  Rui Santos
  Complete project details at https://RandomNerdTutorials.com  
-->
<html>
<head>
  <title>ESP8266 Web Server</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="data:,">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>ESP8266 Web Server</h1>
  <p>GPIO state<strong> %STATE%</strong></p>
  <p>
    <a href="/on"><button class="button">ON</button></a>
    <a href="/off"><button class="button button2">OFF</button></a>
  </p>
  <p>
    <span class="sensor-labels">Temperature</span>
    <span id="temperature">%TEMPERATURE%</span>
    <sup class="units">&deg;C</sup>
  </p>
  <p>
    <span class="sensor-labels">Humidity</span>
    <span id="humidity">%HUMIDITY%</span>
    <sup class="units">&#37;</sup>
  </p>
  <p>
    <span class="sensor-labels">Pressure</span>
    <span id="pressure">%PRESSURE%</span>
    <sup class="units">hPa</sup>
  </p>
</body>
<script>
  setInterval(function ( ) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("temperature").innerHTML = this.responseText;
      }
    };
    xhttp.open("GET", "/temperature", true);
    xhttp.send();
  }, 10000 ) ;

  setInterval(function ( ) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("humidity").innerHTML = this.responseText;
      }
    };
    xhttp.open("GET", "/humidity", true);
    xhttp.send();
  }, 10000 ) ;

  setInterval(function ( ) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("pressure").innerHTML = this.responseText;
      }
    };
    xhttp.open("GET", "/pressure", true);
    xhttp.send();
  }, 10000 ) ;
</script>
</html>

Ver código sin formato

Dado que usamos CSS y HTML en archivos diferentes, debemos hacer referencia al archivo CSS en el texto HTML.

<link rel="stylesheet" type="text/css" href="https://randomnerdtutorials.com/esp8266-web-server-spiffs-nodemcu/style.css">

El La etiqueta le indica al archivo HTML que está utilizando una hoja de estilo externa para formatear la apariencia de la página. El relativo El atributo especifica el tipo de archivo externo. En este caso, se trata de una hoja de estilo (el archivo CSS) que se utiliza para cambiar la apariencia de la página.

El Tipo El atributo está establecido en “texto/css” para indicar que está utilizando un archivo CSS para los estilos. El href El atributo indica la ubicación del archivo. Dado que los archivos CSS y HTML están en la misma carpeta, solo necesita hacer referencia al nombre del archivo: estilo.css.

En la siguiente línea escribimos el primer encabezado de nuestra web. En este caso es “Servidor Web ESP8266”. Puedes cambiar el encabezado a cualquier texto:

<h1>ESP8266 Web Server</h1>

Luego agregue un párrafo con el texto “Estado de GPIO:” seguido del estado de GPIO. Dado que el estado de GPIO cambia según el estado del GPIO, podemos agregar un marcador de posición que luego será reemplazado con el valor que configuramos en el boceto de Arduino.

Para agregar comodines, use % Firmar. Para crear un marcador de posición para el estado, puede utilizar %CONDICIÓN%Por ejemplo.

<p>GPIO state<strong> %STATE%</strong></p>

Usted asigna un valor al marcador de posición ESTADO en el boceto de Arduino.

Luego cree un botón de ENCENDIDO y uno de APAGADO. Al hacer clic en el botón ON, la página web será redirigida a la raíz, seguida de /En URL. Si hace clic en el botón «Desactivar», será redirigido al /fuera de URL:

<a href="https://randomnerdtutorials.com/on"><button class="button">ON</button></a>
<a href="https://randomnerdtutorials.com/off"><button class="button button2">OFF</button></a>

Finalmente, cree tres párrafos para mostrar la temperatura, la humedad y la presión.

<p>
  <span class="sensor-labels">Temperature</span>
  <span id="temperature">%TEMPERATURE%</span>
  <sup class="units">°C</sup>
</p>
<p>
  <span class="sensor-labels">Pressure</span>
  <span id="pressure">%PRESSURE%</span>
  <sup class="units">hPa</sup>
</p>
<p>
  <span class="sensor-labels">Humidity</span>
  <span id="humidity">%HUMIDITY%</span>
  <sup class="units">%</sup>
</p>

Usamos eso %TEMPERATURA%, %HUMEDAD% Y %PRESIÓN% Marcador de posición. Luego, estos se reemplazan en el boceto de Arduino con los valores de temperatura reales.

Actualizaciones automáticas

También añadimos un poco de JavaScript a nuestro archivo HTML, que se encarga de actualizar los valores de temperatura sin necesidad de refrescar la página web.

El siguiente fragmento de código es responsable de la temperatura.

setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("temperature").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/temperature", true);
  xhttp.send();
}, 10000 ) ;

Para actualizar la temperatura tenemos un establecerintervalo() Función que se ejecuta cada 10 segundos.

Básicamente hace una petición en el /Temperatura URL para obtener los últimos valores de temperatura.

  xhttp.open("GET", "/temperature", true);
  xhttp.send();
}, 10000 ) ;

Cuando se recibe este valor, actualiza el elemento HTML con temperatura IDENTIFICACIÓN.

if (this.readyState == 4 && this.status == 200) {
  document.getElementById("temperature").innerHTML = this.responseText;
}

En resumen, esta sección anterior se encarga de actualizar la temperatura de forma asincrónica. Se repite el mismo proceso para los valores de humedad y presión.

Creando el archivo CSS

Crea el estilo.css Archivo con el siguiente contenido o Descargue todos los archivos del proyecto aquí:

/***
   Rui Santos
   Complete project details at https://RandomNerdTutorials.com
***/

html {
  font-family: Arial;
  display: inline-block;
  margin: 0px auto;
  text-align: center;
}
h1 {
  color: #0F3376;
  padding: 2vh;
}
p {
  font-size: 1.5rem;
}
.button {
  display: inline-block;
  background-color: #008CBA;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 16px 40px;
  text-decoration: none;
  font-size: 30px;
  margin: 2px;
  cursor: pointer;
}
.button2 {
  background-color: #f44336;
}
.units {
  font-size: 1.2rem;
 }
.sensor-labels {
  font-size: 1.5rem;
  vertical-align:middle;
  padding-bottom: 15px;
}

Ver código sin formato

Este es solo un archivo CSS simple para configurar el tamaño de fuente, el estilo y el color de los botones y alinear la página. No explicaremos cómo funciona CSS. Una buena fuente para aprender más sobre CSS es el Sitio web de W3Schools.

Bosquejo del servidor web asíncrono ESP8266

Copie el siguiente código en el IDE de Arduino o Descargue todos los archivos del proyecto aquí. Luego deberá ingresar sus credenciales de red (SSID y contraseña) para conectar el ESP8266 a su red local.

/*
  Rui Santos
  Complete project details at https://RandomNerdTutorials.com
  
  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files.
  
  The above copyright notice and this permission notice shall be included in all
  copies or substantial portions of the Software.
*/

// Import required libraries
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <FS.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>

Adafruit_BME280 bme; // I2C
//Adafruit_BME280 bme(BME_CS); // hardware SPI
//Adafruit_BME280 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK); // software SPI

// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

// Set LED GPIO
const int ledPin = 2;
// Stores LED state
String ledState;

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

String getTemperature() {
  float temperature = bme.readTemperature();
  // Read temperature as Fahrenheit (isFahrenheit = true)
  //float temperature = 1.8 * bme.readTemperature() + 32;
  Serial.println(temperature);
  return String(temperature);
}
  
String getHumidity() {
  float humidity = bme.readHumidity();
  Serial.println(humidity);
  return String(humidity);
}

String getPressure() {
  float pressure = bme.readPressure()/ 100.0F;
  Serial.println(pressure);
  return String(pressure);
}

// Replaces placeholder with LED state value
String processor(const String& var){
  Serial.println(var);
  if(var == "STATE"){
    if(digitalRead(ledPin)){
      ledState = "ON";
    }
    else{
      ledState = "OFF";
    }
    Serial.print(ledState);
    return ledState;
  }
  else if (var == "TEMPERATURE"){
    return getTemperature();
  }
  else if (var == "HUMIDITY"){
    return getHumidity();
  }
  else if (var == "PRESSURE"){
    return getPressure();
  }
  return String();
}
 
void setup(){
  // Serial port for debugging purposes
  Serial.begin(115200);
  pinMode(ledPin, OUTPUT);

  // Initialize the sensor
  if (!bme.begin(0x76)) {
    Serial.println("Could not find a valid BME280 sensor, check wiring!");
    while (1);
  }

  // Initialize SPIFFS
  if(!SPIFFS.begin()){
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }

  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }

  // Print ESP32 Local IP Address
  Serial.println(WiFi.localIP());

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/index.html", String(), false, processor);
  });
  
  // Route to load style.css file
  server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/style.css", "text/css");
  });

  // Route to set GPIO to HIGH
  server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request){
    digitalWrite(ledPin, HIGH);    
    request->send(SPIFFS, "/index.html", String(), false, processor);
  });
  
  // Route to set GPIO to LOW
  server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request){
    digitalWrite(ledPin, LOW);    
    request->send(SPIFFS, "/index.html", String(), false, processor);
  });

  server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", getTemperature().c_str());
  });
  
  server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", getHumidity().c_str());
  });
  
  server.on("/pressure", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", getPressure().c_str());
  });

  // Start server
  server.begin();
}
 
void loop(){
  
}

Ver código sin formato

Así es como funciona el código

Continúe leyendo para saber cómo funciona el código o pase a la siguiente sección.

Primero incluya las bibliotecas requeridas:

#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <FS.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>

Debes ingresar tus credenciales de red en las siguientes variables:

const char* ssid = "REPLACE_WITH_YOUR_SSID"; 
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

Cree una instancia que apunte al sensor BME280 por nombre bme:

Adafruit_BME280 bme; // I2C

A continuación, cree una variable relacionada con GPIO 2, llamada bolígrafo LEDy una variable de cadena para almacenar el estado del LED: Estado del LED.

const int ledPin = 2;
String ledState;

Crea uno Servidor Web Asyn Objeto nombrado servidor que escucha en el puerto 80.

AsyncWebServer server(80);

Recuperar valores del sensor

Creamos tres funciones para devolver los valores del sensor como cadenas: la obtener temperatura(), obtener Humedad() Y obtenerPresión() Características.

Asi es como funciona obtener temperatura() La función se ve (las otras funciones son similares).

String getTemperature() {
  float temperature = bme.readTemperature();
  // Read temperature as Fahrenheit (isFahrenheit = true)
  //float temperature = 1.8 * bme.readTemperature() + 32;
  Serial.println(temperature);
  return String(temperature);
}

Si desea mostrar la temperatura en grados Fahrenheit, solo necesita seleccionar la línea apropiada en el obtener temperatura() Función:

float temperature = 1.8 * bme.readTemperature() + 32;

Para obtener más información sobre cómo conectar el sensor BME280 al ESP8266, puedes leer el siguiente tutorial:

ESP8266 con BME280 usando Arduino IDE (Presión, Temperatura, Humedad)

Procesador()

El Procesador() La función asigna un valor a los marcadores de posición que creamos en el archivo HTML. Acepta el marcador de posición como argumento y debería devolver una cadena que reemplace el marcador de posición. El Procesador() La función debe tener la siguiente estructura:

String processor(const String& var){
  Serial.println(var);
  if(var == "STATE"){
    if(digitalRead(ledPin)){
      ledState = "ON";
    }
    else{
      ledState = "OFF";
    }
    Serial.print(ledState);
    return ledState;
  }
  else if (var == "TEMPERATURE"){
    return getTemperature();
  }
  else if (var == "HUMIDITY"){
    return getHumidity();
  }
  else if (var == "PRESSURE"){
    return getPressure();
  }
}

Esta función primero verifica si el marcador de posición es el CONDICIÓN Hemos creado el archivo HTML.

if(var == "STATE"){

Si este es el caso, configuramos según el estado del LED. Estado del LED Variable ON u OFF.

if(digitalRead(ledPin)){
  ledState = "ON";
}
else{
  ledState = "OFF";
}

Finalmente le damos Estado del LED Esto reemplaza eso CONDICIÓN Marcador de posición con el Estado del LED Valor de cadena.

return ledState;

Si encuentra el %TEMPERATURA% Comodín, devolvemos la temperatura usando el obtener temperatura() función creada previamente.

else if (var == "TEMPERATURE"){
  return getTemperature();
}

Lo mismo se aplica a la %HUMEDAD% Y %PRESIÓN% Marcador de posición llamando a las funciones correspondientes:

else if (var == "TEMPERATURE"){
  return getTemperature();
}
else if (var == "HUMIDITY"){
  return getHumidity();
}
else if (var == "PRESSURE"){
  return getPressure();
}

configuración()

En el configuración()Primero inicialice el monitor serie y configure el GPIO como salida.

Serial.begin(115200);
pinMode(ledPin, OUTPUT);

Inicialice el sensor BME280:

if (!bme.begin(0x76)) {
  Serial.println("Could not find a valid BME280 sensor, check wiring!");
  while (1);
}

Inicializar SPIFFS:

if(!SPIFFS.begin()){
  Serial.println("An Error has occurred while mounting SPIFFS");
  return;
}

Conexión wifi

Conéctese a WiFi e imprima la dirección ESP8266:

WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.println("Connecting to WiFi..");
}
Serial.println(WiFi.localIP());

Servidor web asíncrono

La biblioteca ESPAsyncWebServer nos permite configurar las rutas en las que el servidor escucha las solicitudes HTTP entrantes y ejecuta funciones cuando llega una solicitud por esa ruta. Para hacer esto, use el En método en el servidor Objeto como este:

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send(SPIFFS, "/index.html", String(), false, processor);
});

Cuando el servidor recibe una solicitud al directorio raíz «/”URL, será la Pagina principalarchivo al cliente. El argumento final enviar() La función es el procesador, por lo que podemos reemplazar el marcador de posición con el valor deseado; en este caso, el Estado del LED.

Como hemos hecho referencia al archivo CSS en el archivo HTML, el cliente solicita el archivo CSS. En este caso el archivo CSS se envía al cliente:

server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send(SPIFFS, "/style.css","text/css");
});

También es necesario definir qué hay en el /En Y /fuera de Rutas. Cuando se realiza una solicitud en estas rutas, el LED se encenderá o apagará y el ESP32 entregará el archivo HTML.

server.on("https://randomnerdtutorials.com/on", HTTP_GET, [](AsyncWebServerRequest *request){
  digitalWrite(ledPin, HIGH);
  request->send(SPIFFS, "/index.html", String(),false, processor);
});
server.on("https://randomnerdtutorials.com/off", HTTP_GET, [](AsyncWebServerRequest *request){
  digitalWrite(ledPin, LOW);
  request->send(SPIFFS, "/index.html", String(),false, processor);
});

En el archivo HTML hemos escrito un código JavaScript que muestra la temperatura, humedad y presión en el /Temperatura, /Humedad, /Presión Rutas cada 10 segundos. Por lo tanto, también debemos manejar lo que sucede cuando recibimos una solicitud en estas rutas.

Todo lo que tenemos que hacer es enviar los valores actualizados del sensor. Los valores actualizados del sensor son devueltos por obtener temperatura(), obtener Humedad() Y obtenerPresión() Funciones que creamos anteriormente.

Las medidas son texto plano y deben enviarse como caracteres. Por eso usamos eso cadena_c() Método.

server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/plain", getTemperature().c_str());
});
  
server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/plain", getHumidity().c_str());
});
  
server.on("/pressure", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/plain", getPressure().c_str());
});

Terminamos usando eso comenzar() método en el servidor Objeto para que el servidor escuche a los clientes entrantes.

server.begin();

Dado que es un servidor web asincrónico, puede manejar todas las solicitudes en el configuración(). Luego puede agregar otro código. Cinta() mientras el servidor espera clientes entrantes.

Subir código y archivos

Guarde el boceto de Arduino como ESP8266_SPIFFS_Servidor_web o Descargue todos los archivos del proyecto aquí.

Ir a Bosquejo > Mostrar carpeta de bocetosy crea una carpeta llamada Datos. Guarde los archivos HTML y CSS en esta carpeta;
En Herramientas > tablónseleccione la placa ESP8266 que utiliza;
Entonces ve a eso Herramientas > Tamaño del destello y elige 4 millones (1 millón de SPIFFS).

Finalmente, sube los archivos a tu tablero. Ir a Herramientas > ESP8266 Cargar boceto de datos y espere a que se carguen los archivos.

Luego presione el botón de carga del IDE de Arduino para cargar el código al ESP8266.

Cuando todo se haya cargado correctamente, abra el monitor serie con una velocidad de baudios de 115200. Presione el botón RST incorporado del ESP8266. Luego se debe imprimir la dirección IP del ESP8266.

demostración

Abra un navegador e ingrese su dirección IP ESP8266. Debería cargarse la siguiente página web.

Presione los botones ON y OFF para controlar el LED incorporado del ESP8266. También puede visualizar los últimos valores de los sensores. Los valores de los sensores se actualizan automáticamente sin tener que actualizar el sitio web.

Envolver

El uso del sistema de archivos Flash SPI ESP8266 (SPIFFS) es particularmente útil para almacenar archivos HTML y CSS y entregárselos a un cliente, en lugar de tener que escribir todo el código en el boceto de Arduino.

Tenemos otros proyectos relacionados que te pueden gustar:

Servidor web ESP32 con SPIFFS
Servidor web de temperatura y humedad ESP8266 DHT
Hackear un sensor de movimiento PIR con un ESP8266
Botón Wi-Fi ESP8266: clonación casera del botón Amazon Dash

Obtenga más información sobre el ESP8266:

Domótica con ESP8266
Programación MicroPython con ESP32 y ESP8266
Proyectos y tutoriales gratuitos de ESP8266

Gracias por leer.

Error 403 The request cannot be completed because you have exceeded your quota. : quotaExceeded

Servidor web ESP8266 con SPIFFS (SPI Flash File System) – NodeMCU

Este tutorial te muestra cómo construir un servidor web que sirve archivos HTML y CSS almacenados en el sistema de archivos SPIFFS del ESP8266 NodeMCU utilizando Arduino IDE. En lugar de tener que escribir el texto HTML y CSS en el sketch de Arduino, crearemos archivos HTML y CSS por separado.

El servidor web que vamos a construir muestra cómo controlar las salidas del ESP8266 y cómo mostrar lecturas de sensores. Como ejemplo, controlaremos un LED y mostraremos las lecturas de un sensor BME280.

Puedes utilizar los conceptos aprendidos en este tutorial para controlar cualquier salida o mostrar lecturas de sensores de otros sensores.

Visión general del proyecto

Antes de pasar directamente al proyecto, es importante delinear lo que hará nuestro servidor web, para que sea más fácil de entender.

El servidor web controla un LED conectado al GPIO 2 del ESP8266. Este es el LED incorporado del ESP8266. Puedes controlar cualquier otro GPIO.
La página del servidor web muestra dos botones: ENCENDER y APAGAR – para encender y apagar el GPIO 2.
La página del servidor web también muestra el estado actual del GPIO.
También utilizarás un sensor BME280 para mostrar las lecturas del sensor (temperatura, humedad y presión).

Prerrequisitos

Antes de proceder con este proyecto, asegúrate de verificar todos los siguientes requisitos.

Instalar el módulo ESP8266 en Arduino IDE.

Sigue el siguiente tutorial para instalarlo: Install ESP8266 Board in Arduino IDE (Windows, Mac OS X, Linux).

Plugin del Sistema de Archivos para cargar archivos

Para cargar archivos en el Sistema de Archivos SPIFFS del ESP8266, utilizaremos el Plugin del Sistema de Archivos. Instala el plugin en tu Arduino IDE.

Sigue este tutorial para instalarlo: Install ESP8266 Filesystem Uploader in Arduino IDE.

Instalar Bibliotecas

Una de las formas más sencillas de construir un servidor web usando archivos del sistema de archivos es utilizando la biblioteca ESPAsyncWebServer.

Sigue este tutorial para instalar la biblioteca: Installing the ESPAsyncWebServer library.

Adicionalmente, necesitas instalar las siguientes bibliotecas para el sensor BME280:

Adafruit_BME280_Library
Adafruit_Sensor

Puedes instalar estas bibliotecas a través del Administrador de Bibliotecas de Arduino IDE.

Partes Necesarias

Para proceder con este proyecto, necesitas las siguientes partes:

ESP8266.
Módulo de sensor BME280.
LED de 5 mm.
Resistencia de 330 Ohmios.
Protoboard.
Cables jumper.

Puedes encontrar todas las partes necesarias para tus proyectos en MakerAdvisor.com/tools a los mejores precios.

Diagrama Esquemático

Conecta todos los componentes siguiendo el siguiente diagrama esquemático:

BME280 – ESP8266

Vin – 3.3V
GND – GND
SCL – GPIO 5
SDA – GPIO 4

Organización de tus Archivos

Para construir el servidor web necesitas tres archivos diferentes: el sketch de Arduino, el archivo HTML y el archivo CSS. El archivo HTML y CSS deben guardarse dentro de una carpeta llamada "data" dentro de la carpeta del sketch de Arduino.

Creación del Archivo HTML

Crea un archivo index.html con el siguiente contenido:

<!DOCTYPE html>
<html>
<head>
  <title>ESP8266 Web Server</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="data:">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>ESP8266 Web Server</h1>
  <p>Estado del GPIO: <strong>%STATE%</strong></p>
  <p>
    <a href="/on"><button class="button">ON</button></a>
    <a href="/off"><button class="button button2">OFF</button></a>
  </p>
  <p>
    <span class="sensor-labels">Temperatura</span>
    <span id="temperature">%TEMPERATURE%</span>
    <sup class="units">°C</sup>
  </p>
  <p>
    <span class="sensor-labels">Humedad</span>
    <span id="humidity">%HUMEDAD%</span>
    <sup class="units">%</sup>
  </p>
  <p>
    <span class="sensor-labels">Presión</span>
    <span id="pressure">%PRESIÓN%</span>
    <sup class="units">hPa</sup>
  </p>
</body>
<script>
  // Script de JavaScript
</script>
</html>

Este es un ejemplo de archivo HTML que muestra el estado del GPIO, botones para encender y apagar el LED, y las lecturas del sensor. Reemplaza los placeholders con los valores correspondientes en el sketch de Arduino.

Creación del Archivo CSS

Crea un archivo style.css con el siguiente contenido:

html {
  font-family: Arial;
  display: inline-block;
  margin: 0px auto;
  text-align: center;
}
h1 {
  color: #0F3376;
  padding: 2vh;
}
p {
  font-size: 1.5rem;
}
.button {
  display: inline-block;
  background-color: #008CBA;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 16px 40px;
  text-decoration: none;
  font-size: 30px;
  margin: 2px;
  cursor: pointer;
}
.button2 {
  background-color: #f44336;
}
.units {
  font-size: 1.2rem;
}
.sensor-labels {
  font-size: 1.5rem;
  vertical-align: middle;
  padding-bottom: 15px;
}

Este es un ejemplo de archivo CSS que sirve para dar estilo a la página web. Modifica el estilo según tus preferencias.

Sketch del Servidor Web Asíncrono ESP8266

Copia el siguiente código al Arduino IDE:

«`C++
// Código del sketch del servidor web



Este código incluye la configuración del ESP8266, la conexión Wi-Fi, el procesamiento de solicitudes y respuestas del servidor web, entre otros. Asegúrate de adaptar el código con tus credenciales de red y configuraciones específicas.

<h3>Subir Código y Archivos</h3>

Guarda el sketch de Arduino y los archivos HTML y CSS en la carpeta del proyecto.

Selecciona la tarjeta ESP8266 y el tamaño de memoria adecuado en las opciones del Arduino IDE.

Sube los archivos a tu ESP8266 usando la opción "ESP8266 Data Sketch Upload" en el menú de herramientas.

Una vez subidos los archivos y el código, abre el Monitor Serie a una velocidad de 115200 baudios para ver la dirección IP asignada al ESP8266.

<h3>Demostración</h3>

Abre un navegador web e ingresa la dirección IP del ESP8266. Podrás ver la página web con los botones para controlar el LED, así como las lecturas del sensor.

<p>¡Gracias por leer!</p>

Este artículo ha sido inspirado en varios tutoriales y guías sobre cómo construir un servidor web con ESP8266 y SPIFFS. Puedes encontrar más información detallada en los siguientes enlaces:

- [Tutoriales de RandomNerdTutorials](url)
- [Tutorial de Interfaz ESP8266 con BME280 utilizando Arduino IDE](url)

5 comentarios en «Servidor web ESP8266 con SPIFFS (SPI Flash File System) – NodeMCU»

gestecktlk

19 de julio de 2022 a las 02:18

¡Interesante artículo! Gracias por compartir esta información sobre el servidor web ESP8266 con SPIFFS. ¡Definitivamente voy a probarlo en mi NodeMCU! 🤓👍
Accede para responder
oborenogaf

27 de julio de 2022 a las 11:45

¡Este artículo me ha ayudado mucho a comprender mejor cómo funciona el SPIFFS en mi NodeMCU! Gracias por la explicación clara y detallada, ahora me siento más seguro de implementarlo en mi proyecto. ¡A darle caña! 👨‍💻🚀
Accede para responder
dondersfa

6 de enero de 2023 a las 00:40

¡Qué bueno que encontré este artículo! Me da una buena guía para configurar mi servidor web en mi NodeMCU. Gracias por la información detallada. ¡Vamos a ponerlo en práctica! 💻👌🏼
Accede para responder
anananapb

11 de septiembre de 2023 a las 23:45

Este tutorial sobre el servidor web ESP8266 con SPIFFS en NodeMCU es justo lo que necesitaba para entender mejor cómo funciona. ¡A darle caña a este proyecto! 🚀👨‍💻
Accede para responder
iskusnogak

6 de octubre de 2023 a las 06:51

¡Qué interesante y útil esta guía para configurar el servidor web en mi NodeMCU con SPIFFS! Definitivamente voy a poner en práctica todo lo aprendido. ¡Gracias por compartir este contenido tan informativo! 💡🌐🔌
Accede para responder

Deja un comentario Cancelar la respuesta

Lo siento, debes estar conectado para publicar un comentario.

Descripción del proyecto

requisitos

1. Instale la placa ESP8266 en el IDE de Arduino

2. Complemento de carga del sistema de archivos

3. Instalación de bibliotecas

Instalación de la biblioteca ESPAsyncWebServer

Instalación de ESPAsyncTCP

Instalación de bibliotecas BME280

Piezas requeridas

Representación esquemática

Organiza tus archivos

Creando el archivo HTML

Actualizaciones automáticas

Creando el archivo CSS

Bosquejo del servidor web asíncrono ESP8266

Así es como funciona el código

Recuperar valores del sensor

Procesador()

configuración()

Subir código y archivos

demostración

Envolver

Servidor web ESP8266 con SPIFFS (SPI Flash File System) – NodeMCU

Visión general del proyecto

Prerrequisitos

Partes Necesarias

Diagrama Esquemático

Organización de tus Archivos

Creación del Archivo HTML

Creación del Archivo CSS

Sketch del Servidor Web Asíncrono ESP8266

Related Posts:

5 comentarios en «Servidor web ESP8266 con SPIFFS (SPI Flash File System) – NodeMCU»

Deja un comentario Cancelar la respuesta