Skip to content

Technik Blog

Programmieren | Arduino | ESP32 | MicroPython | Python | Raspberry Pi | Raspberry Pi Pico

Menu
  • Smarthome
  • Arduino
  • ESP32 & Co.
  • Raspberry Pi & Pico
  • Solo Mining
  • Über mich
  • Deutsch
  • English
Menu

1,77 Zoll TFT Display am Arduino UNO R3

Posted on 18. Februar 202210. März 2024 by Stefan Draeger

In diesem Beitrag möchte ich dir zeigen, wie du das 1,77 Zoll (4,5 cm) TFT Display am Arduino UNO R3 programmierst.

1,77 Zoll TFT Display am Arduino UNO R3
1,77 Zoll TFT Display am Arduino UNO R3

Ich habe dir bereits in einigen Beispielen OLED Displays in diversen Größen vorgestellt und einige kleine bis mittlere Projekte mit diesen gezeigt.

  • Arduino Projekt – Bodenfeuchtesensor & OLED Display
  • Raspberry PI Pico #7: geometrische Figuren am OLED Display
  • Seeeduino Nano mit M5Stack OLED UNIT SH1107

Der Vorteil des hier gezeigten TFT Displays ist, dass auf diesem mehrere Farben (RGB Spektrum) dargestellt werden können und somit sogar auf richtige Bilder möglich sind.

Vorderseite des 1.77 Zoll TFT Displays
Vorderseite des 1.77 Zoll TFT Displays
Rückseite des 1.77 Zoll TFT Displays
Rückseite des 1.77 Zoll TFT Displays

Die Idee zu diesem Beitrag kommt von einem Leser meines Blogs, welcher ein paar Fragen zur Programmierung eines solchen Displays hat.

  • Bezug des TFT Displays für den Arduino
    • Lieferumfang
  • Aufbau des TFT Displays
  • Anschluss des Displays an den Arduino
  • Programmieren des Displays in der Arduino IDE
  • Benötigte Bibliotheken
    • Installieren der Bibliothek Adafruit-ST7735 über den Bibliotheksverwalter
  • Beispiel 1 – „Hello World!“
  • Beispiel 2 – Sensordaten anzeigen
    • Erweitern der Schaltung um den DHT11 Sensor
    • Aufbau der Anzeige
  • Implementieren des DHT11 Sensors

Bezug des TFT Displays für den Arduino

Das TFT Display für diesen Beitrag habe ich bei ebay.de für knapp 8 € inkl. Versandkosten* erstanden. Du bekommst dieses und weitere TFT Displays auch auf aliexpress.com und sogar zu einem deutlich günstigeren Preis, jedoch mit einer sehr langen Lieferzeit und somit muss man abwägen, ob man warten kann oder möchte.

Hinweis von mir: Die mit einem Sternchen (*) markierten Links sind Affiliate-Links. Wenn du über diese Links einkaufst, erhalte ich eine kleine Provision, die dazu beiträgt, diesen Blog zu unterstützen. Der Preis für dich bleibt dabei unverändert. Vielen Dank für deine Unterstützung!

Lieferumfang

Der Lieferumfang des TFT Displays ist recht überschaubar, denn es wird lediglich das Display geliefert. Du musst dir also für den Anschluss an den Arduino noch zusätzlich ein paar Breadboardkabel besorgen.

Verpackung des TFT Displays
Verpackung des TFT Displays
Verpackung des TFT Displays
Verpackung des TFT Displays
Rückseite des 1.77 Zoll TFT Displays
Rückseite des 1.77 Zoll TFT Displays

Aufbau des TFT Displays

Das hier verwendete TFT Display wird per SPI Schnittstelle programmiert. Auf der Rückseite des Displays ist die vor gelötete Pinleiste von 1 bis 8 angebracht und es kann eine weitere angelötet werden, wobei die Pin 9 bis 14 abgegriffen werden können.

Pinout des TFT Displays
Pinout des TFT Displays

Anschluss des Displays an den Arduino

Das Display wird wie folgt am Mikrocontroller angeschlossen:

TFT DisplayArduino UNO R3
GNDGND
VCC5V
SCKdigitaler Pin D13
SDAdigitaler Pin D11
RESdigitaler Pin D8
RSdigitaler Pin D9
CSdigitaler Pin D10
LEDA (Pin 8)3.3V
Anschluss des TFT Displays an den Arduino UNO R3

Auf dem Bild siehst du einen Keystudio UNO welcher ein paar nette zusätzliche Features besitzt. Welche einen Aufbau mit Breadboardkabeln deutlich erleichtert.

Aufbau der Schaltung - 1.77 Zoll TFT Display am Arduino
Aufbau der Schaltung – 1.77 Zoll TFT Display am Arduino

Programmieren des Displays in der Arduino IDE

Benötigte Bibliotheken

Für die Programmierung des Displays verwende ich die Bibliothek „Adafruit ST7735“ welche du entweder vom GitHub Repository adafruit / Adafruit-ST7735-Library laden kannst oder einfach über den internen Bibliotheksverwalter der Arduino IDE.

Installieren der Bibliothek Adafruit-ST7735 über den Bibliotheksverwalter

Der einfachste Weg die benötigte Bibliothek „Adafruit-ST7735“ zu installieren ist über den Bibliotheksverwalter der Arduino IDE. In dem geöffneten Bibliotheksverwalter suchen wir zunächst nach „adafruit st7735“ (1). Und wählen im Eintrag „Adafruit ST7735 and ST7709 Library by Adafruit“ die Schaltfläche „Installieren“.

Schritt 1 - Auswahl der Bibliothek "Adafruit ST7735"
Schritt 1 – Auswahl der Bibliothek „Adafruit ST7735“

Es wird zusätzlich eine Bibliothek benötigt, welche wir ebenfalls installieren müssen und betätigen die Schaltfläche „Install all“ (3).

Schritt 2 - zusätzliche, benötigte Bibliothek installieren
Schritt 2 – zusätzliche, benötigte Bibliothek installieren

Bei erfolgreicher Installation wird der Text „INSTALLED“ (4) angezeigt und wir können den Bibliotheksverwalter über die Schaltfläche „Schließen“ (5) verlassen.

Schritt 3 - fertigstellen der Installion
Schritt 3 – fertigstellen der Installation

Beispiel 1 – „Hello World!“

Fangen wir mit einem einfachen Beispiel an.
Der bekannten Textzeile „Hello World!“.

Das hier verwendete TFT Display kann Texte & Formen im RGB Spektrum anzeigen und dieses wollen wir auch hier nutzen.

//Bibliotheken zum ansteuern des Displays
#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>
#include <SPI.h>

#define CS  10
#define RES  8
#define RS   9

#define SCK 13
#define SDA 11

Adafruit_ST7735 tft = Adafruit_ST7735(CS, RS, SDA, SCK, RES);

const uint16_t  Black        = 0x0000;
const uint16_t  Blue         = 0x001F;
const uint16_t  Red          = 0xF800;
const uint16_t  Green        = 0x07E0;
const uint16_t  Cyan         = 0x07FF;
const uint16_t  Magenta      = 0xF81F;
const uint16_t  Yellow       = 0xFFE0;
const uint16_t  White        = 0xFFFF;

uint16_t        Text_Color         = White;
uint16_t        Backround_Color    = Black;

void setup() {
  delay(250);
  tft.initR(INITR_BLACKTAB);
  //default Schriftart setzen
  tft.setFont();
  //Hintergrundfarbe setzen
  tft.fillScreen(Backround_Color);
}


void loop() {
  //ein gefülltes Rechteck an den Koordinaten
  //der Uptime zeichnen um den Wert zu überschreiben
  tft.fillRect(50, 25, 60, 50, Backround_Color);

  //setzen der Textfarbe
  tft.setTextColor(Text_Color);

  //an den Koordinaten X=10, Y=10
  //die Textzeile "Hello World!" schreiben
  tft.setCursor(10, 10);
  tft.print("Hello World!");

  //an den Koordinaten X=10, Y=30
  //die Textzeile "update" schreiben
  tft.setCursor(10, 30);
  tft.print("uptime");

  //an den Koordinaten X=50, Y=30
  //die Millisekunden seit dem Start des Mikrocontrollers schreiben
  tft.setCursor(50, 30);
  tft.print(millis());

  //eine Pause von 100ms.
  delay(100);
}

Auf dem Bild erkennst du, dass die Zeile „Hello World!“ ausgegeben wird, sowie die Zeit in Millisekunden seit dem Start des Mikrocontrollers.

Zeichenkette "Hello World!" auf dem TFT Display
Zeichenkette „Hello World!“ auf dem TFT Display

Beispiel 2 – Sensordaten anzeigen

Im nächsten Beispiel wollen wir nun die Sensordaten des DHT11 auf dem TFT Display anzeigen lassen.

DHT11 Sensor - Temperatur & rel. Luftfeuchtigkeit
DHT11 Sensor – Temperatur & rel. Luftfeuchtigkeit

Der DHT11 Sensor liefert die Daten für:

  • Temperatur (Celsius / Fahrenheit),
  • rel. Luftfeuchtigkeit

Wenn du genauere Messergebnisse benötigst, dann empfehle ich dir den DHT22 Sensor. Dieser Sensor ist ziemlich baugleich.

DHT22 Sensor
DHT22 Sensor

Erweitern der Schaltung um den DHT11 Sensor

Der verwendete DHT11 Sensor hat drei Pins welche in meinem Fall mit „+“ für VCC, „OUT“ für den digitalen Pin und „-“ für GND beschriftet sind.

DHT22 SensorArduino UNO R3
+, VCC5V
OUTdigitaler Pin D7
-, GNDGND

Aufbau der Anzeige

Da man auf dem Display nicht nur Text, sondern auch geometrische Formen anzeigen lassen kann, möchte ich mir dieses Display nun in ein paar Segmente aufteilen, um in diese die Informationen des Sensors anzeigen zu lassen.

  • in der oberen Zeile wird der Titel angezeigt, darunter
  • links, die Temperatur in Celsius,
  • rechts, die Temperatur in Fahrenheit, darunter
  • die relative Luftfeuchtigkeit in Prozent und wiederum darunter
  • den aktuellen Zeitstempel (derzeit als festen Wert)
Aufbau der Anzeige auf dem TFT Display für den DHT11 Sensor
Aufbau der Anzeige auf dem TFT Display für den DHT11 Sensor

Der Code für den Aufbau der Segmente ist wie folgt:

//Bibliotheken zum ansteuern des Displays
#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>
#include <SPI.h>

#define CS  10
#define RES  8
#define RS   9

#define SCK 13
#define SDA 11

Adafruit_ST7735 tft = Adafruit_ST7735(CS, RS, SDA, SCK, RES);

const uint16_t  Black        = 0x0000;
const uint16_t  Blue         = 0x001F;
const uint16_t  Red          = 0xF800;
const uint16_t  Green        = 0x07E0;
const uint16_t  Cyan         = 0x07FF;
const uint16_t  Magenta      = 0xF81F;
const uint16_t  Yellow       = 0xFFE0;
const uint16_t  White        = 0xFFFF;

uint16_t        Text_Color         = White;
uint16_t        Backround_Color    = Black;

void drawFrame();

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

  tft.initR(INITR_BLACKTAB);
  //default Schriftart setzen
  tft.setFont();
  //Hintergrundfarbe setzen
  tft.fillScreen(Backround_Color);

  drawFrame();
}

void loop() {
  //bleibt leer
}

void drawFrame() {
  tft.drawRect(2, 2, 124, 156, Blue);
  tft.drawLine(65, 20, 65, 80, Blue);
  tft.drawLine(2, 20, 124, 20, Blue);
  tft.drawLine(2, 80, 124, 80, Blue);
  tft.drawLine(2, 140, 124, 140, Blue);
}

Implementieren des DHT11 Sensors

Den DHT11 Sensor habe ich dir bereits in einigen Beiträgen vorgestellt und gezeigt, wie die Sensordaten ausgelesen werden können.

  • Arduino Lektion 6: Sensor DHT11, Temperatur und relative Luftfeuchtigkeit messen
  • Wemos D1 mini Shield: DHT11 Sensor
  • WEMOS D1 – WLAN Thermometer mit DHT11 Sensor

Zum Auslesen der Sensordaten verwende ich die Bibliothek „DHT sensor library“ von Adafruit.

Eintrag für die "DHT sensor library" im Bibliotheksverwalter
Eintrag für die „DHT sensor library“ im Bibliotheksverwalter

//Bibliotheken zum ansteuern des Displays
#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>
#include <SPI.h>

//Bibliothek zum ansteuern des DHT11 Sensors
#include "DHT.h"

#define CS  10
#define RES  8
#define RS   9

#define SCK 13
#define SDA 11

Adafruit_ST7735 tft = Adafruit_ST7735(CS, RS, SDA, SCK, RES);

#define DHTPIN 7
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);

const uint16_t  Black        = 0x0000;
const uint16_t  Blue         = 0x001F;
const uint16_t  Red          = 0xF800;
const uint16_t  Green        = 0x07E0;
const uint16_t  Cyan         = 0x07FF;
const uint16_t  Magenta      = 0xF81F;
const uint16_t  Yellow       = 0xFFE0;
const uint16_t  White        = 0xFFFF;

uint16_t        Text_Color         = White;
uint16_t        Backround_Color    = Black;

void drawFrame();
void drawHeadline();
void drawDateTime();
void drawCelsiusRect();
void drawFahrenheitRect();
void drawHumidityRect();

void drawClearValueRect();
void drawSensorValues();

void setup() {
  Serial.begin(9600);
  delay(250);
  dht.begin();

  tft.initR(INITR_BLACKTAB);
  //default Schriftart setzen
  tft.setFont();
  //Hintergrundfarbe setzen
  tft.fillScreen(Backround_Color);
  drawFrame();
  drawHeadline();
  drawDateTime("16.02.2022 18:17");
  drawCelsiusRect();
  drawFahrenheitRect();
  drawHumidityRect();

  drawClearValueRect();
  drawSensorValues();
}


void loop() {
  drawSensorValues();
  delay(5000);
}

void drawFrame() {
  tft.drawRect(2, 2, 124, 156, Blue);
  tft.drawLine(65, 20, 65, 80, Blue);
  tft.drawLine(2, 20, 124, 20, Blue);
  tft.drawLine(2, 80, 124, 80, Blue);
  tft.drawLine(2, 140, 124, 140, Blue);
}

void drawHeadline() {
  tft.setTextSize(1);
  tft.setTextColor(Text_Color);
  tft.setCursor(18, 8);
  tft.print("DHT11 Sensordaten");
}

void drawDateTime(String timestamp) {
  tft.setTextSize(1);
  tft.setTextColor(Text_Color);
  tft.setCursor(14, 146);
  tft.print(timestamp);
}

void drawCelsiusRect() {
  tft.drawChar(31, 25, 247, Cyan, Backround_Color, 2);
  tft.setTextSize(2);
  tft.setTextColor(Cyan);
  tft.setCursor(48, 25);
  tft.print("C");
}
void drawFahrenheitRect() {
  tft.drawChar(93, 25, 247, Magenta, Backround_Color, 2);
  tft.setTextSize(2);
  tft.setTextColor(Magenta);
  tft.setCursor(110, 25);
  tft.print("F");
}
void drawHumidityRect() {
  tft.setTextSize(2);
  tft.setTextColor(Green);
  tft.setCursor(110, 85);
  tft.print("%");
}

void drawClearValueRect() {
  tft.fillRect(3, 45, 60, 30, Backround_Color);
  tft.fillRect(68, 45, 56, 30, Backround_Color);
  tft.fillRect(3, 107, 120, 30, Backround_Color);
}

void drawSensorValues() {
  float humidityValue = dht.readHumidity();
  float tempCelsius = dht.readTemperature();
  float tempFahrenheit = dht.readTemperature(true);

  if (isnan(humidityValue) || isnan(tempCelsius) || isnan(tempFahrenheit)) {
    return;
  }

  Serial.println(humidityValue);
  Serial.println(tempCelsius);
  Serial.println(tempFahrenheit);

  drawClearValueRect();

  tft.setTextSize(2);

  tft.setTextColor(Cyan);
  tft.setCursor(13, 55);
  tft.print(String(tempCelsius, 1));

  tft.setTextColor(Magenta);
  tft.setCursor(73, 55);
  tft.print(String(tempFahrenheit, 1));

  tft.setTextColor(Green);
  tft.setCursor(45, 113);
  tft.print(String(humidityValue, 1));
}

Hier nun das Ergebnis. Auf dem Display werden nachfolgende Daten angezeigt:

  • Temperatur in Celsius & Fahrenheit, sowie
  • die rel. Luftfeuchtigkeit
DHT11 Sensor & 1.8" TFT Display am Arduino UNO
DHT11 Sensor & 1.8″ TFT Display am Arduino UNO

Das Datum im unteren Bereich ist als fester Wert hinterlegt, hier könnte man nun eine RTC anschließen und damit dann auch die Uhrzeit abrufen. Oder man nutzt einen Mikrocontroller mit ESP Chip und kann dann von einem NTP Server die Daten abrufen.

1 thought on “1,77 Zoll TFT Display am Arduino UNO R3”

  1. Hermann sagt:
    18. Mai 2025 um 23:27 Uhr

    Hallo
    ich habe mir den 1,77 zoll tft monitor gekauft
    richtig angeklemmt und der code ist auch 1 zu 1 übernommen aber der Kontrast ist überhaupt nicht richtig, alles ganz schwach zu erkennen . ich besitze den Arduino uno R3. können sie mir eine tipp geben?

    LG

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Fragen oder Feedback?

Du hast eine Idee, brauchst Hilfe oder möchtest Feedback loswerden?
Support-Ticket erstellen

Newsletter abonnieren

Bleib auf dem Laufenden: Erhalte regelmäßig Updates zu neuen Projekten, Tutorials und Tipps rund um Arduino, ESP32 und mehr – direkt in dein Postfach.

Jetzt Newsletter abonnieren

Unterstütze meinen Blog

Wenn dir meine Inhalte gefallen, freue ich mich über deine Unterstützung auf Tipeee.
So hilfst du mit, den Blog am Leben zu halten und neue Beiträge zu ermöglichen.

draeger-it.blog auf Tipeee unterstützen

Vielen Dank für deinen Support!
– Stefan Draeger

Kategorien

Tools

  • Unix-Zeitstempel-Rechner
  • ASCII Tabelle
  • Spannung, Strom, Widerstand und Leistung berechnen
  • Widerstandsrechner
  • 8×8 LED Matrix Tool
  • 8×16 LED Matrix Modul von Keyestudio
  • 16×16 LED Matrix – Generator

Links

Blogverzeichnis Bloggerei.de TopBlogs.de das Original - Blogverzeichnis | Blog Top Liste Blogverzeichnis trusted-blogs.com

Stefan Draeger
Königsberger Str. 13
38364 Schöningen

Tel.: 01778501273
E-Mail: info@draeger-it.blog

Folge mir auf

  • Impressum
  • Datenschutzerklärung
  • Disclaimer
  • Cookie-Richtlinie (EU)
©2025 Technik Blog | Built using WordPress and Responsive Blogily theme by Superb
Cookie-Zustimmung verwalten
Wir verwenden Technologien wie Cookies, um Geräteinformationen zu speichern und/oder darauf zuzugreifen. Wir tun dies, um das Surferlebnis zu verbessern und um personalisierte Werbung anzuzeigen. Wenn Sie diesen Technologien zustimmen, können wir Daten wie das Surfverhalten oder eindeutige IDs auf dieser Website verarbeiten. Wenn Sie Ihre Zustimmung nicht erteilen oder zurückziehen, können bestimmte Funktionen beeinträchtigt werden.
Funktional Immer aktiv
Die technische Speicherung oder der Zugang ist unbedingt erforderlich für den rechtmäßigen Zweck, die Nutzung eines bestimmten Dienstes zu ermöglichen, der vom Teilnehmer oder Nutzer ausdrücklich gewünscht wird, oder für den alleinigen Zweck, die Übertragung einer Nachricht über ein elektronisches Kommunikationsnetz durchzuführen.
Vorlieben
Die technische Speicherung oder der Zugriff ist für den rechtmäßigen Zweck der Speicherung von Präferenzen erforderlich, die nicht vom Abonnenten oder Benutzer angefordert wurden.
Statistiken
Die technische Speicherung oder der Zugriff, der ausschließlich zu statistischen Zwecken erfolgt. Die technische Speicherung oder der Zugriff, der ausschließlich zu anonymen statistischen Zwecken verwendet wird. Ohne eine Vorladung, die freiwillige Zustimmung deines Internetdienstanbieters oder zusätzliche Aufzeichnungen von Dritten können die zu diesem Zweck gespeicherten oder abgerufenen Informationen allein in der Regel nicht dazu verwendet werden, dich zu identifizieren.
Marketing
Die technische Speicherung oder der Zugriff ist erforderlich, um Nutzerprofile zu erstellen, um Werbung zu versenden oder um den Nutzer auf einer Website oder über mehrere Websites hinweg zu ähnlichen Marketingzwecken zu verfolgen.
Optionen verwalten Dienste verwalten Verwalten von {vendor_count}-Lieferanten Lese mehr über diese Zwecke
Einstellungen anzeigen
{title} {title} {title}