Aus der Praxis: Anzeigen von Prozessdaten

Hallo und willkommen zur Serie „Aus der Praxis“. Heute möchte ich Ihnen zeigen, wie Sie eine eigene Visualisierung auf SolidBlue erstellen. Auch in diesem Beitrag zeige ich Ihnen an einem konkreten Beispiel, wie Sie vorgehen können. Ich nutze dazu den bereits aus den vorherigen Beiträgen dieser Serie bekannten Testaufbau mit dem intelligenten E/A-Modul MELARECON IO. Hierdurch ist es möglich, das Beispiel mit jedem MELARECON zu realisieren und Sie haben die Möglichkeit mitzumachen.

Projekt-Ziel

Ziel dieses Projekts soll sein, ein kleines Dashboard zu erstellen, auf welchem die aktuelle Temperatur meines Büros angezeigt wird, ein Temperaturverlauf und der aktuell angezeigte LED-Zustand dargestellt wird. Ich habe dazu mal ein kleines Mockup erstellt.

Projekt erstellen

Zunächst melde ich mich im Developer-Portal von SolidBlue an und wechsle dort in den Dialog Visualisierungs-Projekte. Hier wähle ich die Funktion Projekt kopieren aus, um eine Kopie des bestehenden Projekts für den MELARECON IO zu erstellen.

Als Vorlage wähle ich das bestehende „MelareconIO“-Projekt und gebe noch zusätzliche Informationen an, um das Projekt später von dem originalen Projekt unterscheiden zu können.

Das neu erstellte Projekt wird direkt geöffnet und ich befinde mich in der Menübaum Ansicht.

Erstellung der Ansicht

Ich möchte nun eine neue Seite erstellen. Dies gelingt mir, indem ich links im Menü mit der rechten Maustaste auf „Seiten“ drücke. Im erscheinenden Kontextmenü wähle ich die Option „Neu“ aus. Sie werden nun aufgefordert einen Namen für die Seite einzugeben. Ich wähle den Namen „MyOffice“.

Öffnen Sie nun den Designer der neu erstellten Seite. Sie sehen zunächst eine leere Seite. Wenn Sie nun mit der rechten Maustaste auf die leere Seite klicken, können Sie über das angezeigte Kontextmenü neue Objekte einfügen. Fügen Sie nun ein neues „caption“-Objekt hinzu. Dieses finden Sie unter dem Reiter „Design-Elemente“. Als Titel gebe ich gleich mehrere Sachen ein:

• Key: „MyOffice“
• Translation 1: „Mein Büro“ –> Dies ist die deutsche Übersetzung
• Translation 2: „My office“ –> Dies ist im Normalfall eine englische Übersetzung
• Translation 3: „My office“ –> Hier kann eine dritte Sprache gepflegt werden.

Wir haben nun erstmal eine Überschrift hinzugefügt. Im nächsten Schritt füge ich ein weiteres „row“ Objekt hinzu. Dies gelingt wieder mittels rechter Maustaste auf die Seite und dem entsprechenden Kontextmenü. Wenn Sie das „row“ Objekt erstellt haben, können Sie in dieses Objekt weitere Objekte einfügen. Benutzen Sie auch hierzu das Kontextmenü des Objekts „row“ und wählen Sie „Hinzufügen“. In das „row“ Objekt möchte ich nun ein „col“ Objekt einfügen. Dies sind die Eigenschaften eines „col“ Objekts:

• Column spans: Die Positionierungen von „col“ Objekten (Spalten) basiert auf dem Bootstrap-Framework. Hierbei gibt es insgesamt immer bis zu 12 Spalten je Reihe. Man kann bis zu vier Zahlen, die mit einem Komma von einander getrennt werden, eingeben. Die erste Zahl steht für die Spaltenanzahl für die Spalte, wenn ein kleines Display vorhanden ist (z.B. Smartphone). Die darauf folgenden Zahlen sind für die nächsten Display-Größen gedacht bis hin zur Full-HD Auflösung eines Desktop-Bildschirms.
• Column offsets: Wie mit der Spaltenbreite kann auch der Spalten-Offset in Abhängigkeit der vier Display-Größen verändert werden. Die Eingabe von -1 bedeutet, dass kein Offset verwendet werden soll.
• Visibility: Hier kann entschieden werden, ob das Objekt angezeigt werden soll oder nicht. Über die Schaltfläche rechts daneben können Regeln aufgestellt, wann das Objekt sichtbar oder nicht sichtbar sein soll.

Ich füge nun zwei weitere „col“ Objekte zum „row“ Objekt hinzu. Bei der ersten Spalte ändere ich allerdings die letzte Zahl von 4 auf 8. Dadurch nutzt dieses Objekt bei einem großen Display nicht mehr 4 sondern 8 Spalten und es erscheint deutlich größer. Fügen auch Sie diese Spalten ein und verändern Sie danach einfach mal die Größe des Fensters und beobachten Sie das Verhalten der Spalten.

Das Ergebnis ist, dass wir nun ein Layout erschaffen haben, welches unserem oben gezeigten Mockup ähnelt. In die erste Spalte soll später die Temperatur-Anzeige, in die zweite Spalte ein Trend und in die letzte Spalte soll der LED-Status Platz finden.

Variablen anlegen

Das Layout steht. Nun benötigen wir aber Variablen, welche uns die benötigten Informationen für die weiteren Objekte bereitstellen können. Klicken Sie dazu auf das kleine Wolken-Symbol in der Menüleiste oben. Es erscheint ein Dialog auf welchem Sie nun „Hinzufügen“ wählen. Aktuell gibt es drei Variablen-Typen, die Sie verwenden können.

• melarecon-control-value: Hierbei handelt es sich um Werte, die von einem MELARECON-Gerät gelesen werden.
• sql-measurement-value: Dies sind Abfragen aus der Messwert-Tabelle.
• sql-counter-value: Dieser Variablen-Typ stellt Abfragen aus der Zähler-Tabelle bereit.

Was benötigen wir eigentlich? Wir benötigen die aktuelle Temperatur, welche wir über einen analogen Eingang abfragen können. Weiter benötigen wir die Zustände der drei digitalen Ausgänge für den LED-Status. Zuletzt benötigen wir den Temperatur-Trend aus der Messwert-Tabelle. Zusammengefasst benötigen wir also zwei melarecon-control-values und einen sql-measurement-value. Erstellen wir nun die einzelnen Variablen. Wählen Sie „melarecon-control-value“ aus. Folgender Dialog wird angezeigt:

• Command: Es gibt drei Auswahlen. GET liest nur einen einzelnen Wert aus. GETLIST fragt eine ganze Speicherliste am MELARECON an. Und GETARRAY fragt nur Teile einer Speicherliste an.
• Storage: Hier kann bestimmt werden, aus welchem Speicher gelesen werden soll.
• Start address: Startadresse, wenn nur ein einzelner Wert abgefragt werden soll bzw. nur Teile einer Speicherliste.
• Page index offset: Man kann Abfragen dynamisieren. Dies benötigen wir hier nicht.
• Summation: Bei dynamischen Abfragen kann zusätzlich die Startadresse verändert werden. Auch dieses benötigen wir hier nicht.
• List nb/Can bus device address: Wenn als Speicher der Typ LIST oder der Speicher eines CAN-Bus Geräts gewählt wird, so kann hier die entsprechende Eingabe getroffen werden.
• Count of values: Wenn Sie als Typ LISTARRAY gewählt haben, so können Sie hier die Anzahl der Werte einstellen.
• Time out: Stellen Sie hier ein, wie lange der MELARECON die Anfragen bereit stellen soll. Wird innerhalb der hier eingestellten Zeit keine neue Anfrage an den MELARECON gestellt, so beendet dieser das Veröffentlichen seiner Werte.
• Interval: Geben Sie hier an, in welcher Geschwindigkeit der MELARECON seine Werte veröffentlichen soll.

Ich lege nun folgende melarecon-control-values an:

Zum Schluss legen wir noch eine Abfrage an, um den Temperaturtrend zu erhalten. Hierfür benötigen Sie eine Variable vom Typ sql-measurement-value. Dieser stellt folgende Eigenschaften bereit:

• Page index offset: Man kann Abfragen dynamisieren. Dies benötigen wir hier nicht.
• (Start-) Measurement id: Id des Messwerts. In unserem Beispiel hatten wir 10100 gewählt.
• Left minutes: Hier können Sie einstellen, wie viele Minuten dargestellt werden sollen.
• Interval: Geben Sie hier an, nach wie vielen Sekunden die Abfrage wiederholt werden soll.

Temperatur-Anzeige

Zurück zu unserem Design. In die erste Spalte („col“ Objekt) fügen wir über das Kontextmenü ein „gauge“ Objekt hinzu. Dieses Objekt finden Sie im Tab Sonstiges. Auch dieses Objekt bietet wieder verschiedenste Einstellungen:

• Title settings: Hier kann wieder ein Übersetzungs-Schlüssel sowie drei Übersetzungen eingetragen werden.
• Value: Wählen Sie hier den ersten melarecon-control-value aus.
• Offset: Der zuvor gewählte Wert besteht nur aus einem einzigen Wert und daher ist hier 0 zu wählen.
• Decimal places: Hier können Sie entscheiden, wie viele Nachkommastellen angezeigt werden sollen. Ich wähle hier eine.
• Minimum display: Hier können Sie entscheiden, mit welchem Wert die Anzeige starten soll. Ich wähle hier mal 15.
• Maximum display: Hier können Sie die maximale Anzeige wählen. Hier wähle ich 35.
• Unit settings: Hier können Sie Einstellungen für die Verwendung einer Einheit vornehmen.
• Value min. danger: Es ist möglich den angezeigten Bar-Graphen farblich zu verändern, wenn der Wert in Grenzbereiche kommt. Ich stelle hier mal unsere 19.5, um den Graphen blau zu färben, wenn es zu kalt ist. Für „Value normal“ wähle ich 21 und für „Value max. danger“ wähle ich 22,5.
• Offset min. danger: Der minimale Wert kann auch aus dem oben gewählten Wert entnommen werden. Dies ist hier aber nicht möglich.
• Color min. danger: Hier wähle ich die Farbe blau. Auch hier wähle ich für „Color normal“ die Farbe grün und für „Color max. danger“ die Farbe rot.

Alle weiteren Einstellungen lasse ich auf den Voreinstellungen stehen.

Temperaturtrend

Im zweiten Spalten-Objekt soll nun der Temperaturtrend Platz finden. Hierzu wähle ich im Kontextmenü der entsprechenden Spalte „Hinzufügen“. Wählen Sie im Tab Sonstiges das Objekt „database-chart-trend“ aus. Im darauf folgenden Dialog habe ich folgende Einstellungen vorgenommen:

• Title settings: Hier kann der Titel des Charts bestimmt werden.
• Y axis unit: Der Y-Achse habe ich die Einheit °C in vergeben.
• Auto scale: Diese Option habe ich deaktiviert. Dadurch kann ich nun selber das Minimum und Maximum der Y-Achse bestimmen.
• Minimum: Ich verwende als Minimum 15°C.
• Maximum: Als Maximum habe ich 25°C eingetragen.
• Series name: Hier kann der Name der ersten darzustellenden Serie eingestellt werden. Ich habe den Namen „Büro“ mit den entsprechenden Übersetzungen eingetragen.
• Type: Als Linien-Typ verwende ich gerne Spline. Bei diesem Typ wird die darzustellende Linie etwas abgerundet dargestellt.
• Value: Als Wert wähle ich den entsprechenden Messwert aus, welchen wir oben bereits angelegt hatten.
• Zoom: Ich wähle hier „both“. Dadurch kann frei im Chart gezoomt werden.
• Show exports: Durch Aktivierung dieser Option wird oben rechts im Chart ein Kontextmenü eingeblendet.
• Show cross hairs x: Mit dieser Option wir ein Strich in X-Richtung gezeichnet, wenn mit der Maus über den Messwert gefahren wird.
• Show cross hairs y: Hierdurch wird zusätzlich ein Strich in Y-Richtung gezeichnet, wenn die Maus über den Chart bewegt wird.
• Show tooltips splited: Wird die Maus über den Chart bewegt, so wird der angezeigte Tooltip getrennt angezeigt.

Alle nicht aufgeführten Einstellungen lasse ich auf deren Standard-Einstellungen stehen.

Speichern und übersetzen

Die bisherigen Einstellungen möchte ich nun speichern. Betätigen Sie dazu die gelbe Schaltfläche oben in der Menübar. Hierdurch wird die aktuelle Konfiguration der erstellten Seite gespeichert und entsprechender HTML sowie JavaScript-Code erzeugt.

Zwischenstand testen

Ich möchte diesen Zwischenstand nun erstmal testen. Allerdings muss die neu erstellte Seite auch über das Menü aufrufbar sein. Es ist also notwendig den Menübaum des Projekts entsprechend zu erweitern. Über das Kontextmenü des ersten Eintrags im Menübaum („Controller name“) füge ich ein neues Menü hinzu und gebe die entsprechenden Titel-Einstellungen ein. Weiterhin wähle ich unter der Einstellung „Page“ meine neu erstellte Seite aus. Danach wähle ich im Kontextmenü von „Controller name“ die Option „Umsortieren“ und schiebe das letzte Element mit den Tasten nach ganz oben. Speichern und übersetzen Sie im letzten Schritt den geänderten Menübaum.

Um das angepasste Projekt nun zu testen, muss ich im letzten Schritt dem Server-System sagen, dass es nicht das global vorgegebene Standard-Projekt nutzen soll, sondern genau dieses. Dies machen Sie indem Sie das Projekt verlassen und im Dialog Visualisierungs-Projekte den Menüpunkt „Projekte zuweisen“ wählen. Im Dialog „Projekte zuweisen“ suchen Sie zunächst unter „Controller Zuweisungen“ nach Ihren eigenen Controller. In der darunter befindlichen Tabelle werden Sie feststellen, dass kein Projekt zugewiesen wurde. Im vorherigen Beitrag dieser Serie hatten wir allerdings festgestellt, dass uns im Portal trotzdem etwas angezeigt wurde. Dies liegt daran, dass je Controller-Type sowohl globale als auch Händler abhängig Projektzuweisungen vorgenommen werden können. SolidBlue schaut also zunächst nach, ob es speziell für einen Controller eine Projektzuweisung gibt. Ist dies nicht der Fall, so schaut das System nach, ob auf Händlerebene eine Zuweisung vorgenommen wurde. Ist dies ebenfalls nicht der Fall, so wird die globale Zuweisung geprüft. Ist auch keine globale Zuweisung vorhanden, so wird im Portal unter Online Zugriff der Controller überhaupt nicht dargestellt.

Bearbeiten Sie nun also die Projektzuweisung Ihres Controllers und weisen Sie Ihr angepasstes Projekt zu.

Wenn Sie nun die Funktion „Online Zugriff“ im Portal oder über die Händler-Plattform öffnen, so werden Sie folgendes sehen, wenn Sie im Menübaum Ihres Gerätes die entsprechende Seite aufrufen.

Fazit

Durch einfaches Konfigurieren und ohne Programmierkenntnisse haben wir Prozessdaten eines E/A-Gerätes visualisiert und ein kleines Dashboard erstellt. Was noch fehlt ist die Anzeige der LED. Dieses würde ich gerne im nächsten Beitrag mit Ihnen gemeinsam machen.