Bilder importieren

Mit Lopaka holst du Bilder, GIFs und Videos in dein Screen-Design für Embedded-Displays. Lopaka wandelt sie in das Format um, das deine Plattform braucht – ob 1-Bit-XBMP-Bitmap für ein monochromes OLED oder RGB565-Array für ein Farb-TFT.

Es gibt zwei Wege, einen Import zu starten:

• Klicke in der Werkzeugleiste auf das Werkzeug Bild, um den Bild-Assistenten zu öffnen.
• Zieh eine PNG- oder BMP-Datei direkt auf die Zeichenfläche, um den Assistenten zu überspringen und mit den Standardeinstellungen zu importieren.

Der Bild-Assistent

Der Assistent öffnet sich als modales Fenster. Drücke Escape oder klicke daneben, um jederzeit abzubrechen.

Schritt 1 – Quelle wählen

Wähle einen Importmodus. Welche Modi verfügbar sind, hängt von der aktiven Plattform ab.

Icon-Pakete

Durchsuche die integrierte Bibliothek monochromer Icons, gruppiert nach Sets (Pfeile, UI-Symbole, Wetter usw.). Der Bereich Aktuelles Projekt oben zeigt die Bilder, die du in dieser Sitzung bereits importiert hast – klicke eines an, um es ohne erneutes Hochladen wiederzuverwenden.

Mit der Suche filterst du Icon-Pakete und Bilder des aktuellen Projekts nach Icon-Namen.

Klicke auf ein Icon, um es sofort auf der Zeichenfläche zu platzieren. Der Assistent schließt sich und die Ebene wird hinzugefügt.

Wann sinnvoll: Du brauchst ein Standard-UI-Icon – Akku, WLAN, Pfeile, Häkchen – und willst keine Bilddatei vorbereiten.

Datei hochladen

Zieh eine oder mehrere Dateien in die Ablagezone oder klicke auf Dateien durchsuchen, um sie in deinem Dateisystem auszuwählen. Unterstützt werden Rasterbilder, GIF, MP4/MOV-Videos mit H.264 und WebM-Videos mit VP8, VP9 oder AV1.

• Mehrere Dateien – alle Dateien landen in einer Warteschlange. Du kannst jede einzeln in der Vorschau ansehen, die Einstellungen gelten aber für alle Bilder gleichzeitig.
• GIF-Dateien – jedes Frame wird automatisch als eigenes Bild extrahiert.
• Videodateien – lade jeweils ein Video. Der Videoimport ist auf Plattformen verfügbar, die Animationen unterstützen.

Wann sinnvoll: Du hast ein eigenes Logo, Icon oder Foto, das auf dem Screen erscheinen soll.

Byte-Array eingeben

Füge ein rohes XBMP-Byte-Array direkt ein – wie es typischerweise Bildkonvertierungs-Tools erzeugen oder wie es in bestehender Firmware steht. Gib Breite und Höhe der Bitmap ein, aktiviere Bytes tauschen, falls die Byte-Reihenfolge nicht zur Vorschau passt, und sieh zu, wie sich die Live-Vorschau beim Tippen aktualisiert. Beispieleingabe:

0xFF, 0x81, 0x81, 0x81, 0xFF

Wann sinnvoll: Du migrierst bestehenden Firmware-Code, der bereits Bitmap-Arrays enthält, oder du hast eine Bitmap aus einem Tool, das rohe Byte-Daten exportiert.

Animation

Damit fügst du eine integrierte Frame-Animation hinzu, statt eine Bilddatei umzuwandeln. Den vollständigen Ablauf und das Verhalten des generierten Codes beschreibt Animationen.

Schritt 2 – Im Bildeditor anpassen

Nach dem Hochladen wechselt der Assistent zum Bildeditor. Aussehen und Verhalten des Editors hängen davon ab, ob du eine oder mehrere Dateien hochgeladen hast.

Einzelnes Bild

Wenn du genau eine Datei hochlädst, wird der vollständige Editor angezeigt:

• Name ist bearbeitbar – lege jetzt den Namen der C-Variablen fest (z. B. wifi_icon → const uint8_t wifi_icon[]).
• Die Steuerelemente für Abmessungen werden angezeigt – ändere die Größe, und der Zuschneidebereich passt sich entsprechend an.
• Der Zuschneidebereich ist aktiv – zieh das blaue Rechteck, um nur einen Teil des Bildes auszuwählen.

Alles, was du einstellst, wird beim Klick auf Importieren auf dieses eine Bild angewendet.

Mehrere Bilder

Wenn du mehr als eine Datei oder ein GIF hochlädst, wechselt der Editor in den Mehrbildmodus:

• Links erscheint eine Miniaturleiste. Klicke auf eine Miniatur, um sie im Editor in der Vorschau anzuzeigen.
• Jede Miniatur hat ein Kontrollkästchen. Anfangs sind alle Bilder ausgewählt. Entferne das Häkchen bei Bildern, die du vom Import ausschließen willst.
• Alle auswählen – erscheint im Kopf der Leiste, sobald mindestens ein Bild abgewählt ist. Ein Klick stellt die vollständige Auswahl wieder her.
• Name ist nicht bearbeitbar – er wird automatisch aus dem Dateinamen abgeleitet. Benenne die Ebenen bei Bedarf nach dem Import im Inspektor um.
• Abmessungen und Zuschnitt werden nicht angezeigt. Jedes Bild wird beim Import unabhängig automatisch an die Displaygröße angepasst.
• Alle übrigen Einstellungen – Resampling, Helligkeit, Kontrast, Dithering, Invertieren – gelten beim Klick auf Importieren für jedes ausgewählte Bild.

GIF-Dateien

Ein GIF wird wie mehrere Bilder behandelt. Jedes Frame wird automatisch extrahiert und erscheint als eigener Eintrag in der Miniaturleiste, benannt basename_frame_1, basename_frame_2 und so weiter. Ein GIF mit nur einem Frame behält einfach den Basisnamen.

So kannst du ein animiertes Icon als Folge von Bitmap-Ebenen importieren – eine pro Frame –, die deine Firmware dann der Reihe nach durchlaufen kann.

Videodateien

Ein Video zeigt bis zu 10 Vorschau-Frames, verteilt über seine Zeitleiste. Mit diesen Vorschauen stellst du dieselben Werte ein wie bei Bildern: Größe, Zuschnitt, Helligkeit, Kontrast, Invertieren, Resampling und Dithering. Die Vorschauen wechseln nur die Ansicht im Editor; einzeln auswählen lassen sie sich nicht.

Lege die Ausgabe-Frames pro Sekunde zwischen 1 und 60 fest und prüfe die daraus resultierende Dauer, Frame-Anzahl, verarbeiteten Abmessungen und geschätzte monochrome Größe. Videoimporte sind auf 1.000 Ausgabe-Frames und 5 MiB begrenzt. Verringere die FPS oder die Frame-Abmessungen, wenn eines der Limits überschritten wird.

Klicke auf Importieren, um die eingestellten Frames zu verarbeiten und sie als eine Animation im Animationseditor zu öffnen. Das Video wird in der Reihenfolge seiner Zeitleiste dekodiert und erzeugt nicht für jedes Frame ein eigenes Bild-Asset oder eine eigene Ebene auf der Zeichenfläche.

Zoom

Zieh den Zoom-Schieberegler, um die Vorschau zu vergrößern (0,5× bis 10×). Ein Doppelklick auf den Regler setzt ihn auf 1× zurück. Das wirkt sich nicht auf das exportierte Bild aus – es ist nur eine Hilfe für die Vorschau.

Farbmodus

Sichtbar auf Plattformen, die sowohl monochrom als auch farbig arbeiten (z. B. TFT_eSPI). Wechsle zwischen:

• Monochrom – 1-Bit-XBMP, sehr kompakt. Jedes Pixel ist entweder an oder aus. Das Bild wird per Dithering oder Schwellwert in Schwarz-Weiß umgewandelt.
• RGB – RGB565, 2 Byte pro Pixel. Erhält die Farben. Verwende das für Farbdisplays.

Auf Plattformen, die nur einen Modus unterstützen, ist der Schalter automatisch gesperrt.

Abmessungen

Lege Zielbreite und -höhe fest. Änderst du einen Wert, wird der andere proportional angepasst.

• Zurücksetzen – stellt die ursprünglichen Bildabmessungen wieder her.
• An Display anpassen – skaliert das Bild unter Beibehaltung des Seitenverhältnisses so, dass es in die aktuelle Displaygröße passt.

Zuschneidebereich

Ein blaues Auswahlrechteck liegt über der Vorschau. Importiert wird nur der Bereich darin.

• Zieh die Mitte des Rechtecks, um es zu verschieben.
• Zieh eine beliebige Ecke, um seine Größe zu ändern.
• Bearbeite die Felder X / Y / B / H direkt für eine genaue Steuerung.

Wann zuschneiden: Du hast ein großes Bild und brauchst nur einen bestimmten Ausschnitt – z. B. ein Statusleisten-Icon aus einem Vollbild-Screenshot oder eine einzelne Glyphe aus einem Sprite-Sheet.

Bytegröße

Die Anzeige der Bytegröße unter der Vorschau aktualisiert sich live und zeigt, wie viel RAM die zugeschnittene Bitmap belegen wird:

• Monochrom: 1 Bit pro Pixel, in Bytes gepackt.
• RGB: 2 Byte pro Pixel (RGB565).

Resampling

Legt den Algorithmus fest, mit dem das Bild auf die Zielabmessungen verkleinert wird:

Modus	Wann sinnvoll
Hohe Qualität	Beste Standardwahl, vor allem beim Verkleinern von Fotos oder detaillierten Grafiken
Bilinear	Weiche, schnellere Skalierung für allgemeine Bilder
Nächster Nachbar	Pixel-Art und Icons, bei denen harte Kanten scharf bleiben sollen

Hohe Qualität ist standardmäßig ausgewählt.

Helligkeit und Kontrast

Verschiebe die Helligkeit von −100 % bis +100 % und den Kontrast von −100 % bis +100 %. Ein Doppelklick auf einen der Regler setzt ihn auf 0 zurück.

Wann sinnvoll: Ein Foto wirkt nach der Umwandlung in Monochrom blass – erhöhe den Kontrast, damit dunkle Pixel dunkler und helle Pixel heller werden. Wenn ein Logo einen hellen Hintergrund hat, der in die Bitmap durchschlägt, erhöhe den Kontrast oder verringere die Helligkeit, um ihn ins Weiße zu drücken.

Zuerst Graustufen

Wandelt das Bild vor der Schwellwertbildung bzw. dem Dithering in Graustufen um. Schalte das ein, wenn dein Quellbild farbig ist und die automatische Umwandlung ein unerwartetes Ergebnis liefert – zum Beispiel bei einem roten Logo auf weißem Hintergrund, bei dem Rot und Weiß ähnlich hell wahrgenommen werden.

Dithering (nur monochrom)

Wähle, wie Farbtöne in Schwarz-Weiß umgewandelt werden:

Modus	Wann sinnvoll
Floyd-Steinberg	Detaillierte Fotos und weiche Verläufe
Atkinson	Ein helleres, kontrastreiches Dithering, das sich gut für kleine Displays eignet
Bayer 8x8	Ein regelmäßiges Pixelmuster mit vorhersehbarer Textur
Kein Dithering	Saubere Strichgrafiken, Logos und vollflächige Füllungen

Mit Helligkeit und Kontrast steuerst du, welche Pixel bei der Schwarz-Weiß-Umwandlung auf welcher Seite landen.

Palette invertieren (nur monochrom)

Vertauscht Schwarz und Weiß vor dem Dithering. Verwende das, wenn dein Quellbild ein weißes Symbol auf schwarzem Hintergrund zeigt, das Display es aber invertiert darstellt, oder wenn der automatische Schwellwert die falsche Farbe als Vordergrund behandelt.

Ergebnis invertieren

Invertiert die fertige Bitmap nach der gesamten Verarbeitung. Verwende das, wenn das Bild in der Vorschau richtig aussieht, auf dem echten Display aber invertiert erscheint – zum Beispiel bei Displays mit weißem Hintergrund, wo Schwarz der Standard ist.

Nach dem Import

Jedes importierte Bild wird zu einer Malebene (Bitmap) auf der Zeichenfläche. Der Ebenenname entspricht dem Variablennamen im generierten Code. Animationen werden stattdessen zu Animationsebenen.

Mit dem Werkzeug Malen kannst du die Bitmap weiter bearbeiten und einzelne Pixel direkt zeichnen oder radieren.