Masken-Designer
1 Überblick
Der Masken-Designer ist ein einfach zu bedienendes grafisches Werkzeug zum Gestalten von Zielsystem-Bedienoberflächen.
- Masken definieren den Rahmen für Bedien- und Anzeigeelemente und können hierarchisch angeordnet werden.
- Textfelder, Bargrafen, Trendschreiber, Tasten, Listenfelder und weitere Objekte werden in den Masken positioniert und dienen der Darstellung von Zuständen und Werten sowie der Bedienung des Systems.
- Die Parameterdialoge der Masken und Objekte bieten umfangreiche Einstellmöglichkeiten. So können den Elementen unterschiedliche Farben, Texte, Bilder und Schriftarten zugeordnet werden.
- Die Bilder, Schriftarten und vordefinierten Texte werden als sprachabhängige Ressourcen verwaltet.
- Dank Unicode-Unterstützung können die Bedienoberflächen an die verschiedensten Sprachen leicht angepasst werden.
2 Benutzeroberfläche
Der Masken-Designer verfügt über zwei Ansichten. In der Ersten wird der Masken-Objekt-Baum definiert. In das Hintergrundfenster werden weitere Masken eingefügt und die Objekte platziert und konfiguriert.
Mit den Reitern unterhalb des Menüs wird zwischen den Ansichten gewechselt. Das Hauptmenü und die Kontextmenüs stellen zahlreiche Befehle zum Bearbeiten der Masken, Objekte und Ressourcen bereit.
2.1 Menü
Über das Hauptmenü kann auf allgemeine Befehle zugegriffen werden. Es besteht aus vier Untermenüs.
| Untermenü | Inhalt |
|---|---|
| Datei | · Importieren von Masken und Objekten · Ersetzen des aktuellen Designs durch eine andere Konfiguration · Exportieren ausgewählter Masken und Objekte |
| Bearbeiten | · Rückgängig machen der letzten Aktion (Strg+Z) · Alle Elemente markieren (Strg+A) · Alle markierten Elemente ausschneiden (Strg+X) · Alle markierten Elemente kopieren (Strg+C) · Kopierte Elemente einfügen (Strg+V) · Alle markierten Elemente löschen (Entf) |
| Einstellungen | · Über Designer… können die Zoomstufe und Hintergrundfarbe des Anzeigebereiches ausgewählt werden. · Die Schriftart der Benutzeroberfläche kann geändert werden. |
| ? | · Diese Hilfe kann aufgerufen werden. · Die Versions-Informationen können aufgerufen werden. |
Das Hauptmenü bietet nur einen Bruchteil der möglichen Operationen für Masken, Objekte und Ressourcen an. Die wesentlichen Befehle für die einzelnen Elemente sind in den Kontextmenüs zu finden. Sie werden in Abschnitten unter Gestalten von Bedienoberflächen und Verwalten von Ressourcen beschrieben.
3 Gestalten von Bedienoberflächen
Masken und Objekte bilden die Grundlage für das Design von Bedienoberflächen. Die Objekte realisieren die Funktionen zur Darstellung von Informationen und Interaktion mit dem Nutzer. Die Masken realisieren die Organisation verschiedener Ansichten und unterstützen die Hintergrundgestaltung.
Die Ansicht für die Masken und Objekte teilt sich in zwei Bereiche, den Masken-Objekt-Baum und den Anzeigebereich. Zusätzlich werden Eigenschaften der aktuell ausgewählten Maske bzw. des Objekts, wie Name, Position, Größe, Sichtbarkeit usw., in einem nichtmodalen Dialog angezeigt und können dort geändert werden.
Die Wurzel des Masken-Objekt-Baums bildet das Hintergrundfenster. Dabei handelt es sich um eine spezielle Maske, die nicht verschoben und gelöscht werden kann. Die Größe des Hintergrundfensters definiert die Auflösung der Anzeige im Zielsystem.
3.1 Anlegen von Masken und Objekten
In einer Maske können untergeordnete Masken und Objekte mit Hilfe der Kontextmenübefehle für den Baum und den Anzeigebereich angelegt werden. Dort findet man auch Befehle zum Kopieren oder Löschen von Objekten und Maskenbäumen sowie zum Aufruf der Parameterdialoge für weitere Einstellungen.
Die neue Maske oder das neue Objekt ist der Maske zugeordnet, deren Kontextmenü aufgerufen wurde. Dadurch entsteht eine hierarchische Struktur. Diese wiederum hat Einfluss auf die Sichtbarkeit der Objekte.
Um mit einem Objekt sinnvoll arbeiten zu können, muss zuerst der Typ im Objektdialog ausgewählt werden. Sowohl für eine Maske als auch für ein Objekt sollte zudem ein die Funktion näher beschreibender Name angegeben werden.
Die spezifischen Eigenschaften der einzelnen Elemente werden über den Button/Kontextmenübefehl „Weitere Einstellungen…“ eingestellt.
3.2 Positionierung und Größe
Position und Größe einer Maske bzw. eines Objekts können im nichtmodalen Eigenschafts-Dialog festgelegt werden.
Alternativ ist es auch möglich, Masken und Objekte im Anzeigebereich mit der Maus zu verschieben und sie zu vergrößern bzw. zu verkleinern. Durch Betätigen der linken Maustaste über einer Maske oder einem Objekt wird sie oder es ausgewählt. Hält man die Maustaste dann gedrückt, so wird die Maske oder das Objekt mit dem Cursor verschoben. An den Rändern zeigt der Cursor an, in welche Richtung sie mit gedrückter linker Maustaste bewegt und damit die Größe sowie die Position geändert werden können.
3.3 Gruppenoperationen für Objekte
Markieren
Innerhalb einer Maske können auch mehrere Objekte ausgewählt werden. Dafür muss beim Anklicken der Objekte zusätzlich die Strg-Taste gedrückt werden. Das zuletzt ausgewählte wird dann mit gestrichelten Linien in den Systemfarben für markierte Texte umrandet, während die anderen markierten Objekte einen grau-schwarz-gestrichelten Rahmen erhalten.
Zum Markieren aller Objekte innerhalb eines Rechtecks dient die Lassoauswahl. Betätigt man die linke Maustaste über dem freien Bereich und hält sie beim Ziehen gedrückt, so spannt man ein Rechteck auf. Es wird wie der Rahmen der hervorgehobenen Markierung dargestellt, weil der Windows-Standardrahmen und auch invertierte Bitmaps bei der Farbe Dunkelgrau (RGB(128,128,128)) nicht sichtbar sind. Alle vollständig im aufgespannten Rechteck liegenden Objekte werden beim Loslassen der Maustaste markiert. Dabei beschränkt sich die Auswahl auf eine Maske. Sollten mehrere Masken sichtbar sein, so wird die am weitesten im Vordergrund befindliche gewählt, die mindestens ein Objekt enthält, das im aufgespannten Rechteck liegt und nicht komplett durch weiter im Vordergrund befindliche Masken verdeckt wird. Um die Lassoauswahl innerhalb einer Maske zu starten, muss man die linke Maustaste zusammen mit Strg oder Shift drücken. Ohne diese Zusatztasten wird die Maske ausgewählt und verschoben.
Neben Strg kann auch Shift verwendet werden, mehrere Objekte zu markieren.
Markierung aufheben
Um die Mehrfachauswahl aufzuheben, genügt es, eine Maske oder ein Objekt ohne gedrückte Strg- oder Shift-Taste anzuklicken oder die Auswahl im Masken-Objekt-Baum zu ändern. Dann ist auch der nichtmodale Eigenschafts-Dialog wieder verfügbar. Außerdem kann durch Doppelklick die Mehrfachauswahl aufgehoben und der zugehörende Parameterdialog aufgerufen werden.
Mit der Shift Taste kann eine einzelne Markierung auch wieder entfernt werden. Nach erneutem Anklicken eines bereits markierten Objekts mit gedrückter Shift-Taste wird seine Markierung aufgehoben.
Operationen
Die Hervorhebung des zuletzt Markierten soll auf seine spezielle Bedeutung für einige Operationen hinweisen, die bei Mehrfachauswahl über das Kontextmenü aufgerufen werden können.
Beim Ausrichten definiert das hervorgehobene Objekt den linken, rechten, oberen oder unteren Rand, an dem die markierten Objekte angeordnet werden. Außerdem legt es die Breite und/oder Höhe fest, die den Anderen beim Angleichen zugewiesen wird. Mit den anderen Kontextmenübefehlen werden die markierten Objekte ausgeschnitten, kopiert, gelöscht, im Bezug auf die Maske horizontal sowie vertikal zentriert oder so verschoben, dass sie gleiche Abstände haben. Für die zuletzt genannte Operation müssen mindestens drei Objekte markiert sein. Natürlich können die markierten Objekte auch mit gedrückter linker Maustaste gemeinsam verschoben werden.
Zum Hervorheben eines anderen bereits markierten Objekts muss es erneut mit gedrückter Strg-Taste angeklickt werden.
3.4 Sichtbarkeit
Hierbei muss unterschieden werden, ob von der Sichtbarkeit im Anzeigebereich des Maskendesigners oder der Darstellung im Zielsystem die Rede ist.
Sichtbarkeit im Maskendesigner
Für die Anzeige der Masken und Objekte im Anzeigebereich gelten folgende Regeln:
- Eine Maske wird angezeigt, wenn sie oder mindestens eines der enthaltenen Objekte markiert ist.
- Über die Einstellung „Sichtbar im Designer“ im Eigenschafts-Dialog oder Kontextmenü kann die Darstellung weiterer Masken erzwungen werden.
- „Permanent“ sichtbare Masken werden immer angezeigt.
- „Mit übergeordneter Maske“ bedeutet, dass sie dargestellt werden, wenn die Vatermaske angezeigt wird.
- Und „nur bei ausgewählter Maske“ erfordert, dass die erste Regel erfüllt sein muss.
- Mit einer Maske werden auch alle enthaltenen Objekte angezeigt.
Eine Maske verdeckt eine andere Maske, wenn sie sich weiter im Vordergrund befindet, d.h. sich im Masken-Objekt-Baum über der anderen befindet, oder der anderen untergeordnet ist (z.B. als Kindmaske). Bei Objekten hängt die Anzeige nur von der Lage im Vordergrund ab.
Sichtbarkeit im Zielsystem
Für die Sichtbarkeit der Masken und Objekte auf der Anzeige des Zielsystems gelten etwas andere Regeln.
Die Einstellung „Sichtbar im Designer“ hat dort keinerlei Auswirkung. Die Anzeige der Masken und Objekte wird zunächst über den Schalter „Sichtbar nach dem Start“ im Eigenschafts-Dialog festgelegt. Während der Programmabarbeitung kann sie jedoch mit Hilfe der HMI-Funktionsbausteine geändert werden.
Masken und Objekte sind auf der Zielsystemanzeige nur sichtbar, wenn auch alle übergeordneten Masken angezeigt werden. Außerdem schränken die übergeordneten Masken den Anzeigebereich ein, d.h. außerhalb befindliche Teile von untergeordneten Masken und Objekten werden nicht dargestellt. Auf dieses Problem wird im Masken-Objekt-Baum mit gelben Symbolen hingewiesen.
Masken und Objekte auf gleicher Ebene befinden anfangs in der Reihenfolge, die im Masken-Objekt-Baum festgelegt wurde. Durch Sichtbar- und Nicht-Sichtbar-Schalten von Objekten wird sie jedoch verändert. Zuvor nicht sichtbare Masken und Objekte werden bei der Anzeige automatisch in den Vordergrund gebracht. Außerdem können sich übereinander liegende sichtbare Objekte gegenseitig beeinflussen. Deshalb werden Objekte mit gelben Symbolen markiert, wenn sich ihre Bereiche überkreuzen.
4 Verwalten von Ressourcen
Als Ressourcen werden die von den Masken und Objekten verwendeten Bitmaps, Schriftarten und vordefinierten Texte bezeichnet. Sie werden über zwei IDs adressiert. Die erste ID (0-9999) kennzeichnet die Sprache und die zweite (0-65534) verweist auf die eigentliche Ressource. Da es zusätzlich noch eine Default-Sprache gibt, können damit theoretisch 65535 Bitmaps, 65535 Schriftarten und 65535 vordefinierte Texte in 10001 Sprachen verwendet werden.
Die Ansicht für die Ressourcen im Masken-Designer ist in zwei Bereiche geteilt. Links befindet sich ein Baum, in dem die Sprachen aufgelistet sind. Für die Default-Sprache und jede weitere Sprache werden im Baum die Einträge „Bitmaps“, „Schriftarten“ und „Texte“ angegeben. Wird einer dieser Einträge markiert, so erscheint auf der rechten Seite eine Liste für die entsprechenden Ressourcen.
Über die Kontextmenüs können sprachabhängige Ressourcen für Bitmaps, Schriftarten und Texte angelegt und bearbeitet werden.
4.1 Default- und sprachabhängige Werte
Häufig sind in Projekten, die mehrere Sprachen unterstützen, nur ein Teil der Ressourcen wirklich sprachabhängig. Eine Reihe von Bildern, Schriftarten und teilweise auch Texten müssen für die verschiedenen Sprachen nicht angepasst werden. Deshalb unterstützt der Masken-Designer Default-Werte. Sie werden der Default-Sprache zugeordnet. Da es für jedes Bitmap, jede Schriftart und jeden Text einen Default-Wert gibt, müssen für die Sprachen nur die speziellen Werte angegeben werden. Ist in einer Sprache für eine Ressource kein spezieller Wert definiert, wird automatisch der Default-Wert verwendet. So wird nicht nur das Editieren der Ressourcen erleichtert, sondern auch Speicherplatz gespart.
In den Listen für die Default-Sprache können über das Kontextmenü neue Elemente angelegt werden. Sie dienen als Default-Werte. Bei den anderen Sprachen ist das nicht möglich. Hier können den Elementen nur andere (sprachabhängige) Werte zugewiesen werden. Ob in einer Sprache für ein Element der Default- oder ein spezieller Wert verwendet wird, lässt sich in der Liste leicht an dem Symbol vor dem Namen ablesen. Ein Link-Symbol verweist auf den Default-Wert, während die Icons für Bitmaps, Schriftarten und Texte spezielle Werte kennzeichnen.
Zum Löschen von Listeneinträgen muss man wieder zur Default-Sprache wechseln. Mit dem Befehl im Kontextmenü werden der Default- und alle sprachabhängigen Werte gelöscht. Sollen nur die sprachabhängigen Werte entfernt werden, so muss man im Kontextmenü in der Liste der entsprechenden Sprache den Befehl „Zurücksetzen“ wählen. Das Löschen, Zurücksetzen sowie die Zwischenablageoperationen können auch auf mehreren ausgewählten Elementen ausgeführt werden.
4.2 Sprachen
Bei einem neuen Projekt findet man hier meist nur den Eintrag für die Default-Sprache. Über das Kontextmenü können aber leicht neue Sprachen angelegt werden.
Ist eine andere als die Default-Sprache ausgewählt, so kann ihr in der Eingabemaske auf der rechten Seite eine andere ID und ein anderer Name zugewiesen werden. Beide Werte müssen eindeutig sein.
Das Kontextmenü für die Sprachen ermöglicht es außerdem, den Eintrag im Baum über die Zwischenablage zu kopieren und sie zu löschen.
4.3 Bitmaps
Anlegen
Eine neue Bitmap-Ressource wird über den Befehl „Neu“ im Kontextmenü angelegt. Anschließend öffnet sich der zugehörende Parameterdialog.
Einer Bitmap-Ressource wird eine PEGBMP-Datei aus dem BITMAP-Verzeichnis des Projekts zugeordnet. Dabei handelt es sich um ein spezielles Bitmap-Format der im Zielsystem implementierten Grafikbibliothek. Die bereits existierenden PEGBMP-Dateien werden links aufgelistet. Nach der Auswahl einer Datei, wird das Bild rechts, im Vorschaubereich, dargestellt. Unter der Dateiliste werden die Ausdehnung des Bitmaps und die zugeordnete Transparentfarbe angegeben. Um große Bilder ohne Stauchung betrachten zu können, kann die Fenstergröße des Dialogs geändert werden.
Bei den Defaultwerten kann der eindeutige Name und die eindeutige ID geändert werden.
Importieren/Exportieren
Über das Kontextmenü der Dateiliste können weitere Bilder durch Konvertieren von BMP-Dateien (Windows-Bitmap-Format) importiert und vorhandene als BMP-Dateien exportiert bzw. gelöscht werden.
Nach Aufruf von Importieren wird ein weiterer Dialog geöffnet. Hier muss zunächst die BMP-Datei angegeben werden. Das erfolgt über den mit dem Browse-Button geöffneten Dateiauswahldialog. Aus dem Namen der BMP-Datei wird automatisch ein Vorschlag für die PEGBMP-Datei gebildet. Er kann nach Belieben geändert werden. Außerdem kann dem Bitmap eine Transparenzfarbe zugeordnet werden. Mit der OK-Taste wird die Konvertierung gestartet. Da nur die 256 Standardfarben unterstützt werden, kann es zu Farbänderungen kommen. Eine entsprechende Meldung wird dann am Ende der Konvertierung angezeigt.
Beim Exportieren wird der Nutzer über einen Dateidialog zur Eingabe eines Namens für die zu erstellende BMP-Datei aufgefordert. Die neue Datei wird im gewünschten Verzeichnis erzeugt und auf Wunsch gleich im eingestellten Standard-Betrachter angezeigt.
Nach Auswahl des Bildes kann bei Bedarf noch mit einer Transparenz gearbeitet werden. Transparenz zur Farbe x, sorgt dafür, dass alle Bereiche mit der Farbe x später transparent sind. Durch die Arbeit mit Bitmaps kann es vorkommen, dass durch Farbverläufe die Arbeit mit Transparenzen erschwert werden.
Bearbeiten
Durch Doppelklick auf eine bereits definierte Bitmap-Ressource oder über den Kontextmenübefehl „Bearbeiten“ wird der Parameterdialog geöffnet.
Bei Änderung des Bildes wird es automatisch an allen verwendeten Stellen gleichzeitig geändert.
4.4 Schriftarten
Anlegen
Eine neue Schriftart-Ressource wird über den Befehl „Neu“ im Kontextmenü angelegt. Anschließend öffnet sich der zugehörende Parameterdialog.
Bei den Schriftarten muss eine Font-Datei angegeben werden. Die links aufgelisteten PBF-Dateien befinden sich im FONT-Unterverzeichnis des Projekts und beinhalten Bitmap-Fonts in dem speziellen Format der verwendeten Grafikbibliothek. Nach dem Markieren einer Datei werden die enthaltenen Zeichen im Vorschaubereich angezeigt. Sollte es mehrere Zeichenbereiche geben, so kann man mit dem Drop-Listenfeld über der Vorschau zwischen ihnen wechseln. Entsprechend ändert sich die Anzeige in der Vorschau. Der Schriftart-Ressource wird immer die komplette PBF-Datei mit allen Zeichenbereichen zugeordnet. In weiteren Anzeigen werden die Höhe der Zeichen und der für die PBF-Datei im Zielsystem benötige Speicherplatz angegeben.
Bei den Defaultwerten kann der eindeutige Name und die eindeutige ID geändert werden.
Importieren
Mit der rechten Maustaste über der Dateiliste öffnet man das Kontextmenü, mit dem weitere PBF-Dateien durch Konvertieren von Schriftarten importiert oder vorhandene Dateien gelöscht werden können.
Nach dem Aufruf von Importieren öffnet man einen weiteren Dialog, in dem zunächst die zu konvertierende Schriftart ausgewählt wird. Im obersten Drop-Listenfeld auf der linken Seite werden alle auf dem PC installierten Schriftarten aufgeführt. Danach können weitere Eigenschaften wie die Höhe der Zeichen oder Fett, Kursiv, Durchgestrichen und Unterstrichen angegeben werden. Um Speicherplatz zu sparen oder spezielle Zeichen, z.B. für andere Sprachen hinzuzufügen, kann der Zeichenbereich verkürzt oder erweitert werden. Entsprechende Befehle sind im Kontextmenü für das Listenfeld „Zeichen“ enthalten. Schließlich kann der vorgeschlagene Dateiname noch geändert werden. Mit der OK-Taste wird die Konvertierung gestartet und eine neue PBF-Datei erzeugt.
Bearbeiten
Durch Doppelklick auf eine bereits definierte Ressource oder über den Kontextmenübefehl „Bearbeiten“ wird der Parameterdialog geöffnet.
4.5 Texte
Anlegen
Eine neue Text-Ressource wird über den Befehl „Neu“ im Kontextmenü angelegt. Anschließend öffnet sich der zugehörende Parameterdialog.
Text-Ressourcen können neben dem Namen und der ID noch ein bis zu 2048 Zeichen umfassender Text zugeordnet werden. Dieser kann auch Zeilenumbrüche enthalten.
Bearbeiten
Durch Doppelklick auf eine bereits definierte Text-Ressource oder über den Kontextmenübefehl „Bearbeiten“ wird der Parameterdialog geöffnet.
5 Eigenes Bitmap importieren
Zum Importieren eines eigenen Bitmaps wird im Masken-Designer der Resourcenbaum geöffnet.
Hier wird im rechten Feld mit der rechten Maustaste das Kontextmenü geöffnet und mit „Neu…“ ins nächste Fenster gewechselt.
Unter der Bitmap-Liste kann wieder mit der rechten Maustaste das Kontextmenü geöffnet und mit „Importieren…“ ins nächste Fenster gewechselt werden.
Im oberen rechten Bereich ist ein „Suchen Button“, wonach man nach dem gewünschten Bild suchen kann.
Nach Auswahl des Bildes kann bei Bedarf noch mit einer Transparenz gearbeitet werden. Transparenz zur Farbe x, sorgt dafür, das alle Bereiche mit der Farbe x später transparent sind. Durch die Arbeit mit Bitmaps kann es vorkommen, dass durch Farbverläufe die Arbeit mit Transparenzen erschwert wird.
Anschließend kann mit „OK“ bestätigt und dem Bild auch noch ein eindeutiger Name zugewiesen werden.
Wurde das Bitmap importiert, kann es nun im Masken-Designer verwendet werden.
Bei Änderung des Bildes wird es automatisch an allen verwendeten Stellen gleichzeitig geändert.
