Interfaz de pantalla Nextion con placa ESP 32 de cuatro relés: 7 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:43

En estas instrucciones vamos a conectar la pantalla de conexión de 5”a la placa de cuatro relés Esp 32. La placa está controlada por el protocolo MQTT. La placa también tiene funciones de control de dos vías. Puede ser controlado tanto por mqtt como por pantalla táctil. La pantalla táctil está conectada a Esp 32 a través de uart.

Configuración de Nextion Display:

Nextion Editor es un software de desarrollo que se utiliza para la construcción visual de la interfaz gráfica para dispositivos integrados con uso intensivo de GUI con varios tipos de pantallas TFT y paneles táctiles. Con esta herramienta, los usuarios pueden comenzar a crear dispositivos basados en TFT de una manera más rápida y sencilla.

Nextion Editor se puede descargar desde este enlace

nextion.itead.cc/resources/download/nextion-editor/

Después de descargar, instale el editor de nextion.

Paso 1: Editor de conexiones

Abra el editor siguiente que muestra la ventana siguiente, tiene subventanas. Caja de herramientas en esta ventana habrá un conjunto de características como mostrar texto, agregar un botón o crear un dial, etc., podemos arrastrar y soltar estos objetos en la ventana principal. La esquina inferior izquierda es la ventana de la imagen y la fuente donde el usuario puede agregar las imágenes usando el símbolo "+" y puede eliminar las imágenes usando el símbolo "-". En la esquina superior derecha hay una ventana de página donde el usuario puede agregar o eliminar páginas. En la esquina inferior derecha está la ventana de atributos, aquí el usuario puede modificar los parámetros de los objetos. En la parte inferior hay dos ventanas, una es la ventana de salida y la ventana de evento. mostrará el error del compilador. El usuario seleccionará los objetos y escribirá el código en la ventana del evento para que sucedan las cosas.

Necesitamos crear el nuevo archivo, una vez que guardamos el nuevo archivo, aparece la ventana image2, le pedirá que elija el modelo, el modelo no es más que el modelo de visualización de nextion, lo obtendrá en la parte posterior de la nextion después de hacer clic en Aceptar para Continuar.

Después de crear un nuevo archivo, la página se crea como se muestra en la imagen image3, el usuario puede crear muchas páginas dependiendo de su aplicación, pero en la aplicación actual estamos limitados a una sola página.

Paso 2: agregar imágenes y fuentes

En image4 puedes ver cómo crear una fuente. Vaya a herramientas y haga clic en el generador de fuentes, aparecerá la ventana del creador de fuentes, en este seleccione la altura y el tipo de fuente y dé el nombre de la fuente y haga clic en la fuente del generador. no.

En la imagen 5 puedes ver cómo agregar la fuente, está resaltada en la instantánea. Usando los símbolos + y -, el usuario puede agregar o eliminar fuentes.

En image6 puedes ver cómo agregar imágenes o borrar las imágenes seleccionando seleccionando “+” o “-” respectivamente.

Paso 3: Crear botón

Image7 muestra cómo agregar los objetos a la ventana principal desde la caja de herramientas. Por ejemplo, haga clic en el botón de estado dual del objeto, aparecerá en la ventana principal como se muestra en el objeto bt0 del botón de estado dual image7. El usuario puede mover el botón en la dirección xey. Mostraremos cómo crear un botón de interruptor con estado dual.

En image8 podemos ver que la imagen del botón ha sido modificada según el usuario. Necesitamos hacer clic en el botón bt0, en la ventana de atributos aparecerán los parámetros del botón. En ese caso, el usuario debe cambiar el parámetro sta a image y en las pestañas pic0 y pic1, el usuario debe asignar las imágenes que desea aplicar.

En la imagen 9 se muestra la disposición final de todos los botones, incluido el nombre, aquí hemos agregado bt0, bt1, bt2 y bt3 para button0, button1, button2 y button3 respectivamente.

Paso 4: Código de evento para el botón de interruptor

La imagen 10 muestra la preinicialización de la velocidad en baudios = 115200 en la ventana del evento, su parte del código. El usuario puede inicializar en esta parte relacionada con la visualización.

En la imagen 11 se muestra la parte del código del botón bt0, aquí estamos imprimiendo en serie dependiendo del estado variable del botón, es decir, para bt0 la variable es 0, luego enviamos la serie "R10" y para bt0 la variable es 1, entonces estamos enviando "R11". al esp. Una vez que Esp recibe R10 apaga el primer relé y cuando recibe R11 se enciende el primer relé. De manera similar, necesitamos codificar todos los botones, por ejemplo, bt1, bt2 y bt3.

Paso 5: depurar GUI

Una vez que todo está codificado, necesitamos compilar, si no hay ningún error, podemos depurar que la GUI creada esté funcionando según nuestros requisitos antes de cargarla en la pantalla de nextion. La imagen 12 muestra la ventana del depurador, aquí el usuario puede actualizar el simulador desde el botón desplegable y verificar si funciona según el usuario.

Una vez que el dispositivo funciona según el usuario, el siguiente paso es cargar el código en la pantalla de nextion.

La imagen 13 muestra la ventana de carga al dispositivo nextion, aquí debe seleccionar el puerto com y la velocidad en baudios. Después de eso, debe hacer clic en el botón Ir para cargar el código, puede tomar algún tiempo cargarlo.

Paso 6: funcionamiento del dispositivo

La imagen 14 muestra el diagrama de conexión de la placa de cuatro relés wifi ESP 32 con la pantalla nextion. Desde la placa ESP 32 J1 y J2, conecte 5v y tierra (G) a la pantalla nextion como se muestra a continuación. Conecte el Tx de nextion al Rx0 del ESP32 placa y Rx de conexión al Tx0 de la placa ESP32. Esto establecerá la comunicación Uart.

Funcionando: Una vez que todo esté conectado, encienda el dispositivo, configure el dispositivo con ssid y contraseña y el broker mqtt con el nombre del tema de publicación y subíndice. Después de enviar las credenciales, el dispositivo se reiniciará y se conectará a mqtt. instructables openhab) como se muestra en la imagen 15.

El dispositivo puede ser controlado por http, mqtt también a través de la pantalla táctil GUI. Podemos obtener el estado actual de todos los canales de retransmisión, ya sea que los canales estén activados o desactivados tanto en mqtt como en la pantalla táctil.

Paso 7: ayuda de Nextion

La imagen 17 muestra la ventana para el conjunto de instrucciones de nextion, donde el usuario puede obtener ayuda.