ESP8266 - Botón - Pulsación Larga, Pulsación Corta
Este tutorial te enseña cómo usar el ESP8266 para detectar la pulsación larga y la pulsación corta del botón. A continuación, repasaremos los siguientes ejemplos:
- El ESP8266 detecta la pulsación corta en el botón.
- El ESP8266 detecta la pulsación larga en el botón.
- El ESP8266 detecta tanto la pulsación larga como la pulsación corta en el botón.
- El ESP8266 filtra el rebote para pulsaciones largas y cortas.
En la sección de conclusiones, exploramos cómo implementar el antirrebote en aplicaciones prácticas. Para obtener más información sobre por qué es necesario el antirrebote para los botones, consulte este artículo. Sin antirrebote, puede ocurrir una detección incorrecta de una pulsación de botón.
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgación: Algunos de los enlaces proporcionados en esta sección son enlaces de afiliado de Amazon. Podemos recibir una comisión por las compras realizadas a través de estos enlaces sin costo adicional para usted. Apreciamos su apoyo.
Acerca del botón
Si no estás familiarizado con los botones (asignación de pines, funcionamiento, programación, etc.), los siguientes tutoriales pueden ayudarte a aprender:
Diagrama de Cableado
This image is created using Fritzing. Click to enlarge image
Para obtener m\u00e1s informaci\u00f3n, consulte Pines del ESP8266 y c\u00f3mo alimentar ESP8266 y otros componentes.
En este tutorial, utilizaremos la resistencia pull-up interna. Esto significa que el botón está en un estado alto cuando no está presionado y en un estado bajo cuando está presionado.
Cómo detectar una pulsación corta
Calculamos la cantidad de tiempo entre los eventos de pulsación y liberación. Si esta duración es menor que un tiempo predeterminado, detectamos un evento de pulsación corta.
Determina la duración de una pulsación corta máxima.
const int SHORT_PRESS_TIME = 500; // 500 milliseconds
- Determinar cuándo se ha pulsado el botón y registrar la hora de la pulsación.
if(prev_button_state == HIGH && button_state == LOW)
time_pressed = millis();
- Detecta cuándo se suelta el botón y registra la hora de su liberación.
if(prev_button_state == LOW && button_state == HIGH)
time_released = millis();
- Fuerza
- Determine la duración y la intensidad de la presión que debe aplicarse.
long press_duration = time_released - time_pressed;
- Comparar la duración de la pulsación con el tiempo predeterminado para una pulsación corta.
- Identificar si se trata de una pulsación corta basándose en la comparación.
if( press_duration < SHORT_PRESS_TIME )
Serial.println("A short press is detected");
Código ESP8266 para detectar la pulsación corta
/*
* Este código de ESP8266 NodeMCU fue desarrollado por es.newbiely.com
* Este código de ESP8266 NodeMCU se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/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;
}
Pasos R\u00e1pidos
Para empezar con ESP8266 en el IDE de Arduino, siga estos pasos:
- Consulta el tutorial cómo configurar el entorno para ESP8266 en Arduino IDE si es la primera vez que usas ESP8266.
- Conecta los componentes tal como se muestran en el diagrama.
- Conecta la placa ESP8266 a tu computadora mediante un cable USB.
- Abre el IDE de Arduino en tu computadora.
- Selecciona la placa ESP8266 correcta, como (p. ej. NodeMCU 1.0 (ESP-12E Module)), y su puerto COM correspondiente.
- Sube el código a la ESP8266 usando el IDE de Arduino.
- Presiona el botón durante un corto periodo varias veces.
- Verifica la salida en el Monitor Serial.
COM6
A short press is detected
Autoscroll
Clear output
9600 baud
Newline
※ Nota:
El Monitor Serial puede mostrar múltiples detecciones de pulsaciones cortas para una sola pulsación. Este es el comportamiento esperado del botón y se conoce como el “fenómeno de rebote”. Abordaremos este problema en la última parte de este tutorial.
Cómo detectar una pulsación larga
Hay dos escenarios en los que se puede detectar una pulsación prolongada:
- Cuando se suelta el botón, se identificará el evento de pulsación larga.
- Mientras se mantiene pulsado el botón, se reconocerá el evento de pulsación larga, incluso antes de soltarlo.
- Para la instancia inicial, calculamos el intervalo de tiempo entre los eventos de pulsación y liberación. 2. Si la duración es mayor que el tiempo predeterminado, entonces se identifica el evento de pulsación larga.
En el segundo caso de uso, una vez que se pulsa el botón, el tiempo de pulsación se mide de forma continua y se verifica el evento de pulsación prolongada hasta que se suelta el botón. A medida que se mantiene pulsado el botón, si la duración es mayor que una cantidad de tiempo predeterminada, se detecta el evento de pulsación prolongada.
Código ESP8266 para detectar pulsación larga al soltar
/*
* Este código de ESP8266 NodeMCU fue desarrollado por es.newbiely.com
* Este código de ESP8266 NodeMCU se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/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;
}
Pasos R\u00e1pidos
Para empezar con ESP8266 en el IDE de Arduino, siga estos pasos:
- Consulte el tutorial cómo configurar el entorno para ESP8266 en Arduino IDE si es la primera vez que usa ESP8266.
- Conecte los componentes como se muestra en el diagrama.
- Conecte la placa ESP8266 a su ordenador con un cable USB.
- Abra el Arduino IDE en su ordenador.
- Elija la placa ESP8266 correcta, como (p. ej. NodeMCU 1.0 (ESP-12E Module)), y su puerto COM correspondiente.
- Cargue el código a la ESP8266 utilizando el Arduino IDE.
- Espere un segundo y luego presione y suelte el botón.
- Vea el resultado en el Monitor Serial.
COM6
A long press is detected
Autoscroll
Clear output
9600 baud
Newline
El evento de pulsación prolongada solo se detecta cuando se suelta el botón.
Código ESP8266 para detectar pulsación larga durante la pulsación
/*
* Este código de ESP8266 NodeMCU fue desarrollado por es.newbiely.com
* Este código de ESP8266 NodeMCU se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/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;
}
Pasos R\u00e1pidos
Para empezar con ESP8266 en el IDE de Arduino, siga estos pasos:
- Consulte el tutorial cómo configurar el entorno para ESP8266 en Arduino IDE si es la primera vez que usa ESP8266.
- Conecte los componentes como se muestra en el diagrama.
- Conecte la placa ESP8266 a su computadora mediante un cable USB.
- Abra el Arduino IDE en su computadora.
- Elija la placa ESP8266 correcta, como (p. ej. NodeMCU 1.0 (ESP-12E Module)), y su puerto COM respectivo.
- Cargue el código al ESP8266 usando el Arduino IDE.
- Espere unos segundos y luego presione y suelte el botón.
- Abra el Monitor Serial para ver los resultados.
COM6
A long press is detected
Autoscroll
Clear output
9600 baud
Newline
El evento de presionar y mantener pulsado el botón solo se detectará cuando el botón no se haya soltado.
Cómo detectar tanto la pulsación larga como la pulsación corta
Pulsación corta y pulsación larga después de soltar
/*
* Este código de ESP8266 NodeMCU fue desarrollado por es.newbiely.com
* Este código de ESP8266 NodeMCU se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/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;
}
Pasos R\u00e1pidos
Para empezar con ESP8266 en el IDE de Arduino, siga estos pasos:
- Consulta el tutorial cómo configurar el entorno para ESP8266 en Arduino IDE si esta es la primera vez que usas ESP8266.
- Conecta los componentes tal como se muestra en el diagrama.
- Conecta la placa ESP8266 a tu ordenador usando un cable USB.
- Abre Arduino IDE en tu ordenador.
- Selecciona la placa ESP8266 correcta, como (p. ej.) NodeMCU 1.0 (Módulo ESP-12E), y su respectivo puerto COM.
- Sube el código a ESP8266 usando el Arduino IDE.
- Mantén presionado el botón durante un periodo corto y otro más largo.
- Revisa el resultado en el Monitor Serial.
※ Nota:
El Monitor Serial puede mostrar múltiples detecciones de pulsaciones cortas cuando se realiza una pulsación larga. Este es el comportamiento esperado del botón y se le conoce como el "fenómeno de rebote". El problema se abordará en la parte final de este tutorial.
Pulsación corta y pulsación larga durante la pulsación
/*
* Este código de ESP8266 NodeMCU fue desarrollado por es.newbiely.com
* Este código de ESP8266 NodeMCU se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/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;
}
Pasos R\u00e1pidos
Para empezar con ESP8266 en el IDE de Arduino, siga estos pasos:
- Consulta el tutorial cómo configurar el entorno para ESP8266 en Arduino IDE si es la primera vez que usas ESP8266.
- Conecta los componentes como se muestra en el diagrama.
- Conecta la placa ESP8266 a tu ordenador usando un cable USB.
- Abre el IDE de Arduino en tu ordenador.
- Elige la placa ESP8266 correcta, como (p. ej. NodeMCU 1.0 (Módulo ESP-12E)), y su puerto COM respectivo.
- Carga el código en tu ESP8266 usando el IDE de Arduino.
- Presiona el botón durante un corto y un largo periodo.
- Consulta el resultado en el Monitor Serial.
※ Nota:
El Monitor Serial podría detectar varias pulsaciones cortas cuando se realiza una pulsación larga. Este es el comportamiento esperado del botón y se le conoce como el fenómeno de rebote. Una solución a este problema se proporcionará en la sección final de este tutorial.
Pulsación larga y pulsación corta con antirrebote
Es esencial implementar el antirrebote en el botón en diversas aplicaciones.
El anti-rebote puede ser complicado, especialmente cuando hay varios botones involucrados. Para facilitarlo a los principiantes, hemos creado una biblioteca llamada ezButton.
Usaremos esta biblioteca en los códigos que se indican a continuación.
Pulsación corta y pulsación larga con antirrebote tras la liberación
/*
* Este código de ESP8266 NodeMCU fue desarrollado por es.newbiely.com
* Este código de ESP8266 NodeMCU se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/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");
}
}
Pasos R\u00e1pidos
Para empezar con ESP8266 en el IDE de Arduino, siga estos pasos:
- Consulta el tutorial cómo configurar el entorno para ESP8266 en Arduino IDE si es la primera vez que usas ESP8266.
- Conecta los componentes como se muestran en el diagrama.
- Conecta la placa ESP8266 a tu computadora mediante un cable USB.
- Abre Arduino IDE en tu computadora.
- Elige la placa ESP8266 correcta, como (p. ej. NodeMCU 1.0 (ESP-12E Module)), y su puerto COM correspondiente.
- Para instalar la biblioteca ezButton, consulta Cómo instalar la biblioteca ezButton.
- Carga el código en el ESP8266 usando el IDE de Arduino.
- Presiona y mantén presionado el botón durante un periodo corto o largo.
- Consulta el resultado en el Monitor serie.
Pulsación corta y pulsación larga con antirrebote durante la pulsación
/*
* Este código de ESP8266 NodeMCU fue desarrollado por es.newbiely.com
* Este código de ESP8266 NodeMCU se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/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;
}
}
}
Pasos R\u00e1pidos
- Conecte los componentes como se muestra en el diagrama.
- Conecte la placa ESP8266 a su computadora utilizando un cable USB.
- Abra el IDE de Arduino en su computadora.
- Elija la placa ESP8266 correcta, como (p. ej. NodeMCU 1.0 (ESP-12E Module)), y su puerto COM respectivo.
- Instale la biblioteca ezButton. Consulte Cómo hacerlo para obtener instrucciones.
- Utilice el IDE de Arduino para cargar el código al ESP8266.
- Mantenga pulsado el botón y luego suéltelo.
- Abra el Monitor Serial para observar el resultado.
Video Tutorial
Estamos considerando crear tutoriales en video. Si considera que los tutoriales en video son importantes, suscríbase a nuestro canal de YouTube para motivarnos a crear los videos.
Por qué se necesitan la pulsación larga y la pulsación corta
- Para minimizar la cantidad de botones, un solo botón puede utilizarse para múltiples funciones. Por ejemplo, una pulsación corta puede usarse para cambiar entre modos de operación, y una pulsación larga puede usarse para apagar el dispositivo.
- Las pulsaciones largas se utilizan para evitar pulsaciones accidentales. Por ejemplo, algunos dispositivos utilizan un botón para el restablecimiento de fábrica. Si se pulsa accidentalmente, puede ser peligroso. Para evitarlo, el dispositivo está diseñado de modo que el restablecimiento de fábrica solo se active cuando la pulsación sea larga (por ejemplo, durante más de 5 segundos).