Przegląd edytora

Ta strona to kompletny opis interfejsu edytora Lopaka. Każda główna sekcja ma osobny przewodnik, do którego prowadzą linki przy poniższych nagłówkach. Skorzystaj z tej strony, aby się zorientować i znaleźć szczegółowe informacje.

Układ

Edytor łączy drzewo warstw projektu, obszar roboczy i panel kodu:

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

Obszar	Przeznaczenie
Panel warstw	Rozwijalne ekrany, warstwy i grupy, ze zmianą rozmiaru
Górny pasek	Szczegóły projektu i akcje
Obszar rysowania	Ekrany i grafika projektu
Panel inspektora	Właściwości wybranej warstwy
Panel kodu	Karty kodu ekranu, ze zmianą rozmiaru
Ustawienia kodu	Przełączniki wyjścia kodu i pobieranie

Zmiana rozmiaru paneli

Panel warstw i panel kodu pozwalają zmieniać rozmiar. Przeciągnij uchwyt zmiany rozmiaru na krawędzi panelu, aby zmienić jego rozmiar.

Górny pasek

Górny pasek zawiera Szczegóły projektu i Akcje. Narzędzia rysowania znajdują się nad obszarem roboczym, a kontrolki powiększenia po jego prawej stronie.

Szczegóły projektu

Pokazuje informacje o bieżącym projekcie i ekranie.

• Ścieżka nawigacji — Nazwa projektu › Nazwa ekranu. Obie etykiety są skracane, jeśli są długie.
• Odznaka platformy — pokazuje aktywną platformę (np. tft-espi). Wyświetlanie tylko do odczytu; platformę wybiera się przy tworzeniu projektu i nie można jej później zmienić.
• Odznaka rozmiaru wyświetlacza — pokazuje skonfigurowaną rozdzielczość wyświetlacza (np. 128×64).
• Ustawienia (ikona koła zębatego) — otwiera okno Ustawienia projektu.
• Projekt publiczny — zielona etykieta pokazywana, gdy projekt jest widoczny dla wszystkich użytkowników w galerii.

Strefa szczegółów projektu jest pokazywana tylko wtedy, gdy jesteś zalogowany(-a) lub przeglądasz w trybie tylko do odczytu.

Pasek narzędzi

Pasek narzędzi nad obszarem roboczym zawiera przycisk Zaznacz oraz narzędzia rysowania dla aktywnej platformy.

Zaznacz (brak aktywnego narzędzia)

Kliknij ikonę kursora lub naciśnij Escape, aby wrócić do trybu zaznaczania. W trybie zaznaczania kursor jest domyślnym wskaźnikiem; kliknięcie warstwy na obszarze rysowania zaznacza ją. Kliknięcie pustego miejsca odznacza wszystkie warstwy.

Narzędzia rysowania

Narzędzia nieobsługiwane przez aktywną platformę są ukryte. W kodzie istnieją następujące narzędzia:

Narzędzie	Jak używać
Obraz	Otwiera kreator obrazu: prześlij obraz, GIF lub film; wybierz z wbudowanych pakietów ikon; wklej surową tablicę bajtów; albo dodaj animację na obsługiwanych platformach
Malowanie	Swobodne rysowanie co do piksela na warstwie bitmapy; prawy przycisk myszy wymazuje; przytrzymaj Shift, aby rysować proste linie
Tekst	Kliknięcie aktywuje narzędzie; warstwa tekstowa jest automatycznie umieszczana na środku ekranu, zaznaczana, a pole tekstowe inspektora otrzymuje fokus
Prostokąt	Kliknij i przeciągnij, aby określić przeciwległe rogi
Okrąg	Kliknij i przeciągnij od środka; promień podąża za przeciąganiem
Elipsa	Kliknij i przeciągnij, aby określić ramkę ograniczającą
Linia	Kliknij i przeciągnij od punktu początkowego do końcowego
Trójkąt	Trzy kliknięcia w wielu punktach: kliknij każdy wierzchołek, kliknij dwukrotnie lub naciśnij Escape, aby zakończyć
Wielokąt	Wiele kliknięć: umieść dowolną liczbę wierzchołków, kliknij dwukrotnie lub naciśnij Escape, aby zakończyć; kliknij dwukrotnie istniejący wielokąt, aby edytować wierzchołki
Łuk	Tylko TFT_eSPI; dodaje wyśrodkowany łuk z edytowalnym promieniem, kątami, szerokością, kolorami i wygładzaniem krawędzi

Tylko LVGL

Narzędzie	Jak używać
Obszar tekstowy	Tak jak Tekst, ale tworzy wielowierszową warstwę tekstową
Panel	Rysuje widżet kontenera panelu
Przycisk	Rysuje widżet przycisku
Pole wyboru	Rysuje widżet pola wyboru
Przełącznik	Rysuje widżet przełącznika
Suwak	Rysuje widżet suwaka
Łuk LVGL	Dodaje widżet łuku LVGL z wartością i ścieżką

Narzędzia łuku

TFT_eSPI i LVGL używają osobnych narzędzi łuku, ponieważ ich modele rysowania są różne. Łuk w TFT_eSPI to prymityw rysowania kontrolowany przez promień, kąty początkowy i końcowy, szerokość, kolor pierwszego planu, kolor tła oraz przełącznik Gładki. Równe kąty początkowy i końcowy dają pełny okrąg.

Łuk LVGL tworzy widżet o szerokości, wysokości, obrocie, kątach początkowym i końcowym, wartości, kolorze wskaźnika i kolorze ścieżki. Wartość jest ograniczona do 0–100. Każde narzędzie łuku jest pokazywane tylko na obsługiwanej przez nie platformie.

Kreator importu obrazów

Zobacz pełny przewodnik Importowanie obrazów, aby poznać wszystkie tryby importu, kontrolki edytora i procedury krok po kroku.

Wskazówka: możesz też przeciągnąć plik PNG lub BMP bezpośrednio na obszar rysowania, aby całkowicie pominąć kreator — obraz zostanie zaimportowany z ustawieniami domyślnymi.

Kontrolki pędzla malowania

Gdy narzędzie Malowanie jest aktywne, na pasku narzędzi pojawiają się dodatkowe kontrolki:

• Lista rozwijana wzoru — wybierz Pełny, Szachownica, Linie poziome, Linie pionowe lub Okrąg. Podgląd aktualizuje się, zanim zaczniesz rysować, a wzory wyrównują się do siatki ekranu między osobnymi pociągnięciami.
• Przełącznik trybu gumki — sprawia, że zwykłe malowanie wymazuje piksele. Prawy przycisk myszy również wymazuje, a obie ścieżki gumki używają wybranego wzoru pędzla.
• Przełącznik trybu koloru — przełączaj między trybami pędzla Monochromatyczny (1-bitowy) i RGB.
• Wybór koloru pędzla — widoczny w trybie RGB; ustawia bieżący kolor malowania.
• Przycinanie — pojawia się dla warstw Malowanie wystarczająco dużych, aby je przyciąć. Tryb przycinania pokazuje pomarańczowe uchwyty i przyciemnia obszar poza przycięciem; przeciągnij obszar lub uchwyty, a następnie zastosuj lub anuluj. Escape wychodzi z trybu przycinania przed opuszczeniem narzędzia Malowanie, a zastosowane przycięcia można cofnąć.

Skala

Kontrolka skali po prawej stronie obszaru roboczego dostosowuje powiększenie obszaru rysowania. To samo powiększenie można zmienić za pomocą Ctrl + / Ctrl - lub przewijając kółkiem myszy przy przytrzymanym Ctrl/Cmd.

Akcje

Akcje na poziomie projektu, widoczne po zalogowaniu lub podczas przeglądania w trybie tylko do odczytu.

• Gwiazdka — dodaj projekt do zakładek. Przycisk pokazuje bieżącą liczbę gwiazdek.
• Fork — tworzy kopię projektu na twoim koncie i od razu ją otwiera. Wymaga zalogowania.
• Udostępnij — menu rozwijane z następującymi opcjami:
  • Kopiuj link publiczny — kopiuje bezpośredni adres URL galerii do schowka. Wyłączone, jeśli projekt lub bieżący ekran jest prywatny.
  • Prezentacja — otwiera pełnoekranowy pokaz slajdów wszystkich ekranów w projekcie.
  • Zapisz jako — Plik tekstowy eksportuje otwartą kartę kodu, w tym własny kod. Obraz PNG i Obraz BMP eksportują wybrany ekran lub ekran karty kodu, jeśli żaden ekran nie jest wybrany.

Obszar rysowania

Obszar roboczy pokazuje ekrany projektu razem w wybranej skali. Każdy ekran pokazuje podgląd grafiki dla docelowego wyświetlacza.

Siatka

Kliknij Siatka po prawej stronie obszaru roboczego, aby przełączać między siatką 1 piksela, siatką 10 pikseli i brakiem siatki. Domyślna siatka 1 piksela pojawia się przy powiększeniu 300% lub większym; siatka 10 pikseli pojawia się przy 30% lub większym. Siatka jest tylko wizualna i nie ma zachowania przyciągania.

Interakcje myszą

Interakcja	Efekt
Kliknięcie pustego obszaru	Odznacza wszystkie warstwy
Kliknięcie warstwy	Zaznacza tę warstwę
Shift + kliknięcie	Dodaje warstwę do zaznaczenia lub ją z niego usuwa
Kliknięcie i przeciągnięcie pustego obszaru	Rysuje prostokąt zaznaczenia
Kliknięcie i przeciągnięcie wybranej warstwy	Przesuwa warstwę
Kliknięcie i przeciągnięcie uchwytu zmiany rozmiaru	Zmienia rozmiar wybranej warstwy
Przytrzymanie Shift podczas zmiany rozmiaru	Zachowuje oryginalne proporcje
Przytrzymanie Alt podczas zmiany rozmiaru	Zmienia rozmiar od środka
Kliknięcie zgrupowanej warstwy	Zaznacza wszystkie warstwy w grupie
Dwukrotne kliknięcie zgrupowanej warstwy	Zaznacza tylko tę pojedynczą warstwę
Shift + kliknięcie zgrupowanej warstwy	Dodaje wszystkich członków grupy do zaznaczenia
Dwukrotne kliknięcie Wielokąt / Trójkąt	Wchodzi w tryb edycji wierzchołków
Prawy przycisk myszy (narzędzie Malowanie)	Wymazuje piksele
Ctrl/Cmd + kółko myszy	Powiększa / pomniejsza, wyśrodkowane na kursorze
Kółko myszy (bez modyfikatora)	Przesuwa obszar rysowania
Przeciąganie środkowym przyciskiem	Przesuwa obszar rysowania

Upuszczanie obrazów

Możesz przeciągnąć plik PNG lub BMP bezpośrednio na obszar rysowania. Obraz jest importowany od razu z ustawieniami domyślnymi i umieszczany jako warstwa bitmapy (Malowanie).

Lista ekranów

Ekrany pojawiają się jako rozwijalne wpisy w drzewie Warstwy po lewej stronie, z zagnieżdżonymi pod nimi warstwami i grupami.

Dodawanie ekranów

Kliknij Dodaj ekran w nagłówku Warstwy, aby dodać nowy ekran. Nazwa jest generowana automatycznie jako Screen N z kolejnym dostępnym numerem.

Nawigacja między ekranami

Kliknij wiersz ekranu w drzewie Warstwy, aby zaznaczyć i ustawić fokus na tym ekranie. Użyj jego strzałki rozwijania, aby pokazać lub ukryć jego warstwy.

Zmiana kolejności ekranów

Przeciągnij wiersz ekranu w nowe miejsce. Kolejność jest zapisywana od razu.

Zmiana nazwy ekranu

Kliknij dwukrotnie tytuł nad ekranem w obszarze roboczym, aby edytować go w miejscu.

Menu kontekstowe (prawy przycisk myszy)

Kliknij prawym przyciskiem myszy tytuł nad ekranem, aby otworzyć jego menu kontekstowe:

Akcja	Opis
Duplikuj	Tworzy kopię ekranu i dodaje ją na końcu listy.
Opublikuj	Sprawia, że prywatny ekran jest widoczny w galerii.
Ustaw jako prywatny	Ukrywa ekran przed galerią.
Usuń	Usuwa ekran. Wymaga drugiego kliknięcia w celu potwierdzenia.

Lista warstw

Drzewo Warstwy zawiera listę ekranów, warstw i grup projektu. Rozwiń ekran, aby zobaczyć jego warstwy w kolejności renderowania (góra listy = góra stosu = rysowane jako ostatnie).

Akcje listy warstw

Akcja	Jak
Zaznacz warstwę	Kliknij jej wiersz
Zaznacz zakres	Kliknij jedną warstwę, a potem Shift + kliknij inną warstwę
Przełącz zaznaczenie	Ctrl/Cmd + kliknij warstwę
Zaznacz wszystko	Ctrl A
Zmień kolejność	Przeciągnij i upuść wiersz w nowe miejsce
Zmień kolejność klawiaturą	Zaznacz warstwę, a potem Ctrl ↑ / Ctrl ↓
Pokaż / ukryj	Kliknij ikonę oka po najechaniu
Zablokuj / odblokuj	Kliknij ikonę kłódki po najechaniu
Usuń	Zaznacz, a potem Delete lub przycisk Usuń w inspektorze

Grupy

Warstwy można grupować. Grupa pojawia się jako zwijalny wpis na liście warstw. Kliknij nagłówek grupy, aby zaznaczyć wszystkie należące do niej warstwy naraz. Ctrl/Cmd + kliknięcie nagłówka grupy przełącza wszystkich jej członków w bieżącym zaznaczeniu. Kliknij strzałkę rozwijania, aby pokazać lub ukryć warstwy należące do grupy w jej wierszu; zaznaczanie zakresu nadal obejmuje warstwy w zwiniętych grupach.

Akcja	Skrót
Grupuj wybrane warstwy	Ctrl G
Rozgrupuj	Ctrl Shift G
Zmień nazwę grupy	Kliknij dwukrotnie nazwę grupy w inspektorze

Możesz przeciągać pojedyncze warstwy do grup i z grup, upuszczając je wewnątrz lub na zewnątrz kontenera grupy na liście.

Inspektor

Panel inspektora znajduje się po prawej stronie. Jego zawartość zmienia się w zależności od stanu zaznaczenia. Użyj Ukryj inspektor lub Pokaż inspektor po prawej stronie obszaru roboczego, aby go przełączyć; wybór jest zapamiętywany w tej przeglądarce.

Ściągawka ze skrótów

Gdy nic nie jest zaznaczone, inspektor pokazuje listę skrótów klawiaturowych. To szybka ściągawka; pełna lista znajduje się w opisie Skróty klawiaturowe.

Jedna wybrana warstwa

Inspektor pokazuje:

• Ikona warstwy + nazwa — najedź, aby odsłonić ikonę edycji, a potem kliknij ją, aby zmienić nazwę w miejscu.
• Przyciski wyrównania — sześć przycisków, które ustawiają warstwę względem krawędzi wyświetlacza i środka:

Przycisk	Jedna warstwa	Wiele warstw
Wyrównaj do lewej	Przesuń do lewej krawędzi wyświetlacza	Wyrównaj wszystkie lewe krawędzie do warstwy najbardziej po lewej
Wyrównaj środki w poziomie	Wyśrodkuj poziomo na wyświetlaczu	Wyrównaj wszystkie środki w poziomie do wspólnego środka
Wyrównaj do prawej	Przesuń do prawej krawędzi wyświetlacza	Wyrównaj wszystkie prawe krawędzie do warstwy najbardziej po prawej
Wyrównaj do góry	Przesuń do górnej krawędzi wyświetlacza	Wyrównaj wszystkie górne krawędzie do najwyższej warstwy
Wyrównaj środki w pionie	Wyśrodkuj pionowo na wyświetlaczu	Wyrównaj wszystkie środki w pionie do wspólnego środka
Wyrównaj do dołu	Przesuń do dolnej krawędzi wyświetlacza	Wyrównaj wszystkie dolne krawędzie do najniższej warstwy

Gdy wybranych jest wiele warstw, wyrównanie odbywa się względem ramki ograniczającej wszystkie wybrane warstwy, a nie wyświetlacza. Każda warstwa przesuwa się tak, aby pasować do odpowiedniej krawędzi lub środka tych połączonych granic.

• Pola właściwości — wszystkie edytowalne właściwości dla wybranego typu warstwy. Typowe pola:

Pole	Typ	Warstwy
X, Y	Liczba	Wszystkie warstwy z pozycją
W, H	Liczba	Wszystkie warstwy z rozmiarem
X1, Y1, X2, Y2	Liczba	Linia
Promień / RX / RY	Liczba	Okrąg, Elipsa
Promień / Początek / Koniec / Szerokość	Liczba	Łuk
Obrót / Początek / Koniec / Wartość	Liczba	Łuk LVGL
Wypełnienie	Wartość logiczna	Prostokąt, Okrąg, Elipsa, Trójkąt
Odwrócony (XOR)	Wartość logiczna	Większość warstw kształtów
Kolor / Wypełnienie / Tło / Obramowanie	Kolor	Zależnie od platformy; tło tekstu jest ukryte lub ignorowane na platformach, które go nie obsługują
Czcionka	Wybór czcionki	Tekst, Obszar tekstowy, Przycisk, Pole wyboru
Tekst	Ciąg znaków	Tekst, Obszar tekstowy, Przycisk, Pole wyboru
Zaznaczone	Wartość logiczna	Pole wyboru
Nakładka	Wartość logiczna	Przyciemnia warstwę i pomija ją przy generowaniu kodu
Przezroczystość	Wartość logiczna	Obrazy RGB z przezroczystymi pikselami; zachowuje ich przezroczystość zamiast tła ekranu

W przypadku warstw tekstowych w U8g2, Flipper, CircuitPython i LVGL inspektor pokazuje też przyciski obrotu 0°, 90°, 180° i 270°. Obrót jest zgodny z ruchem wskazówek zegara, zachowuje środek granic warstwy i jest zachowywany w zapisanych projektach oraz wygenerowanym kodzie. Przyciski są ukryte na platformach bez natywnej obsługi obrotu tekstu.

• Przełącznik zmiennej (mały przełącznik obok pól liczbowych i kolorów) — oznacza właściwość jako zmienną, a nie literał w wygenerowanym kodzie.
• Akcje — przyciski operacji na obrazie dostępne na warstwach bitmapy (Malowanie):
  • Odbij w poziomie — odbija bitmapę względem osi pionowej.
  • Odbij w pionie — odbija bitmapę względem osi poziomej.
  • Obróć zgodnie z ruchem wskazówek zegara — obraca bitmapę o 90° w prawo.
  • Odwróć kolory — odwraca każdy piksel w bitmapie.
• Scal do bitmapy — renderuje wszystkie wybrane warstwy do jednej warstwy bitmapy (Malowanie). Warstwy źródłowe są usuwane i zastępowane jednym płaskim obrazem o rozmiarze całego wyświetlacza. Warstwy XOR/odwrócone są poprawnie komponowane podczas scalania.
• Usuń — usuwa wybraną warstwę lub warstwy.

Wiele wybranych warstw

Inspektor pokazuje liczbę wybranych warstw, przyciski wyrównania (do rozmieszczania względem siebie), przycisk Scal do bitmapy oraz przycisk Usuń.

Jeśli wszystkie wybrane warstwy należą do tej samej grupy, nazwa grupy jest pokazywana i można ją zmienić w miejscu.

Kod

Panel kodu znajduje się na dole edytora. W projektach z wieloma ekranami wybierz kartę ekranu, aby zobaczyć jego wygenerowany kod źródłowy w czasie rzeczywistym.

Panel używa kolorowania składni dla języka aktywnej platformy (C, C++, YAML itd.).

• Przycisk Kopiuj — kopiuje pełny wygenerowany kod do schowka, w tym własny prefiks i sufiks, które napisałeś(-aś) (zobacz poniżej).
• Przycisk Importuj — importuje plik źródłowy do ekranu otwartej karty kodu na obsługiwanych platformach. Działa najlepiej z kodem wygenerowanym przez sam Lopaka.

Edytowalny szablon kodu

Panel kodu jest podzielony na trzy strefy oddzielone komentarzami znaczników:

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

Strefa prefiksu (nad znacznikiem BEGIN) i strefa sufiksu (pod znacznikiem END) są w pełni edytowalne. Wpisz tam dowolny potrzebny kod — dyrektywy #include, deklaracje zmiennych, funkcję setup() lub cokolwiek innego, czego wymaga twój szkic. Wygenerowana sekcja pośrodku jest tylko do odczytu i aktualizuje się automatycznie, gdy edytujesz warstwy.

Twój prefiks i sufiks są zapisywane lokalnie w przeglądarce dla każdego ekranu i przywracane po ponownym wczytaniu strony. Przełączanie kart kodu wczytuje szablon należący do każdego ekranu.

Ustawienia kodu

Panel ustawień kodu znajduje się po prawej stronie panelu kodu. Kontroluje, jak generowany jest kod źródłowy.

Przełączniki wyjścia

Dostępne przełączniki zależą od platformy. Typowe to:

Ustawienie	Efekt
Funkcja opakowująca	Opakowuje wszystkie wywołania rysowania w nazwaną funkcję
Komentarze	Dodaje komentarz // layer name przed każdym wywołaniem rysowania
Uwzględnij czcionki	Dodaje #include lub deklaracje czcionek
Deklaruj obrazy	Dodaje deklaracje tablic bitmap
Deklaruj zmienne	Wyodrębnia zmienne właściwości warstw do typowanych zmiennych C
Wyczyść/wypełnij wyświetlacz	Dodaje wywołanie czyszczenia ekranu na początku funkcji
Deklaruj jako PROGMEM	Tylko U8g2 — umieszcza tablice bitmap w pamięci flash

Wybór składni

Na platformach z więcej niż jednym szablonem kodu nad przełącznikami pojawia się lista rozwijana Składnia:

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

Opcja Arduino jest domyślna. Opcje ESP-IDF generują kod, który możesz umieścić w komponencie ESP-IDF: tablice są deklarowane bez PROGMEM, a żaden setup() / loop() (ani app_main()) nie jest generowany, więc wywołujesz wygenerowane funkcje rysowania z własnego zadania. Pozostałe platformy mają jeden szablon i nie pokazują listy rozwijanej.

Pobieranie czcionek i obrazów

Gdy warstwy odwołują się do czcionek lub obrazów bitmapowych, na dole panelu ustawień kodu pojawiają się linki do pobrania. Kliknij link czcionki, aby pobrać plik .h lub .bdf. Kliknij link obrazu, aby pobrać bitmapę jako plik .bmp lub .h, w zależności od platformy.

Automatyczne zapisywanie

Edytor automatycznie zapisuje twoją pracę podczas rysowania. Zmiany są zapisywane w chmurze co sekundę po ostatniej edycji. Nie ma ręcznego przycisku zapisywania; zamknięcie karty lub przejście gdzie indziej jest bezpieczne, gdy obszar rysowania przestaje się zmieniać.

Tryb tylko do odczytu / galerii

Gdy otwierasz projekt, którego nie jesteś właścicielem (galeria lub udostępniony link), edytor działa w trybie tylko do odczytu. Narzędzia są ukryte, inspektor służy tylko do podglądu, a kod można kopiować, ale nie importować. Listą warstw nadal można się poruszać.