Wie Werte in einem Scada Widget dargestellt werden können

Diese Anleitung erklärt die Verwendung einer SVG-Grafik in einem SCADA-Widget, das Messwerte anzeigt, und die Verwendung von booleschen Flags zur Anzeige von Bildinhalten nur dann, wenn bestimmte Bedingungen auf der Grundlage von Messungen erfüllt sind.

1. Als Einführung lesen Sie bitte die aktuelle SCADA Widget Dokumentation.

2. Für dieses How To wird ein guter SVG-Editor benötigt. In diesem How To wird der Inkscape Editor verwendet. Bitte laden Sie die Software herunter und installieren Sie sie.

3. Laden Sie die SVG-Grafik pump.svg herunter, die eine Pumpenanwendung mit einem Motor darstellt, und öffnen Sie sie in Inkscape.

   

   Die folgenden Schritte zeigen, wie man das SVG-Bild erweitert, um

   • Anzeige des aktuellen Durchflusswertes der Pumpe und
   • einen booleschen Status, der angibt, ob der Motor ein- oder ausgeschaltet ist

4. Fügen Sie in Inkscape ein Textfeld hinzu und geben Sie den Text ein {{flow}}. Dann machen Sie den Text fett gedruckt.

   Die doppelt geschweiften Klammern sind wichtig, denn sie signalisieren dem SCADA-Widget, dass der Name, hier fließend, durch einen tatsächlichen Wert einer Messung ersetzt werden soll.

5. Damit das SCADA-Widget den Platzhalter flow mit einem Wert korrekt erkennt, muss man einen zusätzlichen XML-Eintrag hinzufügen:

   1. Öffnen Sie dazu den XML-Editor in Inkscape Bearbeiten → XML-Editor, oder verwenden Sie Strg+Umschalt+X.

   2. Dann Doppelklick auf {{flow}} Text. Der korrekte XML Zugang, welcher das Textfeld repäsentiert ist nun ausgewählt.

   3. In der rechts angezeigten Eigenschaftsliste, können SIe eine neue XML Eigenschaft hinzufügen, indem Sie auf das + Sybol drücken.

   4. Fügen Sie in der Spalte “Name” des neuen Attributs den Wert “data-placeholder” und in der Spalte “Wert” den Wert “`{{flow}}´” ein.

      

6. Aufgrund des Fließtextfeldes, ist die Seite nun etwas zu klein. Um die Seitengröße anzupassen:

   1. Wählen Sie alle ausgewählten Elemente ab, in dem Sie in Inkscape einen Bereich auswählen, in dem keine Elemente vorhanden sind und dann

   2. verwenden Sie den Kurzbefehl Ctrl+Shift+R um die Seitengröße anzupassen.

1. Nun ist es an der Zeit, den Motor AN/AUS Status zu visualisieren. Die Idee ist es, dass ein Grüner Kreis angezeigt wird, wenn der Motor läuft und einer roter Kreis, wenn der Motor aus ist. Sie können wahlweise in Inkscape Ihre eigenen Bilder erstellen oder eine vorbereitete SVG Datei verwenden. Laden Sie dieses SVG Bild herunter on_off.svg und öffnen Sie ein weiteres Inscape Fenster. Kopieren Sie danach die Kreise aus dem zweiten Inscape Fenster in das Fenster, indem der Motor/Pumpe sich befindet. Positionieren Sie die AN/AUS Anzeige neben dem Motor.

   

2. Fügen Sie benötigte XML Eigenschaften hinzu, wie beispielsweise, dass der grüne Motor-AN-Kreis nur aktiv ist, wenn der motorOn Platzhalter Wert wahr ist.

   1. Wählen Sie den Motor-AN-Kreis aus.
   2. Fügen Sie in den XML Editor eine neue Eigenschaft mit dem Namen data-placeholder und dem Wert {{motorOn}} hinzu.
   3. Außerdem müssen Sie eine weitere XML Eigenschaft mit dem Namenng-show und dem Wert motorOn hinzufügen.
   
   

   

   Die ng-show Eigenschaft ist eine ist eine AngularJS-Richtlinie welche im Wesentlichen besagt, wann ein Objekt angezeigt werden soll. Für weitere Informationen sehen Sie in der AngularJS Dokumentation auf ngShow nach. Diese Einstellung bedeutet hier, dass wenn der Platzhalter motorOn wahr wird, das Objekt, bspw. der grüne Kreis angezeigt wird. Andererseits wenn motorOn nicht wahr ist, wird das Objekt nicht angezeigt.

3. Hinter dem grüner Motor-AN-Kreis ist ein identischer grauer Kreis. Dieser Kreis wird angezeigt, wenn der Motor AUS ist. Wählen Sie den grauen Kreis entweder sofort in dem XML Editor aus oder bewegen Sie den grünen Kreis vorübergehend hinter den grauen Kreis, in dem Sie Objekt → nach hinten verwenden oder den Ebene nach hinten short cut. Sobald der graue Kries ausgewählt ist, erstellen Sie die folgenden XML Eigenschaften.

   • mit dem Namen data-placeholder und dem Wert {{motorOn}} sowie
   • mit dem Namen ng-showund dem Wert !motorOn
   
   

4. Der AN-Status Teil ist nun abgeschlossen. Widerholen Sie den selben Prozess für den roten AUS-Status und den grauen Kreis hinter dem roten. Beachten Sie, dass die booleschen Ausdrücke für den Platzhalter motorOninvertiert werden müssen, um zu verdeutlichen, dass der rote Kreis angezeigt wird, wenn der Motor ausgeschaltet ist, und der graue Kreis, wenn der Motor eingeschaltet ist.

5. Speichern Sie die SVG Datei mit dem Dateinamen pump_value.svg. Falls zum Beispiel etwas schief gegangen ist, finden Sie hier die fertige SVG-Datei pump_value.svg

   

6. Gehen Sie zum Dashboard Tenant und bereiten Sie ein Gerät vor, welches Sie der Gruppe zuweisen, in dem das SCADA Widget erstellt werden soll. Stellen Sie sicher, dass die Informationen über den Durchfluss und den Ein-/Aus-Zustand des Motors als Messwerte an das erstellte Gerät gesendet werden. Im folgenden wird der Name pump_app verwendet, um auf dieses Gerät zu verweisen.

7. Gehen Sie in der Dashboard Anwendung auf den Menüpunkt Gruppen und Dashboardund fügen Sie ein neues SCADA Widget hinzu:

   1. Wählen Sie die Bild Datei pump_value.svg
   2. Danach wählen Sie das Gerät pump_app
   
   

   Die SCADA Widget Konfiguration, zeigt nun zwei Platzhalter in dem SVG Bild an flow undmotorOn:

   

8. Wenn die Maus über den ersten Platzhalter flow, bewegt wird, werden drei Icons angezeigt:

   

   Diese Icons werden verwendet um einen Platzhalter zu konfigurieren und um zu definieren, von wo die Werte dem Platzhalter zugeordnet werden.

   1. Wählen Sie das dritte Icon **Assign device property **aus.

   2. In dem sich öffnenden Dialogfenster müssen Sie Last measurement (the third item from the bottom) wählen und auf auswählen klicken

      ![](/images/users-guide/howto/scada/scada-8.png)
      

   3. Im nächsten Schritt verbindet man den Platzhalter mit einer aktuellen Messung. Klicken Sie auf Datenpunkt hinzufügen und wählen Sie den Wert aus, der den Durchflussmesswert darstellt. Klicken Sie dann auf Hinzufügen.

   4. Als Rückgabetyp wählen Sie Wert und Einheit.

      ![](/images/users-guide/howto/scada/scada-9.png)
      

   5. Schalten Sie den ausgewählten Durchflussdatenpunkt ein und klicken Sie auf Speichern.

   
   

9. Wiederholen Sie das gleiche Verfahren, wie im letzten Schritt, auch für den Platzhalter “MotorOn”. Verwenden Sie dieses Mal jedoch den Datenpunkt, der die boolesche Information Motor ein/aus darstellt. Verwenden Sie im Dialog lastMeasurement als Rückgabetyp Only value.

10. Nachdem alle Platzhalter den Datenpunkten korrekt zugewiesen wurden, zeigt die SCADA-Widget-Konfiguration eine Vorschau, die die Messungen bereits korrekt interpretiert:

    Klicken Sie auf Speichern, um die Konfiguration des Widgets zu speichern.

11. Ändern Sie nun die Messwerte für die Durchflussmessung und den Ein- und Ausschaltzustand des Motors und Sie können sehen, dass das SCADA-Widget die geänderten Informationen korrekt darstellt: