Interfață de afișare Nextion cu tablă cu patru relee ESP 32: 7 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:45

În acest instructable vom interfața afișajul de nextion de 5”la placa cu patru relee Esp 32. Placa este controlată de protocolul MQTT. Placa are, de asemenea, funcții de control în două direcții. Poate fi controlat atât de mqtt, cât și de ecranul tactil. Ecranul tactil este conectat la Esp 32 prin uart.

Configurarea afișajului Nextion:

Nextion Editor este un software de dezvoltare utilizat pentru construirea vizuală a interfeței grafice pentru dispozitive integrate cu intensitate grafică GUI cu diferite tipuri de afișaje TFT și panouri tactile. Folosind acest instrument, utilizatorii pot începe să creeze dispozitive bazate pe TFT într-un mod mai rapid și mai ușor.

Editorul Nextion poate fi descărcat de pe acest link

nextion.itead.cc/resources/download/nextion-editor/

După descărcare, instalați editorul de conexiuni.

Pasul 1: Editor Nextion

Deschideți editorul de nextion de mai jos arată fereastra de nextion, are sub-ferestre. Cutia de instrumente din această fereastră va exista un set de caracteristici cum ar fi afișarea textului, adăugarea butonului sau crearea cadranului etc. putem trage și plasa aceste obiecte în fereastra principală. Colțul din stânga jos este fereastra de imagine și font în care utilizatorul poate adăuga imaginile folosind simbolul „+” și poate șterge imaginile folosind simbolul „-”. În colțul din dreapta sus există o fereastră de pagină în care utilizatorul poate adăuga sau șterge pagini. În colțul din dreapta jos se află fereastra de atribute, aici utilizatorul poate modifica parametrii obiectelor. În partea de jos există două ferestre, una este Fereastra de ieșire și Fereastra de eveniment. va afișa eroarea compilatorului. Utilizatorul va selecta obiectele și va scrie codul în fereastra evenimentului pentru ca lucrurile să se întâmple.

Trebuie să creăm noul fișier, odată ce salvăm noul fișier, apare fereastra image2, ne va cere să alegem modelul, modelul nu este altceva decât modelul de afișare nextion, îl veți obține în partea din spate a nextion, după care faceți clic pe OK pentru continua.

După crearea unui fișier nou, pagina este creată așa cum se arată în imaginea imagine3, utilizatorul poate crea un număr mare de pagini în funcție de aplicația sa, dar în aplicația curentă ne limităm la o singură pagină.

Pasul 2: Adăugarea de imagini și font

În imaginea4 puteți vedea cum să creați font. Accesați instrumentele și faceți clic pe Generatorul de fonturi, va apărea fereastra creatorului de fonturi, selectați înălțimea și tipul de font și dați numele fontului și faceți clic pe fontul generatorului. nu.

În imaginea 5 puteți vedea cum să adăugați fontul, acesta fiind evidențiat în instantaneu. Utilizând simbolul + și - utilizatorul poate adăuga sau șterge font.

În imaginea 6 puteți vedea cum să adăugați imagini sau să ștergeți imaginile selectând „+” sau respectiv „-”.

Pasul 3: Crearea butonului

Image7 arată cum să adăugați obiectele la fereastra principală din caseta de instrumente. De exemplu, faceți clic pe butonul obiect cu stare duală, acesta va apărea pe fereastra principală, așa cum se arată în imaginea7 butonul cu stare duală obiect bt0. Utilizatorul poate muta butonul în direcția x și y. Vom arăta cum să creați un buton de comutare cu stare duală.

În imaginea8 putem vedea că butonul imagine a fost modificat în funcție de utilizator. Trebuie să facem clic pe butonul bt0, în fereastra de atribute vor apărea parametrii butonului. În acel utilizator trebuie să schimbe parametrul sta la imagine și în fila pic0 și pic1 utilizatorul trebuie să aloce imaginile pe care dorește să le aplice.

În imaginea 9 se arată aranjamentul final al tuturor butoanelor, inclusiv denumirea. Aici am adăugat bt0, bt1, bt2 și bt3 pentru butonul0, butonul1, butonul2 și respectiv butonul3.

Pasul 4: Cod eveniment pentru butonul de comutare

Imaginea 10 prezintă pre-inițializarea ratei de transmisie = 115200 în fereastra evenimentului, partea sa de cod. Utilizatorul poate inițializa în această parte referitoare la afișare.

În imaginea 11 este prezentată partea de cod a butonului bt0, aici imprimăm serial în funcție de starea variabilă a butonului, adică pentru bt0 variabila este 0, atunci trimitem seria „R10”, iar pentru bt0 variabila este 1, atunci trimitem „R11” la sp. Odată ce Esp primește R10, acesta oprește primul releu, iar când primește R11, primul releu pornește. În mod similar, trebuie să codificăm toate butoanele, de exemplu bt1, bt2 și bt3.

Pasul 5: Depanați GUI

Odată ce totul este codificat, trebuie să compilăm, dacă nu există nicio eroare, putem depana GUI-ul creat funcționează conform cerințelor noastre înainte de a încărca pe afișajul nextion. Imaginea12 arată fereastra de depanare, aici utilizatorul poate simula curentul din butonul derulant și poate verifica dacă funcționează conform utilizatorului.

Odată ce dispozitivul funcționează conform utilizatorului, următorul pas este să încărcați codul pe afișajul de nextion.

Imaginea 13 arată fereastra de încărcare pe dispozitivul de conectare, aici trebuie să selectați portul com și rata de transmisie. După aceea, trebuie să faceți clic pe butonul Go pentru a încărca în cod, poate dura ceva timp pentru a încărca.

Pasul 6: Lucrul dispozitivului

Imaginea 14 prezintă schema de conectare a plăcii ESP 32 wifi cu patru relee cu afișajul de nextion. De la placa ESP 32 J1 și J2 conectați 5v și masă (G) la afișajul de nextion așa cum se arată mai jos. Conectați Tx de nextion la Rx0 de la ESP32 placă și Rx de legătură la Tx0 a plăcii ESP32. Aceasta va stabili comunicarea Uart.

Funcționare: Odată ce totul este conectat, dispozitivul configurează dispozitivul cu ssid și parolă și mqtt broker cu numele subiectului de publicare și abonament. După trimiterea acreditării, dispozitivul va reporni și se va conecta la mqtt. Dispozitivul deja este configurat pentru openhab openhab instructables) așa cum se arată în imaginea 15.

Dispozitivul poate fi controlat de http, mqtt și prin intermediul ecranului tactil GUI. Putem obține starea actuală a tuturor canalelor de releu, indiferent dacă canalele sunt activate sau dezactivate atât pe ecranul mqtt, cât și pe ecranul tactil.

Pasul 7: Ajutor Nextion

Imaginea17 arată fereastra pentru setul de instrucțiuni de legătură, de unde utilizatorul poate obține ajutorul.