Jak wyświetlić kolorowy obrazek na wyświetlaczu 1.8 TFT ILI9163.

Ponieważ udało mi się opanować konwersję kolorów z RGB888 do RGB565  i jej adaptację na wyświetlaczu ILI9193. Niniejszym czynię wpis, w którym pokażę drogę jaką trzeba przebyć od pobrania dowolnego obrazka z internetu do jego wyświetlenia na kolorowym wyświetlaczu TFT. Motywem przewodnim , który zostanie wyświetlony będzie zamieszczony obok komiksowy obrazek z dwoma znanymi Herosami. Zobaczymy jak nasz wyświetlacz poradzi sobie z tym obrazkiem i paletą barw. Czy choć trochę wyświetlony obrazek będzie przypominał pierwowzór ?? Zapraszam do zabawy.

Bohaterami od strony sprzętowej będzie wyświetlacz 1.8 o rozdzielczości 160x120 i 16-bitowej palecie barw oparty na chipsecie ILI9163 z kartą SD na pokładzie :

Wyświetlaczem tym obsadzimy moją nową płytkę developerską dla PIC32MM Microchipa i płytkę developerską dla EFM32TG11 Silicon Labs.

Wyświetlacz jest jak na razie stosunkowo łatwo dostępny szczególnie na znanym portalu aukcyjnym bardzo daleko wschodnim :). Cena u nas ok 25 zł , za granicą ok 15 zł. 

Drugim bohaterem naszej zabawy będzie MCU firmy Silicon Labs z nowej serii EFM32TG11 a jest to dokładnie : EFM32TG11B120F128GQ48 ARM Cortex-M0+. I taki MCU znajdziemy na mojej płytce developerskiej. Projekt płytki jest dostępny dla każdego bezpłatnie.

Przejdźmy zatem do konkretów. Pierwszym krokiem zabawy jest upatrzenie sobie obrazka z internetu. Najlepiej aby miał kształt prostokąta. Standardowo obrazki są w formacie 24-bitowym RGB888. Na naszym wyświetlaczu wyświetlimy natomiast obrazek w standardzie RGB565 czyli 16 bitowym (5+6+5 = 16). Aby dokonać konwersji posłużymy się ogólnie dostępnymi narzędziami takimi jak np. LCD Image Converter

Pomimo, że program ten jest dedykowany dla systemu Windows, to bez problemu uruchamia się w systemie Linux z użyciem nakładki Wine, którą trzeba sobie dodatkowo doinstalować z repozytorium .

Ściągamy zatem nasz obrazek z nagłówka artykułu na dysk lokalny. 

Kolejną czynnością będzie przekonwertowanie wymiarów obrazka do formatu 160x128 pixeli. W tym celu uruchamiamy pierwszy lepszy program, ja posłużę się aplikacją webową dostępną na stronie : Konwersja zdjęć do zadanego wymiaru.

Ładujemy do aplikacji nasz lokalny obrazek i ustawiamy docelowy rozmiar obrazka na 160x128 px. Odznaczamy znak wodny i klikamy Wykonaj. Wyskoczy nam okienko nowej strony z linikiem do pobrania z przekonwertowanym obrazkiem :

Pobieramy obrazek w wymiarach 160x128 na dysk lokalny. I to będzie nasze źródło dalszych działań. Mamy obrazek przycięty do rozmiarów naszego wyświetlacza teraz czas na konwersję kolorów.

Uruchamiamy LCD Image Converter :

Wybieramy opcję File --> Open i wskazujemy na nasz przycięty obrazek. Ja musiałem w Linuxie przenieść plik do wirtualnego dysku Wine C:

Po poprawnym wgraniu obrazka zobaczymy taki widok :

Wchodzimy w opcje : Options --> Conversion, otwiera nam się nowe okienko :

Wchodzimy w zakładkę Image i ustawiamy wszystko jak na obrazku poniżej :

Preset powinien być ustawiony na R5G6B5.

Klikamy na dole po lewej Show Preview, otwiera się okienko jak poniżej :

Zaznaczamy myszką dokładnie wszystkie cyfry i kopiujemy do schowka systemowego  CTRL+C

Uruchamiamy środowisko SS4 (Simplicity Studio 4) , wchodzimy do katalogu src naszj biblioteki dla wyświetlacza ILI9163 i tworzymy nowy plik nagłówkowy z rozszerzeniem .h. Nazwijmy go heros.h.

W pliku heros.h tworzymy pustą tablicę uint16_t jak na obrazku powyżej. Do tej tablicy kopiujemy ze schowka systemowego za pomocą skrótu CTRL + V, dane 16 bitowe uzyskane z programu LCD Image Converter

Po skopiowaniu danych otrzymamy obrazek jak poniżej :

I to już tyle od strony operacji na obrazku. Teraz najfajniejsze czyli jak nasze dzieło po konwersjach wyświetlić na wyświetlaczu.
Do pliku main.c biblioteki ILI9163 dodajemy #define "heros.h". Bibliotekę uzupełniłem o funkcję wyświetlającą obrazek w formacie RGB565 . Użycie jej wygląda bardzo prosto :

DrawBitmapRGB565(heros, 160, 128, 0, 0);

Trzeba jednak zauważyć , że w funkcji dodałem zamianę miejscami pola R i B bo to co wyszło z programu konwertującego nie za bardzo się podobało wyświetlaczowi w tym zakresie.

Poniżej efekt wyświetlania naszego obrazka, trzeba tylko pamiętać o właściwej orientacji wyświetlacza i ustawienie tego parametru w programie :

Efekt jest całkiem fajny jak na nie optymalizowany wymiar źródłowego obrazka. Od razu apetyt rośnie na większą rozdzielczość wyświetlacza i rozmiar, no ale nie dajmy się zwariować. Generalnie cieszyłem się jak dziecko kiedy obrazek namalował się na wyświetlaczu. I z tego punktu widzenia zabawę uważam za udaną. Nasz wyświetlacz po rewersie ma gniazdo na kartę SD, więc do przechowywania obrazków  w sam raz.

W linkach mamy kompletny projekt w postaci spakowanej. Po rozpakowaniu importujemy go do środowiska SS4, a jak to się robi pokazałem tutaj

Pozdrawiam
picmajster.blog@gmail.com

Linki:

Program do konwersji bitmap do C dla Win.

Konwersja zdjęć do zadanego wymiaru.
Biblioteka ILI9163 dla EFM32TG11