Programmdesign mittels FLUID -
Benutzermenüs ohne zu programmieren

Industrie Systeme mit Grafikdisplay

Industrie Computer / PC Terminals verfügen heute meistens über ein Grafikdisplay. Auf dem Display werden Informationen für den Benutzer angezeigt. Technisch gesehen: das Display beinhaltet die grafische Benutzeroberfläche / das graphical user interface = GUI. Der Benutzer kann anhand dieser Informationen entscheiden, ob er irgendwelche Tasten drückt, fluchtartig den Raum verlässt oder was auch immer...

Kleine Textdisplays in denen vielleicht gerade 4 Zeilen a 16 Zeichen Platz haben, werden heute kaum noch eingesetzt. Diese Dinger sind eher ein Merkmal älterer Technologie. Eine umfassende Benutzerinformation kann man dort nicht darstellen, eher Befehle wie z.B. ZIEHEN SIE EINE PARKKARTE oder WERFEN SIE JETZT 5 EURO EIN.

Grafische Displays bieten mehr. Dort kann man Benutzerführungen umfassend und freundlich darstellen. Sie können kleine Bilder, Informationen oder auch Werbung darstellen. Sie können verschiedenen grosse Schriften dafür nutzen, um z.B. besonders wichtige Informationen hervorzuheben - und unwichtigere Informationen kleiner anzeigen. Whatever - mit grafischen Displays sind Ihrer Phantasie hinsichtlich der Benutzermenüs keine Grenzen gesetzt...

Industriesysteme mit Linux Betriebssystem

Systeme mit Grafikdisplays beinhalten meistens eine PC Technologie mit einem Standardbetriebssystem. In der Industrie kommt hier oftmals Linux als embedded Variante = embedded Linux zum Einsatz. (Embedded Linux ist eigentlich "nur" eine speicherreduzierte, speziell auf die Zielhardware angepasste Linuxversion.) Die unter Linux vorhandenen Vorteile wie einfache / frei Programmierung, Multiuser-, Multitasking und tolle Netzwerk / IP Fähigkeiten bleiben erhalten. Informationen zu Linux im Industrieeinsatz hier. **

Linux bietet auch eine Besonderheit, zumindest für den Programmierer: Unter Linux sind Betriebssystem und grafische Benutzeroberfläche voneinander getrennt. Wenn Sie diesen Satz zum ersten Mal lesen, müssen Sie vielleicht etwas nachdenken. Unter Windows sind das eigentliche Betriebssystem und die grafische Mousebedienung (der Explorer) sozusagen verheiratet. Windows ohne Explorer geht nicht - zumindest nicht so einfach. Unter Linux sind das eigentliche Betriebssystem und die grafische Oberfläche (GUI = graphical user interface = grafische Bedienoberfläche) sozusagen getrennt. Die grafische Oberfläche ist unter Linux nur ein weiteres Programm, das gestartet wird - oder eben nicht.

Um das Ganze noch phantasievoller zu gestalten, gibt es unter Linux nicht nur EINE grafische Oberfläche, sondern Sie können aus einer breiten Palette von Oberflächen auswählen. Je nachdem, was Ihnen hinsichtlich Optik und Bedienung am Besten gefällt. In der Folge heisst das für den Linuxprogrammierer: er kann sich die Benutzeroberfläche aussuchen, der er am einfachsten programmieren kann. Ehrlicherweise ist dieses fast das einzige Kriterium für die Auswahl einer Benutzeroberfäche. Die meisten der heute angebotenen Programmiersysteme unterstützen eine Vielzahl von farbigen Schaltflächen, Rollbalken und diversen Ein- und Ausgabelementen. Für den späteren Benutzer macht es daher keinen relevanten Unterschied, welche Art von Benutzeroberfläche der Programmierung zugrunde lag - eine rote Schaltfläche ist immer rot, völlig egal welche Art von GUI verwendet wurde...

Die meisten der unter Linux angebotenen Benutzeroberflächen verwenden einen sogenannten FRAMEBUFFER als Schnittstelle zwischen Hard- und Software. Der Framebuffer ist – vereinfacht gesagt – ein bestimmter Speicherbereich. Dort schreibt die Software etwas hinein – und das wird dann im Display angezeigt. (Die Definition ist nicht ganz korrekt. Man mag uns das jetzt nachsehen. Wer Details wissen möchte: bitte nach "Framebuffer was ist das" googeln...)

SSV Embedded Systems als Spezialist für kleine Industrie Computer bietet verschiedene PC Terminals mit embedded Linux an. Die meisten dieser Terminals unterstützen hinsichtlich der vom Hersteller mitgelieferten Firmware (dem BIOS) bereits den Framebuffer, so dass der Programmierer aus dem breiten Angebot der angebotenen grafischen Oberflächen auswählen kann. Informationen zu möglichen grafischen Oberflächen siehe hier. **

Damit diese Wahl leichter fällt, hat SSV von Haus aus einige Benutzeroberflächen dokumentiert / implementiert und liefert umfangreiche Demoprogramme, Beispiele und Tools mit. Weitere Informationen über die Art der unterstützten Oberflächen gibt es auf der GUI Page direkt beim Hersteller SSV.**

Eine dieser unterstützten grafischen Oberflächen ist das Grafiktoolkit FLTK. Webseite hier.** FLTK bietet umfangreiche leistungsfähige Werkzeuge und Möglichkeiten, um auf einfache Art und Weise umfassende Linuxprogramme zu erstellen. (Alternativ ist FLTK auch für Windows erhältlich. Aber damit würde man halt Windowsprogramme erstellen. Diese wiederum laufen auf einem Industrieterminal unter Linux eher nicht...)

FLUID - ein Designtoolkit

Eine interessante Besonderheit von FLTK ist FLUID. FLUID ist ein sogenannter Drag & Drop Wizzard, um grafische Benutzermenüs zu designen, ohne eigene Programmierleistung erbringen zu müssen.

Kurzum: Mittels FLUID kann auch ein Nichtprogrammierer seine Benutzermenüs entwerfen. Diese werden einfach mit der Mouse "zusammengezottelt", der notwendige Programmsourcecode wird im Hintergrund sozusagen automatisch erstellt.

Um ein lauffähiges Programm zu erhalten, muss dieser Programmsourcecode dann natürlich noch an einen Programmierer übergeben werden. Dieser füllt das mittels FLUID erstellte Layoutdesign mit Leben - und erzeugt letztlich die Software, die in einem PC Terminal / Industrie PC unter Linux läuft. Durch die Trennung Menüdesign vs. Programmierung erhält man jedoch den Vorteil, dass zumindest das eigentliche Programmlayout auf einfachste Art und Weise auch von Programmlaien realisiert werden kann. Die in vielen Anwendungen übliche Diskussion zwischen Anwender und Programmierer ("Bitte hier noch eine rote Linie einfügen..." oder "dieser Balken da ist zu dick / zu dünn..." entfällt. Derjenige, der die Anwendung am besten kennt, kann die Anwendung designen. Der Programmier sorgt am Schluss nur dafür, dass das Programm auch läuft.)

Beim Layout bietet FLUID unzählige interessante Dinge, Elemente genannt. Hierzu zählen verschiedene Masken, Ein- und Ausgabefelder, grafisch animierte Schilder, Schalter und Rollbalken und vieles andere mehr. Der Designer verwendet diese Tools, um sein Programm so zu erstellen, wie einzelnen Displays später in einem PC Terminal dargestellt werden.

Nachdem dieser Entwurf fertig gestellt wurde, übergibt der Designer seinen Entwurf an den Programmierer. Der muss den Programmcode noch überarbeiten = die Felder mit Leben füllen, die Programmsprünge programmieren und dann kompilieren. Anschließend wird das Programm in ein PC Terminal geladen und dort ausgeführt.

FLTK und FLUID kann man als Linux- oder Windowsversion einsetzen. Interessant für das Programmdesign für PC Programme von Linuxterminals ist auch folgende Kombination: Der Designer verwendet ein FLUID.EXE unter Windows, um das Programmlayout zu entwerfen. Der Programmierer verwendet FLTK unter Linux, um das Programm dann später für ein Linuxterminal zu übersetzen / kompilieren.

Das Designtoolkit FLUID gibt es als PC Programm unter Windows: FLUID.EXE. Dieses Programm kann man auf seinen PC kopieren und starten. Eine Installation ist nicht notwendig. Anschließend öffnet man eine Funktion MAIN, legt ein neues Fenster / Window in der vom PC Terminal benötigten Pixelgrösse fest und beginnt dann mit dem Designentwurf der Inhalte.

Wenn ein Fenster nicht ausreicht, kopiert man sich das Fenster und legt weitere Fenster an. Das Programm erstellt aus den Drag & Drop Schritten des Benutzers automatisch Programmcode. Dieser wird am Schluss gespeichert und dem Programmierung zur Compilierung übergeben. (Wenn Programmierer und Designer die gleiche Person sind, kann man das Programm natürlich auch sofort übersetzen. Erfahrungsgemäß hat sich aber gezeigt, dass die grafische Benutzeroberfläche ansprechender aussieht, wenn man für deren Design andere Personen heran lässt.)

Mini Tutorial: Einführung in FLUID

Erfahrungsgemäß liest kein Mensch diesen Absatz. Die Leute lesen die Überschrift - und beginnen dann (wenn überhaupt) mit der Schritt-für-Schritt Anleitung. Für den Fall, dass Sie das hier dennoch lesen: das nachstehende Programme wurde von einer Kollegin aus unserer Innendienst- / Marketingabteilung designed! Die Dame ist KEIN Programmierer. Sie hat einfach unsere FLUID Anleitung genommen und dann einige Stunden aufgewändet, um sich in FLUID einzuarbeiten und dieses kleine Programm zu entwerfen. Dabei hat sie uns gleichzeitig auf Schwächen unserer Anleitung hingewiesen. Wir haben unsere Anleitung überarbeitet und das von ihr erstellte Programm als Grundlage für dieses Tutorial verwendet.

Die ersten Programmschritte:

.(A) Wenn Sie weitere Displays erzeugen möchten, d.h. Ihr Programm hat mehr als ein Display: Markieren Sie das ganze Display (roter Rahmen um das ganze Display), gehen in das Menü: EDIT . COPY und anschließend EDIT . PASTE. Damit wird ein neues Display auf Basis der Kopie erzeugt. Sie müssen im neuen Display dann nur die geänderten Elemente eintragen.

.(B) Sinnvoll ist es, wenn Sie den einzelnen Displays halbwegs intelligente Namen geben, also z.B. LCD1-Hauptmenue, LCD2-Konfigmenue, LCD3.... usw. Die Namensvergabe ist einfach: Doppelklick im Fenster öffnet das Konfigurationsmenü zum Fenster. Gehen Sie in den Reiter GUI und tragen bei LABEL einen sinnvollen Text ein.

.(C) Wenn Sie Labels, Schaltflächen und Co beschriften möchten: Doppelklick auf das jeweilige Element öffnet das Konfigurationsmenü. Gehen Sie in den Reiter GUI und tragen Sie bei LABEL den gewünschten Text ein.

.(D) Wenn Sie die Übersicht verlieren: Im Bildschirm bleibt immer das Programmierfenster von FLUID geöffnet. Dort wird für jedes Element, für jedes Fenster der Funktionsname eingetragen. Der erste Doppelklick auf das Element im Programmierfenster zeigt das Element im Display an. Ein weiterer Doppelklick öffnet das Konfigurationsmenü für das Element.

Eine weitere Anwendung - Ausblick

So, das war jetzt eine recht einfache Anleitung, wie es geht. Klingt komplizierter als es ist. Wenn Sie weitere Beispiele wünschen: probieren Sie doch einfach mal TEST-DOKU aus. Das ist ein Beispiel mit drei "fast leeren" Computerdisplays für ein PC Terminal mit QVGA Display (320x240 Pixel). Das Programm haben wir auch für ein SSV Terminal TRM/920 entworfen. Da brauchen Sie nur noch FLUID starten, das Projekt öffnen und können dann mit dem Layoutdesign der Displays beginnen. Natürlich können Sie auch weitere Displays anfügen (COPY und PASTE) oder überflüssige Displays löschen.

Wenn Sie den Download ausgepackt und FLUID mit der Demoanwendung gestartet haben, dürften Sie auf Ihrem Windows PC einen Bildschirm erhalten, der so oder so ähnlich aussieht:

Auf der linken Seite finden Sie erneut das bereits bekannte Programmierfenster. Dieses enthält eine Reihe von Elementen, die wir via Mouse und Drag & Drop in die Benützermenüs gezogen haben. Insgesamt gesehen haben wir für das Demoprogramm drei Benutzermenüs vorgesehen. Diese tragen den Namen LCD1, LCD2-FAHRZUG, LCD3-WAAGE. Jedes Benutzermenü verfügt über unterschiedliche Elemente. LCD1 ist das Hauptmenü, dort kann der Benutzer auswählen, was er tun möchte. LCD-FAHRZEUG enthält die Eingaben bestimmter KFZ Daten. LCD-WAAGE übernimmt das Gewicht aus einer angeschlossenen Waage und zeigt es im Display an. Damit die Waage nicht ständig falsche Werte liefert, gibt es noch einen Taste / einen Button, der den Wiegevorgang auslöst.

Das Layout der Menüs haben wir in kürzester Zeit fertiggestellt, ohne eine Zeile zu programmieren. Nachdem wir mit dem Layout fertig waren, wurde der Sourcecode (über FILE . WRITE CODE) des Programmes erstellt und an unseren Programmierer gegeben. Dieser musste dann noch einige Stunden Arbeit investieren und das Programm hinsichtlich der Sprung- und Speicherlogik "mit Leben füllen". Anschliessend hat er die gesamte Software mittels eines Compilers übersetzt und in ein Industrieterminal aus dem Hause SSV geladen.

Fairerweise sei erwähnt: Es handelt sich um ein Demoprogramm. Wir haben hierbei einfach einige Elemente aneinandergereiht. In der Praxis müsste man jetzt prüfen, ob ein drehbarer Hupenschalter oder ein veränderbarer Signalgeber auf dem gewünschten Terminal überhaupt sinnvoll erscheint. Je nachdem ob Sie ein Gerät mit Tastatur und / oder Touch Screen verwenden möchten, sollten Sie ihre Elemente entsprechend auswählen. Glücklicherweise müssen wir bei solchen Demoprogrammen auf "derartige Kleinigkeiten" keine Rücksicht nehmen... Ach so - und übrigens: SSV Embedded Systems bietet ohnehin Geräte wahlweise mit Tastatur oder/und Touch Screen an.

Gehen Sie übrigens nicht davon aus, dass Ihr Programmierer Sie lieben wird, wenn Sie das Programmdesign selbst erstellen. Insbesondere unseren Tipp mit den Schriftarten sollten Sie beherzigen. Am besten Sie besprechen das ganze Projekt vorher mit Ihrem Programmierer, schliesslich nehmen Sie ihm die Designarbeit ab - und das ist meistens ein Teil der Arbeit, den Programmierer nun mal auch lieben. Sie "reduzieren" Ihren Programmierer nun darauf, den von Ihnen designeden Programmcode zu übersetzen - das ist eine Arbeit, die Programmierer erfahrungsgemäß weniger lieben.

Einige weitere Links zu diesem Thema

Unsere Einführung haben wir bewusst kurz gehalten und uns darauf konzentriert, dass Sie Benutzermenüs für ein Industrieterminal designen möchten. Das Internet ist voller weiterer Informationen zu den Themen FLTK und FLUID - die meisten davon besser als unsere. Hier noch ein paar nützliche Links:

Ein wesentlich besseres Tutorial für FLUID und FLTK **

Ein Artikel im Linuxmagazin zum Thema FLTK **

FLUID.EXE Download

Und als neue Idee:
CoLinux - eine Linux Entwicklungsumgebung unter Windows