GUI Creator

 

GUI steht für "Graphical User Interface", ein Feature, auf das eine anwenderfreundliche, moderne Software kaum noch verzichten kann: Buttons, Scrollbars, Textfenster, Checkboxen und viele andere Elemente, die es zunächst nur bei Apple-Produkten gab und dann von Microsoft unter dem Begriff "Windows" übernommen wurden. Leider gibt es jedoch auch heute noch Software, die trotz ihrer hohen Leistungsfähigkeit immer noch ohne diese Attribute auskommt. Dazu gehört die Programmiersprache Processing, die an anderen Stellen dieser Webseite bereits beschrieben wurde. Der an ein einfaches Textprogramm erinnernde Editor hat zwar den Vorteil, dass er gut zu bedienen ist und man unkompliziert mit ihm arbeiten kann, aber wenn die Oberfläche eines Processing-Programms die oben erwähnte, grafische Benutzeroberfläche aufweisen soll, muss jeder einzelne Button "zu Fuß" programmiert werden - also durch die Angabe seiner Größe, Position und Farbe als Anweisung im Programmlisting.

Auch die Abfrage, ob ein Button mit der Maus angeklickt wurde oder nicht, muss über eine if-Bedingung mit Angabe der betreffenden Koordinaten erfolgen. Kein Wunder, dass die Programmierung grafischer Oberflächen mit mehreren Buttons und anderen grafischen Elementen in Processing relativ umständlich ist und sehr viele zusätzliche Programmzeilen erfordert. Das ist schade, dann Processing besitzt extrem schnelle Grafik-Funktionen, mit denen sich ungeahnte und interessante Möglichkeiten eröffnen.

 

Um hier Abhilfe zu schaffen, habe ich einen in Visual-Basic geschriebenen "Grafik-Compiler" entwickelt. Mit diesem Programm lassen sich, wie im VB-Editor selbst, Elemente einer grafischen Benutzeroberfläche per Drag and Drop von einer Toolbar abrufen und auf einer in ihrer Größe variierbaren Fläche ablegen. Diese Fläche wird dann später zur grafischen Oberfläche des geplanten Processing Programms. Das Bild oben zeigt eine auf diese Weise aufgebaute Oberfläche für den an anderer Stelle beschriebenen Processing-Zufallsgenerator. Ist die Oberfläche fertig, wird sie mit "Save Vector Data" gespeichert (in Form von drei gesonderten Dateien mit vorgegebenen Endungen). Mit einem speziellen Processing Programm werden die Daten, die die Position, die Eigenschaften der Objekte und die Beschriftung bestimmter Objekte enthalten, von Processing aus in verschiedene Arrays geladen. Der Processing Code liest diese Arrays und erzeugt in mit dem Auge nicht mehr nachvollziehbaren Sekundenbruchteilen die fertige Oberfläche.

 

Die zuvor individuell beschrifteten Buttons lassen sich anklicken und erzeugen dabei als Feedback den entsprechenden, optischen Eindruck. In den angeklickten Textfenstern erscheint ein blinkender Cursor, der auf die Eingabe von Text wartet, und die Scrollbarsr lassen sich mit der Maus verschieben und geben dabei entsprechende Werte an das Programm zurück. Die Grafikfenster sind durch die "Second-Applet" Methode so beschaffen, dass die Grafik, wenn sie zu groß wird, automatisch hinter dem Fenster verschindet und nicht auf der Oberfläche weiter gezeichnet wird - ein wichtiges Feature, dass ohne Second-Applet sehr umständlich zu programmieren wäre.

 

Zu allen Buttons und anderen Objekten kann der Anwender einen einfachen, leeren Funktionsrumpf schreiben, zu dem beim Anklicken eines Objekts gesprungen wird. In diese leeren Funktionen kann der Anwender jeden beliebigen, gültigen Processing Code eingeben, der auch in jedem beliebigen anderen Programm funktioniert.

Durch eine spezielle, programmspezifische Syntax ist es außerdem möglich, durch Code in den Button- oder Scrollbar-Funktionen Zahlen oder Texte in Textfenstern erscheinen zu lassen oder die Farben der vom GUI-Creator erzeugten "Leuchtdioden" zu beeinflussen.

 

Kurz und gut: Das Programm bietet zwar nicht allzu viele Objekte, doch mit den wenigen vorhandenen Elementen lassen sich auf einfache Weise gut funktionierende, elementare grafische Oberflächen aufbauen.

 

Programm-Bedienung

 

Das Programm stellt 6 verschiedene Objekte zur Verfügung:

 

  • Buttons,
  • Textfenster,
  • horizontale Scrollbars,
  • Labels
  • Leuchtdioden,
  • Grafikfenster und
  • Flächen (rechteckig), um zusammengehörende Elemente optisch hervorzuheben.

 

Um ein Objekt auf der zukünftigen Benutzeroberfläche abzulegen, wird es angeklickt. Daraufhin erscheint es auf der Oberfläche und kann per Maus an seinen Bestimmungsort verschoben werden.

 

Angeklickte Objekte werden mit der Align-Funktion rechtsbündig, linksbünding oder auf gleicher Höhe (oben bzw. unten bündig) angeordnet.

Das zuerst angeklickte Objekt dient dabei als Referenz.

Um mehrer Objekte zu aktivieren, muss beim Anklicken die Shift-Taste gedrückt gehalten werden, und zwar bereits beim ersten Klick.

 

Mit Move können ein oder mehrere Objekte pixelweise oder in einstellbaren Sprungweiten verschoben werden.

 

Mit Same Size, Same width oder Same height können Objekte in ihrer Größe aneinander angeglichen werden. Auch in diesem Falle ist das zuerst angeklickte Objekt das Referenzobjekt.

Verschiedene, aufeinander abgestimmte Farbpaletten vereinfachen die harmonische Farbgebung der Oberfläche (Palette 1 ...4). Da diese natürlich Geschmacksache ist, lassen sich die Farben aller Objekte auch stufenlos über eine Property-Page individuell mittels des Windows-Color-Editors bestimmen.

 

Die Farbänderung nach Palettenwechsel gilt erst für die ab dann erstellten Objekte. Um auch zuvor erstelle (angeklickte) Objekte mit der neuen Farbe zu versehen, genügt ein Klick auf:

Pal, Col. to obj. (Palette-Color to object).

 

Mit Copy Color kann die Farbe eines als erstes angeklickten Objektes auf ein als zweites angeklicktes Objekt (bei gedrückt gehaltener Shift-Taste) übertragen werden.

 

Nach einem Klick auf Select All werden alle Objekte auf der Oberfläche markiert, um sie zum Beispiel zu löschen oder zu verschieben.

 

Mit Select Category werden zum Beispiel nur alle vorhandenen Objekte des Typs eines zuvor angeklickten Objektes markiert. Ist z.B. ein Button angeklickt, so werden damit alle Buttons auf der Oberfläche aktiviert.

 

Bring to rear - Bring to front bringt Objekte in den Hintergrund/Vordergrund, so dass sie von anderen Objekten überdeckt werden oder selbst andere Objekte überdecken.

 

Delete Objekt löscht ein angeklicktes Objekt. Das Gleiche kann auch mit einem Druck auf die Escape-Taste bewirkt werden.

 

 

Property Page

Bei einem Klick auf Property Page erscheint das individuelle 

Eigenschaftsfenster des betreffenden Objektes (Property Page), in welchem man unter anderem die Haupt- und die Rahmenfarben eines Objektes ändern, Texte eintragen und Position und Größe von Objekten bestimmen kann. Das BIld zeigt die Property Page eines Buttons, in der sich auch dessen Beschriftung editieren lässt.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  

  

Mit Back-Color und Grid Color können die Farben des Bildhintergrundes und des Gitters geändert werden, nachdem diese zuvor aus einer Palette von vier Möglichkeiten ausgesucht wurden. Diese Einstellungen haben keinen Einfluss auf die erzeugte Oberfläche.

 

Die drei folgenden Textfenster zeigen die Nummer (z.B. 1 = Button), die absolute Position in der Liste und die Position in einer angeklickten Gruppe eines Objektes an.

 

Check Data zeigt eine Liste der Objekte sowie ihrer Parameter, die identisch mit dem zur Weitergabe an Processing gespeicherten Array-Inhalt ist.

 

Mit Grid kann das Gitter ein und ausgeblendet werden.

 

In der Textzeile darunter steht der Pfad und der Name der aktuell geöffneten Datei.

 

 

 

Open/Save Vector Data: Laden bzw. Speichern der Daten zum späteren Laden in eine Processing-Datei.

 

Die restlichen beiden Buttons sind vorerst deaktiviert und für eine spätere Version gedacht, in der eine fertige Processing-Datei, von der aus nichts mehr geladen werden muss, direkt vom GUI-Creator erzeugt wird.

 

 

Das obige Bild zeigt die mit dem GUI-Creator erzeugte Programm-Oberfläche in einem Processing-Fenster, nachdem sie von einem Processing-Programm geladen wurde.  Alle Objektdaten wurden von der Festplatte in ein Array geladen und mit einem vorgegebenem Processing-Code aus den Array-Daten in sichtbare Objekte umgewandelt. Beim Anklicken verändern die Buttons ihr Aussehen  und in den Textfenstern erscheint ein blinkender Cursor.

 

Processing Code

 

 

Wird fortgesetzt