Come configurare la barra progresso sul touch-screen del Display Nextion da 3.5″

Torniamo ad occuparci di display Nextion trattando questa volta di come utilizzare e configurare la barra progresso. Vi invitiamo, prima di proseguire con questa guida, di prendere visione dei due articoli dedicati a questa guida, al fine di configurare correttamente il display il Nextion Editor e modificare, dove necessario, la libreria Nextion.

Collegamento

La barra progresso (Progress Bar) è uno degli strumenti presenti all’interno del Nextion Editor e premette di visualizzare su un’apposita barra un valore in scala percentuale. Possiamo gestire l’avanzamento della barra in modi diversi. In questa guida vedremo come gestirla tramite un sensore o tramite i pulsanti sulla touch-screen del display. Pertanto, adopereremo due sketch e sarà necessario anche collegare un sensore. Anticipiamo che adopereremo un potenziometro rotativo che funge da sensore analogico, in modo che ruotandolo possiamo incrementare o ridurre il valore sulla barra progresso. Iniziamo collegando il display Nextion ad Arduino UNO, rammentando che il TX di Arduino va connesso all’RX del display, l’RX di Arduino al TX del display, il +5V ai 5V di Arduino ed il GND al GND. Il sensore va collegato al pin analogico A0, come mostrato nello schema in basso.

Barra progresso

Lista componenti su Amazon:

Lista componenti su Aliexpress:



Interfaccia

Apriamo su Windows il Nextion Editor e procediamo creando un nuovo progetto, anticipando che utilizzeremo la medesima interfaccia per entrambi gli sketch che caricheremo e che potete scaricare da questo LINK. Ricordate che è necessario selezionare il modello che utilizziamo, dargli una direzione e poi creare un font per gestire eventuali testi. Create uno sfondo se volete e poi, lateralmente nella Toolbox, scegliete la voce Progress bar. Apparirà la barra progresso, il cui nome è j0. Nella scheda Attribute cerchiamo il valore val e lasciamolo a 50.

Barra progresso

Adesso creiamo due pulsanti, muovendoci sulla Toolbox e premendo su Button. Selezioniamo il primo pulsante, andiamo nella scheda Attribute e cambiamo la voce objname in bup, poi alla voce txt scriviamo UP. Così facendo scriveremo sul pulsante UP per distinguerlo dall’altro pulsante.

Attiviamo il touch muovendoci sulla scheda Event, clicchiamo la voce Touch Release Event e selezioniamo la voce Send Component ID.

Per il secondo pulsante cambiamo la voce objname in bdown, poi alla voce txt scriviamo DOWN e per ultimo attiviamo il touch muovendoci, anche qui, sulla scheda Event, clicchiamo la voce Touch Release Event e selezioniamo la voce Send Component ID.

Barra progresso

Salviamo il progetto ed esportiamolo per caricarlo sulla Micro-SD. Per farlo spostiamoci nel menu File e selezioniamo la voce TFT file output. Carichiamolo direttamente sulla Micro-SD oppure salvatelo in una cartella e copiatelo successivamente, l’importante è esportare il progetto progressbar.tft. Caricato sulla Micro-SD, inseriamo la memoria nell’apposito alloggio, assicurandoci che il display Nextion sia spento. Diamo corrente al display ed attendiamo la fine del caricamento. Spegniamo poi il monitor ed estraiamo la Micro-SD.

Codice

Per adoperare la barra progresso nel primo sketch non sarà necessario ricorrere a nessuna libreria. Partiamo dal VOID SETUP dove avviamo semplicemente il monitor seriale, dopodiché spostiamoci nel VOID LOOP dove creiamo la variabile sensor da cui leggeremo i valori analogici che arrivano dal pin A0. Mappiamo sulla variabile valore poi questi valori in una scala da 0 a 100, visto che la barra progresso riporta valori compresi in questo intervallo. Inviamo tutto tramite seriale al display, specificando che la destinazione è j0.val, ossia il nome dell’oggetto barra progresso, che inviamo i dati ottenuti da valore e terminiamo la comunicazione con il triplo comando Serial.write(0xff).


void setup(void)
{
Serial.begin(9600);

}

void loop(void)
{
int sensor = analogRead(A0);

int valore = map (sensor, 0, 1023, 0, 100);

Serial.print("j0.val=");
Serial.print(valore);
Serial.write(0xff);
Serial.write(0xff);
Serial.write(0xff);
}

Carichiamo tutto sulla scheda Arduino, ricordando di tenere il display Nextion scollegato per evitare problemi in fase di caricamento del codice. Una volta caricato, accendiamo il display e muoviamo il potenziometro, vedendo che la barra progresso si muoverà seguendo l’avanzamento del potenziometro.



Per adoperare questa volta il display Nextion sarà necessario scaricare le apposite librerie, accessibili dal sito ufficiale a questo LINK. Siccome stiamo adoperando Arduino UNO che possiede solo 2 pin per la porta seriale (pin digitali 0 e 1), mentre la libreria Nextion.h è pensata per versioni di Arduino con più pin seriali, come Arduino Mega o Arduino Due, dobbiamo modificarla manualmente. Se non siete pratici, adoperate Arduino Mega e non Arduino UNO. La modifica delle librerie è consigliabile solo se si sa quello che si va a modificare. Per eseguire correttamente queste modifiche, seguite la guida a questo LINK. Apriamo la IDE è per prima cosa inseriamo la libreria Nextion.h per poi dichiarare gli oggetti bup, bdown e j0 inserendo tra parentesi la pagina (0), l’id componenti (1) e il nome componente (bup). Creiamo poi la lista degli oggetti che dovremmo utilizzare.


#include "Nextion.h"

NexProgressBar j0 = NexProgressBar(0, 3, "j0");
NexButton bup = NexButton(0, 1, "bup");
NexButton bdown = NexButton(0, 2, "bdown");

NexTouch *nex_listen_list[] =
{
&bup,
&bdown,
NULL
};

Nel VOID SETUP inizializziamo il seriale  (la libreria imposta automaticamente a 9600) ed infine, richiamiamo due funzioni che gestiscono i due pulsanti.


nexInit();
bup.attachPop(buttonUpPopCallback);
bdown.attachPop(buttonDownPopCallback);

Nella prima funzione, chiamata buttonUpPopCallback, creiamo una variabile locale che chiamiamo valore, impostando che si incrementi di 10 unità ogni qualvolta il pulsante UP viene premuto, arrestandosi quando raggiunge il valore 100. Ogni cambiamento viene registrato sull’oggetto barra progresso j0.


void buttonUpPopCallback(void *ptr)
{
uint32_t valore = 0;
dbSerialPrintln("buttonUpPopCallback");

j0.getValue(&valore);

valore += 10;
if (valore >= 100)
{
valore = 100;
}

j0.setValue(valore);
}

Nella seconda funzione, buttonDownPopCallback, creiamo anche qui una variabile locale che chiamiamo valore, impostando che si diminuisca di 10 unità ogni qualvolta il pulsante DOWN viene premuto, arrestandosi quando raggiunge il valore 0. Ogni cambiamento viene registrato sull’oggetto barra progresso j0.


void buttonDownPopCallback(void *ptr)
{
uint32_t valore = 0;
dbSerialPrintln("buttonDownPopCallback");

j0.getValue(&valore);

if (valore >= 10)
{
valore -= 10;
}

j0.setValue(valore);
}

Infine, nel VOID LOOP riaggiorniamo la lista creata in precedenza.


void loop(void)
{
nexLoop(nex_listen_list);
}

Carichiamo lo sketch tenendo scollegato il display Nextion. Al termine del caricamento, avviate il display e ad ogni pressione dei tasti UP o DOWN il valore della barra progresso crescerà o decrescerà.