ESP32 - Knop - Lange druk en korte druk
Deze handleiding legt uit hoe u met ESP32 een lange druk en korte druk op een knop kunt detecteren. We leren in detail:
- Hoe u een korte druk op een knop detecteert
- Hoe u een lange druk op een knop detecteert
- Hoe u zowel de lange als korte druk tegelijkertijd kunt detecteren
Hardware Benodigd
Of u kunt de volgende kits kopen:
| 1 | × | DIYables ESP32 Starterskit (ESP32 inbegrepen) | |
| 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 de Knop
We hebben specifieke tutorials over knoppen. Elke tutorial bevat gedetailleerde informatie en stap-voor-stap instructies over de hardware pinout, werkingsprincipe, bedrading met ESP32, ESP32 code... Lees er meer over via de volgende links:
Bedradingsschema
- Bedradingsschema tussen ESP32 en PCB-montage knop
This image is created using Fritzing. Click to enlarge image
Als u niet weet hoe u ESP32 en andere componenten van stroom moet voorzien, vindt u instructies in de volgende tutorial: Hoe ESP32 van stroom te voorzien.
- Bedradingsschema tussen ESP32 en paneelmontage knop
This image is created using Fritzing. Click to enlarge image
In deze handleiding gebruiken we de interne pull-up weerstand. De toestand van de knop is HIGH in rust en LOW wanneer ingedrukt.
Hoe Detecteert u een Korte Druk
- Meet de tijd tussen het indrukken en loslaten van de knop.
- Als de duur korter is dan een vooraf gedefinieerde tijd, wordt een korte druk gedetecteerd.
Laten we stap voor stap bekijken:
- Definieer hoe lang maximaal een korte druk mag duren
#define SHORT_PRESS_TIME 500 // 500 milliseconden
- Detecteer dat de knop wordt ingedrukt en sla de tijd van het indrukken op
if(lastState == HIGH && currentState == LOW)
pressedTime = millis();
- Detecteer dat de knop is losgelaten en sla de tijd van het loslaten op
if(lastState == LOW && currentState == HIGH)
releasedTime = millis();
- Bereken de drukduur en
long pressDuration = releasedTime - pressedTime;
- Bepaal of het een korte druk is door de duur te vergelijken met de gedefinieerde korte druk tijd.
if( pressDuration < SHORT_PRESS_TIME )
Serial.println("A short press is detected");
ESP32 Code voor het detecteren van de korte druk
/*
* 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-long-press-short-press
*/
#define BUTTON_PIN 21 // GPIO21 pin connected to button
#define SHORT_PRESS_TIME 500 // 500 milliseconds
// Variables will change:
int lastState = LOW; // the previous state from the input pin
int currentState; // the current reading from the input pin
unsigned long pressedTime = 0;
unsigned long releasedTime = 0;
void setup() {
Serial.begin(9600);
pinMode(BUTTON_PIN, INPUT_PULLUP);
}
void loop() {
// read the state of the switch/button:
currentState = digitalRead(BUTTON_PIN);
if (lastState == HIGH && currentState == LOW) // button is pressed
pressedTime = millis();
else if (lastState == LOW && currentState == HIGH) { // button is released
releasedTime = millis();
long pressDuration = releasedTime - pressedTime;
if ( pressDuration < SHORT_PRESS_TIME )
Serial.println("A short press is detected");
}
// save the the last state
lastState = currentState;
}
Snelle stappen
- Als u ESP32 voor het eerst gebruikt, bekijk dan hoe u de omgeving instelt voor ESP32 op Arduino IDE.
- Upload bovenstaande code naar de ESP32 via Arduino IDE
- Druk meerdere keren kort op de knop.
- Bekijk het resultaat in de Seriële Monitor. Het ziet er als volgt uit:
COM6
A short press is detected
Autoscroll
Clear output
9600 baud
Newline
※ Notiz:
De Seriële Monitor kan meerdere korte druksignalen tonen bij één drukbeurt. Dit is normaal gedrag van de knop. Dit fenomeen heet het “chattering phenomenon”. We leren later in deze tutorial hoe we dit kunnen oplossen.
Hoe Detecteert u een Lange Druk
Er zijn twee scenario’s voor het detecteren van een lange druk.
- Het lange druk event wordt gedetecteerd zodra de knop wordt losgelaten
- Het lange druk event wordt gedetecteerd tijdens het indrukken van de knop.
In het eerste geval:
- Meet de tijdsduur tussen het indrukken en loslaten.
- Als de duur langer is dan een vooraf gedefinieerde tijd, wordt een lange druk gedetecteerd.
In het tweede geval: tijdens het indrukken van de knop, voer herhaaldelijk de volgende stappen uit:
- Meet de indrukduur
- Als de duur langer is dan de vooraf bepaalde tijd, wordt een lange druk gedetecteerd.
- Zo niet, dan herhaal het totdat de knop wordt losgelaten.
ESP32 Code voor detectie van lange druk na loslaten
/*
* 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-long-press-short-press
*/
#define BUTTON_PIN 21 // GPIO21 pin connected to button
#define LONG_PRESS_TIME 1000 // 1000 milliseconds
// Variables will change:
int lastState = LOW; // the previous state from the input pin
int currentState; // the current reading from the input pin
unsigned long pressedTime = 0;
unsigned long releasedTime = 0;
void setup() {
Serial.begin(9600);
pinMode(BUTTON_PIN, INPUT_PULLUP);
}
void loop() {
// read the state of the switch/button:
currentState = digitalRead(BUTTON_PIN);
if(lastState == HIGH && currentState == LOW) // button is pressed
pressedTime = millis();
else if(lastState == LOW && currentState == HIGH) { // button is released
releasedTime = millis();
long pressDuration = releasedTime - pressedTime;
if( pressDuration > LONG_PRESS_TIME )
Serial.println("A long press is detected");
}
// save the the last state
lastState = currentState;
}
Snelle stappen
- Als u ESP32 voor het eerst gebruikt, bekijk dan hoe u de omgeving instelt voor ESP32 op Arduino IDE.
- Upload bovenstaande code naar de ESP32 via Arduino IDE
- Druk op de knop en laat deze los na één seconde.
- Bekijk het resultaat in de Seriële Monitor. Het ziet er als volgt uit:
COM6
A long press is detected
Autoscroll
Clear output
9600 baud
Newline
ESP32 Code voor detectie van lange druk tijdens indrukken
/*
* 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-long-press-short-press
*/
#define BUTTON_PIN 21 // GPIO21 pin connected to button
#define LONG_PRESS_TIME 1000 // 1000 milliseconds
// Variables will change:
int lastState = LOW; // the previous state from the input pin
int currentState; // the current reading from the input pin
unsigned long pressedTime = 0;
bool isPressing = false;
bool isLongDetected = false;
void setup() {
Serial.begin(9600);
pinMode(BUTTON_PIN, INPUT_PULLUP);
}
void loop() {
// read the state of the switch/button:
currentState = digitalRead(BUTTON_PIN);
if(lastState == HIGH && currentState == LOW) { // button is pressed
pressedTime = millis();
isPressing = true;
isLongDetected = false;
} else if(lastState == LOW && currentState == HIGH) { // button is released
isPressing = false;
}
if(isPressing == true && isLongDetected == false) {
long pressDuration = millis() - pressedTime;
if( pressDuration > LONG_PRESS_TIME ) {
Serial.println("A long press is detected");
isLongDetected = true;
}
}
// save the the last state
lastState = currentState;
}
Snelle stappen
- Als u ESP32 voor het eerst gebruikt, bekijk dan hoe u de omgeving instelt voor ESP32 op Arduino IDE.
- Upload bovenstaande code naar de ESP32 via Arduino IDE
- Druk op de knop en laat deze los na enkele seconden.
- Bekijk het resultaat in de Seriële Monitor. Het ziet er als volgt uit:
COM6
A long press is detected
Autoscroll
Clear output
9600 baud
Newline
Hoe Detecteert u Zowel Lange als Korte Druk
Korte en lange druk na het loslaten
/*
* 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-long-press-short-press
*/
#define BUTTON_PIN 21 // GPIO21 pin connected to button
#define SHORT_PRESS_TIME 1000 // 1000 milliseconds
#define LONG_PRESS_TIME 1000 // 1000 milliseconds
// Variables will change:
int lastState = LOW; // the previous state from the input pin
int currentState; // the current reading from the input pin
unsigned long pressedTime = 0;
unsigned long releasedTime = 0;
void setup() {
Serial.begin(9600);
pinMode(BUTTON_PIN, INPUT_PULLUP);
}
void loop() {
// read the state of the switch/button:
currentState = digitalRead(BUTTON_PIN);
if (lastState == HIGH && currentState == LOW) // button is pressed
pressedTime = millis();
else if (lastState == LOW && currentState == HIGH) { // button is released
releasedTime = millis();
long pressDuration = releasedTime - pressedTime;
if ( pressDuration < SHORT_PRESS_TIME )
Serial.println("A short press is detected");
if ( pressDuration > LONG_PRESS_TIME )
Serial.println("A long press is detected");
}
// save the the last state
lastState = currentState;
}
Snelle stappen
- Als u ESP32 voor het eerst gebruikt, bekijk dan hoe u de omgeving instelt voor ESP32 op Arduino IDE.
- Upload bovenstaande code naar ESP32 via Arduino IDE
- Druk zowel kort als lang op de knop.
- Bekijk het resultaat in de Seriële Monitor. Het ziet er als volgt uit:
※ Notiz:
De Seriële Monitor kan meerdere korte druksignalen tonen tijdens een lange druk. Dit is normaal gedrag van de knop. Dit fenomeen heet het “chattering phenomenon”. Dit probleem wordt opgelost in het laatste deel van deze tutorial.
Korte en lange druk tijdens het indrukken
/*
* 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-long-press-short-press
*/
#define BUTTON_PIN 21 // GPIO21 pin connected to button
#define SHORT_PRESS_TIME 1000 // 1000 milliseconds
#define LONG_PRESS_TIME 1000 // 1000 milliseconds
// Variables will change:
int lastState = LOW; // the previous state from the input pin
int currentState; // the current reading from the input pin
unsigned long pressedTime = 0;
unsigned long releasedTime = 0;
bool isPressing = false;
bool isLongDetected = false;
void setup() {
Serial.begin(9600);
pinMode(BUTTON_PIN, INPUT_PULLUP);
}
void loop() {
// read the state of the switch/button:
currentState = digitalRead(BUTTON_PIN);
if (lastState == HIGH && currentState == LOW) { // button is pressed
pressedTime = millis();
isPressing = true;
isLongDetected = false;
} else if (lastState == LOW && currentState == HIGH) { // button is released
isPressing = false;
releasedTime = millis();
long pressDuration = releasedTime - pressedTime;
if ( pressDuration < SHORT_PRESS_TIME )
Serial.println("A short press is detected");
}
if (isPressing == true && isLongDetected == false) {
long pressDuration = millis() - pressedTime;
if ( pressDuration > LONG_PRESS_TIME ) {
Serial.println("A long press is detected");
isLongDetected = true;
}
}
// save the the last state
lastState = currentState;
}
Snelle stappen
- Als u ESP32 voor het eerst gebruikt, bekijk dan hoe u de omgeving instelt voor ESP32 op Arduino IDE.
- Upload bovenstaande code naar ESP32 via Arduino IDE
- Druk zowel kort als lang op de knop.
- Bekijk het resultaat in de Seriële Monitor. Het ziet er als volgt uit:
Lange druk en korte druk met Debouncing
Het is heel belangrijk om knoppen te debouncen in veel toepassingen.
Debouncing is een beetje ingewikkeld, vooral bij gebruik van meerdere knoppen. Om het eenvoudig te maken voor beginners hebben we een bibliotheek gemaakt, genaamd ezButton.
We gebruiken deze bibliotheek in onderstaande codes.
Korte en lange druk met debouncing na loslaten
/*
* 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-long-press-short-press
*/
#include <ezButton.h>
#define SHORT_PRESS_TIME 1000 // 1000 milliseconds
#define LONG_PRESS_TIME 1000 // 1000 milliseconds
ezButton button(21); // create ezButton object that attach to pin GPIO21
unsigned long pressedTime = 0;
unsigned long releasedTime = 0;
void setup() {
Serial.begin(9600);
button.setDebounceTime(50); // set debounce time to 50 milliseconds
}
void loop() {
button.loop(); // MUST call the loop() function first
if (button.isPressed())
pressedTime = millis();
if (button.isReleased()) {
releasedTime = millis();
long pressDuration = releasedTime - pressedTime;
if ( pressDuration < SHORT_PRESS_TIME )
Serial.println("A short press is detected");
if ( pressDuration > LONG_PRESS_TIME )
Serial.println("A long press is detected");
}
}
Snelle stappen
- Als u ESP32 voor het eerst gebruikt, bekijk dan hoe u de omgeving instelt voor ESP32 op Arduino IDE.
- Installeer de ezButton bibliotheek. Zie Hoe te installeren
- Upload bovenstaande code naar ESP32 via Arduino IDE
- Druk zowel kort als lang op de knop.
- Bekijk het resultaat in de Seriële Monitor. Het ziet er als volgt uit:
Korte en lange druk met debouncing tijdens het indrukken
/*
* 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-long-press-short-press
*/
#include <ezButton.h>
#define SHORT_PRESS_TIME 1000 // 1000 milliseconds
#define LONG_PRESS_TIME 1000 // 1000 milliseconds
ezButton button(21); // create ezButton object that attach to pin GPIO21
unsigned long pressedTime = 0;
unsigned long releasedTime = 0;
bool isPressing = false;
bool isLongDetected = false;
void setup() {
Serial.begin(9600);
button.setDebounceTime(50); // set debounce time to 50 milliseconds
}
void loop() {
button.loop(); // MUST call the loop() function first
if (button.isPressed()) {
pressedTime = millis();
isPressing = true;
isLongDetected = false;
}
if (button.isReleased()) {
isPressing = false;
releasedTime = millis();
long pressDuration = releasedTime - pressedTime;
if ( pressDuration < SHORT_PRESS_TIME )
Serial.println("A short press is detected");
}
if (isPressing == true && isLongDetected == false) {
long pressDuration = millis() - pressedTime;
if ( pressDuration > LONG_PRESS_TIME ) {
Serial.println("A long press is detected");
isLongDetected = true;
}
}
}
Snelle stappen
- Als u ESP32 voor het eerst gebruikt, bekijk dan hoe u de omgeving instelt voor ESP32 op Arduino IDE.
- Installeer de ezButton bibliotheek. Zie Hoe te installeren
- Upload bovenstaande code naar ESP32 via Arduino IDE
- Druk zowel kort als lang op de knop.
- Bekijk het resultaat in de Seriële Monitor. Het ziet er als volgt uit:
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.
Waarom Lange Druk en Korte Druk Nodig Zijn
- Om het aantal knoppen en digitale input pins te besparen. Eén enkele knop kan twee of meer functies hebben. Bijvoorbeeld: korte druk om het licht aan te zetten, lange druk om de ventilator aan te zetten.
- Gebruik de lange druk in plaats van de korte druk om per ongeluk indrukken te voorkomen. Bijvoorbeeld, sommige apparaten gebruiken een knop voor fabrieksreset. Als die knop per ongeluk wordt ingedrukt, kan dat gevaarlijk zijn.