ESP32 - Tastenanzahl - OLED

In diesem Tutorial werden wir den ESP32 untersuchen, um die folgenden Ziele zu erreichen:

Die Anzahl der Tastendrücke zählen.
Den Zählwert auf einem OLED-Display anzeigen.
Die automatische vertikale und horizontale Zentrierung des Zählwerts auf dem OLED-Display implementieren.

Zusätzlich behandelt das Tutorial die Entprellung der Taste, ohne die delay()-Funktion zu verwenden. Um zu verstehen, warum Entprellung wichtig ist, verweisen Sie auf die in Warum brauchen wir Entprellung? bereitgestellte Erklärung.

Dieser umfassende Leitfaden hilft Ihnen, das Zählen von Tastendrücken, die OLED-Display-Funktionalität und Entprelltechniken nahtlos in Ihr ESP32-Projekt zu integrieren.

Erforderliche Hardware

1	×	ESP32 ESP-WROOM-32 Entwicklungsmodul
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	×	Breadboard-Taster mit Kappe
1	×	Breadboard-Taster-Kit
1	×	Panel-Drucktaster
1	×	Taster-Modul
1	×	SSD1306 I2C OLED-Display 128x64
1	×	SSD1306 I2C OLED-Display 128x32
1	×	Breadboard
1	×	Verbindungskabel
1	×	(Empfohlen) Schraubklemmen-Erweiterungsboard für ESP32
1	×	(Empfohlen) Breakout Expansion Board for ESP32
1	×	(Empfohlen) Stromverteiler für ESP32

Oder Sie können die folgenden Kits kaufen:

1	×	DIYables ESP32 Starter-Kit (ESP32 enthalten)
1	×	DIYables Sensor-Kit (30 Sensoren/Displays)
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.

Über OLED und Button

Bist du mit OLED-Displays und Tastern nicht vertraut, einschließlich ihrer Pinbelegungen, Funktionsweisen und Programmierung? Erkunde umfassende Tutorials zu diesen Themen unten:

Verdrahtungsdiagramm

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

Wenn Sie nicht wissen, wie Sie ESP32 und andere Komponenten mit Strom versorgen, finden Sie Anleitungen im folgenden Tutorial: Wie man ESP32 mit Strom versorgt.

ESP32-Code – Anzeige der Anzahl der Tasten auf dem OLED-Display

/* * Dieser ESP32 Code wurde von newbiely.de entwickelt * Dieser ESP32 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/esp32-button-count-oled */ #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> #include <ezButton.h> #define SCREEN_WIDTH 128 // OLED display width, in pixels #define SCREEN_HEIGHT 64 // OLED display height, in pixels Adafruit_SSD1306 oled(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1); // create SSD1306 display object connected to I2C ezButton button(27); // create ezButton object that attach to the ESP32 pin GPIO27 unsigned long lastCount = 0; void setup() { Serial.begin(9600); // initialize OLED display with address 0x3C for 128x64 if (!oled.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { Serial.println(F("SSD1306 allocation failed")); while (true); } delay(2000); // wait for initializing oled.clearDisplay(); // clear display oled.setTextSize(2); // text size oled.setTextColor(WHITE); // text color oled.setCursor(0, 10); // position to display button.setDebounceTime(50); // set debounce time to 50 milliseconds button.setCountMode(COUNT_FALLING); } void loop() { button.loop(); // MUST call the loop() function first unsigned long count = button.getCount(); if (lastCount != count) { Serial.println(count); // print count to Serial Monitor oled.clearDisplay(); // clear display oled.println(count); // display count oled.display(); // show on OLED lastCount != count; } }

Schnelle Schritte

Wenn dies das erste Mal ist, dass Sie ESP32 verwenden, lesen Sie wie man die Umgebung für ESP32 in der Arduino IDE einrichtet.
Verkabeln Sie es gemäß dem obigen Bild.
Schließen Sie das ESP32-Board über ein Micro-USB-Kabel an Ihren PC an.
Öffnen Sie die Arduino IDE auf Ihrem PC.
Wählen Sie das richtige ESP32-Board (z. B. ESP32 Dev Module) und den COM-Port aus.
Klicken Sie auf das Libraries-Symbol in der linken Leiste der Arduino IDE.
Suchen Sie “ezButton”, und finden Sie anschließend die Button-Bibliothek von ArduinoGetStarted.
Klicken Sie auf die Install-Schaltfläche, um die ezButton-Bibliothek zu installieren.

Suchen Sie “SSD1306”, und finden Sie die SSD1306-Bibliothek von Adafruit
Klicken Sie auf die Schaltfläche Installieren, um die Bibliothek zu installieren.

Sie werden aufgefordert, weitere Bibliotheksabhängigkeiten zu installieren.
Klicken Sie auf die Schaltfläche Alle installieren, um alle Bibliotheksabhängigkeiten zu installieren.

Kopieren Sie den obigen Code und öffnen Sie ihn mit der Arduino-IDE
Klicken Sie in der Arduino-IDE auf die Hochladen-Schaltfläche, um den Code auf den ESP32 hochzuladen
Drücken Sie den Knopf mehrmals
Sehen Sie, wie sich die Zählzahl auf dem OLED ändert

Der obige Code zeigt nur die Anzahl der Buttonklicks oben links an. Lassen Sie uns den Code so ändern, dass er zentriert wird!

ESP32-Code - Vertikale und horizontale Zentrierung auf dem OLED

/* * Dieser ESP32 Code wurde von newbiely.de entwickelt * Dieser ESP32 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/esp32-button-count-oled */ #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> #include <ezButton.h> #define SCREEN_WIDTH 128 // OLED display width, in pixels #define SCREEN_HEIGHT 64 // OLED display height, in pixels Adafruit_SSD1306 oled(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1); // create SSD1306 display object connected to I2C ezButton button(27); // create ezButton object that attach to the ESP32 pin GPIO27 unsigned long lastCount = 0; void setup() { Serial.begin(9600); // initialize OLED display with address 0x3C for 128x64 if (!oled.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { Serial.println(F("SSD1306 allocation failed")); while (true); } delay(2000); // wait for initializing oled.clearDisplay(); // clear display oled.setTextSize(2); // text size oled.setTextColor(WHITE); // text color oled.setCursor(0, 10); // position to display button.setDebounceTime(50); // set debounce time to 50 milliseconds button.setCountMode(COUNT_FALLING); } void loop() { button.loop(); // MUST call the loop() function first unsigned long count = button.getCount(); if (lastCount != count) { Serial.println(count); // print count to Serial Monitor String text = String(count); oledDisplayCenter(text); lastCount != count; } } void oledDisplayCenter(String text) { int16_t x1; int16_t y1; uint16_t width; uint16_t height; oled.getTextBounds(text, 0, 0, &x1, &y1, &width, &height); // display on horizontal and vertical center oled.clearDisplay(); // clear display oled.setCursor((SCREEN_WIDTH - width) / 2, (SCREEN_HEIGHT - height) / 2); oled.println(text); // text to display oled.display(); }

※ Notiz:

Der obige Code zentriert den Text automatisch horizontal und vertikal auf dem OLED-Display. Siehe Wie man Text auf dem OLED vertikal und horizontal zentriert für weitere Details.

Video Tutorial

Wir erwägen die Erstellung von Video-Tutorials. Wenn Sie Video-Tutorials für wichtig halten, abonnieren Sie bitte unseren YouTube-Kanal , um uns zu motivieren, die Videos zu erstellen.