ESP32 S3 - Tastenfeld - LCD

Ein Tastenfeld in Kombination mit einem LCD-I2C-Display gibt dem ESP32 S3 eine vollständige Mensch-Maschine-Schnittstelle – der Benutzer drückt eine Taste und das Board zeigt das Ergebnis auf dem Bildschirm an, ohne dass ein Laptop oder der serielle Monitor benötigt wird. Dieses Tutorial führt Sie durch das Anschließen beider Komponenten an den ESP32 S3 und das Schreiben des Arduino-Codes, der jeden Tastendruck erfasst und live auf dem LCD darstellt.

Was Sie umsetzen werden:

  1. Eine Schaltung, die ein 3x4- oder 4x4-Matrix-Tastenfeld und ein LCD-I2C-Display mit dem ESP32 S3 verbindet
  2. Einen Sketch, der jeden Tastendruck erkennt und das LCD sofort mit dem gedrückten Zeichen aktualisiert
  3. Eine eigenständige Eingabeanzeige, die nach dem Hochladen unabhängig von einem Computer funktioniert
  4. Eine wiederverwendbare Grundlage für PIN-Eingabefelder, Menüsysteme und interaktive Eingabeschnittstellen

Erforderliche Hardware

1×ESP32 S3 WROOM N16R8
1×(Alternativ) ESP32 S3 SuperMini Dev Module
1×(Alternativ) ESP32 S3 Uno-form Board
1×(Alternativ) ESP32 S3 Camera Board
1×USB-Kabel Typ-A zu Typ-C (für USB-A PC)
1×USB-Kabel Typ-C zu Typ-C (für USB-C PC)
1×LCD I2C Display 3.3V
1×(Alternativ) LCD I2C 20x4
1×Tastenfeld 3x4 and 4x4 Kit
1×(Alternativ) Tastenfeld 3x4
1×(Alternativ) Tastenfeld 4x4
1×Breadboard
1×Verbindungskabel
1×(Optional) DC-Stromanschluss
1×(Empfohlen) Screw Terminal Expansion Board for ESP32 S3
1×(Empfohlen) Breakout Expansion Board for ESP32 S3
1×(Empfohlen) Power Splitter for ESP32 S3

Oder Sie können die folgenden Kits kaufen:

1×DIYables ESP32 S3 Starter-Kit (ESP32 S3 enthalten)
1×DIYables Sensor-Kit (18 Sensoren/Displays)
Offenlegung: Einige der in diesem Abschnitt bereitgestellten Links sind Amazon-Affiliate-Links. Wir können eine Provision für Käufe erhalten, die über diese Links getätigt werden, ohne zusätzliche Kosten für Sie. Wir schätzen Ihre Unterstützung.

Kaufhinweis: Die meisten LCD I2C-Displays auf dem Markt sind 5V-Displays. Sie funktionieren möglicherweise mit diesem Board, aber das ist nicht sicher und kann das Board beschädigen. Wir empfehlen dringend, das oben empfohlene 3.3V LCD I2C-Display zu verwenden.

Überblick über Keypad and LCD

Ein Matrix-Tastenfeld codiert Tastendrücke, indem es Reihen und Spalten abfragt, sodass viele Tasten über nur wenige GPIO-Pins gelesen werden können – eine effiziente Möglichkeit, jedem ESP32-S3-Projekt eine physische Eingabe hinzuzufügen. In Kombination mit einem LCD-I2C-Display schließt sich der Rückmeldekreis, denn der Benutzer erhält eine sofortige, sichtbare Bestätigung dessen, was er eingegeben hat – ganz ohne Fenster des seriellen Monitors.

Wichtige Spezifikationen

Wir haben eigene Tutorials, die jede Komponente ausführlich behandeln. Jedes Tutorial enthält detaillierte Informationen und Schritt-für-Schritt-Anleitungen zu Pinbelegung, Funktionsprinzip, Verdrahtung mit dem ESP32 S3 und Arduino-Code. Mehr dazu erfahren Sie unter den folgenden Links:

Verdrahtungsdiagramm

Verbinden Sie die Reihen- und Spalten-Pins des Tastenfelds mit den GPIOs des ESP32 S3 und schließen Sie das LCD-I2C-Modul an den I2C-Bus des Boards an, bevor Sie irgendetwas einschalten. Überprüfen Sie jede Verbindung anhand der folgenden Schaltpläne und achten Sie besonders auf das VCC-Kabel des LCD – es muss an die 5-V-Schiene und nicht an 3,3 V angeschlossen werden, damit das Display richtig funktioniert.

  • Schaltplan zwischen ESP32 S3 und Tastenfeld 3x4
ESP32 S3 Tastenfeld 3x4 LCD Schaltplan

Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.

Möchten Sie eine festere Verbindung als mit Jumperkabeln? Probieren Sie ein Schraubklemmen-Board für ESP32 S3: Der ESP32 S3 sitzt darauf, und jeder Pin bekommt seine eigene Schraubklemme. Unten sehen Sie das Verdrahtungsdiagramm mit dem Schraubklemmen-Board.

ESP32 S3 Tastenfeld 3x4 LCD Schaltplan (Screw Terminal)

Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.

Ein GPIO-Breakout-Board für ESP32 S3 geht ebenfalls. Neben den S-, 3,3V- und GND-Pins für jeden GPIO hat es zusätzliche 3,3V- und 5V-Pins:

ESP32 S3 Tastenfeld 3x4 LCD Schaltplan (GPIO Breakout Board)

Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.

  • Schaltplan zwischen ESP32 S3 und Tastenfeld 4x4
ESP32 S3 Tastenfeld LCD Schaltplan

Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.

Eine Schraubklemme hält jedes Kabel fest, auch wenn die Platine wackelt. Stecken Sie dazu den ESP32 S3 auf ein Schraubklemmen-Board für ESP32 S3. So sieht es mit dem Schraubklemmen-Board aus:

ESP32 S3 Tastenfeld LCD Schaltplan (Screw Terminal)

Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.

Ein GPIO-Breakout-Board für ESP32 S3 geht ebenfalls. Neben den S-, 3,3V- und GND-Pins für jeden GPIO hat es zusätzliche 3,3V- und 5V-Pins:

ESP32 S3 Tastenfeld LCD Schaltplan (GPIO Breakout Board)

Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.

Sicherheitshinweise

Verbinden Sie den VCC-Pin des LCD I2C immer mit der 5-V-Schiene (VBUS) statt mit der 3,3-V-Schiene – die Hintergrundbeleuchtung und die Treiberschaltung des LCD benötigen 5 V und liefern bei niedrigeren Spannungen eine schwache oder gar keine Anzeige. Die Signalleitungen des Tastenfelds arbeiten mit 3,3-V-Logik, die die GPIOs des ESP32 S3 direkt verarbeiten, sodass zwischen Tastenfeld und Board keine Pegelwandlung nötig ist.

Komponente Pin ESP32-S3-Pin
Tastenfeld 3x4 Reihe 1 GPIO1
Tastenfeld 3x4 Reihe 2 GPIO2
Tastenfeld 3x4 Reihe 3 GPIO42
Tastenfeld 3x4 Reihe 4 GPIO41
Tastenfeld 3x4 Spalte 1 GPIO40
Tastenfeld 3x4 Spalte 2 GPIO39
Tastenfeld 3x4 Spalte 3 GPIO38
LCD I2C VCC 5V
LCD I2C GND GND
LCD I2C SCL GPIO9 (I2C-Takt)
LCD I2C SDA GPIO8 (I2C-Daten)

ESP32-S3-Code - Tastenfeld 3x4 - LCD I2C

Der folgende Code initialisiert das 3x4-Tastenfeld und das LCD-I2C-Display und läuft dann in einer Schleife, die das Tastenfeld auf gedrückte Tasten abfragt und diese in Echtzeit auf dem LCD ausgibt. Er verwendet die Keypad-Bibliothek von Mark Stanley und Alexander Brevig für die Matrixabfrage und die DIYables-LCD-I2C-Bibliothek, damit Displayaktualisierungen mit einem einzigen, gut lesbaren Funktionsaufruf erfolgen.

/* * Dieser ESP32 S3 Code wurde von newbiely.de entwickelt * Dieser ESP32 S3 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt. * Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte: * https://newbiely.de/tutorials/esp32-s3/esp32-s3-keypad-lcd */ /* * This ESP32-S3 code is created by esp32io.com * * This ESP32-S3 code is released in the public domain * * For more detail (instruction and wiring diagram), visit https://esp32io.com/tutorials/esp32-s3-keypad-lcd */ #include <Keypad.h> #include <DIYables_LCD_I2C.h> #define ROW_NUM 4 // four rows #define COLUMN_NUM 3 // three columns char keys[ROW_NUM][COLUMN_NUM] = { {'1', '2', '3'}, {'4', '5', '6'}, {'7', '8', '9'}, {'*', '0', '#'} }; byte pin_rows[ROW_NUM] = {1, 2, 42, 41}; // GPIO1, GPIO2, GPIO42, GPIO41 connect to the row pins byte pin_column[COLUMN_NUM] = {40, 39, 38}; // GPIO40, GPIO39, GPIO38 connect to the column pins Keypad keypad = Keypad(makeKeymap(keys), pin_rows, pin_column, ROW_NUM, COLUMN_NUM ); DIYables_LCD_I2C lcd(0x27, 16, 2); // I2C address 0x27 (from DIYables LCD), 16 column and 2 rows int cursorColumn = 0; void setup(){ lcd.init(); // initialize the lcd lcd.backlight(); } void loop(){ char key = keypad.getKey(); if (key) { lcd.setCursor(cursorColumn, 0); // move cursor to (cursorColumn, 0) lcd.print(key); // print key at (cursorColumn, 0) cursorColumn++; // move cursor to next position if(cursorColumn == 16) { // if reaching limit, clear LCD lcd.clear(); cursorColumn = 0; } } }

※ Notiz:

Die I2C-Adresse des LCD kann je nach Hersteller unterschiedlich sein. Im Code haben wir die Adresse 0x27 verwendet, die vom Hersteller DIYables angegeben wird. Wenn Ihr LCD nichts anzeigt, versuchen Sie stattdessen die Adresse 0x3F.

Schnelle Schritte

  1. Neu beim ESP32 S3? Arbeiten Sie zuerst unsere Anleitung Erste Schritte mit dem ESP32 S3 durch.
  2. Verdrahten Sie das Tastenfeld und das LCD I2C gemäß dem obigen Schaltplan mit dem ESP32 S3.
  3. Verbinden Sie das ESP32-S3-Board über ein USB-Type-C-Kabel mit Ihrem PC.
  4. Öffnen Sie die Arduino IDE auf Ihrem PC.
  5. Wählen Sie im Menü Tools das richtige ESP32-S3-Board und den richtigen COM-Port aus.
  6. Klicken Sie auf das Symbol Libraries in der linken Leiste der Arduino IDE.
  7. Geben Sie "keypad" in das Suchfeld ein und suchen Sie die Keypad-Bibliothek von DIYables.
  8. Klicken Sie auf die Schaltfläche Install, um die Keypad-Bibliothek zu installieren.
  • Search for DIYables_Keypad created by DIYables.io and click the Install button.
∞
Newbiely | Arduino IDE 2.3.8
──
☐
✕
File
Edit
Sketch
Tools
Help
ESP32S3 Dev Module
Library Manager
Type:
All
Topic:
All
DIYables_Keypad by DIYables.io
The library is designed for Arduino, ESP32, ESP8266... to use with keypad such as 3x4, 4x4 keypad. It also works with Arduino Uno R4 WiFi/Minima More info
1.0.1
INSTALL
Newbiely.ino
···
1 void setup() {
Output
Serial Monitor
Ln 1, Col 1
ESP32S3 Dev Module on COM15
1
  1. Geben Sie "DIYables LCD I2C" in das Suchfeld ein und suchen Sie die Bibliothek DIYables_LCD_I2C von DIYables.
  2. Klicken Sie auf die Schaltfläche Install, um die Bibliothek DIYables_LCD_I2C zu installieren.
  • Search for DIYables LCD I2C created by DIYables.io and click the Install button.
∞
Newbiely | Arduino IDE 2.3.8
──
☐
✕
File
Edit
Sketch
Tools
Help
ESP32S3 Dev Module
Library Manager
Type:
All
Topic:
All
DIYables LCD I2C by DIYables.io
This library is designed for HD44780-based I2C LCD displays. It provides LiquidCrystal-compatible API plus helper functions (text alignment, progress bars, predefined custom characters). Supports multiple I2C buses (Wire, Wire1, Wire2) for advanced boards like Arduino Giga, Due, and ESP32. Compatible with all Arduino-based platforms including Arduino Uno, Mega, Nano, ESP32, ESP8266, STM32, and Raspberry Pi Pico. More info
1.0.0
INSTALL
Newbiely.ino
···
1 void setup() {
Output
Serial Monitor
Ln 1, Col 1
ESP32S3 Dev Module on COM15
1
  1. Kopieren Sie den obigen Code und fügen Sie ihn in die Arduino IDE ein.
  2. Klicken Sie auf die Schaltfläche Upload, um den Code zu kompilieren und auf Ihren ESP32 S3 hochzuladen.
Arduino IDE Code hochladen
  1. Drücken Sie einige Tasten auf dem Tastenfeld.
  2. Beobachten Sie, wie die gedrückten Zeichen auf dem LCD-Display erscheinen.
  3. Profi-Tipp: Wenn das LCD nichts anzeigt, stellen Sie das Kontrastpotentiometer auf der Rückseite des LCD-Moduls ein und prüfen Sie, ob die I2C-Adresse im Code zu Ihrem Modul passt (versuchen Sie 0x3F, wenn 0x27 nicht funktioniert). Weitere Hilfe finden Sie unter Fehlerbehebung beim LCD I2C.

Ausgabe im seriellen Monitor

Die folgende Ausgabe des seriellen Monitors zeigt, wie der ESP32 S3 Tastendrücke des 3x4-Tastenfelds erkennt und jedes gedrückte Zeichen ausgibt. Jede Zeile hat einen Zeitstempel, sodass Sie überprüfen können, dass jeder Tastendruck sofort und in der richtigen Reihenfolge erfasst wird.

∞
Newbiely | Arduino IDE 2.3.8
──
☐
✕
File
Edit
Sketch
Tools
Help
ESP32S3 Dev Module
Newbiely.ino
···
8 Serial.println("Hello World!");
Output
Serial Monitor
Message (Enter to send message to 'ESP32S3 Dev Module' on 'COM15')
New Line
9600 baud
[2026-06-16 10:22:01] Key pressed: 1 [2026-06-16 10:22:03] Key pressed: 4 [2026-06-16 10:22:05] Key pressed: * [2026-06-16 10:22:07] Key pressed: #
Ln 11, Col 1
ESP32S3 Dev Module on COM15
2

ESP32-S3-Code - Tastenfeld 4x4 - LCD I2C

Der folgende Code passt die Tastenbelegung und die Pin-Konfiguration für ein 4x4-Matrix-Tastenfeld an und behält dieselbe Logik für das LCD-I2C-Display bei. Der Wechsel von einem 3x4- zu einem 4x4-Tastenfeld fügt die Buchstaben A, B, C und D hinzu und bietet Ihnen so einen größeren Zeichensatz für Menüsysteme oder Zugangskontrollschnittstellen.

/* * Dieser ESP32 S3 Code wurde von newbiely.de entwickelt * Dieser ESP32 S3 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt. * Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte: * https://newbiely.de/tutorials/esp32-s3/esp32-s3-keypad-lcd */ /* * This ESP32-S3 code is created by esp32io.com * * This ESP32-S3 code is released in the public domain * * For more detail (instruction and wiring diagram), visit https://esp32io.com/tutorials/esp32-s3-keypad-lcd */ #include <Keypad.h> #include <DIYables_LCD_I2C.h> #define ROW_NUM 4 // four rows #define COLUMN_NUM 4 // four columns char keys[ROW_NUM][COLUMN_NUM] = { {'1','2','3', 'A'}, {'4','5','6', 'B'}, {'7','8','9', 'C'}, {'*','0','#', 'D'} }; byte pin_rows[ROW_NUM] = {1, 2, 42, 41}; // GPIO1, GPIO2, GPIO42, GPIO41 connect to the row pins byte pin_column[COLUMN_NUM] = {40, 39, 38, 47}; // GPIO40, GPIO39, GPIO38, GPIO47 connect to the column pins Keypad keypad = Keypad(makeKeymap(keys), pin_rows, pin_column, ROW_NUM, COLUMN_NUM ); DIYables_LCD_I2C lcd(0x27, 16, 2); // I2C address 0x27 (from DIYables LCD), 16 column and 2 rows int cursorColumn = 0; void setup(){ lcd.init(); // initialize the lcd lcd.backlight(); } void loop(){ char key = keypad.getKey(); if (key) { lcd.setCursor(cursorColumn, 0); // move cursor to (cursorColumn, 0) lcd.print(key); // print key at (cursorColumn, 0) cursorColumn++; // move cursor to next position if(cursorColumn == 16) { // if reaching limit, clear LCD lcd.clear(); cursorColumn = 0; } } }

Anwendungs- und Projektideen

Sobald Sie mit Ihrem ESP32 S3 Tastenfeldeingaben erfassen und auf dem LCD anzeigen können, lässt sich dieses Projekt zu einer Vielzahl praktischer eingabegesteuerter Anwendungen erweitern.

  1. PIN-Schloss: Erfassen Sie eine Folge von Tastendrücken, vergleichen Sie sie mit einer gespeicherten PIN und entriegeln Sie ein Relais oder Magnetschloss, wenn die Codes übereinstimmen.
  2. Taschenrechner: Werten Sie am Tastenfeld eingegebene Zifferntasten und Operatoren aus, berechnen Sie den Ausdruck und zeigen Sie das Ergebnis auf dem LCD an.
  3. Menünavigationssystem: Blättern Sie mit dem Tastenfeld durch Optionen auf dem LCD und wählen Sie Aktionen aus, etwa das Umschalten von Ausgängen oder das Anpassen von Einstellungen.
  4. Zugangskontroll-Terminal: Protokollieren Sie jeden Tastendruck mit Zeitstempel auf einer SD-Karte und zeigen Sie Meldungen über gewährten oder verweigerten Zugang auf dem LCD an.
  5. Einfaches Alarmpanel: Lassen Sie den Benutzer eine Alarmanlage durch Eingabe eines Codes am Tastenfeld scharf- oder unscharfschalten, wobei Statusmeldungen auf dem LCD angezeigt werden.
  6. Dateneingabe-Terminal: Geben Sie über das Tastenfeld numerische Werte für Sollwerte, Schwellenwerte oder Konfigurationsparameter ein, die im Flash-Speicher abgelegt werden.

Video-Tutorial

Sehen Sie sich unten die Schritt-für-Schritt-Videoanleitung für dieses ESP32-S3-Projekt an.

Fordern Sie sich selbst heraus

Nachdem Tastendrücke mit Ihrem ESP32 S3 auf dem LCD erscheinen, probieren Sie diese zunehmend schwierigeren Herausforderungen aus, um Ihr Verständnis zu vertiefen und leistungsfähigere Eingabeschnittstellen zu bauen.

  1. Anfänger: Ändern Sie den Sketch so, dass das LCD nach jeweils fünf Tastendrücken gelöscht wird, damit das Display immer nur die neueste Eingabe zeigt.
  2. Anfänger: Fügen Sie eine Rücktaste-Funktion hinzu – ein Druck auf die Sterntaste (*) entfernt das letzte Zeichen vom LCD-Display.
  3. Fortgeschritten: Implementieren Sie eine einfache vierstellige PIN-Prüfung: Erfassen Sie vier Tastendrücke, vergleichen Sie das Ergebnis mit einer gespeicherten PIN und zeigen Sie "ACCESS GRANTED" oder "ACCESS DENIED" auf dem LCD an.
  4. Fortgeschritten: Fügen Sie ein Timeout hinzu, sodass das LCD automatisch gelöscht wird, wenn innerhalb von zehn Sekunden keine Taste gedrückt wird – das schützt sensible Eingaben in einer gemeinsam genutzten Umgebung.
  5. Experte: Bauen Sie einen Taschenrechner, der einfache, am Tastenfeld eingegebene Rechenausdrücke auswertet und das Ergebnis in der zweiten Zeile des LCD anzeigt.
  6. Experte: Speichern Sie eine vom Benutzer konfigurierbare PIN im Flash-Speicher des ESP32 S3, damit sie Stromunterbrechungen übersteht, und fügen Sie einen Einrichtungsmodus hinzu, mit dem der Benutzer die PIN über das Tastenfeld selbst ändern kann.

※ UNSERE NACHRICHTEN

  • Sie können gerne den Link zu diesem Tutorial teilen. Bitte verwenden Sie jedoch unsere Inhalte nicht auf anderen Websites. Wir haben viel Mühe und Zeit in die Erstellung der Inhalte investiert, bitte respektieren Sie unsere Arbeit!