ESP8266 - Bouton - LED

Ce tutoriel vous explique comment utiliser l'ESP8266 et un bouton pour contrôler une LED. Nous allons apprendre deux applications différentes :

Application 1 - L'état de la LED est synchronisé avec l'état du bouton. En détail :

Application 2 - L'état de la LED est basculé à chaque fois que le bouton est pressé. Plus spécifiquement :

Dans l'Application 2, nous devons éliminer le rebond du bouton pour nous assurer qu'il fonctionne correctement. Nous découvrirons pourquoi c'est important en comparant le comportement de la LED lorsque nous utilisons le code ESP8266 avec et sans anti-rebond sur le bouton.

Préparation du matériel

1×ESP8266 NodeMCU
1×Micro USB Cable
1×Push Button
1×(Optional) Panel-mount Push Button
1×LED
1×220 ohm resistor
1×Breadboard
1×Jumper Wires
1×(Optional) 5V Power Adapter for ESP8266
1×(Optional) ESP8266 Screw Terminal Adapter

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 des LED et des boutons

Si vous n'êtes pas familier avec les LED et les boutons (y compris le brochage, le fonctionnement et la programmation), les tutoriels suivants peuvent vous aider :

Diagramme de câblage

Schéma de câblage du bouton LED ESP8266 NodeMCU

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.

Application 1 - L'état de la LED est synchronisé avec l'état du bouton

Code ESP8266

/* * 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-led */ #define BUTTON_PIN D1 // The ESP8266 pin D1 connected to button #define LED_PIN D7 // The ESP8266 pin D7 connected to led int button_state = 0; // variable for reading the button status void setup() { // Configure the LED pin as a digital output pinMode(LED_PIN, OUTPUT); // Configure the ESP8266 pin as a pull-up input: HIGH when the button is open, LOW when pressed. pinMode(BUTTON_PIN, INPUT_PULLUP); } void loop() { // read the state of the button value: button_state = digitalRead(BUTTON_PIN); // control LED according to the state of button if (button_state == LOW) // if button is pressed digitalWrite(LED_PIN, HIGH); // turn on LED else // otherwise, button is not pressing digitalWrite(LED_PIN, LOW); // turn off LED }

Étapes rapides

Pour commencer avec 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é dans le schéma.
  • Connectez la carte ESP8266 à votre ordinateur à l'aide d'un câble USB.
  • Ouvrez l'Arduino IDE sur votre ordinateur.
  • Choisissez la bonne carte ESP8266, comme (par exemple, NodeMCU 1.0 (Module ESP-12E)), et son port COM respectif.
  • Connectez un ESP8266 à votre ordinateur avec un câble USB.
  • Lancez l'Arduino IDE et sélectionnez la carte et le port corrects.
  • Copiez le code et ouvrez-le dans l'Arduino IDE.
  • Cliquez sur le bouton Upload dans l'Arduino IDE pour compiler et téléverser le code vers l'ESP8266.
Charger le code de l'IDE Arduino
  • Appuyez sur le bouton et maintenez-le enfoncé pendant quelques secondes.
  • Observez le changement d'état du témoin LED.

Vous verrez que l'état de la LED est synchronisé avec l'état du bouton.

Explication du code

Découvrez l'explication ligne par ligne contenue dans les commentaires du code source !

Application 2 - Bouton bascule LED

Code ESP8266 - Un bouton bascule la LED sans anti-rebond

/* * 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-led */ #define BUTTON_PIN D1 // The ESP8266 pin D1 connected to button #define LED_PIN D7 // The ESP8266 pin D7 connected to led int led_state = LOW; // The current state of LED int button_state; // The current state of button int last_button_state; // The previous state of button void setup() { Serial.begin(9600); // Initialize the Serial to communicate with the Serial Monitor. pinMode(BUTTON_PIN, INPUT_PULLUP); // Configure the ESP8266 pin to the input pull-up mode pinMode(LED_PIN, OUTPUT); // Configure the ESP8266 pin to the output mode button_state = digitalRead(BUTTON_PIN); } void loop() { last_button_state = button_state; // save the last state button_state = digitalRead(BUTTON_PIN); // read new state if (last_button_state == HIGH && button_state == LOW) { Serial.println("The button is pressed"); // toggle state of LED led_state = !led_state; // control LED according to the toggled state digitalWrite(LED_PIN, led_state); } }

Explication du code

Vous pouvez trouver l'explication dans les lignes de commentaire du code ESP8266 ci-dessus.

Dans le code, l'expression led_state = !led_state est équivalente au code suivant :

if(led_state == LOW) led_state = HIGH; else led_state = LOW;

Étapes rapides

  • Copiez le code et ouvrez-le dans l'IDE Arduino.
  • Téléversez le code vers l'ESP8266.
  • Appuyez sur le bouton de libération plusieurs fois.
  • Observez le changement d'état de la LED.

Vous pouvez remarquer que l'état de la LED change à chaque fois que le bouton est pressé. Toutefois, ce comportement peut ne pas toujours être constant. Parfois, l'état de la LED peut changer rapidement plusieurs fois lors d'une seule pression sur le bouton, ou il se peut qu'il ne change pas du tout (changeant deux fois de suite rapidement, ce qui peut être difficile à percevoir à l'œil nu).

Pour résoudre ce problème, nous devons appliquer un anti-rebond pour le bouton.

Code ESP8266 - Bouton bascule LED avec anti-rebond

Le rebond d'un bouton peut être difficile pour les débutants. Heureusement, la bibliothèque ezButton facilite les choses.

Pourquoi le debounce est-il nécessaire ? Consultez le tutoriel ESP8266 - Debounce de bouton pour plus d'informations.

/* * 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-led */ #include <ezButton.h> #define BUTTON_PIN D1 // The ESP8266 pin D1 connected to button #define LED_PIN D7 // The ESP8266 pin D7 connected to led ezButton button(BUTTON_PIN); // create ezButton object for pin 7; int led_state = LOW; // The current state of LED void setup() { Serial.begin(9600); // Initialize the Serial to communicate with the Serial Monitor. pinMode(LED_PIN, OUTPUT); // Configure the ESP8266 pin to the output mode button.setDebounceTime(50); // set debounce time to 50 milliseconds } void loop() { button.loop(); // MUST call the loop() function first if (button.isPressed()) { Serial.println("The button is pressed"); // toggle state of LED led_state = !led_state; // control LED according to the toggleed sate digitalWrite(LED_PIN, led_state); } }

Étapes rapides

  • Installez la bibliothèque ezButton. Consultez Comment faire pour les instructions.
  • Copiez le code et ouvrez-le avec Arduino IDE.
  • Cliquez sur le bouton Upload sur Arduino IDE pour téléverser le code vers l'ESP8266.
  • Appuyez et relâchez le bouton plusieurs fois.
  • Observez le changement d'état de la LED.

Vous verrez que l'état de la LED est basculé exactement une fois à chaque pression sur le bouton.

Vidéo

※ OUR MESSAGES

  • Please feel free to share the link of this tutorial. However, Please do not use our content on any other websites. We invested a lot of effort and time to create the content, please respect our work!