Erstellen eines neuen SVG-Widgets

Es ist möglich ein neues, individuelles SVG-Widget aus einer SVG-Datei zu erstellen.

Zunächst muss die SVG-Datei selektiert werden. Eine exzellente Ressource hierfür ist die im Bilderverzeichniss integrierte Industry Graphic Library.

Das ausgewählte SVG wird nun in dem data/WebUI/widgets-Ordner gespeichert. Zudem wird pro Widget eine eigene JSON-Datei gleichen Namens benötigt. Alle umsetzbaren Widgets werden automatisch ausgelesen, daher erscheint das SVG mit dem Erstellen der Datei in der Liste der verfügbaren Widgets im Dashboard.

Neue SVG-Widgets können auch über das Dashboard selbst hinzugefügt werden. Hierfür wird das Edit Menü geöffnet und ein Datenpunkt ausgewählt, für den das Widget hinzugefügt wird. Dies öffnet den Widget Selector, in dem sich in der rechten oberen Ecke die Option Widget hinzufügen befindet. Diese öffnet den Dialog zum Hinzufügen des eigenen Widgets. Die Dateien müssen als Zip-Packet vorliegen. Es sind die folgenden Strukturen innerhalb des Packets zulässig:

• widgets (Ordner)
  • widget JSON file (Z.B.: label.json)
  • widget SVG file (Z.B.: label.svg)
• Komponenten (Ordner, optional > außer, wenn eine "moduleFederationSettings"-Eigenschaft in der JSON-Datei ist)
  • <widgetname> (Ordner, Z.B.: label)
    • Dateien für die Module Federation
• msg (Ordner, optional)
  • <lang> (z.B.: de_AT.utf8)
    • JSON- oder cat-Dateien

Das Verhalten für den versuchten Upload von Dateien, die ein bereits bestehendes Widget überschreiben würden, kann mit dem etm.widget.upload Request gesteuert werden. Der Erste Parameter hierbei ist "archive", welches das Base64-kodierte ZIP-Archiv mit den Dateien enthält. Der zweite Parameter ist der optionale "overwrite". Wird dieser auf "true" gesetzt, werden die vorhandenen Dateien im Produktverzeichnis überschreiben. Bei der Standardeinstellung "false" wird ein Fehler ausgegeben und kein Upload durchgeführt.

Widget Definitionsdateien können auch in Unterverzeichnissen von data/WebUI/widgets hinzugefügt werden. Diese Dateien inkludieren den relativen Pfad im Widgetnamen, der vom etm.widget.list Request zurückgegeben wird (z.B.: für die Widgetdefinitionsdatei data/WebUI/widget/sub1/gauge.json ist der resultierende, zurückgegebene Name "sub1/gauge"). Sowohl die JSON- als auch die SVG-Dateien für die Widgets müssen sich im selben Ordner befinden.

Wenn ein Request erhalten wird und das letzte Update der gecachten Widgetinformationen älter als 30 Sekunden ist, wird der Cache erneuert und die neuen oder veränderten Widgets werden hinzugefügt. Zusätzlich kann der optionale Parameter "forceUpdate" in den Requestparametern auf "true" gesetzt werden, um ein umgehendes Update der gecachten Widgetinformationen zu erzwingen. Dies ist nur für das aktuelle Projekt gültig, und wird nicht für Subprojekte oder die Version, für welche das Widgetcache nur einmal beim Serverstart initialisiert wird, verwendet.

{
  "operator": "is",
  "value": 2,
  "actions": [
    {
      "selector": ".red-active",
      "property": "opacity",
      "value": "0"
    },
    {
      "selector": ".yellow-active",
      "property": "opacity",
      "value": "0"
    },
    {
      "selector": ".green-active",
      "property": "opacity",
      "value": "1"
    }
  ]
}

{
  "operator": "between",
  "value": { "from": "{min}, "to": "{max}" },
  "actions": [
    {
      "selector": ".left-tank",
      "property": "fill",
      "value": "{alertrange_1_color}"
    }
  ]
},

{
  "operator": "always",
  "value": "",
  "actions": [
    {
      "property": "style",
      "selector": "#rect1",
      "value": "transform: translate(22.8px, 51.8px) scaley(clamp(0, calc(1 - ({value} - {min}) / ({max} - {min})), 1))"
    },
    {
      "property": "fill",
      "selector": "#rect2",
      "value": "url(#gradient1)"
    },
  ]
},