Generowanie kodu

Lopaka generuje kod źródłowy specyficzny dla platformy z twojego projektu wizualnego w czasie rzeczywistym. Ta strona wyjaśnia, jak ten kod powstaje, jak umieścić go w projekcie oraz jak pójść w drugą stronę — zaimportować istniejący kod z powrotem do Lopaka, aby odtworzyć warstwy.

Generowanie

Jak powstają dane wyjściowe

Panel kodu pokazuje ekran wybrany w jego kartach kodu. Za każdym razem, gdy ten ekran się zmienia, Lopaka przebudowuje jego blok wygenerowanego kodu. Dane wyjściowe zależą od czterech rzeczy:

1. Platforma — każda platforma ma własny szablon kodu i składnię.
2. Warstwy — w danych wyjściowych pojawiają się tylko widoczne warstwy bez nakładki, w kolejności ich ułożenia.
3. Tytuł ekranu — staje się nazwą funkcji opakowującej (zobacz poniżej).
4. Ustawienia kodu — przełączniki sterujące tym, które sekcje są uwzględniane.

Tytuł ekranu i funkcja opakowująca

Tytuł ekranu (edytowalny przez dwukrotne kliknięcie jego tytułu nad ekranem) staje się nazwą wygenerowanej funkcji opakowującej. Lopaka automatycznie konwertuje go na prawidłowy identyfikator C++:

Tytuł ekranu	Wygenerowana funkcja
Main Screen	void drawMain_Screen(void)
gauge display	void drawgauge_display(void)
123 Alert	void draw_123_Alert(void)
Status/Bar	void drawStatus_Bar(void)

Zasady: spacje i znaki specjalne stają się podkreśleniami; nazwy zaczynające się od cyfry otrzymują wiodące podkreślenie; słowa zastrzeżone C++ otrzymują końcowe podkreślenie.

Jeśli wyłączysz Funkcja opakowująca w Ustawieniach kodu, same wywołania rysowania są generowane bez żadnej otaczającej funkcji. Jest to przydatne przy wklejaniu bezpośrednio do istniejącego wywołania zwrotnego.

Nazwy warstw i nazwy zmiennych

Nazwy warstw pojawiają się w danych wyjściowych w dwóch miejscach:

• Komentarze — gdy Komentarze jest włączone, każde wywołanie rysowania jest poprzedzone przez // nazwa warstwy.
• Nazwy zmiennych — gdy Deklaruj zmienne jest włączone, zmienne właściwości mają nazwy {layerName}_{property} (np. label_x, label_color).

Nazwij warstwy wyraźnie przed włączeniem zmiennych — nazwy trafiają bezpośrednio do identyfikatorów kodu.

Ukryte warstwy

Warstwy wyłączone ikoną oka w panelu warstw są całkowicie wykluczane z generowania kodu. Użyj tego, aby zachować w projekcie kształty w trakcie pracy lub warstwy referencyjne bez uwzględniania ich w danych wyjściowych.

Ustawienia kodu

Panel Ustawień kodu (prawy dolny róg edytora) steruje tym, które sekcje są generowane. Nie wszystkie ustawienia są dostępne na każdej platformie.

Ustawienie	Co robi
Funkcja opakowująca	Opakowuje wszystkie wywołania rysowania w void draw{ScreenTitle}(void) { ... }
Komentarze	Generuje komentarz // nazwa warstwy przed każdym wywołaniem rysowania
Uwzględnij czcionki	Dodaje deklaracje czcionek lub dyrektywy #include dla czcionek użytych w projekcie
Deklaruj obrazy	Dodaje deklaracje tablic obrazów dla warstw bitmap i ikon
Uwzględnij pliki obrazów	Pozostawia piksele obrazów poza wygenerowanym źródłem i zamiast tego odwołuje się do pobranych plików zasobów
Deklaruj zmienne	Wyodrębnia oznaczone właściwości warstw do deklaracji zmiennych z typami (zobacz poniżej)
Wyczyść/wypełnij wyświetlacz	Dodaje wywołanie czyszczenia ekranu na początku funkcji
Uwzględnij animację	Dodaje funkcje pomocnicze odtwarzania i zewnętrzne dane klatek dla warstw animacji
PROGMEM	Oznacza tablice obrazów i czcionek klasą przechowywania PROGMEM Arduino

Ustawienia są zapisywane dla każdej platformy w przeglądarce, więc projekty na różnych platformach zachowują własną konfigurację.

Aby poznać dane wyjściowe specyficzne dla animacji, w tym funkcje pomocnicze odtwarzania i dane klatek do pobrania, zobacz Animacje.

Funkcje pomocnicze wielokątów

Warstwy wielokątów są generowane za pomocą wygenerowanych funkcji pomocniczych. Nazwa funkcji pomocniczej jest wyprowadzana z nazwy warstwy i konwertowana na prawidłowy identyfikator kodu, a następnie główny przepływ rysowania wywołuje tę funkcję pomocniczą.

Pierwszy plan i tło tekstu

Niektóre platformy kolorowe pozwalają warstwom tekstowym używać koloru tła, który jest uwzględniany w wygenerowanym kodzie rysowania tekstu.

Zmienne

Zmienne pozwalają zastąpić wpisane na stałe właściwości warstw nazwanymi identyfikatorami, które możesz aktualizować w czasie wykonania bez dotykania logiki rysowania.

Aby oznaczyć właściwość jako zmienną:

1. Wybierz warstwę.
2. W Inspektorze kliknij przełącznik zmiennej (ikonę sześciokąta) obok obsługiwanej właściwości, takiej jak x, y, text lub color.
3. Włącz Deklaruj zmienne w Ustawieniach kodu.

Wartość właściwości jest wyodrębniana na początek wygenerowanego kodu jako deklaracja z typem:

// Declared at the top when "Declare variables" is on
int label_x = 10;
int label_y = 20;
const char* label_text = "Hello";

// Draw call references the variables
display.setCursor(label_x, label_y);
display.print(label_text);

Nazwy zmiennych są wyprowadzane z nazwy warstwy i nazwy właściwości. Zmiana nazwy warstwy zmienia wszystkie jej nazwy zmiennych — zrób to przed udostępnieniem lub zatwierdzeniem kodu.

Nie każda właściwość obsługuje zmienne. Pozycja, rozmiar, kolor i treść tekstu obsługują je na większości platform. Właściwości takie jak rozmiar czcionki są stałe i nie mogą być oznaczane jako zmienne.

Eksportowanie

Kopiowanie z panelu kodu

Wybierz kartę kodu ekranu, a następnie kliknij Kopiuj, aby skopiować jego pełne dane wyjściowe, w tym własny kod przed i po wygenerowanej sekcji. Tylko wygenerowana sekcja jest tylko do odczytu; otaczające sekcje są edytowalne. Zobacz Edytowalny szablon kodu. Możesz też zaznaczyć tekst ręcznie za pomocą Ctrl A i Ctrl C.

Pobieranie jako plik

Możesz pobrać zawartość otwartej karty kodu jako plik .txt, w tym dowolny własny kod przed i po wygenerowanej sekcji.

Aby pobrać: otwórz menu Udostępnij na górnym pasku i wybierz Zapisz jako → Plik tekstowy.

Pobieranie czcionek i obrazów

Gdy projekt używa własnych czcionek lub warstw obrazów, Lopaka może eksportować te zasoby osobno, abyś mógł uwzględnić je w projekcie wraz z wygenerowanym kodem.

W panelu Ustawień kodu sekcja Czcionki wyświetla wszystkie pliki czcionek, do których odwołuje się projekt. Sekcja Obrazy wyświetla jeden wpis dla każdego unikalnego obrazu w projekcie. Kliknij ikonę pobierania obok każdego wpisu, aby zapisać zasób.

• Pliki czcionek są pobierane w formacie wymaganym przez aktywną platformę (.h dla platform opartych na GFX i U8g2).
• Dla U8g2 Renderuj tylko użyte glify ogranicza każdą pobraną czcionkę do znaków używanych przez warstwy tekstu i pola tekstowego, które się do niej odwołują. Pozostaw odznaczone, aby wyeksportować każdy glif BDF. Czcionki używane przez tekst zmiennej w czasie wykonania są zawsze eksportowane w całości.
• Pliki obrazów pobierają się w formacie, który kompiluje aktywna platforma, nazwanym od symbolu używanego przez wygenerowany kod. Obrazy o identycznych pikselach pojawiają się raz i są rysowane z tego jednego zasobu.

Platforma	Plik zasobu obrazu
Adafruit GFX (kolor i mono), Arduino GFX, TFT_eSPI, GxEPD2, Inkplate	Nagłówek C z bajtami XBM lub pikselami RGB565 — image_<Name>_bits.h lub image_<Name>_pixels.h
U8g2 (Arduino i ESP-IDF)	Nagłówek C — image_<Name>_bits.h
Flipper Zero	Samodzielny nagłówek C z tablicami uint8_t i bez nagłówków Arduino — image_<Name>_bits.h
LVGL (v9)	Źródło C z deskryptorem image_<Name>_dsc i jego mapą pikseli — <Name>.c
CircuitPython	Bitmapa wczytana przez displayio.OnDiskBitmap — image_<Name>_bits.bmp
MicroPython	Przenośna bitmapa — image_<Name>_bits.pbm
ESPHome	PNG przywołany przez wygenerowany YAML jako images/<Name>.png

Przy włączonym Uwzględnij pliki obrazów (i włączonym Deklaruj obrazy) wygenerowane źródło odwołuje się do tych plików zamiast przenosić piksele: dane wyjściowe C i C++ zamieniają tablice w linii na #include "<symbol>.h", a MicroPython wczytuje plik .pbm przy uruchomieniu. Bajty zasobów są dokładnie tym, co zawierają tablice w linii, więc każdy przepływ pracy rysuje ten sam wynik. Przy wyłączonym Deklaruj obrazy źródło odwołuje się tylko do symboli obrazów i nie przenosi danych pikseli; pliki do pobrania pozostają dostępne.

Uwaga

Zawsze pobieraj i umieszczaj zasoby czcionek i obrazów obok pliku .ino lub YAML przed wgraniem. Dla U8g2 umieść pobrane pliki .h obok wygenerowanego źródła ekranu. Dla ESPHome umieść pliki PNG w folderze images/, do którego odwołuje się YAML.

Import

Lopaka może analizować istniejący kod źródłowy platformy i odtwarzać z niego warstwy. Jest to przydatne, aby kontynuować od miejsca, w którym zakończył się poprzedni eksport, albo aby przenieść istniejący szkic do edytora wizualnego.

Uwaga

Import kodu to funkcja eksperymentalna. Nie cała składnia jest obsługiwana. Analizator odtwarza to, co potrafi, na podstawie analizy kodu w miarę możliwości — sprawdź wynik i zwróć uwagę na ostrzeżenia wyświetlone po imporcie.

Jak importować

Wybierz kartę kodu ekranu docelowego, a następnie kliknij przycisk Importuj po lewej stronie Kopiuj, aby wybrać plik źródłowy. Przycisk jest dostępny na platformach obsługujących import kodu.

Zaimportowane warstwy są dopisywane do ekranu tej karty. Istniejące warstwy nie są usuwane. Jeśli chcesz zacząć od nowa, najpierw usuń warstwy tego ekranu.

Co jest odtwarzane

Analizator usuwa komentarze, wyodrębnia makra #define i deklaracje zmiennych, a następnie skanuje wywołania funkcji rysowania i mapuje je z powrotem na typy warstw.

Analizowana konstrukcja	Odtwarzana jako
drawLine / line	Warstwa linii
drawRect / fillRect	Warstwa prostokąta
drawCircle / fillCircle	Warstwa okręgu
drawPixel	Warstwa punktu
print / drawString	Warstwa tekstu
drawBitmap / drawXBitmap	Warstwa obrazu / malowania
Deklaracje tablic obrazów	Dane bitmap, powiązane z warstwami
Odwołania do czcionek	Czcionka przypisana do warstw tekstu

Wartości zmiennych przywoływane w argumentach funkcji są rozwiązywane z powrotem do ich zadeklarowanych wartości, więc drawRect(x, y, 40, 20, WHITE), gdzie x = 10 i y = 5, tworzy prostokąt w punkcie (10, 5) o rozmiarze 40 × 20.

Znane ograniczenia

• Nazwy warstw nie są przywracane. Zaimportowane warstwy otrzymują nazwy ogólne. Zmień je ręcznie, jeśli planujesz używać zmiennych.
• Analizowane są tylko standardowe wywołania bibliotek. Własne funkcje pomocnicze, gałęzie #ifdef i makra preprocesora poza #define są ignorowane.
• Stan zmiennych nie jest przywracany. Nawet jeśli właściwość pierwotnie była zmienną, jest importowana jako stała wartość. W razie potrzeby ponownie włącz przełącznik zmiennej dla każdej warstwy ręcznie.
• Niejednoznaczność kolorów. Dla platform monochromatycznych analizator rozróżnia kolory 0/1. Dla platform RGB oczekuje stałych szesnastkowych (0xRRGGBB, 0xRRRR) lub nazwanych stałych, takich jak WHITE, BLACK. Niestandardowe definicje kolorów mogą nie zostać rozpoznane.
• Brak wykrywania ustawień. Analizator nie wykrywa, które Ustawienia kodu były aktywne, gdy kod był generowany. Sprawdź panel ustawień po imporcie.

Ostrzeżenia

Po imporcie wszelkie konstrukcje, których analizator nie potrafił rozwiązać, są wyświetlane w komunikacie ostrzeżenia edytora. Typowe ostrzeżenia:

• Nie znaleziono tablicy bitmap — kod odwołuje się do obrazu po nazwie, ale w zaimportowanym kodzie nie było pasującej deklaracji tablicy. Warstwa obrazu jest tworzona jako element zastępczy.
• Nie rozpoznano czcionki — nazwa czcionki w kodzie nie odpowiada żadnej dostępnej czcionce. Warstwa tekstu jest tworzona, ale czcionka wraca do domyślnej platformy.
• Nie rozwiązano zmiennej — zmienna przywołana w wywołaniu rysowania nie miała pasującej deklaracji. Argument jest importowany jako zero.

Usuń ostrzeżenia, zanim uznasz zaimportowany projekt za źródło prawdy.