Afficheur météo WiFi à base d’ESP32-S3 + écran TFT 2,8″ ILI9341

Histoire de vous partager une application pratique de l’ESP32-S3, voici un afficheur météo WiFi, permettant d’afficher les données météo d’un lieu donné, à partir de ses coordonnées GPS ! Ainsi, vous verrez comment un microcontrôleur peut accéder à internet, et récupérer des données en ligne, pour les afficher ensuite !

Dans cet article, nous verrons également comment gérer une double alimentation sans conflit (via un multiplexeur d’alimentation TPS2115A), comment modifier la forme d’un PCB permet de limiter les interférences sur l’antenne radio de l’ESP32, et comment réaliser un programme arduino pour ESP32 accédant à une API météo sur internet (via le réseau WiFi).

Remarque : comme toujours, il ne s’agit là que d’un projet éducatif. L’objectif n’est donc pas rivaliser avec telle ou telle station météo toute faite, qu’on trouve aisément dans le commerce, mais plutôt d’apprendre l’électronique à travers des réalisations concrètes ! Du reste, si vous débutez avec l’ESP32 ou les écrans TFT, je vous conseille tout d’abord de lire les articles suivants : programmer un ESP32 (en automatique) via un convertisseur USB/UART, et piloter les écrans TFT (contrôleur ILI9341) à partir d’un ESP32.

Caractéristiques de cet Afficheur Météo ESP32

Comme visible sur la vignette/image tout en haut, cet Afficheur Météo ESP32 permettra d’afficher la température (en °C), le temps (ensoleillé, couvert, pluvieux, orageux, …), et la vitesse du vent (en km/h), d’un point GPS donné (coordonnées définies par sa latitude et longitude, renseignées et modifiables en dur, dans le programme ESP32).

Ces données météos :

• seront récoltées, en WiFi sur internet, par un ESP32-S3-WROOM-1-N16R8, auprès d’une API météo (service en ligne gratuit sur internet)
• s’afficheront sur l’écran TFT 2,8″ couleur (320×240 pixels, contrôleur ILI9341, 65536 couleurs), fixé par dessus le PCB du présent projet
• seront actualisées toutes les 10 minutes environ (ou plus, selon l’API météo utilisée)

Au niveau de l’écran TFT, les infos météos seront présentées de la manière suivante :

À noter que l’heure de la dernière mise à jour des infos météo internet, affichée en bas à droite de l’écran, correspond à la dernière heure où les données météos ont été actualisées « côté serveur » (et non l’heure à laquelle l’ESP32 a téléchargé les dernières infos météo). Car l’API météo gratuite utilisée ici ne met à jour ses données seulement toutes les 15 minutes (mais libre à vous d’en utiliser une autre, si celle-ci vous paraît trop limitée !).

Du reste, le fond d’écran de l’écran TFT s’adaptera au temps actuel, c’est à dire que si par exemple le temps est pluvieux, alors le fond d’écran sera une « image pluvieuse ». Au passage, il y aura 7 fond différents possibles ici, correspondant aux temps suivants : ensoleillé, nuageux, couvert, brouillard, pluvieux, neigeux, et orageux. Les voici, en images :

Bien sûr, on aurait pu lister bien d’autres temps météo « intermédiaires » (averses pluvieuses, averses orageuses, etc) ; mais pour rester simple, je me suis limité à ces « 7 temps de base » ! Ensuite, libre à vous de vous inspirer et améliorer ce projet, pour qu’il devienne plus riche en infos météos 😉

Schéma électronique complet/détaillé

Entrons à présent dans le vif du sujet, et voyons sans plus attendre le schéma électronique de cet afficheur météo ESP32 WiFi (remarque : dans la zone téléchargement tout en bas, vous trouverez une version PDF bien plus lisible, si besoin !) :

Comme à l’accoutumée, je vous ai segmenté le schéma en plusieurs blocs, pour que ce soit plus simple à comprendre. Au niveau des ces blocs, on retrouve :

• un bloc « Alimentation USB (power only) », qui permet simplement de filtrer et abaisser la tension 5V issue de l’USB, pour en faire du 3,3V
• un bloc « Connecteur de programmation ESP32 (UART) », qui se résume à un connecteur à 6 broches, qui recevra le convertisseur USB/UART permettant de programmer l’ESP32 (et qui fournira au passage du +3,3V à la carte, si besoin). Pour rappel, ce convertisseur fait-maison permet de faire l’autoboot/autoreset du microcontrôleur, au moment de sa programmation !
• un bloc « Auto-commutateur d’alim (USB/PROG) », qui repose sur le multiplexeur d’alims TPS2115A. Cette puce est en fait un « sélecteur automatique d’alimentation idéal », qui permet de choisir entre le 3,3V issu de l’USB ou le 3,3V issu du programmateur, selon si l’un ou l’autre, ou les deux, sont branchés ; et ce, sans perte d’énergie conséquente, si risque de retour de courant indésirable
• un bloc « Ligne Boot ESP32 », qui permet d’initialiser correctement la ligne « BOOT/IO0 » de l’ESP32 (nota : cette ligne BOOT sera également pilotée par le « programmateur d’ESP32 avec autoboot », au moment de la programmation)
• un bloc « Ligne Reset ESP32 », qui permet d’initialiser correctement la ligne « EN/RESET » de l’ESP32. À noter que cette ligne pourra être pilotée de 2 manières : soit manuellement via le bouton-poussoir RESET, placé sur le PCB, soit par le « programmateur d’ESP32 avec autoreset », au moment de la programmation
• un bloc « Led ESP32 running », qui permet à l’ESP32 de pouvoir allumer une LED dédiée sur le PCB, pour dire que son programme est bien lancé
• un bloc « Écran TFT 2,8″ (contrôleur ILI9341), qui est en fait un ensemble de 2 connecteurs (un de 14 broches, et un autre de 4 broches), permettant de recevoir un écran TFT, par dessus le PCB. Remarque : j’ai rajouté des résistances pull-up et pull-down à ce niveau, afin que les lignes d’entrées de l’écran TFT ne soient pas dans un état « indéterminé » au moment du démarrage de l’ESP32 (le temps qu’il configure les pins et tout et tout !)
• et un bloc « Microcontrôleur (ESP32-S3-WROOM-1) », qui est simplement constitué d’un SoC ESP32-S3-WROOM-1-N16R8 (intégrant 16 Mo de mémoire flash, et 8 Mo de RAM, donc), pour gérer l’ensemble !

Voilà pour la partie schéma de cet afficheur météo wifi ESP32 ! Avouez que présenté bloc par bloc, tout ceci n’est pas si compliqué que ça à comprendre 😉

Liste des composants utilisés

Pour info, voici les composants utilisés dans ce projet d’afficheur météo sans fil ESP32 :

Qté	Désignation	Lien achat
3	Condensateur 10µF 50V X7R (CMS, format 1206)
1	Condensateur 22µF 25V X7R (CMS, format 1210)
6	Condensateur 100nF 50V X7R (CMS, format 1206)
1	Condensateur 1µF 50V X7R (CMS, format 1206)
1	Connecteur USB-C 2P power-only (traversant)
1	Connecteur pinSocket 1×6 pins coudé (traversant)
1	Connecteur pinSocket 1×14 pins droit (traversant)
1	Connecteur pinSocket 1×4 pins droit (traversant)
2	Led verte (CMS, format 1206)
1	Résistance 1KΩ 250mW ±1% (CMS, format 1206)
2	Résistance 2KΩ 250mW ±1% (CMS, format 1206)
6	Résistance 10KΩ 250mW ±1% (CMS, format 1206)
1	Bouton poussoir tactile SPST vertical (traversant)
1	Régulateur linéaire AMS1117-3.3 (CMS, format SOT-223)
1	Multiplexeur d’alimentations TPS2115APWR (CMS, format TSSOP-8)
1	Microcontrôleur ESP32-S3-WROOM-1-N16R8 (CMS, SoC_25.5x18mm)
1	Circuit imprimé PCB (voir lien. tout en bas de cet article)	–

En espérant n’avoir rien oublié, comme d’habitude 😉

Soudage des composants sur PCB

Avant tout, voici comment se présente le PCB de cet afficheur météo WiFi ESP32, vue dessous/dessus (où on voit bien l’excroissance du circuit imprimé, permettant de déporter légèrement l’ESP32 en dehors du circuit imprimé, pour permettre à son antenne d’avoir le champ libre pour les transmissions radio) :

Globalement, au niveau de ce PCB, tous les composants électroniques seront soudés du même côté (en « face avant »), tandis que l’arrière accueille un grand plan de masse. Au niveau du soudage, comme d’habitude, les composants CMS ont été soudés en premier (via une plaque chauffante), et les composants traversants ensuite seulement (au fer à souder).

Voici ce que donne la partie CMS, une fois le soudage à la table chauffante effectué (avec reprise des soudures au fer à souder + flux, là où y avait besoin) :

J’en ai profité pour vous faire un « zoom » sur le plus petit circuit intégré de ce projet, à savoir le TPS 2115A (en boîtier TSSOP-8), avec seulement 0,65 mm d’entraxe, au niveau de ses broches ! Il faudra bien évidemment vérifier (à la loupe ou au microscope) l’état des soudures une fois faites, avant de passer à la suite 🙂

Ensuite vient le soudage des composants traversants (connecteurs et bouton-poussoir), ce qui donne ceci, au final :

Enfin, il ne reste plus qu’à enficher l’écran TFT par dessus ce PCB, pour finaliser l’ensemble, comme visible ci-dessous (en vue de dessous, en vue de haut avec antenne ESP32 et bouton RESET bien visibles, et en vue de dessus) :

Remarque : comme toujours, vérifiez systématiquement toutes vos soudures avant d’aller plus loin. Puis avant tout essai, munissez vous d’un voltmètre pour les contrôles de tensions, et d’une caméra thermique pour ensuite pouvoir repérer au plus tôt tout échauffement anormal.

Aperçu du programme arduino (ici, pensez à renseigner votre SSID et mot de passe WiFi à vous !)

À présent, nous allons voir le programme arduino de cet afficheur météo WiFi ESP32 ! Au passage, si je dis « programme arduino », c’est par abus de langage, du fait qu’il a été écrit pour être ensuite compilé et téléversé via l’IDE Arduino 😉

Mais avant tout, commençons par le commencement ! Alors, au niveau des prérequis logiciel, il faudra tout d’abord :

• installer l’IDE Arduino sur votre ordi (si ce n’est pas déjà fait), puis le lancer
• installer les « cartes ESP32 » dans le « gestionnaire de cartes » Arduino IDE (pour info, j’avais déjà détaillé l’ajout des cartes ESP32 dans l’IDE Arduino ici ; je vous invite donc à vous y référer, si besoin !)
• installer les librairies « ArduinoJson » (celle de « Benoit Blanchon ») et « TFT_eSPI » (celle de « Bodmer ») dans le « gestionnaire de bibliothèques » arduino (dans le menu Outils > Gérer les bibliothèques)

Maintenant que nous avons vu les prérequis au niveau logiciel, laissez moi vous toucher un mot sur les différents fichiers qui composent ce programme « Afficheur Météo ESP32 WiFi » :

• tous les fichiers sources sont disponibles sur GitHub, en libre téléchargement, à l’adresse qui suit : https://github.com/PassionElectronique/Programme-projet-afficheur-meteo
• à ce niveau, vous trouverez un répertoire « programmeAfficheurMeteoESP32 », où figurent :
  • un fichier « programmeAfficheurMeteoESP32.ino », qui est le véritable cœur du programme
  • des fichiers du type « X-fond-yyyyyyy.h », qui contiennent en fait les images de fond (320×240 pixels, format RGB565), pour « coller à la météo qu’il fait » !
  • un fichier « .clang-format » que vous pouvez totalement ignorer (il m’a juste servi à faire l’indentation « correcte » des fichiers sous VSCodium, quand j’ai écrit le code, avant de basculer sur Arduino IDE)
  • et un fichier « User_Setup.h.pour.information », dont le contenu sera à copier/coller dans votre fichier « User_Setup » de votre ordi, qui permet de configurer la librairie TFT_eSPI (pour plus info, je vous renvoie vers le paramétrage du fichier User_Setup dans le répertoire de la libraire TFT_eSPI, que je vous avais détaillé précédemment ici)

Si vous débutez avec Arduino ou les ESP32, il est possible que vous soyez un peu dérouté au début. Mais rassurez-vous, car une fois qu’on a bien compris comment chaque chose fonctionne, rien n’est plus simple !

Voilà ! Maintenant que nous en avons fini avec ce « pénible préambule » (nécessaire, toutefois !), passons à la partie fun, à savoir : le code arduino de cet Afficheur Météo WiFi ESP32 (seulement le fichier « .ino », pour ne pas que ça fasse trop long !).

// ===================================================================================================
//   ______               _                  _///_ _           _                   _
//  /   _  \             (_)                |  ___| |         | |                 (_)
//  |  [_|  |__  ___  ___ _  ___  _ __      | |__ | | ___  ___| |_ _ __ ___  _ __  _  ___  _   _  ___
//  |   ___/ _ \| __|| __| |/ _ \| '_ \_____|  __|| |/ _ \/  _|  _| '__/   \| '_ \| |/   \| | | |/ _ \
//  |  |  | ( ) |__ ||__ | | ( ) | | | |____| |__ | |  __/| (_| |_| | | (_) | | | | | (_) | |_| |  __/
//  \__|   \__,_|___||___|_|\___/|_| [_|    \____/|_|\___|\____\__\_|  \___/|_| |_|_|\__  |\__,_|\___|
//                                                                                      | |
//                                                                                      \_|
// ===================================================================================================
//
//  Projet  :       Afficheur météo ESP32
//  Fichier :       programmeAfficheurMeteoESP32.ino
//  Auteur  :       Jérôme TOMSKI
//  Créé le :       20.01.2026
//  Site    :       https://passionelectronique.fr/
//  GitHub  :       https://github.com/PassionElectronique/
//  Licence :       https://creativecommons.org/licenses/by-nc-nd/4.0/deed.fr (BY-NC-ND 4.0 CC)
//
// ===================================================================================================
//
//  ---------
//  Remarques
//  ---------
//
//    1)  Penser à configurer le fichier "User_Setup.h" (situé dans le répertoire de la librairie TFT_eSPI),
//        avec le contenu du fichier joint ici (nommé "User_Setup.h.pour.information")
//
//    2)  Penser à installer les librairies "ArduinoJson" et "TFT_eSPI", si c'est pas déjà fait !
//
// ===================================================================================================
// Inclusion des librairies dont nous aurons besoin ici
#include <ArduinoJson.h>
#include <HTTPClient.h>
#include <TFT_eSPI.h>
#include <WiFi.h>
// Inclusion des images de fond météo
#include "1-fond-ensoleille.h"
#include "2-fond-nuageux.h"
#include "3-fond-couvert.h"
#include "4-fond-brouillard.h"
#include "5-fond-pluvieux.h"
#include "6-fond-neigeux.h"
#include "7-fond-orageux.h"
// Paramètres de cette application
#define LATITUDE_A_ANALYSER "44.823462" // Exemple pris ici : "Gare de Bordeaux Saint Jean"
#define LONGITUDE_A_ANALYSER "-0.556514"
#define TIMEZONE_CIBLEE "Europe/Paris"             // Nota : c'est juste pour que l'API retourne l'heure locale ciblée, et non l'heure GMT simple
#define WIFI_SSID "METTRE_LE_SSID_DE_SON_WIFI_ICI" // Par exemple : "livebox-xxxx"
#define WIFI_PASS "METTRE_LA_CLEF_DE_SON_WIFI_ICI" // Nota : sans espace aucun !
#define DELAI_RAFRAICHISSEMENT_INFOS_METEO_EN_MS 600'000
// Nota : 600'000 secondes = 10 minutes (donc un rafraîchissement toutes les 10 minutes ; du moins, dans les limites de ce que propose cette API météo gratuite !
// Constantes (autres)
#define TEMPS_ENSOLEILLE 1
#define TEMPS_NUAGEUX 2
#define TEMPS_COUVERT 3
#define TEMPS_BROUILLARD 4
#define TEMPS_PLUVIEUX 5
#define TEMPS_NEIGEUX 6
#define TEMPS_ORAGEUX 7
#define TEMPS_INCONNU 8
// Création d'une instance de TFT_eSPI
TFT_eSPI tft;
// Variables
uint16_t couleur_texte_temperature_sur_16bits;
uint16_t couleur_texte_temps_actuel_sur_16bits;
uint16_t couleur_ligne_separatrice_sur_16bits;
uint16_t couleur_texte_du_bas_sur_16bits;
uint8_t temps_actuel;
String ligne_1_decrivant_le_temps_actuel;
String ligne_2_decrivant_le_temps_actuel;
String endpoint_API_meteo;
// ========================
// Initialisation programme
// ========================
void setup() {
  delay(3000);
  // ------------------------
  // Initialisation écran TFT
  // ------------------------
  tft.init();
  tft.setSwapBytes(true);    // Permet de corriger le "bug" de décalage de couleurs
  tft.setRotation(3);        // Orientation (3 = "paysage, inversé")
  tft.fillScreen(TFT_BLACK); // Fond (ici, remplissage "en noir")
  // --------------
  // Connexion WiFi
  // --------------
  WiFi.begin(WIFI_SSID, WIFI_PASS);
  afficher_message_erreur_sur_ecran_TFT("Recherche WiFi");
  while (WiFi.status() != WL_CONNECTED) {
    tft.print(".");
    delay(1500);
  }
  // -----------------------------------------------------
  // Construction de l'URL cible (endpoint de l'API météo)
  // -----------------------------------------------------
  endpoint_API_meteo = "https://api.open-meteo.com/v1/forecast?latitude=" + String(LATITUDE_A_ANALYSER) + "&longitude=" + String(LONGITUDE_A_ANALYSER) +
                       "&timezone=" + TIMEZONE_CIBLEE + "¤t_weather=true";
}
// =================
// Boucle principale
// =================
void loop() {
  // Vérifie si une connexion WiFi est disponible
  if (WiFi.status() == WL_CONNECTED) {
    HTTPClient http;
    http.begin(endpoint_API_meteo); // Initialisation d'une connexion HTTP, avec l'endpoint choisi (entrée de l'API météo)
    int httpCode = http.GET();      // Exécute une requête HTTP GET, et récupère le code réponse
    // Vérification du code réponse HTTP reçu (404: page introuvable, 200: OK, etc)
    if (httpCode == HTTP_CODE_OK) {
      // Récupération du contenu de la réponse texte
      String contenu_reponse_HTTP = http.getString(); // Charge le contenu de la réponse HTTP, au format "String"
      DynamicJsonDocument jsonDocument(2048);         // Crée un "document JSON", qui recevra ensuite ce contenu String, au format JSON
      // Désérialise le String récupéré en HTTP/GET, pour le mettre dans ce document JSON
      DeserializationError erreur_json = deserializeJson(jsonDocument, contenu_reponse_HTTP);
      // Traitement du JSON ainsi récupéré
      if (!erreur_json) {
        // Accès aux champs qui nous intéressent
        String meteo_time = jsonDocument["current_weather"]["time"];        // Exemple de format : "2026-02-10T09:30"
        float temperature = jsonDocument["current_weather"]["temperature"]; // Exemple de format : 13.4
        float windspeed = jsonDocument["current_weather"]["windspeed"];     // Exemple de format : 10.5
        int weatherCode = jsonDocument["current_weather"]["weathercode"];   // Exemple de format : 61
        // Extraction des heures et minutes
        int tIndex = meteo_time.indexOf('T');
        String heures_et_minutes = meteo_time.substring(tIndex + 1, tIndex + 6); // Par exemple "09:30", basé sur l'exemple de datetime ci-dessus
        // Extraction du "code météo" (le code indiquant le temps qu'il fait actuellement, donc)
        if (weatherCode == 0) {
          temps_actuel = TEMPS_ENSOLEILLE;
          ligne_1_decrivant_le_temps_actuel = "Temps";
          ligne_2_decrivant_le_temps_actuel = "ensoleille !";
        } else if (weatherCode >= 1 && weatherCode <= 2) {
          temps_actuel = TEMPS_NUAGEUX;
          ligne_1_decrivant_le_temps_actuel = "Temps";
          ligne_2_decrivant_le_temps_actuel = "nuageux !";
        } else if (weatherCode == 3) {
          temps_actuel = TEMPS_COUVERT;
          ligne_1_decrivant_le_temps_actuel = "Temps";
          ligne_2_decrivant_le_temps_actuel = "couvert...";
        } else if (weatherCode == 45 || weatherCode == 48) {
          temps_actuel = TEMPS_BROUILLARD;
          ligne_1_decrivant_le_temps_actuel = "Attention";
          ligne_2_decrivant_le_temps_actuel = "brouillard !";
        } else if (weatherCode >= 51 && weatherCode <= 67) {
          temps_actuel = TEMPS_PLUVIEUX;
          ligne_1_decrivant_le_temps_actuel = "Temps";
          ligne_2_decrivant_le_temps_actuel = "pluvieux...";
        } else if (weatherCode >= 71 && weatherCode <= 77) {
          temps_actuel = TEMPS_NEIGEUX;
          ligne_1_decrivant_le_temps_actuel = "Attention :";
          ligne_2_decrivant_le_temps_actuel = "neige !!!";
        } else if (weatherCode >= 80 && weatherCode <= 82) {
          temps_actuel = TEMPS_PLUVIEUX;
          ligne_1_decrivant_le_temps_actuel = "Averses";
          ligne_2_decrivant_le_temps_actuel = "pluvieuses";
        } else if (weatherCode >= 85 && weatherCode <= 86) {
          temps_actuel = TEMPS_NEIGEUX;
          ligne_1_decrivant_le_temps_actuel = "Averses";
          ligne_2_decrivant_le_temps_actuel = "neigeuses";
        } else if (weatherCode >= 95 && weatherCode <= 99) {
          temps_actuel = TEMPS_ORAGEUX;
          ligne_1_decrivant_le_temps_actuel = "Attention";
          ligne_2_decrivant_le_temps_actuel = "ORAGE !";
        } else {
          temps_actuel = TEMPS_INCONNU;
          ligne_1_decrivant_le_temps_actuel = "TEMPS ?";
          ligne_2_decrivant_le_temps_actuel = "INCONNU";
        }
        // Affichages sur l'écran TFT
        afficher_image_de_fond_meteo_et_definir_jeu_de_couleurs();
        afficher_valeur_temperature(temperature);
        afficher_descriptif_temps_actuel();
        afficher_vitesse_vent_et_heure_de_maj(windspeed, heures_et_minutes);
        // Rebouclage (mise à jour toutes les XXX millisecondes ; par défaut 600'000 ms, soit 600 secondes, donc toutes les 10 minutes)
        delay(DELAI_RAFRAICHISSEMENT_INFOS_METEO_EN_MS);
      } else {
        // Erreur lors de désérialisation du code JSON, à partir de la réponse texte (String HTTP/GET)
        afficher_message_erreur_sur_ecran_TFT("Erreur recuperation JSON");
        delay(10000); // On relance 10 secondes après, en cas d'erreur
      }
    } else {
      // Erreur HTTP (si code retourné différent de '200')
      afficher_message_erreur_sur_ecran_TFT("Erreur HTTP: " + String(httpCode));
      delay(10000); // On relance 10 secondes après, en cas d'erreur
    }
    // Termine la connexion HTTP
    http.end();
  } else {
    // ERREUR : WiFi non trouvé ?!
    afficher_message_erreur_sur_ecran_TFT("WiFi absent ?!");
    delay(600000); // On relance 600 secondes après, soit 10 minutes après, en cas d'erreur
  }
}
// ==================================================================
// Fonction : afficher_image_de_fond_meteo_et_definir_jeu_de_couleurs
// ==================================================================
void afficher_image_de_fond_meteo_et_definir_jeu_de_couleurs() {
  if (temps_actuel == TEMPS_ENSOLEILLE) {
    tft.pushImage(0, 0, 320, 240, fond_ensoleille);                    // posX, posY, largeur, hauteur, lien_image
    couleur_texte_temperature_sur_16bits = tft.color24to16(0xF0E020);  // Couleur de la température à afficher
    couleur_texte_temps_actuel_sur_16bits = tft.color24to16(0xF0E050); // Couleur du texte descriptif sous la température actuelle
    couleur_ligne_separatrice_sur_16bits = tft.color24to16(0xB0B0C0);  // Couleur de la ligne séparatrice horizontale
    couleur_texte_du_bas_sur_16bits = tft.color24to16(0xA0A0B0);       // Couleur du texte affiché en bas (vitesse du vent, et heure de mise à jour)
  }
  if (temps_actuel == TEMPS_NUAGEUX) {
    tft.pushImage(0, 0, 320, 240, fond_nuageux);
    couleur_texte_temperature_sur_16bits = tft.color24to16(0xF0E0A0);
    couleur_texte_temps_actuel_sur_16bits = tft.color24to16(0xF0E0C0);
    couleur_ligne_separatrice_sur_16bits = tft.color24to16(0xA0A0B0);
    couleur_texte_du_bas_sur_16bits = tft.color24to16(0xA0A0B0);
  }
  if (temps_actuel == TEMPS_COUVERT) {
    tft.pushImage(0, 0, 320, 240, fond_couvert);
    couleur_texte_temperature_sur_16bits = tft.color24to16(0x6040A0);
    couleur_texte_temps_actuel_sur_16bits = tft.color24to16(0x9040A0);
    couleur_ligne_separatrice_sur_16bits = tft.color24to16(0x9040A0);
    couleur_texte_du_bas_sur_16bits = tft.color24to16(0x9040A0);
  }
  if (temps_actuel == TEMPS_BROUILLARD) {
    tft.pushImage(0, 0, 320, 240, fond_brouillard);
    couleur_texte_temperature_sur_16bits = tft.color24to16(0x808080);
    couleur_texte_temps_actuel_sur_16bits = tft.color24to16(0x909090);
    couleur_ligne_separatrice_sur_16bits = tft.color24to16(0x909090);
    couleur_texte_du_bas_sur_16bits = tft.color24to16(0x909090);
  }
  if (temps_actuel == TEMPS_PLUVIEUX) {
    tft.pushImage(0, 0, 320, 240, fond_pluvieux);
    couleur_texte_temperature_sur_16bits = tft.color24to16(0x304060);
    couleur_texte_temps_actuel_sur_16bits = tft.color24to16(0x304060);
    couleur_ligne_separatrice_sur_16bits = tft.color24to16(0x203050);
    couleur_texte_du_bas_sur_16bits = tft.color24to16(0x152545);
  }
  if (temps_actuel == TEMPS_NEIGEUX) {
    tft.pushImage(0, 0, 320, 240, fond_neigeux);
    couleur_texte_temperature_sur_16bits = tft.color24to16(0xFFFFFF);
    couleur_texte_temps_actuel_sur_16bits = tft.color24to16(0xFFFFFF);
    couleur_ligne_separatrice_sur_16bits = tft.color24to16(0xD0D0D0);
    couleur_texte_du_bas_sur_16bits = tft.color24to16(0xD0D0D0);
  }
  if (temps_actuel == TEMPS_ORAGEUX) {
    tft.pushImage(0, 0, 320, 240, fond_orageux);
    couleur_texte_temperature_sur_16bits = tft.color24to16(0xFF4000);
    couleur_texte_temps_actuel_sur_16bits = tft.color24to16(0xFF3000);
    couleur_ligne_separatrice_sur_16bits = tft.color24to16(0x808090);
    couleur_texte_du_bas_sur_16bits = tft.color24to16(0x808090);
  }
}
// ======================================
// Fonction : afficher_valeur_temperature
// ======================================
void afficher_valeur_temperature(float temperature) {
  // Formatage/affichage du texte
  tft.setTextColor(couleur_texte_temperature_sur_16bits); // Couleur du texte (codée sur 16 bits, pour être au format RGB565)
  tft.setCursor(170, 50);                                 // posX, posY du texte
  tft.setTextSize(5);        // Taille du texte
  tft.print(temperature, 1); // Texte à afficher (la valeur 'float' passée en argument de cette fonction, avec seulement 1 chiffre après la virgule)
  tft.setTextSize(3); // Taille du texte
  tft.print("÷");     // Symbole "degré" (nota : les caractères ne correspondent pas ici, donc il faut s'adapter !)
}
// ===========================================
// Fonction : afficher_descriptif_temps_actuel
// ===========================================
void afficher_descriptif_temps_actuel() {
  // Formatage/affichage du texte
  tft.setTextColor(couleur_texte_temps_actuel_sur_16bits);     // Couleur du texte (codée sur 16 bits, pour être au format RGB565)
  tft.setTextSize(2);                                          // Taille du texte
  tft.drawString(ligne_1_decrivant_le_temps_actuel, 170, 110); // Texte à afficher + posX + posY
  tft.drawString(ligne_2_decrivant_le_temps_actuel, 170, 135); // Idem
}
// ================================================
// Fonction : afficher_vitesse_vent_et_heure_de_maj
// ================================================
void afficher_vitesse_vent_et_heure_de_maj(float vitesse_du_vent, String heure_de_maj) {
  // Traçage d'une ligne horizontale, en dessous de l'image et de la valeur+description température
  tft.drawLine(5, 205, 310, 205, couleur_ligne_separatrice_sur_16bits);
  // Formatage/affichage du texte
  tft.setTextSize(2);                                // Taille du texte
  tft.setTextColor(couleur_texte_du_bas_sur_16bits); // Couleur texte
  tft.setCursor(10, 215);                            // posX, posY du texte
  tft.print("Vent:");                                // Texte à afficher
  tft.print(vitesse_du_vent, 0);                     // Le '0' indique qu'on ne souhaite pas afficher le moindre chiffre après la virgule, dans ce cas
  tft.print(" km/h - MAJ:");
  tft.print(heure_de_maj);
}
// ================================================
// Fonction : afficher_message_erreur_sur_ecran_TFT
// ================================================
void afficher_message_erreur_sur_ecran_TFT(String message_a_afficher) {
  // Affichage d'un message d'erreur en rouge, en bas de l'écran TFT
  tft.fillScreen(TFT_BLACK);
  tft.setTextSize(2);
  tft.setCursor(10, 215);
  tft.setTextColor(tft.color24to16(0xFF0000));
  tft.print(message_a_afficher);
}

Important : au début du code, vous verrez tout un tas de paramètres qu’il faudra adapter à vous, à savoir :
– les coordonnées GPS du point météo que vous souhaitez afficher (en précisant sa latitude et sa longitude dans les variables respectives «  LATITUDE_A_ANALYSER » et «  LONGITUDE_A_ANALYSER ») ; ici, il faudra également préciser le fuseau horaire ciblé, dans la variable « TIMEZONE_CIBLEE »
– les codes WiFi de votre box internet, pour que l’ESP32 puisse se connecter dessus pour accéder à internet ; pour ce faire, il faudra renseigner les variables « WIFI_SSID » et « WIFI_PASS », respectivement avec l’identifiant et le mot de passe de votre wifi

Au niveau de ce programme arduino, on retrouve les classiques initialisations dans la fonction « setup », et le code en lui-même de ce projet météo dans la fonction « loop ». Concernant le fonctionnement de ce programme, on pourrait le résumer ainsi :

• récupération des infos météo via internet, via l’API du site open-meteo.com
• extraction des valeurs qui nous intéressent ici (horodatage, température, vitesse du vent, et code décrivant le temps actuel)
• affichage d’une image de fond correspondant à la météo actuelle (soleil, pluie, neige, orage, …), ce qui permet au passage d’effacer tout ce qui était précédemment affiché à l’écran
• écriture des valeurs météo actuelles (température, vitesse du vent, et dernière heure de mise à jour des données, communiquées par le serveur météo)
• et répétition de tout cela, toutes les X minutes (10 min, par défaut)

À cela s’ajoute une gestion d’erreurs possibles, avec affichage en rouge sur l’écran. Et du reste, je vous ai mis un maximum de commentaires dans le code, pour que ce soit le plus facile à comprendre ! Vous verrez, le programme n’est pas si long que ça, et facilement compréhensible si on le lit bloc par bloc 🙂

Programmation de l’ESP32-S3-WROOM-1-N16R8 via convertisseur USB/UART

Au niveau matériel, vous aurez besoin d’un adaptateur USB/UART pour programmer cet ESP32. Pour ma part, j’utilise simplement le convertisseur USB UART avec autoreset/autoboot que j’ai précédemment réalisé, car celui-ci peut directement se brancher sur la carte de cet afficheur météo WiFi ESP32, comme vous pouvez le constater ci-dessous :

Au niveau logiciel, comme évoqué juste avant, le code ESP32 est prévu pour être téléversé via Arduino IDE, afin que ça reste simple, et accessible à tous. Pour ce faire, il faudra aller dans le menu « Outils » de l’IDE Arduino, et renseigner les bonnes infos (type de carte = « ESP32S3 Dev Module », etc). Comme il y a beaucoup de paramètres, je vous ai simplement fait une copie écran d’Arduino IDE, plutôt que ce soit plus rapide à tout lister !

Bien entendu, de votre côté, concernant le « port » de programmation du menu « Outils », il faudra mettre celui qui correspondra à votre ESP32, une fois branché sur votre ordi (dans mon cas, c’était le port « /dev/ttyUSB0 » car j’étais sous Linux, mais ça pourrait être tout à fait autre chose de votre côté).

Par ailleurs, pour rappel, il faudra modifier le fichier « User_Setup.h » dans le répertoire de votre librairie TFT_eSPI, avec le contenu du fichier « User_Setup.h.pour.information » que je vous ai fourni sous GitHub. Pour la bonne forme, je vous le remets ici, pour info :

// Contrôleur de l'écran TFT : ici, l'ILI9341
#define ILI9341_DRIVER

// Branchement SPI --> FSPI/VSPI = SPI2 (MOSI: 11, SCK: 12, et MISO: 13)
#define USE_FSPI_PORT
#define TFT_DC    8
#define TFT_RST   9
#define TFT_CS   10
#define TFT_MOSI 11
#define TFT_SCLK 12
#define TFT_MISO 13

// Intégration des fonts souhaitées, et autre
#define LOAD_GLCD
#define LOAD_FONT2
#define LOAD_FONT4
#define LOAD_FONT6
#define LOAD_FONT7
#define LOAD_FONT8
#define LOAD_GFXFF
#define SMOOTH_FONT

// Définition des vitesses de transmission
#define SPI_FREQUENCY  20000000		// Maximum pour l'ILI9341 (40MHz max)

// Ajout, pour corriger problème d'affichage RGB (rouge/vert/bleu) des images
#define TFT_RGB_ORDER TFT_BGR		// S'utilise de paire avec "tft.setSwapBytes(true);", dans le code/programme

Du reste, une fois le code arduino uploadé (téléversé) dans l’ESP32, le programme démarre immédiatement (tentative de connexion WiFi puis affichage des infos météo sur l’écran TFT, ou message d’erreur, le cas échéant).

Test Affichage Météo WiFi (+ améliorations possibles)

Concernant les tests, ils sont forcément très simples et rapides à faire ici ! Car on branche, la connexion WiFi s’établit, et les infos météos s’affichent (ou un message d’erreur, en cas de soucis). Avec, en parallèle, la surveillance de tout échauffement anormal à la caméra thermique, pour prévenir tout soucis (et au préalable, la vérification des tensions sur le PCB au multimètre).

En images, voici ce que ça donne sur l’écran TFT, si tout se passe bien (désolé pour les photos un peu sombre, mais le temps était fortement couvert… comme en témoigne la météo !) :

Au niveau des améliorations possibles de cet Afficheur Météo WiFi ESP32, on pourrait par exemple :

• utiliser des polices de caractères plus sympathiques (notamment au niveau de l’affichage de la température), et mieux adaptées aux différents espaces disponibles sur l’écran
• utiliser une police de caractères qui prendrait en charge les accents, car ça manque ici ! En effet, lorsque le temps est « ensoleillé », j’ai simplement pu écrire « temps ensoleille » (sans l’accent aigu sur le « e », donc) ; car de base, les accents ne sont pas pris en charge dans la police de caractère de la librairie TFT_eSPI. Perso, j’avoue ne pas avoir creusé cette partie là encore, pour l’instant ! Mais il va falloir le faire, tôt ou tard 😉
• utiliser une API météo plus complète (pour avoir le taux d’humidité, par exemple, ou des données qui ne soient pas mises à jour seulement tous les quart d’heure côté serveur, etc) ; mais attention, car les API météo ne sont pas toutes gratuites, bien évidemment, et certaines nécessitent des clefs API pour se connecter à elle (sans parler du fait que leur accès pourrait être limité, suivant l’abonnement qu’on prendrait !). Là, comme il s’agit d’un projet éducatif, j’ai fait au plus simple, avec ce qui était disponible gratuitement !

Ce qu’il était important d’apprendre ici 😉

Trois choses étaient intéressantes à voir dans ce projet, selon moi :

• d’un point de vue électrique : comment gérer plusieurs alims simultanément (multiplexage) ?
• d’un point de vue design : comment laisser libre champ à « l’antenne ESP32 », tout en la protégeant ?
• d’un point de vue logiciel : comment interroger une API sur internet, et exploiter les données en retour ?

Comme vous l’aurez compris, c’est plus pour ces raisons que je vous partage de genre de projet, qu’autres choses !

Comment gérer plusieurs alims simultanément (multiplexage) ?

Électriquement parlant, ce projet ESP32 pourra être alimenté de 2 manières :

• via le « programmateur ESP32 »
• et/ou via une prise USB-C « classique »

Le problème est qu’il faut empêcher tout retour de courant, si jamais on branche ces 2 sources de tension en même temps !

Ici, le plus simple aurait été de mettre en oeuvre une diode anti-retour (Schottky par exemple), pour protéger chaque alimentation branchée sur notre PCB. Mais en procédant ainsi, on aurait induit une chute de tension, plus ou moins variable en fonction du courant, aux bornes de ces diodes. Ainsi, on ne pourrait pas « garantir » que ces alimentations 3,3 volts fourniraient effectivement du 3.3V, au final ! Et ce, sans parler de la perte de puissance engendrées au passage, dissipée sous forme de chaleur perdue.

Donc j’ai préféré éviter l’utilisation de diodes anti-retour ici, et utiliser quelque chose de mieux, à savoir : un « multiplexeur d’alimentation ». Concrètement parlant, j’ai simplement utilisé un circuit intégré spécialisé, permettant de sélectionner l’une ou l’autre de ces 2 sources de tension, pour alimenter la carte ESP32. Ainsi, aucun risque d’avoir des « mauvais retours de courant », car tout se gérera automatiquement, sans qu’on ait quoi que ce soit à faire. Qui plus est, ce sera bien plus efficace que de simples diodes schottky, car cette sélection/commutation se fera en interne via des transistors mosfets (avec une faible chute de tension à leurs bornes, et donc, par conséquence, une faible puissance dissipée/perdue).

Ici, j’ai mis en oeuvre le circuit intégré TPS2115A de chez Texas Instrument, pour réaliser cette sélection automatique d’alimentation, afin de pouvoir alimenter ce projet en toute sécurité. Sur le schéma électronique détaillé, vous avez pu voir que :

• les entrées IN1 et IN2 étaient respectivement reliées au +3,3V provenant de l’USB et au +3,3V provenant du programmateur ESP32
• les entrées D1 et D0, toutes deux équipées de résistances pull-up en interne, permettaient de sélectionner le « mode de fonctionnement ». Et comme, au niveau du schéma électrique, D1 était relié à la masse (D1=0 donc) et D0 était non connectée (D0=1, du fait de la pull-up interne), alors :
  • la sortie OUT du multiplexeur sera égal au +3,3V de l’USB si « tension USB » > « tension programmateur ESP32 »
  • la sortie OUT du multiplexeur sera égal au +3,3V du programmateur si « tension USB » < « tension programmateur ESP32 »
  • au final, le multiplexeur choisira l’une ou l’autre de ces sources d’alimentation (issue de l’USB ou du programmateur d’ESP32), avec priorité sur celle dont la tension sera la plus élevée
• la broche ILIM a été reliée à une résistance de sélection de courant. Ainsi, le courant de sortie (Iout) est limité à 500/R_ILIM ampères. Dans notre cas, où on utilisait une résistance de 1000 ohms (1K), le courant Iout était limité à 500 / 1000, soit 0,5 A (500 mA, si vous préférez). Bien sûr, on aurait pu ajuster cela plus finement, en fonction de la conso réelle de tout ce montage !

Comment laisser libre champ à « l’antenne ESP32 », tout en la protégeant ?

Dans ce projet, on a en fait fixé un PCB sur l’autre (le PCB de dessous était notre circuit imprimé, et le PCB de dessus était l’écran TFT en lui-même). Ainsi, on a pu avoir quelque chose de compact. En image, voici comment ces 2 éléments s’emboîtent, l’un sur l’autre :

Cela étant dit, il fallait faire attention à une chose bien précise : ne pas empêcher l’antenne de l’ESP32 de pouvoir transmettre des ondes radios. Car bien évidemment, ce projet d’Afficheur Météo WiFi… utilise le WiFi (au travers de l’antenne intégrée à l’ESP32). Il fallait donc éviter de masquer cette antenne radio, et donc surtout pas lui mettre un plan de masse et une carcasse métallique de support de carte SD (ce qui constitue le dessous de l’écran TFT utilisé) à moins de 2 centimètres au dessus !

Ici, plusieurs solutions s’offraient à nous. Parmi elles, deux options primaient :

• soit utiliser un ESP32-S3-WROOM-1U, disposant donc d’une antenne radio externe, « volante », qu’on pouvait déporter (mais ce qui aurait rendu l’ensemble « moins maniable », comparé à une antenne fixe/intégrée)
• soit faire ressortir légèrement l’ESP32 du PCB, de telle manière que son antenne WiFi ne soit pas recouverte par l’écran TFT

Et c’est cette 2ème solution que j’ai appliqué ici. Avec une excroissance du PCB sous cette antenne « débordante », pour ne pas risquer de la casser par mégarde !

Remarque : peu importe la forme du PCB, au final, du moment où on respecte la « keep-out zone » de l’ESP32 (pas de piste à cet endroit, ni plan de masse, ni le moindre élément rapproché, pouvant altérer la communication radio).

Comment interroger une API sur internet, et exploiter les données en retour, via un ESP32 ?

D’un point de vue logiciel, l’interrogation d’une API sur le web repose sur une requête HTTP envoyée par le programme ESP32. Plus précisément, voici les étapes permettant d’arriver à faire cela :

• la connexion au Wi-Fi
  • le programme utilisera la bibliothèque « WiFi.h » pour se connecter au réseau, à partir du « SSID » (identifiant) et mot de passe WiFi qu’on aura fourni dans le code
  • ensuite, l’ESP32 attendra que la connexion soit établie avant de continuer
• la création d’une requête HTTP
  • une fois connecté, l’ESP32 fera appel à la librairie « HTTPClient.h » pour envoyer une requête HTTP de type GET, à destination de l’adresse internet de l’API météo (qu’on appelle un « endpoint »)
  • on adjoindra à cette adresse web (URL/endpoint) les coordonnées GPS du lieu pour lequel on souhaite des infos météo (via la latitude et longitude), accompagnées de certains paramètres secondaires, comme visible dans le code arduino (timezone, etc)
• la réception de la réponse
  • si la requête réussit (code 200), alors le serveur (API météo) renverra les infos météo au format JSON
  • cette réponse JSON sera ensuite transformée (« parsée ») pour pouvoir récupérer les infos qui nous intéresse (à l’aide de la bibliothèque « ArduinoJson »)
  • le programme ESP32 extraira les champs utiles pour nous (température, vitesse du vent, temps actuel), et les stockera dans des variables adaptées (float, int, String)

En résumé, l’ESP32 :

• ouvrira une connexion réseau
• enverra une requête HTTP/GET personnalisée
• recevra une réponse texte structurée (JSON)
• extraira les données qui nous intéresse
• et affichera enfin les données récupérées, ou le message d’erreur éventuel, sur l’écran TFT

Tout simplement 😉

Liens et téléchargements

Pour ceux que ça intéresse, vous trouverez ici :

• le schéma électronique Afficheur Météo WiFi ESP32 (fichier PDF)
• le code arduino Afficheur Météo ESP32 WiFi (lien GitHub)
• le lien vers le PCB de cet Afficheur Météo (lien PCBWay^(*), fabricant de circuits imprimés pas trop cher !)

(*) POUR FAIRE FABRIQUER LE PCB DE CE PROJET :
→ Cliquer sur le lien juste ci-dessus (pour ouvrir le projet partagé sur PCBWay)
→ Cliquer sur « Add to cart » (pour l’ajouter à votre panier)
→ Attendre quelques minutes (24/48h maximum) pour que les fichiers de ce projet soient vérifiés (surveiller l’état d’avancement des éléments dans le panier ; ils resteront grisés tant que ça n’a pas été validé, et colorés une fois fait)
→ Finaliser la commande de circuit imprimé (en ajoutant un stencil, au besoin !)

Et pour finir, vous trouverez également en lien ici le datasheet du multiplexeur d’alim TPS2115A, pour ceux qui aiment bien entrer dans les détails !

Afficheur météo ESP32 WiFi : conclusion !

Voilà ! Vous êtes arrivés au terme de ce projet d’afficheur météo ESP32 WiFi, et j’espère qu’il vous aura plu ! J’espère également qu’il vous aura permis d’apprendre de nouvelles choses, en dehors de la météo, bien évidemment 😉

Sur ce, il ne me reste plus qu’à vous dire à bientôt, pour bien d’autres projets encore !

À très bientôt,
Jérôme.

À découvrir aussi : une carte de test et développement ESP32-S3-WROOM-1

JEROME

Passionné par tout ce qui touche à l'électronique, sans toutefois en être expert, j'ai à coeur de vous partager ici, peu à peu, tout ce que j'ai appris, découvert, réalisé, et testé jusqu'à présent ! En espérant que tout cela puisse vous servir, ainsi qu'au plus grand nombre !

(*) Mis à jour le 09/03/2026