Zeitanzeige auf einem TFT mit GFXcanvas

Ziel des Projekts

Auf verschiedenen Mikrocontrollern mit WiFi-Funktion soll eine digitale Uhr auf einem TFT angezeigt werden. Der Bildschirmaufbau wird mit der ⇒GFXcanvas der Bibliothek Adafrui GFX realisiert.

Konfiguration der Mikrocontroller

SPI-Pins der Mikrocontroller

Schriftarten

Du kannst entweder die lokal installierten Schriften der ⇒Bibliothek Adafruit_GFX oder auf dieser Basis neue Schriftgrößen erstellen. Die internen Schriften haben eine maximale Größe von 24 Punkten. Die Darstellung von Umlauten und Sonderzeichen ist nicht möglich.

Auf der Seite ⤷https://rop.nl/truetype2gfx/ kannst du von den verfügbaren freien Schriftarten neue Schriftgrößen erstellen. Allerdings verwenden diese Schriften auch nur den einfachen ASCII-Zeichensatz.

Die neu erstellte Schrift befindet sich anschließend in deinem Download-Ordner. Jetzt musst du sie noch in den Ordner

Arduino/libraries/Adafruit_GFX_Library/Fonts

kopieren.

Benötigte Bibliotheken

Bibliothek Adafruit ST7735 — TFT 160×128 Pixel

Bibliothek Adafruit ILI9341 — TFT 320×240 Pixel

Das Programm (TFT 320×240 Pixel)

Bibliotheken und Variablen

Je nach verwendetem Mikrocontroller muss eine andere WiFi-Bibliothek eingebunden werden.
Das wird mit #ifdef abgefragt:

MKR 1010, Nano 33 IoT (ARDUINO_ARCH_SAMD)
WiFiNINA.h
UNO R4 WiFi (ARDUINO_UNOR4_WIFI)
WiFiS3.h
ESP32 (ESP32)
WiFi.h
ESP8266 (ESP8266)
ESP8266WiFi.h

#ifdef ESP8266
  #include "ESP8266WiFi.h"
#endif
 
#ifdef ESP32
  #include "WiFi.h"
#endif
 
#ifdef ARDUINO_UNOR4_WIFI
  #include "WiFiS3.h"
#endif
 
#ifdef ARDUINO_ARCH_SAMD
  #include "WiFiNINA.h"
#endif

#include "Adafruit_ILI9341.h"
 
// interne Schrift
#include "Fonts/FreeSans24pt7b.h"
#include "Fonts/FreeSans18pt7b.h"	
#include "Fonts/FreeSans12pt7b.h"	
#include "Fonts/FreeSans32pt7b.h"	
#include "Fonts/FreeSans40pt7b.h"	
#include "Fonts/FreeSans60pt7b.h"

#include "NTP3.h"
 
// SSID und Passwort des Routers
char Router[] = "Repeater-Buero";
char Passwort[] = "xxxxxxxx";

WiFiUDP wifiUdp;
NTP3 ntp(wifiUdp);

// Arduino UNO R4 WiFi
// #define TFT_CS       10
// #define TFT_RST       8
// #define TFT_DC        9

// XIAO
// #define TFT_CS       D7
// #define TFT_RST      D1
// #define TFT_DC       D2
 
// Arduino Nano ESP32
// #define TFT_CS       10
// #define TFT_RST       9
// #define TFT_DC        8
 
// SPI-Pins ESP32-C6
// #define TFT_CS       18
// #define TFT_RST       3
// #define TFT_DC        2
 
// ESP32-WROOM
#define TFT_CS        5
#define TFT_RST       4
#define TFT_DC        2
 
// ESP32-S3
// #define TFT_CS       10
// #define TFT_RST       5
// #define TFT_DC        4

// ESP32-C6-Zero
// #define TFT_CS       18
// #define TFT_RST       3
// #define TFT_DC        2
 
// ESP32-C3 Zero/ESP32-C3 Super Mini
// #define TFT_CS         7
// #define TFT_RST        3
// #define TFT_DC         2

Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC, TFT_RST);

// 1-Bit Canvas definieren
GFXcanvas1 Bereich(320, 240);

// Farben
#define SCHWARZ     0x0000
#define WEISS       0xFFFF

// beim Start des loop-Teils wird die Zeit einmalig synchronisiert
volatile bool Start = true;
 
unsigned long Zeitmessung = 0;
int Sekunden;

#ifdef ESP8266

#include "ESP8266WiFi.h"

#endif

#ifdef ESP32

#include "WiFi.h"

#endif

#ifdef ARDUINO_UNOR4_WIFI

#include "WiFiS3.h"

#endif

#ifdef ARDUINO_ARCH_SAMD

#include "WiFiNINA.h"

#endif

#include "Adafruit_ILI9341.h"

// interne Schrift

#include "Fonts/FreeSans24pt7b.h"

#include "Fonts/FreeSans18pt7b.h"

#include "Fonts/FreeSans12pt7b.h"

#include "Fonts/FreeSans32pt7b.h"

#include "Fonts/FreeSans40pt7b.h"

#include "Fonts/FreeSans60pt7b.h"

#include "NTP3.h"

// SSID und Passwort des Routers

char Router[] = "Repeater-Buero";

char Passwort[] = "xxxxxxxx";

WiFiUDP wifiUdp;

NTP3 ntp(wifiUdp);

// Arduino UNO R4 WiFi

// #define TFT_CS 10

// #define TFT_RST 8

// #define TFT_DC 9

// XIAO

// #define TFT_CS D7

// #define TFT_RST D1

// #define TFT_DC D2

// Arduino Nano ESP32

// #define TFT_CS 10

// #define TFT_RST 9

// #define TFT_DC 8

// SPI-Pins ESP32-C6

// #define TFT_CS 18

// #define TFT_RST 3

// #define TFT_DC 2

// ESP32-WROOM

#define TFT_CS 5

#define TFT_RST 4

#define TFT_DC 2

// ESP32-S3

// #define TFT_CS 10

// #define TFT_RST 5

// #define TFT_DC 4

// ESP32-C6-Zero

// #define TFT_CS 18

// #define TFT_RST 3

// #define TFT_DC 2

// ESP32-C3 Zero/ESP32-C3 Super Mini

// #define TFT_CS 7

// #define TFT_RST 3

// #define TFT_DC 2

Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC, TFT_RST);

// 1-Bit Canvas definieren

GFXcanvas1 Bereich(320, 240);

// Farben

#define SCHWARZ 0x0000

#define WEISS 0xFFFF

// beim Start des loop-Teils wird die Zeit einmalig synchronisiert

volatile bool Start = true;

unsigned long Zeitmessung = 0;

int Sekunden;

Der setup-Teil

Den erfolgreichen Start des Programms kannst du auf dem Display beobachten:

Es gibt einige weitere Anpassungen für ESP32-Mikrocontroller.

void setup()
{
  Serial.begin(9600);
  delay(1000);

  // TFT starten
  tft.begin();

  // Rotation anpassen
  tft.setRotation(1);
 
  // schwarzer Hintergrund
  tft.fillScreen(SCHWARZ);
  tft.setCursor(10, 40);    
  tft.setFont(&FreeSans18pt7b);  
  tft.print("WiFi verbinden ...");

  // WiFi starten DHCP
  WiFi.begin(Router, Passwort);
  
  #ifdef ESP32
    WiFi.mode(WIFI_MODE_STA);
    WiFi.setSleep(false);
    WiFi.setAutoReconnect(true);
    ntp.syncRTC(true);
  #endif 

  while(WiFi.status() != WL_CONNECTED)
  {
    delay(200);
    Serial.print(".");
  }
 
  /*
    Zeitzone
    CEST: Central European Summertime
    Beginn europäische Sommerzeit letzter Sonntag im März 2 Uhr GMT + 2 Stunden
  */
  ntp.ruleDST("CEST", Last, Sun, Mar, 2, 120);
 
  // CET: Central European Time
  // Beginn Normalzeit letzter Sonntag im Oktober 3 Uhr GMT + 1 Stunde
  ntp.ruleSTD("CET", Last, Sun, Oct, 3, 60);
 
  // ntp starten
  ntp.begin();

  // WiFi-Daten anzeigen
  tft.setCursor(10, 90);
  tft.print("IP: ");
  tft.print(WiFi.localIP());
  tft.setCursor(10, 140);
  tft.print(WiFi.SSID());
  tft.setCursor(10, 190);
  tft.print("RSSI: ");
  tft.print(WiFi.RSSI());
  delay(5000);

  Zeitmessung = millis() + 1000;
}

void setup()

{

Serial.begin(9600);

delay(1000);

// TFT starten

tft.begin();

// Rotation anpassen

tft.setRotation(1);

// schwarzer Hintergrund

tft.fillScreen(SCHWARZ);

tft.setCursor(10, 40);

tft.setFont(&FreeSans18pt7b);

tft.print("WiFi verbinden ...");

// WiFi starten DHCP

WiFi.begin(Router, Passwort);

#ifdef ESP32

WiFi.mode(WIFI_MODE_STA);

WiFi.setSleep(false);

WiFi.setAutoReconnect(true);

ntp.syncRTC(true);

#endif

while(WiFi.status() != WL_CONNECTED)

{

delay(200);

Serial.print(".");

}

Zeitzone

CEST: Central European Summertime

Beginn europäische Sommerzeit letzter Sonntag im März 2 Uhr GMT + 2 Stunden

ntp.ruleDST("CEST", Last, Sun, Mar, 2, 120);

// CET: Central European Time

// Beginn Normalzeit letzter Sonntag im Oktober 3 Uhr GMT + 1 Stunde

ntp.ruleSTD("CET", Last, Sun, Oct, 3, 60);

// ntp starten

ntp.begin();

// WiFi-Daten anzeigen

tft.setCursor(10, 90);

tft.print("IP: ");

tft.print(WiFi.localIP());

tft.setCursor(10, 140);

tft.print(WiFi.SSID());

tft.setCursor(10, 190);

tft.print("RSSI: ");

tft.print(WiFi.RSSI());

delay(5000);

Zeitmessung = millis() + 1000;

}

Die Funktion ZeitAnzeigen

Der zwischenzeitlichen Unterbrechung des WiFi-Signals soll vorgebeugt werden:

der Rückgabewert der Aktualisierung der Zeit mit ntp.update() ist im Erfolgsfall true.
Bei einem Misserfolg versucht das Programm die WiFi-Verbindung neu aufzubauen. Der Wert der Variable Start wird auf true gesetzt, im loop-Teil wird die Zeit sofort aktualisiert.
ntp.isValid() gibt true zurück, wenn die ermittelte Zeit gültig ist. Ist das nicht der Fall, versucht das Programm die WiFi-Verbindung neu aufzubauen. Die Variable Start wird auf true gesetzt und die Zeit wird sofort aktualisiert.

void ZeitAnzeigen()
{ 
  if (ntp.update())
  {
    // überprüfen ob die Zeit gültig ist
    if (ntp.isValid())
    {
      Sekunden = ntp.seconds();
 
      // Canvas erstellen
      Bereich.fillScreen(0x0000);    
      Bereich.setFont(&FreeSans18pt7b);
      Bereich.setCursor(10, 30);   

      switch(ntp.weekDay())
      {
        case 0:
          Bereich.print("Sonntag");
          break;
        case 1:
          Bereich.print("Montag");
          break;
        case 2:
          Bereich.print("Dienstag");
          break;
        case 3:
          Bereich.print("Mittwoch");
          break;
        case 4:
          Bereich.print("Donnertag");
          break;
        case 5:
          Bereich.print("Freitag");
          break;
        case 6:
          Bereich.print("Samstag");
          break;
      } 
        
      // Datum  
      Bereich.setCursor(10, 80);   
      Bereich.print(ntp.formattedTime("%d. %m. %Y"));
      Bereich.drawFastHLine(1, 90, tft.width(), WEISS);

      Bereich.setCursor(10, 200);    

      // Zeit
      Bereich.setFont(&FreeSans60pt7b);  
      Bereich.setTextColor(WEISS);

      Bereich.print(ntp.formattedTime("%H:%M"));
  
      // Canvas anzeigen
      tft.drawBitmap(1,1, Bereich.getBuffer(), Bereich.width(), Bereich.height(), 0xFFFF, 0x0000);
    }

    // Zeit ist nicht gültig
    else
    {
      // prüfen, ob WiFi verbunden ist
      while (WiFi.status() != WL_CONNECTED)
      {
        delay(200);
        Serial.print(".");
      }
      Start = true;
    }
  }
  // WiFi ist nicht verbunden
  else
  {
    // prüfen, ob WiFi verbunden ist
    while (WiFi.status() != WL_CONNECTED)
    {
      delay(200);
      Serial.print(".");
    }
    Start = true;
  }
}

void ZeitAnzeigen()

{

if (ntp.update())

{

// überprüfen ob die Zeit gültig ist

if (ntp.isValid())

{

Sekunden = ntp.seconds();

// Canvas erstellen

Bereich.fillScreen(0x0000);

Bereich.setFont(&FreeSans18pt7b);

Bereich.setCursor(10, 30);

switch(ntp.weekDay())

{

case 0:

Bereich.print("Sonntag");

break;

case 1:

Bereich.print("Montag");

break;

case 2:

Bereich.print("Dienstag");

break;

case 3:

Bereich.print("Mittwoch");

break;

case 4:

Bereich.print("Donnertag");

break;

case 5:

Bereich.print("Freitag");

break;

case 6:

Bereich.print("Samstag");

break;

}

// Datum

Bereich.setCursor(10, 80);

Bereich.print(ntp.formattedTime("%d. %m. %Y"));

Bereich.drawFastHLine(1, 90, tft.width(), WEISS);

Bereich.setCursor(10, 200);

// Zeit

Bereich.setFont(&FreeSans60pt7b);

Bereich.setTextColor(WEISS);

Bereich.print(ntp.formattedTime("%H:%M"));

// Canvas anzeigen

tft.drawBitmap(1,1, Bereich.getBuffer(), Bereich.width(), Bereich.height(), 0xFFFF, 0x0000);

}

// Zeit ist nicht gültig

else

{

// prüfen, ob WiFi verbunden ist

while (WiFi.status() != WL_CONNECTED)

{

delay(200);

Serial.print(".");

}

Start = true;

}

// WiFi ist nicht verbunden

else

{

// prüfen, ob WiFi verbunden ist

while (WiFi.status() != WL_CONNECTED)

{

delay(200);

Serial.print(".");

}

Start = true;

}

Der loop-Teil

void loop()
{
  // Start = true
  // -> Zeit einmalig beim Start synchronisieren
  // danach zur vollen Minute
  if (Start)
  {
    Start = false;
    ZeitAnzeigen();
  }

  // Sekunden weiter zählen
  if (Zeitmessung < millis())
  {
    Zeitmessung += 1000;
    Sekunden++;

    // nach 60 Sekunden Zeit aktualisieren
    if (Sekunden == 60) ZeitAnzeigen();
  }
}

void loop()

{

// Start = true

// -> Zeit einmalig beim Start synchronisieren

// danach zur vollen Minute

if (Start)

{

Start = false;

ZeitAnzeigen();

}

// Sekunden weiter zählen

if (Zeitmessung < millis())

{

Zeitmessung += 1000;

Sekunden++;

// nach 60 Sekunden Zeit aktualisieren

if (Sekunden == 60) ZeitAnzeigen();

}

Ziel des Projekts

Konfiguration der Mikrocontroller

SPI-Pins der Mikrocontroller

Schriftarten

Benötigte Bibliotheken

Das Programm (TFT 320×240 Pixel)

Bibliotheken und Variablen

Der setup-Teil

Die Funktion ZeitAnzeigen

Der loop-Teil

Quellen

Ähnliche Projekte