Grafische Benutzeroberflächen Grundlagen und Tools für die GUI-Entwicklung

Autor / Redakteur: Colin Walls und Geoff Kendall* / Martina Hafner

Benutzeroberflächen von Embedded-Systemen sind so unterschiedlich und variantenreich wie die Systeme selbst und erfordern verschiedene Designansätze. Sobald ein System über ein modernes Display verfügt, steigen die Herausforderungen des UI-Designs drastisch. Dieser Beitrag beschreibt die wichtigsten Aspekte und stellt die Inflexion Platform UI zur Entwicklung dynamischer Benutzerschnittstellen vor.

Firmen zum Thema

( Archiv: Vogel Business Media )

Der folgende Beitrag beschreibt die Entwicklung von Benutzerschnittstellen für Embedded-Systeme. Da Embedded-Systeme sehr unterschiedlich sind, ist auch die Bandbreite der möglichen Benutzerschnittsellen (User Interface, UI) groß:

  • Keine UI: Einige Geräte interagieren mit dem Anwender nicht auf direktem Weg, sondern werden mit anderen Geräten verbunden, mit denen sie auf elektronischem Weg kommunizieren. Ein gutes Beispiel hierfür sind Festplattencontroller.
  • Tasten und LEDs: Auf einem sehr einfachen Level kommen Embedded-Systeme mit wenigen Eingabetasten und einigen Lichtquellen (LEDs) zur Ausgabe aus. Daraus kann jedoch eine überraschende Funktionsvielfalt resultieren: Eine LED kann beispielsweise an sein oder aus, blinken, ihre Blinkfrequenz variieren oder die Farbe wechseln. Ein typisches Beispiel sind moderne Haushaltswaschmaschinen.
  • Tasten und einfache alphanumerische Displays: Ferner lassen sich Informationen mit Hilfe eines einfachen alphanumerischen Displays mit einer oder mehren Textzeilen darstellen und die Bedientasten auf ein Tastenfeld oder eine vollständige Tastatur erweitern. Beispiele sind Alarmanlagen und Fahrereinformationssysteme in Fahrzeugen.
  • Tasten, LEDs und Netzwerke: Einige Gerätearten verfügen über ein einfaches LED- und Tastendisplay, nutzen aber auch Netzwerkverbindungen zur fortschrittlichen Interaktion mit dem Anwender. Sie kommunizieren beispielsweise über Netzwerkequipment wie Router und Residential-Gateways.
  • Tasten und einfache Grafikdisplays: Kleine grafische Farb- und Schwarzweiß-LCDs sind mittlerweile sehr wirtschaftlich und werden in vielen Anwendungen eingesetzt, zum Beispiel in Mobiltelefonen.
  • Tasten, Zeigegeräte und einfache Grafikdisplays: Es ist nur ein kleiner Schritt zur Erstellung eines Zeigegeräts, das sich wie eine Computer-Maus verhält. Ein Zeiger lässt sich mit Hilfe von Software bewegen, die wiederum über eine Taste, eine Art Joystick oder einen berührungsempfindlichen Bildschirm gesteuert wird. Moderne Mobiletelefone wie Smart Phones verfügen über diese Funktion.
  • Tasten und große hoch auflösende Displays: Da bei stationären Geräten die Displaygröße nicht begrenzt ist, besteht eine Vielzahl von möglichen Benutzerschnittstellen. Die besten Beispiele sind Geräte, die Videoinformationen von Settop-Boxen und Videorekordern verarbeiten.

Implementierung einer Benutzerschnittstelle

Betrachten wir nun deren Implementierung, welche Anforderungen an die Softwareentwicklung gestellt werden und mögliche Herausforderungen.

Bildergalerie
Bildergalerie mit 11 Bildern

LEDs und Tasten: Die Entwicklung von Tasten und Schaltern ist unkompliziert. Meist werden Interrupts regelmäßig abgefragt oder beantwortet. Dabei sind jedoch ein paar Feinheiten zu beachten: Ein Schalter oder Taster, der gedrückt wird, wird als Wechsel von „1“ nach „0“ angesehen und nicht umgekehrt. Schaltkontakte neigen zum Prellen, was ohne Vorsichtsmaßnahmen als eine Folge von Betätigungen interpretiert werden könnte. Die Lösung dieses Problems wurde bereits in vielen technischen Artikeln beschrieben.

LEDs sind ähnlich einfach. Sie werden meist durch Setzen eines Bits in einem Geräteregister beleuchtet. Hier besteht nur eine kleine Herausforderung: Diese Register sind meist Write-only-Register, deren Zustand sich nicht abfragen lässt. Deshalb muss eine „Schattenkopie“ der Daten im RAM gespeichert und vorsichtig behandelt werden. Auch hierzu wurden bereits zahlreiche Artikel verfasst.

Blinke LEDs erfordern einige Timing-Mechanismen. Diese können von einer einfachen Taktunterbrechungs-Serviceroutine bearbeitet werden oder es kommt ein Echtzeit-Betriebssystem zum Einsatz, das die Timing-Anforderungen verarbeitet. Einfache alphanumerische Displays werden auf die gleiche Art und Weise wie LEDs behandelt.

Netzwerkschnittstellen: Verfügt ein Gerät über eine Netzwerkschnittstelle (üblicherweise drahtlos oder Ethernet), dann kann die Embedded-Software mit dem Anwender über andere Computer innerhalb des Netzwerks kommunizieren. Dies geschieht mit aller Flexibilität, die die GUI des Computers gestattet. Alternativ lassen sich hierfür spezielle UIs schreiben oder ein HTTP-Server („Web-Server“) im Gerät installieren. Letzterer Ansatz ist sehr flexibel, da die UI an Hand einer Reihe über Hyperlink verbundener HTML- („Web“) Seiten definiert werden kann. Ebenso besteht die Möglichkeit, diese Seiten mit Hilfe von Scripting-Sprachen (wie JavaScript) oder Java herzustellen. Ein HTTP-Server erfordert ein Echtzeit-Betriebssystem.

Menü- und informationsorientierte UIs: Auf Geräten mit grafischen Bildschirmen muss, unabhängig von der Bildschirmgröße, die Funktionalität sehr präzise definiert werden. Es gibt einige gemeinsam nutzbare Funktionsmerkmale und es treten auch gemeinsame Probleme auf, die den Entwickler vor große Herausforderungen stellen.

Funktionalität: Displayelemente (Seiten) einer derartigen UI unterteilen sich in zwei Grundarten:

  • Eine Reihe hierarchischer Menüs und
  • tabellarische Daten (wie die Programmauswahl einer Settop-Box).

Das Anklicken der Eingabeoptionen in einem bestimmten Display öffnet meist ein weiteres Bildschirmmenü. In einem Videorekorder gibt es zum Beispiel ein Systemmenü, das den Anwender zur Programmauswahl führt. Wählt der Anwender im Menü ein Fernsehprogramm aus, kommt er zu einem weiteren Menü mit Aufnahmeoptionen oder Informationen über die Sendung. Alle Daten in Menüs und Tabellen können statisch oder dynamisch sein.

Analysiert man die Funktionsweise derartiger Displays, so ist eine Reihe einfacher Verhaltensmuster zu erkennen. Der Anwender wählt etwas aus und eine von drei Funktionen wird ausgeführt:

  • Ein weiteres Menü oder ein Tabelle werden dargestellt,
  • eine spezielle Aktion wird ausgeführt (zum Beispiel wird eine Software gestartet, etwa ein Telefongespräch per Handy) und
  • es werden einige einfache Dateneingaben durchgeführt. (Eingabe einer Telefonnummer in ein Handy).

Drei typische Problembereiche

Die Implementierung von hoch entwickelten UIs bringt eine Reihe von Herausforderungen mit sich. Dies führt zu einem Spannungsfeld zwischen den Kosten/Problemen bei der Implementierung und der Qualität der Nutzererfahrung. Im Consumer-Markt kann die Nutzererfahrung einer UI nicht nur den Ausschlag für den Erfolg eines Produkts geben, sondern auch über die Gegenwart und Zukunft der gesamten Produktlinie eines Anwenders entscheiden.

Es gibt drei Problembereiche:

  • Komplexe Geräte unterstützen meist eine breite Palette von Funktionen, die als unterschiedliche Anwendungen implementiert werden müssen. Ein modernes Smart-Handy verfügt zum Beispiel neben der regulären Telefonfunktion über Web-Browser, SMS, Adressbuch, etc. Jede dieser Anwendungen wird üblicherweise separat entwickelt, unter Umständen sogar von verschiedenen Unternehmen. Das hat zur Folge, dass alle Anwendungen über eine eigene UI verfügen. In jeder Anwendung führt die UI die nahezu gleichen Aufgaben durch, allerdings auf eine etwas andere Art und Weise und mit unterschiedlichem „Look and Feel“. Dies wiederum führt dazu, dass mehr Arbeit in die Entwicklung (Gestaltung vieler UIs) gesteckt werden muss und die Nutzererfahrung in den Hintergrund gerät. (Weil die UIs nicht konsistent sind.)
  • Die übliche Implementierung von UIs verlangt erhebliche Programmierkenntnisse und -aufwand bei der Durchführung und darüber hinaus bei der Instandhaltung und Adaption zukünftiger Anforderungen.
  • Die Möglichkeiten, einem Gerät anbieterspezifische Funktionen ohne übertriebenen Programmieraufwand hinzuzufügen, sind beschränkt. Dies ist eine Fähigkeit, die zum Beispiel Service-Provider für kabellose Netzwerke oder Kabelfernsehanbieter verlangen. Diese Unternehmen betrachten das Handy oder die Settop-Box als einfache physikalische Manifestation des von ihnen angebotenen Services und sie bekräftigen diese Botschaft bei jeder Gelegenheit.

Die gute Nachricht ist, allen drei Herausforderungen kann man leicht durch verschiedene Ansätze bei der UI-Entwicklung begegnen.

Eine rationalisierte UI-Lösung

Eine UI für ein komplexes Embedded-System wird erstellt, indem sie als separate Softwareschicht implementiert wird, die in alle Anwendungskomponenten eines Geräts eingebunden werden kann. Die Inflexion Platform UI von Mentor Graphics bietet zum Beispiel alle Steuerelemente für die Displaygrafik und Anwenderinteraktion. Der Entwickler konfiguriert die UI einfach mit Hilfe von XML. Bild 1 zeigt das Blockdiagramm des Systems mit Inflexion Platform UI.

Der große Vorteil für den Entwickler sind die einfachen Methoden, die in Entwicklung modernster attraktiver UIs involviert sind. Mit selbsterklärender XML – Programmierung oder Scripting-Sprachen sind nicht erforderlich – kann die UI vollständig definiert werden. Und zwar inklusive einer umfangreichen Palette an Optionen, die sich durch winzige Einstellungen der Parameter realisieren lassen.

Selbsterklärendes XML

Die Inflexion Platform UI behandelt jedes Menü einer Benutzeroberfläche als wohl definierter Zustandsautomat. Ein Entwickler muss nur noch festlegen, welche Zustände erlaubt sind, wie jedes Bildschirmelement aussehen soll und welche Interaktionen (z.B. Tastendrucke oder Stylus-Tapes) den Wechsel von einem Zustand in einen anderen auslösen sollen. Bei jedem Zustandswechsel implementiert die Inflexion Platform UI die für die Wandlung des UI-Erscheinungsbildes erforderliche Logik. Zum Beispiel beim Scrollen einer Reihe von Objekten über eine Position oder beim Schalten des aktiven Fokus von einem Objekt zu einem anderen.

Die Automatisierung derartiger UI-Logik vermeidet einen Großteil der Komplexität, der mit der Konstruktion von hoch entwickelten neuen Schnittstellen verbundenen ist. Der Inhalt einer Task lässt sich tatsächlich reduzieren auf die Beschreibung der UI als eine Reihe von visuellen „Snapshots“ oder Layouts, die jeweils einen einzigen zulässigen Zustand darstellen. Jedes Layout definiert lediglich wie alle Bildschirmelemente (sei es Text, Bitmap oder andere visuelle Inhalte) aussehen sollen, wenn sich die UI im entsprechenden Zustand befindet. Diese Definition erfordert keine bedingte Verzweigung, Loopings oder irgendwelche Programmierungskonstrukte: Vielmehr ermöglicht die Inflexion Platform UI die Gestaltung eines komplett neuen UI-Designs mit Hilfe einfacher selbsterklärender XML-Formate.

Programmierbeispiele für Icons, gebaut mit der Inflexion Platform UI: das Erscheinungsbild jedes einzelnen Icons kann bis zu einem hohen Grad gesteuert werden. (Archiv: Vogel Business Media)

Entwicklung einer Schnittstelle

Ausgeklügelte UI-Layouts sind möglich, weil das visuelle Erscheinungsbild eines jeden Bildschirmelements, zum Beispiel ein einzelnes Icon oder eine Beschriftung, bis zu einem hohen Grad gesteuert werden kann. Jedes Element kann eine Position, Skalierung und Ausrichtung in drei Dimensionen haben. Die Bildschirme von Geräten sind natürlich zweidimensional, aber die Inflexion Platform UI erlaubt dreidimensionale Effekte durch entsprechende perspektivische und Rotationseffekte. Diese können während der Laufzeit, gemäß den spezifizierten Layout-Parametern, automatisch angewendet werden. Die Codebeispiele im Bild links illustrieren dies.

Derartige Effekte lassen sich auf jeder Abstraktionsebene (z.B. individuelle Elemente oder ein ganzes Menü) für beliebige Elemente anwenden und ermöglichen äußerst ausgeklügelte, mannigfaltige Layouts. Bildserie 2 (siehe Bildergalerie) zeigt einige Beispiele, die keinerlei Modifikationen auf Code-Ebene erfordern:

Eine vollständige Beschreibung des XML-Formats der Inflexion Platform UI würde den Rahmen des Artikels sprengen. Wir beschränken uns auf die Feststellung, dass ein Entwickler damit alle übrigen Aspekte einer Schnittstelle beschreiben kann – wie die Aktionen (Tastendrucke), die erlaubt sein sollten und die Zustandwechsel, die sie auslösen, um sie in einer ähnlich unkomplizierten, selbsterklärenden Art und Weise zu konfigurieren.

Unterstützung für 3D-Rendering

Die Inflexion Platform UI gestattet die Spezifikation des Schnittstellen-Layouts eines Objekts in drei Dimensionen. Selbst wenn die Zielhardware nur über elementare 2D-Grafik-APIs verfügt, lassen sich viele visuelle Effekte wie sanftes Überblenden, Skalieren und Zoom erzielen. Richtig lebendig werden die 3D-Fähigkeiten der Inflexion Platform UI jedoch mit voller Rotation, Solid-Modelling, Texture-Mapping und Beleuchtung – falls OpenGL/ES verfügbar ist. OpenGL/ES-Unterstützung lässt sich in ein Gerät entweder mit Hilfe einer Softwarebibliothek oder – für maximale Performance – über einen hardwarebeschleunigten Grafikprozessor einbetten.

Einsatz von Modellen

Angesichts der Tatsache, dass ein hoch entwickeltes Gerät je nach Bedarf des Anwenders eine breite Palette von Anwendungen steuern kann, gibt es drei Möglichkeiten, eine rationalisierte UI-Lösung wie die Inflexion Platform UI einzusetzen:

  • Die UI kann unmittelbar für alle Anwendungen im Gerät verwendet werden. Dies ist der ideale Ansatz für ein brandneues System, da alle Entwicklern einen vereinheitlichen Ansatz wählen müssen. Wenn alle Anwendungen bereits bestehen, führt dies jedoch zu größeren Herausforderungen. Dafür ermöglicht dieser Ansatz die beste Nutzererfahrung, denn er ergibt in allen Anwendungen ein gemeinsames „Look and Feel“ und gestattet beliebige systemweite Anbieterspezifizierung (Farben, Hintergründe, “Oberflächen“, etc.).
  • Entwickler können die Vorteile der UI-Technologie sofern und soweit möglich nutzen. Dieser Ansatz resultiert in neuen Anwendungen und diejenigen, die aktualisiert werden, erhalten die rationalisiert UI. Im Laufe der Zeit wird das vollständige System damit umrahmt.
  • Die UI lässt sich sehr leicht und mit minimalem Aufwand verwenden, um ein Gerät mit Service-Provider-spezifischen Merkmalen auszustatten. Dies kann eine zusätzliche Anwendung sein, zum Beispiel ein Portal zum Promoten von Download-baren Inhalten über ein Netzwerk oder das Einbetten und „Kennzeichnen“ von bereits im Gerät vorhandenen Funktionen.

Beispielanwendungen

Die einzige Möglichkeit, um die Vorteile einer rationalisierten UI-Lösung wie die Inflexion Platform UI voll zu würdigen ist, ein Gerät in der eigenen Hand zu halten, auf dem die Softwareplattform eingesetzt wurde. Einige Screenshots illustrieren diesen Punkt. Bildserie 3 zeigt zwei Abbildungen eines Mobiltelefons, die einen Videospielbildschirm darstellen. Beide weisen ein unterschiedliches „Look and Feel” auf, das durch eine minimale Änderung in der XML-Beschreibung erreicht wurde. Bildserie 4 zeigt die Benutzeroberfläche einer Settop-Box.

Benutzeroberflächen von Embedded-Systemen sind so unterschiedlich und variantenreich wie die Systeme selbst und sie erfordern verschiedene Designansätze. Sobald ein System über ein modernes Display verfügt, steigen die Herausforderungen des UI-Designs drastisch.

*Colin Walls und Geoff Kendall, Embedded Systems Division, Mentor Graphics. Kontakt: colin_walls@mentor.com

(ID:225239)