Tastierino 4×4 con display LCD 16×2 I2C

🚀 Introduzione

In questo progetto utilizzeremo un display LCD 16×2 con interfaccia I2C insieme a un tastierino numerico 4×4.

Il tastierino sarà il nostro dispositivo di input: ogni volta che l’utente preme un tasto, Arduino rileva il carattere corrispondente.

Il display LCD sarà invece il dispositivo di output e mostrerà immediatamente il tasto premuto.

Questo tipo di interfaccia è alla base di moltissimi dispositivi elettronici:

🎯 Cosa imparerai

🧰 Materiale necessario

🔌 Schema di collegamento

Display LCD 16×2 con modulo I2C

Grazie al modulo I2C possiamo controllare il display utilizzando soltanto quattro collegamenti.

Tastierino 4×4

📚 Librerie necessarie

Per compilare il programma servono due librerie principali.

Apri Arduino IDE e vai su:

Cerca quindi le librerie Keypad e LiquidCrystal_I2C, che sono le stesse previste nella pagina originale. :contentReference[oaicite:2]{index=2}

💻 Codice Arduino completo

// ============================================
// Progetto #64
// Tastierino 4x4 + Display LCD 16x2 I2C
//
// Mostra sul display il tasto premuto
// ============================================

#include <Wire.h>
#include <LiquidCrystal_I2C.h>
#include <Keypad.h>

// ============================================
// Configurazione display LCD
// ============================================

// Indirizzo I2C tipico: 0x27
// Display: 16 colonne, 2 righe
LiquidCrystal_I2C lcd(0x27, 16, 2);

// ============================================
// Configurazione tastierino 4x4
// ============================================

const byte ROWS = 4;
const byte COLS = 4;

const char keys[ROWS][COLS] = {

  {'1', '2', '3', 'A'},
  {'4', '5', '6', 'B'},
  {'7', '8', '9', 'C'},
  {'*', '0', '#', 'D'}

};

// Pin collegati alle righe
const byte rowPins[ROWS] = {
  9,
  8,
  7,
  6
};

// Pin collegati alle colonne
const byte colPins[COLS] = {
  5,
  4,
  3,
  2
};

Keypad keypad = Keypad(
  makeKeymap(keys),
  rowPins,
  colPins,
  ROWS,
  COLS
);

// ============================================
// Setup
// ============================================

void setup() {

  // Inizializza LCD
  lcd.init();

  // Accende retroilluminazione
  lcd.backlight();

  // Messaggio iniziale
  lcd.setCursor(0, 0);
  lcd.print("Premi un tasto");

  lcd.setCursor(0, 1);
  lcd.print("Keypad pronto");
}

// ============================================
// Loop principale
// ============================================

void loop() {

  // Legge il tastierino
  char key = keypad.getKey();

  // Se è stato premuto un tasto
  if (key != NO_KEY) {

    // Cancella il display
    lcd.clear();

    // Prima riga
    lcd.setCursor(0, 0);
    lcd.print("Tasto premuto:");

    // Seconda riga
    lcd.setCursor(0, 1);
    lcd.print(key);
  }
}

⚙️ Come funziona il programma

Il programma utilizza contemporaneamente tre librerie:

#include <Wire.h>
#include <LiquidCrystal_I2C.h>
#include <Keypad.h>

Wire gestisce la comunicazione I2C, LiquidCrystal_I2C controlla il display e Keypad legge i tasti.

🔢 La mappa del tastierino

La disposizione fisica dei tasti viene descritta da questa matrice:

const char keys[ROWS][COLS] = {

  {'1', '2', '3', 'A'},
  {'4', '5', '6', 'B'},
  {'7', '8', '9', 'C'},
  {'*', '0', '#', 'D'}

};

Ogni posizione della matrice corrisponde a un tasto reale del keypad.

⌨️ Leggere il tasto premuto

La funzione fondamentale è:

char key = keypad.getKey();

Se nessun tasto è premuto, la libreria restituisce:

NO_KEY

Per questo utilizziamo:

if (key != NO_KEY)

Il codice all’interno della condizione viene quindi eseguito solo quando l’utente preme realmente un tasto.

📟 Inizializzare il display

Nel setup() utilizziamo:

lcd.init();
lcd.backlight();

lcd.init() inizializza il display mentre lcd.backlight() accende la retroilluminazione.

📍 Posizionare il cursore

Il display LCD 16×2 possiede:

Per scegliere dove scrivere utilizziamo:

lcd.setCursor(colonna, riga);

Per esempio:

lcd.setCursor(0, 1);

posiziona il cursore sulla prima colonna della seconda riga.

🖨️ Visualizzare il carattere

Quando viene rilevato un tasto eseguiamo:

lcd.print(key);

Se premiamo:

il display mostrerà:

Tasto premuto:
7

Questo è lo stesso principio della pagina originale, che legge il keypad tramite getKey() e stampa il carattere sul display. :contentReference[oaicite:3]{index=3}

🧹 Perché usiamo lcd.clear()

Prima di visualizzare un nuovo carattere eseguiamo:

lcd.clear();

Questo cancella il contenuto precedente e impedisce che rimangano caratteri vecchi sul display.

🔍 Se il display non mostra nulla

Uno dei problemi più frequenti con i display I2C riguarda l’indirizzo.

Nel codice utilizziamo:

LiquidCrystal_I2C lcd(0x27, 16, 2);

0x27 è molto comune, ma alcuni moduli utilizzano un indirizzo diverso, per esempio:

0x3F

🔧 Regolare il contrasto

Sul modulo I2C del display è generalmente presente un piccolo trimmer.

Se la retroilluminazione funziona ma non vedi i caratteri, prova a ruotarlo lentamente con un piccolo cacciavite.

🔄 Visualizzare più caratteri

Nel progetto base mostriamo soltanto l’ultimo tasto premuto.

Ma possiamo modificare il programma per costruire una sequenza, per esempio:

Questa sarà la base perfetta per creare:

⭐ Usare * per cancellare

Possiamo assegnare al tasto * la funzione di cancellazione.

Per esempio:

if (key == '*') {

  lcd.clear();

}

In questo modo il tastierino inizia a comportarsi come una vera interfaccia utente.

#️⃣ Usare # per confermare

Il tasto # può essere utilizzato come pulsante di conferma.

Una futura interfaccia potrebbe funzionare così:

È la stessa logica che abbiamo già utilizzato nei progetti dedicati alla password.

🅰️ Usare i tasti A, B, C e D

I quattro tasti laterali possono diventare comandi speciali.

Questo rende il keypad molto più interessante di un semplice tastierino numerico.

📋 Creare un menu interattivo

Il display può mostrare diverse opzioni:

1. Temperatura
2. Umidita
3. Impostazioni

L’utente può scegliere una funzione premendo il numero corrispondente.

🔐 Password con display

Un’evoluzione naturale consiste nell’unire questo progetto al sistema password.

Il display potrebbe mostrare:

Inserisci PIN:
****

e successivamente:

Anche la pagina originale individua il sistema password con display come una possibile evoluzione del progetto. :contentReference[oaicite:4]{index=4}

⚠️ Problemi comuni

🔄 Varianti possibili

🧠 Cosa impari con questo progetto

✅ Cosa devi ricordare