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.

Matthias Korte

Hauptberuflich Software-Entwickler und seit einigen Jahren Smart-Home Fan. Angefangen hat alles mit einem RaspberryMatic und einer schaltbaren Steckdose. Mittlerweile habe ich einige Steckdosen, Sensoren, und Thermostate sowie ioBroker zur Visualisierung im Einsatz.

2 Gedanken zu „ioBroker VIS – View in Widget Scrolling

  • 19. Februar 2021 um 20:11
    Permalink

    Hello

    Wie krieg ich´s denn hin, dass ich den Scrollbalken auf hidden stelle und ich trotzdem scrollen kann.
    Daran verzweifle ich grad. Bei nem Touchdevice brauch ich den nicht wirklich anzeigen.

    Danke für Rückinfo….

    Antwort
    • 21. Februar 2021 um 19:39
      Permalink

      Hallo,

      auf meinem iPhone erscheint hier nur kurz während dem Scrollen ein Balken, der ist dann aber wieder weg. Was für ein Gerät / OS / Browser nutzt Du denn?

      LG Matthias

      Antwort

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.