Der WwxSkin

Für die Web-Visualisierung liefert IP-Symcon standardmäßig einen eigenen Skin mit. Seit der Version 5 sogar einen neuen „LightSkin“ mit einem hellen und etwas modernen Antlitz. Da ich mein System über die Jahre mit vielen Skripten und Erweiterungen ausgebaut habe, welche auch stark die Möglichkeit der Darstellung mittels HTML(-Boxen) nutzen, ist ein einfacher Wechsel des Layouts nicht ohne Weiteres möglich. Außerdem bin ich darüber hinaus grundsätzlich mit dem Design des „DarkSkin“s zufrieden. Es gibt nur an der einen oder anderen Stelle kleine Unzulänglichkeiten, welche ich versucht habe mit meinem Skin zu korrigieren bzw. meinem persönlichem Empfinden anzupassen.

Die Features im Überblick

Feste Höhe bei der Variablendarstellung

Gerade wenn man mit Splitpanes arbeitet, stellt man schnell fest das bei gleicher Anzahl von Variablen auf jeder Seite die Spalten nicht die gleiche Höhe haben. Dies führt bei mehreren Tabellen auf einer Seite zu unschönen Sprüngen und einem generell unruhigen Erscheinungsbild (siehe Vorher- / Nachher-Screenshot).

Vorher
Nachher
Feste maximale Breite von Slidern

Da ich ein sehr strukturierter Mensch bin und einen gewisse Uniformität bevorzuge hat mich die dynamische Anpassung der Breite der Slider immer etwas gestört. Durch diesen CSS-Fix werden jetzt alle Slider unabhängig vom vorangestellten Text mit der gleichen maximalen Breite angezeigt. Sollte der Text doch länger sein, wird natürlich der Platz des Sliders automatisch minimiert.

Vorher
Nachher
Feste minimale Breite von Buttons

Wie schon bei den 2 vorherigen Fixes geht es hier auch primär um das einheitliche und akurate Erscheinungsbild von Buttons. Gerade wenn man sehr viele Variablen mit unterschiedlichen Variablenprofilen in einer Spalte darstellen will, dann wirkt die Anordnung sehr schnell unruhig und wild. 

Vorher
Nachher
Eigenes Login Logo

Ehr etwas selbstdarstellerisch, aber wie ich finde ganz hübsch geworden! Wer es auch gut findet, einfach den Hacken bei Login Skin an der richtigen Stelle setzen 😉

Vorher
Nachher
Farblich angepasste Hinweismeldungen

Das Schwarz-Weiß Design der Hinweis-Meldungen empfand ich persönlich nicht besonders gelungen. Speziell in dunklen Zimmern konnte man die Hinweise am Wand-Tablet nur schwer erkennen. Jetzt kann man schnell erkennen das irgendwas passiert ist und somit wird die Aufmerksamkeit schnell erweckt. Zusammen mit dem Anrufmonitor vom Fritzbox-Projekt ist das eine schöne Sache.

Vorher
Nachher
Angepasste Scrollbras (nur PC)

Da meine Webfront’s alle auf 1024×768 (iPad) optimiert sind – aber die Entwicklung am PC (Chrome) erfolgt – war es immer unschön bei Überschreiten des sichbaren Bereiches die Anordnung der Variablen genau vorherzusagen. Um sowohl Scrollbar’s am PC zu erhalten und trotzdem das Layout ähnlich einem iPad vorzufinden habe ich die Möglichkeit genutzt diese mit Hilfe eine Media-Querry (Webkit) an zu passen.

Vorher
Nachher
Tabellenlayouts (~HTMLBox)

Oftmals wird die Darstellung via HtmlBox in IP-Symcon benutzt um Daten tabellarisch abzubilden. Dazu bietet der Skin ein vordefiniertes Tabellenlayout. Dieses umfasst das alternierende Highlighting der Zellen, die Rahmen um Tabelle und Zeilen, und in Farbschemas (Orange, Olive und Blau) für den Tabellenkopf. 

(orange)
(olive)
(blue)
Bereitstellung & Installation

Über folgende URL gelangt man zum Repository auf GitHub => https://github.com/Wilkware/WwxSkin/