Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[d-dnrn]

Einiges habe ich schon gelesen, bisher aber noch keine saubere Anleitung finden können:
Wie baut man eine vernünftige VIS Anwendung für 3 verschiedene Gerätetypen (Handy, Tablet, PC) damit es vernünftig aussieht.
Muss man wirklich 3 komplett verschiedene Visualisierungen programmieren damit es eingermaßen passt?

Wie geht man da ran? Ich glaube ein gutes HowTo würde einer Menge Leuten weiter helfen ;-)

Ich bin noch ziemlich neu bei iobroker, hatte vorher und auch jetzt noch pimatic als Hauptsteuerung, da muss man über sowas nicht nachdenken, hat aber auch keine Möglichkeiten.
Ich habe mittlerweile aber mehr und mehr Dinge nur noch im iobroker laufen.
Einige schöne Dinge habe ich damit schon zustande bekommen und bisher läuft alles sehr stabil, nun wird es also Zeit mal von Grund auf richtig zu bauen.

österliche Grüße
Dieter

[Homoran]

@d-dnrn sagte in wie Neuanfang VIS für verschiedene Geräte:

Muss man wirklich 3 komplett verschiedene Visualisierungen programmieren damit es eingermaßen passt?

Nicht wirklich.
Ich habe alle meine Views in full-HD konstruiert und nutze je nach Lust und Laune auf meinen Tablets entweder einen Browser oder die Vis-App

Im Browser kann man beliebig zoomen und in der Vis App kann man zwei Zoomstufen einstellen. Einmal für Landscape, und eine andere für Portrait.
In Landscape stelle ich den Zoomfaktor so ein, dass die gesamte View zu sehen ist, in Portrait so, dass die View in voller Höhe, aber nur ein Teil der Breite zu sehen ist, eine art Bildschirmlupe. Aktiviert man dann noch "verschieben erlauben" kann man sich durch den ganzen View scrollen.
Bei Umorientierung des Handys schaltet sich der Modus automatisch um.

Eine weitere Möglichkeit ist es verschiedene gerätespezifische Projekte zu nehmen, und diese in den Einstellungen der App auszuwählen.

Außerdem gibt es noch die Möglichkeit eine Instanz pro Endgerät/Browser zu generieren und dort selektive Auswahl zu erlauben.

Die Idee mit dem Tutorial ist leider nur vordergründig gut, da die Möglichkeiten dermaßen umfangreich sind, dass ein solches Tutorial -wenn man dann für jeden möglichen Anwendungsfall auf alle Möglichkeiten eingeht- dieses Tutorial einen Einsteiger eher abschreckt als dass es hilft.

[Garfonso]

Naja, eine Übersicht wäre schon schön...
Das mit dem Vis & skalieren ist zwar net, aber das es sich nicht automatisch an die Bildschirmgröße anpasst, ist schon oft störend und heute mindestens überraschend.

Es gibt da ja durchaus auch einige Alternativen, die das eher erlauben (und eher dafür gedacht sind relativ flott was hinzubekommen)...
Hier gibt es z.B. so etwas wie eine Übersicht über die ganzen Möglichkeiten: https://www.smarthome-tricks.de/software-iobroker/iobroker-visualisierungen-uebersicht-und-vergleich/
(wobei es seitdem auch noch zumindest Jarvis neu gibt, was ich mir mal angucken wollte, weil ich das mit JSON konfigurieren kann, was mir besser gefällt als das ganze Pixelgeschubse über Web-Konfigurationen. Lovelace fand ich auch recht gut, weil man da direkt in der Vis-Editieren kann).

Man muss allerdings sagen, dass man mit dem Vis Adapter immer noch die höchste Flexibilität hat und alles mögliche umsetzen kann. Aber genau das kann einen auch erschlagen (bei mir führt das dazu, dass ich 1000 Ideen für meine Vis habe aber kaum welche davon zu Ende umsetze flöt).

[Homoran]

@Garfonso
Also suchst du ein Tutorial für eine Übersicht aller Visualisierungsmöglichkeiten mit allen Möglichkeiten, aber kurz und verständlich?

[Garfonso]

@Homoran
Was der OP sucht, weiß ich nicht. ;-)
Ich wollte nur auf die Übersicht hinweisen, die auch Alternativen kurz beschreibt, die mir selber ganz gut geholfen hat, weil ich mir auch seit längerem Überlege eine ganz neue Visualisierung zu machen, ggf. nicht mit dem Vis-Adapter.

Zum Vis-Adapter gibt es, finde ich, auch relativ viele ganz brauchbare Tutorials. Wobei die natürlich immer nur kleine Teile abdecken. Da fehlt mir auch etwas der Überblick, was es da für Möglichkeiten gibt (z.B. Verwendung von Material Desing hab ich noch nicht verstanden, aber mich auch noch nicht intensiv eingelesen)

Aber irgendwie finde ich persönlich Vis aktuell nicht sooo prickelnd für mehrere Geräte. Ich habe auch eine Vis in Full HD gebaut, die für hochkant hängende Wandtablets ganz gut funktioniert. Die ist am PC dann schon wieder eher doof, weil zu hoch und ich unten die Menü-Leiste für View-Wechsel hab, also muss ich am PC fast immer scrollen. Da hab ich am Anfang noch nicht so richtig drüber nachgedacht und müsste jetzt um das zu ändern sehr viel neu machen.

@Homoran said in wie Neuanfang VIS für verschiedene Geräte:

aber kurz und verständlich?

Von mir aus kann es auch lang und umfangreich sein, wenn es gut strukturiert ist. ;-) Aber da bin ich sicherlich nicht der Maßstab an dem man sich richten sollte.

[d-dnrn]

@Homoran , @Garfonso
Danke euch erst mal, hatte mir gedacht, dass es nicht so ganz trivial ist ;-)
.. nu manchmal ist man zu blöd die einfachen Tricks zu erkennen, da wollte ich lieber mal nachfragen.

Vielleicht möchtet Ihr mir trotzdem helfen die Basics zu verstehen?
Ich mache beruflich sehr viel GUI Design für Maschinen, habe aber leider keine Ahnung von Webentwicklung, das ist also schon mal ein Problem.

Wie ich oben sagte, ist mir wichtig, dass ich für meine 3 Gerätetypen irgendwie was passendes zusammen bekomme.
Erst mal ist auch egal wie viel Arbeit das macht, soll halt nur eine vernünftige Lösung sein.
Auflösungen können natürlcih sehr unterschiedlich sein, daher dachte ich, dass es in erster Linie auf das Verhältnis ankommt, Handy eher Portrait, PC eher Landscape, Tablet kann beides, das ist denke ich soweit jedem klar.
Nun habe aber schon verstanden, dass VIS scheinbar nicht automatisch zoomen kann, ist das also ein Problem mit dem man leben muss? Zoomen möchte ich definitiv nicht jedesmal beim Neustart der Seite.

Wie würdet Ihr anfangen?
PC hat normalerweise Full HD 1920x1080 (aber im Browser natürlich weniger, Netto z.B. 1920x944 )
Handyauflösung ist stark vom Gerät abhängig, aber oft deutlich kleiner. Beim Samsung S8 jetzt 980x1710
Tablet, welches an der Wand hängt hat Landscape Kiosk-Mode 800x1207

[Homoran]

@d-dnrn sagte in wie Neuanfang VIS für verschiedene Geräte:

Zoomen möchte ich definitiv nicht jedesmal beim Neustart der Seite.

Beim Browser wäre das nur ein schnelles doppeltes Antippen um den View formatfüllend anzuzeigen

Um die reale(!) Auflösung anzuzeigen gibt es ein resolution widget
Bei Handys und Tablets ist oft ein Vergrößerungsfaktor fix eingebaut, so dass ein fullHD Display oft eine deutlich kleinere Auflösung im Browser hat

[d-dnrn]

Ok, Danke,
screen resolution widget habe ich schon mal eingebunden, aber was sagt mir der Wert jetzt?
Wenn ich die 3 oben angegebenen Auflösungen ermittelt habe, welche Auflösung nutze ich dann im VIS?
und mache ich eine Auflösung für alle Geräte oder 2 Varianten für landscape/portrait
oder lieber 2 für hohe und kleine Auflösung?
Wie würde die Auswahl beim Aufruf der Seiten gehen, kann ich da automatisch Umleiten zum richtigen View?

[Homoran]

@d-dnrn sagte in wie Neuanfang VIS für verschiedene Geräte:

Ok, Danke,
screen resolution widget habe ich schon mal eingebunden, aber was sagt mir der Wert jetzt?
Wenn ich die 3 oben angegebenen Auflösungen ermittelt habe, welche Auflösung nutze ich dann im VIS?
und mache ich eine Auflösung für alle Geräte oder 2 Varianten für landscape/portrait
oder lieber 2 für hohe und kleine Auflösung?
Wie würde die Auswahl beim Aufruf der Seiten gehen, kann ich da automatisch Umleiten zum richtigen View?

vis bietet u.a die Funkion "default" bei den Views
wenn man für jede benötigte Auflösung einen View bastelt, wird der so markierte bei passender Auflösung automatisch geöffnet

[d-dnrn]

@Homoran sagte in wie Neuanfang VIS für verschiedene Geräte:

vis bietet u.a die Funkion "default" bei den Views
wenn man für jede benötigte Auflösung einen View bastelt, wird der so markierte bei passender Auflösung automatisch geöffnet

Gerade mal ein wenig probiert, aber noch nicht glücklich damit.

Wie geht diese Auswahl genau?
Ich hab ja dann mehrere Views die auf [x]-default stehen aber nicht immer genau die Auflösung das View gesetzt hat.
Gibts da eine gewisse unschärfe was die Zahlenwerte angeht?
Ich möchte dann z.B. eine View für Landscape (1920x944) und eine für Portrait (980x1710)
Bei Geräten die nicht die selbe Auflöung als Zahl haben, kann ich sagen welche View verwendet wird?

[Homoran]

@d-dnrn sagte in wie Neuanfang VIS für verschiedene Geräte:

Gibts da eine gewisse unschärfe was die Zahlenwerte angeht?

Ja!
Die View mit Auflösung, die der realen(!) am nächsten kommt wird bei Aufruf von <IP>:8082/vis geöffnet