ESP32 - Knop Tellen - OLED
In deze handleiding gaan we de ESP32 gebruiken om de volgende doelen te bereiken:
- Het tellen van het aantal keren dat een knop wordt ingedrukt.
- Het weergeven van het aantal drukken op een OLED-display.
- Het automatisch verticaal en horizontaal centreren van het getal op het OLED-display.
Daarnaast behandelt deze tutorial het debouncen (ontkoppelen) van de knop zonder gebruik te maken van de delay() functie. Voor een uitleg over waarom debouncen noodzakelijk is, verwijzen we u naar Waarom hebben we debouncing nodig?.
Deze uitgebreide gids helpt u om het tellen van knopdrukken, OLED-display functionaliteit en debouncen technieken naadloos te integreren in uw ESP32-project.
Hardware Benodigd
Of u kunt de volgende kits kopen:
| 1 | × | DIYables Sensorkit (30 sensoren/displays) | |
| 1 | × | DIYables Sensorkit (18 sensoren/displays) |
Openbaarmaking: Sommige van de links in deze sectie zijn Amazon-affiliate links. We kunnen een commissie ontvangen voor aankopen die via deze links worden gedaan, zonder extra kosten voor u. We waarderen uw steun.
Over OLED en Knop
Bent u niet bekend met OLED en knop, inclusief hun pinouts, werking en programmering? Verken onderstaande uitgebreide tutorials over deze onderwerpen:
Bedradingsschema
This image is created using Fritzing. Click to enlarge image
ESP32 Code - knopdrukken aantal weergeven op OLED
/*
* Deze ESP32 code is ontwikkeld door newbiely.nl
* Deze ESP32 code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/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;
}
}
Snelle Stappen
- Als u ESP32 voor het eerst gebruikt, bekijk dan hoe u de omgeving instelt voor ESP32 in Arduino IDE.
- Voer de bedrading uit zoals te zien is op bovenstaande afbeelding.
- Verbind de ESP32 board met uw pc via een micro USB-kabel.
- Open Arduino IDE op uw pc.
- Selecteer het juiste ESP32 board (bijv. ESP32 Dev Module) en de juiste COM-poort.
- Klik op het Libraries icoon in de linkerzijbalk van Arduino IDE.
- Zoek op “ezButton” en selecteer de button library van ArduinoGetStarted.
- Klik op de Installeren knop om de ezButton library te installeren.
- Zoek op “SSD1306” en vind de SSD1306 library van Adafruit.
- Klik op de Installeren knop om de bibliotheek te installeren.
- Er zal gevraagd worden om enkele andere bibliotheekafhankelijkeheden te installeren.
- Klik op de Alles installeren knop om alle bibliotheekafhankelijkeheden te installeren.
- Kopieer bovenstaande code en open deze met Arduino IDE.
- Klik op de Uploaden knop in Arduino IDE om de code naar de ESP32 te uploaden.
- Druk een aantal keer op de knop.
- Zie het tellergetal veranderen op het OLED-display.
De bovenstaande code toont alleen het aantal knopdrukken linksboven. Laten we de code aanpassen zodat het getal gecentreerd wordt weergegeven!
ESP32 Code - Verticaal en Horizontaal Centreren op OLED
/*
* Deze ESP32 code is ontwikkeld door newbiely.nl
* Deze ESP32 code wordt zonder enige beperking aan het publiek beschikbaar gesteld.
* Voor volledige instructies en schema's, bezoek:
* https://newbiely.nl/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:
De bovenstaande code centreert automatisch de tekst horizontaal en verticaal op het OLED-display. Zie Hoe centreer ik verticaal/horizontaal op OLED voor meer details.
Video Tutorial
We overwegen het maken van videotutorials. Als u videotutorials belangrijk vindt, abonneer u dan op ons YouTube-kanaal om ons te motiveren de video's te maken.
#