ESP32 : affichage TM1637 à 4 chiffres et 7 segments (Arduino)

Le bit 1 active un segment et le bit 0 désactive un segment.

Par exemple, pour activer les segments A, B et C, vous auriez un octet tel que 0b0000111.

L’octet commence par le G et se termine par le A. Par exemple :

• 0b0000110 active les segments C et B.

Afficher des nombres ou des caractères spécifiques

Pour afficher un numéro spécifique, vous devez utiliser la bonne combinaison de segments :

• 0 : a, b, c, d, e, f
• 1 : b, c
• 2 : a, b, g, e, d
• 3 : a, b, g, c, d
• 4 : f, g, b, c
• 5 : a, f, g, c, d
• 6 : a, f, g, e, d, c
• 7 : a, b, c
• 8 : a, b, c, d, e, f, g
• 9 : a, b, c, d, f, g

Avec cela, vous pouvez également afficher d’autres caractères, pas seulement des chiffres.

Par exemple, pour coder manuellement 0123 à l’écran, vous auriez besoin d’un tableau d’octets comme celui-ci :

uint8_t segments[] = {
  0b0111111, // 0 — all segments except G
  0b0000110, // 1 — segments B and C
  0b1011011, // 2
  0b1001111  // 3
};

Par exemple, pour tester cette fonction, vous pouvez utiliser le code suivant :

/*
  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 

#define CLK 19
#define DIO 18
TM1637Display display(CLK, DIO);

void setup() {
  display.setBrightness(7); 

  // Custom segments (one byte per digit)
  uint8_t segments[] = {
    0b0111111, // 0 — all segments except G
    0b0000110, // 1 — segments B and C
    0b1011011, // 2
    0b1001111  // 3
  };

  display.setSegments(segments);
}

void loop() {
  
}

Afficher le code brut

Afficher un nombre décimal

Pour afficher un nombre décimal, vous pouvez utiliser la fonction showNumberDec() sur l’objet d’affichage.

void showNumberDec(int num, bool leading_zero = false, uint8_t length = 4, uint8_t pos = 0);

Cette fonction accepte les paramètres suivants :

• num : le numéro à afficher
• menant_zéro : lorsque vrai, les zéros non significatifs sont affichés. Sinon, les chiffres inutiles restent vides.
• length : le nombre de chiffres à définir. L’utilisateur doit s’assurer que le numéro à afficher correspond au nombre de chiffres demandé (par exemple, si deux chiffres doivent être affichés, le numéro doit être compris entre 0 et 99)
• pos : la position du chiffre le plus significatif (0 – le plus à gauche, 3 – le plus à droite)

Il existe plusieurs exemples de cas d’utilisation de cette fonction dans le code. Les commentaires montrent ce que chaque commande affichera.

display.showNumberDec(0, false); // Expect: ___0
delay(TEST_DELAY);
display.showNumberDec(0, true);  // Expect: 0000
delay(TEST_DELAY);
display.showNumberDec(1, false); // Expect: ___1
delay(TEST_DELAY);
display.showNumberDec(1, true);  // Expect: 0001
delay(TEST_DELAY);
display.showNumberDec(301, false); // Expect: _301
delay(TEST_DELAY);
display.showNumberDec(301, true); // Expect: 0301
delay(TEST_DELAY);
display.clear();
display.showNumberDec(14, false, 2, 1); // Expect: _14_
delay(TEST_DELAY);
display.clear();
display.showNumberDec(4, true, 2, 2);  // Expect: 04__
delay(TEST_DELAY);
display.showNumberDec(-1, false);  // Expect: __-1
delay(TEST_DELAY);
display.showNumberDec(-12);        // Expect: _-12
delay(TEST_DELAY);
display.showNumberDec(-999);       // Expect: -999
delay(TEST_DELAY);
display.clear();
display.showNumberDec(-5, false, 3, 0); // Expect: _-5_
delay(TEST_DELAY);

Afficher un nombre décimal avec un deux-points/un point

Il existe une autre fonction qui vous permet d’afficher un nombre décimal et de contrôler si les deux points ou le point (selon l’affichage) sont activés ou désactivés. C’est la fonction showNumberDecEx(). Voici les paramètres acceptés :

void showNumberDecEx(uint16_t num, uint8_t dots = 0, bool leading_zero = false, uint8_t length = 4, uint8_t pos = 0);

Elle est similaire à la fonction précédente showNumberDec(), mais le deuxième argument nous permet d’activer ou de désactiver les deux-points/points.

• num : le numéro à afficher
• points : activation des points/deux points – voir ci-dessous comment cela fonctionne
• menant_zéro : lorsque vrai, les zéros non significatifs sont affichés. Sinon, les chiffres inutiles restent vides.
• length : le nombre de chiffres à définir. L’utilisateur doit s’assurer que le numéro à afficher correspond au nombre de chiffres demandé (par exemple, si deux chiffres doivent être affichés, le numéro doit être compris entre 0 et 99)
• pos : la position du chiffre le plus significatif (0 – le plus à gauche, 3 – le plus à droite)

Contrôle côlon/point

Le deuxième argument de la fonction showNumberDecEx() est un masque de bits, chaque bit correspondant à un point entre les chiffres (ou une marque deux-points, tel qu’implémenté par chaque module).

Par exemple, pour les affichages avec des points entre chaque chiffre :

• 0,000 > (0b10000000)
• 00.00 > (0b01000000)
• 000.0 > (0b00100000)
• 0.0.0.0 > (0b11100000)

Dans notre cas, il s’agit d’un affichage avec juste deux points. Ainsi, pour afficher les deux points, nous pouvons passer le binaire suivant comme deuxième argument :

Enfin, voici un exemple d’affichage avec des points et des deux-points :

Par exemple, pour afficher 12h30, vous appelleriez :

display.showNumberDecEx(1230, 0b01000000);

Dans le code, c’est ici que la fonction est utilisée :

// Run through all the dots
for(k=0; k <= 4; k++) {
  display.showNumberDecEx(0, (0x80 >> k), true);
  delay(TEST_DELAY);
}

Démonstration

Téléchargez le code sur le tableau. Il affichera une série de chiffres, de caractères et de segments sur l’écran pour tester les fonctions de la bibliothèque.

Si l’exemple ne fonctionne pas, revérifiez le câblage et l’alimentation électrique.

Exemples pratiques avec l’écran TM1637

Maintenant que vous connaissez les fonctions de base pour contrôler l’écran, nous allons vous montrer deux exemples pratiques que vous pouvez tester avec l’écran TM1637 et l’ESP32 :

Ces deux projets ne nécessitent que l’ESP32 et l’écran. Aucun matériel supplémentaire n’est nécessaire, car toutes les informations seront demandées sur Internet en utilisant les capacités Wi-Fi de l’ESP32.

Horloge numérique ESP32 avec écran TM1637 (avec réglage du fuseau horaire et DST)

La disposition de l’affichage TM1637 à 4 chiffres et 7 segments avec deux points entre le deuxième et le troisième caractère 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 côté.

Nous obtiendrons l’heure de votre fuseau horaire à l’aide du protocole NTP (network time protocol) avec ajustement à l’heure d’été.

Pour en savoir plus sur l’obtention de l’heure avec l’ESP32 pour votre fuseau horaire et prendre en compte l’heure d’été (si tel est le cas), vous pouvez lire le guide détaillé suivant :

Aperçu du projet

Voici un bref aperçu des étapes pour créer ce projet :

• Initialisez l’affichage ;
• Initialisez le Wi-Fi et connectez l’ESP32 à votre réseau local afin qu’il puisse obtenir des données d’Internet ;
• Initialisez l’heure pour votre fuseau horaire spécifié (prend en compte l’heure d’été) ;
• Affichez l’heure à l’écran (faites clignoter les deux points entre les chiffres toutes les secondes).

Code – Horloge numérique TM1637

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

/*
  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 "time.h"
#include 

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

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

TM1637Display display(CLK, DIO);

// Timezone (Lisbon / Portugal)
// Change if needed - See list of timezones strings: https://github.com/nayarsystems/posix_tz_db/blob/master/zones.csv
const char* TZ_INFO = "WET0WEST,M3.5.0/1,M10.5.0";

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

// Initialize Time with the specified timezone
void initTime() {
  configTime(0, 0, "pool.ntp.org");
  setenv("TZ", TZ_INFO, 1);
  tzset();
}

// display the time on the screen
void displayTime() {

  // blinking colon
  static bool colon = false;
  colon = !colon;

  // get the current time
  struct tm timeinfo;
  if (!getLocalTime(&timeinfo)) {
    return;
  }

  int hours   = timeinfo.tm_hour;   // get hours (0–23)
  int minutes = timeinfo.tm_min;    // get minutes (0–59)

  // move hours to the left two digits
  int hourPart = hours * 100;

  // combine hours and minutes into HHMM
  int value = hourPart + minutes;

  // control the colon (for blinking colon)
  uint8_t colonMask;
  if (colon == true) {
    colonMask = 0b01000000;   // turn colon ON
  } else {
    colonMask = 0;            // turn colon OFF
  }

  display.showNumberDecEx(
    value,
    colonMask,   // blink colon
    true         // leading zeros
  );
}

void setup() {
  Serial.begin(115200);

  display.setBrightness(7);
  display.clear();

  initWiFi();
  initTime();
}

void loop() {
  displayTime();
  delay(1000);
}

Afficher le code brut

Comment fonctionne le code ?

Jetons un coup d’œil rapide au code pour voir comment il fonctionne.

Inclure les bibliothèques

Commencez par inclure les bibliothèques requises.

#include 
#include "time.h"
#include 

Informations d’identification réseau

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

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

Initialiser l’affichage

Définissez les broches TM1637 et créez une instance pour l’affichage appelée display.

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

TM1637Display display(CLK, DIO);

Fuseau horaire

Insérez votre chaîne de fuseau horaire dans la ligne suivante. Vous pouvez trouver une liste de chaînes de fuseau horaire ici. Dans mon cas, mon fuseau horaire est Lisbonne/Portugal, il ressemblera donc à ceci :

const char* TZ_INFO = "WET0WEST,M3.5.0/1,M10.5.0";

Initialiser le Wi-Fi

La fonction suivante initialise le Wi-Fi et connecte l’ESP32 à votre réseau local. Ceci sera appelé plus tard dans setup().

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

Vous pouvez en savoir plus sur la fonction Wi-Fi de l’ESP32 dans le tutoriel suivant :

Initialiser l’heure

La fonction initTime() initialise l’heure NTP et l’ajuste à votre fuseau horaire (remarquez les fonctions setenv() et tzset()).

// Initialize Time with the specified timezone
void initTime() {
  configTime(0, 0, "pool.ntp.org");
  setenv("TZ", TZ_INFO, 1);
  tzset();
}

Pour en savoir plus sur l’obtention de la date et de l’heure avec le réglage du fuseau horaire, consultez ce didacticiel :

La fonction displayTime() affichera la date et l’heure à l’écran.

void displayTime() {

Nous avons une variable booléenne appelée côlon pour déterminer si le côlon apparaît ou non (pour créer l’effet clignotant).

// blinking colon
static bool colon = false;
colon = !colon;

Nous obtenons l’heure actuelle et la sauvegardons dans la structure timeinfo.

// get the current time
struct tm timeinfo;
if (!getLocalTime(&timeinfo)) {
  return;
}

Ensuite, nous pouvons obtenir l’heure et les minutes comme suit :

int hours   = timeinfo.tm_hour;   // get hours (0–23)
int minutes = timeinfo.tm_min;    // get minutes (0–59)

Maintenant, pour afficher les chiffres à l’écran, nous devons combiner la date et l’heure en un seul nombre à quatre chiffres qui seront divisés au milieu par les deux points.

Nous pouvons le faire en multipliant l’heure par 100, puis en ajoutant les minutes.

// move hours to the left two digits
int hourPart = hours * 100;

// combine hours and minutes into HHMM
int value = hourPart + minutes;

Par exemple, imaginez que l’heure soit 12h et les minutes 30. Nous voulons obtenir 12h30. Nous devons donc obtenir le numéro 1230 et afficher les deux points au milieu.

12*100+30 donnera le 1230 souhaité. Ce nombre est enregistré dans la variable de valeur.

Enfin, nous ajustons le masque de bits pour afficher les deux points selon qu’il est temps ou non d’afficher les deux points.

// control the colon (for blinking colon)
uint8_t colonMask;
if (colon == true) {
  colonMask = 0b01000000;   // turn colon ON
} else {
  colonMask = 0;            // turn colon OFF
}

Nous pouvons utiliser showNumberDecEx() pour afficher l’heure à l’écran. Passez en argument la valeur, le masque de bits pour les deux points et si nous avons des zéros non significatifs.

display.showNumberDecEx(
  value,
  colonMask,   // blink colon
  true         // leading zeros
);

Maintenant que nous avons déclaré toutes les fonctions essentielles, il est facile de configurer notre code.

installation()

Dans setup(), initialisez le moniteur série, réglez la luminosité de l’écran, initialisez le Wi-Fi et l’heure.

void setup() {
  Serial.begin(115200);

  display.setBrightness(7);
  display.clear();

  initWiFi();
  initTime();
}

boucle()

Enfin, dans la boucle(), il suffit d’appeler la fonction displayTime() pour afficher l’heure sur le module d’affichage à 4 chiffres et 7 segments.

void loop() {
  displayTime();
  delay(1000);
}

Démonstration

Après avoir inséré vos informations d’identification réseau et vos informations de fuseau horaire, vous pouvez télécharger le code sur l’ESP32.

Il devrait commencer à afficher l’heure actuelle de votre fuseau horaire.

Les deux points devraient clignoter toutes les secondes pour ressembler à ces vieilles horloges numériques.

Affichage de la température ESP32 (TM1637) de l’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.

Installation des bibliothèques

Pour cet exemple, vous devez installer la bibliothèque ArduinoJSON par bblanchon.

Code – Affichage de la température TM1637

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).

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);

Ensuite, nous appelons simplement la fonction showNumberDec() pour afficher les valeurs.

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

Ensuite, 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

Il s’agissait d’un guide complet sur la façon d’interfacer l’affichage 7 segments à 4 chiffres TM1637 avec l’ESP32. Cela peut être très utile pour afficher la température, l’heure ou d’autres informations.

Le format d’affichage spécifique dont nous disposons, avec deux points au milieu, pourrait être particulièrement utile pour créer une horloge numérique ou pour afficher une minuterie.

Nous espérons que vous avez trouvé ce guide utile. Nous avons des guides pour d’autres affichages qui pourraient être utiles :

Pour en savoir plus sur l’ESP32, assurez-vous de consulter nos ressources :

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