Graficzny interfejs użytkownika GUI: prosta aplikacja do rysowania miniPAINT (6)

W artykule przedstawiono przykładową aplikację, która pozwala użytkownikowi metodą dotykową rysować na ekranie wyświetlacza LCD. Przedstawiona aplikacja bazuje na bibliotece STM32 Embedded GUI, która na potrzeby aplikacji została odpowiednio zmodyfikowana.

Fot. 1. Elementy składowe układu testowego

Fot. 1. Elementy składowe układu testowego

 

Fot. 2. Wygląd układu testowego

Fot. 2. Wygląd układu testowego

 

Definicje komponentów

Aplikację zrealizowano z wykorzystaniem trzech rodzajów komponentów. Pierwszy komponent to przycisk z etykietą (zdefiniowany w bibliotece Embedded GUI), a drugi to przycisk z kolorem (poniższe struktury są zdefiniowane w pliku graphicObjectTypes.h):

Trzeci użyty komponent to pole, w którym odbywa się rysowanie:

Oprócz zdefiniowania nowych komponentów wymagane jest jeszcze poszerzenie definicji typu wyliczeniowego GL_ObjType:

Tworzenie i wyświetlanie komponentów

Tworzenie komponentu ButtonColor wygląda podobnie jak tworzenie komponentu Button z jedną różnicą, zamiast przypisania tekstu jest przypisywany kolor. Za jego wyświetlanie odpowiada funkcja (plik graphicObject.c):

W oddzielnym pliku Drawbox.c zdefiniowano następujące funkcje:

  • ClearDrawbox() – czyszczenie obszaru w którym odbywa się rysowanie,
  • NewDrawbox() – tworzenie komponentu o zadanych wymiarach,
  • SetCurrentColor() – ustawienie bieżącego koloru,
  • SetDrawboxVisible() – wyświetlanie komponentu.

Oprócz powyższych zdefiniowano również funkcję rysującą „punkty”:

Integracja komponentu

Aby skorzystać z nowych komponentów należy uzupełnić warstwę Library o kilka elementów. Pierwsza modyfikacja to poszerzenie funkcji AddPageControlObj() o dwa dodatkowe warunki:

oraz funkcję GetObjSize():

Dodanie nowej opcji w bloku switch funkcji CallPreEvents():

Oraz w bloku switch funkcji CallEvent():

Budowa interfejsu

W pliku GxFreeGUI_Paint.c zdefiniowano przykładowy układ aplikacji rysującej:

Ostatnia funkcja jest wywoływana z poniższej funkcji (plik uiframework.c):

Główna pętla programu

Na koniec pozostaje jeszcze przedstawić strukturę funkcji main():

Jan Szemiet

Do pobrania

Autor: admin

Admin