Menu Arduino su un Nokia 5110 Lcd utilizzando un codificatore rotante: 6 passaggi (con immagini)

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

Cari amici benvenuti in un altro tutorial! In questo video impareremo come creare il nostro menu per il popolare display LCD Nokia 5110, al fine di rendere i nostri progetti più facili da usare e più capaci. Iniziamo!

Questo è il progetto che andremo a costruire. Sul display appare un semplice menu e con l'aiuto del codificatore rotante posso navigare in alto o in basso e selezionare una voce di menu premendo il pulsante del codificatore rotante. Quando si preme il pulsante centrale del codificatore rotante, appare un'altra schermata e possiamo modificare il valore di una variabile. Se premiamo ancora una volta il pulsante del codificatore rotante, torniamo alla schermata del menu principale. Il menu ha 6 voci e possiamo scorrere verso il basso o verso l'alto il menu e le voci sul display cambieranno di conseguenza. Guarda il video allegato per vedere esattamente come funziona questo menu. Ovviamente puoi modificarlo per creare i tuoi menu più complessi, se lo desideri.

Vediamo ora come costruire questo progetto.

Passaggio 1: ottenere tutte le parti

Le parti necessarie per realizzare questo progetto sono le seguenti:

• Un Arduino Uno ▶
• Un display LCD Nokia 5110 ▶
• Un codificatore rotativo ▶
• Una piccola breadboard ▶
• Alcuni cavi ▶
• Power Bank ▶

Il costo del progetto è molto basso, è inferiore a $ 10. Puoi trovare i link per tutte le parti che uso nella descrizione del video qui sotto.

Passaggio 2: display LCD Nokia 5110

Il Nokia 5110 è il mio display preferito per i miei progetti Arduino.

Il Nokia 5110 è uno schermo LCD grafico di base originariamente concepito come schermo di un telefono cellulare. Utilizza il controller PCD8544 che è un controller/driver LCD CMOS a bassa potenza. Per questo motivo questo display ha un consumo energetico impressionante. Usa solo 0,4 mA quando è acceso ma la retroilluminazione è disabilitata. Usa meno di 0,06 mA in modalità di sospensione! Questo è uno dei motivi che rendono questo display il mio preferito. Il PCD8544 si interfaccia ai microcontrollori tramite un'interfaccia bus seriale. Ciò rende il display molto facile da usare con Arduino. Hai solo bisogno di collegare 8 fili.

Ho preparato un tutorial dettagliato su come utilizzare il display LCD del Nokia 5110 con Arduino. Ho allegato quel video in questo Instructable, fornirà informazioni utili sul display, quindi ti incoraggio a guardarlo attentamente. Il costo del display è di circa $4.

Puoi ottenerlo qui: ▶

Passaggio 3: codificatore rotante

Un encoder rotativo, chiamato anche encoder ad albero, è un dispositivo elettromeccanico che converte la posizione angolare o il movimento di un albero o asse in un codice analogico o digitale. Gli encoder rotativi sono utilizzati in molte applicazioni che richiedono una rotazione illimitata dell'albero preciso, inclusi controlli industriali, robotica, obiettivi fotografici speciali, dispositivi di input per computer (come mouse optomeccanici e trackball), reometri a stress controllato e piattaforme radar rotanti.

L'encoder rotativo che utilizzeremo in questo progetto è un encoder molto economico. Ha anche un pulsante incorporato e per farlo funzionare abbiamo solo bisogno di collegare 5 fili. Ho preparato un tutorial dettagliato su come utilizzare un encoder rotativo. Potete trovare questo video allegato qui.

Il costo di questo encoder rotativo è molto contenuto. Costa circa $ 1,5.

Puoi ottenerlo qui ▶

Passaggio 4: costruire il progetto

Ora colleghiamo tutte le parti insieme. Prima di realizzare questo progetto, se non hai utilizzato un codificatore rotativo in passato, ti incoraggio a guardare il tutorial che ho preparato sui codificatori rotanti. Ti aiuterà a capire come funzionano gli encoder rotativi e acquisirai esperienza con loro. Questo video è allegato qui.

Ho posizionato il display su una piccola breadboard come questa. Colleghiamo prima il display. Il primo pin del display che è Reset va al pin digitale 3 dell'Arduino Uno, il secondo pin va al pin digitale 4, il terzo pin va al pin digitale 5, il quarto pin al pin digitale 11 e il quinto pin al pin digitale pin 13. Il pin successivo è Vcc. Colleghiamo Vcc al binario positivo della breadboard e il binario positivo della breadboard all'uscita a 3,3 V dell'Arduino. Il pin successivo è Retroilluminazione per il display. Poiché vogliamo controllarlo tramite il software, lo colleghiamo al pin digitale 7. L'ultimo pin è GND. Colleghiamo GND al binario negativo della breadboard e il binario negativo della breadboard a Arduino GND.

Ora non ci resta che collegare l'encoder rotativo. Il primo pin è GND e lo colleghiamo al binario negativo della breadboard. Il pin successivo è Vcc e lo colleghiamo al rail positivo della breadboard. Il pin successivo è SW e lo colleghiamo al Pin analogico 2. Il pin successivo si chiama DT e lo colleghiamo al Pin analogico 1. Infine il pin CLK è collegato al Pin analogico 0. Puoi trovare lo schema di questo progetto in la descrizione del video qui sotto.

Ora siamo pronti per potenziare il progetto. Come puoi vedere, il progetto sta funzionando bene e il menu funziona come previsto! Ottimo, ora vediamo il software del progetto.

Step 5: Il Codice del Progetto

In questo progetto usiamo 4 librerie. Usiamo due librerie per il display e due per l'encoder rotativo.

1. Adafruit GFX:
2. Nokia 5110:
3. Libreria encoder:
4. Libreria TimerOne:

Per prima cosa daremo un'occhiata alla funzione drawMenu. Questa funzione è responsabile del disegno del Menu sul display. Questa funzione viene chiamata ogni pochi millisecondi, quindi se c'è un cambiamento nel menu questa funzione è responsabile dell'aggiornamento del menu sullo schermo.

int menuitem = 1;int frame = 1; int pagina = 1; int lastMenuItem = 1;

Ci sono anche 3 variabili globali molto importanti, la variabile page, la variabile menuitem e la variabile frame. La pagina delle variabili ricorda quale schermata dell'interfaccia utente è visualizzata sullo schermo. Quindi, se la variabile della pagina è 1, siamo nella schermata dell'interfaccia utente principale e se la variabile è 2 siamo nella schermata dell'interfaccia utente secondaria in cui impostiamo il valore su una variabile. La voce di menu ricorda la voce di menu selezionata. Quindi, se il suo valore è 1, viene selezionata la prima voce di menu, quindi la funzione drawMenu deve disegnare questa voce di menu in nero con lettere bianche. Se la voce di menu è 2, viene selezionata la seconda voce di menu e così via. La variabile frame, ricorda quale parte del menu viene visualizzata sullo schermo. Poiché il menu che abbiamo creato contiene 6 elementi e possiamo visualizzarne solo 3 alla volta, dobbiamo sapere quali elementi vengono visualizzati sullo schermo. La variabile frame ci dice esattamente questo. Se la variabile frame ha il valore 1, vengono visualizzate le prime tre voci di menu, se è 2, vengono visualizzate le voci 2, 3, 4 e così via.

Ho cercato di rendere il codice il più semplice possibile da modificare, quindi ho creato alcune variabili globali che contengono i nomi delle voci di menu. In questo modo, puoi creare facilmente i tuoi menu senza cercare nel codice.

String menuItem1 = "Contrasto"; String menuItem2 = "Volume"; String menuItem3 = "Lingua"; String menuItem4 = "Difficoltà"; String menuItem5 = "Luce: ON"; String menuItem6 = "Ripristina";

retroilluminazione booleana = vero;

int contrasto=60; int volume = 50;

Linguaggio stringa[3] = { "EN", "ES", "EL" };

int selectedLanguage = 0;

Difficoltà stringa[2] = { "FACILE", "DIFFICILE" };

int selezionatoDifficoltà = 0;

All'inizio inizializziamo tutte le variabili globali necessarie nel codice. Successivamente inizializziamo il display. Nella funzione loop, all'inizio chiamiamo la funzione drawMenu per disegnare il menu sullo schermo. Quindi leggiamo il valore dal Rotary encoder e controlliamo se il pulsante è premuto. Ad esempio, se siamo nella schermata principale dell'interfaccia utente e la prima voce di menu è selezionata, se il valore dell'encoder rotativo è aumentato, la variabile menuitem aumenta e nel ciclo successivo la funzione drawMenu disegnerà la seconda voce di menu come selezionata. Se ora premiamo il pulsante dell'encoder rotativo andiamo alla seconda pagina, dove impostiamo il valore della variabile. Sempre utilizzando l'encoder rotativo possiamo aumentare o diminuire il valore della variabile. Se premiamo il pulsante torniamo alla pagina del menu principale e la variabile di pagina diminuisce.

Questa è l'idea alla base di questo menu. Seguiamo la stessa procedura per tutte le voci di menu e le pagine. Il codice è complesso, è lungo oltre 400 righe. Sembra complicato ma se lo provi tu stesso lo capirai più facilmente e sarai in grado di cambiarlo, espanderlo e usarlo nei tuoi progetti. Come sempre trovate il codice allegato qui.

Passaggio 6: test del progetto

Se carichiamo il codice possiamo vedere che il progetto funziona come previsto. Possiamo navigare nel menu su e giù utilizzando l'albero e possiamo selezionare qualsiasi voce di menu premendo il pulsante dell'encoder rotante. Quant'è fico!

Ora che sappiamo come creare menu per i display LCD del Nokia 5110, possiamo aggiungere più funzionalità ai nostri progetti e renderli più facili da usare. Tuttavia, questo semplice menu che abbiamo creato oggi può essere migliorato. Potremmo usare gli interrupt invece di controllare continuamente gli stati dei pulsanti. In questo modo possiamo ridurre il consumo energetico del progetto e rendere il codice più pulito. Presto preparerò un video sugli interrupt quindi restate sintonizzati. Mi piacerebbe sentire la tua opinione su questo progetto di menu. Lo trovi utile e prevedi di utilizzare un menu in uno qualsiasi dei tuoi progetti. Per favore, pubblica i tuoi pensieri e le tue idee qui sotto, grazie!