ESP32 S3 - Bouton

Apprendre à utiliser un bouton avec votre ESP32 S3 est l'une des compétences les plus fondamentales en développement embarqué. Ce tutoriel vous guide à travers tout ce dont vous avez besoin — câblage, code et pièges courants — afin que vous puissiez ajouter en toute confiance une entrée bouton à n'importe quel projet ESP32 S3.

Ce que vous allez construire :

  1. Un circuit connectant un bouton poussoir à l'ESP32 S3 en utilisant la résistance de tirage interne (pull-up)
  2. Un sketch qui lit et affiche l'état du bouton dans le Serial Monitor
  3. Une version améliorée qui détecte séparément les événements d'appui et de relâchement
  4. Une base pour des applications concrètes comme des compteurs, des interrupteurs à bascule et des déclencheurs de sécurité
ESP32 S3 - Button

※ Note:

Avant de présenter le bouton, nous souhaitons signaler qu'il existe deux erreurs courantes que les débutants rencontrent généralement :

  1. Le problème de l'entrée flottante :
    • Symptôme : Lors de la connexion d'un bouton à une broche d'entrée de l'ESP32 S3, l'état de la broche d'entrée est aléatoire et ne correspond pas à l'état d'appui du bouton.
    • Cause : La broche du bouton n'utilise PAS de résistance de tirage vers le bas (pull-down) ni de résistance de tirage vers le haut (pull-up).
    • Solution : ⇒ Utilisez une résistance de tirage vers le bas ou vers le haut sur la broche d'entrée. Les détails seront décrits plus loin dans ce tutoriel.
  • Le phénomène de rebond (chattering)
    • Symptôme : Le code sur l'ESP32 S3 lit l'état du bouton et identifie l'événement d'appui en détectant le changement d'état (HIGH vers LOW, ou LOW vers HIGH). Alors que le bouton n'est réellement appuyé qu'une seule fois, le code de l'ESP32 S3 détecte plusieurs appuis au lieu d'un seul.
    • Cause : En raison des caractéristiques mécaniques et physiques, lorsque vous faites un seul appui sur un bouton, l'état de la broche d'entrée bascule rapidement entre LOW et HIGH plusieurs fois au lieu d'une seule
    • Solution : ⇒ Anti-rebond (debounce). Les détails seront décrits dans le tutoriel ESP32 S3 - Bouton - Anti-rebond.

    Le phénomène de rebond ne cause un dysfonctionnement que dans certains types d'applications qui doivent détecter le nombre exact d'appuis. Dans d'autres types d'applications, il est sans conséquence.

    À propos du bouton

    Un bouton poussoir est un simple interrupteur électromécanique qui ferme un circuit électrique lorsqu'il est appuyé et l'ouvre lorsqu'il est relâché. Malgré sa simplicité, le bouton est l'un des dispositifs d'entrée les plus polyvalents que vous utiliserez dans les projets ESP32 S3, permettant une interaction utilisateur avec un minimum de matériel.

    Spécifications clés

    Les boutons poussoirs montés sur PCB sont conçus pour le prototypage sur breadboard et les applications à souder. Les boutons poussoirs montés en panneau s'intègrent dans des boîtiers pour des projets finis. Les modules de bouton incluent une résistance de tirage vers le bas intégrée, ce qui simplifie le câblage et garantit un signal stable sans aucun composant externe.

    ESP32 S3 Push button

    Brochage du bouton

    Bouton monté sur PCB (4 broches)

    Un bouton monté sur PCB possède quatre broches connectées en interne par paires, ce qui donne au composant une stabilité mécanique lorsque vous appuyez dessus sur un breadboard.

    Button Pinout

    Les quatre broches se réduisent à deux bornes électriquement distinctes. Lors du choix des broches à câbler, choisissez une broche de chaque paire :

    1. Les quatre broches sont disposées en deux paires connectées en interne
    2. Seules deux des quatre broches doivent être connectées dans votre circuit
    3. Toute combinaison choisissant une broche de chaque paire fonctionnera correctement
    4. Les broches supplémentaires ajoutent une stabilité physique pour résister à la force d'appui
    How To Use Button

    Bouton monté en panneau (2 broches)

    Un bouton monté en panneau possède deux broches simples sans appariement interne — connectez simplement une broche à votre GPIO et l'autre à GND (ou VCC, selon votre méthode de câblage).

    two-pin push button Pinout
    image source: diyables.io

    Module de bouton (3 broches)

    Le module de bouton intègre une résistance de tirage vers le bas directement sur la carte, ce qui en fait l'option la plus adaptée aux débutants. Ses trois broches sont :

    1. GND : Connectez à la masse
    2. VCC : Connectez à une alimentation 3,3V
    3. OUT : Connectez à une broche d'entrée numérique de l'ESP32 S3 (sortie LOW lorsqu'il n'est pas appuyé, HIGH lorsqu'il est appuyé)

    Comment fonctionne le bouton

    Le bouton agit comme un simple interrupteur marche/arrêt entre deux broches :

    1. Lorsqu'il est appuyé : La broche A se connecte à la broche B, complétant le circuit
    2. Lorsqu'il est relâché : La broche A se déconnecte de la broche B, ouvrant le circuit
    How Button Works

    ESP32 S3 - Bouton

    Une broche du bouton se connecte à une broche d'entrée numérique de l'ESP32 S3, et l'autre se connecte soit à VCC soit à GND selon la méthode de câblage choisie. Votre code ESP32 S3 lit ensuite le niveau de tension sur cette broche d'entrée pour déterminer si le bouton est actuellement appuyé ou relâché.

    État de l'entrée et état d'appui

    La relation entre la tension de la broche d'entrée et l'état physique du bouton dépend de la façon dont vous câblez le circuit. Il existe deux approches standards :

    1. Bouton connecté à VCC :
      • Nécessite une résistance de tirage vers le bas
      • Bouton appuyé = signal HIGH
      • Bouton relâché = signal LOW
  • Bouton connecté à GND (recommandé pour les débutants) :
    • Nécessite une résistance de tirage vers le haut
    • Bouton appuyé = signal LOW
    • Bouton relâché = signal HIGH

    ※ Note:

    Si ni une résistance de tirage vers le bas ni une résistance de tirage vers le haut n'est utilisée, l'état de la broche d'entrée est aléatoire entre HIGH et LOW (instable, non fixé) lorsque le bouton n'est PAS appuyé. C'est ce qu'on appelle le "problème d'entrée flottante". Cela entraîne un dysfonctionnement.

    L'ESP32 S3 dispose de résistances de tirage vers le haut internes intégrées dans chaque broche GPIO, vous pouvez donc en activer une avec une seule ligne de code — aucune résistance externe n'est nécessaire. C'est l'approche la plus simple et la plus courante pour les débutants utilisant la méthode de câblage bouton-vers-GND.

    Schéma de câblage entre le bouton et l'ESP32 S3

    Les schémas suivants montrent comment connecter les deux types de boutons (montés sur PCB et montés en panneau) à votre ESP32 S3. Les deux configurations utilisent la résistance de tirage vers le haut interne, donc aucun composant de résistance externe n'est nécessaire.

    Notes de sécurité

    Connectez toujours votre bouton avant de mettre la carte sous tension. La broche GPIO7 de l'ESP32 S3 fonctionne en logique 3,3V — ne connectez jamais le bouton directement à une source 5V. Utiliser la résistance de tirage vers le haut interne avec une configuration bouton-vers-GND est l'approche la plus sûre et la plus fiable pour la plupart des applications.

    Câblage avec un bouton monté sur PCB :

    ESP32 S3 Button Wiring Diagram

    Cette image a été créée avec Fritzing. Cliquez pour agrandir l'image.

    Broche du bouton Broche ESP32 S3
    Broche A GPIO21
    Broche B GND

    Comment programmer le bouton

    Programmer un bouton sur l'ESP32 S3 ne nécessite que deux étapes. D'abord, configurez la broche GPIO en entrée avec la résistance de tirage vers le haut interne activée. Ensuite, utilisez digitalRead() dans votre boucle pour échantillonner en continu l'état de la broche.

    Étape 1 : Initialiser la broche avec le tirage vers le haut interne :

    pinMode(21, INPUT_PULLUP); // config GPIO21 as input pin and enable the internal pull-up resistor

    Étape 2 : Lire l'état du bouton :

    int button_state = digitalRead(BUTTON_PIN);

    Deux cas d'usage courants :

    ※ Note:

    Il existe deux cas d'usage très répandus :

    • Le premier cas d'usage : Si l'état de l'entrée est HIGH, faire quelque chose. Si l'état de l'entrée est LOW, faire autre chose.
    • Le second cas d'usage : Si l'état de l'entrée passe de LOW à HIGH, faire quelque chose. Si l'état de l'entrée passe de HIGH à LOW, faire autre chose.

    Selon l'application, l'un des deux est utilisé. Par exemple, dans le cas de l'utilisation d'un bouton pour contrôler une LED :

    • Si nous voulons allumer la LED lorsque le bouton est appuyé et l'éteindre lorsque le bouton n'est PAS appuyé, nous DEVRIONS utiliser le premier cas.
    • Si nous voulons basculer la LED entre allumée et éteinte à chaque appui sur le bouton, nous DEVRIONS utiliser le second cas.

    Exemple : Détecter le changement d'état de LOW à HIGH :

    #define BUTTON_PIN 21 // GPIO21 pin connected to button int prev_state = HIGH; // the previous state from the input pin int button_state; // the current reading from the input pin void setup() { Serial.begin(115200); // initialize the pushbutton pin as an pull-up input pinMode(BUTTON_PIN, INPUT_PULLUP); } void loop() { // read the state of the switch/button: button_state = digitalRead(BUTTON_PIN); if(prev_state == LOW && button_state == HIGH) Serial.println("The state changed from LOW to HIGH"); // save the last state prev_state = button_state; }

    Code ESP32 S3

    Le sketch suivant configure le GPIO21 en entrée avec une résistance de tirage vers le haut interne, puis échantillonne en continu l'état du bouton et l'affiche dans le Serial Monitor toutes les 100 millisecondes. C'est le point de départ idéal pour comprendre comment l'ESP32 S3 lit les signaux d'entrée numérique d'un bouton physique.

    Étapes rapides

    1. Nouveau sur l'ESP32 S3 ? Terminez d'abord notre guide ESP32 S3 - Premiers pas.
    2. Câblez les composants : Suivez le schéma de câblage montré ci-dessus.
    3. Connectez votre carte : Branchez l'ESP32 S3 à votre ordinateur via un câble USB.
    4. Ouvrez Arduino IDE : Lancez le logiciel sur votre ordinateur.
    5. Sélectionnez votre carte : Choisissez ESP32 S3 et le bon port COM.
    6. Téléversez le code : Copiez le code ci-dessous et collez-le dans Arduino IDE.
    /* * Ce code ESP32 S3 a été développé par newbiely.fr * Ce code ESP32 S3 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/esp32-s3/esp32-s3-button */ #define BUTTON_PIN 21 // The ESP32 S3 pin GPIO21 pin connected to button void setup() { // Initialize the Serial to communicate with the Serial Monitor. Serial.begin(115200); // initialize the button pin as an pull-up input (HIGH when the switch is open and LOW when the switch is closed) pinMode(BUTTON_PIN, INPUT_PULLUP); } void loop() { // read the state of the switch/button: int button_state = digitalRead(BUTTON_PIN); // print out the button's state Serial.println(button_state); }
    1. Compilez et téléversez : Cliquez sur le bouton Upload dans Arduino IDE.
    How to upload ESP32 S3 code on Arduino IDE
    1. Ouvrez le Serial Monitor : Cliquez sur l'icône Serial Monitor dans Arduino IDE.
    How to open serial monitor on Arduino IDE
    1. Testez le bouton : Appuyez et relâchez le bouton plusieurs fois.
    2. Consultez les résultats : Vérifiez la sortie du Serial Monitor.
    3. Astuce : Gardez le débit en bauds du Serial Monitor réglé sur 115200 pour correspondre à l'appel Serial.begin(115200) dans votre sketch.

    Sortie du Serial Monitor

    ∞
    Newbiely | Arduino IDE 2.3.8
    ──
    ☐
    ✕
    File
    Edit
    Sketch
    Tools
    Help
    ESP32S3 Dev Module
    Newbiely.ino
    ···
    8 Serial.println("Hello World!");
    Output
    Serial Monitor
    Message (Enter to send message to 'ESP32S3 Dev Module' on 'COM15')
    New Line
    9600 baud
    [2026-06-16 10:23:41] 1 [2026-06-16 10:23:41] 1 [2026-06-16 10:23:42] 1 [2026-06-16 10:23:42] 0 [2026-06-16 10:23:42] 0 [2026-06-16 10:23:43] 0 [2026-06-16 10:23:43] 0 [2026-06-16 10:23:43] 0 [2026-06-16 10:23:44] 1 [2026-06-16 10:23:44] 1 [2026-06-16 10:23:44] 1 [2026-06-16 10:23:45] 1 [2026-06-16 10:23:45] 0 [2026-06-16 10:23:45] 0 [2026-06-16 10:23:46] 1 [2026-06-16 10:23:46] 1
    Ln 11, Col 1
    ESP32S3 Dev Module on COM15
    2

    Note : 1 représente HIGH (bouton relâché), 0 représente LOW (bouton appuyé).

    Explication du code ligne par ligne

    Le code ESP32 S3 ci-dessus contient une explication ligne par ligne. Veuillez lire les commentaires dans le code !

    Modifier le code ESP32 S3

    Améliorons le code pour détecter des événements distincts d'appui et de relâchement plutôt que de simplement lire l'état brut. Cette approche est plus utile dans les applications réelles où vous devez déclencher une action au moment où le bouton est appuyé ou relâché.

    Étapes rapides

    1. Configurer l'environnement : Si c'est la première fois que vous utilisez l'ESP32 S3, voir ESP32 S3 - Premiers pas.
    2. Modifiez le code : Remplacez votre code précédent par le code ci-dessous.
    /* * Ce code ESP32 S3 a été développé par newbiely.fr * Ce code ESP32 S3 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/esp32-s3/esp32-s3-button */ #define BUTTON_PIN 21 // The ESP32 S3 pin GPIO21 pin connected to button int prev_state = LOW; // The previous state from the input pin int button_state; // The current reading from the input pin void setup() { // Initialize the Serial to communicate with the Serial Monitor. Serial.begin(115200); // initialize the button pin as an pull-up input (HIGH when the switch is open and LOW when the switch is closed) pinMode(BUTTON_PIN, INPUT_PULLUP); } void loop() { // read the state of the switch/button: button_state = digitalRead(BUTTON_PIN); if (prev_state == HIGH && button_state == LOW) Serial.println("The button is pressed"); else if (prev_state == LOW && button_state == HIGH) Serial.println("The button is released"); // save the the last state prev_state = button_state; }
    1. Téléversez le code : Compilez et téléversez sur votre carte ESP32 S3.
    2. Ouvrez le Serial Monitor : Consultez la fenêtre de sortie.
    3. Testez : Appuyez et relâchez le bouton.
    4. Observez les résultats : Vérifiez le Serial Monitor pour les messages d'événements.

    Sortie du Serial Monitor

    ∞
    Newbiely | Arduino IDE 2.3.8
    ──
    ☐
    ✕
    File
    Edit
    Sketch
    Tools
    Help
    ESP32S3 Dev Module
    Newbiely.ino
    ···
    8 Serial.println("Hello World!");
    Output
    Serial Monitor
    Message (Enter to send message to 'ESP32S3 Dev Module' on 'COM15')
    New Line
    9600 baud
    The button is pressed The button is released The button is pressed The button is pressed The button is released The button is pressed The button is released
    Ln 11, Col 1
    ESP32S3 Dev Module on COM15
    2

    ※ Note:

    • Le Serial Monitor peut afficher plusieurs événements d'appui et de relâchement même si vous n'avez fait qu'un seul appui et relâchement. C'est un comportement normal du bouton. Ce comportement est appelé le "phénomène de rebond". Dans certaines applications, nous avons besoin d'une méthode pour l'éliminer. Vous pouvez en apprendre davantage dans le tutoriel ESP32 S3 - Bouton Anti-rebond.
    • Pour simplifier la tâche des débutants, en particulier lors de l'utilisation de plusieurs boutons, nous avons créé une bibliothèque appelée ezButton. Vous pouvez en apprendre plus sur la bibliothèque ezButton ici.
    • Lors de l'utilisation du module de bouton, réglez la broche avec pinMode(BUTTON_PIN, INPUT). Le module produit LOW lorsqu'il n'est pas appuyé et HIGH lorsqu'il est appuyé.

    Idées d'applications/projets

    Le bouton poussoir est un élément de base qui ouvre d'innombrables possibilités de projets ESP32 S3, des simples indicateurs aux systèmes de contrôle complexes.

    1. Contrôleur de LED : Basculez ou faites varier l'intensité d'une LED avec des appuis sur le bouton pour apprendre le contrôle de sortie en parallèle de la lecture d'entrée.
    2. Compteur numérique : Comptez les appuis sur le bouton et affichez le total sur un OLED ou le Serial Monitor — idéal pour apprendre le suivi d'état.
    3. Buzzer de quiz : Câblez plusieurs boutons à plusieurs broches GPIO de l'ESP32 S3 pour un système de buzzer multijoueur.
    4. Alarme de sécurité : Activez une alarme ou envoyez une notification Wi-Fi lorsqu'un bouton est appuyé pendant une durée définie.
    5. Contrôleur de musique : Contrôlez la lecture audio (lecture, pause, passer) en associant différents motifs d'appui à des actions.
    6. Interrupteur intelligent : Remplacez un interrupteur mural traditionnel par un bouton ESP32 S3 qui contrôle également la lumière à distance via Wi-Fi.

    Section vidéo

    Regardez ci-dessous le tutoriel vidéo étape par étape de ce projet ESP32 S3.

    Relevez le défi

    Ces exercices approfondiront votre compréhension de l'entrée bouton sur l'ESP32 S3, en progressant d'un exercice de câblage de base vers des motifs d'interaction plus sophistiqués.

    1. Débutant : Ajoutez une LED qui s'allume tant que le bouton est maintenu enfoncé et s'éteint lorsqu'il est relâché.
    2. Débutant : Comptez combien de fois le bouton est appuyé et affichez le total courant dans le Serial Monitor.
    3. Intermédiaire : Construisez un détecteur d'appui long qui déclenche une action différente selon que l'appui est plus court ou plus long qu'une seconde.
    4. Intermédiaire : Implémentez un anti-rebond logiciel pour éliminer les fausses détections de multi-appuis sans utiliser de bibliothèque.
    5. Avancé : Créez un cadenas à combinaison utilisant trois boutons — seule la bonne séquence d'appuis dans l'ordre déverrouille une sortie simulée.

    Connaissances supplémentaires

    Comprendre quand appliquer des résistances de tirage vers le haut ou vers le bas est un concept important pour construire des projets ESP32 S3 fiables avec des entrées numériques.

    Quand utiliser des résistances de tirage vers le haut/vers le bas :

    • DEVRAIT utiliser : Les capteurs à deux états (ouvert/fermé) ont besoin de résistances pour créer des signaux HIGH/LOW nets
      • Exemples : bouton poussoir, interrupteur, contact magnétique (capteur de porte)
    • NE DEVRAIT PAS utiliser : Les capteurs qui produisent des niveaux de tension (LOW/HIGH) n'ont pas besoin de résistances

    Références du langage

    Commentaires

    ※ NOS MESSAGES

    • N'hésitez pas à partager le lien de ce tutoriel. Cependant, veuillez ne pas utiliser notre contenu sur d'autres sites web. Nous avons investi beaucoup d'efforts et de temps pour créer ce contenu, veuillez respecter notre travail !