Fotoschau mit TFT-Shield – Projekte für Arduino und ESP32-Mikrocontroller

Inhalt

6 Minuten

Ziel des Projekts

Es wird ein sogenanntes Shield verwendet, es wird einfach auf den Arduino UNO R3/UNO R4 aufgesteckt. Das darauf montierte TFT verfügt über 320×240 Pixel.
Auf die Mini-SD-Karte werden Fotos gespeichert, sie werden mit einem dazu gehörigen Text auf dem TFT angezeigt.

Das Programm funktioniert nur mit einem Shield, das die Standard-Pins (⇒SPI 10 und 9 und SD-CS 4) verwendet.
Der UNO R3 ist für dieses Shield insofern nur bedingt geeignet, weil er aufgrund des limitierten Speichers nur eine begrenzte Anzahl von Fotos anzeigen kann.

Daneben gibt es auch TFTs mit parallelem Anschluss, sie können mit diesem Programm nicht verwendet werden. Für den UNO R3 sind sie aber die bessere Wahl, weil sie die Fotos einzeln Pixel für Pixel lesen und anzeigen.

⇒Beispielprogramm

Das Programm im Film

Benötigte Bibliotheken

Achtung

Mit der Bibliothek Adafruit_Imagereader wird die Bibliothek SdFat_-_Adafruit_Fork ebenfalls als abhängige Bibliothek installiert.
Wurde zuvor bereits die Bibliothek SdFat installiert, führt das zu einem Konflikt.
Die Deinstallation der Bibliothek SdFat löst das Problem.

Fotos zum Download


koeln.bmp	strand.bmp	berlin_olympia.bmp	walhalla.bmp	dresden_frauenkirche.bmp

chartres.bmp	gaios.bmp	braunwald.bmp	koeln_deutz.bmp	dhuenntalsperre.bmp

Fotos erstellen

Du benötigst eine Mini-SD-Karte, sie muss mit FAT-32 formatiert sein. Bei neu gekauften SD-Karten ist das in der Regel der Fall. Fotos dürfen maximal das Format von 320×240 Pixeln haben und müssen im Format bmp vorliegen. Du kannst beliebige Fotos skalieren und entsprechend abspeichern.

Ich verwende hierzu das Programm GIMP. Beachte die notwendigen Einstellungen beim Speichern des Bildes.

Natürlich darf das Bild auch kleiner als 320×240 Pixel sein. Bei der Funktion drawBMP kannst du die Startposition auf der x- und y-Achse festlegen.

Das Programm

#include "Adafruit_ILI9341.h"
#include "SdFat.h"
#include "Adafruit_ImageReader.h"

// CS-Pin SD-Karte
#define SD_CS 4    

// Pins TFT
#define TFT_CS 10  
#define TFT_DC 9   

// Dateisystem SD-Karte
SdFat SD;              

// Objekt des Kartenlesers wird an das Dateisystem der SD-Karte übertragen
Adafruit_ImageReader reader(SD);

Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC);
Adafruit_Image Bild;  

ImageReturnCode Status;

int Intervall = 2000;

void setup() 
{
  // TFT starten
  tft.begin();

  // SD-Karte starten
  SD.begin(SD_CS);

  tft.setRotation(3);  
  tft.fillScreen(0);
  tft.setTextSize(2);
  tft.setTextColor(ILI9341_WHITE);
}

void loop() 
{
  // Bild laden
  // alle Dateien befinden sich im root-Verzeichnis /
  Status = reader.loadBMP("/koeln.bmp", Bild);

  // Bild anzeigen
  // Parameter: Dateiname, tft, StartpositionX, StartpositionY
  reader.drawBMP("koeln.bmp", tft, 0, 0);
  tft.setCursor(10, 220);
  tft.print("K");

  // ö = 0x94
  tft.write(0x94);
  tft.println("ln");
  delay(Intervall);  
  tft.fillScreen(0);

  Status = reader.loadBMP("/dresden_bruecke.bmp", Bild);
  reader.drawBMP("dresden_bruecke.bmp", tft, 0, 0);
  tft.setCursor(10, 220);
  tft.println("Dresden 'Blaues Wunder'");
  delay(Intervall);
  tft.fillScreen(0);

  Status = reader.loadBMP("/overath_Bahnhof.bmp", Bild);
  reader.drawBMP("overath_Bahnhof.bmp", tft, 0, 0);
  tft.setCursor(10, 220);
  tft.println("Overath Bahnhof");
  delay(Intervall);
  tft.fillScreen(0);

  Status = reader.loadBMP("/dresden_frauenkirche.bmp", Bild);
  reader.drawBMP("dresden_frauenkirche.bmp", tft, 0, 0);
  tft.setCursor(10, 220);
  tft.println("Dresden Frauenkirche");
  delay(Intervall);
  tft.fillScreen(0);

  Status = reader.loadBMP("/braunwald.bmp", Bild);
  reader.drawBMP("braunwald.bmp", tft, 0, 0);
  tft.setCursor(10, 220);
  tft.println("Braunwald/Schweiz");
  delay(Intervall);
  tft.fillScreen(0);

  Status = reader.loadBMP("/chartres.bmp", Bild);
  reader.drawBMP("chartres.bmp", tft, 0, 0);
  tft.setCursor(10, 220);
  tft.println("Chartres Kathedrale");
  delay(Intervall);
  tft.fillScreen(0);

  Status = reader.loadBMP("/strand.bmp", Bild);
  reader.drawBMP("strand.bmp", tft, 0, 0);
  tft.setCursor(10, 220);
  tft.println("Strand Algarve");
  delay(Intervall);
  tft.fillScreen(0);

  Status = reader.loadBMP("/duenen_ibiza.bmp", Bild);
  reader.drawBMP("duenen_ibiza.bmp", tft, 0, 0);
  tft.setCursor(10, 220);
  tft.print("D");

  // ü = 0x81
  tft.write(0x81);
  tft.print("nen Ibiza");
  delay(Intervall);
  tft.fillScreen(0);

  Status = reader.loadBMP("/lindos.bmp", Bild);
  reader.drawBMP("lindos.bmp", tft, 0, 0);
  tft.setCursor(10, 220);
  tft.print("Lindos/Rhodos");
  delay(Intervall);
  tft.fillScreen(0);

  Status = reader.loadBMP("/see.bmp", Bild);
  reader.drawBMP("see.bmp", tft, 0, 0);
  tft.setCursor(10, 220);
  tft.print("See bei Innsbruck");
  delay(Intervall);
  tft.fillScreen(0);

  Status = reader.loadBMP("/uni_bonn.bmp", Bild);
  reader.drawBMP("uni_bonn.bmp", tft, 0, 0);
  tft.setCursor(10, 220);
  tft.print("Bonn Uni");
  delay(Intervall);
  tft.fillScreen(0);

  Status = reader.loadBMP("/berlin_olympia.bmp", Bild);
  reader.drawBMP("berlin_olympia.bmp", tft, 0, 0);
  tft.setCursor(10, 220);
  tft.print("Berlin Olympiastatdion");
  delay(Intervall);
  tft.fillScreen(0);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

#include "Adafruit_ILI9341.h"

#include "SdFat.h"

#include "Adafruit_ImageReader.h"

// CS-Pin SD-Karte

#define SD_CS 4

// Pins TFT

#define TFT_CS 10

#define TFT_DC 9

// Dateisystem SD-Karte

SdFat SD;

// Objekt des Kartenlesers wird an das Dateisystem der SD-Karte übertragen

Adafruit_ImageReader reader(SD);

Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC);

Adafruit_Image Bild;

ImageReturnCode Status;

int Intervall = 2000;

void setup()

{

// TFT starten

tft.begin();

// SD-Karte starten

SD.begin(SD_CS);

tft.setRotation(3);

tft.fillScreen(0);

tft.setTextSize(2);

tft.setTextColor(ILI9341_WHITE);

}

void loop()

{

// Bild laden

// alle Dateien befinden sich im root-Verzeichnis /

Status = reader.loadBMP("/koeln.bmp", Bild);

// Bild anzeigen

// Parameter: Dateiname, tft, StartpositionX, StartpositionY

reader.drawBMP("koeln.bmp", tft, 0, 0);

tft.setCursor(10, 220);

tft.print("K");

// ö = 0x94

tft.write(0x94);

tft.println("ln");

delay(Intervall);

tft.fillScreen(0);

Status = reader.loadBMP("/dresden_bruecke.bmp", Bild);

reader.drawBMP("dresden_bruecke.bmp", tft, 0, 0);

tft.setCursor(10, 220);

tft.println("Dresden 'Blaues Wunder'");

delay(Intervall);

tft.fillScreen(0);

Status = reader.loadBMP("/overath_Bahnhof.bmp", Bild);

reader.drawBMP("overath_Bahnhof.bmp", tft, 0, 0);

tft.setCursor(10, 220);

tft.println("Overath Bahnhof");

delay(Intervall);

tft.fillScreen(0);

Status = reader.loadBMP("/dresden_frauenkirche.bmp", Bild);

reader.drawBMP("dresden_frauenkirche.bmp", tft, 0, 0);

tft.setCursor(10, 220);

tft.println("Dresden Frauenkirche");

delay(Intervall);

tft.fillScreen(0);

Status = reader.loadBMP("/braunwald.bmp", Bild);

reader.drawBMP("braunwald.bmp", tft, 0, 0);

tft.setCursor(10, 220);

tft.println("Braunwald/Schweiz");

delay(Intervall);

tft.fillScreen(0);

Status = reader.loadBMP("/chartres.bmp", Bild);

reader.drawBMP("chartres.bmp", tft, 0, 0);

tft.setCursor(10, 220);

tft.println("Chartres Kathedrale");

delay(Intervall);

tft.fillScreen(0);

Status = reader.loadBMP("/strand.bmp", Bild);

reader.drawBMP("strand.bmp", tft, 0, 0);

tft.setCursor(10, 220);

tft.println("Strand Algarve");

delay(Intervall);

tft.fillScreen(0);

Status = reader.loadBMP("/duenen_ibiza.bmp", Bild);

reader.drawBMP("duenen_ibiza.bmp", tft, 0, 0);

tft.setCursor(10, 220);

tft.print("D");

// ü = 0x81

tft.write(0x81);

tft.print("nen Ibiza");

delay(Intervall);

tft.fillScreen(0);

Status = reader.loadBMP("/lindos.bmp", Bild);

reader.drawBMP("lindos.bmp", tft, 0, 0);

tft.setCursor(10, 220);

tft.print("Lindos/Rhodos");

delay(Intervall);

tft.fillScreen(0);

Status = reader.loadBMP("/see.bmp", Bild);

reader.drawBMP("see.bmp", tft, 0, 0);

tft.setCursor(10, 220);

tft.print("See bei Innsbruck");

delay(Intervall);

tft.fillScreen(0);

Status = reader.loadBMP("/uni_bonn.bmp", Bild);

reader.drawBMP("uni_bonn.bmp", tft, 0, 0);

tft.setCursor(10, 220);

tft.print("Bonn Uni");

delay(Intervall);

tft.fillScreen(0);

Status = reader.loadBMP("/berlin_olympia.bmp", Bild);

reader.drawBMP("berlin_olympia.bmp", tft, 0, 0);

tft.setCursor(10, 220);

tft.print("Berlin Olympiastatdion");

delay(Intervall);

tft.fillScreen(0);

}

Letzte Aktualisierung: Juni 19, 2026 @ 9:16