Graficzny interfejs użytkownika GUI: przykład na STM32F4DISCOVERY (1)

W artykule przedstawiamy podstawowe informacje związane z zaprojektowaniem interfejsu graficznego użytkownika i wygenerowaniem odpowiednich plików źródłowych gotowych do zaimplementowania w aplikacji wykorzystującej bibliotekę „STM32 embedded GUI library”. Docelowym układem testowym jest zestaw DevKit407 składający się z płytki STM32F4DISCOVERY oraz płytek rozszerzeniowych firmy Embest: DM-STF4BB (płytka bazowa) i DM-LCD35RT (płytka z wyświetlaczem) – fotografia 1.

 

Fot. 1

Fot. 1

 

Biblioteka „STM32 embedded GUI library” jest dostępna pod adresem.

 

Projektowanie części graficznej aplikacji – GUI

Graficzną część aplikacji można zaprojektować z wykorzystaniem programu Resource Editor For Embedded GUI Library (rysunek 2), który dostępny jest w archiwum wspomnianej biblioteki w katalogu Utilities\PC_SOFTWARE\ResourceEditorGUI.

 

 Rys. 2. Główne okno edytora GUI

Rys. 2. Główne okno edytora GUI

 

Nowy projekt GUI jest tworzony z menu File ? New ? New Project i na tym etapie należy podać jego nazwę i miejsce na dysku gdzie będzie on zapisany (pliki projektu i generowane kody źródłowe). Po zatwierdzeniu pojawia się okno dialogowe Resolution Settings, w którym wprowadzane są wymiary aktywnej części wyświetlacza w pikselach (rysunek 3) i każde nowe okienko dodawane w projekcie będzie miało takie właśnie wymiary.

Po wciśnięciu przycisku Create pojawia się kolejne okno proszące o wprowadzenie nazwy dla pierwszego okienka (rysunek 4). Warto przy tym dodać, że dodawanie kolejnych okienek do projektu wykonuje się z menu File ? New ? New Screen. Po wykonaniu powyższych czynności można przejść do projektowania aplikacji graficznej (rysunek 5).

 

Rys. 3. Określenie wymiarów okienek projektu 

Rys. 3. Określenie wymiarów okienek projektu

 

 Rys. 4. Wprowadzenie nazwy tworzonego okienka

Rys. 4. Wprowadzenie nazwy tworzonego okienka

 

Rys. 5. Gotowe do projektowania środowisko 

Rys. 5. Gotowe do projektowania środowisko

 

Wybrany edytor GUI reprezentuje sobą niewielki program oferujący dodanie 10 różnych obiektów graficznych i pozwalający w prosty i szybki sposób zaprojektować graficzną część aplikacji. Niestety nie jest ona na tyle rozbudowana, aby pozwolić na projektowanie zaawansowanych interfejsów, ale mimo to doskonale nadaje się do nauki sposobu tworzenia i funkcjonowania GUI.

Warto na początku zwrócić uwagę na kilka najważniejszych problemów z aplikacją i biblioteką co pozwoli zaoszczędzić czas przy implementowaniu GUI w układzie. Pierwsza sprawa dotyczy orientacji elementów – tylko dwa z nich (etykieta i suwak) mogą być zorientowane na 3 sposoby (wartość GL_HORIZONTAL, GL_LEFT_VERTICAL, GL_RIGHT_VERTICAL), a inne tylko umieszczane w pozycji poziomej (rysunek 6) – jest to ograniczenie samego edytora. Kolejna rzecz to układ współrzędnych – przy projektowaniu aplikacji w edytorze operuje się w układzie jak na rysunku 7, a wygenerowany kod źródłowy operuje w układzie jak na rysunku 8. Należy zapamiętać położenie i orientację natywnego układu współrzędnych pod który jest generowany kod przez edytor GUI i w którym operuje kontroler wyświetlacza, gdyż ma to istotne znaczenie przy rozwijaniu biblioteki o nowe możliwości. Pliki źródłowe obsługi obiektów graficznych z grupy GUI_HAL i GUI_Library oferowane przez bibliotekę posiadają funkcje, które operują na różnych układach i często wykonują niepotrzebną transformację do innych układów (łatwo się tutaj pogubić). Dlatego do samej biblioteki należy podejść z dystansem jak do czegoś co wymaga modyfikacji i uzupełnień nie umniejszając tego, że daje ona pogląd na problem i pozwala na łatwe wtajemniczenie się w funkcjonowanie GUI.

 

 Rys. 6. Zawartość przykładowego okienka

Rys. 6. Zawartość przykładowego okienka

 

Rys. 7. Układ współrzędnych obowiązujący przy projektowaniu w edytorze GUI 

Rys. 7. Układ współrzędnych obowiązujący przy projektowaniu w edytorze GUI

 

 Fot. 8. Natywne położenie i orientacja układu współrzędnych w jakim operuje kontroler SSD2119 wyświetlacza LCD

Fot. 8. Natywne położenie i orientacja układu współrzędnych w jakim operuje kontroler SSD2119 wyświetlacza LCD

 

Warto odnotować również to, że zapisywana w kodzie wynikowym pozycja elementu zawsze dotyczy jego lewego górnego rogu (czerwona kropka na rysunku 6). Problem może się pojawić przy suwakach w orientacji GL_RIGHT_VERTICAL, przy których wynikowa pozycja dotyczy nie części samego suwaka, ale tekstu (patrz suwak SlideBar04) – należy o tym pamiętać przy elementach gdzie tekst znajduje się na zewnątrz obiektu.

W przypadku tworzenia obiektu combobox należy pamiętać aby nie używać spacji przy dodawaniu elementów do listy (wynika to stąd, że nazwy te są używane przy generowaniu funkcji event handler) – rysunek 9.

 

 Rys. 9. Dodawanie elementów do listy rozwijanej combobox

Rys. 9. Dodawanie elementów do listy rozwijanej combobox

 

Ostatnią łatwo zauważalną wadą (lub niedopracowaniem) jest konieczność uważnego używania klawiszu Delete, gdyż przy edycji parametrów obiektu w okienku Properties zamiast usunąć symbol można usunąć sam obiekt.

Na koniec można wymienić kilka interesujących właściwości. Dla obiektu typu przycisk istnieje możliwość powiązania akcji kliknięcia z tym które okienko zostanie wyświetlone – odpowiada za to parametr LinkScreen na panelu Properties. Przy dodawaniu ikonek i obrazów można załadować dowolny plik jpg/png, który będzie zapisany w pamięci mikrokontrolera jako bitmapa. W przypadku obiektów typu wykres można wykorzystać gotowe funkcje biblioteki do zmiany ich wartości (przekazywana jest tablica wartości) i łatwo zaktualizować obraz.

 

 Rys. 10. Przykładowy projekt aplikacji GUI

Rys. 10. Przykładowy projekt aplikacji GUI

 

Wygenerowanie plików źródłowych

Kiedy część graficzna aplikacji została zaprojektowana to można wygenerować odpowiednie kody w języku C z menu Build ? Generate Code (klawisz F5) w wyniku czego w katalogu Output projektu będą utworzone trzy pary plików źródłowych i nagłówkowych:

  • pictures (.c, .h)
  • uiappuser (.c, .h)
  • uiframework (.c, .h)

Plik pictures.c zawiera deklaracje tablic w których zapisane są odpowiednie nagłówki oraz mapy bitowe ikonek i obrazów używanych w GUI, a każdy piksel jest zapisany w formacie RGB565 (2 bajty na piksel w tablicy typu char).

Plik uiappuser.c zawiera definicje funkcji wywoływanych automatycznie przy wystąpieniu określonych zdarzeń związanych z poszczególnymi obiektami GUI. Programista może umieszczać w nich własny kod wykonywany np. po kliknięciu przycisku lub przeciągnięciu suwaka.

W ogólnym przypadku może być wygenerowanych 7 rodzajów takich funkcji:

Plik uiframework.c zawiera trzy rodzaje funkcji:

Jan Szemiet

Autor: