Gira HomeServer: Freie Visualisierung auf dem iPad an die Bildschirmbreite anpassen
Eine freie Visualisierung mit 1920 × 1080 Pixeln bietet viel Platz für Grundrisse, Statusanzeigen und Bedienelemente. Beim Aufruf auf dem iPad kann allerdings Scrollen nach rechts und unten nötig werden.
Bei unserer Testanlage mit Gira Experte 4.13 konnten wir die Darstellung über einen angepassten Browseraufruf an die Bildschirmbreite anpassen. Hier zeigen wir den Aufruf, seine Grenzen und eine ergänzende Hintergrundanpassung.
1. Den Aufruf der Visualisierung ergänzen
Öffne die freie HTML5-Visualisierung im Browser mit folgendem Pfad hinter deiner HomeServer-Adresse:/hs?xscale=1&zoom=0&history=0
Die Adresse deines HomeServers bleibt dabei erhalten. Ersetze lediglich den bisherigen Pfad /hs durch den oben gezeigten Aufruf und melde dich wie gewohnt an.
Die Parameter haben im untersuchten Client folgende Aufgaben:
xscale=1aktiviert die Skalierung auf die verfügbare Breite.zoom=0unterbindet eine vom Client vorgesehene Änderung der mobilen Viewport-Einstellungen nach der Anmeldung.history=0verhindert, dass der Client die Aufrufadresse während der Navigation ersetzt und die Parameter beim Neuladen verloren gehen.
Unsere Praxiserfahrung: Mit diesem Aufruf passte die zuvor zu breite Visualisierung auf die Bildschirmbreite des iPads.
2. Warum trotzdem freie Fläche bleiben kann
Die Visualisierung behält beim Verkleinern ihre Proportionen. Unterscheiden sich die Seitenverhältnisse von Visualisierung und Bildschirm, kann unterhalb der Darstellung freie Fläche entstehen.
Breitenskalierung bedeutet außerdem nicht automatisch, dass die gesamte Höhe auf jedes Gerät passt. Besonders im Querformat sollte deshalb geprüft werden, ob weiterhin vertikales Scrollen erforderlich ist.
3. Einen hellen Rand schwarz darstellen
Bei unserer Testanlage blieb nach der Breitenskalierung unten ein heller Rand sichtbar. Für eine dunkle Visualisierung lässt sich der Hintergrund ergänzend per CSS anpassen. Im Anhang wird die Hintergrundfarbe schwarz (#000000) verwendet. Hier kann natürlich nach belieben auch eine anderer Farbcode eingetragen werden.
Öffne im Gira Experten den Visu-Editor. In dessen eigener Menüleiste findest du Extras → CSS-Einstellungen öffnen. Sichere die vorhandene Datei use.project.css und ergänze am Ende:/* Hintergrund um die Visualisierung schwarz darstellen */ html, body, #app, #pagecontainer { background-color: #000000 !important; }
Speichere die Datei und übertrage das Projekt einschließlich der Visualisierungsdaten auf den HomeServer. Lade die Visualisierung anschließend neu. Zeigt Safari weiterhin die alte Darstellung, kann es helfen, die Websitedaten für den HomeServer zu löschen.
Die schwarze Hintergrundanpassung sollte anschließend auf den eingesetzten Geräten kontrolliert werden.
4. Die Visualisierung im Fenster vertikal zentrieren
Bleibt unterhalb der verkleinerten Visualisierung freie Fläche, kannst du die Darstellung mittig im Fenster platzieren. So entsteht bei ausreichend verfügbarer Höhe oben und unten der gleiche schwarze Rand.
Für eine 16:9-Visualisierung, beispielsweise mit 1920 × 1080 Pixeln, und den Aufruf mit xscale=1 ergänze in use.project.css unter dem bisherigen Block für den schwarzen Hintergrund:/* 16:9-Visualisierung vertikal zentrieren */ #pagecontainer > .vpage { top: max(0px, calc(50% - 28.125vw)) !important; }
Die Regel verschiebt die Visualisierung um die Hälfte der verbleibenden Höhe nach unten. Die Breitenskalierung bleibt erhalten. Ist die skalierte Visualisierung höher als das Browserfenster, bleibt sie oben ausgerichtet, damit der obere Inhalt erreichbar bleibt.
Die Berechnung ist auf 16:9-Seiten ausgelegt und setzt voraus, dass die Visualisierung die verfügbare Browserbreite nutzt. Bei anderen Seitenverhältnissen oder abweichenden Layouts muss die Regel angepasst werden.
Speichere anschließend die Datei, übertrage das Projekt einschließlich der Visualisierungsdaten auf den HomeServer und lade die Seite auf dem iPad neu. Prüfe die Darstellung im Hoch- und Querformat sowie nach einem Seitenwechsel.
5. Darstellung und Bedienung prüfen
Teste nach der Anpassung:
- Hochformat und Querformat;
- Seitenwechsel und erneutes Laden;
- Lesbarkeit der Beschriftungen;
- Erreichbarkeit der Tasten;
- Pop-ups und Werteingaben.
Eine auf die Bildschirmbreite verkleinerte Visualisierung ordnet ihre Bedienelemente nicht automatisch neu an. Auf einem Smartphone können Texte und Tasten deshalb zu klein werden. Für diese Geräte können eigene mobile Ansichten sinnvoll sein.
Unterstützung bei deiner HomeServer-Visualisierung
Du möchtest deine bestehende freie Visualisierung auf Tablet und Smartphone besser nutzen? Black Forest Smart Works unterstützt dich dabei, die Darstellung und Bedienung deiner Anlage gezielt zu verbessern.
Beschreibe uns über das Kontaktformular deine HomeServer-Version, das verwendete Gerät und das Darstellungsproblem.
Eine freie Visualisierung mit 1920 × 1080 Pixeln bietet viel Platz für Grundrisse, Statusanzeigen und Bedienelemente. Beim Aufruf auf dem iPad kannallerdings Scrollen nach rechts und unten nötig werden.
Bei unserer Testanlage mit Gira Experte 4.13 konnten wir die Darstellung über einen angepassten Browseraufruf an die Bildschirmbreite anpassen. Hier zeigen wir den Aufruf, seine Grenzen und eine ergänzende Hintergrundanpassung.
1. Den Aufruf der Visualisierung ergänzen
Öffne die freie HTML5-Visualisierung im Browser mit folgendem Pfad hinter deiner HomeServer-Adresse:/hs?xscale=1&zoom=0&history=0
Die Adresse deines HomeServers bleibt dabei erhalten. Ersetze lediglich den bisherigen Pfad /hs durch den oben gezeigten Aufruf und melde dich wie gewohnt an.
Die Parameter haben im untersuchten Client folgende Aufgaben:
xscale=1aktiviert die Skalierung auf die verfügbare Breite.zoom=0unterbindet eine vom Client vorgesehene Änderung der mobilen Viewport-Einstellungen nach der Anmeldung.history=0verhindert, dass der Client die Aufrufadresse während der Navigation ersetzt und die Parameter beim Neuladen verloren gehen.
Unsere Praxiserfahrung: Mit diesem Aufruf passte die zuvor zu breite Visualisierung auf die Bildschirmbreite des iPads.
2. Warum trotzdem freie Fläche bleiben kann
Die Visualisierung behält beim Verkleinern ihre Proportionen. Unterscheiden sich die Seitenverhältnisse von Visualisierung und Bildschirm, kann unterhalb der Darstellung freie Fläche entstehen.
Breitenskalierung bedeutet außerdem nicht automatisch, dass die gesamte Höhe auf jedes Gerät passt. Besonders im Querformat sollte deshalb geprüft werden, ob weiterhin vertikales Scrollen erforderlich ist.
3. Einen hellen Rand schwarz darstellen
Bei unserer Testanlage blieb nach der Breitenskalierung unten ein heller Rand sichtbar. Für eine dunkle Visualisierung lässt sich der Hintergrund ergänzend per CSS anpassen.
Öffne im Gira Experten den Visu-Editor. In dessen eigener Menüleiste findest du Extras → CSS-Einstellungen öffnen. Sichere die vorhandene Datei use.project.css und ergänze am Ende:/* Hintergrund um die Visualisierung schwarz darstellen */ html, body, #app, #pagecontainer { background-color: #000000 !important; }
Speichere die Datei und übertrage das Projekt einschließlich der Visualisierungsdaten auf den HomeServer. Lade die Visualisierung anschließend neu. Zeigt Safari weiterhin die alte Darstellung, kann es helfen, die Websitedaten für den HomeServer zu löschen.
Die schwarze Hintergrundanpassung sollte anschließend auf den eingesetzten Geräten kontrolliert werden.
4. Darstellung und Bedienung prüfen
Teste nach der Anpassung:
- Hochformat und Querformat;
- Seitenwechsel und erneutes Laden;
- Lesbarkeit der Beschriftungen;
- Erreichbarkeit der Tasten;
- Pop-ups und Werteingaben.
Eine auf die Bildschirmbreite verkleinerte Visualisierung ordnet ihre Bedienelemente nicht automatisch neu an. Auf einem Smartphone können Texte und Tasten deshalb zu klein werden. Für diese Geräte können eigene mobile Ansichten sinnvoll sein.
Unterstützung bei deiner HomeServer-Visualisierung
Du möchtest deine bestehende freie Visualisierung auf Tablet und Smartphone besser nutzen? Black Forest Smart Works unterstützt dich dabei, die Darstellung und Bedienung deiner Anlage gezielt zu verbessern.
Beschreibe uns über das Kontaktformular deine HomeServer-Version, das verwendete Gerät und das Darstellungsproblem.