ESP8266 - Bouton - Appui long Appui court
Ce tutoriel vous explique comment utiliser l'ESP8266 pour détecter l'appui long et l'appui court d'un bouton. En détail, nous passerons en revue les exemples suivants :
- L'ESP8266 détecte l'appui court sur le bouton.
- L'ESP8266 détecte l'appui long sur le bouton.
- L'ESP8266 détecte à la fois l'appui long et l'appui court sur le bouton.
- L'ESP8266 élimine le rebond pour l'appui long et l'appui court.
Dans la section de conclusion, nous explorons comment mettre en œuvre l'anti-rebond dans les applications pratiques. Pour en savoir plus sur la nécessité de l'anti-rebond pour les boutons, veuillez consulter cet article. Sans anti-rebond, une détection incorrecte d'une pression sur un bouton peut se produire.
Préparation du matériel
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.
Diagramme de câblage
This image is created using Fritzing. Click to enlarge image
Voir plus dans l'agencement des broches de l'ESP8266 et comment alimenter l'ESP8266 et d'autres composants.
Dans ce tutoriel, nous utiliserons la résistance de tirage interne. Cela signifie que le bouton est à l'état HAUT lorsqu'il n'est pas pressé et à l'état BAS lorsqu'il est pressé.
Comment détecter une pression courte
Nous calculons la durée entre les événements d'appui et de relâchement. Si cette durée est inférieure à un temps prédéterminé, nous détectons un événement d'appui court.
Déterminez la durée maximale d'une pression courte.
const int SHORT_PRESS_TIME = 500; // 500 millisecondes
- Déterminez quand le bouton a été pressé et enregistrez l'heure de la pression.
if(prev_button_state == HIGH && button_state == LOW)
time_pressed = millis();
- Détectez quand le bouton est relâché et enregistrez l'heure de sa libération.
if(prev_button_state == LOW && button_state == HIGH)
time_released = millis();
- Force
- Déterminer la durée et l'intensité de la pression à appliquer.
long press_duration = time_released - time_pressed;
- Comparer la durée de la pression au temps prédéfini pour une pression courte.
- Identifier s'il s'agit d'une pression courte en fonction de la comparaison.
if( press_duration < SHORT_PRESS_TIME )
Serial.println("A short press is detected");
Code ESP8266 pour détecter l'appui court
/*
* Ce code ESP8266 NodeMCU a été développé par newbiely.fr
* Ce code ESP8266 NodeMCU 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/esp8266/esp8266-button-long-press-short-press
*/
#define BUTTON_PIN D7 // The ESP8266 pin connected to button
#define SHORT_PRESS_TIME 500 // 500 milliseconds
int prev_button_state = LOW; // The previous state from the input pin
int button_state; // The current reading from the input pin
unsigned long time_pressed = 0;
unsigned long time_released = 0;
void setup() {
Serial.begin(9600);
pinMode(BUTTON_PIN, INPUT_PULLUP);
}
void loop() {
// read the state of the switch/button:
button_state = digitalRead(BUTTON_PIN);
if (prev_button_state == HIGH && button_state == LOW) // button is pressed
time_pressed = millis();
else if (prev_button_state == LOW && button_state == HIGH) { // button is released
time_released = millis();
long press_duration = time_released - time_pressed;
if ( press_duration < SHORT_PRESS_TIME )
Serial.println("A short press is detected");
}
// save the the last state
prev_button_state = button_state;
}
Étapes rapides
Pour commencer avec l'ESP8266 sur Arduino IDE, suivez ces étapes :
- Consultez le tutoriel comment configurer l'environnement pour ESP8266 sur Arduino IDE si c'est la première fois que vous utilisez un ESP8266.
- Câblez les composants comme montré dans le schéma.
- Connectez la carte ESP8266 à votre ordinateur à l'aide d'un câble USB.
- Ouvrez Arduino IDE sur votre ordinateur.
- Sélectionnez la bonne carte ESP8266, par exemple NodeMCU 1.0 (Module ESP-12E), et son port COM respectif.
- Téléchargez le code sur l'ESP8266 en utilisant l'Arduino IDE.
- Appuyez sur le bouton plusieurs fois brièvement.
- Vérifiez la sortie sur le moniteur série.
COM6
A short press is detected
Autoscroll
Clear output
9600 baud
Newline
※ NOTE THAT:
Le moniteur série peut afficher plusieurs détections de pressions courtes pour une seule pression. C'est le comportement attendu du bouton et est désigné sous le nom de « phénomène de rebond ». Nous aborderons ce problème dans la dernière partie de ce tutoriel.
Comment détecter une pression longue
Il existe deux scénarios dans lesquels une pression longue peut être détectée :
- Lorsque le bouton est relâché, l'événement de longue pression sera identifié.
- Tant que le bouton est pressé, l'événement de longue pression sera reconnu, même avant qu'il ne soit lâché.
- I. Pour le premier cas, nous calculons l'intervalle de temps entre les événements pressé et relâché. 2. Si la durée dépasse le temps prédéfini, alors l'événement de longue pression est identifié.
Dans le deuxième cas d'utilisation, une fois le bouton pressé, le temps de pression est mesuré en continu et l'événement de pression longue est vérifié jusqu'à ce que le bouton soit relâché. Tant que le bouton est maintenu enfoncé, si la durée est supérieure à un temps prédéterminé, alors l'événement de pression longue est détecté.
Code ESP8266 pour détecter une longue pression lors du relâchement
/*
* Ce code ESP8266 NodeMCU a été développé par newbiely.fr
* Ce code ESP8266 NodeMCU 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/esp8266/esp8266-button-long-press-short-press
*/
#define BUTTON_PIN D7 // The ESP8266 pin connected to button
#define LONG_PRESS_TIME 1000 // 1000 milliseconds
int prev_button_state = LOW; // The previous state from the input pin
int button_state; // The current reading from the input pin
unsigned long time_pressed = 0;
unsigned long time_released = 0;
void setup() {
Serial.begin(9600);
pinMode(BUTTON_PIN, INPUT_PULLUP);
}
void loop() {
// read the state of the switch/button:
button_state = digitalRead(BUTTON_PIN);
if(prev_button_state == HIGH && button_state == LOW) // button is pressed
time_pressed = millis();
else if(prev_button_state == LOW && button_state == HIGH) { // button is released
time_released = millis();
long press_duration = time_released - time_pressed;
if( press_duration > LONG_PRESS_TIME )
Serial.println("A long press is detected");
}
// save the the last state
prev_button_state = button_state;
}
Étapes rapides
Pour commencer avec l'ESP8266 sur l'Arduino IDE, suivez ces étapes :
- Consultez le tutoriel comment configurer l'environnement pour ESP8266 sur Arduino IDE si c'est votre première utilisation de l'ESP8266.
- Câblez les composants comme indiqué dans le schéma.
- Connectez la carte ESP8266 à votre ordinateur à l'aide d'un câble USB.
- Ouvrez Arduino IDE sur votre ordinateur.
- Choisissez la bonne carte ESP8266, telle que (par exemple, NodeMCU 1.0 (Module ESP-12E)), et son port COM respectif.
- Téléchargez le code sur ESP8266 en utilisant Arduino IDE.
- Attendez une seconde puis appuyez et relâchez le bouton.
- Vérifiez le résultat sur le moniteur série.
COM6
A long press is detected
Autoscroll
Clear output
9600 baud
Newline
L'événement de l'appui long n'est détecté que lorsque le bouton est relâché.
Code ESP8266 pour détecter une pression longue lors de l'appui
/*
* Ce code ESP8266 NodeMCU a été développé par newbiely.fr
* Ce code ESP8266 NodeMCU 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/esp8266/esp8266-button-long-press-short-press
*/
#define BUTTON_PIN D7 // The ESP8266 pin connected to button
#define LONG_PRESS_TIME 1000 // 1000 milliseconds
int prev_button_state = LOW; // The previous state from the input pin
int button_state; // The current reading from the input pin
unsigned long time_pressed = 0;
bool is_pressing = false;
bool is_long_detected = false;
void setup() {
Serial.begin(9600);
pinMode(BUTTON_PIN, INPUT_PULLUP);
}
void loop() {
// read the state of the switch/button:
button_state = digitalRead(BUTTON_PIN);
if(prev_button_state == HIGH && button_state == LOW) { // button is pressed
time_pressed = millis();
is_pressing = true;
is_long_detected = false;
} else if(prev_button_state == LOW && button_state == HIGH) { // button is released
is_pressing = false;
}
if(is_pressing == true && is_long_detected == false) {
long press_duration = millis() - time_pressed;
if( press_duration > LONG_PRESS_TIME ) {
Serial.println("A long press is detected");
is_long_detected = true;
}
}
// save the the last state
prev_button_state = button_state;
}
Étapes rapides
Pour commencer avec ESP8266 sur Arduino IDE, suivez ces étapes :
- Consultez le tutoriel comment configurer l'environnement pour ESP8266 sur Arduino IDE si c'est votre première utilisation de l'ESP8266.
- Connectez les composants comme indiqué sur le schéma.
- Connectez la carte ESP8266 à votre ordinateur à l'aide d'un câble USB.
- Ouvrez Arduino IDE sur votre ordinateur.
- Sélectionnez la carte ESP8266 correcte, comme par exemple NodeMCU 1.0 (Module ESP-12E), et son port COM respectif.
- Téléchargez le code sur l'ESP8266 en utilisant Arduino IDE.
- Attendez quelques secondes puis appuyez et relâchez le bouton.
- Consultez le moniteur série pour voir les résultats.
COM6
A long press is detected
Autoscroll
Clear output
9600 baud
Newline
L'événement d'appui prolongé sur le bouton ne sera détecté que lorsque le bouton n'aura pas été relâché.
Comment détecter une pression longue et une pression courte
Appui court et appui long après relâchement
/*
* Ce code ESP8266 NodeMCU a été développé par newbiely.fr
* Ce code ESP8266 NodeMCU 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/esp8266/esp8266-button-long-press-short-press
*/
#define BUTTON_PIN D7 // The ESP8266 pin connected to button
#define SHORT_PRESS_TIME 1000 // 1000 milliseconds
#define LONG_PRESS_TIME 1000 // 1000 milliseconds
int prev_button_state = LOW; // The previous state from the input pin
int button_state; // The current reading from the input pin
unsigned long time_pressed = 0;
unsigned long time_released = 0;
void setup() {
Serial.begin(9600);
pinMode(BUTTON_PIN, INPUT_PULLUP);
}
void loop() {
// read the state of the switch/button:
button_state = digitalRead(BUTTON_PIN);
if (prev_button_state == HIGH && button_state == LOW) // button is pressed
time_pressed = millis();
else if (prev_button_state == LOW && button_state == HIGH) { // button is released
time_released = millis();
long press_duration = time_released - time_pressed;
if ( press_duration < SHORT_PRESS_TIME )
Serial.println("A short press is detected");
if ( press_duration > LONG_PRESS_TIME )
Serial.println("A long press is detected");
}
// save the the last state
prev_button_state = button_state;
}
Étapes rapides
Pour commencer avec ESP8266 sur Arduino IDE, suivez ces étapes :
- Consultez le tutoriel comment configurer l'environnement pour ESP8266 sur Arduino IDE si c'est votre première utilisation de l'ESP8266.
- Connectez les composants comme indiqué sur le schéma.
- Connectez la carte ESP8266 à votre ordinateur à l'aide d'un câble USB.
- Ouvrez Arduino IDE sur votre ordinateur.
- Choisissez la bonne carte ESP8266, comme (par exemple NodeMCU 1.0 (Module ESP-12E)), et son port COM respectif.
- Téléchargez le code sur l'ESP8266 à l'aide de l'Arduino IDE.
- Appuyez sur le bouton pendant une durée longue et courte.
- Consultez le résultat sur le moniteur série.
※ NOTE THAT:
Le moniteur série peut afficher plusieurs détections de pressions courtes lorsqu'une pression longue est effectuée. Il s'agit du comportement attendu du bouton et est désigné sous le nom de "phénomène de rebond". Le problème sera traité dans la dernière partie de ce tutoriel.
Pression courte et pression longue pendant l'appui
/*
* Ce code ESP8266 NodeMCU a été développé par newbiely.fr
* Ce code ESP8266 NodeMCU 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/esp8266/esp8266-button-long-press-short-press
*/
#define BUTTON_PIN D7 // The ESP8266 pin connected to button
#define SHORT_PRESS_TIME 1000 // 1000 milliseconds
#define LONG_PRESS_TIME 1000 // 1000 milliseconds
int prev_button_state = LOW; // The previous state from the input pin
int button_state; // The current reading from the input pin
unsigned long time_pressed = 0;
unsigned long time_released = 0;
bool is_pressing = false;
bool is_long_detected = false;
void setup() {
Serial.begin(9600);
pinMode(BUTTON_PIN, INPUT_PULLUP);
}
void loop() {
// read the state of the switch/button:
button_state = digitalRead(BUTTON_PIN);
if (prev_button_state == HIGH && button_state == LOW) { // button is pressed
time_pressed = millis();
is_pressing = true;
is_long_detected = false;
} else if (prev_button_state == LOW && button_state == HIGH) { // button is released
is_pressing = false;
time_released = millis();
long press_duration = time_released - time_pressed;
if ( press_duration < SHORT_PRESS_TIME )
Serial.println("A short press is detected");
}
if (is_pressing == true && is_long_detected == false) {
long press_duration = millis() - time_pressed;
if ( press_duration > LONG_PRESS_TIME ) {
Serial.println("A long press is detected");
is_long_detected = true;
}
}
// save the the last state
prev_button_state = button_state;
}
Étapes rapides
Pour commencer avec ESP8266 sur Arduino IDE, suivez ces étapes :
- Consultez le tutoriel comment configurer l'environnement pour ESP8266 sur Arduino IDE si c'est votre première utilisation de l'ESP8266.
- Câblez les composants comme indiqué dans le schéma.
- Connectez la carte ESP8266 à votre ordinateur via un câble USB.
- Ouvrez Arduino IDE sur votre ordinateur.
- Choisissez la bonne carte ESP8266, telle que (par exemple NodeMCU 1.0 (Module ESP-12E)), et son port COM respectif.
- Téléversez le code sur votre ESP8266 en utilisant Arduino IDE.
- Appuyez sur le bouton pour une courte et longue durée.
- Vérifiez le résultat sur le moniteur série.
※ NOTE THAT:
Le moniteur série peut afficher plusieurs détections de pressions courtes lorsque une pression longue est effectuée. C'est le comportement attendu du bouton et est appelé le "phénomène de rebondissement". Une solution à ce problème sera fournie dans la dernière section de ce tutoriel.
Appui long et appui court avec anti-rebond
Il est essentiel d'implémenter l'anti-rebond sur le bouton dans diverses applications.
Le debouncing peut être délicat, notamment lorsque plusieurs boutons sont impliqués. Pour simplifier la tâche aux 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-rebond après relâchement
/*
* Ce code ESP8266 NodeMCU a été développé par newbiely.fr
* Ce code ESP8266 NodeMCU 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/esp8266/esp8266-button-long-press-short-press
*/
#include <ezButton.h>
#define SHORT_PRESS_TIME 1000 // 1000 milliseconds
#define LONG_PRESS_TIME 1000 // 1000 milliseconds
ezButton button(D7); // create ezButton object for pin D7
unsigned long time_pressed = 0;
unsigned long time_released = 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())
time_pressed = millis();
if (button.isReleased()) {
time_released = millis();
long press_duration = time_released - time_pressed;
if ( press_duration < SHORT_PRESS_TIME )
Serial.println("A short press is detected");
if ( press_duration > LONG_PRESS_TIME )
Serial.println("A long press is detected");
}
}
Étapes rapides
Pour commencer avec ESP8266 sur Arduino IDE, suivez ces étapes :
- Consultez le tutoriel comment configurer l'environnement pour ESP8266 sur Arduino IDE si c'est la première fois que vous utilisez un ESP8266.
- Connectez les composants comme indiqué dans le schéma.
- Connectez la carte ESP8266 à votre ordinateur à l'aide d'un câble USB.
- Ouvrez Arduino IDE sur votre ordinateur.
- Choisissez la bonne carte ESP8266, telle que (par exemple NodeMCU 1.0 (Module ESP-12E)), et son port COM respectif.
- Pour installer la bibliothèque ezButton, reportez-vous à Comment faire.
- Téléversez le code sur ESP8266 en utilisant Arduino IDE.
- Appuyez et maintenez le bouton pendant une courte ou longue période.
- Vérifiez le résultat sur le moniteur série.
Appui court et appui long avec anti-rebond pendant l'appui
/*
* Ce code ESP8266 NodeMCU a été développé par newbiely.fr
* Ce code ESP8266 NodeMCU 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/esp8266/esp8266-button-long-press-short-press
*/
#include <ezButton.h>
#define SHORT_PRESS_TIME 1000 // 1000 milliseconds
#define LONG_PRESS_TIME 1000 // 1000 milliseconds
ezButton button(D7); // create ezButton object for pin D7
unsigned long time_pressed = 0;
unsigned long time_released = 0;
bool is_pressing = false;
bool is_long_detected = 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()) {
time_pressed = millis();
is_pressing = true;
is_long_detected = false;
}
if (button.isReleased()) {
is_pressing = false;
time_released = millis();
long press_duration = time_released - time_pressed;
if ( press_duration < SHORT_PRESS_TIME )
Serial.println("A short press is detected");
}
if (is_pressing == true && is_long_detected == false) {
long press_duration = millis() - time_pressed;
if ( press_duration > LONG_PRESS_TIME ) {
Serial.println("A long press is detected");
is_long_detected = true;
}
}
}
Étapes rapides
- Câblez les composants comme indiqué sur le schéma.
- Connectez la carte ESP8266 à votre ordinateur à l'aide d'un câble USB.
- Ouvrez Arduino IDE sur votre ordinateur.
- Choisissez la bonne carte ESP8266, comme (par exemple NodeMCU 1.0 (Module ESP-12E)), et son port COM respectif.
- Installez la bibliothèque ezButton. Consultez Comment faire pour les instructions.
- Utilisez l'Arduino IDE pour télécharger le code sur l'ESP8266.
- Appuyez sur le bouton et maintenez-le enfoncé, puis relâchez-le.
- Vérifiez le moniteur série pour observer le résultat.
Vidéo
Pourquoi avoir besoin d'une pression longue et d'une pression courte
- Pour minimiser le nombre de boutons, un seul bouton peut être utilisé à plusieurs fins. Par exemple, une pression courte peut servir à changer de mode de fonctionnement, et une pression longue à éteindre l'appareil.
- Les pressions longues sont utilisées pour éviter les pressions accidentelles. Par exemple, certains appareils utilisent un bouton pour la réinitialisation d'usine. Si celui-ci est pressé accidentellement, cela peut être dangereux. Pour éviter cela, l'appareil est conçu de manière à ce que la réinitialisation d'usine ne soit activée que lorsque le bouton est longuement pressé (par exemple, pendant plus de 5 secondes).