U8g2 Image Converter

Zamień PNG, BMP lub GIF w tablicę XBMP 1-bitową dla SSD1306 lub dowolnego innego monochromatycznego wyświetlacza, który napędza U8g2, i zobacz ją na symulowanym ekranie, zanim cokolwiek wgrasz.

Przekonwertuj obraz

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

Co robi konwerter

Lopaka to edytor grafiki dla wyświetlaczy embedded. Zaimportuj obraz do projektu U8g2, a stanie się warstwą bitmapy jednobitowej na obszarze rysowania o rozmiarze twojego wyświetlacza, gdzie możesz ją przesuwać, przycinać, odrysowywać pojedyncze piksele narzędziem Paint oraz umieszczać wokół niej tekst i kształty. Panel kodu dotrzymuje kroku: deklaruje tablicę i emituje wywołanie drawXBMP() dla miejsca, w którym warstwa aktualnie siedzi.

To część, którą zwykły konwerter zostawia tobie. Zdobycie bajtów to jeden krok; świadomość, że logo jest o 4 piksele za nisko albo że etykieta zderza się z nim przy tym rozmiarze czcionki, normalnie wymaga kompilacji i wgrania. Tutaj wymaga przeciągnięcia warstwy.

Jak naprawdę działa monochromatyczna bitmapa

Jeden bit na piksel, nie jeden bajt

Panel SSD1306 ma jeden bit stanu na piksel: zaświecony lub ciemny. Nie ma szarości ani koloru, więc bitmapa dla niego też przechowuje jeden bit na piksel, osiem pikseli upakowanych w każdym bajcie, wiersz po wierszu. Ekran 128x64 to w tej formie 1024 bajty. Przechowaj ten sam obraz jako jeden bajt na piksel, a stanie się 8192 bajtami, co na klasycznej płytce AVR jest większą ilością RAM, niż masz.

XBM, XBMP i skąd bierze się PROGMEM

XBM to ten upakowany format jednobitowy i to jego oczekuje U8g2 od drawXBM(). XBMP to te same dane zadeklarowane w pamięci flash zamiast w RAM: przy włączonym Declare as PROGMEM Lopaka oznacza tablicę U8X8_PROGMEM i wywołuje drawXBMP(), które czyta ją z pamięci programu. Na celu Arduino zwykle tego chcesz, bo bitmapy są stałe, a RAM jest zasobem rzadkim. Szablon ESP-IDF emituje zamiast tego zwykłą tablicę uint8_t i drawXBM().

Próg, dithering i odwrócenie

Obraz źródłowy ma zwykle 256 odcieni na kanał, a wyświetlacz ma dwa, więc coś musi zdecydować, które piksele przetrwają. Zwykły próg wysyła wszystko powyżej wartości odcięcia na biel, a wszystko poniżej na czerń, co jest dobre dla logo i grafiki liniowej o twardych krawędziach. Dithering zamiast tego rozprasza błąd zaokrąglenia na sąsiadujące piksele, więc gradient czyta się jako tekstura, a nie pas. Jasność i kontrast przesuwają wartość odcięcia, zanim wydarzy się którekolwiek z nich, a Grayscale first pomaga, gdy kolorowy obraz ma odcienie o podobnej postrzeganej jasności, jak czerwień na bieli.

Tryb ditheringu	Kiedy go używać
Floyd-Steinberg	Szczegółowe zdjęcia i gładkie gradienty
Atkinson	Jaśniejszy dither o wysokim kontraście, który dobrze działa na małych wyświetlaczach
Bayer 8x8	Regularny wzór pikseli o przewidywalnej teksturze
No dithering	Czysta grafika liniowa, logo i pełne wypełnienia

Dwie osobne kontrolki odwrócenia istnieją dlatego, że są dwa osobne problemy. Invert palette zamienia czerń i biel przed ditheringiem, na wypadek gdy konwerter traktuje twoje tło jako temat. Invert result odwraca gotową bitmapę, na wypadek gdy podgląd jest dobry, ale panel pokazuje ją odwrotnie.

Wyświetlacze i płytki

U8g2 to monochromatyczna biblioteka graficzna obejmująca długą listę kontrolerów OLED i LCD, a Lopaka celuje w jej graficzne API. Znane to SSD1306, SH1106 i SSD1309, czyli większość tego, co jest dostarczane na małym module OLED na I2C lub SPI. Sprawdź listę konstruktorów w źródle nadrzędnym, żeby potwierdzić dokładny panel.

Lopaka nie wykrywa ani nie napędza sprzętu. Generuje kod rysowania; ty wybierasz konstruktor U8g2, który pasuje do kontrolera, rozdzielczości, magistrali i pinów, a potem sam wywołujesz begin() i uruchamiasz pętlę odświeżania. Ustaw rozmiar ekranu Lopaka na tę samą rozdzielczość logiczną co ten konstruktor, a współrzędne obszaru rysowania będą pasować do panelu.

Konwertowanie obrazu

1. Utwórz projekt, wybierz U8g2 jako platformę i ustaw rozmiar ekranu na rozdzielczość wyświetlacza.
2. Otwórz narzędzie Image i wrzuć PNG, BMP lub GIF albo wklej istniejącą tablicę bajtów XBMP.
3. Przytnij i zmień rozmiar, a potem ustaw jasność, kontrast i dithering, gdy podgląd się aktualizuje.
4. Zaimportuj bitmapę, ustaw ją na obszarze rysowania i dodaj wokół niej tekst lub kształty.
5. Skopiuj wygenerowane źródło, które deklaruje tablicę i wywołuje drawXBMP w tej pozycji.

Jeśli bitmapa jest pusta lub przesunięta na urządzeniu, sprawdź argumenty drawXBMP, wypełnienie wierszy i pętlę bufora.

Jak wygląda wyjście

Ikona 16x16 umieszczona w punkcie x 8, y 8 z etykietą obok niej, na ekranie o nazwie Status. To szablon Arduino (Cpp), więc tablica jest zadeklarowana jako PROGMEM i rysowana przez drawXBMP.

static const unsigned char image_wifi_bits[] U8X8_PROGMEM = {0x00,0x00,0x00,0x00,0xf8,0x1f,0xfc,0x3f,0x0e,0x70,0x03,0xc0,0x00,0x00,0xf0,0x0f,0xf8,0x1f,0x1c,0x38,0x06,0x60,0x00,0x00,0xc0,0x03,0xe0,0x07,0xc0,0x03,0x00,0x00};
void drawStatus(void) {
    u8g2.setFontMode(1);
    u8g2.setBitmapMode(1);
    // wifi
    u8g2.drawXBMP(8, 8, 16, 16, image_wifi_bits);
    // label
    u8g2.setFont(u8g2_font_6x10_tr);
    u8g2.drawStr(32, 21, "Connected");
}

Ten sam ekran wyeksportowany szablonem ESP-IDF (C). Bajty bitmapy są identyczne; zmienia się tylko deklaracja i API wokół nich.

static const uint8_t image_wifi_bits[] = {0x00,0x00,0x00,0x00,0xf8,0x1f,0xfc,0x3f,0x0e,0x70,0x03,0xc0,0x00,0x00,0xf0,0x0f,0xf8,0x1f,0x1c,0x38,0x06,0x60,0x00,0x00,0xc0,0x03,0xe0,0x07,0xc0,0x03,0x00,0x00};
void drawStatus(void) {
    u8g2_ClearBuffer(&u8g2);
    u8g2_SetBitmapMode(&u8g2, 1);
    u8g2_SetFontMode(&u8g2, 1);

    // wifi
    u8g2_DrawXBM(&u8g2, 8, 8, 16, 16, image_wifi_bits);
    // label
    u8g2_SetFont(&u8g2, u8g2_font_6x10_tr);
    u8g2_DrawStr(&u8g2, 32, 21, "Connected");
    u8g2_SendBuffer(&u8g2);
}

Czcionka w obu przykładach to jeden z wbudowanych symboli U8g2, więc nie potrzebuje pobranego nagłówka. Czcionka spoza tej listy jest eksportowana jako nagłówek, który pobierasz obok szkicu.

Pytania

Jak przekonwertować obraz na bitmapę U8g2?

Zaimportuj obraz do projektu U8g2. Lopaka konwertuje go na tablicę XBM 1-bitową, pokazuje na obszarze rysowania o rozmiarze twojego wyświetlacza i generuje deklarację oraz wywołanie drawXBMP, które umieszcza go w pozycji, do której go przeciągnąłeś.

Czym jest XBMP i dlaczego U8g2 go używa?

XBM pakuje jeden piksel w jeden bit, osiem pikseli na bajt, wiersz po wierszu. Monochromatyczny OLED ma dokładnie jeden bit stanu na piksel, więc tablica jest bezpośrednią kopią tego, co pokazuje panel. XBMP to te same dane zadeklarowane w pamięci flash przez U8X8_PROGMEM, dlatego buildy Arduino łączą je z drawXBMP zamiast drawXBM.

Z którymi wyświetlaczami to działa?

Z każdym monochromatycznym wyświetlaczem, który samo U8g2 obsługuje, w tym OLED SSD1306, SH1106 i SSD1309. Lopaka generuje kod rysowania; ty wybierasz konstruktor U8g2 dla kontrolera, magistrali i pinów oraz sam wywołujesz begin() i pętlę odświeżania.

Co dithering robi ze zdjęciem?

Monochromatyczny wyświetlacz nie ma szarości, więc każdy piksel musi skończyć jako czarny lub biały. Dithering rozprasza błąd na sąsiadujące piksele, więc gradient czyta się jako tekstura zamiast twardej krawędzi. Floyd-Steinberg i Atkinson pasują do zdjęć; logo i grafika liniowa zwykle wyglądają czyściej przy wyłączonym ditheringu.

Czy mogę używać istniejących tablic bitmap?

Tak. Kreator importu przyjmuje surową tablicę bajtów XBMP wklejoną z istniejącego firmware. Podaj szerokość i wysokość, odwróć Swap bytes, jeśli podgląd wygląda na pomieszany, a stanie się edytowalną warstwą, którą możesz odrysować piksel po pikselu narzędziem Paint.

Czy generuje kod ESP-IDF tak samo jak Arduino?

Tak. Platforma U8g2 ma dwa szablony: Arduino (Cpp), który emituje tablice U8X8_PROGMEM i u8g2.drawXBMP(), oraz ESP-IDF (C), który emituje zwykłe tablice uint8_t i u8g2_DrawXBM() przeciwko interfejsowi C. Przełączaj między nimi w ustawieniach kodu.

Czy to jest bezpłatne?

Tak. Konwertowanie obrazów i generowanie kodu U8g2 to część bezpłatnego planu Basic, wraz ze społecznościową biblioteką ikon i paroma projektami w chmurze. 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 obrazie

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

Przekonwertuj obraz