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.

[code language=»c»]
//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;
}
}
}
[/code]

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


43 comentarios en «Pantalla Nextion NX3224T028 + Arduino UNO»

        1. Refugio, gracias, de echo fue un error de nosotros, el código ya la actualizamos puedes volver a intentar copiando el código y si puedes nos avisas si te funciono, gracias.

      1. en el ejemplo, porque manda un 0x22 con serial.write antes y después de mandar la variable que se imprime en el TEXT?
        Serial.print(«t0.txt=»); //variable de la pantalla que se va a modificar
        Serial.write(0x22);
        Serial.print(val); //manda el porcentaje de la entrada
        Serial.write(0x22);

        Lo que pasa es que yo no estoy utilizando un arduino para mandarle datos a la pantalla, estoy utilizando otro microcontrolador

  1. Buenas tengo un problema con su ejercicio concretamente en el paso 7 pues ala hora de compilar me aparece el siguiente error:

    Error:Page:page0 Error:b0.font InputVal Invalid:Invalid Font ID
    Error:Page:page1 Error:b0.font InputVal Invalid:Invalid Font ID
    Error:Compile failed! 2 Errors, 0 Warnings,

    mis pasos fueron los siguientes
    – para page0 posicionado en el B0 en la sección de Touch Release Event active la casilla de de Send Component ID y en la sección User Code escribí «page 1»

    – para page1 posicionado en el B0 en la sección de Touch Release Event active la casilla de de Send Component ID y en la sección User Code escribí «page 0»

    Donde podria estar el error?

    De antemano gracias

      1. Ya encontre el problema al parecer era una etiqueta en la seccion de TXT de configuracion del boton

        Muchas gracias por tomarte el tiempo Héctor Torres

          1. Hola, estoy tratando de probar el ejemplo, pero me sale el mismo error, en el campo txt que debo poner, porque el error persiste, ayuda por favor

    1. Buenas, tengo el mismo problema alguien me puede hacer el favor de decirme como se soluciona dejo copia del error

      Global Memory:0
      Total size of picture:460.800
      Total size of font:000.000
      Error: Page:page0 Error:b0.font InputVal Invalid:Invalid Font ID
      Error: Page:page1 Error:b0.font InputVal Invalid:Invalid Font ID
      Error: Compile failed! 2 Errors, 0 Warnings,

      mil gracias

  2. Buenas tardes Hector.

    Me surge una duda con el código en arduino, ¿Cómo le indicas que digito de la cadena de caracteres tiene que leer? La pantalla envía 7 dígitos hexadecimales.

    Gracias y un saludo.

  3. Buen dia! Una pregunta, hace algún tiempo les compre una pantalla nextion y quisiera conectar más de una pantalla a un arduino UNO. ¿Existe alguna forma de poderlo hacer?, es decir que dos o tres pantallas envíen y reciban información del mismo arduino.

    1. Hola buen dia si es posible pero tendrias que modificar la libreria serial o ver uno de nuestros tutoriales sobre este tema relizamos algo basico sobre esto

    2. Una manera de podes visualizar varias pantallas con un solo puerto en arduino es: comunicandote en vez de por serial, por modo 485, asi no interfieres al
      puerto. No se si esa era tu pregunta o la entendi mal
      saludos

  4. Buenas amigo, he ensayado su ejemplo y funciona muy bien, ahora quiero hacer un ejercicio donde se colocan varios botones en una sola pagina por ente la condicion char2==0x00 simpre se va a cumplir, ahora lo que toca es descriminar el boton que se preciona, ox65 0x00 «0x01» 0x00 0xff 0xff oxff, esto porque quiero poner varios botones dentro de misma pagina en la pagina0. Gracias

  5. saludos

    me gustaría realizar con esta pantalla nextion como variar la intensidad (PWM) de varios led, utilizando varias barras deslizadoras o varios botones mediante la pantalla. He visto varios ejemplos y lo he cargado a la pantalla y arduino pero no puedo integrarlos a mis códigos ya hechos en arduino. Sería de gran ayuda!

  6. Saludos, amigos de Hetpro. Recientemente compré una Nextion para algunos proyectos, pero me he topado con el detalle que no se cómo leer datos de USART en la pantalla, es decir, ¿cómo puedo leer algún valor mandado por el controlador en la pantalla? ¿podrían ayudarme? Gracias por adelantado.

  7. Hola.
    Ante todo darte las gracias por colgar este tipo de post que tan bien nos viene a los que estamos empezando. Querría preguntarte una cosa. Me ha quedad muy claro le pasa datos la pantalla al arduino, pero ¿como se comunica el arduino con la pantalla?. Por ejemplo, imagina que queremos poner un texto en una etiqueta. ¿como se lo mando a la pantalla para que lo haga?. Se entiende que utilizando tambien el puerto serie, sin librerías.
    Muchas gracias.

  8. Hola, buenas tardes, soy una chica novata en programación y me gustaría saber por que Char 2 == 0*00 y posteriormente se toma como Char==0*65??
    en ese momento se están leyendo los caracteres? o a que se refiere?
    la otra pregunta, es … si creo en la interfaz de nextion otro tipo de botón el cual no abarque toda la pantalla, aun así serviría el mismo programa para arduino uno?
    Les agradezco su atención, ojalá puedan responderme pronto.
    Saludos y gracias por el tutorial!

    1. Hola Scarlett Cisneros, en respuesta a tus dudas, «Char2» y «Char1» son dos diferentes datos, el «Char2» corresponde a la dirección y estado del botón virtual por eso solo es «1» o «0» , y «Char1» es la dirección del botón que es 0x65 en la foto del paso 7 se puede apreciar mejor en la última foto. Y respecto al programa si puedes utilizar el mismo, solo verifica que para «Char1» sea el mismo número. Saludos espero haberte ayudado

  9. hola recien me estoy familiarizando con la pantalla de nexion me a gustado mucho este post, estoy pensando en hacer un proyecto para mandar los datos de un sensor de color a la pantalla, como es que puedo hacer que la pantalla los muestre? Desde ya muchas gracias.

    1. Fer, para mandar datos del Arduino a la pantalla nextion, es solo imprimiendo en el serial. Por ejemplo yo use, un serial por software «HMISerial» y la etiqueta en el nextion se llama «tcn» estoy modificando el miembro «val».

      HMISerial.print(«tcn.val=»);
      HMISerial.print(temperature_control_value);
      HMISerial.write(0xff); //estos asi van.
      HMISerial.write(0xff);
      HMISerial.write(0xff);

  10. buena explicacion pero tengo algunas dudad.
    Se puede usar igualmente con un pic18f4550?
    si controlo un led con señales externas sensores y ademas le pongo condición or para manipularlo igualmente desde la pantalla se puede hacer eso?
    Se puede simular el funcionamiento de la pantalla desde la computadora en caso de no contar con la pantalla fisicamente?

    1. Sergio, si, la pantalla se controla mediante serial por lo que si puedes controlarla también con el PIC18F4550 sin problemas. Si puedes poner condiciones para manipular el LED solo que tienes que considerar que la pantalla va a mandar un mensaje por serial al micro y en función a ese mensaje ya tu condicionas el LED. También te comento que el software Nextion Studio tiene como un pequeño emulador de la pantalla para hacer algunas pruebas.

  11. Xose Manoel
    Buenos dias, me gustaria saber el comando que debo enviar desde un microcontrolador a
    la pantalla Nextion, el dato se debe visualizar en el objeto n1, pagina1 id 9.y el mensaje seria «conectado»

    Un cordia l saludo

  12. Hola!,
    tengo una situacion rara, tengo el software funcionando para Arduino con mi nextion, pero si conecto un Wemos / Lolin, el wemos no es capaz de escribir ni leer nada del Nextion. ¿podrias ayudarme?Porque puede ser?
    Gracias

    1. Hola, la pantalla nextion tiene que tener una fuente con suficiente suministro de corriente, tambien me parece que el lolin/wemos trabaja a 3.3, es posible que la nextion no funcione a ese voltaje. Tambien otra cosa que puedes checar es que si estes configurando correctamente la velocidad serial, en ambos dispositivos. El cableado tambien puede interferir.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *