ESP32 - Conteo de botones - OLED

En este tutorial, exploraremos ESP32 para lograr los siguientes objetivos:

Contando cuántas veces se presiona un botón.
Mostrando el valor del conteo en una pantalla OLED.
Implementando alineación automática vertical y horizontal para centrar el valor del conteo en la pantalla OLED.

Además, el tutorial aborda el anti-rebote del botón sin utilizar la función delay(). Para entender por qué es esencial el anti-rebote, consulte la explicación proporcionada en ¿Por qué necesitamos anti-rebote?.

Esta guía integral le ayudará a integrar el conteo de pulsaciones de botones, la funcionalidad de la pantalla OLED y las técnicas de eliminación de rebote de forma fluida en su proyecto ESP32.

Hardware Requerido

1	×	Módulo de Desarrollo ESP32 ESP-WROOM-32
1	×	Cable USB Tipo-A a Tipo-C (para PC USB-A)
1	×	Cable USB Tipo-C a Tipo-C (para PC USB-C)
1	×	Botón para Protoboard con Tapa
1	×	Kit de Botón para Protoboard
1	×	Botón Pulsador de Panel
1	×	Módulo de Botón Pulsador
1	×	Pantalla OLED I2C SSD1306 128x64
1	×	Pantalla OLED I2C SSD1306 128x32
1	×	Protoboard
1	×	Cables Puente
1	×	(Recomendado) Placa de Expansión de Terminales de Tornillo para ESP32
1	×	(Recomendado) Breakout Expansion Board for ESP32
1	×	(Recomendado) Divisor de Alimentación para ESP32

Or you can buy the following kits:

1	×	DIYables ESP32 Starter Kit (ESP32 included)
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 de OLED y Botón

¿No está familiarizado con OLED y con un botón, incluyendo sus pines de conexión, funcionalidad y programación? Explora tutoriales completos sobre estos temas a continuación:

Diagrama de Cableado

This image is created using Fritzing. Click to enlarge image

Si no sabe c\u00f3mo alimentar ESP32 y otros componentes, encuentre instrucciones en el siguiente tutorial: C\u00f3mo alimentar ESP32.

Código ESP32 - mostrando el conteo de botones en OLED

/* * Este código de ESP32 fue desarrollado por es.newbiely.com * Este código de ESP32 se proporciona al público sin ninguna restricción. * Para tutoriales completos y diagramas de cableado, visite: * https://es.newbiely.com/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; } }

Pasos R\u00e1pidos

Si es la primera vez que usas ESP32, consulta cómo configurar el entorno para ESP32 en el IDE de Arduino.
Realiza el cableado tal como se muestra en la imagen anterior.
Conecta la placa ESP32 a tu PC mediante un cable micro USB.
Abre Arduino IDE en tu PC.
Selecciona la placa ESP32 adecuada (p. ej. ESP32 Dev Module) y el puerto COM.
Haz clic en el icono Bibliotecas en la barra izquierda del Arduino IDE.
Busca “ezButton”, luego encuentra la biblioteca ezButton de ArduinoGetStarted
Haz clic en el botón Instalar para instalar la biblioteca ezButton.

Busca “SSD1306”, luego encuentra la biblioteca SSD1306 de Adafruit
Haz clic en el botón Instalar para instalar la biblioteca

Se le pedirá que instale algunas otras dependencias de la biblioteca.
Haga clic en el botón Instalar todo para instalar todas las dependencias de la biblioteca.

Biblioteca de sensores Adafruit GFX para ESP32

Copia el código anterior y ábrelo con el IDE de Arduino
Haz clic en el botón Cargar en el IDE de Arduino para cargar el código en el ESP32
Pulsa el botón varias veces
Observa cómo cambia el número de conteo en el OLED

El código anterior solo muestra el conteo de pulsaciones del botón en la esquina superior izquierda. ¡Modifiquemos el código para centralizarlo!

Código ESP32 - Centrado vertical y horizontal en OLED

/* * Este código de ESP32 fue desarrollado por es.newbiely.com * Este código de ESP32 se proporciona al público sin ninguna restricción. * Para tutoriales completos y diagramas de cableado, visite: * https://es.newbiely.com/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(); }

※ Nota:

El código anterior centra automáticamente el texto horizontal y verticalmente en la pantalla OLED. Consulta Cómo centrar vertical y horizontalmente en OLED para más detalles.

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.

Tutoriales Relacionados

※ NUESTROS MENSAJES

No dude en compartir el enlace de este tutorial. Sin embargo, por favor no use nuestro contenido en otros sitios web. Hemos invertido mucho esfuerzo y tiempo en crear el contenido, ¡por favor respete nuestro trabajo!

DIVULGACIÓN

es.newbiely.com es participante del Programa de Asociados de Amazon Services LLC, un programa de publicidad de afiliados diseñado para proporcionar un medio para que los sitios web ganen tarifas publicitarias mediante publicidad y enlaces a Amazon.com, Amazon.it, Amazon.de, Amazon.co.uk, Amazon.ca, Amazon.de, Amazon.es, Amazon.nl, Amazon.pl y Amazon.se

Email: newbiely.com@gmail.com