Saltar al contenido

Control remoto con NodeMCU y Web UI

julio 11, 2021
FCB6RYQJACTQ0RC

Recientemente hice una serie de videos sobre el control de un LED en una placa de desarrollo NodeMCU (esp8266) desde una interfaz de usuario basada en web en un servidor remoto. El LED se usa como ejemplo, pero realmente puede controlar cualquier cosa que esté conectada a la placa de desarrollo. El objetivo de este instructivo es brindarle un proyecto básico que pueda ampliar.

Desglosaré las partes aquí en este instructivo. Sin embargo, el recorrido completo está en los videos.

El código completo para esta serie de videos e instrucciones se puede encontrar en nuestra página de Github:
https: //github.com/thedigicraft/livestreams/tree/m …

Más videos y capacitación en nuestro sitio web:

https://thedigitalcraft.com/

Paso 1: Configure el IDE de Arduino para NodeMCU

Configure el IDE de Arduino para NodeMCUConfigure el IDE de Arduino para NodeMCU

Primero deberá realizar una pequeña configuración con el IDE de Arduino para que funcione con el NodeMCU / ESP8266.

Instale la biblioteca:

  • Inicie el IDE de Arduino
  • Abrir preferencias
  • Agregue http://arduino.esp8266.com/stable/package_esp8266com_index.json al campo URL del administrador de tablero adicional.
  • Abra el Administrador de tableros desde Herramientas -> Menú de tablero, busque e instale la biblioteca esp8862

Paso 2: componentes

Componentes

Materiales necesitados

Los materiales necesarios para este proyecto son mínimos. Puede utilizar los enlaces a continuación para ver lo que necesita. Si compra desde allí, le devolveremos un poco de dinero extra. Sin embargo, siéntase libre de encontrar estos productos en cualquier lugar donde encuentre una buena oferta.

  1. NodeMCU
  2. Protoboard y cables de puente
  3. Luz LED
  4. Cable micro USB

Paso 3: Cableado

Cableado

El cableado de este proyecto es muy sencillo.

  • Coloque el NodeMCU en la placa de pruebas de modo que el lado del USB quede hacia afuera.
  • Coloque el LED en algún lugar a un lado del NodeMCU. Asegúrese de que los pines LED estén en su propia columna (uno al lado del otro), no en la misma columna. Por ejemplo, en el diagrama: el pin LED largo está en la columna 23 y el pin LED corto está en 22.
  • Ejecute 1 cable de puente desde la misma columna del pin largo del LED (23 en el diagrama) hasta el pin GPIO2 de la placa NodeMCU. En el tablero, en realidad está etiquetado como D4.
  • Ejecute 1 cable de puente desde la misma columna del pin de LED corto (22 en el diagrama) hasta el pin de tierra del NodeMCU. En el tablero se puede marcar como GND
  • Por último, conecte su cable micro USB al NodeMCU y luego a su computadora.

Paso 4: el código del dispositivo

El código del dispositivo

El código se cargará en la biblioteca ESP8266WiFi y ESP8266HTTPClient para que pueda interactuar con NodeMCU dentro del IDE de Arduino.

#include <ESP8266Wifi.h>
#include <ESP8266HTTPclient.h>

Entonces necesitamos conectar las credenciales a su WiFi.

const char* ssid = "your wifi id";
const char* password = "yourpassword";

A continuación, trabajaremos en la función setup ().

Paso 5: la configuración ()

La puesta en marcha()

A continuación, desarrollamos la función de configuración. Esto se ejecutará una vez antes de la función main loop ().

  1. Primero iniciaremos el monitor en serie a una velocidad de 115200 baudios.
  2. Luego haga una pausa por un momento.
  3. Configure el modo pin para GPIO2 como ‘SALIDA’ (recuerde: GPIO2 está marcado como D4 en su placa)
  4. Escriba 0 o LOW en el pin para apagar el LED.
  5. Imprima un mensaje de bienvenida y de conexión en el monitor en serie.
  6. Intente iniciar la conexión wifi.
    1. Ejecutaremos un ciclo while hasta que obtengamos ‘WL_CONNECTED’ como estado.
    2. Agregamos un pequeño retraso para darle un segundo en cada bucle.
  • Imprime un mensaje de que el WiFi se ha conectado.
  • Imprima la dirección IP que su enrutador asignó al dispositivo.
  • void setup () {
    
      Serial.begin(115200); // Start the serial monitor.
      delay(10); // Give it a moment.
    
      pinMode(2, OUTPUT); // Set GPIO2 as an OUTPUT.
      digitalWrite(2, 0); // Start off.
    
      // Connect to WiFi network:
      Serial.println("Hello Digital Craft");
      Serial.println("Connecting "); 
      WiFi.begin(ssid, password);
    
      // Show ... until connected:
      while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
      }
    
      Serial.println("WiFi connected");
    
      // Print the IP address of the device:
      Serial.println(WiFi.localIP());
    
    }

    Paso 6: El bucle ()

    El lazo()

    Ahora ejecutaremos el ciclo que verifica si la luz debe estar encendida o apagada. Esto se conectará a un servidor remoto. Leerá un archivo de texto simple que debe tener un 1 o un 0. Esto está usando nuestro servidor de prueba ahora. El objetivo es tener su propio servidor y control.

    1. Primero verificamos que el WiFi aún esté conectado.
    2. Creamos un objeto HTTPClient y lo llamamos ‘http’.
    3. Luego hacemos nuestra solicitud al servidor remoto.
    4. Obtenemos el código de respuesta de la solicitud.
    5. Si el código es mayor que 0, al menos hicimos algún tipo de contacto. (Podrías hacer esto más definido buscando un 200 o algo así).
    6. Imprime un mensaje que conectamos.
    7. Guarde el contenido del texto fallido como ‘carga útil’
    8. Escriba el valor de la carga útil (1 o 0) en el pin que controla la luz LED.
    9. Si el valor en el archivo de texto es 1, entonces el LED debería encenderse. Si es 0, debería apagarse.
    10. Cierre la conexión http.
    void loop() {

    // Verfiy WiFi is connected: if (WiFi.status() == WL_CONNECTED) {

    HTTPClient http; // Object of the class HTTPClient.

    http.begin("http://dockit.org/nodemcu/data.txt"); // Request destination. int httpCode = http.GET(); // Send the request.

    if (httpCode > 0) { //Check the returning code

    Serial.println("We got a repsonse!"); String payload = http.getString(); // Get the text from the destination (1 or 0). Serial.println(payload); // Print the text. digitalWrite(2, payload.toInt()); // Send the payload value to the pin.

    }else{

    Serial.println("Something baaaaaaad happened!");

    }

    http.end(); //Close connection

    }

    delay(1000); //Send a request every 30 seconds

    }

    Archivos adjuntos

    Paso 7: la interfaz web

    La interfaz web

    La interfaz web es una interfaz simple que utiliza Twitter Bootstrap y Jquery para facilitar un poco las cosas. Hay 4 archivos usados ​​en este paso:

    1. index.htmlalberga la interfaz y Javascript que activa toggle.php para actualizar los archivos de registro y datos
    2. toggle.phpenvía 1 o 0 desde index.html a data.txt y la dirección IP y otra información a log.txt
    3. log.txtcontiene información del usuario
    4. data.txtmantiene el estado actual de la luz LED (1 o 0)

    Usamos HTML, CSS, Javascript y PHP para agregar estilo y funcionalidad a la interfaz de usuario.

    Para divertirnos, incorporamos un registro de direcciones IP y ubicaciones de las personas que usan la interfaz de usuario. Esto es opcional.

    El video adjunto es el video que recorre esta parte del proyecto. Esto se grabó en vivo para que pudiera haber interacción durante la construcción.

    Hay demasiado involucrado en la interfaz de usuario web para detallarlo todo aquí. Utilice el video para obtener las instrucciones completas.

    El resumen de lo que está sucediendo es:

    1. Un usuario hace clic en el botón. Esto desencadena:
      1. Una solicitud a toggle.php para cambiar el estado de la luz a encendido o apagado.
      2. Una solicitud a toggle.php para agregar una línea al archivo de registro que incluye:
        • El estado del LED
        • Ubicación de la persona que hizo clic en el botón (geolocalización aproximada basada en la dirección IP)
        • Una marca de tiempo del momento en que se hizo clic en el botón.
    2. El gráfico de luz simple en el encabezado se le aplica .off o .on (clases CSS) y parece estar encendido o apagado para coincidir con el estado de la luz.
  • Mientras la página está abierta, se actualiza continuamente el registro de nuevas entradas y se comprueba si es necesario cambiar el estado y la etiqueta del botón. Esto permite que otras personas usen la interfaz de usuario y usted se actualiza si cambia el estado de la luz.
  • El código completo para esta serie de videos e instrucciones se puede encontrar en nuestra página de Github:

    https://github.com/thedigicraft/livestreams/tree/master/nodemcu_remote_led_web_ui

    Más videos y capacitación en nuestro sitio web:

    https://thedigitalcraft.com/

    ¡1 persona hizo este proyecto!

    • Control remoto con NodeMCU y Web UI
      ¡TheDigiCraft lo logró!

    13 comentarios

    0
    GeertVc
    GeertVc

    Hace 1 año el Paso 6

    Paso seis:
    Se menciona: “retraso (1000); //Enviar una solicitud cada 30 segundos “. Esto solo espera 1 segundo, no 30 segundos.
    Además, usar un delay () real nunca es una buena solución. Bloquea todo el ciclo y no se puede hacer nada más. Es mejor verificar los tiempos actuales y anteriores, restarlos entre sí y compararlos con un número predefinido (por ejemplo, 30000 en este caso si desea verificar cada 30 segundos).
    Si no se cumple la condición, el ciclo simplemente continuará y podrá hacer otras cosas.
    Si se cumple la condición, entonces ejecuta todo el contenido de http …

    0
    GeertVc
    GeertVc

    Hace 1 año el Paso 3

    Paso tres:
    En uno de sus videos donde parpadea el LED azul externo, no habló sobre el pequeño LED en el módulo ESP que también parpadea “anti-fase”.
    La razón es que el LED en el módulo ESP también está conectado a la salida GPIO2 (la misma salida que se usa para el LED azul) y, como tal, también será controlado por los mismos comandos de salida que se usan para controlar el LED azul.
    Sin embargo, el LED del módulo ESP está “activo bajo”. Es decir, tienes que enviar un 0 para encender ese LED y un 1 para apagar ese LED. Para el LED azul, es todo lo contrario: enviando un 1 enciende el LED azul, enviando un 0 interruptores del LED azul. Por lo tanto, el comportamiento “anti-fase” del LED en el módulo ESP …

    0
    GeertVc
    GeertVc

    Hace 1 año el Paso 1

    Paso uno: “… instalar la biblioteca esp8862 …” debería ser “… instalar la biblioteca esp8266 …”

    0
    samarulraj1
    samarulraj1

    hace 1 año

    Recibo este error en mi IDE ardunio, no sé qué salió mal
    “Sketch utiliza 257696 bytes (51%) del espacio de almacenamiento del programa. El máximo es 499696 bytes.
    Las variables globales usan 26572 bytes (32%) de memoria dinámica, dejando 55348 bytes para las variables locales. El máximo es 81920 bytes.

    0
    SarangP
    SarangP

    hace 3 años

    ¿Cuáles serán las modificaciones para más de un botón?

    0
    DjB25
    DjB25

    Pregunta

    hace 3 años

    ¿Cómo puedo ejecutar con 74hc595 shift register para obtener más salidas? Por favor, dé una solución. Gracias.

    0
    TheDigiCraft
    TheDigiCraft

    hace 3 años

    Arreglé las partes del código. El editor Instructables WYSIWYG parece tener una mente propia. 🙂

    0
    AbdullahI23
    AbdullahI23

    hace 3 años

    ¡El Digi Craft siempre hace las cosas grandiosas! ¡Sigue haciendo trabajos increíbles!

    0
    TheDigiCraft
    TheDigiCraft

    Responder hace 3 años

    ¡¡Gracias!! Tengo más por venir 🙂

    0
    Ilusiones Desvanecidas
    Ilusiones Desvanecidas

    hace 3 años

    ¡La gente realmente debería tomarse el tiempo para votar este tutorial!

    Está bastante pensado y bien documentado. Incluso ha prestado una atención meticulosa a la presentación general … un tema no tan común en algunos de los otros tutoriales con los que me he encontrado.

    Un gran tutorial de The Digital Craft.

    0
    TheDigiCraft
    TheDigiCraft

    Respuesta …

    close