ESP32 - Contagem de Botão - OLED
Neste tutorial, vamos explorar o ESP32 para atingir os seguintes objetivos:
- Contar o número de vezes que um botão é pressionado.
- Mostrar o número da contagem em um display OLED.
- Implementar o alinhamento automático ao centro, na vertical e na horizontal, do número da contagem no display OLED.
Além disso, o tutorial aborda o debouncing do botão sem usar a função delay(). Para entender por que o debouncing é essencial, consulte a explicação em Por que precisamos de debouncing?.
Este guia completo vai ajudar você a integrar de forma simples a contagem de pressionamentos do botão, o funcionamento do display OLED e as técnicas de debouncing no seu projeto com ESP32.
Hardware Necessário
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | |
| 1 | × | DIYables ESP32 S3 Starter Kit (ESP32 S3 included) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgação: Alguns dos links desta seção são links de afiliado da Amazon. Podemos receber uma comissão pelas compras feitas por meio desses links, sem custo adicional para você. Agradecemos o seu apoio.
Buy Note: If you want a bigger OLED display, use the 2.42 inch OLED Display 128x64 .
Sobre o OLED e o Botão
Não conhece o OLED e o botão, incluindo a pinagem, o funcionamento e a programação deles? Explore os tutoriais completos sobre esses temas abaixo:
Diagrama de Ligação
This image is created using Fritzing. Click to enlarge image
Se você não sabe como alimentar o ESP32 e outros componentes, veja as instruções no tutorial a seguir: Como alimentar o ESP32.
Código ESP32 - mostrando a contagem do botão no OLED
/*
* Este código de ESP32 foi desenvolvido por pt.newbiely.com
* Este código de ESP32 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.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;
}
}
Passos Rápidos
- Se esta é a primeira vez que você usa o ESP32, veja como configurar o ambiente para o ESP32 na Arduino IDE.
- Faça a ligação conforme a imagem acima.
- Conecte a placa ESP32 ao seu PC usando um cabo USB Type-C
- Abra a Arduino IDE no seu PC.
- Selecione a placa ESP32 correta (por exemplo, ESP32 Dev Module) e a porta COM.
- Clique no ícone Libraries na barra esquerda da Arduino IDE.
- Pesquise “ezButton” e encontre a biblioteca de botão da ArduinoGetStarted
- Clique no botão Install para instalar a biblioteca ezButton.
- Pesquise “SSD1306” e encontre a biblioteca SSD1306 da Adafruit
- Clique no botão Install para instalar a biblioteca.
- Será solicitado que você instale algumas outras bibliotecas dependentes
- Clique no botão Install All para instalar todas as bibliotecas dependentes.
- Copie o código acima e abra-o na Arduino IDE
- Clique no botão Upload na Arduino IDE para carregar o código no ESP32
- Pressione o botão várias vezes
- Veja o número da contagem mudar no OLED
O código acima apenas mostra a contagem de pressionamentos do botão no canto superior esquerdo. Vamos modificar o código para centralizá-la!
Código ESP32 - Alinhamento ao Centro na Vertical e na Horizontal no OLED
/*
* Este código de ESP32 foi desenvolvido por pt.newbiely.com
* Este código de ESP32 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.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:
O código acima alinha automaticamente o texto ao centro, na horizontal e na vertical, no display OLED. Veja Como centralizar na vertical/horizontal no OLED para mais detalhes.