ESP8266 - Compteur Bouton - OLED
Ce tutoriel vous explique comment utiliser l'ESP8266 et un bouton pour compter les événements de pression, puis afficher la valeur sur un OLED. En détail :
- L'ESP8266 compte combien de fois un bouton est pressé.
- L'ESP8266 affiche le nombre de pressions sur un OLED.
- L'ESP8266 aligne automatiquement le nombre de pressions au centre de l'écran OLED, horizontalement et verticalement.
Dans ce tutoriel, nous allons déparasiter un bouton sans utiliser la fonction delay(). Pour plus d'informations sur la nécessité du déparasitage, veuillez consulter Pourquoi avons-nous besoin de déparasiter ?
Vous pouvez adapter cela pour fonctionner avec différents capteurs au lieu du bouton.
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.
À propos de l'OLED et du bouton
Si vous n'êtes pas familier avec les OLED et les boutons (brochage, fonctionnalités, programmation...), les tutoriels suivants peuvent vous aider :
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.
Code ESP8266 - affichage du comptage des boutons sur OLED
/*
* 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-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;
}
}
É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 ESP8266.
- 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.
- Cliquez sur l'icône Libraries dans la barre de gauche de l'Arduino IDE.
- Recherchez “ezButton”, puis localisez la bibliothèque de boutons fournie par ArduinoGetStarted.
- Appuyez sur le bouton Install pour installer la bibliothèque ezButton.
- Recherchez “SSD1306” et localisez la bibliothèque SSD1306 créée par Adafruit.
- Cliquez sur le bouton Install pour ajouter la bibliothèque.
- Vous serez invité à installer des dépendances de bibliothèque supplémentaires.
- Pour les installer toutes, cliquez sur le bouton Install All.
- Copiez le code et ouvrez-le avec l'IDE Arduino.
- Cliquez sur le bouton Upload de l'IDE Arduino pour compiler et téléverser le code vers l'ESP8266.
- Appuyez plusieurs fois sur le bouton.
- Observez le nombre qui change sur l'OLED.
Le code ci-dessus indique le nombre de pressions sur le bouton dans le coin supérieur gauche. Faisons un changement pour le centrer !
Code ESP8266 - Alignement vertical et horizontal au centre sur OLED
/*
* 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-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();
}
※ NOTE THAT:
Ce code permet de centrer le texte horizontalement et verticalement sur un affichage OLED. Pour plus d'informations, veuillez consulter Comment centrer verticalement/horizontalement sur OLED.