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
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
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
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.
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
AGREGAR IMAGEN
Paso 4: Crear un botón
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.
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,
CONFIGURACIÓN DEL BOTON DE APAGADO
Quedara de la siguiente manera
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.
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
VISTA DEL BOTÓN DE ENCENDIDO
y las configuraciones del botón solo invertimos las imágenes en picc y picc2
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.
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
Ventana de simulación.
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
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.
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.
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
disculpa me comenta al copilar el programa que gt no esta copilado
Puedes copiar y pegar el error que te aparece? gracias.
si claro es este:
exit status 1
‘gt’ was not declared in this scope
un saludo
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.
Digo-vos uma coisa, esse caso é muito chato, sem dúvida, mas neste momento gostava que a Comissão pudesse fazer o mesmo à nossa Directora porque a mulher é louca, inconsciente e irp¡lronsÃeves.Além disso, também é burra e com tendências para cometer actos fraudolentos, e embora tal não constitua nenhum tipo de patologia psiquiátrica, «a gente» por uma questão de salvaguarda, já colocámos a CE de sobreaviso, até porque neste momento não podemos confiar no juÃzo dela.
si claro es
exit status 1
‘gt’ was not declared in this scope
saludos!
hola el software de nextion editor vale para cualquier pantalla tft o solo puede ser para las llamadas nextion?
Solo las nextion Juan. Puedes adquirirlas en nuestra tienda virtual http://www.hetpro-store.com Saludos.
Buenas tardes, como puedo leer por el rx de la pantalla los datos que estén llegando para imprimirlos en algún label
Que tal Hafid, puedes revisar el siguiente tutorial donde se lee una entrada analógica del arduino y lo muestra en la pantalla
https://hetpro-store.com/TUTORIALES/progress-bar/
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
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
¿Si copias tal cual el código te marca el mismo error?
incluso si copio tal cual el código indicado en el paso 7 el problema persiste
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
Gracias a ti por confirmar tambien, Saludos.
hola hermano oyes me gustaria saber en que parte del codigo tuviste error y si me puedes ayudar, tengo el mismo problema gracas
Disculpa como lo solucionaste, ese error me pasa a mi tmb
Tienes que darle un nombre el apartado txt por que lo que va a leer el arduino es ese carácter
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
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
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.
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.
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
Gracias, ya resolví mi duda. Esto tambien lo podría hacer con un arduino DUE que cuenta con 4 puertos RxTx.
Mientras se cumpla con los requerimientos si debe
Mateus Lima disse:Poucas coisas conseguem traduzira a selia&ccedsn;ão que é fazer parte do mundo de Fallout. Eu não consigo passar isso descrevendo um jogo, eu descrevo sempre um mundo, um universo completo o suficiente pra você por vezes esquecer que se trata de um jogo apenas e que você só quer fazer missões. Acho que o texto passa isso de maneira fantástica. Vou recomenda-lo pra quem quiser um dia sair do Vault! =P
(upma, kichidi, idlis etc.), thali lunch and dinner. We also got to experience the bucolic rural Masrarhhtaa. The rooms were very basic, which mattered less as we got back to our rooms around 10:00 pm, and
Gracias por la información, También se puede resolver con un Arduino DUE que trae 4 puertos RxTx
With havin so much content do you ever run into any problems of plagorism or copyright violation? My site has a lot of unique content I’ve either authored myself or outsourced but it looks like a lot of it is popping it up all over the internet without my peiimssron. Do you know any ways to help reduce content from being ripped off? I’d genuinely appreciate it.
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
saludos
me gustaría hacer lo mismo recibió alguna respuesta?
Me gustaría saber si pudo lograr lo de colocar múltiples botones?
si lo Logro podría compartir el código?
Congratulations to you and your husband, such great news! Your positivity is such an inspiration, love your blog and channel. Happy Thndesgiving!Anareka
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!
Hola lo sentimos no tenemos mas informacion sobre el equipo
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.
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.
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!
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
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.
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);