Klicken Sie mit der linken Maustaste auf eine freie Stelle auf der Editor-Arbeitsoberfläche. Im Fenster „Eigenschaften“ können Sie die Seite bearbeiten. Klicken Sie z.B. auf den Farbkreis, öffnet sich ein neues Fenster, in dem die Farbe der Seite festgelegt werden kann.
Tipp: Mit der Eigenschaft „Standard-Sicht“ können Sie auswählen, welche Seite die Startseite zur Laufzeit sein soll.
Seitengröße ändern
Die Größe der Seite kann auch nachträglich verändert werden.
Klicken Sie auf den Stift neben Breite oder Höhe, öffnet sich das Fenster „Seitengröße ändern“. Höhe und Breite der Seite lassen sich nun beliebig verändern. Dabei gilt es zu beachten, dass Komponenten, die außerhalb des neuen Größenbereiches liegen gelöscht werden.
In diesem Beispiel bleibt nur „Button 1“ im grauen Bereich, also innerhalb der Seite bestehen, da sich allen anderen außerhalb des neuen Größenbereichs befinden, nachdem sowohl bei Breite als auch bei Höhe der Wert 600 eingetragen worden ist:
View Manager
Sie haben die Möglichkeit, Ihr Projekt in übersichtliche „Views“ (Sichten) zu unterteilen, um die Navigation innerhalb eines umfangreichen Projektes deutlich zu vereinfachen. Dies geschieht mit dem „QuickHMI View Manager„.
Klicken Sie mit der rechten Maustaste auf eine freie Stelle auf der Editor-Arbeitsoberfläche, so können Sie in den View – Manager wechseln. Das Eigenschaften-Fenster können Sie auch aufrufen, indem Sie die „Alt-Taste“ gedrückt halten oder Sie wählen im Hauptmenü den Punkt „Bearbeiten“ und dort „View-Manager„.
Die Steuerelemente werden ausgeblendet und durch das Element „View“ ersetzt. Der View lässt sich jetzt wie jedes andere Steuerelement per „Drag&Drop“ auf der Editor-Arbeitsfläche platzieren, in seiner Größe anpassen und selektieren. Selektierte Views haben, wie andere Objekte im Editor auch, Eigenschaften. Diese können ebenfalls über das Eigenschafts-Fenster des selektierten Views angepasst werden.
Alle Views lassen sich auch im Menüpunkt „Bearbeiten“ / „Navigation“ auswählen.
Hinzufügen von Seiten, Kopf- und Fußzeilen oder Dialogen
Hinzufügen von Seiten
Um neue Seiten, Kopf- und Fußzeilen oder Dialoge hinzuzufügen, klicken Sie im „Projekt Explorer“ auf „Seite hinzufügen“. In den Projekteigenschaften können Sie nun den gewünschten Typ auswählen.
Hinzufügen von Kopf- und Fußzeilen
Wählen Sie als „Typ“ „Header/Footer“. Nun können Sie eine der Vorlagen wählen oder individuelle Werte eingeben. Sind alle Eingaben getätigt, fahren Sie fort mit „OK“.
„Seite2“ wurde somit als Kopf- und Fußzeile definiert. Diese können Sie bearbeiten und in allen anderen Seiten einblenden lassen.
Hierzu wählen Sie eine Seite, in der eine Kopf- und Fußzeile enthalten sein soll.
In den „Eigenschaften“ klicken Sie in der Zeile „Kopfzeile“ den Auswahlbutton. Dann erscheinen alle Seiten, die Sie vorher als Kopf- und Fußzeilen definiert haben.
Gleichermaßen gehen Sie bei der „Fußzeile“ vor. So können Sie wählen, welche Seite als Kopf- und welche als Fußzeile eingeblendet werden soll.
Für die „Seite1“ wird „Seite2“ als Kopfzeile festgelegt.
Die Kopfzeile wird nun im „Laufzeitmodus“ standardmäßig eingeblendet.
Gleiches würde für die Fußzeile gelten, hätten Sie im Vorfeld „Seite2“ in den Eigenschaften als Fußzeile definiert.
Gruppierung von Seiten
In QuickHMI ist es möglich, mehrere Seiten in Gruppen zusammenzufassen. Dies garantiert eine noch bessere Übersicht, vor allem in größeren Projekten. Hierzu wählen Sie eine Seite an, und gehen in deren Eigenschaften. In der Spalte „Gruppe“ geben Sie den gewünschten Gruppennamen ein und bestätigen mit Enter. Dadurch wird die Gruppe angelegt und die ausgewählte Seite wird automatisch dieser Gruppe zugewiesen. Um weitere Seiten der Gruppe hinzuzufügen, wählen Sie die gewünschten Seiten an und geben Sie wie zuvor bei Gruppe den Gruppennamen ein und bestätigen Sie mit Enter.
In diesem Beispiel wurde die Gruppe „Gruppe1“ angelegt und die ausgewählte „Seite3“ und „Seite2“ dieser zugewiesen. Ist eine Gruppe angelegt, können Sie weitere Seiten einfach per Drag&Drop in diese Gruppe ziehen. Sollen Seiten aus einer Gruppe entfernt werden, ziehen Sie die Seite einfach auf den Überpunkt „Seiten und Ausschnitte“.
Um Gruppen wieder zu löschen, entfernen Sie einfach den Gruppennamen des Gruppenordners. Alle darin enthaltenen Seiten werden aus der Gruppe wieder entfernt, bleiben jedoch einzeln erhalten.
Im „Laufzeitmodus“ erscheint die Gruppe in der Seitenübersicht und kann aufgeklappt werden, um zu den darin enthaltenen Seiten zu gelangen.
Responsive Design durch verschiedene Layouts
Ab QuickHMI Ibex haben Sie nun die Möglichkeit, Ihre Visualisierung oder auch nur einzelne Seiten der Visualisierung auf verschiedene Endgeräte anzupassen. Den Nutzern Ihrer Visualisierung wird mit der Anpassung immer die bestmögliche Benutzererfahrung geboten.
Dafür stehen Ihnen pro Seite 3 verschiedene Layouts zur Verfügung (Klein, Mittel, Groß). Alle Layouts teilen sich die selben Steuerelemente. Ein Button der im kleinen Layout platziert wird, erscheint somit auch im großen Layout (sofern dieses Layout verwendet wird). Falls diese Button dort nicht benötigt wird, kann er dort entweder ausgeblendet (Visible Eigenschaft) oder außerhalb des sichtbaren Bereiches platziert werden.
Das Wechseln der Layouts ist unten links auf jeder Seite über die entsprechenden Icons möglich. Das aktuell Angezeigte Layout erkennen Sie an dem voll ausgefüllten Icon sowie der farbigen Hervorhebung. Durch ein Klick auf ein anderes Icon wechseln Sie zu dem jeweiligen Layout.
Anlegen eines neuen Layouts
Noch nicht angelegte Layouts erkennen Sie an einem umrissenen, aus gegrauten Icon. Ein Klick auf ein solches Icon öffnet den Dialog zum Initialisieren eines neuen Layouts:
Beim Anlegen eines neuen Layouts muss ein Basislayout, sowie eine Auflösung angegeben werden.
Durch das Basislayout wählen Sie aus vom welchem bestehenden Layout die Eigenschaftswerte (Größe, Positionen, etc) der Steuerelemente und Seite übernommen werden sollen.
Bei der Wahl der Auflösung ist zu beachten, dass Sie hiermit die Größe der Zeichenfläche (sichtbarer Bereich) im Editor direkt beeinflussen. Die Anzeige zur Laufzeit beeinflussen Sie hiermit aber nur indirekt, und zwar durch die Festlegung des Seitenverhältnisses. Die genaue Auflösung kann durch mögliches Zoomen zur Laufzeit abweichen.
Löschen eines Layouts
Sollten Sie ein Layout nicht mehr benötigen, lässt sich dieses über einen Rechtsklick auf das Icon löschen.
Bearbeiten eines Layouts
Sollte Sie im Nachhinein die Editorauflösung ein Layout bearbeiten wollen, können Sie dies über die Seiteneigenschaften erreichen.
Festlegen, ab wann ein Layout zur Laufzeit dargestellt wird
Durch ein Klick auf das Zahnrad-Icon neben den Layout-Icons kommen Sie direkt zu den Responsive-Einstellungen dieses Projektes. Hier legen Sie Bildschirmbreiten fest, ab denen das jeweilige Layout zur Laufzeit verwendet werden soll.
Eine Testseite zum Anzeigen der aktuellen Gerätebildschirmbreite finden Sie hier: https://www.indi-an.com/de/quickhmi/responsive-breakpoints/
