TFT_eSPI-Bilder: RGB565-Farben und Byte-Reihenfolge beheben

Wenn ein Bild in TFT_eSPI die richtige Form, aber die falschen Farben hat, teste zwei Dinge getrennt: die RGB/BGR-Konfiguration des Displays und die Byte-Reihenfolge der Bilddaten. Beides auf einmal zu ändern, macht es schwer zu sagen, welche Einstellung das Problem behoben hat.

Ein kleines Muster ist hier nützlicher als ein Foto. Rot, Grün, Blau, Weiß und Schwarz geben dir Werte, die du erkennen kannst, ohne zu raten, wie das Originalbild aussah.

Zeichne zuerst Vollfarben

Füge diese Funktion zu einem Sketch hinzu, der das Display bereits korrekt initialisiert. Rufe sie nach tft.init() und deiner Rotationseinstellung auf. Sie geht davon aus, dass das Display-Objekt tft heißt und der Screen mindestens 100 × 20 Pixel groß ist.

void drawColorReference() {
    const uint16_t colors[] = {
        TFT_RED, TFT_GREEN, TFT_BLUE, TFT_WHITE, TFT_BLACK
    };

    for (int i = 0; i < 5; ++i) {
        tft.fillRect(i * 20, 0, 20, 20, colors[i]);
    }
}

Synthetisches Testmuster, 100 × 20: fünf gleiche Bänder — Rot, Grün, Blau, Weiß, Schwarz. Kein Hardware-Foto. Lade das Referenz-PNG herunter und wandle es durch deinen Konverter um, um den Asset-Pfad mit dem Vollfarben-Rendern zu vergleichen.

Wenn diese Rechtecke falsch sind, arbeite an der Display-Konfiguration, bevor du ein weiteres Bild umwandelst. Der gewählte Treiber, die Panelmaße und die Farbfolge gehören zur Hardware-Einrichtung. Die User_Setup.h von TFT_eSPI dokumentiert die relevanten Optionen, einschließlich TFT_RGB_ORDER für unterstützte Treiber.

Wenn Rot blau erscheint und Blau rot, während Grün grün bleibt, ist die RGB/BGR-Reihenfolge ein nützlicher Verdächtiger. Prüfe die Einrichtung für das tatsächliche Panel, statt anzunehmen, dass sich jedes Modul, das unter demselben Controller-Namen verkauft wird, identisch verhält.

Teste dann den Bildpfad

Sobald die Vollfarben-Rechtecke stimmen, sende ein RGB565-Array durch pushImage(). Dieses zweite Muster wird weiter unten auf dem Screen gezeichnet, also erlaube insgesamt mindestens 100 × 32 Pixel:

void drawImageReference() {
    static const uint16_t strip[] = {
        0xF800, 0x07E0, 0x001F, 0xFFFF, 0x0000,
        0xF800, 0x07E0, 0x001F, 0xFFFF, 0x0000
    };

    const bool previous = tft.getSwapBytes();
    tft.setSwapBytes(false);
    tft.pushImage(0, 24, 5, 2, strip);
    tft.setSwapBytes(true);
    tft.pushImage(0, 30, 5, 2, strip);
    tft.setSwapBytes(previous);
}

Das erzeugt zwei winzige 5 × 2-Muster, eines mit jeder Swap-Einstellung. Prüfe, welches zu den Referenzfarben passt. Nutze bei Bedarf eine Lupe; das Array klein zu halten, macht jeden Wert leicht prüfbar.

Die Bibliothek deklariert setSwapBytes() speziell für die Pixel-Byte-Reihenfolge in ihrem API-Header. Die richtige Einstellung hängt davon ab, wie das Asset gespeichert ist und welcher API-Pfad es liest. Betrachte das Ergebnis als Prüfung für diese Asset-Darstellung, nicht als universelle Einstellung für jede Bitmap im Projekt.

Byte-Tausch ist nicht Rot/Blau-Tausch

In RGB565 ist Rot 0xF800. Seine Bytes sind F8 und 00; sie umzukehren erzeugt 0x00F8. Das ändert den gepackten Zahlenwert. Es tauscht nicht einfach die Rot- und Blau-Kanäle.

Deshalb brauchen zwei Symptome unterschiedliche Prüfungen:

Was du siehst	Was du zuerst prüfen solltest
Vollfarbige rote und blaue Rechtecke sind vertauscht	Panel-RGB/BGR-Konfiguration
Vollfarbige Rechtecke sehen richtig aus, importierte Farben falsch	Asset-Kodierung und Byte-Reihenfolge
Zeilen brechen um oder bilden diagonale Streifen	Breite, Höhe und Array-Länge
Alles ist leer, einschließlich Vollfarben-Rechtecke	Display-Initialisierung, Verkabelung, Hintergrundbeleuchtung und Treiber

Exportiere das Asset für TFT_eSPI

Wähle in Lopaka TFT_eSPI, bevor du das Bild importierst, und exportiere die Daten dann mit ihrem generierten Zeichenaufruf. Wenn du die Zielbibliothek später änderst, generiere das Asset neu, statt das alte Byte-Array in die neue Firmware zu übernehmen.

Für den vollständigen Layout-Workflow nutze die Anleitung für benutzerdefinierte TFT-Display-Oberflächen. Die Integrationsanleitung für TFT_eSPI behandelt die Hardware-Einrichtung und den generierten Zeichencode.

Bereite zuerst das Diagnosemuster vor, dann dein Logo, dann den vollständigen Screen. Wenn nur der vollständige Screen fehlschlägt, hast du das Problem auf dieses Asset oder den Speicherpfad eingegrenzt, den es nutzt.

Häufige Fragen

Sollte ich immer setSwapBytes(true) aufrufen?

Nein. Passe die Einstellung an das Array und den Zeichenpfad an. Stelle sie nach einem lokalen Test wieder her, damit späteres Rendern keine Einstellung erbt, die du vergessen hast.

Kann ein RGB565-Array PNG-Transparenz behalten?

RGB565 hat keine Alphakomponente. Ein transparentes PNG braucht einen gewählten Hintergrund oder eine Zeichenmethode mit expliziter Transparenzunterstützung. Ein dunkler Rand um ein Logo kann davon kommen, dass es gegen den falschen Hintergrund abgeflacht wurde.

Ist das für ST7789 und ILI9341 unterschiedlich?

Der Test funktioniert mit beiden, wenn TFT_eSPI das Panel bereits ansteuert. Ihre Einrichtungsdetails unterscheiden sich trotzdem. Behalte die Panel-Konfiguration, die Vollfarben korrekt macht, und diagnostiziere importierte Assets dann unabhängig davon.