Pantalla Nextion con Arduino y ESP32: Guía de Conexión HMI, Gráficos y Depuración UART

En este tutorial aprenderás todo lo que necesitas saber sobre las pantallas Nextion y las diferencias en las series de pantallas.

Te muestro cómo crear una interfaz en el Editor Nextion y cómo utilizar las funciones de programación internas.

Este artículo también contiene un ejemplo básico para aprender los fundamentos de la pantalla y la interacción con el microcontrolador Arduino. Un ejemplo avanzado muestra funciones más complejas de los displays Nextion.

Introducción a las pantallas Nextion

Nextion es una empresa china que construye, en mi opinión, las mejores pantallas HMI (interfaz hombre-máquina) para proyectos de microcontroladores de bricolaje. Todas sus pantallas tienen una pantalla táctil y un procesador integrado (MCU) combinado con memoria incorporada. Es por eso que las funciones de la pantalla Nextion superan con creces las de una pantalla normal. Además, las pantallas tienen una conexión UART, que permite que las pantallas se comuniquen con todos los microcontroladores (por ejemplo, Arduino, ESP8266) o computadoras de placa única (por ejemplo, Raspberry Pi).

Pero, ¿por qué Nextion muestra memoria adicional a bordo?
La pantalla necesita toda esta memoria porque puede almacenar datos directamente en la propia pantalla como una imagen de fondo y puede programar la pantalla directamente sin ningún microcontrolador. Por ejemplo, si presiono un botón, el texto y el color del botón deberían cambiar. La memoria flash se utiliza para almacenar varias fuentes, videos e imágenes.

Pantalla Arduino Nextion frente a ESP8266 NodeMCU frente a Arduino Uno

La siguiente tabla muestra las diferentes especificaciones técnicas de la pantalla Nextion en comparación con el ESP8266 NodeMCU V2 y el Arduino Uno con respecto a la potencia de cálculo y el tamaño de la memoria.

	Función	Dispositivos de excitación	EPS8266 NodeMCU	Arduino Uno
MCU	Define la velocidad del microcontrolador incorporado	48MHz - 200MHz	52MHz	16MHz
Memoria FLASH	Almacenar fuentes e imágenes	4MB - 128MB	4MB	32KB
Memoria RAM	Almacenar variables durante el tiempo de ejecución	3,6KB - 512KB	64KB	2KB

Comparación de diferentes pantallas de Arduino Nextion

Nextion crea 3 series de pantallas diferentes: básica, mejorada e inteligente. Las tres series tienen función táctil, así como flash integrado, RAM y MCU. Si solicita una pantalla, independientemente de la serie, se incluyen una tarjeta de alimentación (Micro-USB a 5V GPIO) y cables para conectar la pantalla.

La serie básica tiene todo lo que necesita para la mayoría de los proyectos. La pantalla más pequeña de la serie básica tiene una pantalla de 2.4 «y cuesta $ 16.4 y la pantalla más grande tiene un tamaño de 7.0» y cuesta $ 74.9.

Si compra una pantalla de serie mejorada, obtiene un hardware más potente que la serie base en términos de MCU, almacenamiento flash y SRAM. Además, la serie Enhances tiene un módulo de reloj en tiempo real (RTC) incorporado para mantener la hora exacta y EEPROM para almacenar valores o cadenas en la memoria de la pantalla durante el tiempo de ejecución.

Los modelos actualizados no solo tienen la conexión a su microcontrolador, sino también 8 pines digitales adicionales, 4 de los cuales son compatibles con PWM. Estos pines adicionales se utilizan con una placa de expansión Nextion que incluye 6 botones, 1 LED y 1 zumbador piezoeléctrico. Gracias a la combinación de una pantalla mejorada y una placa de expansión, puede realizar proyectos básicos sin un microcontrolador. En este caso, debe programar la lógica en la MCU de pantalla, que también le muestro en este tutorial. La siguiente imagen muestra la diferencia entre usar la placa de expansión o un microcontrolador. La imagen es solo un boceto esquemático y el cableado no es correcto.

Pantalla Nextion sin tarjeta de expansión

Pantalla Nextion con tarjeta de expansión

La serie inteligente admite todas las funciones de la serie mejorada como el módulo RTC, pero también tiene un microcontrolador mucho más rápido y flash de 128 MB. Esto permite que las pantallas inteligentes admitan funciones como reproducción de video y animación, soporte de audio y soporte PNG para imágenes. Además, las pantallas inteligentes tienen un medidor de suavizado para suavizar las líneas o texturas irregulares al combinar el color de un borde con el color de los píxeles circundantes.

Hay varios objetos, como un componente de conmutación, que solo se pueden utilizar para esta serie. En el siguiente capítulo de este artículo se proporciona una descripción general de todos los componentes que puede agregar a su interfaz.

En cada serie, están disponibles diferentes tamaños de pantalla. La siguiente tabla muestra las tres series diferentes de pantallas y las especificaciones técnicas. En este tutorial, estoy usando el NX4832T035 de la serie base, que tiene una pantalla de 3.5 ”.

Cómo crear una interfaz con Nextion Editor

Ahora queremos saber cómo construir una HMI con la pantalla Nextion. Esto lo hace Nextion Editor, un software de desarrollo GUI (interfaz gráfica de usuario) gratuito. Puede descargar la última versión del software desde el Sitio web de Nextion.

Cuando inicia el editor, ve los mismos paneles que en la siguiente imagen. La diferencia es que ya he creado un proyecto para mostrarte el contenido de los diferentes paneles.

Lo primero que queremos hacer es crear un nuevo proyecto. Los siguientes pasos le guiarán a través de su proceso.

1. Primero, hacemos clic en el botón Nuevo de la barra de herramientas y seleccionamos una carpeta en la que guardar el proyecto.
2. Se abrirá una nueva ventana y debe seleccionar su pantalla. Primero seleccione la serie: Básica, Mejorada o Inteligente, luego el tamaño de la pantalla. Sugerencia: En el sitio del paquete donde se encontraba la pantalla, puede encontrar el número correspondiente como: NX4832T035 en mi caso.
3. Luego puede seleccionar la dirección de visualización: vertical u horizontal y confirmar todos los ajustes presionando el botón OK.

Después de crear el proyecto, debe conocer las funciones básicas del editor Nextion. En la imagen de arriba, puede ver que hay 8 planos que se describen en la siguiente sección:

Menú principal: En el menú principal encontrará opciones y configuraciones estándar. Por ejemplo, puede abrir, guardar y cerrar proyectos, buscar configuraciones generales y buscar actualizaciones.

• En la categoría de herramientas, puede agregar nuevas fuentes con el generador de fuentes. En el generador, puede elegir entre diferentes fuentes y seleccionar la altura. Es útil crear varias fuentes para su proyecto.

Barra de herramientas: en la barra de herramientas también puede abrir, guardar o crear un nuevo proyecto. En la segunda fila hay varias funciones para alinear los componentes de la caja de herramientas. También encontrarás otras funciones que usaremos:

• Compilar: antes de transferir el proyecto a la pantalla, debes compilar el código actual.
• Depuración: la ventana de depuración es una buena opción para comprobar cómo se verá la pantalla. También puede consultar las implementaciones programadas directamente en la pantalla.

Caja de herramientas: En la caja de herramientas están todos los componentes que puede agregar a su proyecto. Al hacer clic en un componente, se agrega al plano de diseño. Algunos componentes avanzados solo están disponibles para la serie inteligente. La siguiente imagen muestra los componentes disponibles para las diferentes series de pantallas.

Mapa de recursos: en el mapa de recursos, agrega imágenes, fuentes y datos de video y audio incluidos en los archivos de programa.

Código de evento: en esta sección puede definir el código del programa que se ejecuta cuando se utiliza un componente. Por ejemplo, puede definir qué debe suceder cuando se presiona un botón y qué debe suceder cuando se suelta ese botón.

Plano de la caja de herramientas: en el plano de la caja de herramientas, define los atributos del componente seleccionado. Estos atributos se dividen en dos categorías:

1. Puede cambiar en tiempo de ejecución
2. No se puede cambiar en tiempo de ejecución

Las siguientes imágenes muestran qué atributos pertenecen a cuál de las dos categorías. Los atributos más importantes que también se necesitan para el código del programa Arduino son «id» y «objname».

Esquema de página: con las pantallas de Nextion, puede crear páginas virtuales en las que puede mostrar información diferente. Su HMI necesita al menos una página que se agrega cuando crea un nuevo proyecto. También puede exportar e importar páginas para ahorrar tiempo y reutilizar diferentes tipos de páginas.

Plano de diseño: el plano de diseño es su ventana principal en la que diseña la interfaz con varios componentes que agrega con la caja de herramientas.

Si desea obtener información detallada sobre todas las funciones del editor Nextion, puede visitar el guía del editor.

El siguiente video muestra cómo crear un nuevo proyecto para mi pantalla y agregar una fuente, así como algunos componentes.

En el video ves los siguientes pasos que estoy dando. Estos pasos básicos lo ayudarán a comenzar con su primera interfaz.

1. Creé un nuevo proyecto y guardé el proyecto en mi disco.
2. Una vez creado el proyecto, elijo el modelo de visualización correcto y selecciono la dirección de visualización.
3. En el plan de recursos, pude agregar una fuente creada previamente, pero quería crear una nueva a través del generador de fuentes en la barra de menú de configuración.
4. La fuente creada se guarda en el disco y se agrega al proyecto actual.
5. Para este ejemplo, estoy creando un campo de texto y cambiando el texto y el ancho máximo del texto de 10 a 30. Si no hubiera creado una fuente antes, obtendría un mensaje de error.
6. También creé un botón y configuré el texto en botón, ¿qué es creatividad?
7. El último paso es comprobar si todo funciona en el depurador.

Cómo cargar una interfaz de Nextion Editor en la pantalla

La respuesta corta sería a través de una tarjeta micro SD, pero en realidad era un poco más complicado. El requisito básico para la pantalla Nextion es que la tarjeta SD debe estar en formato FAT32. Primero intenté usar una tarjeta micro SD de 64 GB, pero desafortunadamente cuando intenté formatear la tarjeta en Windows 10 no había opción para formatear la tarjeta micro SD de 64 GB en FAT32.

También intenté formatear la tarjeta SD a través de Windows PowerShell, pero tampoco funcionó y no quería instalar una aplicación de terceros solo para cambiar el formato de la tarjeta SD una vez.

Pero tuve la suerte de encontrar una tarjeta SD de 32 GB y el formateo a través de PowerShell esta vez funcionó con el comando: format / FS: FAT32 E: (E es el nombre del volumen de la tarjeta SD)

Una vez que la tarjeta SD está lista, necesitamos compilar nuestro código para asegurarnos de que el compilador no encuentre ningún error. Encontrará el botón de compilación en la caja de herramientas y la salida del compilador en el área de salida inferior izquierda del editor Nextion.

El siguiente paso en el editor Nextion es exportar el archivo TFT a la tarjeta micro SD. Haga clic en Archivo en el menú principal y seleccione Salida de archivo TFT. Ahora elige su tarjeta micro SD con formato FAT32 y exporta el archivo a la tarjeta. Si lo desea, puede verificar si el archivo TFT está en la tarjeta SD.

El último paso es colocar el carrito SD en la ranura para tarjetas SD de la pantalla Nextion. Después de encender la pantalla, verá que la pantalla reconoce la tarjeta SD y carga el archivo en la memoria interna de la pantalla.

Ahora te estas desconectando la pantalla de la fuente de alimentación y retire la tarjeta SD después de transferir el programa .tft.

El siguiente paso es preparar el IDE de Arduino para activar la conexión entre el microcontrolador basado en Arduino o ESP8266 y la pantalla Nextion.

Preparación del IDE de Arduino para pantallas de Nextion

Buenas noticias: los desarrolladores de Nextion han creado una biblioteca para Arduino y Raspberry Pi que facilita mucho la codificación. Lo malo es que esta biblioteca no está incluida en la búsqueda de la biblioteca IDE de Arduino. Por lo tanto, instalamos la biblioteca manualmente en 4 pasos:

1. Descargue la biblioteca Arduino para Nextion Display como un archivo ZIP del sitio oficial repositorio de github en una carpeta local de su elección.
2. Vaya a su carpeta de descargas y descomprima el archivo zip. Debería obtener una carpeta llamada: ITEADLIB-Arduino-Nextion-master
3. Cambie el nombre de esta carpeta a: ITEADLIB_Arduino_Nextion.
4. Mueva la carpeta ITEADLIB_Arduino_Nextion a su carpeta de bibliotecas de instalación de Arduino IDE. Si no sabe cómo es la carpeta de su biblioteca, puede buscar Arduino / Libraries y encontrar la carpeta, vea la siguiente imagen.

La biblioteca Nextion está configurada para Arduino Mega. Si está utilizando Arduino Mega para este proyecto, puede omitir el siguiente paso. Pero si usas por ejemplo un Arduino Uno, como yo, tenemos que cambiar las configuraciones de la biblioteca porque el Arduino Mega tiene dos series de hardware y el Arduino Uno por ejemplo solo una.

En la carpeta de la biblioteca, abra el archivo NexConfig.h y edite las siguientes tres líneas:

• Línea 27: línea de comentario con //
• Línea 32: línea de comentario con //
• Línea 37: cambie Serial2 a Serial

Ahora todo está configurado y podemos crear nuestro primer ejemplo básico. Después del ejemplo básico, les muestro un ejemplo más avanzado donde también usamos la función de programa de la propia pantalla Nextion.

Ejemplo básico de Arduino Nextion: aumentar el contador

El primer ejemplo es un ejemplo básico simple en el que aprende cómo agregar botones y usar un campo numérico para crear un contador con un botón de reinicio. Este ejemplo solo tiene una página para que sea sencillo. Si es nuevo en la pantalla de Nextion, este tutorial es para usted, pero si ya está avanzado, puede pasar al siguiente ejemplo donde le muestro un ejemplo más complejo.

Puede descargar todos los archivos que estoy usando en este ejemplo con el siguiente botón de descarga. Descarga un archivo zip que incluye el archivo TFT Nextion Editor, las fuentes utilizadas, una imagen y el script Arduino.

Haga clic aquí para descargar todos los archivos de ejemplo base de Nextion

Configuración de pantalla Nextion para mostrar el contador

Si aún no ha iniciado su editor Nextion, puede abrirlo ahora. Como en el video que le mostré al comienzo de este tutorial, el primer paso en un nuevo proyecto es seleccionar su pantalla Nextion y seleccionar la dirección de visualización horizontal o vertical. En el segundo paso, puede crear una o más fuentes para este proyecto. Creé dos fuentes, una con una altura de 16 y la segunda con una altura de 32 para mostrar texto un poco más alto.

También quiero mostrar una imagen en la pantalla. Por lo tanto, selecciono la imagen en el panel de recursos gráficos y mediante el botón «+» importamos un logotipo o imagen bitmap para la interfaz. Para mostrar la imagen en la pantalla, elijo la imagen de la caja de herramientas para agregar un marco de imagen a la interfaz. Ahora ha asignado la ID de imagen correcta al marco. Por lo tanto, establezca el parámetro Imagen en el plano de la caja de herramientas en 0.

También agrego todos los demás componentes que necesitamos en la caja de herramientas:

• 1 campo de texto
• 2 botones

Resumamos todos los componentes de este proyecto en la siguiente tabla. Si su ID es diferente, no importa, pero es posible que deba cambiar el script de Arduino del que hablaremos más adelante en este tutorial.

Objetivo	Nombre del objeto	Tipo	Identificación de la página	ID
Aumentar número	b0	Botón	0	1
Número de reinicio	b1	Botón	0	2
Mostrar imagen	p0	Imagen	0	3
Mostrar número	n0	Texto	0	4

Para cambiar el texto mostrado para los dos botones, hacemos clic en un botón y en el plano de la caja de herramientas debajo de txt colocamos el texto en “+” y “Reset”.

Ahora viene la parte más importante de este ejemplo. Necesitamos asegurarnos de que el Arduino sea notificado a través de UART cuando se presionan ambos botones. Por lo general, hay dos opciones cuando la pantalla envía la señal al Arduino:

• Se presiona el botón: Toque Presionar evento → PushCallback
• Se suelta el botón: toque Release Event → PopCallback

Dependiendo de su selección de esta opción, el código de Arduino también cambiará. Explico los cambios en la parte de programación. Quiero notificar al Arduino cuando se presione el botón. Por lo tanto, marqué la casilla «Enviar ID de componente» en el código de evento de los botones que ves en la siguiente imagen.

Ahora todo debería funcionar bien y estamos verificando la salida con el depurador. Debería tener una interfaz como la siguiente imagen.

Cableado entre Nextion Display y Arduino Uno

La siguiente imagen muestra la conexión UART entre la pantalla Nextion y el Arduino Uno que estoy usando para este ejemplo. En este proyecto, la energía se suministra a través de micro USB y la placa de prueba de energía que es parte del paquete Nextion.

Una vez que la interfaz está cargada en las pantallas y todas las partes conectadas, creamos el script Arduino.

Código Arduino para mostrar el contador en la pantalla Nextion

#include <Nextion.h>

// Declaración de componentes de la pantalla Nextion
// Formato de parámetros: (page_id, component_id, "nombre_componente")
NexButton btnIncrementar = NexButton(0, 1, "b0");
NexButton btnDecrementar = NexButton(0, 2, "b1");
NexNumber cajaNumero     = NexNumber(0, 4, "n0"); 

// Registro de componentes interactivos en la lista de escucha de eventos táctiles
NexTouch *nex_listen_list[] = {
  &btnIncrementar,
  &btnDecrementar,
  NULL
};

// Función de respuesta (callback) al pulsar el botón b0 (incrementar)
void btnIncrementarCallback(void *ptr) {
  uint32_t contador = 0;
  cajaNumero.getValue(&contador); // Lectura del valor actual en la pantalla
  contador++;                    // Incremento del valor
  cajaNumero.setValue(contador); // Envío del nuevo valor a la pantalla HMI
}

// Función de respuesta (callback) al pulsar el botón b1 (decrementar)
void btnDecrementarCallback(void *ptr) {
  uint32_t contador = 0;
  cajaNumero.getValue(&contador);
  if (contador > 0) {
    contador--;
  }
  cajaNumero.setValue(contador);
}

void setup() {
  // Inicialización de la comunicación serie de la librería Nextion (9600 baudios por defecto)
  nexInit();

  // Asignación de funciones callback a los eventos táctiles de presión (Push)
  btnIncrementar.attachPush(btnIncrementarCallback, &btnIncrementar);
  btnDecrementar.attachPush(btnDecrementarCallback, &btnDecrementar);
}

void loop() {
  // Escaneo continuo de eventos táctiles recibidos por el puerto serie
  nexLoop(nex_listen_list);
}

Como en cualquier otro script, lo primero que debemos hacer es incluir todas las bibliotecas que necesitamos. Para este ejemplo, solo necesitamos la biblioteca Nextion. A continuación, definimos los objetos Nextion en función de los componentes agregados en el editor. La lógica para agregar un objeto es la misma cada vez, lo que muestra la siguiente tabla.

Objeto	Nombre del objeto	=	Objeto	Identificación de la página	Identificación del componente	Nombre del componente
NexButton	b0	=	NexButton	0	1	b0
NexButton	b1	=	NexButton	0	2	b1
NúmeroEx	caja de números	=	NúmeroEx	0	4	n0

• Asunto: Asunto es el nombre de la biblioteca del componente Nextion que agregó a su editor. Por ejemplo, el componente de botón del editor es el objeto NexButton. Simplemente agregue «Nex» delante del componente.
• Nombre del objeto: puede elegir el nombre del objeto utilizado para invocar el objeto en pasos posteriores del script.
• ID de página: ID de la página, el componente está en el editor.
• ID de componente: ID de componente que puede buscar en el plan de la caja de herramientas.
• Nombre del componente: nombre del componente que también puede buscar en el dibujo de la caja de herramientas.

La siguiente tabla muestra la correspondencia entre el componente del editor Nextion y el objeto de la biblioteca Nextion Arduino.

Componente (Editor Nextion)	Objeto (Biblioteca Arduino)
Texto	NexText
Número	NexNúmero
Botón	NexBotón
Barra de progreso	NexProgressBar
Corte	NexCorte
Deslizador	NexDeslizador
Botón de doble estado	NexDSButton
Casilla de verificación	NexCheckbox

La siguiente parte del script es crear una lista de eventos táctiles llamada nex_listen_list para definir qué objetos generan un evento. En esto Por ejemplo, incluimos ambos botones y NULL también se incluye cada vez en esta lista.

Ahora, para cada elemento de nex_listen_list, necesitamos crear una función, que se llama cuando se genera el evento para ese objeto. La primera función que creamos es la función para b0 que aumenta el número de la pantalla. Me gusta dar a mis funciones un nombre estructurado predefinido. Es por eso que estoy llamando a la función b0PushCallback.

La función se llama para el objeto b0 y en el editor Nextion hemos definido que el componente debe tener un evento de pulsación táctil y no un evento de liberación táctil. El evento de presión táctil es el recordatorio de empuje y el evento de liberación táctil sería un recordatorio emergente.

Dentro de la función, la lógica del script es bastante simple. Primero creamos un número variable. Dentro de esta variable almacenamos el valor actual del objeto numberbox, que es el número que se muestra en el componente numérico. La función para leer el número es getValue. Después de aumentar la variable, el valor del componente numérico se establece en la variable aumentada con la función setValue.

La función del segundo botón b1 es aproximadamente la misma. La única diferencia es que no aumentamos la variable, sino que restablecemos la variable a 0.

Una vez definidas las dos funciones, creamos la función de configuración en el IDE de Arduino. Debido a que utilizamos la comunicación UART entre la pantalla Nextion y el microcontrolador, la velocidad en baudios se establece en 9600, que es la recomendada por Nextion. La biblioteca Nextion también se inicializa en la función de configuración. La última parte de la función de configuración es registrar funciones de devolución de llamada de eventos push o pop. La función de devolución de llamada pregunta: ¿Cuándo debo realizar las funciones predefinidas? Por lo tanto, adjuntamos el evento push a ambos objetos y definimos que si el evento ocurre, se deben llamar las funciones predefinidas.
Si no definiéramos eventos de pulsación táctil sino eventos de activación táctil, las funciones serían: b0.attachPop (b0PopCallback, & b0);

La función de bucle contiene solo una línea de código. En esta línea de código, definimos que en cada ciclo monitoreamos los eventos en la lista de eventos táctiles. Si ocurre un evento, se ejecuta la función de devolución de llamada de la función de configuración.

El siguiente video muestra cómo aumenta el número del contador y se puede restablecer con el botón de reinicio.

Ejemplo de conexión avanzada: luz y temperatura

Este ejemplo avanzado muestra cómo utilizar las capacidades de programación interna de las pantallas Nextion y cómo controlar las luces y ver la temperatura y la humedad de un módulo de sensor DHT11.

Puede descargar todos los archivos utilizados en este ejemplo (archivo TFT Nextion Editor, fuentes, código Arduino) como un archivo zip con el siguiente botón de descarga

Todos los componentes visuales, variables de memoria y el código C++ completo para reproducir este panel de control con termohigrómetro y botón táctil se detallan paso a paso en las siguientes secciones, sin depender de descargas externas.

Configuración de pantalla Nextion para mostrar la luz y la temperatura

Primero creamos la interfaz en el editor de Nextion. Así que cree un nuevo proyecto y seleccione su modelo de visualización. Para este ejemplo avanzado, estoy usando la orientación horizontal de la pantalla. Puede utilizar la fuente ya creada del ejemplo básico o crear una nueva. Las siguientes dos imágenes muestran la interfaz que queremos construir con dos páginas.

Página 0

Página 1

En la primera página, creamos dos cuadros de texto que permanecen estáticos a lo largo del ejemplo. Con el panel de la caja de herramientas, cambiamos el texto dentro de los cuadros de texto a «Light» y «bt0.value».

Debajo del texto claro, creamos un botón de estado dual y cambiamos el texto a «OFF». Con este botón queremos encender y apagar una luz. Dependiendo del estado de la luz, quiero cambiar el texto del botón. Esto podría hacerse a través del microcontrolador con las funciones getText y setText, pero queremos cambiar el texto directamente con las capacidades programables de la pantalla. Por lo tanto, en el panel de código de evento del editor, creamos una ecuación if simple que aprovecha el valor cambiante del botón de estado dual. Si no se presiona el botón de estado dual, el valor es 0 y el texto del botón se establece en «OFF». Pero en todos los demás casos, cuando se presiona el botón y el valor es 1, el texto cambia a «ON».

La modificación del valor del botón de estado dual también debe visualizarse en un componente digital. Creamos un nuevo componente digital debajo del otro campo de texto. Para mostrar el valor del botón de estado dual, simplemente establecemos el valor del componente digital en el valor del botón de estado dual cuando ocurre el evento de pulsación táctil.

También necesitamos enviar la identificación del componente al microcontrolador cuando se presiona el botón para encender la luz.
La siguiente imagen muestra el código en el panel de eventos del botón de estado dual.

El último componente que agregamos en la página 0 es un botón para ir a la página siguiente. Creamos un nuevo botón y lo colocamos en la parte inferior derecha de la pantalla. Puede cambiar el color del botón como lo hice en el esquema de la caja de herramientas y cambiar el texto a «Página siguiente». Por supuesto, tenemos que agregar la función para cambiar de página, cuando se presiona el botón. Esto se hace mediante el evento de pulsación táctil que se ve en la siguiente imagen. El pedido es una página con el ID de página de la página de destino.

También quiero enviar la identificación del componente cuando presione el botón en la página siguiente porque estoy usando este disparador para actualizar la temperatura y la humedad en la segunda página.

En la segunda página, creamos dos campos de texto y dos componentes numéricos. Cada campo de texto muestra el valor del sensor que se indica en los componentes digitales. Por diversión, también cambié el color de fondo de los componentes digitales.
Como quiero volver a la página 0 desde la página 1, creé un botón para volver a la página 0. El código es el mismo, pero la identificación de la página es 0.

Ahora todos los sitios y componentes están configurados y puede probar si todo funciona con la función de depuración del editor Nextion. Una vez que todo esté funcionando, puede compilar el proyecto y exportar el archivo TFT a la tarjeta micro SD.

Cableado entre la pantalla Nextion, Arduino y los sensores

La siguiente tarea es conectar la pantalla a su microcontrolador y todos los demás componentes. Estoy usando mi Arduino Uno como microcontrolador, el módulo sensor DHT11 para medir la temperatura y la humedad, así como el flash LED de 7 colores (KY-034) como luz. La siguiente imagen muestra cómo conectar todos los dispositivos.

Diagnóstico del Protocolo Serie UART de Nextion con Osciloscopio

La pantalla táctil inteligente Nextion delega todo el procesamiento gráfico en su propia CPU interna y se comunica con el microcontrolador mediante un bus serie asíncrono UART estándar. Cuando un proyecto no responde a las pulsaciones táctiles o el texto no se actualiza en pantalla, utilizar un osciloscopio digital permite aislar de inmediato si el fallo es eléctrico (alimentación o niveles) o de protocolo (encuadre o tramas corruptas):

• Estructura y Terminador de Trama UART (0xFF 0xFF 0xFF): Los comandos enviados a la pantalla se transmiten a 9.600 o 115.200 baudios en formato 8N1 (1 bit de START en nivel BAJO, 8 bits de datos LSB first y 1 bit de STOP en nivel ALTO). La pantalla Nextion exige de forma estricta que todo comando finalice con tres bytes de terminación en valor binario completo: 0xFF 0xFF 0xFF (tres caracteres hexadecimales 255 consecutivos). En el osciloscopio, activando la decodificación digital serie UART/RS232 en el canal TX del microcontrolador, se valida visualmente si el buffer serie está emitiendo estos tres bytes de cierre. Si falta tan solo un byte, la pantalla descarta la instrucción silenciosamente sin arrojar ningún aviso.
• Detección de Caídas de Tensión Transitorias (Voltage Sag): Al conmutar entre pantallas con fondos oscuros y fondos blancos brillantes, la demanda instantánea de corriente de los LEDs de retroiluminación provoca caídas de tensión bruscas en la línea de 5 V. Si conectas el canal 1 del osciloscopio a la línea de alimentación en acoplamiento AC (200 mV/div) con disparo por flanco de bajada, podrás medir el rizado transitorio. Si la tensión cae más de 300 mV respecto al valor nominal, la CPU de la pantalla ejecutará un reinicio térmico o por bajo voltaje (Brownout Reset).
• Verificación de Baud Rate y Deriva de Reloj: Utilizando los cursores de tiempo del osciloscopio en el bit de menor duración (T_b), se comprueba la velocidad en baudios real: a 9.600 baudios el ancho de bit debe ser exactamente T_b = 104,17 μs, mientras que a 115.200 baudios es de T_b = 8,68 μs. Una desviación de frecuencia superior al 2,5% (frecuente al emplear resonadores cerámicos de baja precisión en clones de Arduino) provocará errores de paridad y encuadre (Framing Errors).

En la siguiente tabla se comparan cuatro osciloscopios de laboratorio recomendados para auditar buses serie UART, decodificación digital y transitorios de alimentación en pantallas HMI inteligentes:

Modelo	Ancho de Banda	Canales	Muestreo	Memoria	Idoneidad para Pantallas Nextion y UART
Rigol DS1054Z	50 MHz (ampliable a 100 MHz)	4 analógicos	1 GSa/s	24 Mpts	Excelente: 4 canales para monitorizar simultáneamente 5V, GND, TX y RX de la Nextion en disparo único.
Siglent SDS1104X-E	100 MHz	4 analógicos	1 GSa/s	14 Mpts	Sobresaliente: decodificación serie UART, I2C y SPI por hardware incluida de serie con decodificación en color.
Hantek DSO2D10	100 MHz	2 analógicos + Generador	1 GSa/s	8 Mpts	Económico para laboratorio de banco con decodificación serie integrada básica y disparador de pulso.
FNIRSI 1014D	100 MHz (nominal)	2 analógicos	1 GSa/s	240 kpts	Uso aficionado; sin decodificación serie hardware (requiere medir anchura de pulsos con cursores).

Si deseas profundizar en la instrumentación de medida de señales digitales y puertos serie, consulta nuestra guía especializada sobre osciloscopios para proyectos con Arduino y ESP32, o compara los modelos recomendados en nuestra comparativa de osciloscopios digitales de sobremesa y osciloscopios USB para PC.

Código Arduino para mostrar la luz y la temperatura en la pantalla Nextion

Debido a que estamos implementando una gran cantidad de funciones de interfaz directamente en el editor Nextion, el script de Arduino no es muy complicado.

#include <DHT.h>
#include <Nextion.h>

// Configuración de pines hardware y sensor DHT11
#define PIN_DHT 7
#define TIPO_DHT DHT11
#define PIN_LED 6

DHT dht(PIN_DHT, TIPO_DHT);

// Declaración de objetos HMI de Nextion
NexDSButton botonLed = NexDSButton(0, 5, "bt0"); // Botón biestable táctil
NexText textoTemp    = NexText(0, 1, "t0");      // Etiqueta de texto de temperatura
NexText textoHum     = NexText(0, 2, "t1");      // Etiqueta de texto de humedad

NexTouch *nex_listen_list[] = {
  &botonLed,
  NULL
};

// Variable para temporización no bloqueante
unsigned long tiempoAnterior = 0;
const unsigned long INTERVALO_LECTURA = 2000; // Muestreo cada 2 segundos

void botonLedCallback(void *ptr) {
  uint32_t estadoLed = 0;
  botonLed.getValue(&estadoLed);
  digitalWrite(PIN_LED, estadoLed ? HIGH : LOW);
}

void setup() {
  pinMode(PIN_LED, OUTPUT);
  digitalWrite(PIN_LED, LOW);
  
  dht.begin();
  nexInit();
  
  botonLed.attachPush(botonLedCallback, &botonLed);
}

void loop() {
  // Escucha activa de eventos táctiles de la pantalla
  nexLoop(nex_listen_list);

  // Muestreo ambiental temporizado sin retardos bloqueantes (sin delay)
  unsigned long tiempoActual = millis();
  if (tiempoActual - tiempoAnterior >= INTERVALO_LECTURA) {
    tiempoAnterior = tiempoActual;
    
    float h = dht.readHumidity();
    float t = dht.readTemperature();
    
    if (!isnan(h) && !isnan(t)) {
      char bufferTemp[10];
      char bufferHum[10];
      
      dtostrf(t, 4, 1, bufferTemp);
      dtostrf(h, 4, 1, bufferHum);
      
      // Actualización de componentes de texto en la pantalla HMI
      textoTemp.setText(bufferTemp);
      textoHum.setText(bufferHum);
    }
  }
}

Al comienzo del script Arduino, incluimos las bibliotecas Nextion y DHT y definimos los pines donde se conectan el módulo DHT11 y el LED. Con el tipo de modelo DHT11 y el pin, creamos un objeto dht11module.

Como en el ejemplo para principiantes, creamos 4 objetos Nextion:

• Un botón de estado dual para encender y apagar el LED
• Un botón de la página 0 para actualizar la temperatura y la humedad.
• Dos objetos digitales para mostrar la temperatura y la humedad del módulo sensor DHT11

De los cuatro objetos, solo el botón de estado dual y el botón para acceder a la página siguiente activan un evento y, por lo tanto, se agregan a la lista de eventos táctiles.

Ahora definimos las funciones de la lista de eventos táctiles. La primera función del botón de estado dual crea una variable para almacenar el valor del botón de estado dual Expresar. Si el valor es 1, la luz se enciende mediante la función digitalWrite; de ​​lo contrario, el valor debe ser 0 y el botón de estado dual apaga el LED.

La función del botón en la página siguiente en la página 0 lee la temperatura y la humedad y establece los valores correspondientes para el número de objetos a medir.

En la función de configuración, la velocidad en baudios se establece en 9600 y el pin del LED se establece como salida. Luego, se inicializan el objeto DHT11 y la pantalla. Como en el ejemplo básico, las devoluciones de llamada para objetos en la lista de eventos táctiles se guardan como una devolución de llamada push.

La función de bucle contiene solo la línea de código para definir que en cada ciclo monitoreamos los eventos en la lista de eventos táctiles. Si ocurre un evento, se ejecuta la función de devolución de llamada de la función de configuración.

El siguiente video muestra cómo se enciende y apaga la luz. La temperatura y la humedad también se muestran en la segunda página de la interfaz.

Espero que hayas aprendido mucho sobre la visualización de Nextion en este tutorial. Si tiene alguna pregunta sobre las pantallas de Nextion en general o los ejemplos de este artículo, utilice la siguiente sección de comentarios para formular su pregunta. Responderé la pregunta lo antes posible.

Preguntas Frecuentes sobre Pantallas Táctiles Nextion