ESP8266 - Conteo de botones - OLED
Este tutorial explica cómo usar el ESP8266 y un botón para contar los eventos de pulsación y luego mostrar el valor en la pantalla OLED. En detalle:
- El ESP8266 cuenta cuántas veces se ha pulsado un botón.
- El ESP8266 muestra el conteo en un OLED.
- El ESP8266 alinea automáticamente el conteo en el centro de la pantalla OLED, tanto horizontal como verticalmente.
En este tutorial, eliminaremos el rebote de un botón sin usar la función delay(). Para obtener más información sobre por qué es necesario el rebote, consulte ¿Por qué necesitamos el rebote?
Puedes adaptar esto para que funcione con diferentes sensores en lugar del 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 de OLED y Botón
Si no estás familiarizado con OLED y con el botón (asignación de pines, funcionalidad, programación ...), los siguientes tutoriales pueden ayudar:
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.
Código ESP8266 - mostrando el conteo de botones en OLED
/*
* 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-count-oled
*/
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include <ezButton.h>
#define OLED_WIDTH 128 // OLED display width, in pixels
#define OLED_HEIGHT 64 // OLED display height, in pixels
Adafruit_SSD1306 oled(OLED_WIDTH, OLED_HEIGHT, &Wire, -1); // create SSD1306 display object connected to I2C
ezButton button(7); // create ezButton object for pin 7;
unsigned long prev_count = 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 (prev_count != count) {
Serial.println(count); // print count to Serial Monitor
oled.clearDisplay(); // clear display
oled.println(count); // display count
oled.display(); // show on OLED
prev_count != count;
}
}
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 computadora usando un cable USB.
- Abre Arduino IDE en tu computadora.
- Elige la placa ESP8266 correcta, por ejemplo (p. ej. NodeMCU 1.0 (Módulo ESP-12E)), y su puerto COM respectivo.
- Haz clic en el icono Bibliotecas en la barra izquierda del Arduino IDE.
- Busca “ezButton”, luego localiza la biblioteca de botones proporcionada por ArduinoGetStarted.
- Pulsa el botón Instalar para instalar la biblioteca ezButton.
- Busca “SSD1306” y localiza la biblioteca SSD1306 creada por Adafruit.
- Haz clic en el botón Instalar para agregar la biblioteca.
- Se le pedirá que instale dependencias de librerías adicionales.
- Para instalarlas todas, haga clic en el botón Instalar todo.
- Copia el código y ábrelo con el IDE de Arduino.
- Pulsa el botón Subir en el IDE de Arduino para compilar y subir el código al ESP8266.
- Pulsa el botón varias veces.
- Observa el número de conteo que cambia en la pantalla OLED.
El código anterior muestra la cantidad de pulsaciones del botón en la esquina superior izquierda. ¡Hagamos un cambio para centrarlo!
Código ESP8266 - Alineación vertical y horizontal centrada en la pantalla OLED
/*
* 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-count-oled
*/
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>
#include <ezButton.h>
#define OLED_WIDTH 128 // OLED display width, in pixels
#define OLED_HEIGHT 64 // OLED display height, in pixels
Adafruit_SSD1306 oled(OLED_WIDTH, OLED_HEIGHT, &Wire, -1); // create SSD1306 display object connected to I2C
ezButton button(7); // create ezButton object for pin 7;
unsigned long prev_count = 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 (prev_count != count) {
Serial.println(count); // print count to Serial Monitor
String text = String(count);
oled_display_center(text);
prev_count != count;
}
}
void oled_display_center(String text) {
int16_t x1;
int16_t y1;
uint16_t width;
uint16_t height;
oled.getTextBounds(text, 0, 0, &x1, &y1, &width, &height);
// center the display both horizontally and vertically
oled.clearDisplay(); // clear display
oled.setCursor((OLED_WIDTH - width) / 2, (OLED_HEIGHT - height) / 2);
oled.println(text); // text to display
oled.display();
}
※ Nota:
Este código centrará horizontal y verticalmente el texto en una pantalla OLED. Para obtener más información, consulte Cómo centrar vertical y horizontalmente en OLED.
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.