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

[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

[typhos]

@Dragon Die Objekt-ID einer Listenzeile steuert nur den Zustand der Zeile - also den Switch, die Checkbox oder den Button. Sie schreibt keinen Wert in den Text, das ist in VIS 1 im Material-Design-Widget genauso.

Werte kommen über die Bindung von VIS 2: eine Objekt-ID in geschweiften Klammern in einem Textfeld wird zur Laufzeit durch den Wert des States ersetzt. Das funktioniert in jedem Text- und HTML-Feld der Widgets, also auch in Beschriftung, Unterzeile und rechter Beschriftung jeder Listenzeile.

Für deinen Fall also die Liste, Listentyp Text, Anzahl der Einträge 3, und je Zeile:

Beschriftung:          Temperatur
rechte Beschriftung:   {0_userdata.0.temperatur}°C

Beschriftung:          Luftfeuchte
rechte Beschriftung:   {0_userdata.0.feuchte}%

Beschriftung:          Helligkeit
rechte Beschriftung:   {0_userdata.0.helligkeit} lx

Damit stehen mehrere Werte untereinander in einem Widget, statt eine Wertanzeige je Datenpunkt. Icon je Zeile und Trennlinien gibt es in derselben Gruppe dazu.

Beim Formatieren (Nachkommastellen, Umrechnung, Bedingungen) hilft der Bindungseditor von VIS 2: das Ketten-Symbol neben dem Feldnamen schaltet das Feld darauf um.

Die Tabelle passt hier nicht, weil sie ihre Zeilen aus einem JSON-State liest - die wäre erst dann richtig, wenn die Werte schon als JSON-Array vorliegen (z.B. aus einem Skript).

Dass das nirgends stand, war eine Lücke in meiner Dokumentation, danke für den Hinweis - Abschnitt „Werte in Texten anzeigen" kommt mit dem nächsten Stand ins Handbuch, verlinkt aus Liste, Tabelle und Wertanzeige.

[Oli]

@typhos
erstmal danke, dass du den Adapter weiter pflegst. Ich teste gerade das Kalender-Widget und dabei sind mir folgende Dinge aufgefallen:

1. Die Schriftfarbe der vergangenen Tage lässt sich nicht ändern
2. Bei Ganz- und Mehrtagesterminen wird immer ein Tag mehr angezeigt
3. Bei Terminen mit hinterlegter Uhrzeit wurde beim alten Adapter im Monatskalender die Startzeit angezeigt, dass macht er jetzt nicht mehr
4. Beim Wochenkalender wäre schön, wenn man die ganze Spalte der Uhrzeit einfärben könnte und oben vor dem 1. Tag die KW anzeigen könnte
5. Es wäre schön, wenn das Widget mit dem JSON aus dem ICAL Adapter direkt arbeiten könnte, oder zumindest die Begriffe davon berücksichtigen würde.
6. Es wäre cool, wenn beim Tages und Wochenkalender eine Markierung bei der aktuellen Uhrzeit wäre

Bei Rückfragen gerne melden
Gruß
Oliver

[typhos]

@Oli Danke fürs Testen - alle sechs Punkte, also auch deine Verbesserungsvorschläge, habe ich umgesetzt und kommen mit dem nächsten Stand.

1. Schriftfarbe der vergangenen Tage: Die Option stand im Editor, wurde vom Widget aber nirgends gelesen - beim Port ist sie leider liegengeblieben. Sie färbt jetzt wieder die Tageszahlen im Monatsraster sowie Wochentag und Tageszahl im Kopf der Wochen- und Tagesansicht. Leer gelassen bleibt alles wie bisher.

2. Ganz- und Mehrtagestermine einen Tag zu lang: Das Ende eines Ganztagestermins ist in iCalendar exklusiv. Kam es als reines Datum, hat das Widget das schon richtig gerechnet. Kam es als Zeitstempel auf Mitternacht (und genau so schreibt es der
   ICAL-Adapter) wurde daraus ein zusätzlicher Tag. Ein Ende um 00:00 beendet den Termin jetzt immer am Vortag.

3. Startzeit im Monatskalender: Die fehlte im Port. Sie steht wieder fett vor dem Namen und folgt der Zeitformat-Einstellung (12 Uhr, 12:30, 12:30 PM).

4. Wochenkalender: Die KW steht jetzt oben links über der Zeitachse, also vor dem ersten Tag, gesteuert von der vorhandenen Option „Kalenderwoche anzeigen".
   Für die Uhrzeit-Spalte gibt es zwei Farben in der Zeitachsen-Gruppe:
   „Hintergrundfarbe" färbt die Spalte, „Hintergrundfarbe Kopfzeile" die Zelle darüber - beide zusammen ergeben die durchgehende Spalte. Das stand nirgends, es ist jetzt im Handbuch beschrieben.

5. ICAL-Adapter: ical.0.data.table kann nun direkt als Objekt-ID eingetragen werden. Das Widget liest die Feldnamen des Adapters (event, _date, _end, _allDay, _calColor) neben dem bisherigen Format aus Start/Ende/Name. Wichtig dabei: der ICAL-Adapter liefert UTC-Zeitstempel - die werden jetzt in Ortszeit umgerechnet, sonst landet ein Termin eine oder zwei Stunden daneben und nachts sogar am falschen Tag.

6. Aktuelle Uhrzeit: In Wochen- und Tagesansicht liegt eine Linie auf der aktuellen Zeit, minütlich nachgeführt. Zwei neue Optionen in der Zeitachsen-Gruppe schalten sie ab bzw. färben sie.

Wenn du magst, installier den aktuellen Stand von GitHub - Rückmeldung besonders zu Punkt 5 mit deinen echten Kalenderdaten wäre hilfreich, da unterscheiden sich die ICAL-Konfigurationen stark.

[Cyberraph]

@oli
Hab deine Punkte + zzgl. Punke, die mir aufgefallen sind in Github als Issue angelegt -> https://github.com/typhosj/ioBroker.vis2-materialdesign/issues/13

@typhos
Sorry, war gerade am Fertigwerden und hab grad gesehen, dass du hier schon geantwortet hast auf Oli`s Punkte.

Ich hoffe meine Issues sind nicht ganz vorbei am Thema und nicht gänzlich Userfehler meinerseits, dass es doch etwas hilft.

[typhos]

@Cyberraph Nein, gar nicht! Vielen Dank für deine Tests und vor allem die ausführlichen Fehlerbeschreibungen - das hilft wirklich ungemein.

[sigi234]

@typhos sagte:

ICAL-Adapter: ical.0.data.table kann nun direkt als Objekt-ID eingetragen werden.

Funktioniert bei mir leider nicht.

v 0.3.4

[typhos]

@sigi234 Huch, peinlich Ich hatte die Änderungen nur lokal committed und nicht auf GitHub gepushed... bitte bei Gelegenheit nochmal probieren.

[Cyberraph]

@typhos
Habe mir über Github die Version 0.3.4 nun installiert.

Womöglich mache ich es diesmal wirklich falsch, aber...
ich frage jetzt hier lieber kurz im Thread bevor ich ein nochmaliges issue aufmache.

issue #5 = Top App Bar
-> Durchlässigkeit freier Bereich scheint nicht (mehr?) zu funktionieren
-> dafür legt sich das Klappmenü jetzt aber über alles drüber was nun korrekt funktioniert

Ich habe zu Testzwecken ein ganz frischen Projekt gemacht.
1 x Navigationsseite -> darin 4 x Widgets (wie in den Bildern zu sehen)
2 x je eine Seite -> darin je 2 Widgets (wie in den Bildern zu sehen)

Mit genannten z-Werten unter Gruppe "CSS Allgemein" -> "z-index".
Habe verschiedene z-Werte versucht.
Jedoch kann ich in keinem Fall die Buttons aus Seite-1 und Seite 2 bedienen.
Nur den Button in der Navigations-View kann ich in allen 3 Ansichten bedienen.

Spoiler

Spoiler

Spoiler

Ich habe im Runtime auch ein Video dazu gemacht, dass man
auf Seite 1 und Seite 2 offensichtlich
die Buttons nicht bedienen und auch den Text des Value Widgets nicht markieren kann.

Siehe nachfolgenden OneDrive Link (15MB großes MP4 Video) = https://1drv.ms/v/c/b53555e67272bf17/IQAvcMLM7W5xQYVtSaC7BVAaAZO2ebBhzfF7sewfsdUAyUo?e=IQ4xIL

Nachfolgend ZIP-Ordner mit meinem gezeigten VIS-2 Projekt, falls es hilft.
Unter 0_userdata.0. . . . habe ich 3 schreibbare boolean = Schalter
für die Buttons in diesem VIS-2 Projekt erstellt zur Verknüpfung.
2026-08-16-Vis-Mobil.zip

Ich bin für jede Hilfe / Erklärung dankbar. :-)

[sigi234]

@typhos sagte:

@sigi234 Huch, peinlich Ich hatte die Änderungen nur lokal committed und nicht auf GitHub gepushed... bitte bei Gelegenheit nochmal probieren.

Geht jetzt.

[Bongo]

Ich werd verrückt. Das beste Material Widget überhaupt endlich für VIS-2.

Ich nutze Material Design Widgets für VIS seit Jahren und bin nicht auf ein anderes Widget Set von VIS-2 umgestiegen, weil es meiner Meinung nach nichts besseres gibt.

die Views müssen in VIS 2 neu aufgebaut werden.

Das ist allerdings Schade. Meine Vis ist so umfangreich, dass ich jetzt noch nicht weiß ob ich meine Vis in VIS-2 mit diesem Adapter neu aufbauen werde.

Aber ich werde diesen Thread weiter beobachten.

[Oli]

@typhos
das mit der Spaltenfarbe bei der Uhrzeit bekomme ich nicht hin, vielleicht habe ich aber auch etwas übersehen. Außerdem ist mir aufgefallen, dass die Termine verschoben angezeigt werden.

Hier mal ein Bild davon, hoffe es hilft

[Cyberraph]

@Oli
Meinst du eine individuelle Farbgebung der einzelnen Spalten, d.h. Montag, Dienstag, Mittwoch ... in der Wochenansicht ?

Ich denke typhos meinte mit der Korrektur, dass jetzt die Farben der linken Spalte = Zeitleiste funktionieren, d.h. dessen Hintergrund, Textfarben ect.

Ich hätte jetzt auch keine Option gesehen einzelne Spalten eine Hintergrundfarbe zu geben.

Mein Bild hierzu auch als Fingerdeut:

Spoiler

[Oli]

@Cyberraph
Ich meine die Spalte mit der Uhrzeit, die bei dir grün eingefärbt ist, wenn du dir mein Bild anschaust, ist nur die Uhrzeit eingefärbt und ich finde die Einstellung dafür nicht.