Control de la pantalla LED de 7 segmentos mediante el servidor web ESP8266: 8 pasos (con imágenes)

2025 Autor: John Day | [email protected]. Última modificación: 2025-01-23 14:39

Mi proyecto tiene un Nodemcu ESP8266 que controla una pantalla de 7 segmentos a través del servidor http usando el formulario html.

Paso 1: ACERCA DE ESTE PROYECTO

Es un proyecto IOT desarrollado utilizando el módulo wifi ESP8266 (NodeMCU). El motivo del proyecto es crear un servidor web en el módulo que pueda albergar múltiples clientes a través de la red. Aquí, se necesitan conocimientos básicos de html y javaScript para comprender mi proyecto. Algunos temas avanzados que discutiré aquí con respecto a ESP8266 y javaScript son:

1. Cargar archivos en el SPIFFS del ESP8266 para usar esos archivos de manera más eficiente en nuestro código arduino.

2. Almacenamiento web con javaScript

SPIFFS

Hasta ahora, siempre hemos incluido el HTML para nuestras páginas web como cadenas literales en nuestro boceto. Esto hace que nuestro código sea muy difícil de leer y se quedará sin memoria con bastante rapidez.

SPIFFS un sistema de archivos liviano para microcontroladores con un chip flash SPI. El chip flash integrado del ESP8266 tiene mucho espacio para sus páginas web, especialmente si tiene la versión de 1 MB, 2 MB o 4 MB. Puede comprender cómo agregar herramientas en su software arduino para cargar archivos a SPIFFS mediante el siguiente enlace:

En este proyecto, tengo 2 archivos html y un archivo javascript. Todos estos archivos se cargan en SPIFFS separados del boceto para que el cambio en estos archivos sea independiente del boceto principal.

PrepareFile () recupera ambos archivos html como se muestra a continuación:

void prepareFile () {

bool ok = SPIFFS.begin (); if (ok) {Archivo f = SPIFFS.open ("/ index.html", "r"); Archivo f1 = SPIFFS.open ("/ index1.html", "r"); datos = f.readString (); datos1 = f1.readString (); f.close (); f1.close (); } else Serial.println ("No se encontró tal archivo."); }

mientras que el archivo javascript se lee usando loadScript () como se muestra a continuación:

void loadScript (ruta de cadena, tipo de cadena) {

if (SPIFFS.exists (ruta)) {Archivo archivo = SPIFFS.open (ruta, "r"); server.streamFile (archivo, tipo); }}

ALMACENAMIENTO LOCAL PARA APLICACIONES WEB

Puede comprender cómo usar diferentes objetos y métodos de almacenamiento local en HTML5 usando javascript en el siguiente artículo: https://diveintohtml5.info/storage.html. Hablaré del uso del almacenamiento local en mi proyecto en la sección de trabajo.

Paso 2: Hardware requerido

Módulo Wifi NodeMCU ESP8266 12E

Protoboard sin soldadura

Cable pasa corriente

Pantalla de 7 segundos (cátodo común)

Resistencia de 1K ohmios

Cable micro-USB (para conectar NodeMCU con su computadora)

Paso 3: circuito y conexiones

Las conexiones son realmente sencillas. En el diagrama de circuito anterior, los pines de nodemcu están conectados de la siguiente manera:

A D1

B D2

C D3

D D4

E D6

F D7

G D8

donde A, B, C, D, E y F son los segmentos de la pantalla de 7 segmentos

. Ignore el DP de la pantalla de 7 segmentos. No lo conecte con el pin D5 de ESP

Paso 4: TRABAJANDO

Como se discutió anteriormente, tenemos dos archivos html. Uno de los cuales es la página html raíz llamada cuando el servidor ESP8266 recibió "/", es decir, si se solicita el URI '/', el servidor debe responder con un código de estado HTTP de 200 (Ok) y luego enviar una respuesta con el "índice". html "archivo.

El segundo archivo html se enviará cuando el cliente lo solicite desde la página raíz al enviar una entrada en el formulario. Tan pronto como, el servidor obtiene la entrada PUBLICADA del formulario, la compara con el valor de cadena fija y envía la segunda página html en respuesta.

if (server.arg ("nam") == "0") {server.send (200, "text / html", data1); sevenSeg (0); }

Dado que el html para la segunda página no está definido en el boceto, aquí estamos haciendo referencia a "data1" que ya ha leído los códigos html usando SPIFFS.readString ()

Archivo f1 = SPIFFS.open ("/ index1.html", "r"); data1 = f1.readString ();

Aquí, sevenSeg () también se llama con un argumento "0" para que pueda usarse para mostrar "0" activando y desactivando diferentes segmentos. Aquí, hice que el nombre de la función se explicara por sí mismo, es decir, onA () encenderá el segmento A de la pantalla de 7 seg en la placa de pruebas, de manera similar, offA lo apagará.

Entonces, en este caso para mostrar "0", tenemos que cambiar todos los segmentos excepto G (se ignora DP ya que no está conectado a ningún pin de ESP8266). Entonces mi función se ve así:

if (num == 0) {onA (); onB (); onC (); onD (); uno(); onF (); offG (); }

Paso 5: CÓDIGO HTML Y JAVASCRIPT

El index.html tiene un lienzo que tiene una pantalla de 7 segmentos en modo apagado y forma debajo de él. Esto es lo que ves después de abrirlo:

Si queremos utilizar nuestra página web sin ESP8266, será posible cambiando el enlace en el atributo action de su formulario. Actualmente este es el enlace en acción:

Aquí puede ver que el enlace en acción es la misma dirección IP asignada a su nodeMCU después de conectarse a cualquier wifi (o punto de acceso). La etiqueta de formulario después del ajuste se ve así:

Aquí, estoy usando el trazo web del navegador para almacenar el valor de entrada del usuario de modo que el valor ingresado en index.html se almacene en el navegador localmente (como una cookie). Ese valor es obtenido por index1.html y el número se muestra en la pantalla de 7 segmentos en el lienzo html. Puede comprender este procedimiento mediante el siguiente video:

video_attach

Paso 6: NOTAS CLAVE

Este proyecto funcionará con su nodemcu si se ocupa de los siguientes puntos:

1. El enlace en el atributo de acción del archivo html raíz debe ser "https:// (IP en el monitor serial o IP asignada a su ESP) / submit".

2. Utilice la última versión del navegador que admita html5 y nuevas etiquetas y funciones.

3. SPIFFS funcionará solo si su index.html, index1.html y main.js están juntos en la carpeta de datos. Puedes clonar el archivo de código de mi github

Paso 7: CÓDIGO

Este es el enlace al repositorio del código de mi proyecto. Si está trabajando con SPIFFS en ESP8266, puede comprender por qué coloqué los archivos html y javascript en la carpeta de datos.

Vínculo del repositorio de GitHub

Paso 8: Tutorial en video

Si te ayuda, suscríbete