UI Designer

Der UI-Designer ist an verschiedenen Stellen des Vision-Plugin eingebunden. Er ermöglicht es anwendungsspezifische Benutzeroberflächen zu konfigurieren, die dem Benutzer dann im Anlagenbetrieb an bestimmten Stellen angezeigt werden. Mit solchen Oberflächen können zum Beispiel Informationen über das System angezeigt, Parameter verstellt oder Viper.NET-Funktionen gestartet werden.

../_images/vision-uidesigner-overview.png

Der UI Designer enthält mittig das UI-Panel (1), welches eine funktionslose Vorschau der Oberfläche zeigt. Neue Oberflächen-Elemente werden hinzugefügt, indem sie per Drag-and-drop aus der Liste verfügbarer Elemente (2) auf das Panel gezogen werden. Die Elemente werden mit der Maus selektiert und nach Belieben angeordnet. Jedes Element besitzt spezifische Eigenschaften, die im Einstellungs-Editor (3) bearbeitet werden. Die Auswahl des Elementes erfolgt entweder im UI-Panel oder im Dropdown oben im Einstellungs-Editor. Hier können zum Beispiel Darstellungs-Eigenschaften, wie die Schriftgröße, oder funktionale Eigenschaften wie zum Beispiel die Aktion bei einem Buttonklick konfiguriert werden. Die Einstellungen werden bei den Oberflächenelemente beschrieben.

Die übrigen Steuerelemente des UI-Designers unterstützen bei der Bearbeitung:

  1. Open UI in floating window: Öffnet eine funktionsfähige Version der konfigurierten Oberfläche in einem Dialogfenster. Hier kann die Funktionalität getestet werden.

  2. Reinitialize: Setzt die Oberfläche auf den initialen, leeren Zustand zurück.

  3. Copy to clipboard: Kopiert die gesamte Oberflächenkonfiguration in die Zwischenablage. Die Funktion eignet sich, um ein UI an eine andere Stelle innerhalb Viper.NETs zu übertragen.

  4. Paste from clipboard: Fügt eine zuvor kopierte Oberfläche aus der Zwischenablage ein. Bereits vorhandene Elemente werden dabei nach Bestätigung entfernt.

  5. Edit: Bietet in einem Drop-down-Menü Standardfunktionen zum Bearbeiten der einzelnen UI-Elemente: Zum Beispiel werden rückgängig machen, wiederholen oder entfernen von Elementen angeboten.

  6. Tools: Werkzeuge zum Bearbeiten der UI-Elemente:

    • Tab order: Ein Klick im Menü de-/aktiviert diesen Modus. Damit wird die Reihenfolge angezeigt und angepasst, mit der Anwender bei Betätigung der Tabulator-Taste zwischen den UI-Elementen wechseln. Die Reihenfolge wird in Form kleiner Zahlen-Overlays zu jedem UI-Element angezeigt. Durch wiederholtes Klicken werden einzelne Prioritäten verändert.

Oberflächenelemente

Die verfügbaren Oberflächenelemente sind gemäß Ihrer Funktion in Kategorien gruppiert. Alle basieren auf Windows Forms Steuerelementen. Die Eigenschaften des zugrundeliegenden Steuerelementes, welche zum Beispiel die Darstellung steuern, werden alle im Einstellungs-Editor aufgeführt.

Zusätzliche Eigenschaften, die Viper.NET spezifisches Verhalten steuern, werden in der kategorisierten Ansicht des Einstellungs-Editor unter _MAK_ gruppiert. Die meisten Oberflächenelemente besitzen hier drei Eigenschaften:

  1. DataConnection: Identifiziert ein Datenobjekt oder eine Funktion innerhalb von Viper.NET, mit der das Element verknüpft wird.

  2. Operation: verweist auf eine Operation aus der Benutzerverwaltung. Das Zugriffsrecht des angemeldeten Benutzers steuert den Wert der eingestellten OperationProperty.

  3. OperationProperty: definiert eine Eigenschaft des Oberflächenelementes, deren Wert von Viper.NET anhand des Benutzer-Zugriffrechtes auf die ausgewählte Operation umgestellt wird.

Hinweis

Operation und OperationProperty sollten genutzt werden, um die Oberfläche anhand der Rechte des angemeldeten Benutzers dynamisch anzupassen: Als OperationProperty sollte bevorzugt die Enabled Eigenschaft genutzt werden, welche die Nutzbarkeit eines sichtbaren Steuerelementes visualisiert und steuert. Die alternativ empfohlene Wahl der Visible Eigenschaft blendet Steuerelemente bei fehlenden Berechtigungen aus. Die Operation sollte passend zur gewählten DataConnection eingestellt werden.

Die DataConnection wird in einem separaten Dialog aus einer Liste verfügbarer Verbindungen ausgewählt. Nur Verbindungen, die zum Typen des Oberflächenelementes kompatibel sind werden angezeigt.

../_images/vision-uidesigner-dataconnectionsettings.png

In einer der verfügbaren Kategorien (1) wird ein Listeneintrag markiert (2) und die Auswahl mit Apply (3) bestätigt. Cancel* schließt den Dialog, ohne eine neue DataConnetion zu speichern. Reset (5) setzt die Listenmarkierung zurück auf die aktuell eingestellte DataConnection.

Windows Forms

Die Kategorie enthält einige Standard-Bausteine aus der Windows Bibliothek Windows Forms . Die wichtigsten Oberflächenelemente in dieser Kategorie dienen der Strukturierung der Oberfläche:

../_images/vision-uidesigner-windowsforms.png
  1. Label: Zeigt Texte an, oft Beschriftungen für andere Oberflächenelemente.

  2. GroupBox: Gruppiert mehrere untergeordnete Elemente optisch durch einen beschrifteten Rahmen.

  3. Panel: gruppiert mehrere Oberflächenelemente. Die Darstellung ist über Eigenschaften steuerbar, zum Beispiel die Hintergrundfarbe oder ein Rahmen.

  4. PictureBox: Zur Darstellung von Bildern in der Oberfläche.

  5. TabControl: Bietet mehrere umschaltbare Registerkarten, die jeweils mit anderen Oberflächenelementen befüllt werden können.

Data analysis

Die Kategorie listet alle Kanäle von Data-Analysis Tools als eigenes Steuerelement auf. Tatsächlich handelt es sich jeweils um ein DataAnalysisResultControl2, dessen DataConnection auf das jeweilige Terminal voreingestellt ist.

../_images/vision-uidesigner-dataanalysis.png

Die Oberflächenelemente visualisieren das Auswerteergebnis des Data-Analysis-Kanals, der in der Eigenschaft DataConnection eingestellt ist. Angezeigt werden der Kanalname, der Messwert der letzten Toolgroup-Ausführung und ein Icon, welches den Ergebnisstatus farblich darstellt:

  • rot: Reject oder Fehler

  • gelb: Warning

  • grün: pass

Function buttons

Funktionsbuttons führen bei Mausklick konfigurierbare Aktionen aus.

../_images/vision-uidesigner-functionbuttons.png

Verfügbar sind:

  1. Link: Startet Viper.NET Aktionen. In der DataConnection wird die auszuführende Aktion ausgewählt. Die Liste verfügbarer Funktionen enthält sowohl vordefinierte Elemente, wie die manuelle Job-Ausführung, als auch dynamische Elemente, wie zu zum Beispiel Verknüpfungen zu den Bildquelleneditoren der definierten Bildquellen des ToolgroupItem.

  2. Start Process: Startet externe Prozesse. Einzustellen sind eine ausführbare Datei und optional Kommandozeilenparameter.

GInOut

Die Kategorie GInOut enthält Oberflächenelemente zur Visualisierung und Steuerung der definierten GInOut-Daten.

../_images/vision-uidesigner-ginout.png

Zu alle konfigurierten Datenbereichen werden Steuerelemente in der jeweiligen Gruppe angeboten:

  1. Input bits: Visualisieren den Zustand eines Eingabe-Bits als farbiges Icon.

  2. Output bits: Visualisieren den Zustand von Ausgabe-Bits als farbiges Icon.

  3. Variables: Zeigen die Text-Werte von GInOut-Variablen. Klicken des Set-Buttons schreibt Änderungen in die zugrunde liegenden Datenbereiche.

  4. Scripts: Per Button kann manuell die Ausführung von GInOut Python-Skripten ausgelöst werden.

Global parameters

Zu allen Globalen Parametern des Jobs werden hier Steuerelemente aufgelistet. Die Oberfläche zeigt jeweils den Parameternamen und Wert an. Mit der Eigenschaft Operation sollte festgelegt werden, dass nur ausreichend berechtigte Nutzer die Werte in der fertigen Oberfläche verstellen können.

../_images/vision-uidesigner-parameters.png

Parameters

Alle BV Parameter werden in der Kategorie Parameters aufgelistet. Die Steuerelemente sind identisch zu denen der globalen Parameter. Parameterwerte können von berechtigten Benutzern über die Oberfläche verändert werden.

Parameter vom Typ double[] (Zahlen-Array) werden mit einem eigenen Steuerelement bearbeitet. Es besteht aus zwei nebeneinander liegenden NumericUpDown-Feldern: Das linke Feld wählt den Index des Array-Elementes, das rechte Feld zeigt und ändert den Wert an diesem Index. Beim Umschalten des Index wird jeweils der zugehörige Wert angezeigt. Der Index ist auf den gültigen Bereich (0 bis Array-Länge - 1) begrenzt.

Die Länge des Arrays wird über das Kontextmenü (Rechtsklick) des Index-Feldes mit dem Eintrag Set Array Length festgelegt. Wird die Länge geändert, bleiben vorhandene Werte erhalten, soweit die neue Länge ausreicht; zusätzliche Elemente werden mit 0 initialisiert. Es sind nur positive Längen zulässig.

../_images/vision-uidesigner-parameters-array.png

SubDisplay

Mit SubDisplay-Elementen können Gemeinsame benutzte SubDisplays aus der ToolgroupItem Ansicht in die Benutzeroberfläche eingebunden werden.

../_images/vision-uidesigner-subdisplays.png

Die Einbindung kann auf zwei Arten erfolgen:

  1. SubDisplay: Blendet eine einstellbares SubDisplay direkt in der Oberfläche ein. Die Vorschau im Designer zeigt nur eine graue Oberfläche. In der finalen Oberfläche werden gegebenenfalls Scroll-Balken eingeblendet, falls das SubDisplay größer als der definierte Darstellungsbereich ist. Das darzustellende SubDisplay wird in der DataConnection eingestellt.

  2. Floating sub display: In der Oberfläche wird ein Button angezeigt. Klickt der Benutzer darauf, so wird das eingestellte SubDisplay in einem separaten Fenster angezeigt. Das anzuzeigende SubDisplay wird in der DataConnection eingestellt.

RunStatus

Der Ausführungsstatus des Jobs kann als Icon in der Oberfläche visualisiert werden.

../_images/vision-uidesigner-runstatus.png

Stations

In der Kategorie Stations werden Oberflächenelemente für GInOut-Daten angeboten, die dem Handshake einer Station zugeordnet sind. Die verfügbaren Bausteine sind nach den zugehörigen Stationen gruppiert.

../_images/vision-uidesigner-stations.png

Die Oberflächenelemente sind dieselben wie in der Kategorie GInOut.

Teach

Die Oberflächenelemente der Kategorie Teach unterstützten Benutzer beim Einrichten beziehungsweise Anpassen einer konfigurierten Bildverarbeitungs-Toolgroup.

../_images/vision-uidesigner-teach.png

Die Kategorie enthält folgende Steuerelemente:

  1. Teach: Zeigt eine Liste der Shortcuts wichtiger Werkzeuge der Toolgroup. Ein Klick auf den Edit-Button öffnet den Tool-Editor des jeweiligen Tools.

  2. Teach region: Das Steuerelement bietet eine Abkürzung, um Regionen von VisionPro-Tools zu konfigurieren. Die Einstellung einer Region aus der fertigen Oberfläche erfolgt, indem der Benutzer das angezeigte Fadenkreuz per Drag-And-Drop auf ein CogDisplay mit angezeigtem Bild zieht, zum Beispiel eine Bildansicht des Job-Display. Dort kann dann das Overlay der jeweiligen Region bearbeitet werden. Welche Region ein Teach region-Steuerelement einstellt, wird im UI Designer mit der Eigenschaft DataConnection festgelegt. Verbunden werden können Eigenschaften von VisionPro-Tools mit Namen Region oder SearchRegion.