Nextion / Pulsador Con Enclave: 16 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:13

El primer que haurem de tenir els materials necessaris que vulguem utilitzar els quals son:

1.- Arduino uno

2.- Pantalla Nextion (la que no tinc importació en la mida del teu Nextion)

3.- 1 Led de tu color favorito

4.- 1 resistència de 220 ohms

5.- Aproximadament 10 cables dupont o jumpers o simples cables per protoboard

6.- 1 protoborda

7.-1 targeta de memòria SD amb el seu adaptador, ja sigui per a usb o Micro sd

8.- cable usb para connectar tu arduino

Pas 1: Hacer Las Connexiones De Nuestra Nextion, Arduino, Led Y Resistencia

Com podem observar en la imatge tenim 4 cables que salen de Nextion en l’ordre de: negre, groc, blau i vermell, deixats d’esquerra a la dreta.

Negre = GND (Ground o tierra).

Amarillo = RxD (pin digital per rebre els dades per sèrie que seran enviats per arduino).

Azul = TxD (pin digital para enviar los datos por serial a Arduino)

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

Tomamos tierra y voltaje de nuestro Arduino uno, de los pines GND y 5V respectivamente, conectamos nuestro led al pin 2 digital de nuestro Arduino, seguido d'una resistencia de 220 ohms (pots calcular la resistència necessària per a tu led si vols, però en aquest caso se uso la 220 ohms si tu led es naranja brillante).

connectem els pins de Rxd i TxD de Nextion als pins d'Arduino de la següent forma:

RxD de Nextion -------- TxD de Arduino.

TxD de Nextion -------- RxD de arduino

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

Se seleccionaron las imágenes anteriores, en donde podemos ver son dos pulsadores de la misma forma pero con diferente color, para simular el encendido y apagado cambiando de imagen.

Les imatges han de ser recortades i acoplades a la mesura de pixeles de nuestra Nextion en mi caso fue la Nextion "NX3224T024_011" de 2.4 pulgadas y el tamaño de los pixeles es 320 X 240.

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

Utilitzeu pintura per modificar, recortar i acoplar a les mesures, també es pot fer en Adobe Ilustrator o Photoshop; fins i tot per fer una imatge més al teu gust, enregistrant que hauràs de tenir la mida en píxels de 320 X 240, tal i com es mostra en la imatge 2 del recurs del polsador verd.

Pas 4: feu un editor Nuestro Nextion

En cas de no tenir nextion editor es pot descarregar a la pàgina:

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

la instal·lació és molt fàcil o bé pots veure el meu tutorial per descarregar i instal·lar Nextion editor.

Pas 5: Abrir Nextion Editor

Després d'obrir Nextion Editor, seleccionem l'apartat de fitxer i nou, obrim una pestaña per nombrar el nostre nou projecte.

Pas 6:

Guardamos nuestro proyecto con el nombre que deseemos en mi caso escogí el nombre de "pulsador1", després s'ha d'escoger la pantalla Nextion amb la que vulguem treballar la qual és: "N3224T024_011", que ve al revers de la vostra pantalla Nextion en letras color blanco (checar en caso de tener una diferente).

Una vegada es selecciona el dispositiu o "dispositiu" com la mostra la imatge haurem de seleccionar, la direcció de la pantalla, s'escogirà l'opció de 90 graus "horitzontal", així serà com visualitzem la nostra pantalla amb una rotació de 90 graus respecte a la vertical.

Le damos a "ok" i obrim una nova pàgina en Nextion Editor en el centre que observa la pantalla del treball amb la mida de la nostra Nextion 320 X 240.

Afegim les nostres imatges per al polsador, prèviament recortades i acoplades als pixeles de la nostra Nextion, en l’opció d’afegir a la part mitja inferior amb el signe "+" en l’opció de fotos com a mostra en la imatge 4 d’aquesta secció.

Afegim també una font de lletra per al nostre programa Nextion Editor sense arrossegar cap error, aquest agregat en aquest pas l’arxiu amb el nombre de "fuente1.zi", per inserir hauria de seleccionar "fonts" a un costat de la secció on agregem les imatges (part inferior esquerra de Nextion Editor) com la mostra de la cinquena imatge en aquesta secció.

Pas 7: Agregem un botó tipus "Dual-State"

Una vegada que les imatges estan en el seu lloc correcte així com també la font (del tipus de lletres), agregem un botó del tipus "dual-state" com la mostra de la primera imatge.

Lo extenderemos a lo largo y ancho de la pantalla Nextion, hauràs de quedar com a la segona imatge abarcant els 320 x 240 pixeles.

Step 8: Seleccionamos Y Agregamos Nuestras Imágenes

En l’apartat d’atributs del botó, (apareixen seleccionant el botó agregat amb doble clic o aparèixer per defecte.), Seleccionem en la part de "aquesta" l’opció de "imatge" com la mostra de la imatge.

Per defecte es troba en "color sòlid", és per això que haurem d'escollir l'opció de "imatge"

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

Procederemos a escoger en el apartado de pic0 la imagen con el botón color rojo (para apagado), y para el apartado de pic1 la imagen con el botón verde (para encendido).

Recordant que la imatge 0 o pic0 ha de ser el color vermell degut a que el nostre led i el botó començaran en aquesta posició (apagat) i que una vegada presionat hauran de canviar la imatge que es troba en pic1 el que és de botó encès.

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

Per borrar el text que es troba al centre de la nostra pàgina (pàgina0) i botó (bt0), seleccionem el text en l’apartat de "txt" i procedim a borrar totes les lletres, fet això donem un enter per confirmar, tal i com la mostra en la imatge.

Pas 11: Seleccionarem "Premeu esdeveniment tàctil"

Un pas molt important és seleccionar en l’apartat de "Event" que ens enviam la trama de dades per Serial per a què arduino "sepa" que va ser presionat el botó de la nostra pantalla Nextion, per fer això hauríem de fer un clic al nostre botó (bt0) i immediatament a la part central inferior de Nextion Editor sobre l’apartat de "event" i "touch press event" hauríem de seleccionar el recuadro de "Send Component ID" tal i com es mostra a la imatge, això és passar a fer un debug per corroborar que no existeix cap error.

Step 12: Hacer Debug Y 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, haurien de corroborar que en l'apartat de "Simulator Return" tindrà una trama de 7 dades que seran enviats per sèrie. els dades hauran de ser els següents: 65 00 01 01 FF FF FF que com podrem observar son dades en hexadecimal.

Per a més informació de la trama de dades que envia Nextion visitar la pàgina:

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

El primer dato "65" ens imprimeix si existeix un error en aquest cas 65 significa que no existeix error algú.

El segon dato "00" no donem que la pàgina provingui l'esdeveniment en aquest cas de la pàgina 0.

El tercer dato "01" ens dóna els components que s'enviïn en l'esdeveniment, en aquest cas del botó o polsador "Dual-state" que hem configurat

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

Els dades FF FF FF són dades de terminació del tram (configuració de Nextion)

Step 13: Guardar El Proyecto Listo Para Subirlo a Nextion

Una vegada corroborat amb el depuració que no existeix cap error i que la trama de dades envia sense problemes, procedim a fer clic a "file" i després a "Open Build Folder" per seleccionar el nombre del nostre document, que estarà generat amb la extensió.tft per cargarlo a Nextion per mitjà de la memòria micro sd.

una vegada trobat el nostre arxiu s’haurà de passar a la memòria SD, en el que no ha d’existir cap altre tipus d’arxiu (com la mostra de la tercera imatge de la secció), i ha d’estar prèviament formatat (Fat32).

També podeu descarregar l’arxiu de boton1 que es troba al final d’aquest pas en on trobar l’arxiu.hmi i el.tft.

Pas 14: Programa De Arduino

El programa d’Arduino, no és molt complex però hi ha diversos punts que volen ressaltar, en el primer apartat observarem una llibreria anomenada Software Serial que es troba en mode de comentari, és part del programa aquesta deshabilitada. en cas de necessitat habilitarla quitar comentaris en les línies de codi que tenen la lleyenda de (quitar de comentari si es va a utilitzar la biblioteca de programari serial).

¿Por que esta deshabilitada esta parte? degut a que per cargar el programa a Arduino utilitza la comunicació serial que es converteix d’usb-serial per mitjà de l’electrònica que conté Arduino, és necessari desconectar momentàniament els pins de tx i rx que es comunica amb Nextion ja que és possible que no cargue a nuestro Arduino o existe 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, usar la librería Software Serial no evita fer esas Desconexiones ya que no interviene directamente en los pines TxD y RxD de nuestro Arduino generando una comunicación serial "virtual" en los pines 10 y 11, RX, TX, respectivament.

El programa funciona perfectament simplement carregant el codigo a Arduino i desconectant els pins RX y TX, per nuevamente ser conectados, una vez terminada la Operación de subir el código a Arduino.

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

EL darrer pas i passar el nostre arxiu generat en extensió.tft a nostra nextion, per fer aquesta operació hauria d’inserir la memòria micro sd en la vostra connexió apagada (preferentment no connectada de cap cable d’alimentació o comunicació, desconnectar el plug de cables), connectar el plug de cables d’alimentació, ens apareixerà la pantalla completament en blanc amb lletres vermelles indicant el percentatge de copiat del teu arxiu, una vegada finalitzat haurà de tenir el 100% de l’arxiu copiat, en aquest moment es desconeixem nuevament la nostra Nexió del tap que l’alimentació 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).