evoVIU Dokumentation

< Alle Themen

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.

Dashboard Smart Camera

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

0fb44c42 085d 47cc acdf 7e64e890d99b

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.

35abf94d b777 4f5a a529 6a63fe30354c

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.

71bb7d89 d15b 4cf3 98bf ba4c5e37c5c7

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.

07ab66d9 6f15 43c4 8ddd 719cd47a4778

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.

0177ea50 0df4 47ec 84fe c0f69bc5c3c0

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.

2e2ab1a7 a81b 416d 8c9d a3c37eab8928

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.

da17cce0 e0ec 4cea 9798 99510719601e

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.

419f0ad3 36c0 4e3b 92ac 4a4f05a170aa

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.

df51735f 99e6 4297 9d63 54eb3b2e07c5
2ebfa7fa b7f7 44c2 b13d 17fdece40ba4

Widget ohne Hintergrund im Editor Mode

Widget ohne Hintergrund im Viewer Mode

e455bca6 08b5 4c54 8999 419fefc5ba2a
4354632a 03d5 4b07 8a10 f2059a631635

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.

8cd0fbca ebad 434d a417 3047dce74d1c

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.

47e2c7aa d1dd 48bf a6cd c89e62e12aa8

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.

f602c7b2 1785 4a83 a792 48685550dc2b

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.

e6409e86 a008 4939 91a6 6b9fe8c18ef0

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.

8e88aa85 e908 4151 8231 34f526519dea

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.

17ddd2f6 19ba 4500 8a90 50b842cddd24

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.

c6994026 ec0b 4e34 891c f1cf3c4eed62

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.

20aee72b 7401 418f 9bed 9f357ac8db74

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.

b3e4c00f 5079 4e9f be5a 4598f86dd90f

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.

91e17bf1 c12d 4158 ab3a cbc351ecc1ef

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

b84e2171 e4ba 406c bf9e 0d9996a5ecfb

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.

73fb3be0 47b3 4ed0 856f bc06768fdcae

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.

42f68267 578f 4431 b221 9083e1289963

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

66dd35f6 d673 41b8 af2f 01cdd08de57c

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.

66dd35f6 d673 41b8 af2f 01cdd08de57c

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.

3df744aa c4a4 4d33 bef7 fd380832b5da

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.

d41fba92 6061 44a5 8cf5 151542bf3abf

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.

f6d56118 fc64 4008 b15d 7f120cb37d8e

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.

40aa245a b3b6 4ef4 aea2 3ea949076cfc

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.

2fb0d4cc d386 4d10 a9b5 71c88945cb3e

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.

ed3b5390 c6e5 4573 93da 0e01bf6ef76a

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.

ee313383 4bbb 469a 842d 7b1f3b0c43fb

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.

5ecbf1ef dfa9 437c 9e54 b09fc37fee0f

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.

76f006b4 a6da 40d9 ba80 195efd4d740c

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.

d04e656b 99e5 477e 9a61 9ce34a745ab2

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.

701fa0e0 18e6 426b 9e46 81636dfd207f

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.

3d6d3614 ec8c 4b61 9bbe 7db72da4b8d3

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.

92989bcd 43c5 4807 8b2f fa7d6d0e7dfe

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

64ca9bd3 421d 4b14 b6cf f89b48bd9ec3

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.

da9e71be cbfa 4429 a19c 004018948f41
aac209c2 afb9 4658 8854 f3978476e2ab

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.

39e0eceb 9be5 48ef a385 9fa57dccaeed

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.

cfc3d52a 33df 40f1 a307 f00cacad1ba6

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.

63ff1a5d 2537 4a49 8c60 abdbf095bfea

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.

f80db458 63a4 400b a49c 4403c956753e
45399d5b 78e9 4049 bd6e 0f5122320659

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

435b2ee0 fbff 4674 bf3c 3538e1fa427c
64f91b90 bfcb 431b a4b0 6533e71a5ae4

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.

c56b738a 7aff 478e 81d9 62174cb2b8f0
Übersicht