🚀 Introduzione
Vuoi creare un’interfaccia moderna e compatta per i tuoi progetti Arduino? 📟
In questo progetto realizzerai un menu navigabile su display OLED da 0,96 pollici, controllato tramite quattro pulsanti.
Potrai scorrere le diverse voci, aprire le schermate disponibili e tornare al menu principale.
👉 Il display OLED offre testi molto nitidi, consuma poca energia e non necessita di retroilluminazione.
Vuoi creare un’interfaccia moderna e compatta per i tuoi progetti Arduino? 📟
In questo progetto realizzerai un menu navigabile su display OLED da 0,96 pollici, controllato tramite quattro pulsanti.
Potrai scorrere le diverse voci, aprire le schermate disponibili e tornare al menu principale.
👉 Il display OLED offre testi molto nitidi, consuma poca energia e non necessita di retroilluminazione.
🎯 Cosa realizzerai
Con Arduino creerai un sistema che:
Con Arduino creerai un sistema che:
- 📟 visualizza un menu su display OLED
- ⬆️ scorre le voci verso l’alto
- ⬇️ scorre le voci verso il basso
- ✅ apre la voce selezionata
- 🔙 ritorna al menu principale
- 🌡️ mostra una temperatura di esempio
- 💡 mostra un valore di luminosità
- ℹ️ visualizza le informazioni del progetto
🧰 Materiale necessario
In questo progetto utilizzeremo le resistenze interne INPUT_PULLUP di Arduino, quindi non serviranno resistenze esterne per i pulsanti.
- 1x Arduino UNO
- 1x display OLED 0,96 pollici I2C SSD1306
- 4x pulsanti
- cavetti jumper
- breadboard
- cavo USB
In questo progetto utilizzeremo le resistenze interne INPUT_PULLUP di Arduino, quindi non serviranno resistenze esterne per i pulsanti.
🛒 Non hai ancora i componenti?
Molti dei progetti presenti su progettiarduino.com utilizzano componenti elettronici di base come LED, resistenze, sensori e breadboard.
Se stai iniziando con Arduino, il modo più semplice è utilizzare un kit completo per principianti, che include quasi tutti i componenti necessari per realizzare molti dei progetti presenti sul sito.
👉 Kit Arduino consigliato:
ℹ️ Link di affiliazione Amazon: in qualità di Affiliato Amazon ricevo un guadagno dagli acquisti idonei, senza alcun costo aggiuntivo per te.
https://amzn.to/4b3dxjW
📘 Vuoi imparare Arduino passo dopo passo?
Se vuoi approfondire e realizzare progetti più completi, puoi dare un'occhiata anche ai miei libri dedicati ad Arduino.
All'interno troverai spiegazioni semplici, schemi chiari e molti progetti pratici pensati per chi parte da zero.
👉 Scopri i miei libri su Arduino:
ℹ️ Link di affiliazione Amazon: in qualità di Affiliato Amazon ricevo un guadagno dagli acquisti idonei, senza alcun costo aggiuntivo per te.
https://amzn.to/4rfzjXE
Molti dei progetti presenti su progettiarduino.com utilizzano componenti elettronici di base come LED, resistenze, sensori e breadboard.
Se stai iniziando con Arduino, il modo più semplice è utilizzare un kit completo per principianti, che include quasi tutti i componenti necessari per realizzare molti dei progetti presenti sul sito.
👉 Kit Arduino consigliato:
ℹ️ Link di affiliazione Amazon: in qualità di Affiliato Amazon ricevo un guadagno dagli acquisti idonei, senza alcun costo aggiuntivo per te.
https://amzn.to/4b3dxjW
📘 Vuoi imparare Arduino passo dopo passo?
Se vuoi approfondire e realizzare progetti più completi, puoi dare un'occhiata anche ai miei libri dedicati ad Arduino.
All'interno troverai spiegazioni semplici, schemi chiari e molti progetti pratici pensati per chi parte da zero.
👉 Scopri i miei libri su Arduino:
ℹ️ Link di affiliazione Amazon: in qualità di Affiliato Amazon ricevo un guadagno dagli acquisti idonei, senza alcun costo aggiuntivo per te.
https://amzn.to/4rfzjXE
📚 Librerie necessarie
Per utilizzare il display OLED devi installare le librerie:
Per installarle:
Per utilizzare il display OLED devi installare le librerie:
- Adafruit SSD1306
- Adafruit GFX Library
Per installarle:
- apri Arduino IDE;
- seleziona Sketch → Include Library → Manage Libraries;
- cerca Adafruit SSD1306;
- installa la libreria;
- cerca Adafruit GFX Library;
- installa anche questa libreria.
🔌 Schema di collegamento
Display OLED SSD1306
Pulsante SU
Pulsante GIÙ
Pulsante OK
Pulsante INDIETRO
Con la modalità INPUT_PULLUP, il pulsante non premuto viene letto come HIGH, mentre quando viene premuto viene letto come LOW.
Display OLED SSD1306
- VCC → 5V
- GND → GND
- SDA → A4
- SCL → A5
Pulsante SU
- un terminale → pin digitale 2
- terminale opposto → GND
Pulsante GIÙ
- un terminale → pin digitale 3
- terminale opposto → GND
Pulsante OK
- un terminale → pin digitale 4
- terminale opposto → GND
Pulsante INDIETRO
- un terminale → pin digitale 5
- terminale opposto → GND
Con la modalità INPUT_PULLUP, il pulsante non premuto viene letto come HIGH, mentre quando viene premuto viene letto come LOW.
💻 Codice Arduino
Il codice crea un menu composto da quattro voci:
I pulsanti SU e GIÙ permettono di spostare il cursore, OK apre la schermata selezionata e INDIETRO ritorna al menu principale.
Il codice crea un menu composto da quattro voci:
- Temperatura
- Luminosità
- Stato sistema
- Informazioni
I pulsanti SU e GIÙ permettono di spostare il cursore, OK apre la schermata selezionata e INDIETRO ritorna al menu principale.
/*
==================================================
Progetto 122 - Display OLED con menu navigabile
Menu interattivo con OLED SSD1306 e quattro pulsanti
==================================================
*/
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#define LARGHEZZA_DISPLAY 128
#define ALTEZZA_DISPLAY 64
#define RESET_OLED -1
Adafruit_SSD1306 display(
LARGHEZZA_DISPLAY,
ALTEZZA_DISPLAY,
&Wire,
RESET_OLED
);
const byte pulsanteSu = 2;
const byte pulsanteGiu = 3;
const byte pulsanteOk = 4;
const byte pulsanteIndietro = 5;
const byte numeroVoci = 4;
byte voceSelezionata = 0;
byte schermata = 0;
unsigned long ultimoComando = 0;
const unsigned long tempoDebounce = 180;
const char* vociMenu[numeroVoci] = {
"Temperatura",
"Luminosita",
"Stato sistema",
"Informazioni"
};
void setup() {
pinMode(pulsanteSu, INPUT_PULLUP);
pinMode(pulsanteGiu, INPUT_PULLUP);
pinMode(pulsanteOk, INPUT_PULLUP);
pinMode(pulsanteIndietro, INPUT_PULLUP);
if (!display.begin(
SSD1306_SWITCHCAPVCC,
0x3C
)) {
while (true) {
}
}
display.clearDisplay();
display.setTextColor(SSD1306_WHITE);
display.setTextSize(1);
display.setCursor(25, 20);
display.println("Menu Arduino");
display.setCursor(28, 35);
display.println("Progetto 122");
display.display();
delay(1800);
mostraMenu();
}
void loop() {
if (millis() - ultimoComando < tempoDebounce) {
return;
}
if (digitalRead(pulsanteSu) == LOW) {
ultimoComando = millis();
comandoSu();
}
if (digitalRead(pulsanteGiu) == LOW) {
ultimoComando = millis();
comandoGiu();
}
if (digitalRead(pulsanteOk) == LOW) {
ultimoComando = millis();
comandoOk();
}
if (digitalRead(pulsanteIndietro) == LOW) {
ultimoComando = millis();
schermata = 0;
mostraMenu();
}
}
void comandoSu() {
if (schermata != 0) {
return;
}
if (voceSelezionata == 0) {
voceSelezionata = numeroVoci - 1;
} else {
voceSelezionata--;
}
mostraMenu();
}
void comandoGiu() {
if (schermata != 0) {
return;
}
voceSelezionata++;
if (voceSelezionata >= numeroVoci) {
voceSelezionata = 0;
}
mostraMenu();
}
void comandoOk() {
if (schermata != 0) {
return;
}
schermata = voceSelezionata + 1;
mostraSchermata();
}
void mostraMenu() {
display.clearDisplay();
display.setTextSize(1);
display.setCursor(0, 0);
display.println("MENU PRINCIPALE");
display.drawLine(0, 10, 127, 10, SSD1306_WHITE);
for (byte i = 0; i < numeroVoci; i++) {
int posizioneY = 16 + (i * 12);
display.setCursor(0, posizioneY);
if (i == voceSelezionata) {
display.print("> ");
} else {
display.print(" ");
}
display.println(vociMenu[i]);
}
display.display();
}
void mostraSchermata() {
display.clearDisplay();
display.setTextSize(1);
switch (schermata) {
case 1:
mostraTemperatura();
break;
case 2:
mostraLuminosita();
break;
case 3:
mostraStatoSistema();
break;
case 4:
mostraInformazioni();
break;
}
display.display();
}
void mostraTemperatura() {
display.setCursor(0, 0);
display.println("TEMPERATURA");
display.drawLine(0, 10, 127, 10, SSD1306_WHITE);
display.setTextSize(2);
display.setCursor(28, 24);
display.print("23.5");
display.print((char)247);
display.println("C");
display.setTextSize(1);
display.setCursor(16, 54);
display.println("INDIETRO: menu");
}
void mostraLuminosita() {
display.setCursor(0, 0);
display.println("LUMINOSITA");
display.drawLine(0, 10, 127, 10, SSD1306_WHITE);
display.setTextSize(2);
display.setCursor(42, 24);
display.println("75%");
display.drawRect(14, 45, 100, 8, SSD1306_WHITE);
display.fillRect(16, 47, 72, 4, SSD1306_WHITE);
display.setTextSize(1);
display.setCursor(16, 56);
display.println("INDIETRO: menu");
}
void mostraStatoSistema() {
display.setCursor(0, 0);
display.println("STATO SISTEMA");
display.drawLine(0, 10, 127, 10, SSD1306_WHITE);
display.setCursor(0, 20);
display.println("Sensori: OK");
display.setCursor(0, 32);
display.println("Memoria: OK");
display.setCursor(0, 44);
display.println("Sistema: ATTIVO");
display.setCursor(16, 56);
display.println("INDIETRO: menu");
}
void mostraInformazioni() {
display.setCursor(0, 0);
display.println("INFORMAZIONI");
display.drawLine(0, 10, 127, 10, SSD1306_WHITE);
display.setCursor(0, 20);
display.println("Arduino UNO");
display.setCursor(0, 32);
display.println("OLED SSD1306");
display.setCursor(0, 44);
display.println("Progetto 122");
display.setCursor(16, 56);
display.println("INDIETRO: menu");
}
==================================================
Progetto 122 - Display OLED con menu navigabile
Menu interattivo con OLED SSD1306 e quattro pulsanti
==================================================
*/
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#define LARGHEZZA_DISPLAY 128
#define ALTEZZA_DISPLAY 64
#define RESET_OLED -1
Adafruit_SSD1306 display(
LARGHEZZA_DISPLAY,
ALTEZZA_DISPLAY,
&Wire,
RESET_OLED
);
const byte pulsanteSu = 2;
const byte pulsanteGiu = 3;
const byte pulsanteOk = 4;
const byte pulsanteIndietro = 5;
const byte numeroVoci = 4;
byte voceSelezionata = 0;
byte schermata = 0;
unsigned long ultimoComando = 0;
const unsigned long tempoDebounce = 180;
const char* vociMenu[numeroVoci] = {
"Temperatura",
"Luminosita",
"Stato sistema",
"Informazioni"
};
void setup() {
pinMode(pulsanteSu, INPUT_PULLUP);
pinMode(pulsanteGiu, INPUT_PULLUP);
pinMode(pulsanteOk, INPUT_PULLUP);
pinMode(pulsanteIndietro, INPUT_PULLUP);
if (!display.begin(
SSD1306_SWITCHCAPVCC,
0x3C
)) {
while (true) {
}
}
display.clearDisplay();
display.setTextColor(SSD1306_WHITE);
display.setTextSize(1);
display.setCursor(25, 20);
display.println("Menu Arduino");
display.setCursor(28, 35);
display.println("Progetto 122");
display.display();
delay(1800);
mostraMenu();
}
void loop() {
if (millis() - ultimoComando < tempoDebounce) {
return;
}
if (digitalRead(pulsanteSu) == LOW) {
ultimoComando = millis();
comandoSu();
}
if (digitalRead(pulsanteGiu) == LOW) {
ultimoComando = millis();
comandoGiu();
}
if (digitalRead(pulsanteOk) == LOW) {
ultimoComando = millis();
comandoOk();
}
if (digitalRead(pulsanteIndietro) == LOW) {
ultimoComando = millis();
schermata = 0;
mostraMenu();
}
}
void comandoSu() {
if (schermata != 0) {
return;
}
if (voceSelezionata == 0) {
voceSelezionata = numeroVoci - 1;
} else {
voceSelezionata--;
}
mostraMenu();
}
void comandoGiu() {
if (schermata != 0) {
return;
}
voceSelezionata++;
if (voceSelezionata >= numeroVoci) {
voceSelezionata = 0;
}
mostraMenu();
}
void comandoOk() {
if (schermata != 0) {
return;
}
schermata = voceSelezionata + 1;
mostraSchermata();
}
void mostraMenu() {
display.clearDisplay();
display.setTextSize(1);
display.setCursor(0, 0);
display.println("MENU PRINCIPALE");
display.drawLine(0, 10, 127, 10, SSD1306_WHITE);
for (byte i = 0; i < numeroVoci; i++) {
int posizioneY = 16 + (i * 12);
display.setCursor(0, posizioneY);
if (i == voceSelezionata) {
display.print("> ");
} else {
display.print(" ");
}
display.println(vociMenu[i]);
}
display.display();
}
void mostraSchermata() {
display.clearDisplay();
display.setTextSize(1);
switch (schermata) {
case 1:
mostraTemperatura();
break;
case 2:
mostraLuminosita();
break;
case 3:
mostraStatoSistema();
break;
case 4:
mostraInformazioni();
break;
}
display.display();
}
void mostraTemperatura() {
display.setCursor(0, 0);
display.println("TEMPERATURA");
display.drawLine(0, 10, 127, 10, SSD1306_WHITE);
display.setTextSize(2);
display.setCursor(28, 24);
display.print("23.5");
display.print((char)247);
display.println("C");
display.setTextSize(1);
display.setCursor(16, 54);
display.println("INDIETRO: menu");
}
void mostraLuminosita() {
display.setCursor(0, 0);
display.println("LUMINOSITA");
display.drawLine(0, 10, 127, 10, SSD1306_WHITE);
display.setTextSize(2);
display.setCursor(42, 24);
display.println("75%");
display.drawRect(14, 45, 100, 8, SSD1306_WHITE);
display.fillRect(16, 47, 72, 4, SSD1306_WHITE);
display.setTextSize(1);
display.setCursor(16, 56);
display.println("INDIETRO: menu");
}
void mostraStatoSistema() {
display.setCursor(0, 0);
display.println("STATO SISTEMA");
display.drawLine(0, 10, 127, 10, SSD1306_WHITE);
display.setCursor(0, 20);
display.println("Sensori: OK");
display.setCursor(0, 32);
display.println("Memoria: OK");
display.setCursor(0, 44);
display.println("Sistema: ATTIVO");
display.setCursor(16, 56);
display.println("INDIETRO: menu");
}
void mostraInformazioni() {
display.setCursor(0, 0);
display.println("INFORMAZIONI");
display.drawLine(0, 10, 127, 10, SSD1306_WHITE);
display.setCursor(0, 20);
display.println("Arduino UNO");
display.setCursor(0, 32);
display.println("OLED SSD1306");
display.setCursor(0, 44);
display.println("Progetto 122");
display.setCursor(16, 56);
display.println("INDIETRO: menu");
}
⚙️ Come funziona
All’accensione Arduino inizializza il display OLED e mostra una breve schermata introduttiva.
Successivamente appare il menu principale.
Il simbolo > indica la voce attualmente selezionata.
Premendo il pulsante SU o GIÙ, il cursore si sposta tra le voci disponibili.
Quando si raggiunge l’ultima voce e si preme nuovamente GIÙ, il menu ritorna alla prima voce.
👉 Questa modalità viene chiamata navigazione circolare.
Premendo OK, Arduino apre la schermata associata alla voce selezionata.
Premendo INDIETRO, il sistema ritorna al menu principale.
All’accensione Arduino inizializza il display OLED e mostra una breve schermata introduttiva.
Successivamente appare il menu principale.
Il simbolo > indica la voce attualmente selezionata.
Premendo il pulsante SU o GIÙ, il cursore si sposta tra le voci disponibili.
Quando si raggiunge l’ultima voce e si preme nuovamente GIÙ, il menu ritorna alla prima voce.
👉 Questa modalità viene chiamata navigazione circolare.
Premendo OK, Arduino apre la schermata associata alla voce selezionata.
Premendo INDIETRO, il sistema ritorna al menu principale.
🖥️ Gestione delle schermate
Il programma utilizza la variabile schermata per capire quale contenuto deve essere mostrato.
Quando il valore è 0, Arduino visualizza il menu principale.
Gli altri valori identificano le diverse schermate:
Questa organizzazione permette di aggiungere facilmente nuove voci e nuovi sottomenu.
Il programma utilizza la variabile schermata per capire quale contenuto deve essere mostrato.
Quando il valore è 0, Arduino visualizza il menu principale.
Gli altri valori identificano le diverse schermate:
- 1 → temperatura
- 2 → luminosità
- 3 → stato del sistema
- 4 → informazioni
Questa organizzazione permette di aggiungere facilmente nuove voci e nuovi sottomenu.
⏱️ Gestione dell’antirimbalzo
I pulsanti meccanici possono generare più impulsi durante una sola pressione.
Per evitare che il menu scorra troppo velocemente, il programma accetta un nuovo comando soltanto dopo un breve intervallo di tempo.
const unsigned long tempoDebounce = 180;
Il controllo viene effettuato attraverso la funzione millis(), senza bloccare completamente il programma.
I pulsanti meccanici possono generare più impulsi durante una sola pressione.
Per evitare che il menu scorra troppo velocemente, il programma accetta un nuovo comando soltanto dopo un breve intervallo di tempo.
const unsigned long tempoDebounce = 180;
Il controllo viene effettuato attraverso la funzione millis(), senza bloccare completamente il programma.
🧠 Perché è un progetto importante
Con questo progetto impari a:
👉 Questa struttura potrà essere riutilizzata nei prossimi progetti con sensori, relè, RTC e sistemi domotici.
Con questo progetto impari a:
- utilizzare un display OLED SSD1306
- installare e utilizzare librerie esterne
- mostrare testi su un display grafico
- gestire più pulsanti con INPUT_PULLUP
- creare un menu navigabile
- organizzare più schermate
- utilizzare la funzione millis()
- realizzare un’interfaccia moderna per Arduino
👉 Questa struttura potrà essere riutilizzata nei prossimi progetti con sensori, relè, RTC e sistemi domotici.
🔄 Varianti possibili
Vuoi migliorare il progetto?
Vuoi migliorare il progetto?
- 🌡️ collega un sensore DHT11 o DHT22
- 💡 mostra il valore reale di una fotoresistenza
- 🎚️ sostituisci i pulsanti con un encoder rotativo
- 📊 aggiungi barre grafiche e icone
- 💾 salva le impostazioni nella memoria EEPROM
- 🔔 aggiungi un suono alla pressione dei pulsanti
- ⏰ aggiungi data e ora tramite RTC DS3231
- 📋 crea sottomenu con più livelli