ESP8266 - Tastenzähler - OLED

Dieses Tutorial zeigt dir, wie man den ESP8266 und einen Knopf verwendet, um die Tastendrücke zu zählen und den Wert anschließend auf dem OLED-Display anzuzeigen. Im Detail:

Der ESP8266 zählt, wie oft ein Knopf gedrückt wird.
Der ESP8266 zeigt die Zählzahl auf dem OLED-Display an.
Der ESP8266 richtet die Zählzahl automatisch horizontal und vertikal im OLED-Display zentriert aus.

In diesem Tutorial werden wir einen Taster entprellen, ohne die delay()-Funktion zu verwenden. Für weitere Informationen darüber, warum Entprellen notwendig ist, siehe Warum brauchen wir Entprellen?

Sie können dies so anpassen, dass es mit verschiedenen Sensoren funktioniert, statt des Knopfes.

Erforderliche Hardware

1	×	ESP8266 NodeMCU
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 ESP8266
1	×	(Empfohlen) Stromverteiler für ESP8266 Typ-C

Oder Sie können die folgenden Kits kaufen:

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

Wenn Sie mit OLED und Button (Pinbelegung, Funktionsweise, Programmierung ...) nicht vertraut sind, können Ihnen die folgenden Tutorials helfen:

Verdrahtungsdiagramm

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

Weitere Informationen finden Sie unter ESP8266-Pinbelegung und wie man ESP8266 und andere Komponenten mit Strom versorgt.

ESP8266-Code - Anzeige der Anzahl der Tasten auf dem OLED-Display

/* * Dieser ESP8266 NodeMCU Code wurde von newbiely.de entwickelt * Dieser ESP8266 NodeMCU 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/esp8266/esp8266-button-count-oled */ #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> #include <ezButton.h> #define OLED_WIDTH 128 // OLED display width, in pixels #define OLED_HEIGHT 64 // OLED display height, in pixels Adafruit_SSD1306 oled(OLED_WIDTH, OLED_HEIGHT, &Wire, -1); // create SSD1306 display object connected to I2C ezButton button(7); // create ezButton object for pin 7; unsigned long prev_count = 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 (prev_count != count) { Serial.println(count); // print count to Serial Monitor oled.clearDisplay(); // clear display oled.println(count); // display count oled.display(); // show on OLED prev_count != count; } }

Schnelle Schritte

Um mit dem ESP8266 in der Arduino-IDE zu beginnen, folgen Sie diesen Schritten:

Schau dir das Tutorial zur Einrichtung der Umgebung für ESP8266 in der Arduino IDE an, falls du ESP8266 zum ersten Mal verwendest.
Verbinde die Bauteile entsprechend dem Diagramm.
Verbinde das ESP8266-Board mit deinem Computer über ein USB-Kabel.
Öffne die Arduino IDE auf deinem Computer.
Wähle das richtige ESP8266-Board, zum Beispiel (z. B. NodeMCU 1.0 (ESP-12E Module)), und seinen jeweiligen COM-Port.
Klicke auf das Libraries-Symbol in der linken Leiste der Arduino IDE.
Suche nach “ezButton”, und finde dann die von ArduinoGetStarted bereitgestellte ezButton-Bibliothek.
Drücke die Install-Schaltfläche, um die ezButton-Bibliothek zu installieren.

Suchen Sie nach „SSD1306“ und finden Sie die von Adafruit erstellte SSD1306-Bibliothek.
Klicken Sie auf die Install-Schaltfläche, um die Bibliothek hinzuzufügen.

Sie werden aufgefordert, zusätzliche Bibliotheksabhängigkeiten zu installieren.
Um alle zu installieren, klicken Sie auf die Alle installieren Schaltfläche.

ESP8266 NodeMCU Adafruit GFX-Sensor-Bibliothek

Kopiere den Code und öffne ihn mit der Arduino IDE.
Drücke den Hochladen-Button in der Arduino IDE, um den Code zu kompilieren und auf den ESP8266 zu übertragen.
Drücke den Knopf mehrmals.
Sieh dir den sich ändernden Zählwert auf dem OLED an.

Der Code oben zeigt die Anzahl der Tastendrücke in der oberen linken Ecke. Lassen wir es zentrieren!

ESP8266-Code - Vertikale und horizontale Zentrierung auf dem OLED-Display

/* * Dieser ESP8266 NodeMCU Code wurde von newbiely.de entwickelt * Dieser ESP8266 NodeMCU 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/esp8266/esp8266-button-count-oled */ #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> #include <ezButton.h> #define OLED_WIDTH 128 // OLED display width, in pixels #define OLED_HEIGHT 64 // OLED display height, in pixels Adafruit_SSD1306 oled(OLED_WIDTH, OLED_HEIGHT, &Wire, -1); // create SSD1306 display object connected to I2C ezButton button(7); // create ezButton object for pin 7; unsigned long prev_count = 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 (prev_count != count) { Serial.println(count); // print count to Serial Monitor String text = String(count); oled_display_center(text); prev_count != count; } } void oled_display_center(String text) { int16_t x1; int16_t y1; uint16_t width; uint16_t height; oled.getTextBounds(text, 0, 0, &x1, &y1, &width, &height); // center the display both horizontally and vertically oled.clearDisplay(); // clear display oled.setCursor((OLED_WIDTH - width) / 2, (OLED_HEIGHT - height) / 2); oled.println(text); // text to display oled.display(); }

※ Notiz:

Dieser Code zentriert den Text horizontal und vertikal auf einem OLED-Display. Für weitere Informationen verweisen Sie bitte auf Wie man Text vertikal und horizontal auf OLED zentriert.

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.