Pantalla Nextion NX3224T028 + Arduino UNO

Nextion es una solución Human Machine Interface (HMI) que proporciona una interfaz de control y visualización entre un humano, máquina y un proceso, Es la mejor solución para reemplazar la pantalla LCD tradicional.

Esta solución incluye hardware en parte de una serie de placas de TFT y otra de software que es el editor de Nextion. La pantalla Nextion sólo utiliza un puerto serie para hacer la comunicación. El editor Nextion tiene componentes masivos tales como botones, texto, barra de progreso, slider, panel de instrumentos, etc. para enriquecer el diseño de su interfaz. Es fácil de adaptar la familia Nextion HMI a los proyectos existentes, sólo tiene que proporcionar un protocolo UART.

Características:

Resolución 320 x 240
RGB 65K fiel a los colores de la vida
Pantalla TFT
Panel resistivo táctil
Fácil interfaz de 4 pines a cualquier TTL Host Serial
Memoria Flash 4M
Ranura para tarjeta micro-SD para actualización de firmware
Área Visual : 57.6mm x 43.2mm
Brillo ajustable: 0 ~ 180 nit,

En este tutorial se mostrara como diseñar un botón en el software de Nextion, sus configuraciones y como subir el programa en la pantalla así como la programación del Arduino para la recepción del comando para encender el LED

Materiales

Pantalla Nextion NX3224T028
Arduino uno
Memoria MicroSD (formateada a fat32)
Adaptador para MicroSD
Los materiales los puedes encontrar en www.hetpro-store.com
Software Arduino : Arduino
Nextion Studio: Software

Al abrir el programa de Nextion Studio, le damos click en “File>New”

Step 1: Configuración Tamaño.

En seguida se abrirá una nueva ventana donde se selecciona el tamaño de la pantalla Nextoin. Para este tutorial es de 320×240 y seleccionamos horizontal

Step 2: Paso 2: Imágenes

Paso 2: Imágenes

En esté espacio cargaremos todas las imágenes que se utilizaran en el programa. Para esté caso solo se necesitan dos una para el botón de encendido y otra de apagado.

Del lado izquierdo de la pantalla se encuentra el apartado “picture” junto con una serie de botones para agregar o eliminar imágenes, pulsamos el botón de “Add” arrojará una ventana nueva y se selecciona todas las imágenes que sean necesarias

*Nota: las imágenes deben de ser del mismo tamaño de la pantalla en caso contrario solo se mostrará una parte

Step 3: Paso 3: Configuración De La Pantalla 1

Paso 3: Configuración de la pantalla

Al centro de nuestro programa aparece un recuadro blanco esta simula nuestra pantalla, aquí podemos agregar imágenes, botones, texto, barras, etc.

Al hacer un click sobre la el recuadro aparecerá una tabla del lado derecho del programa, esta nos indica las configuraciones que están disponibles, nombre del objeto, tipo de variable, fondo y color.

Step 4: Paso 3: Configuración De La Pantalla 2

En el apartado “sta” que es para la configuración de fondo seleccionamos “image” y en “pic” se elige la imagen que se quiera que aparezca primero, en esté caso será para el el botón de apagado

Step 5: Paso 4: Crear Un Botón

En la pestaña “Add component” seleccionar la opción “botton” y aparecerá un recuadro gris que es el área donde se accionará el botón la cual es ajustable lo recomendado es hacerla del tamaño de la imagen del botón para que se active en cualquier área donde se presione

Quedará como se muestra en la siguiente imagen.

Step 6: Paso 5: Configuración Del Botón

Al seleccionar el botón aparecerá una tabla del lado derecho estas son las configuraciones del botón. Ingresa los valores que se muestran en la siguiente imagen. En “picc” es la imagen que aparecerá como botón, seleccionamos la misma imagen que se inserto al inicio esto para que quede oculto el botón. En “picc2” seleccionamos la imagen que aparecerá cuando se presione el botón que en este caso sera el botón de encendido, con esto ya está configurado el botón de para encender el LED lo que falta es generar otro para apagarlo.

Step 7: Paso 6: Crear Una Nueva Pagina

Del lado derecho del programa se encuentra un apartado llamado “page” presionamos el botón de “Add” y se generara una nueva pagina. En esta pagina hacemos nuevamente los pasos 3,4 y 5 solo que en este caso pondremos las imágenes contrarias. y las configuraciones del botón solo invertimos las imágenes en picc y picc2.

Step 8: Paso 7: Programación De Los Botones

En la parte inferior se encuentra una pestaña llamada “Touch Release Event” , en “User Code” le indicaremos que función debe realizar al presionar el botón.

Seleccionar el botón de la primera pagina y escribir “page 1″, después seleccionar el botón de la otra pagina y escribir “page 0″ y en ambos activar “Send Component ID” esto para que el Arduino reciba el dato por el puerto serial.

En mismo software de Nextion tiene un simulador de como se vería en la pantalla y con los datos que mandaría por el puerto serial.
En la parte superior se encuentra los botones “Compile” que te indicara si hay algún error en las configuraciones y “Debug” que dará inicio a la simulación.

Con esto ya queda la configuración de la pantalla Nextion, solo falta programar el Arduino para leer el puerto serial para que encienda y apague el LED que esta conectado al pin 13 del Arduino UNO.

Step 9: Paso 8: Cargar El Programa a La Pantalla

insertamos la tarjeta microSD en la computadora. seleccionamos “File>Open build folder”

Se abrirá una ventana con archivos tft. copiar y pegar el archivo a la tarjeta micoSD y retirarla.

*NOTA: La memoria no debe contener ningún otro archivo y debe estar formateada a FAT32.

Asegurarse que la pantalla Nextion no este alimentada y se inserta la microSD después de esto se conecta la pantalla. Inmediatamente indicara el proceso de carga del programa.

Una vez finalizada la carga mandara un un mensaje de “Update Sucessed!” en seguida se desconecta la pantalla y se retira la tarjeta microSD.
Se alimenta nuevamente la pantalla y ejecutara el programa que se ha creado.