"¡Descubre cómo crear una interfaz de usuario táctil con ESP8266 y Pantalla Nextion para Node-RED!"

¿Estás buscando una forma de crear una interfaz de usuario personalizada para tus proyectos con ESP8266? En este artículo te mostraremos cómo utilizar la pantalla Nextion en combinación con Node-RED para crear una interfaz de usuario intuitiva y totalmente personalizable. ¡Sigue leyendo para descubrir cómo llevar tus proyectos al siguiente nivel con esta poderosa combinación de tecnologías!

Este proyecto muestra cómo puede crear una interfaz de usuario con pantalla táctil para Node-RED utilizando la pantalla Nextion y el ESP8266 para controlar sus dispositivos electrónicos. El objetivo de este proyecto es poder controlar su sistema domótico desde la pantalla de Nextion sin tener que acceder a su teléfono inteligente o computadora para acceder a su interfaz Node-RED, manteniendo siempre encendido el tablero de Node-RED para mantenerse actualizado.

Contenido

Primero, mire el vídeo de demostración.

requisitos

Debe tener el sistema operativo Raspbian instalado en su Raspberry Pi; lea «Instalar, activar y conectar Raspbian Lite usando SSH».
Debe tener Node-RED instalado en su Pi y Node-RED Dashboard.
Debería tener Mosquitto Broker instalado en su Raspberry Pi; lea Cómo instalar Mosquitto Broker en Raspberry Pi.
Deberías editor de próxima edición instalado y el Biblioteca Arduino Nextion instalado en su IDE de Arduino – lea Nextion Display con Arduino – Primeros pasos para obtener una introducción a Nextion Display.

Otros recursos útiles:

Decodifica y envía señales RF de 433 MHz con Arduino
¿Qué es MQTT y cómo funciona?
ESP8266 y Node-RED con MQTT (Publicar y Suscribirse)
Módulo transmisor/receptor RF 433 MHz con Arduino
Enchufes controlados remotamente ESP8266

Descripción del proyecto

Usted crea una interfaz física Node-RED con la pantalla Nextion para controlar cuatro salidas diferentes. Fíjate en la siguiente ilustración:

La interfaz de usuario de Nextion controla cuatro salidas diferentes.
ESP8266 #1 controla la Salida #1 y la Salida #2 con un transmisor de 433 MHz. Este ESP8266 también está conectado a la pantalla Nextion.
ESP8266 #2 controla dos LED llamados Workbench y Top Light. La idea es que reemplaces estos dos LED con salidas útiles, como por ejemplo: b. reléo un Interruptor inteligente SONOFFPor ejemplo.
Cuando enciende una salida usando la pantalla Nextion, el estado correspondiente se actualiza automáticamente en el panel de Node-RED.
También puedes controlar todos estos gastos desde el panel de control de Node RED.

¿Cómo funciona el proyecto?

La siguiente figura ilustra cómo funciona este proyecto en cuatro pasos.

Imagina que quieres encender el tomacorriente n.° 1.

1) Cuando toca el botón Outlet #1 ON, la pantalla Nextion envía información al ESP8266 a través de comunicación en serie para que sepa que se presionó este botón.

2) El ESP y la Raspberry Pi se comunican entre sí mediante el protocolo de comunicación MQTT.

La Raspberry Pi tiene instalado el broker Mosquitto, que recibe y envía todos los mensajes MQTT a los dispositivos que estén suscritos a un tema específico.

Cuando tocas el botón ON en la pantalla de Nextion, el ESP publica un mensaje «verdadero» sobre el tema Oficina/Salida1/EstadoBotón.

3) El botón Outlet #1 en Node-RED está suscrito a este tema y recibe este mensaje. Cuando recibe este mensaje, cambia el estado del botón correspondiente a ON. Cuando esto sucede, el Nodo-RED publica un mensaje sobre el tema Oficina/Punto de Venta1.

4) El ESP está suscrito a este tema y, por lo tanto, sabe que Node-RED ha cambiado el estado del botón a ON. Luego, el ESP8266 envía una señal de 433 MHz a través de un transmisor de 433 MHz para encender la salida n.° 1.

Este proceso funciona de manera similar para controlar todas las demás salidas.

Piezas requeridas

Para completar este proyecto necesitarás reunir algunas piezas:

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

Creando la interfaz de usuario de Nextion

Tenemos la interfaz de usuario para eso. Modelo básico Nextion de 3,2″. Si está utilizando una pantalla Nextion de diferente tamaño, deberá realizar algunos cambios en la interfaz para que funcione para su modelo específico. Por lo tanto, debe editar el archivo HMI y generar un nuevo archivo TFT.

Descarga los recursos

Aquí están todos los recursos que necesita para crear la GUI:

.Dispositivo de control archivo (este archivo se puede importar al editor Nextion para editar la GUI);
imagen de fondo utilizado en la interfaz de usuario;
.TFT archivo (este archivo debe cargarse en la pantalla Nextion ya que es el archivo que se ejecutará en la pantalla);

Haga clic aquí para descargar todos los archivos.

Si desea aprender cómo crear o personalizar la interfaz de usuario de Nextion, lea: Pantalla Nextion con Arduino: introducción para aprender a utilizar el editor Nextion.

Compile y cargue código en la pantalla de Nextion

Si está utilizando el modelo base Nextion de 3,2 pulgadas, puede cargar el archivo TFT directamente a la pantalla Nextion.

Si está utilizando una pantalla de diferente tamaño, deberá realizar algunos cambios en la apariencia de la interfaz. En el software Nextion Editor, vaya a archivo > Abierto y seleccione el archivo .HMI proporcionado. Luego haga los cambios necesarios. Puede utilizar la herramienta de depuración en Nextion Editor para obtener una vista previa de cómo se verá la interfaz después de renderizar.

Para cargar el archivo TFT en la pantalla Nextion, necesita una tarjeta microSD formateada como FAT32. Siga los siguientes pasos para cargar el código en la pantalla de Nextion:

1. Entendido .TFT Archivo que corresponde a la versión final de su interfaz de usuario.

2. Inserte este archivo en la tarjeta microSD (Nota: la tarjeta microSD debe haber sido formateada previamente como FAT32).

3. Inserte la tarjeta microSD en la pantalla Nextion y conecte el dispositivo a la corriente.

4. Debería aparecer un mensaje en la pantalla indicando que el código se está cargando.

5. Cuando esté listo, deberías ver el siguiente mensaje:

6. Desenchufe la pantalla Nextion y extraiga la tarjeta microSD.

7. Encienda la alimentación nuevamente y debería ver la interfaz que creó en el editor de Nextion en su pantalla Nextion.

ESP8266 #1 – Diagramas de circuitos

Conecte un ESP8266 a la pantalla Nextion y al transmisor de 433 MHz siguiendo el esquema de la siguiente figura.

El pin TX de la pantalla Nextion debe conectarse al pin RX del ESP8266.
El pin RX de la pantalla Nextion debe conectarse al pin TX del ESP8266.
El pin de datos del transmisor de 433MHz está conectado al ESP8266 GPIO 5 (pin D1).
El pin VCC del transmisor de 433MHz está conectado al pin 3V3 del ESP8266.

ESP8266 #2 – Diagramas de circuitos

Conecte dos LED al otro ESP8266 como se muestra en el diagrama de circuito a continuación.

El LED rojo está conectado al GPIO 5 (pin D1).
El LED verde está conectado al GPIO 4 (pin D2).

Decodificación de las señales RF del enchufe

Para controlar sus enchufes a través de señales de 433 MHz, necesita decodificar las señales que encienden y apagan los enchufes. Lea la siguiente publicación para aprender cómo decodificar y enviar señales de RF de 433MHz usando Arduino.

código

Para cada ESP8266 debes subir un boceto diferente. Asegúrese de realizar los cambios necesarios en cualquier código para que funcione para usted.

nota: Antes de cargar el código, debe asegurarse de que la biblioteca Nextion para Arduino IDE esté configurada correctamente para su uso con ESP8266.

Configuración de la biblioteca Nextion para ESP8266

Con el Biblioteca Nextion instalada en tu IDE de Arduinonecesitas hacer algunos cambios para que funcione con tu ESP8266.

1. En la carpeta de su biblioteca Arduino, abra el ITEADLIB_Arduino_Nextion Carpeta

2. Debería haber uno NexConfig.h Archivo: abre este archivo.

3. Comente la línea 27 para que diga:

//#define DEBUG_SERIAL_ENABLE

4. Línea de comentario 32:

//#define dbSerial Serial

5. Cambie la línea 37 para obtener esto:

#define nexSerial Serial

6. Guarde el NexConfig.h Archivo.

7. Aquí está el resultado final:

ESP8266 #1 – Código

Cargue el siguiente código en ESP8266 número 1. Debe realizar los siguientes cambios:

1. Agregue su SSID, contraseña y dirección IP del corredor MQTT

2. Agregue los códigos RF para encender y apagar sus enchufes. Si aún no has decodificado las señales RF que encienden y apagan los enchufes, sigue este tutorial: Decodificación de señales RF.

3. Es posible que deba cambiar el nombre del dispositivo ESP8266

4. También puede personalizar los temas MQTT que su ESP publica o a los que se suscribe.

Importante: Para cargar código a su ESP8266, deberá quitar los cables TX y RX conectados a la pantalla Nextion.

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

// Loading the required libraries
#include <ESP8266WiFi.h>
#include <PubSubClient.h>
#include "Nextion.h"
#include <RCSwitch.h>

//#include <SoftwareSerial.h>
//SoftwareSerial mySerial(RX_PIN, TX_PIN); // RX, TX

// Change the credentials below, so your ESP8266 connects to your router
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

// Change the variable to your Raspberry Pi IP address, so it connects to your MQTT broker
const char* mqtt_server = "REPLACE_WITH_YOUR_MQTT_BROKER_IP";
// For example: const char* mqtt_server = "192.168.1.112";

// Initialize the espClient. You should change the espClient name if you have multiple ESPs running in your home automation system
WiFiClient espClient;
PubSubClient client(espClient);

// Initialize the RC Switch component
RCSwitch mySwitch = RCSwitch();

// Declare a button object [page id:0,component id:1, component name: "b0"]
NexButton b0on = NexButton(0, 2, "b0on");
NexButton b0off = NexButton(0, 4, "b0off");
NexButton b1on = NexButton(0, 8, "b1on");
NexButton b1off = NexButton(0, 9, "b1off");
NexButton b2on = NexButton(0, 10, "b2on");
NexButton b2off = NexButton(0, 11, "b2off");
NexButton b3on = NexButton(0, 12, "b3on");
NexButton b3off = NexButton(0, 13, "b3off");

//Register a button object to the touch event list  
NexTouch *nex_listen_list[] = {
  &b0on,
  &b0off,
  &b1on,
  &b1off,
  &b2on,
  &b2off,
  &b3on,
  &b3off,
  NULL
};

// Button component push callback function 
void b0onPushCallback(void *ptr) {  
  client.publish("office/workbench/buttonState", "true");
}
void b0offPushCallback(void *ptr) {
  client.publish("office/workbench/buttonState", "false"); 
}
void b1onPushCallback(void *ptr) {
  client.publish("office/toplight/buttonState", "true");   
}
void b1offPushCallback(void *ptr) {
  client.publish("office/toplight/buttonState", "false");    
}
void b2onPushCallback(void *ptr) {
  client.publish("office/outlet1/buttonState", "true");     
}
void b2offPushCallback(void *ptr) {
  client.publish("office/outlet1/buttonState", "false");   
}
void b3onPushCallback(void *ptr) {
  client.publish("office/outlet2/buttonState", "true");   
}
void b3offPushCallback(void *ptr) {
  client.publish("office/outlet2/buttonState", "false");   
}

// Don't change the function below. 
// This function connects your ESP8266 to your router
void setup_wifi() {
  delay(10);
  // We start by connecting to a WiFi network
  //mySerial.println();
  //mySerial.print("Connecting to ");
  //mySerial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    //mySerial.print(".");
  }
  //mySerial.println("");
  //mySerial.print("WiFi connected - ESP IP address: ");
  //mySerial.println(WiFi.localIP());
}

// This function is executed when some device publishes a message to a topic that your ESP8266 is subscribed to
// Change the function below to add logic to your program, so when a device publishes a message to a topic that 
// your ESP8266 is subscribed you can actually do something
void callback(String topic, byte* message, unsigned int length) {
  //mySerial.print("Message arrived on topic: ");
  //mySerial.print(topic);
  //mySerial.print(". Message: ");
  String messageTemp;
  
  for (int i = 0; i < length; i++) {
    //mySerial.print((char)message[i]);
    messageTemp += (char)message[i];
  }
  //mySerial.println();
  
  // Feel free to add more if statements to control more outputs with MQTT
  // If a message is received on the topic office/outlet1, you check if the message is either true or false 
  // Turns the outlet1 according to the message
  if(topic=="office/outlet1"){
      //mySerial.print("Changing Outlet 1 to ");
      if(messageTemp == "true"){
        mySwitch.send(4527445, 24);
        //mySerial.print("On");
      }
      else if(messageTemp == "false"){
        mySwitch.send(4527444, 24);
        //mySerial.print("Off");
      }
  }
  // Turns the outlet2 according to the message
  else if(topic=="office/outlet2"){
      //mySerial.print("Changing Outlet 2 to ");
      if(messageTemp == "true"){
        mySwitch.send(4539733, 24);
        //mySerial.print("On");
      }
      else if(messageTemp == "false"){
        mySwitch.send(4539732, 24);
        //mySerial.print("Off");
      }
  }
  //mySerial.println();
}

// This function reconnects your ESP8266 to your MQTT broker
// Change the function below if you want to subscribe to more topics with your ESP8266 
void reconnect() {
  // Loop until we're reconnected
  while (!client.connected()) {
    //mySerial.print("Attempting MQTT connection...");
    // Attempt to connect
    /*
     YOU MIGHT NEED TO CHANGE THIS LINE, IF YOU'RE HAVING PROBLEMS WITH MQTT MULTIPLE CONNECTIONS
     To change the ESP device ID, you will have to give a new name to the ESP8266.
     Here's how it looks:
       client.connect("ESP1_Office");
     Then, for the other ESP:
       client.connect("ESP1_Kitchen");
      That should solve your MQTT multiple connections problem
    */
    if(client.connect("ESP1_Office")) {
      //mySerial.println("connected"); 
      client.subscribe("office/outlet1");  
      client.subscribe("office/outlet2");             
    } 
    else {
      //mySerial.print("failed, rc=");
      //mySerial.print(client.state());
      //mySerial.println(" try again in 5 seconds");
      // Wait 5 seconds before retrying
      delay(5000);
    }
  }
}

void setup(void) {    
  //Set the baudrate which is for debug and communicate with Nextion screen
  nexInit();

  //Register the pop event callback function of the current button component
  b0on.attachPush(b0onPushCallback, &b0on);
  b0off.attachPush(b0offPushCallback, &b0off);
  b1on.attachPush(b1onPushCallback, &b1on);
  b1off.attachPush(b1offPushCallback, &b1off);
  b2on.attachPush(b2onPushCallback, &b2on);
  b2off.attachPush(b2offPushCallback, &b2off);
  b3on.attachPush(b3onPushCallback, &b3on);
  b3off.attachPush(b3offPushCallback, &b3off);
    
  // mySerial.begin(115200);
  
  setup_wifi();
  client.setServer(mqtt_server, 1883);
  client.setCallback(callback); 

  // Connect RF 433MHz Transmitter to GPIO 5
  mySwitch.enableTransmit(5);
    
  // SET YOUR PULSE LENGTH
   mySwitch.setPulseLength(REPLACE_WITH_YOUR_PULSE_LENGTH);
  
  // SET YOUR PROTOCOL (default is 1, will work for most outlets)
  mySwitch.setProtocol(REPLACE_WITH_YOUR_PROTOCOL);
  
  // Set number of transmission repetitions
  mySwitch.setRepeatTransmit(20);
}

void loop(void){   
  // When a push event occured every time,
  // the corresponding component[right page id and component id] in touch event list will be asked
  nexLoop(nex_listen_list);
   
  if (!client.connected()) {
    reconnect();
  }
  /*
    YOU MIGHT NEED TO CHANGE THIS LINE, IF YOU'RE HAVING PROBLEMS WITH MQTT MULTIPLE CONNECTIONS
    To change the ESP device ID, you will have to give a new name to the ESP8266.
    Here's how it looks:
      client.connect("ESP1_Office");
    Then, for the other ESP:
      client.connect("ESP1_Kitchen");
    That should solve your MQTT multiple connections problem
    */
  if(!client.loop())
    client.connect("ESP1_Office");
}

Ver código sin formato

ESP8266 #2 – Código

Sube el siguiente código al ESP8266 número 2. No olvide editar el código para agregar su SSID, contraseña y dirección IP del agente MQTT:

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

// Loading the required libraries
#include <ESP8266WiFi.h>
#include <PubSubClient.h>

//#include <SoftwareSerial.h>
//SoftwareSerial mySerial(RX_PIN, TX_PIN); // RX, TX

// Change the credentials below, so your ESP8266 connects to your router
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

// Change the variable to your Raspberry Pi IP address, so it connects to your MQTT broker
const char* mqtt_server = "REPLACE_WITH_YOUR_MQTT_BROKER_IP";
// For example: const char* mqtt_server = "192.168.1.112";

// Initializes the espClient. You should change the espClient name if you have multiple ESPs running in your home automation system
WiFiClient espClient;
PubSubClient client(espClient);

// LED pins
const int ledPin5 = 5;
const int ledPin4 = 4;

// Don't change the function below. This function connects your ESP8266 to your router
void setup_wifi() {
  delay(10);
  // We start by connecting to a WiFi network
  //mySerial.println();
  //mySerial.print("Connecting to ");
  //mySerial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    //mySerial.print(".");
  }
  //mySerial.println("");
  //mySerial.print("WiFi connected - ESP IP address: ");
  //mySerial.println(WiFi.localIP());
}

// This function is executed when some device publishes a message to a topic that your ESP8266 is subscribed to
// Change the function below to add logic to your program, so when a device publishes a message to a topic that 
// your ESP8266 is subscribed you can actually do something
void callback(String topic, byte* message, unsigned int length) {
  //mySerial.print("Message arrived on topic: ");
  //mySerial.print(topic);
  //mySerial.print(". Message: ");
  String messageTemp;
  
  for (int i = 0; i < length; i++) {
    //mySerial.print((char)message[i]);
    messageTemp += (char)message[i];
  }
  //mySerial.println();
  
  // Feel free to add more if statements to control more outputs with MQTT
  // If a message is received on the topic office/workbench, you check if the message is either true or false 
  // Turns the workbench according to the message
  if(topic=="office/workbench"){
      //mySerial.print("Changing Workbench to ");
      if(messageTemp == "true"){
        digitalWrite(ledPin5, HIGH);
        //mySerial.print("On");
      }
      else if(messageTemp == "false"){
        digitalWrite(ledPin5, LOW);
        //mySerial.print("Off");
      }
  }
  else if(topic=="office/toplight"){
      //mySerial.print("Changing Top Light to ");
      if(messageTemp == "true"){
        digitalWrite(ledPin4, HIGH);
        //mySerial.print("On");
      }
      else if(messageTemp == "false"){
        digitalWrite(ledPin4, LOW);
        //mySerial.print("Off");
      }
  }
  //mySerial.println();
}

// This function reconnects your ESP8266 to your MQTT broker
// Change the function below if you want to subscribe to more topics with your ESP8266 
void reconnect() {
  // Loop until we're reconnected
  while (!client.connected()) {
    //mySerial.print("Attempting MQTT connection...");
    // Attempt to connect
    /*
     YOU MIGHT NEED TO CHANGE THIS LINE, IF YOU'RE HAVING PROBLEMS WITH MQTT MULTIPLE CONNECTIONS
     To change the ESP device ID, you will have to give a new name to the ESP8266.
     Here's how it looks:
       client.connect("ESP2_Office");
     Then, for the other ESP:
       client.connect("ESP1_Kitchen");
      That should solve your MQTT multiple connections problem
    */
    if (client.connect("ESP2_Office")) {
      //mySerial.println("connected"); 
      client.subscribe("office/workbench");
      client.subscribe("office/toplight");              
    } else {
      //mySerial.print("failed, rc=");
      //mySerial.print(client.state());
      //mySerial.println(" try again in 5 seconds");
      // Wait 5 seconds before retrying
      delay(5000);
    }
  }
}

void setup(void) { 
  // Set GPIOs as Outputs   
  pinMode(ledPin5, OUTPUT);
  pinMode(ledPin4, OUTPUT);
  // mySerial.begin(115200);
  setup_wifi();
  client.setServer(mqtt_server, 1883);
  client.setCallback(callback);
}

void loop(void){   
  if (!client.connected()) {
    reconnect();
  }
  /*
   YOU MIGHT NEED TO CHANGE THIS LINE, IF YOU'RE HAVING PROBLEMS WITH MQTT MULTIPLE CONNECTIONS
   To change the ESP device ID, you will have to give a new name to the ESP8266.
   Here's how it looks:
     client.connect("ESP2_Office");
   Then, for the other ESP:
     client.connect("ESP1_Kitchen");
    That should solve your MQTT multiple connections problem
  */
  if(!client.loop())
    client.connect("ESP2_Office");
}

Ver código sin formato

Creando la aplicación Node-RED

Después de instalar ambas placas ESP con el código cargado, es hora de crear su flujo Node-RED. Debes tener Node-RED y Node-RED Dashboard instalados en tu Raspberry Pi. De lo contrario, lea: Introducción al panel de Node-RED para seguir las instrucciones para instalar el panel de Node-RED.

Iniciar nodo-RED

Para iniciar Node-RED, escriba lo siguiente en la ventana de terminal:

pi@raspberry:~ $ node-red-start

Para acceder a Node-RED, abra una pestaña en cualquier navegador de la red local y escriba:

http://Your_RPi_IP_address:1880

Deberías reemplazar Su_dirección_IP_RPi con su dirección IP de Raspberry Pi. Si no conoce la dirección IP de su Raspberry Pi, escriba lo siguiente en la terminal:

pi@raspberry:~ $ hostname -I

Creando el flujo Node-RED

Puede importar el flujo Node-RED implementado y luego realizar los cambios necesarios.

Para importar el flujo de Node-RED, vaya a repositorio de github o haga clic en la imagen a continuación para ver el archivo sin formato y copiar el código proporcionado.

A continuación, en la ventana Node-RED, seleccione el menú en la parte superior derecha y vaya a Importar > Portapapeles.

Luego pegue el código proporcionado y haga clic Importar.

Aquí está el flujo de Node-RED que debería obtener:

Tienes cuatro botones diferentes para controlar las cuatro salidas diferentes. Cada botón está asociado a un tema específico en el que el ESP8266 #1 publica mensajes para cambiar el estado de los botones en Node-RED.

Cada botón Node-RED publica en un tema al que ESP8266 #1 y ESP8266 #2 están suscritos para saber cuándo cambiar el estado de salida.

Panel de control del nodo RED

Todos los widgets están agrupados en el gasto grupo dentro del Oficina Pestaña.

Accede a tu Node-RED a través de la interfaz

Ir a http://tu_dirección_IP_RPi:1880/Interfaz de usuarioy deberías ver la interfaz de usuario de Node-RED.

estuche impreso en 3D

Para darle a este proyecto un aspecto terminado, imprimí en 3D una carcasa para la pantalla Nextion de 3,2 pulgadas.

La carcasa ofrece suficiente espacio para la pantalla, el ESP8266 y el transmisor de 433 MHz.

Puede descargar el archivo .STL para el Carcasa Nextion para 3,5 pulgadas. Tenga en cuenta que utilicé Nextion 3.2″ para este proyecto, por lo que deberá cambiar el tamaño de estos archivos para que se ajusten a la pantalla Nextion 3.2″.

El estuche se imprimió con la impresora 3D Creality 3D CR–10; puede leer mi reseña completa aquí.

demostración

Cuando todo esté listo, debería poder controlar sus gastos tocando los botones en la pantalla de Nextion.

Cuando tocas un botón en la pantalla de Nextion, el panel de Node-RED se actualiza inmediatamente.

Mire el vídeo en la parte superior de la página para ver este proyecto en acción.

Envolver

Esperamos que este proyecto le haya resultado útil. Después de aprender los conceptos de este proyecto, podrá personalizarlo para controlar prácticamente cualquier cosa que desee con Node-RED utilizando la interfaz de visualización de Nextion.

Si te gusta este proyecto, seguro que también te gustará:

Node-RED con tira LED RGB direccionable WS2812B
Crea un sistema domótico con Node-RED
Node-RED con cámara Raspberry Pi (tomar fotos)

Gracias por leer.

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

Pantalla Nextion con ESP8266: Interfaz de usuario con pantalla táctil para Node-RED

Este proyecto muestra cómo puedes construir una interfaz de usuario táctil para Node-RED con la pantalla Nextion y el ESP8266 para controlar tus electrodomésticos. El objetivo de este proyecto es poder controlar tu sistema de automatización del hogar a través de la pantalla Nextion sin necesidad de recurrir a tu teléfono inteligente o computadora para acceder a la interfaz de usuario de Node-RED, manteniendo siempre actualizado el Panel de Control de Node-RED.

Requisitos previos

Para poder llevar a cabo este proyecto, debes cumplir con los siguientes requisitos:

Tener instalado el sistema operativo Raspbian en tu Raspberry Pi – consulta cómo instalar Raspbian Lite, habilitar y conectar mediante SSH.
Necesitas tener instalado Node-RED en tu Pi y Node-RED Dashboard.
Debes tener instalado el broker Mosquitto en tu Raspberry Pi – consulta cómo instalar el broker Mosquitto en Raspberry Pi.
Debes tener instalado el Editor de Nextion y la Biblioteca de Nextion para Arduino en tu IDE de Arduino – consulta Nextion Display con Arduino – Introducción para obtener una introducción a la pantalla Nextion.

Descripción del Proyecto

Crearás una interfaz física de Node-RED con la pantalla Nextion para controlar cuatro salidas diferentes. Echa un vistazo a la figura a continuación:

El ESP8266 #1 controla la Salida #1 y la Salida #2 utilizando un transmisor de 433 MHz. Este ESP8266 también está conectado a la pantalla Nextion.

El ESP8266 #2 controla dos LEDs llamados Workbench y Top Light. La idea es que reemplaces estos dos LEDs por salidas útiles como un relé o un interruptor inteligente SONOFF, por ejemplo.

Cuando enciendes una salida utilizando la pantalla Nextion, el estado correspondiente se actualiza automáticamente en el Panel de Control de Node-RED.

También puedes controlar todas estas salidas utilizando el Panel de Control de Node-RED.

Cómo funciona el proyecto

Cuando tocas el botón de ENCENDIDO de Salida #1, la pantalla Nextion envía información al ESP8266 a través de comunicación serial, para que este sepa que se ha tocado ese botón.
El ESP y la Raspberry Pi se comunican entre sí utilizando el protocolo de comunicación MQTT.
La Raspberry Pi tiene instalado el broker Mosquitto, que recibe todos los mensajes MQTT y los envía a los dispositivos suscritos a un tema particular.
Cuando tocas el botón de ENCENDIDO en la pantalla Nextion, el ESP publica un mensaje «true» en el tema office/outlet1/buttonState.
El botón de Salida #1 en Node-RED está suscrito a este tema y recibirá ese mensaje. Cuando recibe ese mensaje, cambia el estado del botón correspondiente a ENCENDIDO. Cuando esto sucede, Node-RED publica un mensaje en el tema office/outlet1.
El ESP está suscrito a este tema, por lo que sabe que Node-RED ha cambiado el estado del botón a ENCENDIDO. El ESP8266, entonces, envía una señal de 433 MHz utilizando un transmisor de 433 MHz para encender la Salida #1.

Partes necesarias

Para completar este proyecto, necesitarás reunir algunas partes:

Raspberry Pi
2x ESP8266
Pantalla Nextion modelo básico de 3.2”
Tarjeta MicroSD
Enchufes controlados remotamente de 433 MHz
Transmisor/receptor de 433 MHz
2x LEDs
2x resistencias de 330 Ohmios
Protoboard
Cables puente

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

Conclusiones

Esperamos que este proyecto te haya resultado útil. Después de aprender los conceptos en este proyecto, puedes personalizarlo para controlar prácticamente cualquier cosa que desees con Node-RED utilizando la interfaz de pantalla Nextion.

Si te gustó este proyecto, seguramente te gustarán:

Node-RED con tira de LED RGB direccionable WS2812B
Construir un sistema de automatización del hogar con Node-RED
Node-RED con cámara Raspberry Pi (Tomar fotos)

Gracias por leer.

4 comentarios en «Pantalla Nextion con ESP8266: interfaz de usuario con pantalla táctil para Node-RED»

fitotrankilog

2 de abril de 2022 a las 05:23

Se ve súper interesante este proyecto, definitivamente le daré una oportunidad. ¡Gracias por la recomendación! 🚀
Accede para responder
hylltremY

9 de agosto de 2022 a las 01:33

Wow, nunca pensé que pudiera usar una pantalla táctil con ESP8266 para Node-RED. ¡Definitivamente voy a probarlo!
Accede para responder
MarsachN

10 de diciembre de 2022 a las 04:41

Que interesante! Me encantaría probar este proyecto en casa.
Accede para responder
weiherD

31 de octubre de 2023 a las 09:46

¡Increíble combinación de tecnologías! Definitivamente me da curiosidad probar esta interfaz de usuario para Node-RED. ¡Gracias por compartir!
Accede para responder

Deja un comentario Cancelar la respuesta

Lo siento, debes estar conectado para publicar un comentario.

Primero, mire el vídeo de demostración.

requisitos

Descripción del proyecto

¿Cómo funciona el proyecto?

Piezas requeridas

Creando la interfaz de usuario de Nextion

Descarga los recursos

Compile y cargue código en la pantalla de Nextion

ESP8266 #1 – Diagramas de circuitos

ESP8266 #2 – Diagramas de circuitos

Decodificación de las señales RF del enchufe

código

Configuración de la biblioteca Nextion para ESP8266

ESP8266 #1 – Código

ESP8266 #2 – Código

Creando la aplicación Node-RED

Iniciar nodo-RED

Creando el flujo Node-RED

Panel de control del nodo RED

Accede a tu Node-RED a través de la interfaz

estuche impreso en 3D

demostración

Envolver

Pantalla Nextion con ESP8266: Interfaz de usuario con pantalla táctil para Node-RED

Requisitos previos

Descripción del Proyecto

Cómo funciona el proyecto

Partes necesarias

Conclusiones

Related Posts:

4 comentarios en «Pantalla Nextion con ESP8266: interfaz de usuario con pantalla táctil para Node-RED»

Deja un comentario Cancelar la respuesta