Arduino GUI Builder

Narysuj ekran dla swojego OLED 128x64 w przeglądarce, a potem skopiuj kod U8g2 lub AdafruitGFX, który go rysuje.

Zaprojektuj ekran

Działa w przeglądarce. Bezpłatne konto, bez instalacji.

Co to robi

Lopaka to wizualny edytor kodu dla wyświetlaczy embedded. Układasz tekst, prostokąty, linie, koła i zaimportowane obrazy na obszarze rysowania, który ma dokładnie rozmiar twojego panelu, a edytor pisze wywołania rysowania na bieżąco. Nic nie jest zgadywane ze zrzutu ekranu: każda umieszczona warstwa staje się jednym wywołaniem funkcji w wygenerowanym szkicu.

Zwykła ścieżka w projekcie Arduino to ręczne pisanie wywołań U8g2 lub AdafruitGFX, wgranie na płytkę, mrużenie oczu na panel, dopasowanie współrzędnej i ponowne wgranie. Podgląd tutaj renderuje tak, jak robi to wyświetlacz 1-bitowy, więc praca nad wyrównaniem odbywa się w przeglądarce, a płytka widzi tylko wersję, która już wygląda dobrze.

Projektowanie w budżecie pamięci AVR

Uno ma 32 KB pamięci flash i 2 KB SRAM, a ekran to jeden z najłatwiejszych sposobów, żeby wydać obie. Lopaka nie kompiluje twojego szkicu, więc nie powie ci, ile kosztuje build, ale poniższa arytmetyka jest stała i warto ją znać, zanim zaczniesz rysować.

Bitmapa pełnoekranowa 128x64 kosztuje 1024 bajty

Jeden bit na piksel, więc 128 x 64 / 8. Na Uno to trzecia część 32 KB budżetu flash wydana na jeden obraz, co zwykle jest momentem, w którym narysowany układ wygrywa z przekonwertowanym zrzutem ekranu.

Ikona 16x16 kosztuje 32 bajty

Na tyle mała, że ekran zbudowany z ikon, tekstu i prymitywów pozostaje znacznie tańszy niż ten sam ekran dostarczony jako jedna bitmapa.

Bitmapy są deklarowane jako PROGMEM

Wygenerowane tablice są oznaczone PROGMEM dla U8g2 i Adafruit GFX, więc mieszkają w pamięci flash zamiast zajmować 2 KB SRAM, które Uno ma na wszystko inne.

Tekst i kształty nie kosztują żadnej tablicy

Prostokąt, linia lub ciąg znaków to wywołanie funkcji. Tylko obrazy i czcionki dodają dane, dlatego układ narysowany z prymitywów to tani sposób na wypełnienie ekranu.

Przed zaimportowaniem dużego logo oblicz rozmiar tablicy obrazu i wybierz format, którego oczekuje twoja biblioteka rysowania.

Wyświetlacze i biblioteki

Wybierz bibliotekę, którą twój szkic już dołącza, a edytor wygeneruje jej składnię. Rozmiary wahają się od 32x8 do 480x320, z własną szerokością i wysokością dla wszystkiego, czego nie ma na liście.

Wyświetlacz	Popularne kontrolery	Cel eksportu
Monochromatyczny OLED	SSD1306, SH1106, SSD1309	U8g2 lub AdafruitGFX Mono
Monochromatyczny LCD	PCD8544 i podobne cele U8g2	U8g2
Kolorowy TFT na płytce 32-bitowej	ILI9341, ST7789, GC9A01	TFT_eSPI, ArduinoGFX lub AdafruitGFX Color
E-paper	Panele napędzane przez GxEPD2	GxEPD2

Pełna lista celów eksportu: U8g2, AdafruitGFX, TFT_eSPI, ArduinoGFX, GxEPD2, ESPHome, Flipper Zero, MicroPython, CircuitPython.

Budowanie ekranu

1. Otwórz edytor, wybierz U8g2 lub Adafruit GFX i ustaw rozmiar wyświetlacza, który raportuje twój panel.
2. Narysuj ekran: tekst, prostokąty, linie, koła i zaimportowane obrazy na obszarze rysowania o rozmiarze prawdziwego wyświetlacza.
3. Przesuwaj warstwy co piksel i czytaj podgląd, który renderuje tak, jak zrobi to panel 1-bitowy.
4. Skopiuj wygenerowaną funkcję rysowania do szkicu w Arduino IDE i wgraj ją.

Jak wygląda wygenerowany kod

Odczyt czujnika na monochromatycznym OLED 128x64, wyeksportowany dla Adafruit GFX. Termometr to jedyna warstwa, która kosztuje pamięć: 32 bajty PROGMEM na ikonę 16x16. Obramowanie, linia podziału i oba ciągi znaków to wywołania funkcji i nic nie dodają.

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();
}

Pytania

Co właściwie produkuje kreator GUI Arduino?

Funkcję rysowania w składni wybranej biblioteki oraz deklaracje, których potrzebuje: tablice bitmap PROGMEM, dołączenia czcionek i wszystkie oznaczone zmienne. Wklejasz ją do szkicu i ją wywołujesz. Lopaka nigdy nie kompiluje szkicu, nie wgrywa na płytkę ani nie rozmawia z nią przez port szeregowy.

Do których bibliotek wyświetlaczy mogę eksportować?

Lopaka generuje kod źródłowy dla U8g2, AdafruitGFX, TFT_eSPI, ArduinoGFX, GxEPD2, ESPHome, Flipper Zero, MicroPython, CircuitPython.

Czy wygenerowany kod zmieści się na Arduino Uno?

Zależy od tego, co narysujesz, a edytor pokazuje ci części, które coś kosztują. Tekst, linie i prostokąty to wywołania funkcji, które nie dodają danych. Obraz 1-bitowy dodaje szerokość x wysokość / 8 bajtów, więc ikona 16x16 to 32 bajty, a pełny ekran 128x64 to 1024. Bitmapy są deklarowane jako PROGMEM, więc siedzą w pamięci flash, a nie w 2 KB SRAM.

Czy działa z Arduino IDE?

Tak, bo wyjście to zwykłe C++. Skopiuj wygenerowaną funkcję do szkicu obok konfiguracji U8g2 lub Adafruit GFX, którą już masz, i skompiluj ją tak, jak kompilujesz wszystko inne. Nie ma wtyczki do instalacji ani naszego kroku budowania na drodze.

Czy mogę ustawić rozdzielczość własnego panelu?

Lista rozmiarów obejmuje popularne panele od 32x8 do 480x320, w tym OLED 128x64, którego używa większość projektów Arduino, a wszystko, czego nie ma na liście, można wpisać jako własną szerokość i wysokość.

A co z czcionkami?

Projekty U8g2 używają biblioteki czcionek BDF, a projekty Adafruit GFX używają czcionek Adafruit i GFX. Edytor renderuje prawdziwe glify, więc tekst, który pozycjonujesz, ma szerokość, jaką będzie miał na panelu, a nie przybliżenie, które odkryjesz po wgraniu.

Czy to jest bezpłatne?

Tak. Projektowanie ekranu i generowanie kodu dla każdej obsługiwanej biblioteki to część bezpłatnego planu Basic, wraz ze społecznościowymi bibliotekami czcionek i ikon oraz paroma projektami w chmurze do przechowywania pracy. Plus dodaje wyższe limity, import własnych czcionek, pełne biblioteki ikon i animacji oraz eksport plików, ale nic na tej stronie tego nie wymaga.

Wypróbuj na własnym wyświetlaczu

Utwórz bezpłatne konto, a edytor otworzy się na pustym ekranie w rozmiarze twojego panelu.

Zaprojektuj ekran