1. Introducción

Te damos la bienvenida a este tutorial detallado en el que exploraremos cómo utilizar una pantalla Nextion de 2.4 pulgadas en conjunto con Arduino para manipular el estado de un LED. A lo largo de esta guía, nos adentraremos en el diseño de una interfaz gráfica atractiva y funcional utilizando el intuitivo editor de Nextion. ¡Prepárate para sumergirte en este emocionante proyecto de electrónica y programación!

 

2. ¿Qué es Nextion?

Nextion es una solución de Interfaz Humano-Máquina (HMI) que proporciona un medio de control y visualización entre un humano y un proceso, máquina, aplicación o dispositivo. 

Nextion incluye una parte de hardware (una serie de placas TFT) y una parte de software (el editor Nextion). La placa TFT de Nextion usa solo un puerto serie para comunicarse, lo que evita la necesidad de un cableado complicado. Muchos ingenieros tienden a pasar mucho tiempo en el desarrollo de aplicaciones sin obtener resultados satisfactorios. En este contexto, el editor de Nextion ofrece numerosos componentes como botones, textos, barras de progreso, deslizadores, paneles de instrumentos, etc., para enriquecer el diseño de la interfaz. Además, su función de arrastrar y soltar garantiza que se pase menos tiempo programando, lo que puede reducir en un 99% la carga de trabajo de desarrollo. Gracias a este editor WYSIWYG, diseñar una Interfaz Gráfica de Usuario (GUI) es sumamente fácil.

3. Materiales Necesarios

1. Pantalla Touch Nextion 2.4
2. Arduino uno
3. Un convertidor USB-Serial para este tutorial usamos el CP2102
4. 4 cables dupond macho - macho

4. Configuración del Entorno de Trabajo

Hay dos formas de programar la pantalla Nextion una es usando una tarjeta microSD y la otra forma es usar cualquier convertidor USB-Serial tal como lo haremos en este tutorial.

El primer paso es instalar el driver del convertidor, dependiendo el chip que use tu convertidor sera el que debes instalar, para el CP2102 lo puedes descargar aquí.

Si esta bien instalado en el administrador de dispositivos debe aparecerte algo asi:

Para el arduino será necesario instalar la librería ITEADLIB_Arduino_Nextion de código abierto que ofrece una manera sencilla de interactuar con las pantallas seriales de Nextion, te dejamos un link de descarga aquí. 

Para instalarla basta con ir al IDE de Arduino y en Sketch>Include Library>Add .ZIP Library. Después debemos modificar el archivo NexConfig.h que se encuentra en la ruta \Documents\Arduino\libraries\ITEADLIB_Arduino_Nextion-master.

Busca esta parte:

Copiar código

y cambia por esto:

Copiar código

 

Ahora instalaremos el editor desde la página de Nextion.

 

Conectamos la pantalla Nextion al convertidor serial, el cable amarillo RX lo conectamos a TX del convetidor y el cable azul TX al RX del convertidor.

 

5. Diseño de la Interfaz Gráfica

Lo primero es abrir un nuevo archivo y guardarlo, nos pedira el modelo de nuestra pantalla.

También debemos ingresar la orientación que deseamos en este caso usamos horizontal 90.

Se abrira una página en blanco que es la representación de la pantalla Nextion y podemos cambiar el color, tanto si queremos que sea sólido o una imagen.

Ahora agregaremos una imagen en la parte inferior izquierda en el signo rojo de "+", dicha imagen no debe sobrepasar el tamaño de nuestra pantalla, aquí tienes un link con una herramienta para redimensionar tus imagenes. También te proporcionamos las que se usaron en este tutorial aqui. Agregalas antes de seguir.

En la caja de herramientas presionamos en Button.

 Se creara el área donde estara el botón y en la esquina inferior podemos modificar las propiedades, cada elemento tiene un nombre de objeto, los botones se van agregando como b0,b1,b2 etc, tienen un id que los identifica, podemos cambiar su posicion en x y, y su tamaño.

En las propiedades cambiaremos en sta a "image".

"pic" y "pic2" son las imagenes que apareceran antes y después de presionar el boton en este caso seleccionamos la imagen de logo en los dos campos.

"txt" es el texto que va escrito dentro del botón, lo dejamos en blanco.

Se vera asi: 

 En la ventana Event hay dos eventos, uno es cuando se presiona el botón y otro es cuando se suelta, escribiremos el comando "page 1" para que al apretarlo nos redirija a la pagina uno.

Ahora agregamos una nueva página:

Tendremos un botón para regresar a la página anterior y otro para cambiar el estado del led.

Agregamos un nuevo botón y lo ponemos en la esquina, en "pic" y "pic2" ponemos la imagen de la flecha y desde Event redirigimos hacia la página cero.

Agregamos un botón del tipo Dual-state button  y lo ponemos al centro de la página. En "pic" seleccionamos la imagen de ON y en "pic2" la de OFF 

En la ventana de eventos, en Touch Press event y Touch Release Event activaremos la casilla "Send component ID" para que mande por serial al arduino la información de que se presionó el botón.

Agregaremos una fuente ya que de lo contrario nos generara un error , desde Tools>Font Generator, basta con escribirle un nombre y guardarla. Nos pregunta si la agregamos y le damos en si.

Guardamos y presionamos Compile y en Debug.

Se abrira una simulación y probaremos que dando clic en el logo cambie  la siguiente pagina, presionando la flecha a la página anterior  cuando presionemos el boton de prendido y apagado en la ventana inferior nos dara los datos que pasara al arduino por por puerto serial, estos son: 

65 significa que no hay error

01 es la página

02 es el ID del componente

01 es el estado, debe mandar 1 y despues 0

No nos debe marcar ningún error

 

 Cerramos esa ventana y presionamos en UPLOAD, seleccionamos el puerto y subimos el programa con "Go".

En la pantalla aparece algo asi:

6. Conexión con Arduino

Para usar la pantalla con Arduino uno hace falta conectar de la siguiente manera:

Cable azul TX Nextion------------> pin 0 RX

Cable amarillo RX Nextion-------> pin 1 TX

GND------------------------------------> GND

V++-------------------------------------->5V

Lo mas recomendable es usar una fuente externa para la pantalla.

7. Código Arduino para Interactuar con Nextion

Código Copiar código

 

Este código de Arduino está diseñado para interactuar con una pantalla Nextion y controlar el estado de un LED conectado al pin 13 del Arduino donde esta el LED incluido en la placa.

Aquí está lo que hace cada parte:

1. #include <Nextion.h>: Incluye la biblioteca Nextion para permitir la interacción con las pantallas Nextion.

2. NexButton b0 = NexButton(1, 2, "bt0");: Define un objeto botón b0 para la pantalla Nextion. Los parámetros especifican la página (1), el ID del componente (2) y el nombre del componente ("bt0") en el software del editor Nextion.

3. NexTouch *nex_listen_list[] = {&b0, NULL};: Crea una lista de punteros a los objetos de la pantalla Nextion que quieres escuchar para eventos de interacción. En este caso, solo hay un objeto, b0.

4. volatile bool estado = true;: Define una variable estado para mantener el estado actual del LED.

5. void setup(void) {...}: Esta función se ejecuta una vez al inicio. Inicia la comunicación con la pantalla Nextion, configura el pin 13 (donde se supone que está conectado el LED) como salida, y adjunta una función de devolución de llamada, b0PopCallback, que se ejecutará cuando el botón b0 se presione (evento "pop").

6. void loop(void) {...}: Esta función se ejecuta continuamente después de setup(). Llama a nexLoop(nex_listen_list), que verifica si ha ocurrido algún evento de interacción en los objetos de la lista nex_listen_list.

7. void b0PopCallback(void *ptr) {...}: Esta función de devolución de llamada se ejecuta cuando se presiona el botón b0 en la pantalla Nextion. Cambia el estado del LED y luego actualiza el estado del LED en el pin 13.

En la librería puedes encontrar varios ejemplos con todas las funciones disponibles.

Al presionar el boton podrás ver como prende y apaga el LED.

Conclusión

Las herramientas proporcionadas por Nextion no solo aceleran el proceso de desarrollo de la interfaz, sino que también nos brindan la capacidad de diseñar interfaces más estéticas y de alta calidad. Gracias a Nextion, la creación de interfaces de usuario visualmente atractivas y eficientes es más accesible que nunca.