Webfront Zoom per CSS

Hallo zusammen,

primär nutze ich iPad’s als Anzeige-Panel und optimiere dafür auch immer mein Webfront. Ich habe darüber hinaus auch noch andere Tablet’s im Einsatz mit unterschiedlichen Auflösungen.

Hier mal meine Liste mit den entsprechenden Auflösungen:

[ul]
[li]Lenovo Yoga Tab 3 (960x600)
[/li][li]Apple iPad Pro (1024x768)
[/li][li]xoro Megapad (1920x1080)
[/li][/ul]

Das Problem war dann immer - auf dem Yoga war alles zu groß, auf dem MegaPad war alles zu klein :frowning:
Ich habe jetzt für mich eine Lösung gefunden die vielleicht den einen oder anderen auch interessieren wird?!?!
Eigentlich ist die Lösung absolut simple und das Zauberwort heißt via CSS „zoom“!

Hier mal die Schritte um das Webfront auf verschiedenen Auflösungen zu optimieren:

1. Pro Auflösung einen eigenen Skin

Da ich sowieso meinen eigenen Skin pflege kein Thema - wenn man einen vordefinierten verwendet - dann die Anpassungen darauf anwenden.

Also zuerst den verwendeten Skin entsprechend der Anzahl an Auflösungen doppeln. Bei mir heißt mein Skin „WwxSkin“ und muss 2x dupliziert werden:

  • wechseln ins Skin-Verzeichnins (z.B. /var/lib/symcon/webfront/skins)
  • Skin duplizieren (sudo cp -r <Skin> <NewSkin>

Bei mir heißen die 2 neuen Skins „WxxSkinXS“ und „WwxSkinXL“ (XS = Levono; XL = MegaPad).

Dann in die jeweiligen Skinverzeichnisse die webfront.css öffnen und folgenden Style hinzufügen:

XS - Variante


body {zoom: 80%;}

XL - Variante


body {zoom: 125%;}

2. WebFront Konfiguration doppeln

Leider ist Koppelung Webfront zu Skin eine 1 zu 1 Verbindung, d.h. man muss auch pro Auflösung eine Webfront-Konfiguration anlegen.

Dafür habe ich mir ein kleines Script geschrieben um später auch Updates am Primären WF schnell auf die anderen zu übertragen.
Vorher aber in der Console einfach die entsprechende Anzahl an WF „nackig“ anlegen. Danach die IDs im Script anpassen und ausführen.


<?php
################################################################################
# Script:   System.WebfrontSync.ips.php
# Version:  1.0.20200329
# Author:   Heiko Wilknitz (@Pitti)
#
# Webfront Konfiguration Duplizierung
#
# ------------------------------ Installation ----------------------------------
#
# Dieses Skript richtet automatisch alle nötigen Objekte bei manueller
# Ausführung ein. Eine weitere manuelle Ausführung setzt alle benötigten Objekte
# wieder auf den Ausgangszustand.
#
# - Neues Skript erstellen
# - Diesen PHP-Code hineinkopieren
# - Abschnitt 'Konfiguration' den eigenen Gegebenheiten anpassen 
# - Skript Abspeichern
# - Skript Ausführen
#
# ------------------------------ Changelog -------------------------------------
#
# 29.03.2020 - Initalversion (v1.0)
#
# ------------------------------ Konfiguration ---------------------------------
#
# Quell-WebFront
$sourceId   = 11111;
$sourceSkin = 'WwxSkin';
#
# Ziel-WebFronts
$targetIds = [
    22222 => "WwxSkinXS",
    33333 => "WwxSkinXL",
];
#
################################################################################

$json = IPS_GetConfiguration($sourceId);
//var_dump($json);

foreach($targetIds as $key => $value) {
    $patch = str_replace($sourceSkin, $value, $json);
    IPS_SetConfiguration($key, $patch);
    IPS_ApplyChanges($key);
}

?>

3. Autostart konfigurieren

Dank der Möglichkeit für feste IPs ein WF-Autostart zu definieren (Instanzkonfiguration/Sicherheit/Auto Start) kann man pro Tablet dann das korrekte WF zuordnen :wink:

Abschließender Hinweis

Arbeitet man in seinen Scripten mit Funktionen, welche die WF-Id verwenden (z.B. WFC_SwitchPage) dann immer die $_IPS[‚CONFIGURATOR‘] verwenden und keine hardcoded IDs!

Viel Spaß
Heiko

1 „Gefällt mir“