Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[Segway]

@ioBroker-lover
Ich persönlich hab gar nicht so viel Zeit für jedes Endgerät ne angepasste Vis zu hinterlegen also PC, Handy, Tablet und dann noch Hoch und Querformat!
Da kommt mir Jarvis grad recht!

Aber klar wenn du das so brauchst dann musst du diesen Weg gehen

[dtp]

Also mit der ioBroker App für iOS ist der Wechsel von Quer- ins Hochformat für jedes Gerät individuell einstellbar. Sprich, ich kann für mein iPhone hier zwei andere Startviews festlegen, als z.B. für mein iPad.

Ich habe das aber nicht umgesetzt, sondern nutze auf meinem iPhone nur Views im Hochformat und auf meinem iPad nur Views im Querformat. Das zu ändern, wäre teilweise schon sehr viel Aufwand, insbesondere bei den eingebunden Diagrammen. Meine vis-Projekte haben derzeit jeweils so ca. 30 einzelne Views mit zum Teil zig Widgets, die stets so angeordnet sind, dass sie die zur Verfügung stehende Fläche voll ausnutzen (ich mag keine Leerräume).

[CyberMicha]

@iobroker-lover said in Visualisierung bei mehreren Geräten:

hte das Ganze aber schon gerne im vis realisieren, da ich die Anpassbarkeit der Oberfläche sehr mag.
Nur für diese Funktion zu einer anderen Visualisierung zu wechseln, wäre es mir da nicht wert.

Sehe ich auch so. vis hat halt superviele Möglichkeiten.
Bisher hab ich leider noch keine Lösung gefunden. Wundert mich auch, dass hier nicht mehr Fragen danach kommen.

[ice987]

@cybermicha

Versuche mal in einer View alle Widgets nach dem Schema (Höhe in px, Breite in %) umzubauen:

Spoiler

[{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"Test"},"style":{"left":"0px","top":"150px","height":"20px","width":"100%"},"widgetSet":"basic"}]

Das was du vorhast geht easy

[CyberMicha]

@ice987 said in Visualisierung bei mehreren Geräten:

[{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"Test"},"style":{"left":"0px","top":"150px","height":"20px","width":"100%"},"widgetSet":"basic"}]

Verstehe ich nicht? Die Höhe ist ja auch variabel.

[ice987]

@cybermicha
Die Höhe der vis view? Da gibst du nichts ein. Auflösung: nicht definiert

Schick doch mal einen Printscreen einer „einfachen“ view

[dtp]

@ice987 said in Visualisierung bei mehreren Geräten:

Das was du vorhast geht easy

Selbst, wenn beide Geräte (Smartphone und Tablet) komplett andere Seitenverhältnisse haben (z.B. Smartphone 16:10 und Tablet 4:3)? Dann hat man ja in dem einen Gerät extrem viel leere Fläche, wenn der Screen beim anderen gut gefüllt ist.

Ich habe so z.B. bei meinem iPhone und meinen iPad jeweils im Hoch- und im Querformat komplett unterschiedliche Ansichten mit an die Auflösung des jeweiligen Geräts angepasster Position und Größe der einzelnen Widgets. Wüsste auch nicht, wie man das sinnvoll automatisiert bekommt.

Nehmen wir mal die nachfolgende Ansicht auf meinem iPhone mit einem Dialog-Widget, das zwei untereinander angeordnete Diagramme zeigt.

Wie soll man das ohne spezielle Anpassung der Widgets vernünftig auf einem Tablet dargestellt bekommen? Und auch für das Querformat auf dem iPhone würde ich hier einen komplett anders aufgebauten View mit zwei nebeneinader angeordneten Diagrammen benötigen.

[ice987]

@dtp

Die view müsste entsprchend gefüllt werden, dass nur die Breite jeweils automatisch mit width = 100% variiert/angepasst werden kann

[OliverIO]

weiß das nicht so genau, aber kann man nicht durch das beschreiben eines states den view wechseln?

über den folgenden code kann man erkennen, ob das gerät gedreht wurde.
auch nicht ausprobiert, nur im internet gesucht.

wenn man so etwas in das skript tab einträgt, dann müsste sich die view dann automatisch ändern

window.addEventListener("orientationchange", function() {
    // Announce the new orientation number
    alert(window.orientation);
}, false);

[ice987]

@oliverio

Das müsste ich mal ausprobieren. Ich habe folgenden Code ausprobiert um die Breite eines Widgets auszulesen, ohne Trigger:

<script>
document.getElementById("w00935").innerHTML = window.innerWidth ;
</script>

Leider habe ich es noch nicht geschafft, so was als Binding einzusetzen, mit welchem dann Abhängigkeiten zwischen der Breite und Höhe eines Widgets errechnet werden könnten...