Der neue Monatsrückblick für Mai und Juni 2026 ist online!

[typhos]

Hallo zusammen,

der Adapter vis2-materialdesign (Material Design Widgets) ist im Latest-Repository verfügbar und sucht Tester.

Worum geht es

Die Material-Design-Widgets von Scrounger waren für VIS 1 konzipiert und laufen in VIS 2 nicht zuverlässig. Dieser Adapter portiert den Widget-Satz nativ nach VIS 2 — eigenständiger Adapter, ohne VIS-1-Altlasten: kein materialdesign.html, keine jQuery/Materialize-Konfigseite, kein Legacy-Stylesheet. Material Design Icons und die benötigten Material-Styles stecken im Widget-Bundle, die Widgets rendern also ohne Zusatzinstallation.

Voraussetzungen

• VIS 2 (vis-2)
• Admin >= 7.6.20
• Typ visualization-widgets, Modus none (keine laufende Instanz-Last)

Installation

Admin > Adapter > Repository auf Latest > Material Design Widgets installieren.

Alternativ direkt von GitHub: https://github.com/typhosj/ioBroker.vis2-materialdesign

Enthaltene Widgets

Alerts, Buttons (horizontal/vertikal), Icon-Buttons, Calendar, Card/HTML-Card, Checkbox, Dialog, Icon-List, Input, List, Progress (linear/circular), Responsive Layout, Select/Autocomplete, Slider, Round-Slider, Switch, Table, Top-App-Bar, Value sowie Charts (Bar, Pie, Line-History, JSON).

Dazu ein nativer Theme-Editor im Admin: Farben, Schriften und Größen zentral setzen, gespiegelt als Objekte in die Runtime — inklusive Dark-Mode über vis2-materialdesign.0.colors.darkTheme.

Dokumentation

Pro Widget mit Editor-Screenshots:

• Deutsch: https://github.com/typhosj/ioBroker.vis2-materialdesign/blob/master/doc/de/README.md
• English: https://github.com/typhosj/ioBroker.vis2-materialdesign/blob/master/doc/en/README.md

Worauf ich Rückmeldung brauche

1. Optische Parität zu VIS 1 — sieht ein Widget mit gleicher Konfiguration anders aus als im alten materialdesign-Widgetsatz?
2. Theme-Editor — Farben/Schriften speichern, Dark-Mode umschalten, Admin-Sprache wechseln und erneut speichern.
3. Charts — Bar, Pie, Line-History und JSON-Chart mit echten History-Instanzen (History/SQL/InfluxDB), auch mit Option „use card".
4. Eingabe-Widgets — Slider, Round-Slider, Input, Select, Checkbox, Switch: Schreiben auf den Datenpunkt und Reaktion auf Änderungen von außen.
5. Umgebungen — Chrome/Firefox/Safari, iOS/Android-App, Tablet-Panels, verschiedene Auflösungen.
6. Editor — fehlende oder falsche Übersetzungen der Widget-Optionen, unklare Beschriftungen.

Stand / Hinweise

• Version 0.3.3, noch kein Stable — bitte nicht ohne Backup auf ein produktives System. Vorher VIS-2-Projekte sichern.
• Bestehende VIS-1-Projekte bleiben unberührt; die Views müssen in VIS 2 neu aufgebaut werden.
• In Arbeit, noch nicht enthalten: zweiter Design-Stil Material 3 (pro Widget umschaltbar, Classic bleibt Standard), Material Symbols als zweite Icon-Quelle, Chart.js 4.

Feedback

Fehler bitte als Issue mit Screenshot, Widget-Name und möglichst exportierter Widget-Konfiguration:
https://github.com/typhosj/ioBroker.vis2-materialdesign/issues

Allgemeine Rückmeldungen gern hier im Thread.

Danke fürs Testen!

[Cyberraph]

Eine Kommentar von mir als Unwissender.
ioBroker.vis-2-widgets-material Adapter von GermanBluefox ist gänzlich ein anderer Adapter.
Jener ist zwar "geupdated" auf VIS-2 aber macht zumindest aktuell teilweise Probleme in der Anzeige
(soweit meine Erfahrung und diverse Thread Beiträge seit ein paar Monaten hier und auf Github)

Spoiler

Dein Adapter hier lt. Beta Repo soll jetzt ein frischer, neuer Ansatz sein, nehme ich an.

Was ich als "einfacher User" jetzt schon sehr spannend finde, deine ausführliche Doku hierzu.

Ich teste es auf jedenfall und danke sehr hierfür.

PS:
Ach ich sehe schon, es gibt ja diverse Adapter für material-design Widgets.
Da darf man sich als Laie nicht verwirren lassen. (entschuldige)

[Cyberraph]

Ich lösche diesen Post gerne, falls er hier fehl am PLatz ist.
Wenn es ggf. lieber ist, wenn ich einen separaten Thread aufmachen würde, für allgemeine Fragen zur Bedienung.

Frage:
Wie ist die genaue Vorgehensweise, wenn man mit dem Widget "Top App Bar"
einrichtet von einer View Seite auf eine andere View Seite navigieren zu können?

Ich bin alle Menüpunkte mal durchgegangen, stehe aber mit meinem leider doch dünnerem Wissen an,
wie oder welche Art von Datenpunkten (Objekt-IDs) ich brauche, die hier einzugeben sind.

Die Doku habe ich mir angesehen:
https://github.com/typhosj/ioBroker.vis2-materialdesign/blob/master/doc/de/widgets/top-app-bar.md

Ich lese am Anfang in der Doku etwas von Template-ID: tplVis2-materialdesign-TopAppBar-Navigation
ist irgendwo eine Vorlage, die ich mir öffnen könnte, um genauer zu sehen was einzugeben ist in irgendeiner Form?

Danke für einen Anstoß, wohin ich gehen muss.
Und ich entschuldige schon mal die wohl eher "dumme" Frage.

[EDIT - 14.08.2026 00:19]

Entschuldigt, ich habe es nun selbst rausgefunden.
Dank Chat-GPT und weiterführender Seiten (VIS-1 Doku hilft da mitunter auch)
https://chatgpt.com/share/6a7e46ee-3cd0-83eb-9bc5-969b5e17e3af
https://www.npmjs.com/package/iobroker.vis-materialdesign?activeTab=readme&utm_source=chatgpt.com#top-app-bar
---> Top App Bar + Advanced View in Widget 8 braucht es in Zusammenspiel.

Eine Frage stellt sich mir dennoch weiter:
-> auf View: 00_Navigation habe ich die Top-App-Bar in voller Screengröße (roter Rahmen)
-> auf den Views: 01_Seite-1 und 02_Seite-2 habe ich jeweils in voller Screengröße (roter Rahmen) das Widget-8 View

1. z-Position Widget-8 niedriger als Top-Bar = dann kann ich z.B. keinen Button mehr drücken
2. z-Position Widget-8 höher als Top-Bar = dann, weil es darunter liegt,
   verschwindet oben der Balken Auswahlmenü der Top-Bar
   und
   zzgl. wirkt der z-Index von 1000 (rote Pfeile) offenbar
   nicht unabhängig von der z-Position der CSS-Allgemein Einstellung weiter unten desselben Top-Bar Widgets
   ---> weil klappe ich das Menü aus, und liegt ein anderes Widget höher in z als die CSS-Allgemein Einstellung
   ---> des Top-Bar Widgets, kann das ausgeklappte Menü nicht mehr bedient werden
   ---> (obwohl z-Index für den ausklappenden Bereich mit 1000 weit höher liegen müsste)

Den ersten Teil zu Pkt. 2. wird man wohl nur lösen können wenn ich die 01_Seite-1 und 02-Seite-2
von der Höhe her um die Höhe des oberen Top-Bar Streifens verkleinere und die Widget-8 View
somit nur so groß ist wie das gelbe rechteck im Screenshot.

Spoiler

[sigi234]

@typhos

Hallo, endlich wird einer der Besten Widgets-Sammlungen in VIS1 für VIS-2 angepasst.
Danke dafür, ich werde sie ausgiebig testen.

Installation und Start der Widgets unter VIS-2 hat einwandfrei funktioniert.

Weitere Berichte folgen.

Danke natürlich auch an @scrounger

LG
Sigi

Mein System:

[typhos]

@Cyberraph dein Fund stimmt, Top App Bar und Advanced View in Widget 8 gehören zusammen. Die Bar navigiert nicht selbst, sie schreibt nur den Index des gewählten Menüeintrags in ihre Objekt-ID; das Widget 8 liest dieselbe Objekt-ID und zeigt die Ansicht dazu. Dass das nirgends stand, war eine Lücke in meiner Doku — steht jetzt in der Widget-Doku, mit Verweis in beide Richtungen. Die Frage war nicht dumm, die Antwort stand einfach nirgends.

Beide Punkte aus deinem Nachtrag sind Bugs und behoben:

Die Klicks. Der leere Teil des Top-App-Bar-Rahmens war ein unsichtbares Klickziel — deshalb war darunter nichts mehr bedienbar, sobald du die Bar bildschirmgroß gezogen hast. Sie muss aber bildschirmgroß sein, damit der Drawer Platz hat. Jetzt nehmen nur Leiste, Drawer und Scrim Klicks an, der Rest ist durchlässig; du kannst die Bar also über die ganze Seite legen und das Widget 8 darunter voll nutzen. Damit erübrigt sich auch dein Workaround, die Unterseiten um die Höhe der Leiste zu kürzen.

Der z-Index. Deine Diagnose war genau richtig: es zieht die z-Position aus CSS-Allgemein. Sobald ein Widget dort einen z-Index bekommt, wird sein Rahmen ein eigener Stacking Context, und die 1000 des Klappmenüs zählt nur noch innerhalb des Widgets — gegen einen Toggle-Button mit z=51 daneben hatte sie keine Chance. Das Widget wird jetzt angehoben, solange das Menü offen ist, und fällt beim Schließen auf seinen eingestellten Wert zurück.
Dein GitHub-Issue zum Icon-Dialog ist ebenfalls erledigt: das Raster hörte nach 400 Icons auf, ohne Möglichkeit weiterzukommen — es lädt jetzt beim Scrollen nach.

Alles drei liegt im master und kommt mit dem nächsten Release. Wer bis dahin weiter testet: Fehler bitte weiter melden, gern als Issue mit Screenshot — die Screenshots in Issue #5 haben den z-Index-Fall in wenigen Minuten klärbar gemacht.

[Lars Orlik]

Hallo, erstmal Dank für die hervorragende Arbeit. Bin gerade dabei meine alten Balkendiagramme zu erneuern. Mir ist aufgefallen,dass im BarChart gegenüber der Vis-1 das Layout für die Datensätze fehlt. Im alten BarChart gab es für jeden Datensatz ein eigenes Layout.

[typhos]

Danke für die Meldung! Dahinter steckten gleich zwei Fehler.

Layout je Datensatz: Die Gruppe gab es im Port, sie wurde aber nur einmal angezeigt statt je Datensatz — gestalten ließ sich damit effektiv nur der erste. Ursache ist eine Eigenheit von VIS 2: es klappt nur die erste indizierte Attributgruppe eines Widgets auf, jede weitere wird einmalig gerendert. Beim Balkendiagramm traf das Farbe, Beschriftung, Werttext und Tooltip, beim Kreisdiagramm dasselbe, und beim Linienverlaufsdiagramm zusätzlich die Linien- und die y-Achsen-Optionen je Serie.

Jeder Datensatz hat jetzt wieder eine eigene Gruppe, die seine Objekt-ID und alle seine Optionen enthält. Gegenüber VIS 1 liegen Objekt-ID und Layout damit in einer Gruppe statt in zweien - inhaltlich fehlt nichts, und gespeicherte Diagramme behalten alle Werte, die Optionsnamen sind unverändert.

Anzahl der Datensätze: Beim Nachstellen fiel auf, dass die Option gar nicht die Anzahl war - VIS 1 speicherte dort den letzten Index und zählte 0 bis n, „3" ergab also vier Datensätze. Der Port hatte das mitgeerbt. Das ist jetzt geradegezogen: 3 heißt drei, mit den Gruppen Datensatz [0] bis [2]. Gleiches gilt ab sofort für alle Anzahl-Optionen des Adapters: Menüeinträge der Top App Bar, Tabellenspalten, Auswahlwerte, Objekt-IDs der Multi-State-Buttons, Ansichten von Advanced View in Widget und der responsiven Layouts.

Wichtig beim Übernehmen alter Widgets: wer den Wert aus einem VIS-1-Diagramm übernimmt, sollte ihn einmal prüfen — sonst fehlt der letzte Datensatz. Eine automatische Umrechnung gibt es bewusst nicht, die würde bei jedem falsch liegen, der den Wert nach der neuen Bedeutung eingetragen hat.

Noch ein Fund am Rande: Select und Autocomplete hatten ihre indizierte Eintragsgruppe komplett verloren. „Anzahl Auswahlwerte" ließ sich hochstellen, aber die Einträge hatten im Editor keinen Platz zum Ausfüllen. Auch repariert.

Alles liegt im master und kommt mit dem nächsten Release.

[Dragon]

Adapter installiert. Fand die Widgets nicht so gut, zu kompliziert. Den Adapter deinstalliert.
Kurz darauf erneute Installation. Nun taucht er im vis2 Adapter auf der linken Seite nicht auf. Schade selbst die zweite Chance will der Adapter nicht... 😂

[Dragon]

doppel Post

[Dragon]

@sigi234 Welches widget ist denn Das wp mehrere Werte drin stehen (Systeminformationen) Ich finde nur eines in dem ich nur einen Wert angeben kann, aber nicht mehrere.

[Dragon]

gemäß maßnahme AEG (Ausschalten einschalten geht) Den Adapter komplett gelöscht und über die Katze neu installiert, dann ist er auch wieder in der Vis2. Nun noch verstehn wie das ganze funktioniert...

[sigi234]

@Dragon sagte:

@sigi234 Welches widget ist denn Das wp mehrere Werte drin stehen (Systeminformationen) Ich finde nur eines in dem ich nur einen Wert angeben kann, aber nicht mehrere.

Das ist kein Widget kommt vom Admin Adapter.

[Dragon]

@sigi234
Die INfos kommen vom Adapter. Die visaulisierung ist doch ein widget. Ich möchte im widget temperatur, luftfeuchtigkeit und helligkeit anzeigen lassen. Über das List widget schaffe ich aber nur den linken teil. DIe Werte tauchen nicht auf.

[Dragon]

Im Endeffekt suche ein Value/Wert Widget aber mit mehr als einem Eintrag. Das List Widget hat aber keine Funktion weil es keinen Wert anzeigt, allerdings wird auch im Value Widget kein Wert angezeigt.

[Cyberraph]

Ich gehe aktuell alle einzelnen Widgets durch und sehe mir an,
was ich mit denen bewerkstelligen kann.
Teils verstehe ich auch viel nicht aus eigener Unerfahrenheit.
Aber ich versuche mir etwas Überblick zu verschaffen zusammen mit:
-> Doku von typhos für vorliegenden VIS-2 Material Adapter
---> siehe: https://github.com/typhosj/ioBroker.vis2-materialdesign/blob/master/doc/de/README.md und dort als Übersicht der vollständige Widget-Katalog
-> Parallel frag ich Chat-GPT, ob ich so auf Gedankenanstöße komme
-> Und Doku des VIS-1 Material Adapters schaue ich auch parallel, die nochmal etwas umfangreicher ist und zumindest im Ansatz Ähnlichkeiten sicherlich hat in der Eingabe. Zum erörtern, ob ggf. etwas Richtiges raus kommt bei meinen Eingaben
---> siehe: https://github.com/Scrounger/ioBroker.vis-materialdesign#multi-state-2

Vieles kommt mir aber teilweise komisch vor und ich erstelle aktuell ein paar Issues, wenn mir was auffällt.
Ist ja erst BETA und da muss noch einiges gefixed werden auf alle Fälle.

Aber das Grundgerüst finde ich schon extrem spannend.

---

@dragon
Ginge das nicht ggf. wie du schon sagst mit dem "Table" Widget.
-> https://github.com/typhosj/ioBroker.vis2-materialdesign/blob/master/doc/de/widgets/table.md

Oder vll. schafft man sowas auch mit dem "List" Widget.
-> https://github.com/typhosj/ioBroker.vis2-materialdesign/blob/master/doc/de/widgets/list.md

[Dragon]

@Cyberraph siehe mein Post oben...
Das Table Widget klappt nicht, weil es ja keine Tabelle ist, sondern mehrere Datenpunkte die angezeigt werden sollen.

[Cyberraph]

@dragon
Soweit ich das verstehe dürfte das ggf. ein selbst gebasteltes HTML sein.
Also ein HTML Widget wo man seinen HTML-Code reingeschreiben hat, der die Darstellung samt Objekten einfügt wie gewünscht.

Hab das mit dem Material-Design VIS-2 Widget von Bluefox verglichen.
Dürfte sowas sein.

Und bei dem vorliegenden Adapter gibt es ja genauso ein HTML Widget.

Spoiler

Spoiler

Mit beispielhaft folgendem HTML darin:

Spoiler

Admin Memory: <span style="color: #73b9ff">{system.adapter.admin.0.memHeapTotal.val}MB</span> <br>
Admin Memory: <span style="color: #73b9ff">{system.adapter.admin.0.memHeapTotal.val}MB</span> <br>
Admin Memory: <span style="color: #73b9ff">{system.adapter.admin.0.memHeapTotal.val}MB</span> <br>
Admin Memory: <span style="color: #73b9ff">{system.adapter.admin.0.memHeapTotal.val}MB</span> <br>
Admin Memory: <span style="color: #73b9ff">{system.adapter.admin.0.memHeapTotal.val}MB</span>

Soweit ich verstehe, gab es beim Materials Adapter von Bluefox einen Wizard (Button bei den Widgets),
der dann per Kategorien (Räume und Funktionen) automatisiert solche Kacheln erstellt hat.

[sigi234]

@Dragon sagte:

@sigi234
Die INfos kommen vom Adapter. Die visaulisierung ist doch ein widget. Ich möchte im widget temperatur, luftfeuchtigkeit und helligkeit anzeigen lassen. Über das List widget schaffe ich aber nur den linken teil. DIe Werte tauchen nicht auf.

Ach so , verstanden.

So was:

[Dragon]

@sigi234 genau das. Was für ein widget ist das?

[sigi234]

@Dragon sagte:

@sigi234 genau das. Was für ein widget ist das?

Steht unter Attribute