Arduino GUI-Builder

Zeichne den Screen für dein 128x64-OLED im Browser und kopiere dann den U8g2- oder AdafruitGFX-Code heraus, der ihn zeichnet.

Gestalte einen Screen

Läuft im Browser. Kostenloses Konto, keine Installation.

Was es tut

Lopaka ist ein visueller Editor für Embedded-Display-Code. Du legst Text, Rechtecke, Linien, Kreise und importierte Bilder auf einer Zeichenfläche an, die genau die Größe deines Panels hat, und der Editor schreibt die Zeichenaufrufe, während du arbeitest. Nichts wird aus einem Screenshot geraten: Jede Ebene, die du platzierst, wird zu einem Funktionsaufruf im generierten Sketch.

Der übliche Weg für ein Arduino-Projekt ist, U8g2- oder AdafruitGFX-Aufrufe von Hand zu schreiben, das Board zu flashen, auf das Panel zu kneifen, eine Koordinate anzupassen und erneut zu flashen. Die Vorschau hier rendert so, wie ein 1-Bit-Display es tut, sodass die Ausrichtungsarbeit im Browser passiert und das Board nur die Version sieht, die bereits richtig aussieht.

Gestalten innerhalb eines AVR-Speicherbudgets

Ein Uno hat 32 KB Flash und 2 KB SRAM, und ein Screen ist eine der einfachsten Arten, beides auszugeben. Lopaka kompiliert deinen Sketch nicht, kann dir also nicht sagen, was ein Build kostet, aber die folgende Arithmetik ist fest und es lohnt sich, sie zu kennen, bevor du zeichnest.

Eine Ganzbild-128x64-Bitmap kostet 1024 Bytes

Ein Bit pro Pixel, also 128 x 64 / 8. Auf einem Uno ist das ein Drittel des 32-KB-Flash-Budgets, ausgegeben für ein einziges Bild, was normalerweise der Moment ist, in dem ein gezeichnetes Layout einen konvertierten Screenshot schlägt.

Ein 16x16-Icon kostet 32 Bytes

Klein genug, dass ein Screen, der aus Icons, Text und Primitiven gebaut ist, weit günstiger bleibt als derselbe Screen, der als eine Bitmap ausgeliefert wird.

Bitmaps werden als PROGMEM deklariert

Die generierten Arrays werden für U8g2 und Adafruit GFX als PROGMEM markiert, damit sie im Flash leben, statt die 2 KB SRAM zu belegen, die ein Uno für alles andere hat.

Text und Formen kosten überhaupt kein Array

Ein Rechteck, eine Linie oder ein String ist ein Funktionsaufruf. Nur Bilder und Schriftarten fügen Daten hinzu, weshalb ein aus Primitiven gezeichnetes Layout der günstige Weg ist, einen Screen zu füllen.

Bevor du ein großes Logo importierst, berechne die Größe des Bild-Arrays und wähle das Format, das deine Zeichen-Bibliothek erwartet.

Displays und Bibliotheken

Wähle die Bibliothek, die dein Sketch bereits einbindet, und der Editor generiert ihre Syntax. Die Größen reichen von 32x8 bis 480x320, mit benutzerdefinierter Breite und Höhe für alles, was nicht auf der Liste steht.

Display	Übliche Controller	Export-Ziel
Monochromes OLED	SSD1306, SH1106, SSD1309	U8g2 oder AdafruitGFX Mono
Monochromes LCD	PCD8544 und ähnliche U8g2-Ziele	U8g2
Farb-TFT auf einem 32-Bit-Board	ILI9341, ST7789, GC9A01	TFT_eSPI, ArduinoGFX oder AdafruitGFX Color
E-Paper	Panels, die über GxEPD2 angesteuert werden	GxEPD2

Vollständige Liste der Export-Ziele: U8g2, AdafruitGFX, TFT_eSPI, ArduinoGFX, GxEPD2, ESPHome, Flipper Zero, MicroPython, CircuitPython.

Einen Screen bauen

1. Öffne den Editor, wähle U8g2 oder Adafruit GFX und stelle die Display-Größe ein, die dein Panel meldet.
2. Zeichne den Screen: Text, Rechtecke, Linien, Kreise und importierte Bilder auf einer Zeichenfläche in der Größe des echten Displays.
3. Verschiebe Ebenen Pixel für Pixel und lies die Vorschau, die so rendert, wie ein 1-Bit-Panel es tun wird.
4. Kopiere die generierte Zeichenfunktion in deinen Sketch in der Arduino IDE und flashe sie.

Wie der generierte Code aussieht

Ein Sensormesswert auf einem 128x64 monochromen OLED, exportiert für Adafruit GFX. Das Thermometer ist die einzige Ebene, die Speicher kostet: 32 Bytes PROGMEM für ein 16x16-Icon. Der Rahmen, die Linie und beide Strings sind Funktionsaufrufe und fügen nichts hinzu.

static const unsigned char PROGMEM image_thermometer_bits[] = {0x07,0x80,0x08,0x40,0x0b,0x40,0x0b,0x4e,0x0b,0x50,0x0b,0x50,0x0b,0x4e,0x0b,0x40,0x0b,0x40,0x13,0x20,0x17,0xa0,0x17,0xa0,0x17,0xa0,0x08,0x40,0x07,0x80,0x00,0x00};

void draw(void) {
    display.clearDisplay();
    // frame
    display.drawRect(0, 0, 128, 64, 1);
    // title
    display.setTextColor(1);
    display.setTextWrap(false);
    display.setCursor(6, 14);
    display.print("SENSOR NODE");
    // divider
    display.drawLine(4, 20, 123, 20, 1);
    // reading
    display.setCursor(32, 46);
    display.print("21.5 C");
    // thermometer
    display.drawBitmap(8, 32, image_thermometer_bits, 16, 16, 1);
    display.display();
}

Fragen

Was produziert der Arduino GUI-Builder eigentlich?

Eine Zeichenfunktion in der Syntax der Bibliothek, die du ausgewählt hast, plus die Deklarationen, die sie braucht: PROGMEM-Bitmap-Arrays, Schriftart-Includes und alle Variablen, die du markiert hast. Du fügst sie in deinen Sketch ein und rufst sie auf. Lopaka kompiliert den Sketch nie, flasht das Board nicht und spricht nicht seriell mit ihm.

In welche Display-Bibliotheken kann ich exportieren?

Lopaka generiert Quellcode für U8g2, AdafruitGFX, TFT_eSPI, ArduinoGFX, GxEPD2, ESPHome, Flipper Zero, MicroPython, CircuitPython.

Passt der generierte Code auf einen Arduino Uno?

Das hängt davon ab, was du zeichnest, und der Editor zeigt dir die Teile, die etwas kosten. Text, Linien und Rechtecke sind Funktionsaufrufe, die keine Daten hinzufügen. Ein 1-Bit-Bild fügt Breite x Höhe / 8 Bytes hinzu, also ist ein 16x16-Icon 32 Bytes groß und ein voller 128x64-Screen 1024. Bitmaps werden als PROGMEM deklariert, damit sie im Flash sitzen statt in den 2 KB SRAM.

Funktioniert es mit der Arduino IDE?

Ja, weil die Ausgabe gewöhnliches C++ ist. Kopiere die generierte Funktion in deinen Sketch neben das U8g2- oder Adafruit GFX-Setup, das du bereits hast, und kompiliere sie so, wie du alles andere kompilierst. Es gibt kein zu installierendes Plugin und keinen Build-Schritt von uns, der im Weg steht.

Kann ich die Auflösung meines eigenen Panels einstellen?

Das Größen-Dropdown deckt die üblichen Panels von 32x8 bis 480x320 ab, einschließlich des 128x64-OLEDs, das die meisten Arduino-Projekte nutzen, und alles, was nicht auf der Liste steht, kann als benutzerdefinierte Breite und Höhe eingegeben werden.

Was ist mit Schriftarten?

U8g2-Designs nutzen die BDF-Schriftart-Bibliothek, und Adafruit GFX-Designs nutzen die Adafruit- und GFX-Schriftarten. Der Editor rendert die echten Glyphen, sodass der Text, den du positionierst, die Breite hat, die er auf dem Panel haben wird, statt einer Annäherung, die du erst nach dem Flashen entdeckst.

Ist es kostenlos?

Ja. Einen Screen zu gestalten und Code für jede unterstützte Bibliothek zu generieren, ist Teil des kostenlosen Basic-Tarifs, zusammen mit den Community-Schriftart- und Icon-Bibliotheken und ein paar Cloud-Projekten, um deine Arbeit darin zu behalten. Plus fügt höhere Limits, benutzerdefinierten Schriftart-Import, die vollständigen Icon- und Animations-Bibliotheken sowie Datei-Export hinzu, aber nichts auf dieser Seite braucht es.

Probiere es auf deinem eigenen Display aus

Erstelle ein kostenloses Konto, dann öffnet sich der Editor auf einem leeren Screen in der Größe deines Panels.

Gestalte einen Screen