Pantalla Nextion NX3224T028 + Arduino UNO

Crear un boton con pantalla Nextion NX3224T028 y Arduino

Nextion

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  para Código de usuario,  aplicaciones y datos
  • Ranura para  tarjeta micro-SD para actualización de firmware
  • Área Visual : 57.6mm x 43.2mm
  • Brillo ajustable: 0 ~ 180 nit, el intervalo de ajuste es de 1%
  • Consumo de  energía 5V65mA.

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  hetpro-store

Software Arduino :   Arduino

Nextion Studio:   Software



Paso 1:Crear un nuevo archivo

Nextion

PANTALLA PRINCIPAL NEXTION STUDIO

Al abrir el programa de  Nextion Studio, le damos click en «File>New»

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

Nextion

RESOLUCION EN PANTALLA

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

Nextion

IMAGEN CARGADA

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.

Nextion

CONFIGURACIÓN DE FONDO

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

Nextion

AGREGAR IMAGEN

 

Paso 4: Crear un botón

Nextion

CREAR UN BOTON

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.

Nextion

ESPACIO PARA PRESIONAR EL BOTON

 

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,

Nextion

CONFIGURACIÓN DEL BOTON DE APAGADO

 

Quedara de la siguiente manera

Nextion

VISTA DEL BOTÓN APAGADO

 

Con esto ya está configurado el botón de para encender el LED lo que  falta es generar otro para apagar lo.



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.

Nextion

CREAR UNA NUEVA PAGINA

En esta pagina hacemos nuevamente los pasos   3,4 y 5 solo que en este caso pondremos las imágenes contrarias

Debe de quedar de la siguiente manera

Nextion

VISTA DEL BOTÓN DE ENCENDIDO

y las configuraciones del botón solo invertimos las imágenes en  picc y picc2

Nextion

CONFIGURACIÓN DEL BOTÓN DE ENCENDIDO

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.

Nextion

CONFIGURACIÓN DEL EVENTO

 

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

debug

 

Ventana de simulación.

simulacion1

VISTA DEL SIMULADOR

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.

Paso 8: Cargar el programa a la pantalla

nextion_010

ABRIR EL ARCHIVO TFT

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.

PANTALLA NEXTION

CARGANDO EL PROGRAMA A LA PANTALLA NEXTION

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.

BOTON HETPRO

BOTÓN HETPRO

Paso 9: Programar el Arduino UNO

El siguiente código básicamente lee el puerto serial y según los datos recibidos mandara un estado alto o bajo al LED.

//codigo original http://blog.iteadstudio.com/
//declaracion de entradas y salidas
int led=13;
int char1,char2;
int charflag=0;

void setup() {
 Serial.begin(9600); //configuracion del puerto serial
 pinMode(led,OUTPUT);
}

void loop() {
 if (Serial.available()>0)
{
 if (charflag)
 {
 char2=Serial.read(); //lee el puerto serial y almacena el dato en char2
 if (char2==1) //
{
digitalWrite(13,HIGH);
}
 else if (char2==0x00)
{
 digitalWrite(13,LOW);
}
 charflag=0;
 Serial.print(char2);
 }
 else
 {
 char1=Serial.read();
 if(char1==0x65) charflag=1;
 }
}
}

Solo queda compilar y cargar el programa en el Arduino UNO.

En la parte de abajo se encuentran los archivos de la pantalla.

[youtube https://www.youtube.com/watch?v=ywD2c6wQVMw]
NEXTION_HETPRO


42 Comments

  1. refugio miranda febrero 18, 2016
    • Hector Torres febrero 22, 2016
      • refugio miranda febrero 26, 2016
        • Hector Torres febrero 29, 2016
        • Voncile enero 6, 2017
      • refugio miranda febrero 26, 2016
      • juan mayo 18, 2017
  2. Hafid Luna marzo 7, 2016
    • Eduardo Lara marzo 8, 2016
      • Hafid Luna marzo 8, 2016
  3. jofra abril 26, 2016
    • Hector Torres abril 26, 2016
      • jofra abril 26, 2016
      • jofra abril 26, 2016
        • Hector Torres mayo 4, 2016
        • Mike abril 20, 2017
        • Miguel abril 20, 2017
          • Jofra abril 20, 2017
          • Alejo mayo 10, 2017
    • Juan Fernando mayo 17, 2018
  4. Javi julio 18, 2016
  5. OswaldoSS septiembre 20, 2016
    • Saul Jesus septiembre 20, 2016
      • oswaldo noviembre 3, 2016
        • Saul Jesus noviembre 7, 2016
          • Johnetta enero 18, 2017
        • Lynsey enero 18, 2017
      • oswaldo noviembre 3, 2016
    • Jaylin enero 6, 2017
  6. Greivin Rodríguez Gómez octubre 22, 2016
    • John Florian febrero 1, 2017
    • John Florian febrero 8, 2017
  7. Nelly enero 6, 2017
  8. John Florian febrero 1, 2017
    • Saul Jesus febrero 22, 2017
  9. Ivan Rob febrero 16, 2017
  10. Diego agosto 5, 2017
  11. Scarlett Cisneros enero 23, 2018
    • Eduardo Lara enero 24, 2018
  12. Fer abril 7, 2019
    • Dr Hector Torres abril 8, 2019

Escríbenos tus dudas o comentarios

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Usamos Cookies en nuestro sitio WEB

Por favor confirma, si aceptas nuestras cookies de rastreo. También puedes negar el uso de cookies de rastreo y seguir navegando sin que ninguna información sea enviada a servicios de terceros.