ESP32 - Bouton - Appui Long Appui Court
Ce tutoriel vous explique comment utiliser l'ESP32 pour détecter les pressions longues et courtes. En détail, nous allons apprendre :
- Comment détecter une pression courte sur le bouton
- Comment détecter une pression longue sur le bouton
- Comment détecter à la fois une pression longue et une pression courte
Préparation du matériel
| 1 | × | ESP-WROOM-32 Dev Module | |
| 1 | × | USB Cable Type-C | |
| 1 | × | Push Button | |
| 1 | × | (Optional) Panel-mount Push Button | |
| 1 | × | Breadboard | |
| 1 | × | Jumper Wires | |
| 1 | × | (Optional) DC Power Jack | |
| 1 | × | (Recommended) ESP32 Screw Terminal Adapter |
Or you can buy the following sensor kits:
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgation : Certains des liens fournis dans cette section sont des liens affiliés Amazon. Nous pouvons recevoir une commission pour tout achat effectué via ces liens, sans coût supplémentaire pour vous. Nous vous remercions de votre soutien.
À propos du bouton
Nous proposons des tutoriels spécifiques sur les boutons. Chaque tutoriel contient des informations détaillées et des instructions étape par étape sur le brochage du matériel, le principe de fonctionnement, la connexion des fils à l'ESP32, le code ESP32... Pour en savoir plus, consultez les liens suivants :
Diagramme de câblage
This image is created using Fritzing. Click to enlarge image
Si vous ne savez pas comment alimenter l'ESP32 et d'autres composants, vous pouvez trouver des conseils dans le tutoriel suivant : Comment alimenter l'ESP32.
Ce tutoriel utilisera la résistance de tirage interne. L'état du bouton est HAUT lorsque normal et BAS lorsqu'il est pressé.
Comment détecter une pression courte
- Mesurer le temps entre les événements pressé et relâché.
- Si la durée est plus courte qu'un temps prédéfini, l'événement de pression courte est détecté.
Voyons étape par étape :
- Définissez la durée maximale d'une pression courte.
#define SHORT_PRESS_TIME 500 // 500 millisecondes
- Détecter que le bouton est pressé et enregistrer l'heure de pression.
if(lastState == HIGH && currentState == LOW)
pressedTime = millis();
- Détectez que le bouton est relâché et enregistrez l'heure de relâchement.
if(lastState == LOW && currentState == HIGH)
releasedTime = millis();
- Calculez la durée de pression et
long pressDuration = releasedTime - pressedTime;
- Déterminez l'appui court en comparant la durée de l'appui avec le temps défini pour un appui court.
if( pressDuration < SHORT_PRESS_TIME )
Serial.println("A short press is detected");
Code ESP32 pour détecter une pression courte
/*
* Ce code ESP32 a été développé par newbiely.fr
* Ce code ESP32 est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/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;
}
Étapes rapides
- Si c'est la première fois que vous utilisez ESP32, consultez comment configurer l'environnement pour ESP32 sur Arduino IDE.
- Téléversez le code ci-dessus vers l'ESP32 via Arduino IDE
- Appuyez brièvement sur le bouton plusieurs fois.
- Consultez le résultat sur le moniteur série. Cela ressemble à ce qui suit :
COM6
A short press is detected
Autoscroll
Clear output
9600 baud
Newline
※ NOTE THAT:
Le moniteur série peut enregistrer plusieurs pressions courtes pour une seule pression. C'est un comportement normal du bouton. Ce comportement est appelé le « phénomène de rebond ». Nous apprendrons comment éliminer ce problème plus tard dans ce tutoriel.
Comment détecter une pression longue
Il existe deux cas d'utilisation pour détecter l'appui long.
- L'événement de longue pression est détecté juste après que le bouton soit relâché.
- L'événement de longue pression est détecté pendant que le bouton est pressé.
Dans le premier cas :
- Mesurez la durée entre l'événement d'appui et l'événement de relâchement.
- Si la durée est plus longue qu'un temps prédéfini, l'événement de longue pression est détecté.
Dans le deuxième cas : pendant que le bouton est pressé, effectuer le processus suivant de manière répétée :
- Mesurez le temps de pression.
- Si la durée est plus longue que le temps prédéfini, l'événement de pression longue est détecté.
- Sinon, répétez le processus jusqu'à ce que le bouton soit relâché.
Code ESP32 pour détecter une pression longue lors du relâchement
/*
* Ce code ESP32 a été développé par newbiely.fr
* Ce code ESP32 est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/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;
}
Étapes rapides
- Si c'est la première fois que vous utilisez l'ESP32, consultez comment configurer l'environnement pour l'ESP32 sur Arduino IDE.
- Téléversez le code ci-dessus vers l'ESP32 via Arduino IDE.
- Appuyez et relâchez le bouton après une seconde.
- Consultez le résultat sur le moniteur série. Il ressemble à ceci :
COM6
A long press is detected
Autoscroll
Clear output
9600 baud
Newline
Code ESP32 pour détecter une pression longue lors de l'appui
/*
* Ce code ESP32 a été développé par newbiely.fr
* Ce code ESP32 est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/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;
}
Étapes rapides
- Si c'est la première fois que vous utilisez ESP32, consultez comment configurer l'environnement pour ESP32 sur Arduino IDE.
- Téléversez le code ci-dessus sur ESP32 via Arduino IDE.
- Appuyez sur le bouton et relâchez-le après plusieurs secondes.
- Consultez le résultat sur le moniteur série. Cela ressemble à ce qui suit :
COM6
A long press is detected
Autoscroll
Clear output
9600 baud
Newline
Comment détecter à la fois les appuis longs et les appuis courts
Appui court et appui long après relâchement
/*
* Ce code ESP32 a été développé par newbiely.fr
* Ce code ESP32 est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/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;
}
Étapes rapides
- Si c'est la première fois que vous utilisez un ESP32, consultez comment configurer l'environnement pour ESP32 sur Arduino IDE.
- Téléversez le code ci-dessus vers l'ESP32 via l'Arduino IDE
- Appuyez longuement et brièvement sur le bouton.
- Consultez le résultat sur le moniteur série. Cela ressemble à ce qui suit :
※ NOTE THAT:
Le moniteur série peut détecter plusieurs appuis courts lors d'une pression longue. C'est le comportement normal du bouton. Ce comportement est appelé le « phénomène de rebond ». Le problème sera résolu dans la dernière partie de ce tutoriel.
Appui court et appui long lors de la pression
/*
* Ce code ESP32 a été développé par newbiely.fr
* Ce code ESP32 est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/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;
}
Étapes rapides
- Si c'est la première fois que vous utilisez l'ESP32, consultez comment configurer l'environnement pour ESP32 sur Arduino IDE.
- Téléversez le code ci-dessus vers l'ESP32 via Arduino IDE.
- Appuyez longuement et brièvement sur le bouton.
- Consultez le résultat sur le moniteur série. Il ressemble à ce qui suit :
Appui long et appui court avec anti-rebond
Il est très important de désactiver le rebond du bouton dans de nombreuses applications.
Le debounce est un peu compliqué, surtout lors de l'utilisation de plusieurs boutons. Pour simplifier les choses pour les débutants, nous avons créé une bibliothèque appelée ezButton.
Nous utiliserons cette bibliothèque dans les codes ci-dessous.
Appui court et appui long avec anti-rebondissement après relâchement
/*
* Ce code ESP32 a été développé par newbiely.fr
* Ce code ESP32 est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/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");
}
}
Étapes rapides
- Si c'est la première fois que vous utilisez un ESP32, consultez comment configurer l'environnement pour ESP32 sur Arduino IDE.
- Installez la bibliothèque ezButton. Voir Comment faire
- Téléversez le code ci-dessus sur ESP32 via Arduino IDE
- Appuyez longuement et brièvement sur le bouton.
- Consultez le résultat sur le moniteur série. Cela ressemble à ce qui suit :
Pression courte et pression longue avec anti-rebondissement lors de la pression
/*
* Ce code ESP32 a été développé par newbiely.fr
* Ce code ESP32 est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/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;
}
}
}
Étapes rapides
- Si c'est la première fois que vous utilisez ESP32, consultez comment configurer l'environnement pour ESP32 sur Arduino IDE.
- Installez la bibliothèque ezButton. Voir Comment faire
- Téléversez le code ci-dessus vers ESP32 via Arduino IDE
- Appuyez longuement et brièvement sur le bouton.
- Regardez le résultat sur le moniteur série. Il ressemble à ce qui suit :
Vidéo
Pourquoi a-t-on besoin d'une pression longue et d'une pression courte
- Pour économiser le nombre de boutons et de broches d'entrée numériques. Un seul bouton peut conserver deux fonctionnalités ou plus. Par exemple, appui court pour allumer la lumière, appui long pour allumer le ventilateur.
- Utilisez l'appui long au lieu de l'appui court pour éviter les pressions accidentelles. Par exemple, certains types d'appareils utilisent le bouton pour la réinitialisation d'usine. Si le bouton est pressé par accident, c'est dangereux.