ST7735 1.8 Zoll TFT-Display mit Arduino ansteuern: Farbgrafiken, Diagramme & Mini-Dashboard

Warum ein ST7735 TFT statt OLED?

Kleine OLED-Displays wie das SSD1306 sind super für Textausgaben – aber sie sind monochrom und mit 128x64 Pixeln schnell voll. Das ST7735 spielt eine Klasse darüber: 128x160 Pixel, echte Farben im RGB565-Format und dank IPS-Panel ein stabiler Blickwinkel ohne Farbverfälschung. Gleichzeitig bleibt es mit dem SPI-Interface sparsam bei den Pins und läuft problemlos am Arduino UNO, Nano oder ESP32.

Typische Einsatzgebiete: Wetterstationen mit farbigen Icons, Messgeräte mit Live-Diagrammen, Statusanzeigen für Smart-Home-Projekte oder kleine Spiele. Überall dort, wo ein Zahlenwert allein nicht reicht und du auf einen Blick erkennen willst, was los ist.

Was du brauchst

Verkabelung: ST7735 am Arduino UNO

Das Display nutzt Hardware-SPI – SCK und SDA (MOSI) liegen beim UNO fest auf Pin 13 und 11. Die drei Steuerleitungen CS, DC und RES kannst du frei wählen, wir nehmen die gängige Belegung 10/9/8. Die meisten ST7735-Module haben einen Spannungsregler und Pegelanpassung an Bord und vertragen daher 5V – ein Blick auf die Modulbeschriftung (z. B. „VCC 3.3V/5V“) schadet trotzdem nie.

Code 1: Display initialisieren und Text ausgeben

Der erste Sketch prüft, ob alles richtig verkabelt ist: Display initialisieren, Hintergrund füllen, Text in verschiedenen Größen und Farben ausgeben.

#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>
#include <SPI.h>

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

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

void setup() {
  // INITR_BLACKTAB passt fuer die meisten 1.8" Module,
  // bei Farbstich alternativ INITR_GREENTAB testen
  tft.initR(INITR_BLACKTAB);
  tft.setRotation(1); // Querformat, USB-Buchse links
  tft.fillScreen(ST77XX_BLACK);

  tft.setTextColor(ST77XX_WHITE);
  tft.setTextSize(2);
  tft.setCursor(10, 10);
  tft.print("MAKEROO");

  tft.setTextColor(ST77XX_CYAN);
  tft.setTextSize(1);
  tft.setCursor(10, 35);
  tft.print("ST7735 laeuft!");

  // Eigene Farbe mischen: Orange aus RGB
  uint16_t orange = tft.color565(255, 140, 0);
  tft.setTextColor(orange);
  tft.setCursor(10, 50);
  tft.print("128x160 Pixel in Farbe");
}

void loop() {
}

Wenn du jetzt weißen und cyanfarbenen Text auf schwarzem Grund siehst, sitzt die Verkabelung. Zeigt das Display nur Weiß oder bleibt schwarz, wirf einen Blick in den Troubleshooting-Abschnitt unten.

Code 2: Formen, Linien und Farbverläufe zeichnen

Die GFX-Bibliothek bringt alle Grundformen mit: Linien, Rechtecke, Kreise, Dreiecke – jeweils als Umriss oder gefüllt. Dieser Sketch zeichnet ein kleines Demo-Bild mit einem Farbverlauf als Hintergrundbalken.

#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>
#include <SPI.h>

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

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

void setup() {
  tft.initR(INITR_BLACKTAB);
  tft.setRotation(1);
  tft.fillScreen(ST77XX_BLACK);

  // Farbverlauf: 160 vertikale Linien von Blau nach Rot
  for (int x = 0; x < 160; x++) {
    uint8_t rot  = map(x, 0, 159, 0, 255);
    uint8_t blau = map(x, 0, 159, 255, 0);
    tft.drawFastVLine(x, 0, 30, tft.color565(rot, 0, blau));
  }

  // Grundformen
  tft.drawRect(10, 40, 40, 30, ST77XX_YELLOW);      // Rechteck-Umriss
  tft.fillRoundRect(60, 40, 40, 30, 5, ST77XX_GREEN); // gefuellt, runde Ecken
  tft.drawCircle(130, 55, 15, ST77XX_CYAN);          // Kreis-Umriss
  tft.fillTriangle(20, 110, 45, 80, 70, 110, ST77XX_MAGENTA);
  tft.drawLine(80, 80, 150, 115, ST77XX_WHITE);

  tft.setTextColor(ST77XX_WHITE);
  tft.setCursor(10, 118);
  tft.print("GFX-Grundformen Demo");
}

void loop() {
}

Code 3: Live-Dashboard mit Balkendiagramm

Jetzt wird es praktisch: Dieser Sketch liest einen Analogwert (z. B. ein Poti oder einen analogen Sensor an A0) und zeigt ihn als Zahl und als laufend aktualisiertes Balkendiagramm an – ganz ohne Flackern, weil nur die geänderten Bereiche neu gezeichnet werden.

#include <Adafruit_GFX.h>
#include <Adafruit_ST7735.h>
#include <SPI.h>

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

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

int letzterBalken = -1;

void setup() {
  tft.initR(INITR_BLACKTAB);
  tft.setRotation(1);
  tft.fillScreen(ST77XX_BLACK);

  // Statische Elemente nur einmal zeichnen
  tft.setTextColor(ST77XX_WHITE);
  tft.setTextSize(1);
  tft.setCursor(10, 8);
  tft.print("Sensor-Dashboard");
  tft.drawFastHLine(0, 20, 160, ST77XX_BLUE);
  tft.drawRect(10, 90, 140, 20, ST77XX_WHITE); // Rahmen fuer Balken
}

void loop() {
  int roh = analogRead(SENSOR_PIN);          // 0..1023
  int balken = map(roh, 0, 1023, 0, 138);    // Breite im Rahmen
  int prozent = map(roh, 0, 1023, 0, 100);

  // Zahlenwert aktualisieren (alten Bereich loeschen)
  tft.fillRect(10, 35, 140, 30, ST77XX_BLACK);
  tft.setTextSize(3);
  tft.setTextColor(ST77XX_GREEN);
  tft.setCursor(10, 35);
  tft.print(prozent);
  tft.setTextSize(2);
  tft.print(" %");

  // Balken nur neu zeichnen, wenn er sich geaendert hat
  if (balken != letzterBalken) {
    if (balken < letzterBalken) {
      tft.fillRect(11 + balken, 91, 138 - balken, 18, ST77XX_BLACK);
    }
    uint16_t farbe = (prozent > 80) ? ST77XX_RED :
                     (prozent > 50) ? ST77XX_YELLOW : ST77XX_GREEN;
    tft.fillRect(11, 91, balken, 18, farbe);
    letzterBalken = balken;
  }

  delay(100);
}

Der Trick für die ruhige Anzeige: Statische Elemente wie Überschrift und Rahmen werden nur einmal im setup() gezeichnet. Im loop() wird lediglich der Zahlenbereich gelöscht und neu beschrieben, und der Balken wächst oder schrumpft nur um die Differenz.

Praxistipps

Troubleshooting