Importowanie obrazów

Lopaka pozwala dodawać obrazy, GIF-y i filmy do projektu ekranu wbudowanego i konwertuje je do formatu, którego potrzebuje twoja platforma — czy to bitmapa XBMP 1-bitowa dla monochromatycznego OLED-a, czy tablica RGB565 dla kolorowego TFT.

Import możesz rozpocząć na dwa sposoby:

• Kliknij narzędzie Obraz na pasku narzędzi, aby otworzyć Kreator importu.
• Przeciągnij plik PNG lub BMP bezpośrednio na obszar rysowania, aby pominąć kreator i zaimportować z ustawieniami domyślnymi.

Kreator importu

Kreator otwiera się jako okno modalne. Naciśnij Escape lub kliknij poza nim, aby w dowolnym momencie anulować.

Krok 1 — Wybierz źródło

Wybierz tryb importu. Dostępność zależy od aktywnej platformy.

Pakiety ikon

Przeglądaj wbudowaną bibliotekę ikon monochromatycznych pogrupowanych w zestawy (strzałki, symbole interfejsu, pogoda itd.). Sekcja Bieżący projekt u góry pokazuje obrazy, które już zaimportowałeś w tej sesji — kliknij dowolny z nich, aby użyć go ponownie bez ponownego przesyłania.

Użyj wyszukiwania, aby filtrować pakiety ikon i obrazy bieżącego projektu po nazwie ikony.

Kliknij ikonę, aby od razu umieścić ją na obszarze rysowania. Kreator zamknie się, a warstwa zostanie dodana.

Kiedy używać: potrzebujesz standardowej ikony interfejsu — baterii, Wi-Fi, strzałek, znaczników wyboru — i nie chcesz przygotowywać pliku obrazu.

Prześlij plik

Przeciągnij jeden lub więcej plików do strefy upuszczania albo kliknij Przeglądaj pliki, aby wybrać je z systemu plików. Akceptowane formaty obejmują obrazy rastrowe, GIF, wideo MP4/MOV z H.264 oraz wideo WebM z VP8, VP9 lub AV1.

• Wiele plików — wszystkie pliki trafiają do kolejki. Możesz wyświetlić podgląd każdego z nich, ale ustawienia dotyczą wszystkich obrazów naraz.
• Pliki GIF — każda klatka jest automatycznie wyodrębniana jako osobny obraz.
• Pliki wideo — wczytuj po jednym filmie naraz. Import wideo jest dostępny na platformach obsługujących animacje.

Kiedy używać: masz własne logo, ikonę lub zdjęcie, które chcesz wyświetlić na ekranie.

Wprowadź tablicę bajtów

Wklej bezpośrednio surową tablicę bajtów XBMP — taką, jaką zwykle tworzą narzędzia do konwersji obrazów lub jaką można znaleźć w istniejącym oprogramowaniu układowym. Wpisz Szerokość i Wysokość bitmapy, włącz Zamień bajty, jeśli kolejność bajtów nie odpowiada podglądowi, i obserwuj, jak podgląd na żywo aktualizuje się podczas pisania. Przykładowe dane wejściowe:

0xFF, 0x81, 0x81, 0x81, 0xFF

Kiedy używać: migrujesz z istniejącego kodu oprogramowania układowego, który już zawiera tablice bitmap, albo otrzymałeś bitmapę z narzędzia eksportującego surowe dane bajtowe.

Animacja

Użyj tej opcji, aby dodać wbudowaną animację klatkową zamiast konwertować plik obrazu. Zobacz Animacje, aby poznać pełny przebieg pracy i zachowanie wygenerowanego kodu.

Krok 2 — Dostosuj w edytorze obrazów

Po przesłaniu plików kreator przechodzi do edytora obrazów. Edytor wygląda i zachowuje się inaczej w zależności od tego, czy przesłałeś jeden plik, czy wiele.

Jeden obraz

Gdy przesyłasz dokładnie jeden plik, wyświetla się pełny edytor:

• Nazwa jest edytowalna — ustaw teraz nazwę zmiennej C (np. wifi_icon → const uint8_t wifi_icon[]).
• Wyświetlają się kontrolki Wymiary — zmień rozmiar, a obszar przycinania zaktualizuje się odpowiednio.
• Obszar przycinania jest aktywny — przeciągnij niebieski prostokąt, aby zaznaczyć tylko część obrazu.

Wszystko, co ustawisz, zostanie zastosowane do tego jednego obrazu po kliknięciu Importuj.

Wiele obrazów

Gdy przesyłasz więcej niż jeden plik — albo przesyłasz GIF — edytor przełącza się w tryb wielu obrazów:

• Po lewej stronie pojawia się pasek miniatur. Kliknij dowolną miniaturę, aby wyświetlić jej podgląd w edytorze.
• Każda miniatura ma pole wyboru. Wszystkie obrazy są początkowo zaznaczone. Odznacz dowolny, aby wykluczyć go z importu.
• Zaznacz wszystko — pojawia się w nagłówku paska, gdy co najmniej jeden obraz jest odznaczony. Kliknij, aby przywrócić pełne zaznaczenie.
• Nazwa nie jest edytowalna — jest automatycznie wyprowadzana z nazwy pliku. W razie potrzeby zmień nazwy warstw w inspektorze po zaimportowaniu.
• Wymiary i przycinanie nie są wyświetlane. Każdy obraz jest przy imporcie automatycznie dopasowywany do rozmiaru wyświetlacza, niezależnie od pozostałych.
• Wszystkie pozostałe ustawienia — próbkowanie, jasność, kontrast, dithering, odwrócenie — dotyczą każdego zaznaczonego obrazu po kliknięciu Importuj.

Pliki GIF

GIF jest traktowany jako wiele obrazów. Każda klatka jest automatycznie wyodrębniana i pojawia się jako osobny wpis na pasku miniatur pod nazwą basename_frame_1, basename_frame_2 itd. GIF z jedną klatką zachowuje tylko nazwę bazową.

Oznacza to, że możesz zaimportować animowaną ikonę jako sekwencję warstw bitmap — po jednej na klatkę — gotową do cyklicznego odtwarzania w oprogramowaniu układowym.

Pliki wideo

Film pokazuje do 10 klatek podglądu rozmieszczonych na jego osi czasu. Użyj tych podglądów, aby dostosować te same ustawienia zmiany rozmiaru, przycinania, jasności, kontrastu, odwrócenia, próbkowania i ditheringu, których używa się dla obrazów. Podglądy zmieniają tylko widok edytora; nie można ich zaznaczać pojedynczo.

Ustaw wyjściową liczbę Klatek na sekundę od 1 do 60 i sprawdź wynikowy czas trwania, liczbę klatek, przetworzone wymiary oraz szacowany rozmiar w wersji monochromatycznej. Import wideo jest ograniczony do 1000 klatek wyjściowych i 5 MiB. Zmniejsz FPS lub wymiary klatek, gdy którykolwiek limit zostanie przekroczony.

Kliknij Otwórz edytor, aby przetworzyć skonfigurowane klatki i otworzyć je jako jedną animację w Edytorze animacji. Film jest dekodowany w kolejności osi czasu i nie tworzy osobnego zasobu obrazu ani warstwy obszaru rysowania dla każdej klatki.

Powiększenie

Przeciągnij suwak powiększenia, aby powiększyć podgląd (0,5× do 10×). Kliknij suwak dwukrotnie, aby zresetować do 1×. Nie wpływa to na eksportowany obraz — to tylko pomoc w podglądzie.

Tryb koloru

Widoczny na platformach obsługujących zarówno tryb monochromatyczny, jak i kolorowy (np. TFT_eSPI). Przełączaj między:

• Monochromatyczny — XBMP 1-bitowy, bardzo kompaktowy. Każdy piksel jest włączony albo wyłączony. Obraz jest poddawany ditheringowi lub progowaniu do czerni i bieli.
• RGB — RGB565, 2 bajty na piksel. Zachowuje kolor. Używaj tego dla kolorowych wyświetlaczy.

Platformy obsługujące tylko jeden tryb automatycznie blokują przełącznik.

Wymiary

Ustaw docelową szerokość i wysokość. Edycja jednej wartości skaluje drugą proporcjonalnie.

• Resetuj — przywraca oryginalne wymiary obrazu.
• Dopasuj do ekranu — skaluje obraz, aby zmieścił się w bieżącym rozmiarze wyświetlacza przy zachowaniu proporcji.

Obszar przycinania

Niebieski prostokąt zaznaczenia nakłada się na podgląd. Importowany jest tylko obszar wewnątrz niego.

• Przeciągnij środek prostokąta, aby zmienić jego położenie.
• Przeciągnij dowolny róg, aby zmienić jego rozmiar.
• Edytuj pola X / Y / W / H bezpośrednio, aby precyzyjnie sterować.

Kiedy używać przycinania: masz duży obraz i potrzebujesz tylko określonego regionu — np. ikony paska stanu wewnątrz zrzutu całego ekranu albo pojedynczego glifu z arkusza sprite'ów.

Rozmiar w bajtach

Wskaźnik Rozmiar w bajtach poniżej podglądu aktualizuje się na żywo i pokazuje, ile RAM zajmie przycięta bitmapa:

• Monochromatyczny: 1 bit na piksel, upakowany w bajty.
• RGB: 2 bajty na piksel (RGB565).

Próbkowanie

Steruje algorytmem używanym, gdy obraz jest skalowany w dół do wymiarów docelowych:

Tryb	Kiedy używać
Wysoka jakość	Najlepszy domyślny, zwłaszcza przy zmniejszaniu zdjęć lub szczegółowej grafiki
Bilinearne	Gładka, szybsza zmiana rozmiaru dla obrazów ogólnych
Najbliższy sąsiad	Pixel art i ikony, w których ostre krawędzie powinny pozostać wyraźne

Domyślnie wybrana jest Wysoka jakość.

Jasność i kontrast

Przesuń jasność od −100 % do +100 % i kontrast od −100 % do +100 %. Kliknij dwukrotnie dowolny suwak, aby zresetować do 0.

Kiedy używać: zdjęcie po konwersji do trybu monochromatycznego wygląda na wyblakłe — zwiększ kontrast, aby ciemne piksele były ciemniejsze, a jasne jaśniejsze. Jeśli logo ma jasne tło, które przenika do bitmapy, zwiększ kontrast lub zmniejsz jasność, aby przesunąć je do bieli.

Najpierw skala szarości

Konwertuje obraz do skali szarości przed progowaniem lub ditheringiem. Włącz to, gdy obraz źródłowy jest kolorowy, a automatyczna konwersja daje nieoczekiwany wynik — na przykład czerwone logo na białym tle, w którym czerwień i biel mają podobną postrzeganą jasność.

Dithering (tylko monochromatyczny)

Wybierz, jak odcienie są konwertowane do czerni i bieli:

Tryb	Kiedy używać
Floyd-Steinberg	Szczegółowe zdjęcia i gładkie gradienty
Atkinson	Lżejszy dithering o wysokim kontraście, dobry dla małych wyświetlaczy
Bayer 8x8	Regularny wzór pikseli o przewidywalnej teksturze
Bez ditheringu	Czysta grafika liniowa, logo i jednolite wypełnienia

Dostosuj jasność i kontrast, aby kontrolować, które piksele znajdą się po każdej stronie konwersji do czerni i bieli.

Odwróć paletę (tylko monochromatyczny)

Zamienia czerń i biel przed etapem ditheringu. Użyj tego, gdy obraz źródłowy ma biały symbol na czarnym tle, ale wyświetlacz renderuje go odwrotnie, albo gdy automatyczne progowanie traktuje niewłaściwy kolor jako pierwszy plan.

Odwróć wynik

Odwraca końcową bitmapę po całym przetwarzaniu. Użyj tego, gdy obraz wygląda poprawnie w podglądzie, ale na fizycznym wyświetlaczu jest renderowany odwrotnie — na przykład na wyświetlaczach, w których kolor tła jest biały, a domyślny jest czarny.

Po zaimportowaniu

Każdy zaimportowany obraz staje się warstwą Malowanie (bitmapa) na obszarze rysowania. Nazwa warstwy odpowiada nazwie zmiennej użytej w wygenerowanym kodzie. Animacje stają się natomiast warstwami animacji.

Możesz nadal edytować bitmapę narzędziem Malowanie — rysuj lub wymazuj pojedyncze piksele bezpośrednio.