Test Adapter vis2-materialdesign V0.3.3
-
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-2Vieles 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.mdOder vll. schafft man sowas auch mit dem "List" Widget.
-> https://github.com/typhosj/ioBroker.vis2-materialdesign/blob/master/doc/de/widgets/list.md -
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-2Vieles 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.mdOder vll. schafft man sowas auch mit dem "List" Widget.
-> https://github.com/typhosj/ioBroker.vis2-materialdesign/blob/master/doc/de/widgets/list.md@Cyberraph siehe mein Post oben...
Das Table Widget klappt nicht, weil es ja keine Tabelle ist, sondern mehrere Datenpunkte die angezeigt werden sollen. -
@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.
Mit beispielhaft folgendem HTML darin:
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
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 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}°CBeschriftung: Luftfeuchte rechte Beschriftung: {0_userdata.0.feuchte}%Beschriftung: Helligkeit rechte Beschriftung: {0_userdata.0.helligkeit} lxDamit 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.
-
@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}°CBeschriftung: Luftfeuchte rechte Beschriftung: {0_userdata.0.feuchte}%Beschriftung: Helligkeit rechte Beschriftung: {0_userdata.0.helligkeit} lxDamit 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.
@typhos
erstmal danke, dass du den Adapter weiter pflegst. Ich teste gerade das Kalender-Widget und dabei sind mir folgende Dinge aufgefallen:- Die Schriftfarbe der vergangenen Tage lässt sich nicht ändern
- Bei Ganz- und Mehrtagesterminen wird immer ein Tag mehr angezeigt
- Bei Terminen mit hinterlegter Uhrzeit wurde beim alten Adapter im Monatskalender die Startzeit angezeigt, dass macht er jetzt nicht mehr
- 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
- 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.
- Es wäre cool, wenn beim Tages und Wochenkalender eine Markierung bei der aktuellen Uhrzeit wäre
Bei Rückfragen gerne melden
Gruß
Oliver -
@Oli Danke fürs Testen - alle sechs Punkte, also auch deine Verbesserungsvorschläge, habe ich umgesetzt und kommen mit dem nächsten Stand.
-
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.
-
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. -
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).
-
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. -
ICAL-Adapter:
ical.0.data.tablekann 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. -
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.
-
-
@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.
-
@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.
@Cyberraph Nein, gar nicht! Vielen Dank für deine Tests und vor allem die ausführlichen Fehlerbeschreibungen - das hilft wirklich ungemein.
-
@Oli Danke fürs Testen - alle sechs Punkte, also auch deine Verbesserungsvorschläge, habe ich umgesetzt und kommen mit dem nächsten Stand.
-
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.
-
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. -
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).
-
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. -
ICAL-Adapter:
ical.0.data.tablekann 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. -
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.
-
-
-
@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 funktioniertIch 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.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.zipIch bin für jede Hilfe / Erklärung dankbar. :-)
-
@sigi234 Huch, peinlich
Ich hatte die Änderungen nur lokal committed und nicht auf GitHub gepushed... bitte bei Gelegenheit nochmal probieren. -
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 Danke fürs Testen - alle sechs Punkte, also auch deine Verbesserungsvorschläge, habe ich umgesetzt und kommen mit dem nächsten Stand.
-
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.
-
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. -
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).
-
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. -
ICAL-Adapter:
ical.0.data.tablekann 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. -
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.
-
-
@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
@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:
-
@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:
-
@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.@Oli
Schau nochmal mein Bild an.
Das wäre dann unter Gruppe "Zeitachsenlayout" -> "Hintergrundfarbe" -> bei mir dieses grünliche mit Wert "rgba(80,156,65,1)EDIT:
Achso, bei dir ist nur der Text an sich im Hintergrund verfärbt.... hmh... komischEDIT:
Schau mal nacheinander im Vergleich meine Einstellungen an.
Ich habe jetzt als Schnelltest das Widget einfach reingezogen und nur die paar Farben verändert.
Ist bei dir was anderes zusätzlich ausgewählt, was vielleicht sich gegenseitig beeinflusst, oder ist etwas nicht aktiviert?EDIT:
Hast du auch heute die neue Version 0.3.4 über Github installiert?
Hey! Du scheinst an dieser Unterhaltung interessiert zu sein, hast aber noch kein Konto.
Hast du es satt, bei jedem Besuch durch die gleichen Beiträge zu scrollen? Wenn du dich für ein Konto anmeldest, kommst du immer genau dorthin zurück, wo du zuvor warst, und kannst dich über neue Antworten benachrichtigen lassen (entweder per E-Mail oder Push-Benachrichtigung). Du kannst auch Lesezeichen speichern und Beiträge positiv bewerten, um anderen Community-Mitgliedern deine Wertschätzung zu zeigen.
Mit deinem Input könnte dieser Beitrag noch besser werden 💗
Registrieren AnmeldenSupport us
326
Online33.0k
Benutzer83.6k
Themen1.3m
Beiträge