ESP, Tutoriels

Comment utiliser TTGO T- Display

Ttgo T-Display

Introduction

TTGO T-Display est une carte de développement basée sur le microcontrôleur ESP32 avec une connectivité Wi-Fi et Bluetooth intégrée. Il est doté d’un écran TFT couleur intégré de 1,14 pouce. Il est facile à programmer, même en utilisant Arduino. La carte dispose d’une connexion USB-C qui permet la programmation et l’alimentation du module.

Ttgo T- Display

Spécifiques techniques

  • Chipset : ESP32 240MHz Xtensa® microprocesseur 32 bits
  • Mémoire flash : 4 Mo de flash QSPI
  • SRAM : 520 Ko de SRAM
  • Écran : Écran TFT IPS 1,14 pouces (240×135 pixels)
  • Alimentation : Plage de tension de travail de 2,7V à 4,2V, alimenté par USB ou batterie lithium-ion
  • Connectivité sans fil : Wi-Fi 802.11 b/g/n et Bluetooth v4.2
  • Interfaces : UART, SPI, SDIO, I2C, PWM LED, PWM TV, I2S, IRGPIO, ADC, capteur de toucher capacitif, pré-amplificateur DACLNA
  • Température de fonctionnement : -40°C à +85°C
  • Dimensions : 51,52 x 25,04 x 8,54 mm
  • Poids : 7,81 g

Avantages du TTGO T-Display

Le TTGO T-Display offre de nombreux avantages pour les amateurs d’électronique et les développeurs de projets embarqués. Voici quelques-uns des avantages clés de ce microcontrôleur :

  1. Intégration de l’écran TFT : Il est équipé d’un écran TFT couleur de 1,14 pouces, ce qui permet d’afficher des informations et des graphiques de manière claire et visuelle.
  2. Connectivité sans fil : Avec la connectivité Wi-Fi et Bluetooth intégrée, le TTGO T-Display peut se connecter à d’autres appareils et à Internet, ce qui ouvre un large éventail de possibilités pour les projets de domotique, de surveillance à distance, et bien d’autres.
  3. Interfaces polyvalentes : Le microcontrôleur dispose de nombreuses interfaces intégrées, telles que UART, SPI, I2C, etc., permettant de connecter facilement différents capteurs, actionneurs et autres périphériques.
  4. Programmation facile : Le TTGO T-Display est compatible avec l’IDE Arduino, offrant ainsi une interface de programmation familière et une large communauté de développeurs pour obtenir de l’aide et des ressources supplémentaires.

Description des broches du TTGO T-Display

  • Broche 5V : Cette broche fournit une tension de sortie régulée de 5V.
  • Broche GND : Cette broche est utilisée comme référence de terre pour le module. Elle doit être connectée à la masse de votre circuit.
  • Broche 3V3 : Cette broche fournit une tension de sortie régulée de 3,3V.
  • Broche IO : Les broches IO sont des broches d’entrée/sortie générales que vous pouvez utiliser pour la communication avec d’autres périphériques ou pour contrôler des composants externes. Les fonctions de chaque broche IO peuvent varier en fonction du programme que vous téléversez sur le module.
  • Broche SDA et SCL : Ces broches sont utilisées pour la communication I2C avec d’autres périphériques compatibles I2C tels que des capteurs ou des écrans.
  • Broche RX et TX : Ces broches sont utilisées pour la communication série UART. Elles peuvent être utilisées pour établir une communication avec d’autres dispositifs compatibles UART, tels que des modules GPS ou des dispositifs série.
  • Broche A0 : Cette broche peut être utilisée comme entrée analogique pour mesurer des signaux analogiques, tels que des tensions ou des courants.
  • Broches GPIO : Le TTGO T-Display dispose de plusieurs broches GPIO qui peuvent être configurées comme entrées ou sorties numériques. Ces broches peuvent être utilisées pour lire des signaux numériques ou contrôler des composants externes.
Alimentation 12V 3A 61

Configuration de l’environnement de développement

Avant de commencer à utiliser le TTGO T-Display, vous devez configurer votre environnement de développement. Suivez ces étapes pour vous assurer que vous êtes prêt à programmer le microcontrôleur :

Installation de la carte TTGO T-Display dans l’IDE Arduino

  1. Ouvrez l’Arduino IDE sur votre ordinateur.
  2. Cliquez sur “Fichier” dans la barre de menus, puis sélectionnez “Préférences”.
  3. Dans la fenêtre des préférences, recherchez le champ “URL de gestionnaire de cartes supplémentaires” et cliquez sur le bouton en forme de crayon à droite pour le modifier.
  4. Ajoutez l’URL suivante dans le champ : [https://dl.espressif.com/dl/package_esp32_index.json]
  5. Cliquez sur le bouton “OK” pour fermer la fenêtre des préférences.
  6. Maintenant, allez dans le menu “Outils” > “Type de carte” > “Gestionnaire de cartes”.
  7. Recherchez “TTGO T-Display” dans la barre de recherche du gestionnaire de cartes.
  8. Cliquez sur le résultat de recherche correspondant et cliquez sur “Installer”.
  9. Attendez que l’installation soit terminée, puis fermez le gestionnaire de cartes.

Maintenant, vous avez ajouté avec succès la carte TTGO T-Display à l’IDE Arduino et vous êtes prêt à commencer à programmer.

Installation des bibliothèques nécessaires (TFT_eSPI, etc.)

Pour tirer pleinement parti des fonctionnalités du TTGO T-Display, vous devrez installer certaines bibliothèques supplémentaires. Voici les étapes pour installer la bibliothèque TFT_eSPI :

  1. Dans l’IDE Arduino, allez dans le menu “Croquis” > “Inclure une bibliothèque” > “Gérer les bibliothèques”.
  2. Dans la fenêtre de gestion des bibliothèques, recherchez “TFT_eSPI” dans la barre de recherche.
  3. Sélectionnez la bibliothèque “TFT_eSPI” dans la liste des résultats de recherche.
  4. Cliquez sur le bouton “Installer” pour installer la bibliothèque.
  5. Attendez que l’installation soit terminée, puis fermez la fenêtre de gestion des bibliothèques.

Configuration des paramètres de la carte dans l’Arduino IDE

Une fois la carte ajoutée à l’IDE Arduino, vous devez configurer les paramètres appropriés pour le TTGO T-Display. Suivez ces étapes :

  1. Branchez votre TTGO T-Display à votre ordinateur via un câble USB.
  2. Ouvrez l’IDE Arduino.
  3. Dans le menu “Outils”, sélectionnez la carte “TTGO T-Display” dans la liste des cartes disponibles.
  4. Sélectionnez le port série correspondant à votre TTGO T-Display dans le menu “Outils” > “Port”.
  5. Vérifiez que les autres paramètres de la carte, tels que la fréquence du CPU, la taille de la mémoire flash, etc., sont configurés correctement pour vos besoins.
  6. Vous êtes maintenant prêt à programmer votre TTGO T-Display.

Intégration du capteur de température et d’humidité DHT11

Matériel nécessaire

  • Module TTGO T-Display
  • Capteur de température et d’humidité DHT11
  • Câbles de connexion

Branchements

  1. Connectez la broche de données du capteur DHT11 à une broche disponible sur le TTGO T-Display. Par exemple, vous pouvez utiliser la broche 27 (D27) du TTGO T-Display.
  2. Connectez la broche VCC du capteur DHT11 à une broche 3.3V du TTGO T-Display.
  3. Connectez la broche GND du capteur DHT11 à une broche GND (masse) du TTGO T-Display.

Code :

#include "WiFi.h"
#include "ESPAsyncWebServer.h"
#include <Adafruit_Sensor.h>
#include <DHT.h>

// Remplacez par les informations de votre réseau
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

#define DHTPIN 27     // Broche digitale connectée au capteur DHT

#define DHTTYPE    DHT11     // Capteur DHT11

DHT dht(DHTPIN, DHTTYPE);

// Crée un objet AsyncWebServer sur le port 80
AsyncWebServer server(80);

String readDHTTemperature() {
  float t = dht.readTemperature();
  if (isnan(t)) {    
    Serial.println("Échec de lecture du capteur DHT !");
    return "--";
  }
  else {
    Serial.println(t);
    return String(t);
  }
}

String readDHTHumidity() {
  float h = dht.readHumidity();
  if (isnan(h)) {
    Serial.println("Échec de lecture du capteur DHT !");
    return "--";
  }
  else {
    Serial.println(h);
    return String(h);
  }
}

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <style>
    html {
     font-family: Arial;
     display: inline-block;
     margin: 0px auto;
     text-align: center;
    }
    h2 { font-size: 3.0rem; }
    p { font-size: 3.0rem; }
    .units { font-size: 1.2rem; }
    .dht-labels{
      font-size: 1.5rem;
      vertical-align:middle;
      padding-bottom: 15px;
    }
  </style>
</head>
<body>
  <h2>ESP32 DHT Server</h2>
  <p>
    <i class="fas fa-thermometer-half" style="color:#059e8a;"></i> 
    <span class="dht-labels">Température</span> 
    <span id="temperature">%TEMPERATURE%</span>
    <sup class="units">&deg;C</sup>
  </p>
  <p>
    <i class="fas fa-tint" style="color:#00add6;"></i> 
    <span class="dht-labels">Humidité</span>
    <span id="humidity">%HUMIDITY%</span>
    <sup class="units">&percnt;</sup>
  </p>
</body>
<script>
setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("temperature").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/temperature", true);
  xhttp.send();
}, 10000 ) ;

setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("humidity").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/humidity", true);
  xhttp.send();
}, 10000 ) ;
</script>
</html>)rawliteral";

String processor(const String& var){
  if(var == "TEMPERATURE"){
    return readDHTTemperature();
  }
  else if(var == "HUMIDITY"){
    return readDHTHumidity();
  }
  return String();
}

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

  dht.begin();
  
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connexion au Wi-Fi...");
  }

  Serial.println(WiFi.localIP());

  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html, processor);
  });
  server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", readDHTTemperature().c_str());
  });
  server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", readDHTHumidity().c_str());
  });

  server.begin();
}

void loop(){
  
}

Remarque : Dans ce code, nous avons défini le capteur DHT11 comme type de capteur. Assurez-vous d’avoir connecté le capteur DHT11 à la broche DHTPIN spécifiée dans le code.

Remplacez “REPLACE_WITH_YOUR_SSID” et “REPLACE_WITH_YOUR_PASSWORD” par les informations de votre réseau Wi-Fi.

Téléversez le code sur votre module TTGO T-Display et vous pourrez accéder à l’adresse IP locale de l’ESP32 pour voir les données de température et d’humidité en temps réel.

Lecture des données des capteurs et affichage sur l’écran TFT

Pour lire les données des capteurs DHT et les afficher sur l’écran TFT du TTGO T-Display, nous devons ajouter quelques fonctionnalités au code existant. Voici comment procéder :

  1. Inclure la bibliothèque TFT_eSPI et définir les paramètres nécessaires pour l’écran TFT :
#include <TFT_eSPI.h>

// Définir les broches pour l'écran TFT
#define TFT_CLK 18
#define TFT_MISO 19
#define TFT_MOSI 23
#define TFT_CS 5
#define TFT_DC 16
#define TFT_RST 17

TFT_eSPI tft = TFT_eSPI();
  1. Initialiser l’écran TFT dans la fonction setup() :
void setup() {
  // ...
  
  // Initialiser l'écran TFT
  tft.begin();
  tft.setRotation(1); // Rotation de l'écran (facultatif, en fonction de l'orientation souhaitée)
  tft.fillScreen(TFT_BLACK); // Remplir l'écran en noir
  
  // ...
}
  1. Créer une fonction pour afficher les données sur l’écran TFT :
void afficherDonnees(float temperature, float humidite) {
  tft.setTextSize(2); // Définir la taille du texte
  
  // Afficher la température
  tft.setTextColor(TFT_WHITE);
  tft.setCursor(10, 50);
  tft.print("Temperature: ");
  tft.setTextColor(TFT_YELLOW);
  tft.print(temperature);
  tft.println(" °C");
  
  // Afficher l'humidité
  tft.setTextColor(TFT_WHITE);
  tft.setCursor(10, 80);
  tft.print("Humidite: ");
  tft.setTextColor(TFT_YELLOW);
  tft.print(humidite);
  tft.println(" %");
}
  1. Modifier les fonctions readDHTTemperature() et readDHTHumidity() pour appeler la fonction afficherDonnees() avec les données lues :
String readDHTTemperature() {
  float t = dht.readTemperature();
  if (isnan(t)) {
    Serial.println("Echec de lecture du capteur DHT !");
    return "--";
  }
  else {
    Serial.println(t);
    afficherDonnees(t, dht.readHumidity()); // Afficher les données sur l'écran TFT
    return String(t);
  }
}

String readDHTHumidity() {
  float h = dht.readHumidity();
  if (isnan(h)) {
    Serial.println("Echec de lecture du capteur DHT !");
    return "--";
  }
  else {
    Serial.println(h);
    afficherDonnees(dht.readTemperature(), h); // Afficher les données sur l'écran TFT
    return String(h);
  }
}
  1. Modifier la fonction processor() pour mettre à jour les données affichées sur l’écran TFT :
String processor(const String& var) {
  if (var == "TEMPERATURE") {
    float t = dht.readTemperature();
    if (isnan(t)) {
      return "--";
    } else {
      return String(t);
    }
  } else if (var == "HUMIDITY") {
    float h = dht.readHumidity();
    if (isnan(h)) {
      return "--";
    } else {
      return String(h);
    }
  }
  return String();
}
  1. Mettre à jour la fonction setup() pour afficher les données initiales sur l’écran TFT :
void setup() {
  // ...
  
  // Initialiser l'écran TFT
  tft.begin();
  tft.setRotation(1); // Rotation de l'écran (facultatif, en fonction de l'orientation souhaitée)
  tft.fillScreen(TFT_BLACK); // Remplir l'écran en noir
  
  // Afficher les données initiales sur l'écran TFT
  float temperature = dht.readTemperature();
  float humidity = dht.readHumidity();
  afficherDonnees(temperature, humidity);
  
  // ...
}

Avec ces modifications, les données de température et d’humidité lues à partir du capteur DHT seront affichées en temps réel sur l’écran TFT du TTGO T-Display.

Liens outilles

Pour découvrir plus de tutoriel, vous pouvez consulter notre bloc : https://www.moussasoft.com/tutoriels-electroniques

Téléchargement de l’Arduino IDE : https://www.arduino.cc/en/software