Ein Webfront, viele Auflösungen

Das skalierbare WebFront

Mittels WebFront bietet IP-Symcom eine einfache und ansprechende Möglichkeit, sämtliche Daten innerhalb der Haussteuerung zu visualisieren. Das heißt, man kann Geräte und deren Zustände anzeigen und schalten, Bilder einblenden und Skripte auszuführen. Zur Anzeige ist nur ein moderner Browser auf dem jeweiligen Client notwendig, meistens Tablets oder Screens mit Touch-Funktionalität.

Das Ganze kann dann noch durch den Einsatz von Skins (ausführlich im Menüpunkt SKINS beschrieben) den eigenen Wünschen angepasst werden.

Problem – Optimierung vs. Auflösung

Meistens fängt man dann an für ein bestimmtes Endgerät das WebFront zu bauen, in meinem Fall war es ein ausrangiertes iPad 2 mit einer Auflösung von 1024×768. Oftmals ist es ein primäres Ziel schnell alle erforderlichen Infos direkt anzuzeigen und so wenig wie möglich zu Scrollen. Jedenfalls handhabe ich das bei mir so. Also versucht man den Platz in Abhängigkeit der gebotenen Auflösung optimal auszunutzen und die Informationen dennoch sinnvoll zu gruppieren und dann auf verschiedene Tabs zu verteilen.

Irgendwann kam ich dann auf die glorreiche Idee ein Tablet mit hoher Auflösung einzubinden um noch mehr Infos schnell und direkt im Zugriff zu haben. Die Idee war, für die hohe Auflösung ein eigenes – größeres – WebFront zu bauen. In der Zwischenzeit war aber schon sehr viel Aufwand, Zeit und Herzblut in das bestehende WenFront geflossen. Da ich parallel versuche das WebFront für die Apple Watch und die iOS App syncron zu halten wurde mir schnell  klar das die Lösung nicht in noch mehr WebFronts und deren Pflege liegen kann.

Erste Versuche via Browserskalierung

Das erste Panel neben den iPad’s war ein süßes, kleines Levono Yoga Tablet. Neben der geringeren Auflösung war auch die Suche nach einem Browser der eine Vollbilddarstellung (Kiosk-Modus) schwierig. Die Suche endete in einer wirklich genialen Lösung – dem Fully Kiosk Browser. Diese App ist wirklich ein Segen für Android Benutzer. Neben zahlreichen anderen nützlichen Einstellung unterstützt er auch Skalierung von Inhalten. Leider hat mich das Ergebnis nie 100% befriedigt, immer war oder wurde etwas nicht in Proportion zum Rest dargestellt. Einmal waren es die Bilder, ein anderes mal die selbst gebauten HTML-Boxen.

Jedenfalls bin ich dann doch wieder zurück auf die normale Darstellung zurückgekehrt, was dann einmal zu groß bzw. zu klein angezeigt wurde 🙁

Lösung – die CSS-Eigenschaft zoom

Die nicht standardmäßige CSS-Eigenschaft kann verwendet werden, um die Vergrößerungs-stufe eines Elements zu steuern. Das geniale daran, es wirkt sich einheitlich auf alle Elemente aus. Eigentlich sollte man es nicht mehr anwenden und durch transform:scale() ersetzen, aber sowohl Safari, Chrome und der Fully Browser arbeiten einwandfrei damit.

Ich betreibe derzeit damit 3 verschiedene Auflösungen mit ein und dem selben WebFront und bin absolut zufrieden damit:

• Lenovo Yoga Tab 3 (960×600)
• Apple iPad Pro (1024×768)
• xoro Megapad (1920×1080)

Wie Ihr das für Eure Panels nutzen könnt steht ausführlich von mir im Forum beschrieben (siehe nachfolgenden Link).

Fazit
Durch den gezielten Einsatz von Skins, der CSS-Eigenschaft zoom und der Möglichkeit des automatischen Aufrufens von Webkonfigurationen (WebFronts) in abhängig der Client-IP ist eine optimale Ansteuerung entsprechend der Auflösung des Endgerätes möglich.