1,77 Zoll TFT Display am Arduino UNO R3

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

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.

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

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.

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.

Anschluss des Displays an den Arduino

Das Display wird wie folgt am Mikrocontroller angeschlossen:

TFT Display	Arduino UNO R3
GND	GND
VCC	5V
SCK	digitaler Pin D13
SDA	digitaler Pin D11
RES	digitaler Pin D8
RS	digitaler Pin D9
CS	digitaler Pin D10
LEDA (Pin 8)	3.3V

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

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

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

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

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.

Beispiel 2 – Sensordaten anzeigen

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

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.

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 Sensor	Arduino UNO R3
+, VCC	5V
OUT	digitaler Pin D7
-, GND	GND

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)

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.

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

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.