Interfaccia display Nextion con scheda a quattro relè ESP 32: 7 passaggi

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

In queste istruzioni andremo ad interfacciare il display nextion da 5 a una scheda a quattro relè Esp 32. La scheda è controllata dal protocollo MQTT. Board ha anche funzioni di controllo a due vie. Può essere controllato sia da mqtt che da touch screen. Il touch screen è collegato a Esp 32 tramite uart.

Configurazione display Nextion:

Nextion Editor è un software di sviluppo utilizzato per la creazione visiva di interfacce grafiche per dispositivi ad alta intensità di GUI incorporati con vari tipi di display TFT e Touch Panel. Utilizzando questo strumento, gli utenti possono iniziare a creare dispositivi basati su TFT in modo più semplice e veloce.

Nextion Editor può essere scaricato da questo link

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

Dopo aver scaricato installa l'editor nextion.

Passaggio 1: Editor Nextion

Apri l'editor nextion in basso mostra la finestra nextion, ha finestre secondarie. Toolbox in questa finestra ci sarà un set di funzionalità come mostrare testo, aggiungere pulsanti o creare quadrante ecc. Possiamo trascinare e rilasciare questi oggetti nella finestra principale. L'angolo in basso a sinistra è la finestra dell'immagine e del carattere in cui l'utente può aggiungere le immagini utilizzando il simbolo "+" e può eliminare le immagini utilizzando il simbolo "-". Nell'angolo in alto a destra c'è la finestra della pagina in cui l'utente può aggiungere o eliminare pagine. In basso a destra c'è la finestra degli attributi, qui l'utente può modificare i parametri degli oggetti. In basso ci sono due finestre una è la finestra di output e la finestra degli eventi. Nella finestra di output è visualizzerà l'errore del compilatore. L'utente selezionerà gli oggetti e scriverà il codice nella finestra dell'evento per far accadere le cose.

Dobbiamo creare il nuovo file, una volta salvato il nuovo file viene visualizzata la finestra image2, che chiederà di scegliere il modello, il modello non è altro che il modello di visualizzazione successivo lo otterrai sul retro del nextion dopo di che fai clic su ok per procedere.

Dopo aver creato un nuovo file, la pagina viene creata come mostrato nell'immagine image3, l'utente può creare un numero elevato di pagine a seconda della sua applicazione. Ma nell'applicazione corrente ci stiamo limitando a una sola pagina.

Passaggio 2: aggiunta di immagini e caratteri

In image4 puoi vedere come creare il font. Vai su strumenti e fai clic su Font Generator apparirà la finestra del creatore di caratteri, in questa seleziona l'altezza e il tipo di carattere e dai il nome del carattere e fai clic sul carattere del generatore. Dopo aver generato il carattere, la prossima volta chiederà se aggiungere il carattere o non.

In image5 puoi vedere come aggiungere il font, è evidenziato nell'istantanea. Utilizzando i simboli + e – l'utente può aggiungere o eliminare il carattere.

In image6 puoi vedere come aggiungere immagini o eliminare le immagini selezionando rispettivamente "+" o "-".

Passaggio 3: creazione del pulsante

Image7mostra come aggiungere gli oggetti alla finestra principale dalla casella degli strumenti. Ad esempio, fare clic sul pulsante a doppio stato dell'oggetto, apparirà nella finestra principale come mostrato nell'oggetto pulsante a doppio stato dell'immagine7 bt0. L'utente può spostare il pulsante in direzione x e y. Mostreremo come creare un pulsante di commutazione con doppio stato.

In image8 possiamo vedere che l'immagine del pulsante è stata modificata in base all'utente. Dobbiamo fare clic sul pulsante bt0, nella finestra degli attributi appariranno i parametri del pulsante. In tale utente è necessario modificare il parametro sta in image e nelle schede pic0 e pic1 l'utente deve assegnare le immagini che desidera applicare.

Nell'immagine 9 è mostrata la disposizione finale di tutti i pulsanti inclusa la denominazione. Qui abbiamo aggiunto bt0, bt1, bt2 e bt3 rispettivamente per button0, button1, button2 e button3.

Passaggio 4: codice evento per pulsante interruttore

L'immagine 10 mostra la preinizializzazione del baud rate = 115200 nella finestra dell'evento, la sua parte di codice. L'utente può inizializzare in questa parte relativa alla visualizzazione.

Nell'immagine11 mostra la parte di codice del pulsante bt0, qui stiamo stampando seriale a seconda dello stato variabile del pulsante, ovvero per bt0 la variabile è 0 quindi inviamo la seriale "R10" e per la variabile bt0 è 1 quindi stiamo inviando "R11" all'esp. Quando Esp riceve R10 spegne il 1° relè e quando riceve R11 si accende il 1° relè. Allo stesso modo dobbiamo codificare per tutti i pulsanti, ad esempio bt1, bt2 e bt3.

Passaggio 5: debug della GUI

Una volta che tutto è codificato, dobbiamo compilare, se non ci sono errori possiamo eseguire il debug che la GUI creata funziona secondo i nostri requisiti prima di caricarla sul display nextion. L'immagine12 mostra la finestra del debugger, qui l'utente può corrente simulatore dal pulsante a discesa e verificare se funziona secondo l'utente.

Una volta che il dispositivo funziona secondo l'utente, il passaggio successivo consiste nel caricare il codice sul display nextion.

L'immagine 13 mostra la finestra di caricamento sul dispositivo nextion, qui è necessario selezionare la porta com e la velocità di trasmissione. Dopo aver fatto clic sul pulsante vai per caricare il codice, potrebbe essere necessario del tempo per il caricamento.

Passaggio 6: funzionamento del dispositivo

L'immagine 14 mostra lo schema di collegamento della scheda a quattro relè wifi ESP 32 con il display nextion. Dalla scheda ESP 32 J1 e J2 collegare 5v e Ground (G) al display nextion come mostrato di seguito. Collegare Tx di nextion all'Rx0 di ESP32 board e Rx di nextion al Tx0 della scheda ESP32. Ciò stabilirà la comunicazione Uart.

Funzionante: una volta che tutto è collegato, accendi il dispositivo e configura il dispositivo con ssid e password e mqtt broker con il nome dell'argomento publish e subscript. Dopo aver inviato le credenziali, il dispositivo si riavvierà e si connetterà a mqtt. Il dispositivo è già configurato per openhab (per openhab, controlla il nostro istruzioni openhab) come mostrato nell'immagine15.

Il dispositivo può essere controllato da http, mqtt e anche tramite il touch screen della GUI. Possiamo ottenere lo stato corrente di tutti i canali relè sia che i canali siano accesi o spenti sia sul display mqtt che sul touch screen.

Passaggio 7: assistenza Nextion

L'immagine17 mostra la finestra per il set di istruzioni nextion, dove l'utente può ottenere l'aiuto.