ESP32 : température sur l’affichage à 7 segments TM1637 (WeatherAPI)

Dans ce projet, nous afficherons la température actuelle de votre ville (ou de toute ville de votre choix) sur l’écran à 7 segments TM1637. Pour obtenir la température, nous ferons des requêtes HTTP avec l’ESP32 vers la WeatherAPI (aucun capteur nécessaire).

C’est un excellent projet pour mettre en pratique comment effectuer des requêtes HTTP avec l’ESP32 et utiliser l’affichage à 7 segments TM1637. Pour des didacticiels approfondis sur ces sujets, consultez les articles suivants :

Conditions préalables

Avant de continuer, assurez-vous que l’IDE Arduino et les cartes ESP32 sont installés. Suivez le tutoriel suivant si ce n’est pas déjà fait :

Aperçu du projet

Dans ce projet, nous afficherons la température actuelle de votre ville sur l’écran TM1637 à 4 chiffres et 7 segments. Nous obtiendrons la température de l’API Météo.

Voici un bref aperçu des étapes que nous devons suivre pour créer ce projet :

1. Initialisez l’écran et réglez sa luminosité ;
2. Initialisez le Wi-Fi et connectez l’ESP32 à votre réseau local afin qu’il puisse obtenir des données d’Internet.
3. Faites une demande à WeatherAPI pour obtenir la température de l’emplacement choisi.
4. Afficher la température sur l’écran (alterner entre la température en degrés Celsius et en degrés Fahrenheit).
5. Toutes les heures, faites une nouvelle requête à WeatherAPI pour obtenir des données plus récentes.

Affichage 7 segments LED à 4 chiffres TM1637

L’affichage LED à 4 chiffres et 7 segments TM1637 est un module d’affichage qui combine quatre chiffres à 7 segments dans un seul affichage qui peut être contrôlé via le pilote TM1637. Le module particulier que nous utilisons ici comporte quatre chiffres séparés par deux points entre le deuxième et le troisième chiffre. Cette disposition est idéale pour créer une horloge numérique, avec l’heure d’un côté des deux points et les minutes de l’autre.

API Météo

Dans ce projet, nous afficherons la température actuelle de votre ville sur l’écran. Nous obtiendrons la température de l’API Météo.

Cette API est gratuite et fournit des informations utiles sur la météo dans presque tous les endroits du monde.

Nous obtiendrons la température de votre emplacement et l’afficherons sur le module d’affichage à 7 segments.

Obtenir votre clé API

1. Accédez au site Web de l’API Météo : Weatherapi.com/
2. Inscrivez-vous pour créer un compte.
3. Après avoir vérifié votre compte, connectez-vous à votre compte.
4. Sur votre tableau de bord sur Weatherapi.com/my/ , vous trouverez votre clé API (même si elle indique que l’essai prendra fin, vous pouvez continuer à utiliser votre clé API librement).

Copiez la clé API dans un endroit sûr car vous en aurez besoin plus tard.

Pour obtenir des informations sur la météo dans l’emplacement choisi, saisissez l’URL suivante dans votre navigateur Web, mais insérez votre emplacement et votre clé API aux bons endroits :

https://api.weatherapi.com/v1/current.json?q=YOUR_LOCATION+&key=YOUR_API_KEY'

Par exemple, dans mon cas :

https://api.weatherapi.com/v1/current.json?q=Oporto+&key=d1578a064b07453c917164350240106'

Copiez votre URL et collez-la dans votre navigateur, et l’API renverra les informations correspondant à votre météo locale. Par exemple:

{
"location": {
"name": "Oporto",
"region": "Porto",
"country": "Portugal",
"lat": 41.15,
"lon": -8.62,
"tz_id": "Europe/Lisbon",
"localtime_epoch": 1719843562,
"localtime": "2024-07-01 15:19"
},
"current": {
"last_updated_epoch": 1719843300,
"last_updated": "2024-07-01 15:15",
"temp_c": 22.3,
"temp_f": 72.1,
"is_day": 1,
"condition": {
"text": "Sunny",
"icon": "//cdn.weatherapi.com/weather/64x64/day/113.png",
"code": 1000
},
"wind_mph": 10.5,
"wind_kph": 16.9,
"wind_degree": 310,
"wind_dir": "NW",
"pressure_mb": 1021,
"pressure_in": 30.15,
"precip_mm": 0,
"precip_in": 0,
"humidity": 69,
"cloud": 0,
"feelslike_c": 24.7,
"feelslike_f": 76.4,
"windchill_c": 21.9,
"windchill_f": 71.5,
"heatindex_c": 24.6,
"heatindex_f": 76.2,
"dewpoint_c": 15,
"dewpoint_f": 58.9,
"vis_km": 10,
"vis_miles": 6,
"uv": 6,
"gust_mph": 15.4,
"gust_kph": 24.7
}
}

À partir de ce JSON, nous pouvons facilement obtenir la température de votre emplacement, soit en Celsius, soit en Fahrenheit : temp_c et temp_f.

Pièces requises

Pour ce projet, vous avez besoin des pièces suivantes :

Vous pouvez utiliser les liens précédents ou vous rendre directement sur MakerAdvisor.com/tools pour trouver toutes les pièces pour vos projets au meilleur prix !

Câblage de l’afficheur 7 segments à 4 chiffres TM1637 à l’ESP32

Le câblage de l’écran à l’ESP32 est assez simple, car il ne nécessite que deux broches numériques : CLK et DI/O.

* vous pouvez utiliser n’importe quel autre GPIO approprié. Consultez le guide de brochage ESP32 :

Nous connecterons la broche CLK au GPIO 19 et la broche DIO au GPIO 18, mais vous pouvez utiliser une combinaison différente de broches.

Installation des bibliothèques

Pour ce projet, vous devez installer la bibliothèque TM1637 d’avishorp pour s’interfacer avec l’écran TM1637, et la bibliothèque ArduinoJSON de bblanchon pour gérer les données JSON renvoyées par l’API.

Installation de la bibliothèque TM1637

Il existe plusieurs bibliothèques pour interfacer l’écran TM1637 avec l’ESP32. Nous utiliserons la bibliothèque TM1637.h d’avishorp (même si elle n’a pas été mise à jour depuis plusieurs années, elle fonctionne toujours bien et est très simple à utiliser).

Vous pouvez installer la bibliothèque via le gestionnaire de bibliothèque Arduino IDE. Recherchez TM1637 et installez la bibliothèque par avishorp.

Installation des bibliothèques

Pour cet exemple, vous devez également installer la bibliothèque ArduinoJSON de bblanchon. Vous pouvez l’installer dans le gestionnaire de bibliothèque Arduino.

Code – ESP32 avec TM1637 : Affichage de la température

Vous pouvez télécharger le code suivant sur votre tableau. Vous devez:

• Insérez votre SSID et votre mot de passe ;
• Insérez votre clé API WeatherAPI ;
• Insérez la ville pour laquelle vous souhaitez obtenir la température.

/*
  Rui Santos & Sara Santos - Raspberryme.com
  Complete project details at https://Raspberryme.com/esp32-tm1637-4-digit-7-segment-display-arduino/
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/
#include 
#include 
#include 
#include 

// Wi-Fi credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

const char* api_key = "REPLACE_WITH_YOUR_WeatherAPI_API_Key";
const char* location = "Oporto";  // "q" Parameter documentation for location: https://www.weatherapi.com/docs/#intro-request

// Request URL
String url = "https://api.weatherapi.com/v1/current.json?q=" + String(location) + "&key=" + String(api_key);

// TM1637 pins
#define CLK 19
#define DIO 18

TM1637Display display(CLK, DIO);

// Create the °C Symbol
const uint8_t Celsius[] = {
  SEG_A | SEG_B | SEG_F | SEG_G,  // Circle
  SEG_A | SEG_D | SEG_E | SEG_F   // C
};

// Create the °F Symbol
const uint8_t Fahrenheit[] = {
  SEG_A | SEG_B | SEG_F | SEG_G,  // Circle
  SEG_F | SEG_E | SEG_A | SEG_G   // F
};

// Global variables for temperatures and timers
float currentTempC = 9999;  // Initial error value
float currentTempF = 9999;  // Initial error value
unsigned long lastFetchTime = 0;
const unsigned long fetchInterval = 3600000UL;  // 1 hour in milliseconds

// Init Wifi
void initWiFi() {
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }
  Serial.println("Connection successful");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
}

bool updateTemperatures() {
  HTTPClient http;
  http.begin(url);

  int httpCode = http.GET();

  if (httpCode == HTTP_CODE_OK) {  // Check for 200 specifically
    String payload = http.getString();
    Serial.print(payload);

    // Parse JSON
    StaticJsonDocument<1024> doc; // Adjust size if needed based on response
    DeserializationError error = deserializeJson(doc, payload);

    if (error) {
      Serial.print("JSON parsing failed: ");
      Serial.println(error.c_str());
      http.end();
      return false;
    }

    // Get both temperatures
    currentTempC = doc["current"]["temp_c"];
    currentTempF = doc["current"]["temp_f"];
    http.end();
    return true;
  } else {
    Serial.print("Error during request: ");
    Serial.println(httpCode);
    http.end();
    return false;
  }
}

void setup() {
  Serial.begin(115200);
  delay(1000); // Give time for Serial to initialize

  // Connect to Wi-Fi
  initWiFi();

  display.setBrightness(7);  // Set the display brightness (0-7)

  // Initial fetch
  if (updateTemperatures()) {
    lastFetchTime = millis();
  }
}

void loop() {
  // Check if it's time to fetch new data
  if (millis() - lastFetchTime >= fetchInterval) {
    if (updateTemperatures()) {
      lastFetchTime = millis();
    } else {
      // If failed, try again next loop 
      Serial.println("Fetch failed, keeping old values.");
    }
  }

  // Show Celsius
  Serial.print("Temperature in Celsius: ");
  Serial.println(currentTempC, 2);
  
  int roundedTempC = round(currentTempC);
  display.showNumberDec(roundedTempC, false, 2, 0);
  display.setSegments(Celsius, 2, 2);

  delay(5000);

  // Show Fahrenheit
  Serial.print("Temperature in Fahrenheit: ");
  Serial.println(currentTempF, 2);

  int roundedTempF = round(currentTempF);
  display.showNumberDec(roundedTempF, false, 2, 0);
  display.setSegments(Fahrenheit, 2, 2);

  delay(5000);
}

Afficher le code brut

Comment fonctionne le code ?

Jetons un coup d’œil rapide aux parties pertinentes du code pour ce didacticiel.

Y compris les bibliothèques

Nous commençons par inclure les bibliothèques requises.

#include 
#include 
#include 
#include 

Informations d’identification réseau

Insérez vos informations d’identification réseau dans les lignes suivantes.

// Replace with your network credentials
const char* ssid     = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

API Météo

Insérez votre clé WeatherAPI et l’emplacement pour lequel vous souhaitez obtenir des données.

const char* api_key = "REPLACE_WITH_YOUR_API_KEY";
const char* location = "REPLACE_WITH_YOUR_LOCATION";

Il s’agit de l’URL de requête qui renverra les données météorologiques.

String url = "https://api.weatherapi.com/v1/current.json?q=" + String(location) + "&key=" + String(api_key);

Affichage TM1637

Définissez les broches qui contrôlent l’affichage et initialisez une instance de l’affichage appelée display.

// TM1637 pins
#define CLK 19
#define DIO 18

TM1637Display display(CLK, DIO);

Créez un tableau avec les segments requis pour créer les symboles ºC et ºF.

// Create the °C Symbol
const uint8_t Celsius[] = {
  SEG_A | SEG_B | SEG_F | SEG_G,  // Circle
  SEG_A | SEG_D | SEG_E | SEG_F   // C
};

// Create the °F Symbol
const uint8_t Fahrenheit[] = {
  SEG_A | SEG_B | SEG_F | SEG_G,  // Circle
  SEG_F | SEG_E | SEG_A | SEG_G   // F
};

Les SEG_A, SEG_B, etc. sont des références à leurs octets spécifiques (ceux-ci sont définis dans le fichier .h de la bibliothèque). Pour en savoir plus sur la façon d’activer/désactiver des segments spécifiques, consultez ce didacticiel sur le TM1637.

Variables globales

Créez des variables globales pour stocker la température en Celsius et Fahrenheit.

float currentTempC = 9999;  // Initial error value
float currentTempF = 9999;  // Initial error value

Et des variables auxiliaires pour compter le temps nécessaire pour faire une requête à l’API toutes les heures.

unsigned long lastFetchTime = 0;
const unsigned long fetchInterval = 3600000UL;  // 1 hour in milliseconds

Initialiser le Wi-Fi

La fonction initWiFi() initialisera le Wi-Fi et se connectera à votre réseau à l’aide des informations d’identification insérées.

// Init Wifi
void initWiFi() {
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }
  Serial.println("Connection successful");
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
}

Obtenir/mettre à jour les températures

La fonction updateTemperatures() envoie une requête à l’URL de la requête WeatherAPI.

La requête renvoie un tas de données météorologiques comme nous l’avons vu précédemment. Nous imprimons toutes les données sur le moniteur série.

bool updateTemperatures() {
HTTPClient http;
http.begin(url);

int httpCode = http.GET();

if (httpCode == HTTP_CODE_OK) {  // Check for 200 specifically
  String payload = http.getString();
  Serial.print(payload);

Ensuite, nous sauvegardons uniquement les données qui nous intéressent. Dans ce cas, la température en Celsius et en Fahrenheit. Nous les enregistrons dans les variables currentTempC et currentTempF.

currentTempC = doc["current"]["temp_c"];
currentTempF = doc["current"]["temp_f"];

Si tout se passe bien avec la requête, la fonction renvoie vrai. Sinon, il renvoie faux.

installation()

Dans setup(), nous initialisons le moniteur série, nous connectons au Wi-Fi et définissons la luminosité de l’écran.

void setup() {
  Serial.begin(115200);
  delay(1000); // Give time for Serial to initialize

  // Connect to Wi-Fi
  initWiFi();

  display.setBrightness(7);  // Set the display brightness (0-7)

Ensuite, nous faisons notre première requête à l’API pour obtenir les températures actuelles lors de la première exécution du code. À partir de ce moment-là, nous commençons également à compter le temps pour vérifier plus tard dans la boucle() s’il est temps de faire une autre requête.

// Initial fetch
if (updateTemperatures()) {
  lastFetchTime = millis();
}

boucle()

Dans la boucle(), nous vérifions constamment quand il est temps d’obtenir de nouvelles valeurs.

// Check if it's time to fetch new data
if (millis() - lastFetchTime >= fetchInterval) {
  if (updateTemperatures()) {
    lastFetchTime = millis();
  } else {
    // If failed, try again next loop 
    Serial.println("Fetch failed, keeping old values.");
  }
}

Ensuite, sur l’écran, nous alternons entre l’affichage de la température en Celsius et en Fahrenheit toutes les cinq secondes.

// Show Celsius
Serial.print("Temperature in Celsius: ");
Serial.println(currentTempC, 2);
  
int roundedTempC = round(currentTempC);
display.showNumberDec(roundedTempC, false, 2, 0);
display.setSegments(Celsius, 2, 2);

delay(5000);

// Show Fahrenheit
Serial.print("Temperature in Fahrenheit: ");
Serial.println(currentTempF, 2);

int roundedTempF = round(currentTempF);
display.showNumberDec(roundedTempF, false, 2, 0);
display.setSegments(Fahrenheit, 2, 2);

delay(5000);

Étant donné que les valeurs de température sont des variables flottantes, nous devons les convertir en nombres entiers. Pour ce faire, nous utilisons la fonction round() pour arrondir le nombre. Par exemple:

int roundedTempC = round(currentTempC);

Nous appelons la fonction showNumberDec() pour afficher les valeurs.

display.showNumberDec(roundedTempC, false, 2, 0);

Enfin, appelez la fonction setSegments() pour afficher les unités ºC et ºF.

display.setSegments(Celsius, 2, 2);

Démonstration

Téléchargez le code sur votre carte ESP32. N’oubliez pas d’insérer votre SSID et votre mot de passe dans le code, ainsi que la clé API et votre localisation.

Vous devriez recevoir un message de réussite sur le moniteur série.

Et la température en degrés Celsius et Fahrenheit s’affichera en alternance sur l’écran.

Conclusion

Dans ce didacticiel, vous avez appris à créer un affichage de température avec l’ESP32 et l’écran TM1637. Nous avons obtenu les données sur la température de WeatherAPI. Cette API fournit de nombreuses informations sur la météo dans l’emplacement choisi. Vous pouvez facilement ajuster ce projet pour afficher plus de données de l’API.

Nous avons des tutoriels similaires qui pourraient également vous plaire :

Enfin, si vous souhaitez en savoir plus et développer davantage avec l’ESP32, consultez nos ressources :

Cette vidéo vous emmène dans l’histoire de Raspberry Pi :