Tutorial de pantalla Arduino Nextion

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 ”.

. . . . . . . . . . . . . . . . . . . . .

R – Tipo de pantalla táctil: R = tacto resistivo, C = tacto capacitivo

La siguiente tabla le brinda una descripción general de todos los componentes y partes que utilicé para este tutorial. Recibo comisiones por compras realizadas a través de los enlaces de esta tabla.

Serie	Modelo	Tamaño de la pantalla	Resolución	Panel táctil	MCU	Flash	RAM	Precio
Básico	NX3224T024	2. 4″	320*240	RTP	48MHz	4MB	3584Byte	16,4$
Básico	NX3224T028	2. 8″	320*240	RTP	48MHz	4MB	3584Byte	18,4$
Básico	NX4024T032	3. 2″	400*240	RTP	48MHz	4MB	3584Byte	22,4$
Básico	NX4832T035	3. 5″	480*320	RTP	48MHz	16MB	3584Byte	27,4$
Básico	NX4827T043	4. 3″	480*272	RTP	48MHz	16MB	3584Byte	44,9$
Básico	NX8048T050	5. 0″	800*480	RTP	48MHz	16MB	3584Byte	64,9$
Básico	NX8048T070	7. 0″	800*480	RTP	48MHz	16MB	3584Byte	74,9$
Mejorado	NX3224K024	2. 4″	320*240	RTP	48MHz	16MB	3584Byte	20,4$
Mejorado	NX3224K028	2. 8″	320*240	RTP	48MHz	16MB	3584Byte	22,4$
Mejorado	NX4024K032	3. 2″	400*240	RTP	48MHz	16MB	3584Byte	27,4$
Mejorado	NX4832K035	3. 5″	480*320	RTP	108MHz	32MB	8192Byte	32,4$
Mejorado	NX4827K043	4. 3″	480*272	RTP	108MHz	32MB	8192Byte	49,9$
Mejorado	NX8048K050	5. 0″	800*480	RTP	108MHz	32MB	8192Byte	71.9$
Mejorado	NX8048K070	7. 0″	800*480	RTP	108MHz	32MB	8192Byte	81.9$
Mejorado	NX8048K070-011R	7. 0″	800*480	RTP	108MHz	32MB	8192Byte	88$
Mejorado	NX8048K070-011C	7. 0″	800*480	CTP	108MHz	32MB	8192Byte	108$
Intelligent	NX8048P070-011R	7. 0″	800*480	RTP	200MHz	128MB	512KB	77,9$
Intelligent	NX8048P070-011R-Y	7. 0″	800*480	RTP	200MHz	128MB	512KB	85,9$
Intelligent	NX8048P070-011C	7. 0″	800*480	CTP	200MHz	128MB	512KB	84,9$
Intelligent	NX8048P070-011C-Y	7. 0″	800*480	CTP	200MHz	128MB	512KB	103,9$
Intelligent	NX1060P101-011R-I	10. 1″	1024*600	RTP	200MHz	128MB	512KB	119,9$
Intelligent	NX1060P101-011C-I	10. 1″	1024*600	CTP	200MHz	128MB	512KB	129,9$

Arduino Nano	Amazon	AliExpress
Arduino Pro Mini	Amazon	AliExpress
Arduino Uno	Amazon	AliExpress
Arduino Mega	Amazon	AliExpress
Pantalla Nextion	Amazon	AliExpress

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.

https://youtu.be/1q6P3DqJLSs

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 plan de recursos y con el signo más rojo agregué el logotipo del pantano DIYI0T como imagen. 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"

// Nextion Objects
// (page id, component id, component name)
NexButton b0 = NexButton(0, 1, "b0");
NexButton b1 = NexButton(0, 2, "b1");
NexNumber numberbox = NexNumber(0, 4, "n0"); 

// Register objects to the touch event list
NexTouch *nex_listen_list[] = {
  &b0,
  &b1,
  NULL
};

//Increase the number
void b0PushCallback(void *ptr) {
  uint32_t number;
  numberbox.getValue(&number);
  number++;
  numberbox.setValue(number);
}

//Reset the number
void b1PushCallback(void *ptr) {
  uint32_t number;
  numberbox.getValue(&number);
  number = 0;
  numberbox.setValue(number);
}

void setup() {
  Serial.begin(9600);
  //Initialize Nextion Library
  nexInit();

  // Register the push/pop event callback function
  b0.attachPush(b0PushCallback, &b0);
  b1.attachPush(b1PushCallback, &b1);
}

void loop() {
  //When push/pop event occured execute component in touch event list
  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.

https://youtu.be/XV4LunhwFKM

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

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

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.

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"

#define DHT11modulePIN 7        // define the digital I/O pin
#define DHT11moduleTYPE DHT11   // DHT 11 module
#define LEDPIN 6                // define the digital I/O pin

DHT dht11module(DHT11modulePIN, DHT11moduleTYPE);

// Declare Nextion objects
// The the following informations from Nextion Editor
// (page id, component id, component name)
NexDSButton bdslight = NexDSButton(0, 2, "bt0");
NexButton nextpage0 = NexButton(0, 1, "b0");
NexNumber ntemp = NexNumber(1, 4, "n0"); 
NexNumber nhum = NexNumber(1, 4, "n1"); 

// Register objects to the touch event list
NexTouch *nex_listen_list[] = {
  &bdslight,
  &nextpage0,
  NULL
};


void bdslightPushCallback(void *ptr) {
  uint32_t dual_state;
  bdslight.getValue(&dual_state);
  if(dual_state) 
  {
      digitalWrite (LEDPIN, HIGH); // set the LED on
  }
  else
  {
      digitalWrite (LEDPIN, LOW); // set the LED off
  }
}


void nextpage0PushCallback(void *ptr) {
  float h11module = dht11module.readHumidity();
  float t11module = dht11module.readTemperature();
  nhum.setValue(h11module);
  ntemp.setValue(t11module);
}


void setup() {
  Serial.begin(9600);
  pinMode (LEDPIN, OUTPUT);
  dht11module.begin();

  nexInit();
  // Register the push/pop event callback function
  bdslight.attachPush(bdslightPushCallback, &bdslight);
  nextpage0.attachPush(nextpage0PushCallback, &nextpage0);
}

void loop() {
  nexLoop(nex_listen_list);
}

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.

https://youtu.be/oJEuej1cPE4

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.