Die neue Visualisierung von IP-Symcon
Mit der Einführung von IP-Symcon Version 7.x betritt die beliebte Automatisierungsplattform neue visuelle Wege. Die brandneue „Tile-Visu“ befindet sich aktuell zwar noch im Beta-Stadium, bietet jedoch schon jetzt spannende Möglichkeiten für eine moderne und flexible Visualisierung.
Das Herzstück der neuen Tile-Visu ist ihr anpassbares Kacheldesign. Es ermöglicht eine strukturierte und ansprechende Darstellung von Informationen und Steuerungselementen. Die im WebFront bereits gern genutzten HTML-Boxen werden weiterhin unterstützt. Jetzt werden sie jedoch als eigenständige iFrames integrieren, was das CSS-Styling gegen Seiteneffekte (gleiche Namen mit unterschiedlichen Definitionen) wie im alten WebFront wesentlich robuster macht. Darüber hinaus liefert das bereitgestellte HTML-SDK den Modulentwicklern eine weitere Möglichkeit das Kacheldesign via HTML zu gestalten.
Am Beispiel meiner Startseite kann man sehr gut die neuen Möglichkeiten der Tile-Visu sehen. Die Kacheln für Wetter und Meldungen sind dabei schöne Beispiele wie man mit mit etwas HTML schöne Kacheln erstellen kann.
Wetter & Meldungen
Die zwei genannten Kacheln sind auch Bestandteil von Pitti’s Skript Bibliothek und befinden sich da in den Dateien Weather.PirateWeather.ips.php und System.Dashboard.ips.php.
Vom WebFront zur TileVisu
Grundsätzlich lässt sich alles, was bisher im WebFront visualisiert wurde, auch in der neuen Tile-Visu nutzen. IP-Symcon hat zugesichert, das WebFront solange weiter zu unterstützen, bis die Tile-Visu für alle Nutzer ein vollwertiger Ersatz ist. Dennoch unterscheiden sich die beiden Visualisierungslösungen grundlegend, was die parallele Unterstützung erschwert. Oft sind es die Details, die den Unterschied ausmachen.
Ein gutes Beispiel sind Tabellen. Während der von mir entwickelte WwxSkin im WebFront speziell angepasste Tabellenstyles wie farbige Tabellenköpfe und Spaltenausrichtungen ermöglichte, werden diese in der Tile-Visu aktuell nicht unterstützt. Der Grund: Es gibt derzeit keine Möglichkeit, eigene Skins zu erstellen.
Wie man deutlich sieht, fehlen in der Tile-Visu die bisher genutzten Definitionen. Natürlich könnte man argumentieren: „Selbst schuld, warum keine Inline-Styles nutzen?“ Doch genau darin lag der Vorteil eigener Skins im WebFront – einmal definierte Styles konnten flexibel und wiederverwendbar eingesetzt werden.
Als Workaround könnte man zwei Versionen des HTML-Codes erstellen: eine für das WebFront und eine für die Tile-Visu. Das habe ich anfangs auch versucht. Doch schnell wurde es unübersichtlich, da ich bei jeder Anpassung an beiden Versionen arbeiten musste – sei es, um etwas Neues hinzuzufügen, Fehler zu beheben oder Optimierungen vorzunehmen.
Es war klar: Eine neue Lösung musste her!
Der Tile Visu Skin: Mein Weg
Die zentrale Frage war: Wie unterscheidet man, ob man sich im WebFront oder in der Tile-Visu befindet? In der Tile-Visu wird das HTML als iFrame geladen, was den Zugriff auf Informationen zusätzlich erschwert. Nach einigen Tests und Recherchen habe ich jedoch den entscheidenden Unterschied gefunden: das xmlns-Attribut. Dieses Attribut wird nur im WebFront am <html>-Tag gesetzt.
Aber was macht man mit dieser Information?
Ganz einfach: Man wertet das Attribut per JavaScript aus und lädt in Abhängigkeit davon eine CSS-Stylesheet-Datei – oder eben nicht.
Die nächste Herausforderung: Wie kommt das JavaScript in die HTML-Box? Hier kommt man leider nicht ohne Anpassungen aus. Das bedeutet, dass man in der HTML-Box eine kleine Anpassung vornehmen muss, um das JavaScript zu integrieren.
// Javascript Injection Skript
// als erste Zeiler jeder HTMLBox-Variable
$html = '<script type="text/javascript" src="./preview/wwx.js"></script>';
// Für Nutzer von Pitti's Skript Bibliothek ist es noch einfacher
// dort gibt es die globale Konstante __TILE_VISU_SCRIPT
$html = __TILE_VISU_SCRIPT;
Javascript Injection Skript
Das Skript ist im WwxTileView-Repo hinterlegt (wwx.js).
Was macht das JavaScript konkret?
Es analysiert das HTML-Dokument, erkennt anhand des xmlns-Attributs, ob es sich um das WebFront handelt, und lädt abhängig davon dynamisch ein CSS-Stylesheet nach. Klingt kompliziert? Ist es aber nicht! 🙂
Der Ablauf ist simpel: Sobald das JavaScript ausgeführt wird, überprüft es, ob das xmlns-Attribut vorhanden ist. Ist dies nicht der Fall, wird das entsprechende Stylesheet eingebunden. Auf diese Weise lässt sich das Styling flexibel anpassen, ohne dass für WebFront und Tile-Visu zwei komplett unterschiedliche HTML-Versionen notwendig sind.
Dynamisches CSS-Stylesheet
Die CSS Datei ist ebenfalls Teil des Repos (wwx.css).
Welche Styles werden durch das Stylesheet hinzugefügt?
- Reduzierung der Seitenränder einer HTML-Box auf 0 Pixel
- Bekannte Scrollbalken für gleiche Darstellung am PC-Browser
- Alle Tabellendefinitionen aus dem WwxSkin
Zusätzlich zu den bereits aus dem WwxSkin bekannten Varianten „olive“, „orange“ und „blue“ bietet diese Version nun weitere Optionen: „light“, „dark“, „theme“ (basierend auf der Accent-Farbe des aktuell eingestellten Themes) und „lines“. Diese neuen Varianten erweitern die gestalterischen Möglichkeiten erheblich und bieten mehr Flexibilität bei der Anpassung des Erscheinungsbildes.
Welche Installationen sind für die Nutzung erforderlich?
Die Installation ist auch in der README kurz beschrieben. Die nachfolgende Komandosequenzen zeigen genau wie man recht schnell alles installiert.
pi@PIEPS:~ $ git clone https://github.com/Wilkware/WwxTileVisu.git
Klone nach 'WwxTileVisu' ...
remote: Enumerating objects: 20, done.
remote: Counting objects: 100% (20/20), done.
remote: Compressing objects: 100% (13/13), done.
remote: Total 20 (delta 5), reused 17 (delta 5), pack-reused 0 (from 0)
Empfange Objekte: 100% (20/20), 12.31 KiB | 3.08 MiB/s, fertig.
Löse Unterschiede auf: 100% (5/5), fertig.
pi@PIEPS:~ $ cd WwxTileVisu/
pi@PIEPS:~/WwxTileVisu $ ls -la
insgesamt 48
drwxr-xr-x 3 pi pi 4096 22. Dez 11:20 .
drwxr-xr-x 35 pi pi 4096 22. Dez 11:20 ..
drwxr-xr-x 8 pi pi 4096 22. Dez 11:20 .git
-rw-r--r-- 1 pi pi 20850 22. Dez 11:20 LICENSE
-rw-r--r-- 1 pi pi 3519 22. Dez 11:20 README.md
-rw-r--r-- 1 pi pi 3127 22. Dez 11:20 wwx.css
-rw-r--r-- 1 pi pi 1146 22. Dez 11:20 wwx.js
pi@PIEPS:~/WwxTileVisu $ sudo cp wwx.* /usr/share/symcon/preview/
pi@PIEPS:~/WwxTileVisu $ cd /usr/share/symcon/preview/
pi@PIEPS:/usr/share/symcon/preview $ ls -la
insgesamt 12492
drwxr-xr-x 5 root root 4096 21. Dez 12:15 .
drwxrwxr-x 13 pi pi 4096 19. Dez 11:36 ..
drwxr-xr-x 10 root root 4096 19. Dez 11:36 assets
drwxr-xr-x 3 root root 4096 19. Dez 11:36 canvaskit
-rw-r--r-- 1 root root 603 18. Dez 21:34 favicon.png
-rw-r--r-- 1 root root 8101 18. Dez 21:32 flutter_bootstrap.js
-rw-r--r-- 1 root root 7775 18. Dez 21:32 flutter.js
-rw-r--r-- 1 root root 57563 18. Dez 21:34 flutter_service_worker.js
-rw-r--r-- 1 root root 5055 18. Dez 21:34 html-sdk.js
drwxr-xr-x 2 root root 4096 19. Dez 11:36 icons
-rw-r--r-- 1 root root 5907 18. Dez 21:32 index.html
-rw-r--r-- 1 root root 7042664 18. Dez 21:34 main.dart.js
-rw-r--r-- 1 root root 5608005 18. Dez 21:34 main.dart.js.map
-rw-r--r-- 1 root root 905 18. Dez 21:34 manifest.json
-rw-r--r-- 1 root root 110 18. Dez 21:34 version.json
-rw-rw-rw- 1 root root 3127 22. Dez 11:21 wwx.css
-rw-rw-rw- 1 root root 1146 22. Dez 11:21 wwx.js
pi@PIEPS:/usr/share/symcon/preview $
Als Ergebnis müssen die zwei Dateien wwx.js und wwx.css im Verzeichnis /usr/share/symcon/preview liegen!
Zusammenfassung
Mit der hier vorgestellten Lösung und einer kleinen Anpassung bei der Generierung des HTML-Codes für die HTML-Boxen ist es möglich, WebFront und die neue Tile-Visu komfortabel parallel zu nutzen!
Bereitstellung
Über folgende URL gelangt man zum Repository auf GitHub => https://github.com/Wilkware/WwxTileVisu/