Bild zu C-Array für Arduino und ESP32
Um ein Bild in ein C-Array umzuwandeln, passe seine Größe an die Maße an, die du auf dem Display brauchst, wähle ein Pixelformat, das deine Zeichenbibliothek akzeptiert, und exportiere die Pixeldaten samt Zeichenaufruf. Für ein monochromes OLED bedeutet das meist eine 1-Bit-Bitmap. Für ein Farb-TFT ist RGB565 eine gängige Wahl.
Die Dateiendung des Arrays sagt dir nur sehr wenig. Zwei Header können beide Hexadezimalzahlen enthalten und trotzdem völlig unterschiedliche Zeichenfunktionen brauchen.
Wähle die Zeichenbibliothek vor dem Umwandeln
Beginne mit der Bibliothek, die bereits auf deinem Board läuft. Eine PNG-zu-C-Array-Umwandlung für U8g2 sollte nicht dieselbe Ausgabe erzeugen wie eine für LVGL.
| Firmware-Ziel | Vorzubereitendes Asset | Integrationsdetail |
|---|---|---|
| U8g2 | XBM-Bitmap | Breite und Höhe begleiten das Byte-Array |
| TFT_eSPI | RGB565-Pixel oder monochrome Bitmap | Nutze die passende Zeichenfunktion |
| Adafruit GFX | RGB565-Pixel oder monochrome Bitmap | Passe die Packung der Bitmap an die API an |
| LVGL 9 | Bilddeskriptor und Pixeldaten | Ein reines Pixel-Array ist nicht das ganze Bildobjekt |
Die Plattformreferenz von Lopaka listet die Ausgabeformate auf. Wähle zuerst die Plattform, damit der Editor das passende Asset exportiert.
Ein PNG oder BMP in Lopaka umwandeln
- Öffne Lopaka und wähle die Zielplattform und die Screen-Maße.
- Öffne das Bildwerkzeug und lade die Quellgrafik hoch.
- Passe die Größe an oder schneide auf die Größe zu, die das Bild auf dem Gerät einnehmen wird. Ein 24-Pixel-Status-Icon braucht keine Fullscreen-Quell-Bitmap.
- Wähle Monochrom oder RGB, wenn die Plattform beides anbietet. Prüfe bei Strichzeichnungen das Ergebnis mit deaktiviertem Dithering; vergleiche bei einem Foto die verfügbaren Dithering-Modi.
- Platziere das Asset auf dem Screen und kopiere dann die generierten Daten und den Zeichencode gemeinsam.
Die Anleitung zum Bildimport behandelt die Steuerelemente. Wenn du nur eine monochrome OLED-Umwandlung brauchst, folge der kürzeren Anleitung zum U8g2-Bildkonverter.
Wie groß wird das Array?
Für eine unkomprimierte, zeilenweise gepackte 1-Bit-Bitmap runde jede Zeile auf ein ganzes Byte auf:
row bytes = (width + 7) / 8, using integer division
bitmap bytes = row bytes * height
RGB565 bytes = width * height * 2Diese Berechnungen beschreiben Pixel-Nutzdaten. Sie schließen Deskriptoren, Ausrichtung, Paletten und zusätzliche Laufzeitpuffer aus.
| Maße | Zeilenweise gepackt 1-Bit | RGB565 |
|---|---|---|
| 24 × 24 | 72 Bytes | 1.152 Bytes |
| 48 × 48 | 288 Bytes | 4.608 Bytes |
| 128 × 64 | 1.024 Bytes | 16.384 Bytes |
| 240 × 240 | 7.200 Bytes | 115.200 Bytes |
| 320 × 240 | 9.600 Bytes | 153.600 Bytes |
Bei einem monochromen 13 × 8-Icon braucht jede Zeile zwei Bytes. Die Nutzdaten sind 16 Bytes, auch wenn das Teilen der Gesamtpixelzahl durch acht 13 ergibt. Dieser Unterschied ist wichtig, wenn du ein verschobenes Bild diagnostizierst.
Testmuster, 13 × 8: zwei gespeicherte Bytes pro Zeile, 16 Bytes insgesamt. Lade die passende XBM-Datei herunter.
Die Größe der generierten Quelldatei ist wieder eine andere. Text wie 0xF8, 0x00 nimmt mehr Plattenplatz ein als die zwei Bytes, die er beschreibt. Prüfe die kompilierte Firmware-Größe, wenn du Flash budgetierst.
Wenn du ein Umwandlungswerkzeug auswählst, erklärt der Vergleich zur image2cpp-Alternative, wo ein eigenständiger Konverter endet und ein Screen-Editor nützlich wird.
Warum ein umgewandeltes Array falsch aussehen kann
Wenn der Umriss stimmt, aber die Farben falsch sind, prüfe das Farbformat und die Byte-Reihenfolge. RGB565 weist Rot fünf Bits, Grün sechs Bits und Blau fünf Bits zu; Adafruit erklärt die Kodierung in seiner Grafikreferenz.
Wenn ein monochromes Bild sich wiederholt oder seitwärts kippt, prüfe seine Breite, Zeilenauffüllung und Bit-Reihenfolge. Der interne Screen-Puffer eines Display-Controllers ist nicht unbedingt so aufgebaut wie die Bitmap, die deine Zeichenfunktion akzeptiert.
Folge der passenden Anleitung zur Fehlerbehebung, wenn die umgewandelten Bytes auf einem TFT oder monochromen OLED falsch aussehen: RGB565-Farben und Byte-Reihenfolge in TFT_eSPI beheben oder drawXBMP-Bitmaps auf einem SSD1306 beheben.
Behalte die Konverter-Ausgabe und ihren generierten Zeichenaufruf als Paar. Nur das Array in ein fremdes Beispiel zu kopieren, entfernt die Information, die den Bytes Bedeutung gibt.
PNG-Dateien und rohe Pixel sind verschiedene Dinge
logo.png in logo.h umzubenennen, dekodiert das Bild nicht. Ein PNG enthält komprimierte Bilddaten und Metadaten. Eine Zeichenfunktion, die rohe RGB565-Pixel erwartet, kann diese Datei nicht direkt interpretieren.
Für ein festes Logo kann die Umwandlung vor dem Kompilieren den Firmware-Pfad einfach halten. Für austauschbare Fotos auf einem Speichermedium kann ein Decoder die bessere Wahl sein. Wähle danach, wie das Asset aktualisiert wird, nicht nur danach, welcher Dateiname sich am leichtesten in den Sketch einfügen lässt.
Häufige Fragen
Kann dasselbe C-Array auf einem OLED und einem TFT funktionieren?
Nur wenn beide Zeichenpfade dieselbe Darstellung akzeptieren. Ein 1-Bit-Icon kann auf beiden nützlich sein, aber ein Farb-Array kann ohne Umwandlung nicht zu einer monochromen Bitmap werden.
Bleibt Transparenz beim Umwandeln eines PNG erhalten?
Das hängt vom Ausgabeformat ab. Einfaches RGB565 enthält keinen Alphakanal. Prüfe, ob der Export Transparenz gegen einen Hintergrund abflacht oder einen separaten Transparenzmechanismus nutzt.
Wo sollte ich für einen vollständigen Screen anfangen?
Nutze die Anleitung zum Arduino-GUI-Builder, um Text, Formen und Bilder zu kombinieren. Wenn du einen Temperaturwert als Text behältst, kann die Firmware ihn aktualisieren, ohne die ganze Screen-Bitmap zu ersetzen.