Nextion/ Pulsador Con Enclave: 16 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:02

Lo primero que debemos tener son los materials necesarios que vamos a utilizar los cuales son:

1.- Arduino uno

2.- Pantalla Nextion (la que tengas no importa el tamaño de tu Nextion)

3.- 1 Led de tu colore preferito

4.- 1 resistenza da 220 ohm

5.- Circa 10 cavi dupont o jumper o semplici cavi per protoboard

6.- 1 scheda prototipi

7.-1 tarjeta de memoria SD con adattatore, ya sea para usb o Micro sd

8.- cavo usb per collegare tu arduino

Passaggio 1: Hacer Las Conexiones De Nuestra Nextion, Arduino, Led Y Resistencia

Como podemos observar en la imagen tenemos 4 cable que salen de Nextion en el orden de: negro, amarillo, azul y rojo, leídos de izquierda a derecha.

Negro= GND (Terra o terra).

Amarillo= RxD (pin digital para riceve los datos por serial que serán enviados por arduino).

Azul= TxD (pin digital per salvare i dati da seriale a Arduino)

Rojo = Alimentación de voltaje de 5 voltios (tener en mente que un voltaje mayor dañara nuestra pantalla Nextion), pueden ser tomados de nuestro Arduino en el pin de 5v.

Tomamos tierra y voltaje de nuestro Arduino uno, de los pines GND e 5V rispetivamente, conectamos nuestro led al pin 2 digital de nuestro Arduino, seguido de una resistencia de 220 ohms (puedes calcular la resistencia necesaria para tu led si deseas, pero en este caso se uso la 220 ohm si tu led es naranja brillante).

conectamos los pines de Rxd y TxD de Nextion a los pines de Arduino de la siguiente forma:

RxD di Nextion -------- TxD di Arduino.

TxD di Nextion -------- RxD di arduino

Fase 2: Seleccionamos Nuestras Imágenes Para Generar Nuestro Boton

Seleccionaron les immagini anteriori, e tutti i podemos ver son dos pulsadores de la misma forma pero con diferente color, para simular el encendido y apagado cambiando l'immagine.

Le immagini sono state registrate e acopladas a la media dei pixel di nuestra Nextion nel mio caso per la Nextion " NX3224T024_011" di 2.4 pollici e il formato dei pixel es 320 X 240.

Fase 3: Recortar Las Imágenes Y Acoplarlas Al Tamaño De Nextion

Se utilizo paint para modificar, recortar y acoplar a las medidas, también lo puedes hacer en Adobe Ilustrator o Photoshop; incluso para hacer una imagen mas a tu gusto, recordando que deberá tener el tamaño en pixeles de 320 X 240, tal y como se muestra en la imagen 2 del recorte del pulsador verde.

Passaggio 4: sono un editor Nuestro Nextion

En caso de no tener nextion editor puedes descargarlo en la pagina:

nextion.itead.cc/resources/download/nextio…

l'installazione es muy fácil o bien puedes ver mi tutorial para descargar e instalar Nextion editor.

Passaggio 5: Abrir Nextion Editor

Después de abrir Nextion Editor, seleccionamos el apartado de file y new, nos abrirá una pestaña para nombrar nuestro nuevo proyecto.

Passaggio 6:

Guardamos nuestro proyecto con el nombre que deseemos en mi caso escogí el nombre de "pulsador1", después se debe de escoger la pantalla Nextion con la que vamos a trabajar la cual es:"N3224T024_011", que viene al reverso de tu pantalla Nextion en letras color blanco (checar en caso de tener una diferente).

Una vez es seleccionado el dispositivo o "device" come la muestra la imagen deberemos seleccionar, la dirección del display, se escogió la opción de 90 grados "horizontal", así sera como visualicemos nuestra pantalla con una rotación de 90 grados con rispetto a la verticale.

Le damos a "ok" e nos abrirá una nuova pagina in Nextion Editor nel centro se si osserva la pantalla a trabajar con il tamaño de nuestra Nextion 320 X 240.

Aggregaremos nuestras imágenes para el pulsador, previamente registrate e acopladas a los pixeles de nuestra Nextion, e l'opzione di aggiungere in una parte media inferiore con il segno "+" e l'opzione di immagini come se muestra en l'immagine 4 di questa sezione.

Aggregaremos también una fonte de letra per il nuovo programma Nextion Editor no nos arroje ningún error, esta agregado en este paso el archivo con el nombre de "fuente1.zi", per inserirlo deberás seleccionar "fonts" a un lado de la sección donde agregamos las imágenes (parte inferior izquierda de Nextion Editor) como lo muestra la quinta imagen en esta sección.

Passaggio 7: Agregamos Un Boton Tipo "Dual-State"

Una vez que las imágenes están en su sitio correcto así come también la fuente (del tipo de letras), agregamos un boton del tipo "dual-state" come la muestra la primera imagen.

Lo extenderemos a lo largo y ancho de la pantalla Nextion, deberá quedar come en la seconda imagen abarcando los 320 x 240 pixeles.

Fase 8: Seleccionamos Y Agregamos Nuestras Imágenes

En el apartado de atributos del botón, (nos aparecen seleccionando el botón agregado con doble click o aparecerá por default.), selectonaremos en la parte de "sta" l'opzione de "image" come lo muestra la imagen.

Per difetto se encontrara en "solid color", es por eso que deberemos escoger la opción de "image"

Passaggio 9: Una Vez Configurada Nuestra Opción De "image"

Procedere a un escoger en el apartado de pic0 la imagen con el botón color rojo (para apagado), e per el apartado de pic1 l'imagen con el botón green (para encendido).

Recordando que la imagen 0 o pic0 debe ser la color rojo debido a que nuestro led y botón comenzaran en esta posición (apagado) y que una vez presionado deberá cambiar a la imagen que se encuentra en pic1 la cual es de botón encendido.

Fase 10: Borramos El Texto Que Se Encuentra En El Centro De Nuestra Pagina

Para borrar el texto que se encuentra en el centro de nuestra page (page0) y botón(bt0), selector el texto en el apartado de "txt" y procederemos a borrar todas letras, hecho esto daremos un enter para confirmar, tal y come lo muestra en la imagen.

Step 11: Seleziona "touch Press Event"

Un passo molto importante è seleccionar en el apartado de "Event" que nos envié la trama de datos por Serial para que arduino "sepa" que fue presionado el botón de nuestra pantalla Nextion, para hacer esto deberemos dar un click a nuestro botón (bt0) e inmediatamente en la parte central inferior de Nextion Editor sobre el apartado de "event" y "touch press event" deberemos seleccionar el recuadro de "Send Component ID" tal y come se muestra en la imagen, dicho esto pasaremos a hacer un debug para corroborar que non esiste un errore.

Passaggio 12: Hacer Debug e Corroborar Que Envie El Id Por Serial

se proseguirá a hacer un debug en el icono con el mismo nombre "debug" simulando que se encuentra cargado en nuestra pantalla Nextion, deberás corroborar que en el apartado de "Simulator Return" tenga una trama di 7 dati che serán enviados por serial. los datos deberán de ser los siguientes: 65 00 01 01 FF FF FF que como podrás observar son datos en hexadecimal.

Per maggiori informazioni sulla trama dei dati dell'area successiva visita la pagina:

nextion.itead.cc/resources/documents/instr…

El primer dato "65" nos imprime si esiste un errore en este caso 65 significa que non esiste errore alguno.

Il secondo dato "00" non dice che la pagina proviene dall'evento che è questo caso della pagina 0.

Il terzo dato "01" non dice che il componente se envía l'evento, questo è il caso del pulsante o del pulsante "Dual-state" che sono configurati

El cuarto dato "01" nos dice lo que envía el boton1 en este caso que fue presionado.

Los datos FF FF FF son datos de terminatoción de la trama (configuración de Nextion)

Fase 13: Guardar El Proyecto Listo Para Subirlo a Nextion

Una vez corroborado con el debug de que no existe ningún error y que la trama de datos la envía sin problemas, procederemos a darle clic a "file" y luego a "Open Build Folder" para seleccionar el nombre de nuestro documento, que estará generado con l'estensione.tft per cargarlo a Nextion per medio de la memoria micro sd.

una vez encontrado nuestro archivo se deberá pasar a la memoria SD, en la cual no debe existir ningún otro tipo de archivo(como lo muestra la tercera imagen de la sección), y debe estar previamente formateada(Fat32).

También puedes descargar el archivo de boton1 que se encuentra al final de este paso en donde encontraras el archivo.hmi y el.tft.

Passaggio 14: Programma di Arduino

Il programma di Arduino, non es muy complejo pero esiste varios puntos que quiero resaltar, en el primer apartado observaremos una librería llamada Software Serial que se encuentra en modo de comentario, esa parte del programa esta deshabilitada. en caso de necesitar habilitarla quitar comentarios en las lineas de código que tienen la leyenda de (quitar de comentario si se va a usar la libreria software serial).

¿Por que esta deshabilitada esta parte? debido a que para cargar el programa a Arduino utilizas la comunicación serial que es convertida de usb-serial por medio de la electrónica que contiene Arduino, es necesario desconectar momentáneamente los pines de tx y rx que se comunican con Nextion ya que es posible que no Cargue a nuestro Arduino o exista problemas con la comunicación, una vez subido el programa puedes volver a conectar en el orden mencionado en el paso 1 los pines de TxD y RxD, utilizar la libreria Software Serial nos evita hacer esas Desconexiones ya que no interviene direttamente en los pines TxD e RxD de nuestro Arduino generando una comunicazione seriale "virtuale" en los pines 10 e 11, RX, TX, rispettivamente.

Il programma funziona perfettamente in modo semplice caricando il codice a Arduino e scollegando i pini RX e TX, per nuovi collegamenti, una volta terminata l'operazione di subir el codice a Arduino.

Passaggio 15: Pasar El Archivo.tft De La Memoria Micro Sd a Nextion

EL ultimo paso e pasar nuestro archivo generado en extensión.tft a nuestra nextion, para hacer esta operación deberás insertar la memoria micro sd en tu nextion apagada (preferentemente no conectada de ningún cable de alimentación o comunicación, desconectar el plug de cable), conectar el plug de cable de alimentación, nos aparecerá la pantalla completamente en blanco con letras rojas indicándonos el porcentaje de copiado de tu archivo, una vez terminatodo deberá tener el 100% dell'archivo copiado, en ese moment desconectamos nuevamente nuestra Nextion del plug que la alimentare y comunica, sacamos la memoria Micro SD y procedemos a conectar y listo tu proyecto debera funcionar sin problema alguno (antes de correr en arduino o probar, hacer un reset en este).