Editor im Überblick

Diese Seite ist die vollständige Referenz der Oberfläche des Lopaka-Editors. Zu jedem größeren Bereich gibt es eine eigene Anleitung, die über die Überschriften unten verlinkt ist. Nutze diese Seite, um dich zu orientieren und in die Details einzusteigen.

Aufbau

Der Editor kombiniert einen Ebenenbaum des Projekts, einen Arbeitsbereich und einen Code-Bereich:

┌──────────┬──────────────────────────┬─────────────┐
│          │        Top bar           │             │
│  Layers  ├──────────────────────────┤  Inspector  │
│  panel   │        Screens + tools   │    panel    │
│          ├──────────────────────────┴─────────────┤
│          │  Code panel          │  Code settings  │
└──────────┴──────────────────────┴─────────────────┘

Bereich	Zweck
Ebenen-Bereich	Aufklappbare Screens, Ebenen und Gruppen; größenverstellbar
Obere Leiste	Projektdetails und Aktionen
Zeichenfläche	Die Screens und Grafiken des Projekts
Inspektor	Eigenschaften der ausgewählten Ebene
Code-Bereich	Code-Tabs der Screens; größenverstellbar
Code-Einstellungen	Optionen für die Code-Ausgabe und Downloads

Bereiche in der Größe ändern

Der Ebenen-Bereich und der Code-Bereich lassen sich in der Größe ändern. Ziehe am Griff an der Kante eines Bereichs, um seine Größe anzupassen.

Obere Leiste

Die obere Leiste enthält die Projektdetails und die Aktionen. Die Zeichenwerkzeuge liegen über dem Arbeitsbereich, die Zoom-Steuerung rechts davon.

Projektdetails

Zeigt Informationen zum aktuellen Projekt und Screen.

• Brotkrümelpfad – Project name › Screen name. Lange Namen werden gekürzt.
• Plattform-Badge – zeigt die aktive Plattform (z. B. tft-espi). Nur zur Anzeige: Die Plattform wird beim Erstellen des Projekts gewählt und lässt sich später nicht ändern.
• Display-Größen-Badge – zeigt die eingestellte Display-Auflösung (z. B. 128×64).
• Projekteinstellungen (Zahnrad-Icon) – öffnet den Dialog mit den Projekteinstellungen.
• Öffentliches Projekt – ein grünes Label, das erscheint, wenn das Projekt für alle Nutzer in der Galerie sichtbar ist.

Die Projektdetails werden nur angezeigt, wenn du angemeldet bist oder das Projekt schreibgeschützt ansiehst.

Werkzeugleiste

Die Werkzeugleiste über dem Arbeitsbereich enthält den Button Auswählen und die Zeichenwerkzeuge der aktiven Plattform.

Auswählen (kein Werkzeug aktiv)

Klicke auf das Cursor-Icon oder drücke Escape, um zum Auswahlmodus zurückzukehren. Im Auswahlmodus ist der Cursor der normale Mauszeiger; ein Klick auf eine Ebene auf der Zeichenfläche wählt sie aus. Ein Klick auf eine leere Stelle hebt die Auswahl aller Ebenen auf.

Zeichenwerkzeuge

Werkzeuge, die die aktive Plattform nicht unterstützt, werden ausgeblendet. Diese Werkzeuge gibt es insgesamt:

Werkzeug	Verwendung
Bild	Öffnet den Bild-Assistenten: Lade ein Bild, ein GIF oder ein Video hoch, wähle aus den integrierten Icon-Paketen, füge ein rohes Byte-Array ein oder füge auf unterstützten Plattformen eine Animation hinzu
Malen	Freihandzeichnen Pixel für Pixel auf einer Bitmap-Ebene; Rechtsklick radiert; halte Shift gedrückt, um gerade Linien zu zeichnen
Text	Ein Klick aktiviert das Werkzeug; eine Textebene wird automatisch in der Mitte des Screens platziert und ausgewählt, und das Textfeld im Inspektor erhält den Fokus
Rechteck	Klicken und ziehen, um zwei gegenüberliegende Ecken festzulegen
Kreis	Vom Mittelpunkt aus klicken und ziehen; der Radius folgt der Mausbewegung
Ellipse	Klicken und ziehen, um das umschließende Rechteck festzulegen
Linie	Vom Start- zum Endpunkt klicken und ziehen
Dreieck	Drei Klicks: Klicke auf jeden Eckpunkt; Doppelklick oder Escape schließt ab
Polygon	Mehrere Klicks: Setze beliebig viele Eckpunkte, Doppelklick oder Escape schließt ab; Doppelklick auf ein vorhandenes Polygon bearbeitet seine Eckpunkte
Bogen	Nur TFT_eSPI; fügt einen zentrierten Bogen hinzu, dessen Radius, Winkel, Breite, Farben und Kantenglättung sich bearbeiten lassen

Nur LVGL

Werkzeug	Verwendung
Textbereich	Wie Text, erzeugt aber eine mehrzeilige Textebene
Panel	Zeichnet ein Panel-Container-Widget
Button	Zeichnet ein Button-Widget
Checkbox	Zeichnet ein Checkbox-Widget
Schalter	Zeichnet ein Schalter-Widget
Schieberegler	Zeichnet ein Schieberegler-Widget
LVGL-Bogen	Fügt ein LVGL-Arc-Widget mit Wert und Spur hinzu

Bogen-Werkzeuge

TFT_eSPI und LVGL verwenden getrennte Bogen-Werkzeuge, weil ihre Zeichenmodelle verschieden sind. Bogen ist bei TFT_eSPI ein Zeichenprimitiv, das über Radius, Start- und Endwinkel, Breite, Vordergrundfarbe, Hintergrundfarbe und die Option Glatt gesteuert wird. Sind Start- und Endwinkel gleich, entsteht ein vollständiger Kreis.

LVGL-Bogen erstellt ein Widget mit Breite, Höhe, Drehung, Start- und Endwinkel, Wert, Indikatorfarbe und Spurfarbe. Der Wert ist auf 0–100 begrenzt. Jedes Bogen-Werkzeug erscheint nur auf seiner Plattform.

Bild-Import-Assistent

Alle Importmodi, Editor-Steuerelemente und Schritt-für-Schritt-Abläufe findest du in der vollständigen Anleitung Bilder importieren.

Tipp: Du kannst eine PNG- oder BMP-Datei auch direkt auf die Zeichenfläche ziehen und den Assistenten ganz überspringen – das Bild wird dann mit den Standardeinstellungen importiert.

Pinsel-Steuerung

Wenn das Werkzeug Malen aktiv ist, erscheinen zusätzliche Steuerelemente in der Werkzeugleiste:

• Pinselform und Muster – wähle Quadrat, Schachbrett, Horizontale Linien, Vertikale Linien oder Kreis. Die Vorschau aktualisiert sich schon vor dem Zeichnen, und die Muster richten sich über getrennte Striche hinweg am Raster des Screens aus.
• Radierer – lässt das normale Malen Pixel löschen. Auch ein Rechtsklick radiert, und beide Wege nutzen das gewählte Pinselmuster.
• Farbmodus – wechselt zwischen den Pinselmodi Mono (1 Bit) und RGB.
• Malfarbe – im RGB-Modus sichtbar; legt die aktuelle Malfarbe fest.
• Bild zuschneiden – erscheint bei Malebenen, die groß genug zum Zuschneiden sind. Der Zuschneidemodus zeigt orangefarbene Griffe und dunkelt den Bereich außerhalb des Zuschnitts ab; ziehe den Bereich oder die Griffe und wende den Zuschnitt dann an oder brich ab. Escape beendet den Zuschneidemodus, bevor das Werkzeug Malen verlassen wird, und angewendete Zuschnitte lassen sich rückgängig machen.

Skalierung

Eine Skalierungssteuerung rechts vom Arbeitsbereich passt den Zoom der Zeichenfläche an. Denselben Zoom änderst du mit Ctrl + / Ctrl - oder mit dem Mausrad bei gedrückter Ctrl/Cmd-Taste.

Aktionen

Aktionen auf Projektebene, sichtbar, wenn du angemeldet bist oder das Projekt schreibgeschützt ansiehst.

• Stern – merkt das Projekt vor. Der Button zeigt die aktuelle Anzahl der Sterne.
• Fork – erstellt eine Kopie des Projekts in deinem eigenen Konto und öffnet sie sofort. Erfordert eine Anmeldung.
• Teilen – Dropdown-Menü mit diesen Optionen:
  • Öffentlichen Link kopieren – kopiert einen direkten Galerie-Link in die Zwischenablage. Deaktiviert, wenn das Projekt oder der aktuelle Screen privat ist.
  • Präsentation – öffnet eine Vollbild-Diashow aller Screens des Projekts.
  • Speichern unter – Textdatei exportiert den geöffneten Code-Tab einschließlich eigenem Code. PNG-Bild und BMP-Bild exportieren den ausgewählten Screen oder, wenn keiner ausgewählt ist, den Screen des Code-Tabs.

Zeichenfläche

Der Arbeitsbereich zeigt alle Screens des Projekts nebeneinander in der gewählten Skalierung. Jeder Screen zeigt eine Vorschau der Grafik für das Ziel-Display.

Raster

Klicke rechts vom Arbeitsbereich auf Raster, um zwischen einem 1-Pixel-Raster, einem 10-Pixel-Raster und keinem Raster zu wechseln. Das standardmäßige 1-Pixel-Raster erscheint ab 300 % Zoom, das 10-Pixel-Raster ab 30 %. Das Raster ist rein visuell und hat keine Einrastfunktion.

Mausinteraktionen

Interaktion	Wirkung
Klick auf leeren Bereich	Hebt die Auswahl aller Ebenen auf
Klick auf eine Ebene	Wählt diese Ebene aus
Shift + Klick	Fügt die Ebene zur Auswahl hinzu oder entfernt sie
Klicken und ziehen auf leerem Bereich	Zieht ein Auswahlrechteck auf
Ausgewählte Ebene klicken und ziehen	Verschiebt die Ebene
Größengriff klicken und ziehen	Ändert die Größe der ausgewählten Ebene
Shift beim Ändern der Größe gedrückt halten	Behält das ursprüngliche Seitenverhältnis bei
Alt beim Ändern der Größe gedrückt halten	Ändert die Größe von der Mitte aus
Klick auf eine gruppierte Ebene	Wählt alle Ebenen der Gruppe aus
Doppelklick auf eine gruppierte Ebene	Wählt nur diese einzelne Ebene aus
Shift + Klick auf eine gruppierte Ebene	Fügt alle Gruppenmitglieder zur Auswahl hinzu
Doppelklick auf Polygon / Dreieck	Startet den Eckpunkt-Bearbeitungsmodus
Rechtsklick (Werkzeug Malen)	Löscht Pixel
Ctrl/Cmd + Mausrad	Vergrößert / verkleinert, zentriert am Cursor
Mausrad (ohne Zusatztaste)	Verschiebt die Zeichenfläche
Ziehen mit der mittleren Maustaste	Verschiebt die Zeichenfläche

Bilder ablegen

Du kannst eine PNG- oder BMP-Datei direkt auf die Zeichenfläche ziehen. Das Bild wird sofort mit den Standardeinstellungen importiert und als Bitmap-Ebene (Malebene) platziert.

Screen-Liste

Screens erscheinen als aufklappbare Einträge im Baum Ebenen auf der linken Seite, darunter ihre Ebenen und Gruppen.

Screens hinzufügen

Klicke im Kopf von Ebenen auf Screen hinzufügen, um einen neuen Screen anzulegen. Der Name wird automatisch als Screen N mit der nächsten freien Nummer erzeugt.

Zwischen Screens wechseln

Klicke im Ebenenbaum auf die Zeile eines Screens, um ihn auszuwählen und in den Fokus zu holen. Mit dem Pfeil davor blendest du seine Ebenen ein oder aus.

Screens neu anordnen

Ziehe die Zeile eines Screens an eine neue Position. Die Reihenfolge wird sofort gespeichert.

Screen umbenennen

Doppelklicke im Arbeitsbereich auf den Titel über einem Screen, um ihn direkt zu bearbeiten.

Kontextmenü (Rechtsklick)

Klicke mit der rechten Maustaste auf den Titel über einem Screen, um sein Kontextmenü zu öffnen:

Aktion	Beschreibung
Duplizieren	Erstellt eine Kopie des Screens und hängt sie an die Liste an.
Veröffentlichen	Macht einen privaten Screen in der Galerie sichtbar.
Privat machen	Blendet den Screen in der Galerie aus.
Löschen	Entfernt den Screen. Ein zweiter Klick bestätigt das Löschen.

Ebenenliste

Der Ebenenbaum listet die Screens, Ebenen und Gruppen des Projekts auf. Klappe einen Screen auf, um seine Ebenen in Render-Reihenfolge zu sehen (oben in der Liste = oben im Stapel = wird zuletzt gezeichnet).

Aktionen in der Ebenenliste

Aktion	So geht's
Ebene auswählen	Klicke auf ihre Zeile
Bereich auswählen	Klicke auf eine Ebene, dann Shift + Klick auf eine andere
Auswahl umschalten	Ctrl/Cmd + Klick auf eine Ebene
Alles auswählen	Ctrl A
Neu anordnen	Eine Zeile per Drag-and-drop an eine neue Position ziehen
Per Tastatur neu anordnen	Ebene auswählen, dann Ctrl ↑ / Ctrl ↓
Ein- / ausblenden	Beim Darüberfahren auf das Augen-Icon klicken
Sperren / entsperren	Beim Darüberfahren auf das Schloss-Icon klicken
Löschen	Auswählen, dann Delete oder der Button Löschen im Inspektor

Gruppen

Ebenen lassen sich gruppieren. Eine Gruppe erscheint als einklappbarer Eintrag in der Ebenenliste. Klicke auf den Gruppenkopf, um alle Ebenen der Gruppe auf einmal auszuwählen. Ctrl/Cmd + Klick auf einen Gruppenkopf fügt alle Mitglieder dieser Gruppe der aktuellen Auswahl hinzu oder entfernt sie daraus. Mit dem Pfeil blendest du die Ebenen innerhalb der Gruppenzeile ein oder aus; eine Bereichsauswahl schließt auch Ebenen in eingeklappten Gruppen ein.

Aktion	Tastenkürzel
Ausgewählte Ebenen gruppieren	Ctrl G
Gruppierung aufheben	Ctrl Shift G
Gruppe umbenennen	Doppelklick auf den Gruppennamen im Inspektor

Einzelne Ebenen ziehst du in eine Gruppe hinein oder aus ihr heraus, indem du sie in der Liste innerhalb oder außerhalb des Gruppencontainers ablegst.

Inspektor

Der Inspektor befindet sich auf der rechten Seite. Sein Inhalt hängt davon ab, was ausgewählt ist. Mit Inspektor ausblenden bzw. Inspektor einblenden rechts vom Arbeitsbereich blendest du ihn aus oder ein; die Einstellung wird in diesem Browser gespeichert.

Tastenkürzel-Übersicht

Wenn nichts ausgewählt ist, zeigt der Inspektor eine Übersicht der Tastenkürzel. Sie dient als schnelle Gedächtnisstütze; die vollständige Liste findest du in der Referenz Tastenkürzel.

Eine Ebene ausgewählt

Der Inspektor zeigt:

• Ebenen-Icon und Name – fahre mit der Maus darüber, um das Bearbeiten-Icon einzublenden, und klicke darauf, um die Ebene direkt umzubenennen.
• Ausrichtungs-Buttons – sechs Buttons, die die Ebene an den Rändern und der Mitte des Displays ausrichten:

Button	Eine Ebene	Mehrere Ebenen
Links ausrichten	An den linken Rand des Displays verschieben	Alle linken Kanten an der am weitesten links liegenden Ebene ausrichten
Horizontal zentrieren	Horizontal auf dem Display zentrieren	Alle horizontalen Mitten an der gemeinsamen Mitte ausrichten
Rechts ausrichten	An den rechten Rand des Displays verschieben	Alle rechten Kanten an der am weitesten rechts liegenden Ebene ausrichten
Oben ausrichten	An den oberen Rand des Displays verschieben	Alle oberen Kanten an der obersten Ebene ausrichten
Vertikal zentrieren	Vertikal auf dem Display zentrieren	Alle vertikalen Mitten an der gemeinsamen Mitte ausrichten
Unten ausrichten	An den unteren Rand des Displays verschieben	Alle unteren Kanten an der untersten Ebene ausrichten

Bei mehreren ausgewählten Ebenen bezieht sich die Ausrichtung auf das umschließende Rechteck aller ausgewählten Ebenen, nicht auf das Display. Jede Ebene wird an die entsprechende Kante oder Mitte dieses gemeinsamen Rechtecks verschoben.

• Eigenschaftsfelder – alle bearbeitbaren Eigenschaften des ausgewählten Ebenentyps. Häufige Felder:

Feld	Typ	Ebenen
X, Y	Zahl	Alle positionierbaren Ebenen
B, H	Zahl	Alle Ebenen mit Größe
X1, Y1, X2, Y2	Zahl	Linie
Radius / RX / RY	Zahl	Kreis, Ellipse
Radius / Start / Ende / Breite	Zahl	Bogen
Drehung / Start / Ende / Wert	Zahl	LVGL-Bogen
Gefüllt	Boolesch	Rechteck, Kreis, Ellipse, Dreieck
Invertiert (XOR)	Boolesch	Die meisten Formebenen
Farbe / Füllung / Hintergrund / Rahmen	Farbe	Plattformabhängig; der Texthintergrund wird auf Plattformen ohne Unterstützung ausgeblendet oder ignoriert
Schriftart	Schriftartauswahl	Text, Textbereich, Button, Checkbox
Text	Zeichenkette	Text, Textbereich, Button, Checkbox
Aktiviert	Boolesch	Checkbox
Overlay	Boolesch	Blendet die Ebene abgedunkelt ein und lässt sie bei der Code-Generierung aus
Transparenz	Boolesch	RGB-Bilder mit transparenten Pixeln; sie bleiben durchsichtig, statt mit dem Screen-Hintergrund gefüllt zu werden

Bei Textebenen auf U8g2, Flipper, CircuitPython und LVGL zeigt der Inspektor außerdem Drehungs-Buttons für 0°, 90°, 180° und 270°. Gedreht wird im Uhrzeigersinn; die Mitte der Ebenengrenzen bleibt dabei fest, und die Drehung bleibt in gespeicherten Projekten und im erzeugten Code erhalten. Auf Plattformen ohne native Textdrehung sind die Buttons ausgeblendet.

• Variablen-Schalter (kleiner Schalter neben Zahlen- und Farbfeldern) – kennzeichnet eine Eigenschaft im erzeugten Code als Variable statt als festen Wert.
• Aktionen – Buttons für Bildoperationen auf Bitmap-Ebenen (Malebenen):
  • Horizontal spiegeln – spiegelt die Bitmap an der vertikalen Achse.
  • Vertikal spiegeln – spiegelt die Bitmap an der horizontalen Achse.
  • Im Uhrzeigersinn drehen – dreht die Bitmap um 90° nach rechts.
  • Farben invertieren – invertiert jedes Pixel der Bitmap.
• Zu Bitmap zusammenführen – rendert alle ausgewählten Ebenen in eine einzige Bitmap-Ebene (Malebene). Die Quellebenen werden entfernt und durch ein flaches Bild in der Größe des gesamten Displays ersetzt. XOR- bzw. invertierte Ebenen werden beim Zusammenführen korrekt verrechnet.
• Löschen – entfernt die ausgewählte(n) Ebene(n).

Mehrere Ebenen ausgewählt

Der Inspektor zeigt die Anzahl der ausgewählten Ebenen, die Ausrichtungs-Buttons (zum Ausrichten der Ebenen aneinander), den Button Zu Bitmap zusammenführen und den Button Löschen.

Gehören alle ausgewählten Ebenen zur selben Gruppe, wird der Gruppenname angezeigt und lässt sich direkt umbenennen.

Code

Der Code-Bereich befindet sich unten im Editor. Bei Projekten mit mehreren Screens wählst du den Tab eines Screens, um seinen erzeugten Quellcode in Echtzeit zu sehen.

Der Bereich nutzt Syntaxhervorhebung für die Sprache der aktiven Plattform (C, C++, YAML usw.).

• Kopieren – kopiert den vollständigen erzeugten Code in die Zwischenablage, einschließlich deines eigenen Präfixes und Suffixes (siehe unten).
• Code importieren – importiert auf unterstützten Plattformen eine Quelldatei in den Screen des geöffneten Code-Tabs. Funktioniert am besten mit Code, den Lopaka selbst erzeugt hat.

Bearbeitbare Code-Vorlage

Der Code-Bereich ist in drei Zonen unterteilt, die durch Markierungskommentare getrennt sind:

// [BEGIN lopaka generated]
  … generated draw calls …
// [END lopaka generated]

Der Präfix-Bereich (über der BEGIN-Markierung) und der Suffix-Bereich (unter der END-Markierung) sind frei bearbeitbar. Schreibe dort jeden Code, den du brauchst – #include-Direktiven, Variablendeklarationen, eine setup()-Funktion oder alles andere, was dein Sketch benötigt. Der erzeugte Abschnitt in der Mitte ist schreibgeschützt und aktualisiert sich automatisch, während du Ebenen bearbeitest.

Präfix und Suffix werden pro Screen lokal in deinem Browser gespeichert und beim Neuladen der Seite wiederhergestellt. Beim Wechsel des Code-Tabs wird jeweils die Vorlage des zugehörigen Screens geladen.

Code-Einstellungen

Die Code-Einstellungen befinden sich rechts vom Code-Bereich. Sie steuern, wie der Quellcode erzeugt wird.

Ausgabeoptionen

Welche Optionen verfügbar sind, hängt von der Plattform ab. Die gängigsten sind:

Einstellung	Wirkung
Wrapper-Funktion	Fasst alle Zeichenaufrufe in einer benannten Funktion zusammen
Kommentare, Ebenentitel	Fügt vor jedem Zeichenaufruf einen Kommentar // layer name ein
Schriftarten einbinden	Gibt #include- oder Schriftart-Deklarationen aus
Bilder deklarieren	Gibt die Deklarationen der Bitmap-Arrays aus
Variablen deklarieren	Lagert veränderliche Ebeneneigenschaften in typisierte C-Variablen aus
Display leeren/füllen	Setzt einen Aufruf zum Leeren des Displays an den Anfang der Funktion
Als PROGMEM deklarieren	Nur U8g2 – legt Bitmap-Arrays im Flash-Speicher ab

Syntax-Auswahl

Auf Plattformen mit mehr als einer Code-Vorlage erscheint über den Optionen ein Dropdown Syntax:

Plattform	Optionen
U8g2	Arduino (Cpp), ESP-IDF (C)
AdafruitGFX Color, AdafruitGFX Mono, ArduinoGFX, TFT_eSPI	Arduino (C++), ESP-IDF (C++)

Standardmäßig ist die Arduino-Option gewählt. Die ESP-IDF-Optionen erzeugen Code, den du direkt in eine ESP-IDF-Komponente übernehmen kannst: Arrays werden ohne PROGMEM deklariert, und es wird kein setup() / loop() (bzw. app_main()) erzeugt – du rufst die erzeugten Zeichenfunktionen aus deinem eigenen Task auf. Andere Plattformen haben nur eine Vorlage und zeigen kein Dropdown.

Downloads von Schriftarten und Bildern

Wenn Ebenen Schriftarten oder Bitmap-Bilder verwenden, erscheinen unten in den Code-Einstellungen Download-Links. Klicke auf den Link einer Schriftart, um die .h- oder .bdf-Datei herunterzuladen. Klicke auf den Link eines Bildes, um die Bitmap je nach Plattform als .bmp- oder .h-Datei herunterzuladen.

Automatisches Speichern

Der Editor speichert deine Arbeit automatisch, während du zeichnest. Änderungen werden eine Sekunde nach der letzten Bearbeitung in der Cloud gespeichert. Einen Button zum manuellen Speichern gibt es nicht; sobald sich die Zeichenfläche nicht mehr ändert, kannst du den Tab bedenkenlos schließen oder die Seite verlassen.

Schreibgeschützter Modus / Galerie-Modus

Wenn du ein Projekt öffnest, das dir nicht gehört (aus der Galerie oder über einen geteilten Link), zeigt der Editor es schreibgeschützt an. Die Werkzeuge sind ausgeblendet, der Inspektor dient nur zur Ansicht, und Code lässt sich kopieren, aber nicht importieren. Durch die Ebenenliste kannst du weiterhin navigieren.