Technologie programistyczne do tworzenia interfejsu użytkownika w systemach wbudowanych

fot. 1. PICO SOM

W artykule przedstawiono technologie informatyczne do tworzenia graficznego interfejsu użytkownika w systemach wbudowanych. Podano przykład stworzenia takiego interfejsu za pomocą platformy Angular w urządzeniu medycznym do terapii polem magnetycznymi światłem.

Systemy wbudowane to obecnie skomplikowane urządzenia pomiarowe, diagnostyczne urządzenia medyczne, roboty i maszyny przemysłowe, sterowane przez wewnętrzny komputer w postaci dedykowanego systemu mikroprocesorowego, komputera typu SOM (ang. System On Module) bądź komputera przemysłowego. Dostępność gotowych systemów typu SOM, wśród których można wymienić dziesiątki popularnych konstrukcji takich jak PICO, Raspberry Pi, BeagleBone, Arduino powoduje, że główna trudność przy opracowywaniu systemu wbudowanego sprowadza się do opracowania oprogramowania, które steruje urządzeniem, zapewnia komunikację z użytkownikiem, zdalny nadzór i dostęp do wyników pomiarów.

Przykładami prostych urządzeń z systemem wbudowanym są waga bądź termometr. System mikroprocesorowy w tych urządzeniach realizuje proste funkcje, takie jak przeliczanie sygnału z czujnika na wyświetlaną wartość, zapamiętywanie kilku ostatnich zmierzonych wartości, sygnalizacja niskiego poziomu baterii zasilającej.

Na drugim biegunie znajdują się urządzenia złożone takie jak telefon komórkowy, systemy nawigacji satelitarnej, urządzenia wykorzystywane w diagnostyce medycznej.

Konstruktor systemu wbudowanego, programista, musi każdorazowo podjąć decyzję jakie technologie informatyczne zastosować aby, wykorzystując możliwości sprzętowe, w efektywny sposób stworzyć oprogramowanie systemu. Złożoność i modułowość oprogramowania powoduje, że jego stworzenie wymaga zastosowania wielu technologii informatycznych.

Decyzja dotycząca zastosowania konkretnych technologii informatycznych jest jedną z najważniejszych i często decydujących o powodzeniu projektu. Musi być ona ponadto podjęta na wczesnym etapie realizacji projektu.

W artykule opisano zastosowanie nowoczesnych technologii informatycznych do opracowania interfejsu użytkownika w urządzeniu medycznym, do terapii polem magnetycznym i światłem. Schemat blokowy takiego urządzenia został przedstawiony na rys. 1:

Rys. 1. Schemat blokowy urządzenia do terapii polem magnetycznym i światłem

Architektura systemu

Urządzenie składa się z dwóch głównych modułów – układu wytwarzającego sygnały sterujące dla aplikatorów pola magnetycznego i światła oraz układu realizującego komunikację z użytkownikiem i możliwość zdalnego sterowania. Moduł sterujący aplikatorami został zrealizowany w postaci dedykowanego systemu mikroprocesorowego oprogramowanego za pomocą języka C. Moduł realizujący interfejs użytkownika został zrealizowany za pomocą systemu SOM typu PICO z systemem operacyjnym Linux (fot. 1).

Analiza technologii programistycznych do tworzenia graficznego interfejsu użytkownika

Obecnie dostępnych jest wiele metod wizualizacji i tworzenia graficznych interfejsów użytkownika. Wyróżnić można wiele linii podziału:

● ze względu na zakres obsługiwanych platform sprzętowych

– jednoplatformowe

– wieloplatformowe

● ze względu na zakres obsługiwanych platform programowych (systemów operacyjnych)

– Windows

– Linux

– Android

– QNX

– Kod natywny bez systemu operacyjnego

● ze względu na użyty język programowania

– C++

– Java

– JavaScript

– PHP

● ze względu na model oprogramowania

– lokalny

– klient-serwer.

Biorąc pod uwagę architekturę urządzenia medycznego, szczególnie dostępność modułu SOM w postaci układu PICO (fot. 1) postanowiono, że rozwiązanie interfejsu użytkownika powinno wykorzystywać zasoby systemu operacyjnego Linux.

Rozważono dwa warianty sposobu opracowania interfejsu użytkownika – bibliotekę graficzną Qt oraz technologię webową, czyli serwera www ze stroną napisaną w języku JavaScript.

Biblioteka Qt charakteryzuje się szeregiem zalet takich jak modułowa budowa pozwalająca na swobodne optymalizowanie jej pod konkretne wymagania aplikacyjne i sprzętowe. Od wersji 5.0 położono duży nacisk na obsługę wspomagania renderowania grafiki 2D i 3D za pomocą sprzętowych akcelatorów grafiki typu OpenGL, przy jednoczesnym zachowaniu zgodności z programowym buforem ramki. Przy wykorzystaniu aplikacji narzędziowej Qt Designer możliwe jest graficzne rysowanie interfejsu aplikacji oraz powiązywanie zdarzeń interakcyjnych i przypisania sygnałów do slotów.

Technologia webowa posiada wiele sposobów prezentacji obrazu w celu interakcji z użytkownikiem. Na obecnym etapie jest już bardzo konkurencyjna wobec standardowych technologii tworzenia interfejsów za pomocą tradycyjnych języków programowania ze względu na jakość graficzną oraz szybkość działania. Przykładem interfejsów stworzonych za pomocą technologii webowych dla urządzeń multimedialnych i przenośnych są takie systemy jak Firefox OS, WebOS.

O wyborze technologii webowych do zaprojektowania interfejsu użytkownika w sterowniku zadecydowała architektura systemu, (rys. 1) oraz możliwość zdalnego dostępu do urządzenia/sterownika za pomocą aplikacji uruchamianych na odległych systemach komputerowych. W sposób naturalny taka funkcjonalność jest łatwiejsza do stworzenia za pomocą technologii webowych.

Architektura serwer-klient urządzenia

Struktura oprogramowania interfejsu użytkownika wykorzystująca technologie webowe o architekturze klient-serwer została przedstawiona na rys. 3:

Rys. 3. Architektura klient-serwer oprogramowania urządzenia

Część wizualną interfejsu użytkownika, GUI, tworzy aplikacja kliencka, która jest stroną www. Istnieje wiele technologii umożliwiających stworzenie GUI, takich jak czyste języki CSS, Java, czy bezpośrednie rysowanie po płótnie strony, nawet z użyciem renderowania 3D (np. WebGL). Jednak najprostszym sposobem wydaje się zastosowanie platformy programistycznej (tzw. framework) zawierającej wiele modułów bibliotecznych, takich jak przyciski, pola edycyjne, rozwijane menu, ułatwiających i przyspieszających projektowanie strony. Do najbardziej popularnych należą Bootstrap, Pure, Semantic UI, Metro UI CSS, skeleton, Tachyons, Mobiscroll.

W ostatnim okresie dużą popularność zdobyła, wspierana przez firmę Google, platforma Angular, przeznaczona do tworzenia dynamicznych stron www typu SPA (ang. Single Page Application) – jednostronicowych aplikacji internetowych. Jednostronicowe aplikacje internetowe charakteryzują się dużą szybkością reakcji, co jest szczególnie istotne w systemach wbudowanych gdzie użytkownik oczekuje natychmiastowej reakcji systemu po każdej interakcji z GUI.

W tradycyjnych aplikacjach, po każdym naciśnięciu na aktywny link następuje ładowanie całej strony www z serwera. Powoduje to opóźnienia w pojawianiu się kolejnych informacji, co jest nie do przyjęcia w systemach wbudowanych. W aplikacjach jednostronicowych ładowanie strony www następuje jedynie na początku działania aplikacji. Dalsze działanie aplikacji, w zależności od aktywności nawigacyjnej użytkownika, polega na dynamicznym przekształcaniu wyświetlanej strony a nie na ładowaniu całej strony z serwera.

Najistotniejszą cechą jednostronicowych aplikacji jest efektywne poruszanie się pomiędzy poszczególnymi widokami na skutek interakcji z użytkownikiem. Angular używa do tego celu specjalnego mechanizmu, tzw. routingu. Routing umożliwia dzielenie aplikacji na mniejsze fragmenty i nawigowanie między komponentami w aplikacji bez przeładowywania całej aplikacji lecz jedynie jej części.

Kolejną istotną cechą aplikacji w systemie wbudowanym jest szybka synchronizacja danych z wyświetlanym widokiem. Zapewnienie synchronizacji wymaga od programisty śledzenia jak zmieniają się dane i stany obiektów. Angular zawiera wbudowane i bardzo efektywne mechanizmy detekcji zmiany danych oraz właściwości obiektów, zwalniając w dużej mierze z tego obowiązku programistę. Mechanizmy te są tak skuteczne, że użytkownikowi synchronizacja wydaje się zachodzić w sposób natychmiastowy.

W prezentowanym urządzeniu medycznym liczba zmieniających się danych jest duża. Są to dane odzwierciedlające przebieg terapii, dane diagnostyczne dotyczące układów sterowania aplikatorami, jak i samych aplikatorów, komunikaty o zaistniałych stanach awaryjnych i błędach. Mechanizmy detekcji zmiany danych dostępne w platformie Angular okazały się bardzo skuteczne w realizacji interfejsu użytkownika.

Interfejs użytkownika w urządzeniu medycznym do terapii polem magnetycznym i światłem

Do dyspozycji projektanta interfejsu użytkownika za pomocą platformy Angular istnieje wiele gotowych komponentów. Stosowanie biblioteki komponentów pozwala zaprojektować spójny i atrakcyjny wizualnie interfejs użytkownika – rys. 4 i 5.

Rys. 4. Fragment graficznego interfejsu użytkownika stworzonego za pomocą Anglular i Material Design

Rys. 5. Fragment graficznego interfejsu użytkownika stworzonego za pomocą Anglular i Material Design

Podsumowanie

Interfejs użytkownika opisywanego urządzenia medycznego jest aplikacją typu klient napisaną za pomocą platformy programistycznej Angular. Nawigacja w interfejsie polega na naciskaniu kolejnych przycisków co powoduje przejście do kolejnych okien menu. W wielu oknach menu są wyświetlane na bieżąco dane odzwierciedlające przebieg terapii polem magnetycznym lub światłem. Wyświetlanie zmieniających się danych odbywa się bez widocznego opóźnienia. Przejścia między kolejnymi widokami następuje z niewielkim opóźnieniem rzędu 1 sekundy, co jest całkowicie do zaakceptowania dla użytkownika.