Fotoschau mit ESP32, TFT und SD-Kartenleser – Projekte für Arduino und ESP32-Mikrocontroller

Inhalt

10 Minuten

Ziele des Projekts

Fotos von einem SD-Kartenleser laden und auf einem TFT anzeigen
Beschreibung zum Foto anzeigen

Verwendete Hardware

Pinbelegung des TFT-Displays mit 480×320 Pixeln

Die Pins für den SD-Kartenleser (im Beispiel: SD-CS und SDO) müssen in der Pin-Leiste vorhanden sein:

Pinbelegung am ESP32-Wroom

SD_CS: 15 (SD-Kartenleser)
SDO (MISO): 19 (SD-Kartenleser)
LED: 5V
SCK: 18
SDI (MOSI): 23
LCD_RS (DC): 2
LCD_RST (RST): 4
LCD_CS (CS): 5
GND
VCC: 5V

Die Reihenfolge der Pins kann unterschiedlich sein. Achte auf die Beschriftung der Pins.

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 480×320 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 480×320 Pixel sein. Bei der Funktion drawBMP kannst du die Startposition auf der x- und y-Achse festlegen.

Fotos 480×320 Pixel

alle Fotos Hartmut Waller


koeln.bmp	overath_bahnhof.bmp	lindos.bmp	braunwald.bmp	dresden_frauenkirche.bmp

chartres.bmp	strand.bmp	berlin_olympia.bmp	uni_bonn.bmp	duenen.bmp

st_michelle.bmp	ijlst.bmp	monschau.bmp	gaios.bmp	koeln_deutz.bmp

Sowohl das TFT-Display als auch der SD-Kartenleser verwenden den SPI-Bus. Jedes Gerät benötigt aber eigene Datenleitungen. Der ESP32-Wroom verfügt über zwei SPI-Busse, die gleichzeitig nutzbar sind.

Benötigte Bibliotheken

Die verwendete Bibliothek für das Display mit 480×320 Pixeln kann nicht über die Bibliotheksverwaltung installiert werden. Sie muss herunter geladen werden:
https://github.com/prenticedavid/Adafruit_ST7796S_kbv
und mit

Sketch -> Bibliothek einbinden -> zip-Bibliothek hinzufügen

installiert werden.

Benötigte Bibliothek für TFT-Display mit 320×240 Pixeln

Das Programm

Bibliotheken einbinden und Variable definieren

Die SPI-Pins für das TFT-Display entsprechen der Standardkonfiguration VSPI und müssen nicht deklariert werden.
Für den SD-Kartenleser sind einige Parameter erforderlich:

der Typ der SD-Karte (3)
die Geschwindigkeit (SD_SCK_MHZ)
Der Datenpin (CSPin)

die Fotos müssen im Format bmp in der maximalen Größe 480×320 vorliegen
die Fotos müssen im Root-Verzeichnis der SD-Karte liegen
falls du kleinere Fotos verwenden willst, musst du vor dem Laden des Bildes den Bildschirm „löschen“:
tft.fillScreen(SCHWARZ);
bei Verwendung eigener Fotos musst du den Dateinamen austauschen und die Beschreibung anpassen:
reader.drawBMP(„eigeneDatei.bmp“, tft, 0, 0);
0, 0 sind die Startpunkte des Fotos auf der x-/y-Achse
wenn keine Beschreibung angezeigt werden soll, setze den Schalter Beschreibung auf false

#include "SdFat.h"

// 480x320 TFT
#include "Adafruit_ST7796S_kbv.h"

// 320x240 TFT
#include "Adafruit_ImageReader.h"

// ESP32-WROOM
#define TFT_CS        5
#define TFT_RST       4 
#define TFT_DC        2

/* 
  SD VSPI Standard-Pins
  CLK    18
  MOSI   23
  MISO   19
  CS      5
*/

// Objekt tft der Bibliothek Adafruit_ST7796S_kbv erstellen
Adafruit_ST7796S_kbv tft = Adafruit_ST7796S_kbv(TFT_CS, TFT_DC, TFT_RST);

// Objekt SD der Bibliothek SdFat erstellen
SdFat SD;              

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

Adafruit_Image Bild;  

// Farben
#define SCHWARZ     0x0000
#define WEISS       0xFFFF
#define BLAU        0x001F

// 3 = FAT32
#define SD_FAT_TYPE 3

// SPI-Geschwindigkeit
#define SPI_SPEED SD_SCK_MHZ(10)

// CSPin der SD-Karte
int CSPin = 15;

// Anzeigedauer
int Intervall = 6000;

bool Beschreibung = true;

#include "SdFat.h"

// 480x320 TFT

#include "Adafruit_ST7796S_kbv.h"

// 320x240 TFT

#include "Adafruit_ImageReader.h"

// ESP32-WROOM

#define TFT_CS 5

#define TFT_RST 4

#define TFT_DC 2

SD VSPI Standard-Pins

CLK 18

MOSI 23

MISO 19

CS 5

// Objekt tft der Bibliothek Adafruit_ST7796S_kbv erstellen

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

// Objekt SD der Bibliothek SdFat erstellen

SdFat SD;

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

Adafruit_ImageReader reader(SD);

Adafruit_Image Bild;

// Farben

#define SCHWARZ 0x0000

#define WEISS 0xFFFF

#define BLAU 0x001F

// 3 = FAT32

#define SD_FAT_TYPE 3

// SPI-Geschwindigkeit

#define SPI_SPEED SD_SCK_MHZ(10)

// CSPin der SD-Karte

int CSPin = 15;

// Anzeigedauer

int Intervall = 6000;

bool Beschreibung = true;

Der setup-Teil

Der setup-Teil startet den SD-Kartenleser und das TFT-Display. Der erfolgreiche Start des SD-Kartenlesers wird im Seriellen Monitor und auf dem TFT-Display angezeigt.

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

  // auf serielle Verbindung warten
  while (!Serial);
  delay(1000);
 
  // TFT starten
  tft.begin();
  
  tft.invertDisplay(1);

  // Rotation anpassen
  tft.setRotation(3);

  // schwarzer Hintergrund
  tft.fillScreen(SCHWARZ);
  tft.setTextSize(3);
  tft.setTextColor(WEISS);
  tft.setCursor(1, 20);

  /*
     SD-Karte mit Angabe des CSPins und  der SPI-Geschwindigkeit starten
     wenn die Intialisierung fehlschlägt
     - keine SD-Karte vorhanden
     - falsche Pinbelegung
     -> es wird eine Fehlermeldung angezeigt
  */
  if (!SD.begin(CSPin, SPI_SPEED)) 
  {
    tft.println("Start der SD-Karte");
    tft.print("fehlgeschlagen!");
    Serial.println("Start der SD-Karte fehlgeschlagen!");
  } 
  else 
  {
    Serial.println("SD-Karte gestartet");
    tft.print("SD-Karte gestartet!");
  }

  delay(5000);
}

void setup()

{

Serial.begin(9600);

// auf serielle Verbindung warten

while (!Serial);

delay(1000);

// TFT starten

tft.begin();

tft.invertDisplay(1);

// Rotation anpassen

tft.setRotation(3);

// schwarzer Hintergrund

tft.fillScreen(SCHWARZ);

tft.setTextSize(3);

tft.setTextColor(WEISS);

tft.setCursor(1, 20);

SD-Karte mit Angabe des CSPins und der SPI-Geschwindigkeit starten

wenn die Intialisierung fehlschlägt

- keine SD-Karte vorhanden

- falsche Pinbelegung

-> es wird eine Fehlermeldung angezeigt

if (!SD.begin(CSPin, SPI_SPEED))

{

tft.println("Start der SD-Karte");

tft.print("fehlgeschlagen!");

Serial.println("Start der SD-Karte fehlgeschlagen!");

}

else

{

Serial.println("SD-Karte gestartet");

tft.print("SD-Karte gestartet!");

}

delay(5000);

}

Der loop-Teil

Jedes Foto muss mit drawBMP an das TFT-Display (tft) mit den x- und y-Koordinaten des Startpunktes übergeben werden.
Je nach Zustand des Parameter Beschreibung (true/false) wird eine Information zum Foto angezeigt.
Die Umlaute müssen mit tft.write() und ⇒hexadezimalen Code definiert werden.

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

  if (Beschreibung)
  {
    tft.fillRect(1, 290, tft.width(), tft.height(), 0x0120); 
    tft.setCursor(10, 295);  
    tft.print("K");
    // ö = 0x94
    tft.write(0x94);
    tft.println("ln Blick vom Messeturm");
  }
  
  delay(Intervall);
 
  reader.drawBMP("duenen.bmp", tft, 0, 0);
  
  if (Beschreibung)
  {
    tft.setCursor(10, 295);  
    tft.fillRect(1, 290, tft.width(), tft.height(), 0x0120); 
    tft.print("D");
    // ü = 0x81
    tft.write(0x81);
    tft.print("nen Ibiza");
  }

  delay(Intervall);  
 
  reader.drawBMP("overath_bahnhof.bmp", tft, 0, 0);

  if (Beschreibung)
  {
    tft.setCursor(10, 295);  
    tft.fillRect(1, 290, tft.width(), tft.height(), 0x0120); 
    tft.print("Overath Bahnhof");
  }

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

  if (Beschreibung)
  {
    tft.setCursor(10, 295);  
    tft.fillRect(1, 290, tft.width(), tft.height(), 0x0120); 
    tft.print("Dresden Frauenkirche");
  }

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

  if (Beschreibung)
  {
    tft.setCursor(10, 295);  
    tft.fillRect(1, 290, tft.width(), tft.height(), 0x0120); 
    tft.print("Chartres Dom");
  }

  delay(Intervall);

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

  if (Beschreibung)
  {
    tft.setCursor(10, 295);  
    tft.fillRect(1, 290, tft.width(), tft.height(), 0x0120); 
    tft.print("Bonn Uni");
  }

  delay(Intervall);

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

  if (Beschreibung)
  {
    tft.setCursor(10, 295);  
    tft.fillRect(1, 290, tft.width(), tft.height(), 0x0120); 
    tft.print("Braunwald Schweiz");
  }

  delay(Intervall);
   
  reader.drawBMP("koeln_deutz.bmp", tft, 0, 0);

  if (Beschreibung)
  {
    tft.setCursor(10, 295);  
    tft.fillRect(1, 290, tft.width(), tft.height(), 0x0120); 
    tft.print("K");
    // ö = 0x94
    tft.write(0x94);
    tft.println("ln Deutz");
  }

  delay(Intervall);

  delay(Intervall);

  reader.drawBMP("st_michelle.bmp", tft, 0, 0);
  
  if (Beschreibung)
  {
    tft.setCursor(10, 295);  
    tft.fillRect(1, 290, tft.width(), tft.height(), 0x0120); 
    tft.print("St. Michelle Frankreich");
  }
  delay(Intervall);

  reader.drawBMP("lindos.bmp", tft, 0, 0);
  
  if (Beschreibung)
  {
    tft.setCursor(10, 295);  
    tft.fillRect(1, 290, tft.width(), tft.height(), 0x0120); 
    tft.print("Lindos Rhodos");
  }

  delay(Intervall);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

void loop()

{

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

if (Beschreibung)

{

tft.fillRect(1, 290, tft.width(), tft.height(), 0x0120);

tft.setCursor(10, 295);

tft.print("K");

// ö = 0x94

tft.write(0x94);

tft.println("ln Blick vom Messeturm");

}

delay(Intervall);

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

if (Beschreibung)

{

tft.setCursor(10, 295);

tft.fillRect(1, 290, tft.width(), tft.height(), 0x0120);

tft.print("D");

// ü = 0x81

tft.write(0x81);

tft.print("nen Ibiza");

}

delay(Intervall);

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

if (Beschreibung)

{

tft.setCursor(10, 295);

tft.fillRect(1, 290, tft.width(), tft.height(), 0x0120);

tft.print("Overath Bahnhof");

}

delay(Intervall);

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

if (Beschreibung)

{

tft.setCursor(10, 295);

tft.fillRect(1, 290, tft.width(), tft.height(), 0x0120);

tft.print("Dresden Frauenkirche");

}

delay(Intervall);

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

if (Beschreibung)

{

tft.setCursor(10, 295);

tft.fillRect(1, 290, tft.width(), tft.height(), 0x0120);

tft.print("Chartres Dom");

}

delay(Intervall);

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

if (Beschreibung)

{

tft.setCursor(10, 295);

tft.fillRect(1, 290, tft.width(), tft.height(), 0x0120);

tft.print("Bonn Uni");

}

delay(Intervall);

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

if (Beschreibung)

{

tft.setCursor(10, 295);

tft.fillRect(1, 290, tft.width(), tft.height(), 0x0120);

tft.print("Braunwald Schweiz");

}

delay(Intervall);

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

if (Beschreibung)

{

tft.setCursor(10, 295);

tft.fillRect(1, 290, tft.width(), tft.height(), 0x0120);

tft.print("K");

// ö = 0x94

tft.write(0x94);

tft.println("ln Deutz");

}

delay(Intervall);

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

if (Beschreibung)

{

tft.setCursor(10, 295);

tft.fillRect(1, 290, tft.width(), tft.height(), 0x0120);

tft.print("St. Michelle Frankreich");

}

delay(Intervall);

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

if (Beschreibung)

{

tft.setCursor(10, 295);

tft.fillRect(1, 290, tft.width(), tft.height(), 0x0120);

tft.print("Lindos Rhodos");

}

delay(Intervall);

}

Quellen

Letzte Aktualisierung: Jan. 6, 2026 @ 21:38