smarthome-tricks.de

ioBroker VIS – View in Widget Scrolling

Im folgenden Artikel zeige ich Dir, wie Du eine View mit dem Widget View in Widget im Browser scrollbar darstellen kannst.

Für die Visualisierung von vielen Informationen reicht häufig der Platz auf der Visualisierungsoberfläche nicht aus. Von daher bietet es sich an, scrollbare Anzeigen zu implementieren, mit denen man zu den gewünschten Informationen herunter- oder hoch scrollen kannst. Ich nutze das Scrolling z.B. bei der Anzeige von Räumen in meiner Visualisierungslösung. Da hier die ganzen Räume nicht mehr auf die Visualisierung passen, kann die Liste nach unten oder oben gescrollt werden.

Für den Artikel habe ich dazu ein einfaches Beispiel aufgebaut. Das Beispiel besteht aus zwei Views. Hier zunächst die View „SubViewA“ mit den einzelnen Räumen. Der Raum wird dazu in Form eines grauen Kastens dargestellt.

Die View „MainView“ ist die View, auf der die View „subViewA“ gehostet und somit auch scrollbar dargestellt werden soll. Das Hosten von Views wird über das Widget „View in Widget“ gelöst. Dazu wird nach dem Einfügen des Widgets „View in Widget“ zunächst die maximale Größer der anzuzeigenden View bestimmt. Im nächsten Schritt wird unter Allgemein der Viewname der anzuzeigenden View eingetragen. Im nächsten Schritt legen wir unter „CSS Allgemein“ die Eigenschaften overflow-x und overflow-y auf auto fest. Damit wird die anzuzeigende View scrollbar dargestellt.

Wenn wir nun die View MainView in der VIS Visualisierung ausführen, sehen wir, dass durch die Höhenbegrenzung die View scrollbar dargestellt wird. Auf der rechten Seite des View in Widget Widgets wird eine vertikale Scrollbar eingeblendet. Wenn das Widget nun auch schmäler gezogen wird, wird zudem eine horizontale Scrollbar angezeigt.

Ich hoffe euch gefällt dieser Artikel. Über Kommentare unterhalb des Artikels oder per E-Mail freue ich mich wie immer.

Die mobile Version verlassen