Aus der Praxis: Prozessbilder erstellen

Hallo und willkommen zur Serie „Aus der Praxis“. Heute vervollständigen wir unser Dashboard aus dem vorherigen Beitrag Aus der Praxis: Anzeigen von Prozessdaten. Hierzu zeige ich Ihnen, wie Sie Prozessbilder auf SolidBlue erstellen und in die bestehende Seite einbinden können.

Anlegen des Prozessbildes

Öffnen Sie zunächst das bestehende Projekt unter Visualisierungs-Projekte mit der Option Projekt bearbeiten. Öffnen Sie im linken Menübaum den Ordner Schemen und erstellen Sie über das Kontextmenü von Prozessbilder mit der Option „Neu“ ein neues Prozessbild. Sie werden aufgefordert einen Namen für das Prozessbild einzugeben. Ich wähle hier den Namen „LEDState“. Öffnen Sie den Designer des neuen Prozessbildes. Sie sollten nun ein leeres Bild sehen können.

Nun müssen wir zunächst eine Zeichenfläche erstellen. Fügen Sie über das Kontextmenü der leeren Seite ein neues Objekt vom Typ „drawboard“ hinzu. In unserem Fall wollen wir nur ein sehr kleines Bild erstellen. Daher wähle ich die Größe 60×60 Pixel für das Objekt. Oben links im Designer ist nun die Zeichenfläche eingefügt worden.

Als nächstes müssen die LED-Zustände als Variable angelegt werden. Bei Prozessbildern können keine direkten Wert-Abfragen erstellt werden, sondern nur Abfragen übergeben werden. Über das Wolkensymbol oben in der Menüleiste erstelle ich nun ein „placeholder-value“ Objekt. Diesem gebe ich den Namen LEDStates und füge noch eine Beschreibung hinzu.

In die Zeichenfläche möchte ich nun drei Kreise mit unterschiedlichen Farben für jeden LED-Status einfügen. Fügen Sie also über das Kontextmenü der Zeichenfläche ein neues „circle“ Objekt hinzu. Als Radius wähle ich 57 Pixel. Die Option „Fill transparent“ deaktiviere ich und als „Fill color“ wähle ich die Farbe Blau. Die Eigenschaft „Visibility“ deaktiviere ich und öffnen den Dialog für Visuelle Optionen rechts daneben. Hier lege ich eine neue Option an. Als „Value“ wähle ich die Platzhalter-Variable, als Offset wähle ich 2, wo ja der Zustand für die blaue LED liegt, und als „Operation“ wähle ich != aus. Mit diesen Einstellungen bestimme ich also, dass wenn der dritte Wert im übergeben Werte-Array ungleich Null ist, der Kreis sichtbar sein soll.

Nun positioniere ich den Kreis noch oben in die linke Ecke. Dies gelingt durch Festhalten des Kreises mit der linken Maustaste.

Im nächsten Schritt erstelle ich einfach eine Kopie des erzeugten Kreis-Objekts. Wählen Sie im Kontextmenü des Kreises die Optionen „Kopieren“. Daraufgin können Sie über das Kontextmenü der Zeichenfläche die Kopie mit der Option „Einfügen“ hinzufügen. Das kopierte Objekt liegt auf der selben Position oberhalb des Original-Objekts. Bei dem kopierten Objekt ändere ich nun die Farbe in rot und ändere den Offset der visuellen Option von 2 auf 1. Auch den roten Kreis kopiere ich nun und ändere bei der Kopie die Farbe auf grün und den Offset der visuellen Option von 1 auf 0. Bei dem grünen Kreis setzte ich allerdings die Einstelllung „Visibility“. So stelle ich sicher, dass auch wenn keine aktuellen Daten empfangen werden können, immer der grüne Kreis angezeigt wird.

Das Ergebnis aus allem ist, dass wir nun ein Bild haben in welchem sich drei Kreis-Objekte mit unterschiedlichen Farben befinden. Jeder Kreis wird nur dann sichtbar, wenn der entsprechende Wert in der übergebenen Platzhalter-Variable ungleich Null ist. Dieses Prozessbild kann nun gespeichert und übersetzt werden. Das Ergebnis sollte ein Source-Code-Package sein.

Einbindung des Prozessbildes in unsere Seite

Öffnen Sie nun den Designer unseres bereits erstellten Dashboards. Die dritte Spalte ist ja noch frei. Fügen Sie hier ein „panel“ Objekt ein und geben Sie entsprechend einen Titel an. Ich entscheide mich hier für den Namen „Anzeige“. Fügen Sie nun in das Panel ein Objekt vom Typ „process-picture“ ein, welches Sie im Tab Sonstiges finden können. Wählen Sie für die Einstellung „Process picture“ unser neu erstelltes Bild aus und bestätigen Sie den Dialog. Öffnen Sie nun erneut die Einstellungen des Prozessbildes. Nach dem erneutem Öffnen werden Ihnen auch die Übergabe-Variablen angezeigt. Wählen Sie hier die bereits angelegte MELARECON-Abfrage mit den drei Ausgangszuständen aus. Speichern und übersetzen Sie die neue Seite.

Was wir nun allerdings feststellen ist, dass der angezeigte grüne Kreis nicht mittig dargestellt wird. Dies können wir aber auch einfach verändern. Öffnen Sie die erstellte HTML-Datei Ihrer Seite im linken Menübaum. Suchen Sie nach dem HTML-Tag mit der id „process-picture_…“ und fügen Sie folgende CSS-Einstellungen zur Style-Eigenschaft hinzu.

• display: flex;
• justify-content: center;
• align-items: center;

Speichern Sie Ihre Änderungen. Dies bewirkt zwar nicht, dass die Anzeige sich im Designer verändert, aber wenn Sie nun diese Seite im Portal oder über die Händler-Plattform aufrufen, so werden Sie feststellen, dass das Objekt dort mittig positioniert wird.

Fazit

Mit SolidBlue ist es möglich eigene Prozessbilder zu erstellen und in Ihre Seiten mit einzubinden. Das Beispiel zeigt eine sehr einfache Möglichkeit. Es ist aber auch möglich ganze Anlagen-Schemen darzustellen und zu visualisieren. Auch ist es möglich eigene Formen zu erstellen und in den Prozessbildern mehrfach zu verwenden. Auch Animationen können erstellt werden. Zudem zeigt das Beispiel, dass man den vom Designer erstellten Code auch nachträglich noch bearbeiten kann und so ein zusätzliches CSS-Styling möglich ist.