evoVIU Dokumentation
-
Einleitung
-
Allgemeines & Sicherheit
-
Hardware
-
-
Software
-
- Articles coming soon
Mit dem Dashboard soll es möglich sein, den Prozessablauf und die Bildverarbeitung auf der evoVIU auf einen Blick nachzuverfolgen. Anhand von unterschiedlichsten Visualisierungstypen sollen in Echtzeit Informationen aufbereitet werden, damit jeder stets über den aktuellen Zustand im Bilde ist.
Grundlegend ist das Dashboard mit der Erstellung eines Workflows vorbereitet, aber leer. Sie können das Dashboard jedoch über wenige Klicks mit Leben befüllen, idealerweise indem Sie Ihre Dashboard Widgets mit Variablen aus Ihrem Workflow verknüpfen.
Widgets
Wir umreißen zu Beginn ganz grob die zentralen Aufgaben der verfügbaren Widgets. Auf die Details gehen wir zu einem späteren Zeitpunkt ein.
Alert
Zeigt die Zustände Error, Pending und Success einer Variable vom Typ boolean in Form von einer in rot, gelb oder grün gefärbten Box an.
Data Table
Ermöglicht die Darstellung von unterschiedlichen Werten in Tabellenform.
iFrame
Erlaubt Ihnen das Einbetten einer Webseite.
Image
Visualisiert bspw. das zuletzt aufgenommene Bild Ihres Workflows, sofern Sie das zuletzt aufgenommene Bild einer Variable zugewiesen haben.
Label
Eignet sich hervorragend um einzelne Abschnitte Ihres Dashboard mit einer kurzen, prägnanten Beschreibung zu versehen.
Text
Dieses Widget lässt sich mit beliebigen Text befüllen, der etliche Formatierungsmöglichkeiten besitzt.
Variant Control
Hier können Sie zur Laufzeit die gesetzte Variante wechseln.
Variant Editor
Ermöglicht Ihnen die Anpassung einzelner Parameter zur Laufzei0t, damit Sie in Echtzeit die Auswirkungen nachvollziehen können.
Die Übersichtsseite
Aufruf der Übersichtsseite
In der Menüleiste können Sie auf “Logic” klicken und über das Dropdown Menü zum Dashboard wechseln.

Sie gelangen auf die Übersichtsseite des Dashboard. Wie bereits erwähnt ist dieses initial leer.

Sie sehen am oberen Bildschirmrand die in rot gefärbte Top App Bar zur Navigation innerhalb des Workflow-Bereichs. Sie können dort außerdem Ihren Workflow steuern, die Anzeige-Einstellungen ihres Bilds konfigurieren und vieles mehr, so wie sie es auch aus anderen Bereichen der Anwendung bekannt sind. Bevor wir loslegen, können gehen wir noch kurz auf den Ansichts- und Bearbeitungsmodus ein, der Ihnen vielleicht schon in der Top App Bar aufgefallen ist.
Dashboard Modi: Viewer und Editor Mode
Zur Nutzung des Dashboards stehen aktuell zwei Modi zur Verfügung. Initial wird das Dashboard immer im Viewer Mode aufgerufen. Dieser Anzeigemodus ist aufgeräumt, auf das Wesentliche beschränkt, zeigt Ihnen alles Wissenswerte auf einen Blick an und verhindert ungewollte Fehlkonfigurationen. Sobald Sie jedoch auf den Button “Viewer Mode” klicken, wechseln sie in den Editor Mode. Hier taucht am unteren Bildschirmrand die Bottom App Bar auf, welche Sie vielleicht schon von der Image Source oder anderen Bereichen der Anwendung kennen.
Hinzufügen eines Widgets
Über den gelben Button mit dem Plus-Icon in der Bottom App Bar können Sie sogenannte Widgets hinzufügen, welche für die Visualisierung von Daten verantwortlich sind. Alternativ können Sie mit der rechten Maustaste in das Darstellungsfenster klicken. Zunächst öffnet sich ein Dialog der Ihnen alle verfügbaren Widget-Typen auflistet. Indem Sie einen Eintrag anklicken, sorgen Sie dafür, dass das Widget Ihrem Dashboard hinzugefügt wird.

In unserem ersten Beispiel entscheiden wir uns für das Data Table Widget. Dieses wird auf der Zeichenfläche platziert und mit Inhalt befüllt. Grundlegend ist am oberen Ende des Widgets immer eine Leiste vorhanden, welche einen Handler zum Verschieben des Widgets, ein Textfeld zur Vergabe einer Bezeichnung und ein Menü mit zusätzlichen Optionen und Einstellungsmöglichkeiten auf das Widgets bezogen, besitzt.

Hier ist wichtig zu wissen, dass diese Konfigurationsmöglichkeiten nur im Editor Mode verfügbar sind. Wenn Sie das Dashboard im Viewer Mode betrachten, werden sämtliche Konfigurationsmöglichkeiten ausgeblendet oder ausgegraut. Außerdem können Sie auch ein bereits vorhandenes Widget auswählen. Dieses erhält anschließend einen gelben Rahmen und soll die Auswahl visualisieren.

Verschieben eines Widgets
In der linken oberen Ecke des Widgets befindet sich ein Icon mit sechs Punkten. Wenn Sie diesen Button gedrückt halten, können Sie das Widget an eine beliebige Position verschieben. Es wird automatisch am Raster ausgerichtet.

Bezeichnen des Widgets
Mittig am oberen Ende des Widgets befindet sich ein Textfeld, welches Ihnen die Beschriftung des Widgets ermöglicht. So sollen Sie anhand von Bezeichnungen einen Wiedererkennungswert schaffen. Die Vergabe eines Labels ist jedoch kein Muss und das Feld kann auch leer bleiben.

Vergrößern / Verkleinern des Widgets
In der rechten unteren Ecke des Widgets befindet sich ein Icon mit 2 schrägen Strichen. Wenn Sie diesen Button gedrückt halten, können Sie das Widgets beliebig vergrößern bzw. verkleinern. Ihr Widget kann dabei beliebige Proportionen annehmen.

Widget-Menü
Über das Dreipunkt-Menü in der rechten oberen Ecke des Widgets können Sie ein Menü öffnen. Dort befinden Sie einige Optionen zur Verwaltung und Konfiguration des vorliegenden Widgets.

Entfernen des Widgets
Über das Dreipunkt-Menü in der rechten oberen Ecke des Widgets steht Ihnen die Option “Remove Visualization” zur Verfügung. Diese Option entfernt das von Ihnen ausgewählte Widget.
Datenquelle leeren
Mit der Option “Clear data source” können Sie verlinkte Variablen, den sogenannten Context, entfernen und Ihr Widget in den Ursprungszustand zurücksetzen.
Hintergrundfarbe bearbeiten
Sobald Sie ein Widget hinzugefügt haben, enthält dieses immer eine Hintergrundfarbe. Über das Menü des Widgets können Sie mit der Option “Remove background” jedoch für einen “transparenten” Hintergrund sorgen. Wenn Sie diese Einstellung rückgängig machen wollen, nutzen Sie einfach das Menü des Widgets erneut. Die Option lautet nun “Set background” und sorgt dafür, dass der ursprüngliche Zustand wieder hergestellt wird.


Widget ohne Hintergrund im Editor Mode
Widget ohne Hintergrund im Viewer Mode


Widget mit Hintergrund im Editor Mode
Widget mit Hintergrund im Viewer Mode
Ergebnisbezogenen Rahmen setzen
Über das Dreipunkt-Menü in der rechten oberen Ecke des Widgets steht Ihnen die Option “Set result-related border” zur Verfügung. Dies ermöglicht Ihnen eine visuelle Ergebnisanzeige in Form eines rot, gelb bzw. grün eingefärbten Rahmens. Alles was hierfür benötigt wird, ist die Auswahl einer Variable vom Typ boolean.

Wenn Sie diese Einstellung vornehmen möchten, öffnet sich ein Dialog, der Ihnen alle passenden Variablen auflistet. Sie können die Suchfunktion benutzen, einen bestimmten Type wählen oder auch bereits benutzte Variablen ausblenden. Mit einem Klick auf den “Confirm”-Button bestätigen Sie Ihre Auswahl, der Dialog wird geschlossen und die Einstellung wird gesetzt. Sobald der nächste Durchlauf stattfindet, wird der Rahmen des Widgets dementsprechend gefärbt.

Widgets
Alert Widget
Damit Sie die zuvor von Ihnen konfigurierten Varianten auch im Workflow nutzen können, müssen Sie dem Graphen einen Get Variable Knoten hinzufügen und den Ausgang mit dem Eingang eines anderen Knotens verbinden, welcher die Werte der Variante nutzen soll. Beachten Sie dabei, dass Sie einen Knoten hinzufügen, dessen Variable für die Varianten markiert wurde.

Das Alert Widget soll den Fokus verstärkt auf die Anzeige von Ergebnissen setzen. Der Zustand ist schneller erkennbar als durch die ergebnisbezogene Rahmenfarbe. Wenn Sie auf den Button “Add Alert” klicken, erscheint der bereits zuvor erwähnte Dialog mit dem Titel “Link variable with context”. Dort werden Ihnen alle Variablen vom Typ boolean angezeigt, wobei Sie exakt einen über eine Checkbox für das Widget aktivieren können. Schließen Sie nach der Auswahl einer Variable den Dialog, indem Sie den Button “Confirm” klicken.

Sobald Sie Ihrem Widget einen Context zugewiesen haben, ändert sich die Ansicht Ihres Widgets. Sie sehen nicht nur eine geänderte Meldung, sondern statt dem “Add Alert”-Button eine neue Leiste, welche neben der Bezeichnung der ausgewählten Variable auch einen gelben Button mit einem Stift-Icon enthält. Sowohl der Klick auf den Button als auch die Bezeichnung der ausgewählten Variable ermöglicht Ihnen das Bearbeiten Ihrer Auswahl.

Da Ihr Alert Widget nun vollständig konfiguriert wurde, können Sie den Workflow starten. Dabei wird der Inhalt des Widgets im Erfolgsfall grün gefüllt, im Fehlerfall rot. Sollte noch kein Wert vorhanden sein wird eine gelbe Füllung gesetzt.

Data Table Widget
Dieses Widget erlaubt Ihnen das Ausspielen von Daten in Tabellenform. Nach dem Hinzufügen des Widgets ist dieses zunächst leer und besitzt optisch auch noch nicht viele Hinweise auf eine Tabelle. Sobald Sie jedoch loslegen und den gelben Button “Add Column” klicken, startet der Aufbau der Tabelle.

Es wird zunächst eine erste Spalte angelegt. Dabei handelt es sich zudem um die Kopfzeile. Sie können hier nicht nur weitere Spalten anlegen, sondern auch zusätzliche Zeilen. Außerdem ist über eine Spalte in der Kopfzeile bzw. dem zugehörigen Menü das Konfigurieren bzw. Typisieren der Spalte möglich.

Sobald Sie eine Zeile angelegt haben, können Sie diese über den Button mit dem “Mülleimer”-Icon Zeilen auch wieder entfernen. Für das Entfernen einer Spalte müssen Sie in der Kopfzeile über das Dreipunkt-Menü zur Option “Remove” navigieren.

Im Dreipunkt-Menü der Spalten finden Sie die Optionen “Remove” zum Löschen der Spalte, “Type” um eine Typisierung vorzunehmen, und “Format mask”, womit Sie die Formatierung Ihrer Werte festlegen können.

Die Option “Type” bietet Ihnen die Auswahlmöglichkeiten Text, Number und Boolean an.

Wenn Sie sich für den Type “Text” entschieden haben, können Sie über die Option “Format mask” festlegen, ob Ihr Text als Einzeiler über den Wert “Single-Line” oder in einem Textfeld über den Wert “Textarea” dargestellt werden soll.

Falls Sie sich jedoch für den Type “Boolean” entschieden haben, dann können Sie über die Option “Format mask” festlegen, ob Ihr Datensatz über den Wert “Checkbox” als Kästchen angezeigt wird, oder ob über den Wert “OkNok” die Angabe in Textform erfolgen soll.

Sie haben außerdem die Möglichkeit eine Zelle individuell zu konfigurieren, indem Sie bspw. eine Variable verlinken und somit als Kontext setzen.

Wenn Sie im Menü auf die Option “Link with context” klicken, erscheint der bereits zuvor erwähnte Dialog mit dem Titel “Link variable with context”. Dort werden Ihnen alle Variablen vom Typ boolean angezeigt, wobei Sie exakt einen über eine Checkbox für das Widget aktivieren können. Schließen Sie nach der Auswahl einer Variable den Dialog indem Sie den Button “Confirm” klicken.

Sobald Sie Ihrem Widget einen Context zugewiesen haben, wird die Zelle zur Laufzeit Ihres Workflow mit einem Wert befüllt.
iFrame Widget
Mit diesem Widget können Sie Inhalt von anderen Webseiten einbinden.

Wenn Sie auf den Button “Add URL” klicken, öffnet sich ein neues Menü mit den Option “Enter URL” und “Link with context”. Die zuletzt genannte Optionen kennen Sie vermutlich bereits von anderen Widgets, deshalb wollen wir hier die Option “Enter URL” genauer untersuchen.

Es öffnet sich ein Dialog mit dem Titel Edit URL. Außerdem finden Sie hier ein Textfeld zur Eingabe Ihrer URL. Wichtig: Die von Ihnen eingegebene URL muss (zur Sicherheit aller) https unterstützen.

Wenn Sie den Dialog mit einem Klick auf den Button “Confirm” bestätigt haben, wird der Inhalt der URL in diesem Widget eingebunden. Sie sehen dann die von Ihnen eingetragene Webseite.

Falls Sie den Inhalt Ihres Widgets ändern möchten, können Sie hierfür den gelben Button mit dem Stift-Icon verwenden. Der Klick auf den Button öffnet den Dialog zum Setzen der anzuzeigenden URL.
Image Widget
Sie haben hier die Möglichkeit statisch hinterlegte Dateien aus dem File Manager oder dynamische generierte Bilder aus dem gerade aktiven Workflow anzuzeigen. Damit Sie Bilder des Workflows zur Laufzeit anzeigen können, müssen Sie das aufgenommene Bild in eine Variable vom Typ Image speichern und den Wert “Publish value” der Variable aktivieren.

Wenn Sie nun im Menü auf die Option “Link with context” klicken, erscheint der bereits zuvor erwähnte Dialog mit dem Titel “Link variable with context”. Dort werden Ihnen alle Variablen vom Typ Image angezeigt, wobei Sie exakt einen über eine Checkbox für das Widget aktivieren können. Schließen Sie nach der Auswahl einer Variable den Dialog indem Sie den Button “Confirm” klicken.

Sobald Sie Ihrem Widget einen Context zugewiesen haben, ändert sich die Ansicht Ihres Widgets. Sie sehen nicht nur eine geänderte Meldung, sondern auch eine neue Leiste, welche neben der Bezeichnung der ausgewählten Variable auch einen gelben Button mit einem Stift-Icon enthält. Sowohl der Klick auf den Button als auch die Bezeichnung der ausgewählten Variable ermöglicht Ihnen das Bearbeiten Ihrer Auswahl.

Da Ihr Image Widget nun vollständig konfiguriert wurde, können Sie den Workflow starten. Sobald der erste Durchlauf stattgefunden hat und alle Variablen Werte erhalten haben, wird das Widget automatisch mit dem Inhalt der Variable, demnach dem aufgenommenen Bild, befüllt.

Label Widget
Das Label Widget ist äußerst simpel gehalten. Es besitzt einzig und allein die Basis-Funktionen eines Widgets.
Text Widget
Dieses Widget ermöglicht Ihnen das Schreiben und Formatieren von Texten, so wie sie aus gängigen Editoren kennen. Dafür steht Ihnen ein Textfeld zur Verfügung, dessen Größe sich dynamisch am Widget ausrichtet.

Wenn Sie auf den Button “Link with context” klicken, erscheint der bereits zuvor erwähnte Dialog mit dem Titel “Link variable with context”. Dort werden Ihnen alle Variablen vom Typ boolean angezeigt, wobei Sie exakt einen über eine Checkbox für das Widget aktivieren können. Schließen Sie nach der Auswahl einer Variable den Dialog, indem Sie den Button “Confirm” klicken.

Für gewöhnlich wird das Text Widget jedoch zur Eingabe von Text genutzt. Hier können Sie Abschnitte markieren und erhalten umgehend zusätzliche Formatierungsmöglichkeiten in der Bottom App Bar.

Folgende Funktionen stehen Ihnen zur Verfügung:
Textgröße
Fett
Kursiv
Unterstreichen
Durchstreichen
Schriftfarbe
Texthervorhebungsfarbe
Zitat
Code
Nummerierung
Aufzählungszeichen
Einzug verringern
Einzug vergrößern
Hyperlink
Info Panel (Success, Warning, Error)
Variant Control Widget
Während des laufenden Betriebs können Sie die Steuerung der Varianten über das Dashboard vornehmen. Dies hat den Vorteil, dass Sie keinerlei Änderungen im Graphen vornehmen müssen. Fügen Sie auf dem Dashboard das Widget “Variant control” über den “Add”-Button hinzu.

Zunächst wird das Widget im leeren Zustand angezeigt, sobald jedoch Ihr Workflow aktiv ist, können Sie über ein Dropdown die Variante auswählen, welche Sie (stattdessen) nutzen möchten.

Wenn Sie einen Workflow unter Verwendung einer Variante gestartet haben, wird das Widget mit der aktuell genutzten Variante befüllt.

Sie werden nach Ihrer Auswahl in einem Dialog gefragt, ob Sie tatsächlich die gewählte Variante nutzen möchten, da dies Auswirkungen auf Ihren laufenden Prozess hat. Sobald Sie den Dialog bestätigt haben, arbeitet Ihr Workflow mit den Werten der neu ausgewählten Variante.


Variant Editor Widget
Selbst die Steuerung von Parameter-Werten können Sie während des laufenden Betriebs über das Dashboard regeln. Auch hier haben Sie wieder den Vorteil, dass Sie Änderungen weder im Graphen noch über die Varianten-Tabelle vornehmen, geschweige denn den aktiven Prozess unterbrechen müssen. Fügen Sie auf dem Dashboard das Widget “Variant editor” über den “Add”-Button hinzu.

Zunächst wird das Widget im leeren Zustand angezeigt, sobald jedoch Ihr Workflow aktiv ist, können Sie über ein Dropdown die Variante auswählen, welche Sie (stattdessen) nutzen möchten.

Wenn Sie das “Variant editor” Widget konfigurieren, können Sie in einem Dialog aus allen für die Varianten markierten Parametern auswählen und sich diese anzeigen lassen. Bei einer Vielzahl an Parametern bietet es sich möglicherweise an die Suchfunktion zu nutzen.

Auch nach einer Konfiguration wird ihr Widget weiterhin im leeren Zustand angezeigt. Sobald Sie jedoch Ihren Workflow aktivieren, indem Sie im Dialog über ein Dropdown die Variante auswählen, die Sie nutzen möchten, werden die eingestellten, zur aktiven Variante gehörenden Werte angezeigt.


Wenn Sie einen Workflow unter Verwendung einer Variante gestartet haben, wird das Widget mit den Werten der aktuell genutzten Variante befüllt.


Sie werden nach Ihrer Auswahl in einem Dialog gefragt, ob Sie tatsächlich die neuen Werte Ihres Varianten-Parameters nutzen möchten, da dies Auswirkungen auf Ihren laufenden Prozess hat. Sobald Sie den Dialog bestätigt haben, arbeitet Ihr Workflow mit den neuen Werten.
