Dashboard

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 Bilder 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 beliebigem Text befüllen. Zur Formatierung des Text stehen Ihnen etliche Formatierungsmöglichkeiten zur Verfügung.

Variant Control

Hier können Sie zur Laufzeit die gesetzte Variante wechseln.

Variant Editor

Ermöglicht Ihnen die Anpassung der Werte von einzelnen Parametern Ihrer Variante zur Laufzeit. Sie können somit in Echtzeit die Auswirkungen Ihrer Änderungen nachvollziehen ohne den Workflow stoppen und erneut starten zu müssen. Die Änderungen greifen automatisch mit der nächsten Iteration des Workflows.

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 die Übersicht 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 gewöhnt 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

Zur Nutzung des Dashboards stehen aktuell zwei Modi zur Verfügung:

• Viewer Mode

• Editor Mode

Initial wird das Dashboard immer im Viewer Mode aufgerufen. Dieser Anzeigemodus ist 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. 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 Button 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 des Widgets

In der linken oberen Ecke des Widgets befindet sich ein Icon mit 6 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. Die Vergabe eines Labels ist jedoch kein Muss und kann auch unbefüllt 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 die Größe des Widgets beliebig vergrößern bzw. verkleinern. Ihr Widget kann dabei beliebige Proportionen annehmen.

Allgemeine Konfigurationsmöglichkeiten

Widget-Menü

Über das Dreipunkt-Menü in der rechten oberen Ecke des Widgets können Sie ein Menü öffnen. Dort befinden sich 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.

Duplizieren des Widgets

Es gibt ebenfalls die Option zum Duplizieren des Widgets. So können Sie innerhalb kürzester Zeit vorausgefüllte Widgets erstellen.

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

Im dieses Feature nutzen zu können, müssen Sie in Ihrem Workflow bei mindestens einer Variable vom Typ boolean die Einstellung “Publish value” aktivieren.

Ü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.

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 ermöglicht Ihnen die Anzeige 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 mit der Konfiguration Ihres Widgets starten 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”. Wir untersuchen die Option “Enter URL” nun genauer.

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 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 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 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.

Im Dialog mit dem Titel “Link variable with context” 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

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.