Analoge Uhr mit TFT 240x240 Pixeln und RTC-Modul – Projekte für Arduino und ESP32-Mikrocontroller

Inhalt

8 Minuten

Kategorien: Anzeigemodule, Zeit anzeigen

Schlagwörter: RTC-Modul, TFT-Display

Ziele des Projekts

das ⇒RTC-Modul DS3231 liefert die aktuelle Zeit
auf dem runden ⇒TFT-Display mit 240×240 Pixeln wird die Zeit als analoge Uhr dargestellt

Die Schaltpläne

Arduino UNO R3

Arduino Nano

Benötigte Bibliotheken

Das Programm

Bibliotheken und Variable

Das Programm kann durch Variabeln im Kopf angepasst werden:

die Farbe der Zeiger (Zeigerfarbe)
die Farben kannst du dem Kopf des Programms entnehmen
die Farbe des inneren Kreises (Kreisfarbe)
die Farbe der äußeren Umrandung (Randfarbe)
die Anzeige der Stundenmarkierungen 12, 3, 6 und 9 (Ziffernanzeigen)
true: Ziffern anzeigen, false: Ziffern verbergen
Anzeige des Sekundenzeigers (SekundenzeigerKreis)
true: Anzeige als Kreis
false: Anzeige mit Linie und Kreis
das RTC-Modul synchronisiert die Zeit mit dem Zeitpunkt des Kompilierens des Programms
durch das Hochladen und den Aufbau des TFTs entstehen Verzögerungen bis zu mehrerer Sekunden
die Variable Zeitkorrektur kann diese Zeitspanne ausgleichen (Angabe in Sekunden)

#include "RTClib.h"
#include "Adafruit_GC9A01A.h"

// Adafruit-Schriftart einbinden
#include "Fonts/FreeSans12pt7b.h"

// Name des RTC-Moduls (rtc)
RTC_DS3231 rtc;

#define TFT_CS       10
#define TFT_RST       8
#define TFT_DC        9

Adafruit_GC9A01A tft(TFT_CS, TFT_DC);

// Variablen des TFTs (Höhe, Breite, Radius)
const int MitteHoehe = tft.height() / 2;
const int MitteBreite = tft.width() / 2;
const int Radius = tft.width() / 2;

// Multiplikatoren für x- y-Positionen der Stunden, Minuten und Sekunden
float SekundePosX = 0, SekundePosY = 0, MinutePosX = 0, MinutePosY = 0, StundePosX = 0, StundePosY = 0;
float GradSekunden = 0, GradMinuten = 0, GradStunden = 0;

// x- y-Koordinaten für die Anzeige Stunden, Minuten und Sekunden
int SekundenZeigerX = MitteHoehe, SekundenZeigerY = MitteHoehe;
int MinutenZeigerX = MitteHoehe, MinutenZeigerY = MitteHoehe;
int StundenZeigerX = MitteHoehe, StundenZeigerY = MitteHoehe; 

// Start wird nur beim ersten Start für den Aufbau des TFTs benötigt
bool Start = true;

// Variablen für die Markierungen und Punkte und Striche des Ziffernblatts
float PosX, PosY;
int PunktX, PunktY, PunktX1, PunktX2, PunktY1, PunktY2;

// Variablen für die Zeit
int Stunden, Minuten, Sekunden;

// Farben
#define SCHWARZ     0x0000
#define WEISS       0xFFFF
#define BLAU        0x001F
#define ROT         0xF800
#define GRUEN       0x07E0
#define CYAN        0x07FF
#define MAGENTA     0xF81F
#define GELB        0xFFE0
#define BRAUN       0x9A60
#define GRAU        0x7BEF
#define GRUENGELB   0xB7E0
#define DUNKELCYAN  0x03EF
#define ORANGE      0xFDA0
#define PINK        0xFE19
#define BORDEAUX    0xA000
#define HELLBLAU    0x867D
#define VIOLETT     0x915C
#define SILBER      0xC618
#define GOLD        0xFEA0

// Farben innerer Kreis, Randfarbe und Zeigerfarbe
// die Farben der Zeiger können aber auch individuell gesetzt werden
const int Kreisfarbe = SCHWARZ;
const int Zeigerfarbe = WEISS;
const int Randfarbe = BORDEAUX;

// true -> Sekundenzeiger nur als Kreis
bool SekundenzeigerKreis = false;

// Ziffern 12 3 6 9 anzeigen/nicht anzeigen
bool Ziffernanzeigen = true;

// Abstand zwischen Zeitpunkt der Kompilierung und tatsächlichem Start ausgleichen
int Zeitkorrektur = 10;

unsigned long Zeitmessung = 0;

#include "RTClib.h"

#include "Adafruit_GC9A01A.h"

// Adafruit-Schriftart einbinden

#include "Fonts/FreeSans12pt7b.h"

// Name des RTC-Moduls (rtc)

RTC_DS3231 rtc;

#define TFT_CS 10

#define TFT_RST 8

#define TFT_DC 9

Adafruit_GC9A01A tft(TFT_CS, TFT_DC);

// Variablen des TFTs (Höhe, Breite, Radius)

const int MitteHoehe = tft.height() / 2;

const int MitteBreite = tft.width() / 2;

const int Radius = tft.width() / 2;

// Multiplikatoren für x- y-Positionen der Stunden, Minuten und Sekunden

float SekundePosX = 0, SekundePosY = 0, MinutePosX = 0, MinutePosY = 0, StundePosX = 0, StundePosY = 0;

float GradSekunden = 0, GradMinuten = 0, GradStunden = 0;

// x- y-Koordinaten für die Anzeige Stunden, Minuten und Sekunden

int SekundenZeigerX = MitteHoehe, SekundenZeigerY = MitteHoehe;

int MinutenZeigerX = MitteHoehe, MinutenZeigerY = MitteHoehe;

int StundenZeigerX = MitteHoehe, StundenZeigerY = MitteHoehe;

// Start wird nur beim ersten Start für den Aufbau des TFTs benötigt

bool Start = true;

// Variablen für die Markierungen und Punkte und Striche des Ziffernblatts

float PosX, PosY;

int PunktX, PunktY, PunktX1, PunktX2, PunktY1, PunktY2;

// Variablen für die Zeit

int Stunden, Minuten, Sekunden;

// Farben

#define SCHWARZ 0x0000

#define WEISS 0xFFFF

#define BLAU 0x001F

#define ROT 0xF800

#define GRUEN 0x07E0

#define CYAN 0x07FF

#define MAGENTA 0xF81F

#define GELB 0xFFE0

#define BRAUN 0x9A60

#define GRAU 0x7BEF

#define GRUENGELB 0xB7E0

#define DUNKELCYAN 0x03EF

#define ORANGE 0xFDA0

#define PINK 0xFE19

#define BORDEAUX 0xA000

#define HELLBLAU 0x867D

#define VIOLETT 0x915C

#define SILBER 0xC618

#define GOLD 0xFEA0

// Farben innerer Kreis, Randfarbe und Zeigerfarbe

// die Farben der Zeiger können aber auch individuell gesetzt werden

const int Kreisfarbe = SCHWARZ;

const int Zeigerfarbe = WEISS;

const int Randfarbe = BORDEAUX;

// true -> Sekundenzeiger nur als Kreis

bool SekundenzeigerKreis = false;

// Ziffern 12 3 6 9 anzeigen/nicht anzeigen

bool Ziffernanzeigen = true;

// Abstand zwischen Zeitpunkt der Kompilierung und tatsächlichem Start ausgleichen

int Zeitkorrektur = 10;

unsigned long Zeitmessung = 0;

Der setup-Teil

Nachdem die Zeit mit dem Zeitpunkt des Kompilierens gesetzt wurde, musst du vor einem erneutem Hochladen die Zeile 82 mit // versehen, ansonsten stimmt nach einem Stromausfall oder einem erneutem Einstecken der Stromzufuhr die Zeit nicht mehr.

void setup()
{
  Serial.begin(9600);
 
  tft.begin();
  tft.setRotation(0);
  tft.fillScreen(Kreisfarbe);
 
  // 4 Pixel breiter äußerer Rand, Farbe au der Farbpalette wählen
  tft.drawCircle(MitteHoehe, MitteBreite, Radius - 1, Randfarbe);
  tft.drawCircle(MitteHoehe, MitteBreite, Radius - 2, Randfarbe);
  tft.drawCircle(MitteHoehe, MitteBreite, Radius - 3, Randfarbe);
  tft.drawCircle(MitteHoehe, MitteBreite, Radius - 4, Randfarbe);
 
  // innere Fläche bis auf den Rand von 4 Pixeln vollständig löschen
  // wenn andere Farbe als äußerer Rand gewählt wird ergibt sich ein schmaler Rand
  tft.fillCircle(MitteHoehe, MitteBreite, Radius - 4, Kreisfarbe);
 
/*
    alle 30° Linie am Rand als Stundenmarkierung zeichnen
    DEG_TO_RAD (= PI/180 = 0.0174532925) -> Winkel in Bogenmaß umrechnen
    sin/cos berechnen die x-/y-Kordinaten des Punktes auf der Kreislinie
  */
  for (int i = 0; i < 360; i += 30)
  {
    PosX = cos((i - 90) * DEG_TO_RAD);
    PosY = sin((i - 90) * DEG_TO_RAD);
 
    // kurze Linien zeichnen, von 114 bis 100 vom äußeren Rand aus
    // Farbe individuell wählbar
    int PunktX1 = PosX * 110 + Radius;
    int PunktY1 = PosY * 110 + Radius;
    int PunktX2 = PosX * 100 + Radius;
    int PunktY2 = PosY * 100 + Radius;
 
    tft.drawLine(PunktX1, PunktY1, PunktX2, PunktY2, Zeigerfarbe);
    
    // keine Striche an der Position der Zahlen
    if (Ziffernanzeigen)
    {
      if (PunktX1 == 10 || PunktX1 == 120 || PunktX1 == 230)
      {
        tft.drawLine(PunktX1, PunktY1, PunktX2, PunktY2, Kreisfarbe);
      }  
    }  
  }
 
  // alle 6 Grad Punkte als Sekundenmarkierung zeichnen
  for (int i = 0; i < 360; i += 6)
  {
    PosX = cos((i - 90) * DEG_TO_RAD);
    PosY = sin((i - 90) * DEG_TO_RAD);
 
    // Positionen der Punkte
    // 108 -> Abstand vom Mittelpunkt
    PunktX = PosX * 108 + Radius;
    PunktY = PosY * 108 + Radius;
    tft.drawPixel(PunktX, PunktY, Zeigerfarbe);  
  }
 
  // Markierung 12 3 6 9
  if (Ziffernanzeigen)
  {
    tft.setFont(&FreeSans12pt7b);
    tft.setTextColor(Zeigerfarbe);
    tft.setCursor(tft.height() / 2 - 15, 25);
    tft.print("12");
    
    tft.setCursor(10, tft.height() / 2 + 7);
    tft.print("9");
    
    tft.setCursor(220, tft.height() / 2 + 10);
    tft.print("3");
  
    tft.setCursor(tft.height() / 2 - 7, 230);
    tft.print("6");
  }
 
  // RTC-Modul starten
  rtc.begin();

  // Zeit aus dem Zeitpunkt des Kompilierens synchronisieren
  rtc.adjust(DateTime(F(__DATE__), F(__TIME__)) + Zeitkorrektur);
 
  // aktuelle Zeit holen
  DateTime aktuell = rtc.now();
  Stunden = aktuell.hour();
  Minuten = aktuell.minute();
  Sekunden = aktuell.second();
  Zeitmessung = millis() + 1000;
}

void setup()

{

Serial.begin(9600);

tft.begin();

tft.setRotation(0);

tft.fillScreen(Kreisfarbe);

// 4 Pixel breiter äußerer Rand, Farbe au der Farbpalette wählen

tft.drawCircle(MitteHoehe, MitteBreite, Radius - 1, Randfarbe);

tft.drawCircle(MitteHoehe, MitteBreite, Radius - 2, Randfarbe);

tft.drawCircle(MitteHoehe, MitteBreite, Radius - 3, Randfarbe);

tft.drawCircle(MitteHoehe, MitteBreite, Radius - 4, Randfarbe);

// innere Fläche bis auf den Rand von 4 Pixeln vollständig löschen

// wenn andere Farbe als äußerer Rand gewählt wird ergibt sich ein schmaler Rand

tft.fillCircle(MitteHoehe, MitteBreite, Radius - 4, Kreisfarbe);

alle 30° Linie am Rand als Stundenmarkierung zeichnen

DEG_TO_RAD (= PI/180 = 0.0174532925) -> Winkel in Bogenmaß umrechnen

sin/cos berechnen die x-/y-Kordinaten des Punktes auf der Kreislinie

for (int i = 0; i < 360; i += 30)

{

PosX = cos((i - 90) * DEG_TO_RAD);

PosY = sin((i - 90) * DEG_TO_RAD);

// kurze Linien zeichnen, von 114 bis 100 vom äußeren Rand aus

// Farbe individuell wählbar

int PunktX1 = PosX * 110 + Radius;

int PunktY1 = PosY * 110 + Radius;

int PunktX2 = PosX * 100 + Radius;

int PunktY2 = PosY * 100 + Radius;

tft.drawLine(PunktX1, PunktY1, PunktX2, PunktY2, Zeigerfarbe);

// keine Striche an der Position der Zahlen

if (Ziffernanzeigen)

{

if (PunktX1 == 10 || PunktX1 == 120 || PunktX1 == 230)

{

tft.drawLine(PunktX1, PunktY1, PunktX2, PunktY2, Kreisfarbe);

}

// alle 6 Grad Punkte als Sekundenmarkierung zeichnen

for (int i = 0; i < 360; i += 6)

{

PosX = cos((i - 90) * DEG_TO_RAD);

PosY = sin((i - 90) * DEG_TO_RAD);

// Positionen der Punkte

// 108 -> Abstand vom Mittelpunkt

PunktX = PosX * 108 + Radius;

PunktY = PosY * 108 + Radius;

tft.drawPixel(PunktX, PunktY, Zeigerfarbe);

}

// Markierung 12 3 6 9

if (Ziffernanzeigen)

{

tft.setFont(&FreeSans12pt7b);

tft.setTextColor(Zeigerfarbe);

tft.setCursor(tft.height() / 2 - 15, 25);

tft.print("12");

tft.setCursor(10, tft.height() / 2 + 7);

tft.print("9");

tft.setCursor(220, tft.height() / 2 + 10);

tft.print("3");

tft.setCursor(tft.height() / 2 - 7, 230);

tft.print("6");

}

// RTC-Modul starten

rtc.begin();

// Zeit aus dem Zeitpunkt des Kompilierens synchronisieren

rtc.adjust(DateTime(F(__DATE__), F(__TIME__)) + Zeitkorrektur);

// aktuelle Zeit holen

DateTime aktuell = rtc.now();

Stunden = aktuell.hour();

Minuten = aktuell.minute();

Sekunden = aktuell.second();

Zeitmessung = millis() + 1000;

}

Der loop-Teil

void loop() 
{
  // aktuelle Zeit holen
  DateTime aktuell = rtc.now();

  // Sekunden weiter zählen
  if (Zeitmessung < millis()) 
  {
    Zeitmessung += 1000;
    Sekunden++;  
  
    if (Sekunden == 60) 
    { 
      DateTime aktuell = rtc.now(); 

      Stunden = aktuell.hour();
      Minuten = aktuell.minute();
      Sekunden = 0;
    }

    // Vorausberechnung der x- und y-Koordinaten
    // alle 6° eine Sekunde vorwärts
    GradSekunden = Sekunden * 6;    
  
    // alle 6° eine Minute vorwärts     
    GradMinuten = Minuten * 6; 

    // alle 30° eine Stunde vorwärts
    // 30 / 3600 = 0.0833333
    // sorgt dafür, dass der Stundenzeiger entsprechend 
    // der Anzahl der Minuten weiter "wandert"
    GradStunden = Stunden * 30 + GradMinuten * 0.0833333; 
    StundePosX = cos((GradStunden - 90) * DEG_TO_RAD);
    StundePosY = sin((GradStunden - 90) * DEG_TO_RAD);

    MinutePosX = cos((GradMinuten - 90) * DEG_TO_RAD) ;
    MinutePosY = sin((GradMinuten - 90) * DEG_TO_RAD);

    SekundePosX = cos((GradSekunden - 90) * DEG_TO_RAD);
    SekundePosY = sin((GradSekunden - 90) * DEG_TO_RAD);

    // nach jeder Minute Minuten-/Stundenzeiger löschen
    // oder einmalig beim Start der Anzeige
    if (Sekunden == 0 || Start) 
    {
      DateTime aktuell = rtc.now();

      // Zeit in Stunden, Minuten und Sekunden
      Stunden = aktuell.hour();
      Minuten = aktuell.minute();
      Sekunden = aktuell.second();

      Start = false;
      tft.drawLine(StundenZeigerX, StundenZeigerY, MitteHoehe, MitteHoehe + 1, Kreisfarbe);  

      // 62 Pixel -> Länge des Stundenzeigers
      // Mittelpunkt + 1 -> Mittelpunkt soll nicht gelöscht werden
      StundenZeigerX = StundePosX * 62 + MitteHoehe + 1;
      StundenZeigerY = StundePosY * 62 + MitteHoehe + 1;
      tft.drawLine(MinutenZeigerX, MinutenZeigerY, MitteHoehe, MitteHoehe + 1, Kreisfarbe);

      // 84 Pixel -> Länge des Minutenzeigers
      // Mittelpunkt + 1 -> Mittelpunkt soll nicht gelöscht werden
      MinutenZeigerX = MinutePosX * 84 + MitteHoehe;
      MinutenZeigerY = MinutePosY * 84 + MitteHoehe + 1;
    }

    // Sekundenzeiger löschen
    if (!SekundenzeigerKreis) tft.drawLine(SekundenZeigerX, SekundenZeigerY, MitteHoehe, MitteHoehe + 1, Kreisfarbe);

    // Kreis am Sekundenzeiger löschen, Radius 5
    tft.fillCircle(SekundenZeigerX, SekundenZeigerY, 5, Kreisfarbe);

    // 85 Pixel -> Länge des Sekundenzeigers
    SekundenZeigerX = SekundePosX * 85 + MitteHoehe + 1;
    SekundenZeigerY = SekundePosY * 85 + MitteHoehe + 1;

    // Zeiger neu zeichnen
    // Sekunden Linie nur anzeigen wenn SekundenzeigerKreis false
    if (!SekundenzeigerKreis) tft.drawLine(SekundenZeigerX, SekundenZeigerY, MitteHoehe, MitteHoehe + 1, ROT);
    
    // Minuten
    tft.drawLine(MinutenZeigerX, MinutenZeigerY, MitteHoehe, MitteHoehe + 1, Zeigerfarbe);

    // Stunden
    tft.drawLine(StundenZeigerX, StundenZeigerY, MitteHoehe, MitteHoehe + 1, Zeigerfarbe);

    // Kreis an der Spitze des Sekundenzeigers, Radius 5
    tft.fillCircle(SekundenZeigerX, SekundenZeigerY, 5, ROT);

    // Mittelpunkt zeichnen
    tft.fillCircle(MitteHoehe, MitteHoehe + 1, 3, Zeigerfarbe); 
  }
}

void loop()

{

// aktuelle Zeit holen

DateTime aktuell = rtc.now();

// Sekunden weiter zählen

if (Zeitmessung < millis())

{

Zeitmessung += 1000;

Sekunden++;

if (Sekunden == 60)

{

DateTime aktuell = rtc.now();

Stunden = aktuell.hour();

Minuten = aktuell.minute();

Sekunden = 0;

}

// Vorausberechnung der x- und y-Koordinaten

// alle 6° eine Sekunde vorwärts

GradSekunden = Sekunden * 6;

// alle 6° eine Minute vorwärts

GradMinuten = Minuten * 6;

// alle 30° eine Stunde vorwärts

// 30 / 3600 = 0.0833333

// sorgt dafür, dass der Stundenzeiger entsprechend

// der Anzahl der Minuten weiter "wandert"

GradStunden = Stunden * 30 + GradMinuten * 0.0833333;

StundePosX = cos((GradStunden - 90) * DEG_TO_RAD);

StundePosY = sin((GradStunden - 90) * DEG_TO_RAD);

MinutePosX = cos((GradMinuten - 90) * DEG_TO_RAD) ;

MinutePosY = sin((GradMinuten - 90) * DEG_TO_RAD);

SekundePosX = cos((GradSekunden - 90) * DEG_TO_RAD);

SekundePosY = sin((GradSekunden - 90) * DEG_TO_RAD);

// nach jeder Minute Minuten-/Stundenzeiger löschen

// oder einmalig beim Start der Anzeige

if (Sekunden == 0 || Start)

{

DateTime aktuell = rtc.now();

// Zeit in Stunden, Minuten und Sekunden

Stunden = aktuell.hour();

Minuten = aktuell.minute();

Sekunden = aktuell.second();

Start = false;

tft.drawLine(StundenZeigerX, StundenZeigerY, MitteHoehe, MitteHoehe + 1, Kreisfarbe);

// 62 Pixel -> Länge des Stundenzeigers

// Mittelpunkt + 1 -> Mittelpunkt soll nicht gelöscht werden

StundenZeigerX = StundePosX * 62 + MitteHoehe + 1;

StundenZeigerY = StundePosY * 62 + MitteHoehe + 1;

tft.drawLine(MinutenZeigerX, MinutenZeigerY, MitteHoehe, MitteHoehe + 1, Kreisfarbe);

// 84 Pixel -> Länge des Minutenzeigers

// Mittelpunkt + 1 -> Mittelpunkt soll nicht gelöscht werden

MinutenZeigerX = MinutePosX * 84 + MitteHoehe;

MinutenZeigerY = MinutePosY * 84 + MitteHoehe + 1;

}

// Sekundenzeiger löschen

if (!SekundenzeigerKreis) tft.drawLine(SekundenZeigerX, SekundenZeigerY, MitteHoehe, MitteHoehe + 1, Kreisfarbe);

// Kreis am Sekundenzeiger löschen, Radius 5

tft.fillCircle(SekundenZeigerX, SekundenZeigerY, 5, Kreisfarbe);

// 85 Pixel -> Länge des Sekundenzeigers

SekundenZeigerX = SekundePosX * 85 + MitteHoehe + 1;

SekundenZeigerY = SekundePosY * 85 + MitteHoehe + 1;

// Zeiger neu zeichnen

// Sekunden Linie nur anzeigen wenn SekundenzeigerKreis false

if (!SekundenzeigerKreis) tft.drawLine(SekundenZeigerX, SekundenZeigerY, MitteHoehe, MitteHoehe + 1, ROT);

// Minuten

tft.drawLine(MinutenZeigerX, MinutenZeigerY, MitteHoehe, MitteHoehe + 1, Zeigerfarbe);

// Stunden

tft.drawLine(StundenZeigerX, StundenZeigerY, MitteHoehe, MitteHoehe + 1, Zeigerfarbe);

// Kreis an der Spitze des Sekundenzeigers, Radius 5

tft.fillCircle(SekundenZeigerX, SekundenZeigerY, 5, ROT);

// Mittelpunkt zeichnen

tft.fillCircle(MitteHoehe, MitteHoehe + 1, 3, Zeigerfarbe);

}

Analoge Uhr mit TFT 240×240 Pixeln und RTC-Modul

Ziele des Projekts

Die Schaltpläne

Arduino UNO R3

Arduino Nano

Benötigte Bibliotheken

Das Programm

Bibliotheken und Variable

Der setup-Teil

Der loop-Teil

Ähnliche Projekte