Material Design Widgets: List Widget
-
@dos1973
Gibts auch sehr viele Videos dazu:
https://www.youtube.com/results?search_query=inspect+css -
Hallo, ich taste mich gerade an die Material Design Widgets heran. Wirklich klasse, was alles so out of the box geht! Tolle Arbeit.
Mit dem List Widget komme ich allerdings nicht klar. Leider habe ich in der Demo Umgebung auch kein Beispiel gefunden
Ich habe einen simplen Fenstersensor, der einen Booleschen Wert liefert (true/false).
Allerdings bekomme ich diesen nicht dargestellt (kein Schalter sichtbar).
Beispiel:
Ich bin mit der Fülle der Konfigurationseinstellungen etwas überfordert bei diesem Widget.
Folgendes habe ich eingestellt:
Ich bin für jeden Tipp dankbar.
-
@Tirador sagte in Material Design Widgets: List Widget:
Leider habe ich in der Demo Umgebung auch kein Beispiel gefunden
@darkiop hat hier ein tolles VIS, und dort Beispiele der Implementierung des List-Widgets: https://forum.iobroker.net/post/374015
-
@Mic Besten Dank. Das Beispiel von darkiop hat geholfen.
Es lag an den folgenden Eigenschaften:
Unter dem Menüpunkt "Layout der Liste", ist "Schalter" einzustellen.
Bei mir möchte ich den Schalter nur als read Only verwenden (Ausgabe Fenstersensor):
Damit die Icons auch richtig funktionieren sind Höhen zu vergeben:
Eingeschaft eines Elements:
Und das finale Ergebnis:
@Mic: Ich habe deine Idee zur Umfärbung der Schalter direkt übernommen.
Sofern man den Hintergrund des Switches in der normalen Hintergrundfarbe setzt, sieht es aus wie eine "Status"-Liste und keine "Schalter"-Liste. Ich habe daher auch für geöffnete Fenster den Hintergrund weiss gefärbt. Besten Dank..mdc-switch.mdc-switch { --materialdesign-color-switch-off:green; --materialdesign-color-switch-track:#fff; } .mdc-switch.mdc-switch--checked { --materialdesign-color-switch-on:red; --materialdesign-color-switch-track:#fff; } -
@Scrounger
Kannst du in das Widget auch die "progressBar" aufnehmen?
Verwende das Widget z.Zt. als read only für Fensterkontakte. Wird mit Switch für ON / OFF wunderbar dargestellt.
Würde gerne auch Ventilstände (0-100%) in dem Widget umsetzen. -
@bommel_030
Bau Dir das aus ner List und den progress bar selbst zusammen.
Sorry aber die integration ist echt aufwendig und bietet keinen Mehrwert im Vergleich zum selbst zusammen bauen, weil man hier nichts steuern muss.
Mach ich auch so -> List Widget vom Typ Text und die Progressbar daneben gesetzt.
-
@Scrounger said in [Material Design Widgets: List Widget]
Wie kann man Werte auf der rechten Seite in der Liste am besten formatieren? Ich möchte z.B. Die aktuelle CPU Last darstellen und verwende dazu einfach die geschweifte Klammer mit dem Objekt State {Object}. Das bringt dann aber die unformatierte Zahl zurück mit unzähligen Nachkommastellen. Wie hast du das gelöst?
Besten Dank
-
@Chris-Tailor sagte in Material Design Widgets: List Widget:
Wie kann man Werte auf der rechten Seite in der Liste am besten formatieren? Ich möchte z.B. Die aktuelle CPU Last darstellen und verwende dazu einfach die geschweifte Klammer mit dem Objekt State {Object}. Das bringt dann aber die unformatierte Zahl zurück mit unzähligen Nachkommastellen. Wie hast du das gelöst?
Besten Dank
ich nutze dafür meinen LinkedDevices Adapter.
Kann man aber auch per bindings realisieren -
Bin gerade auf der Suche nach dem JSON-String für das normale List-Widget (nicht Icon). In der Doku und Online Beispielen finde ich das nicht. Hat das gerade jemand zur Hand? Wenn nicht schau ich mir Morgen mal den entsprechenden Code an.
-
@darkiop
Hab ich noch nicht dokumentiert. Alle möglichen properties findest du hier:
https://github.com/Scrounger/ioBroker.vis-materialdesign/blob/38ce42369c61bcd0f4481695cbbc7f420f1fc731/widgets/materialdesign/js/widgets/materialdesign.list.js#L294 -
@Scrounger Danke.
[ { "text": "testtext1", "subText": "subtext1", "rightText": "rightext1", "rightSubText": "rightsubtext1", "image": "death-star", "imageColor": "#44739e", "imageActive": "", "imageActiveColor": "#44739e", "header": "", "showDivider": "true", "objectId": "", "buttonStateValue": "", "buttonNavView": "", "buttonLink": "" }, { "text": "testtext2", "subText": "subtext2", "rightText": "rightext2", "rightSubText": "rightsubtext2", "image": "death-star", "imageColor": "#44739e", "imageActive": "", "imageActiveColor": "#44739e", "header": "", "showDivider": "true", "objectId": "", "buttonStateValue": "", "buttonNavView": "", "buttonLink": "" } ] -
Wenn man im list-widget über das JSON-Objekt einen Schalter / eine Checkbox darstellt, wird der Zustand nur Korrekt im EDIT angezeigt. Beim rendern im Browser wird der Status nicht angezeigt (siehe Timer 1 auf den Screens).
[ { "text": "Timer 1 - {robonect.0.timer.0.start_time} - {robonect.0.timer.0.end_time}", "subText": "{a:robonect.0.timer.0.weekdays.monday;a=='true'?'Mo ':''}{a:robonect.0.timer.0.weekdays.tuesday;a=='true'?'Di ':''}{a:robonect.0.timer.0.weekdays.wednesday;a=='true'?'Mi ':''}{a:robonect.0.timer.0.weekdays.thursday;a=='true'?'Do ':''}{a:robonect.0.timer.0.weekdays.friday;a=='true'?'Fr ':''}{a:robonect.0.timer.0.weekdays.saturday;a=='true'?'Sa ':''}{a:robonect.0.timer.0.weekdays.sunday;a=='true'?'So ':''}", "rightText": "", "rightSubText": "", "image": "timer", "imageColor": "#fff", "imageActive": "", "imageActiveColor": "#fff", "header": "", "showDivider": "", "objectId": "robonect.0.timer.0.enabled", "buttonStateValue": "", "buttonNavView": "", "buttonLink": "" }, { "text": "Timer 2 - {robonect.0.timer.0.start_time} - {robonect.0.timer.0.end_time}", "subText": "{a:robonect.0.timer.1.weekdays.monday;a=='true'?'Mo ':''}{a:robonect.0.timer.1.weekdays.tuesday;a=='true'?'Di ':''}{a:robonect.0.timer.1.weekdays.wednesday;a=='true'?'Mi ':''}{a:robonect.0.timer.1.weekdays.thursday;a=='true'?'Do ':''}{a:robonect.0.timer.1.weekdays.friday;a=='true'?'Fr ':''}{a:robonect.0.timer.1.weekdays.saturday;a=='true'?'Sa ':''}{a:robonect.0.timer.1.weekdays.sunday;a=='true'?'So ':''}", "rightText": "", "rightSubText": "", "image": "timer", "imageColor": "#fff", "imageActive": "", "imageActiveColor": "#fff", "header": "", "showDivider": "", "objectId": "robonect.0.timer.1.enabled", "buttonStateValue": "", "buttonNavView": "", "buttonLink": "" } ] -
@darkiop sagte in Material Design Widgets: List Widget:
Wenn man im list-widget über das JSON-Objekt einen Schalter / eine Checkbox darstellt, wird der Zustand nur Korrekt im EDIT angezeigt. Beim rendern im Browser wird der Status nicht angezeigt (siehe Timer 1 auf den Screens).
Ich kann das nicht reproduzieren.
Was steht im log der console?Art der Liste ist korrekt gesetzt?
Mach mal die ganzen Bindings raus und schau ob es dann geht.
Versuch die Daten mal ohne verwendung des json direkt im widget einzugeben.
-
@Scrounger Gibt es eine Möglichkeit die Rahmenfarbe der Checkboxen anzupassen? Schwarz geht leider aufgrund meines Hintergrundes unter und man erkennt die checkbox nicht.
-
@0018 sagte in Material Design Widgets: List Widget:
@Scrounger Gibt es eine Möglichkeit die Rahmenfarbe der Checkboxen anzupassen? Schwarz geht leider aufgrund meines Hintergrundes unter und man erkennt die checkbox nicht.
Geht nur per css klasse überschreiben.
-
@Scrounger sagte in Material Design Widgets: List Widget:
Geht nur per css klasse überschreiben.
Wie muss der Code aussehen? Habe leider keine Ahnung wie das mir dem css funktioniert, sorry.
Kann man die Rahmenfarbe mit in das nächste Release aufnehmen? -
@Scrounger sagte in Material Design Widgets: List Widget:
Ich kann das nicht reproduzieren.
Was steht im log der console?Sorry hat leider etwas gedauert. Im Log steht leider nichts relevantes.
Art der Liste ist korrekt gesetzt?
checkbox_readonly und checkbox
Mach mal die ganzen Bindings raus und schau ob es dann geht.
Versuch die Daten mal ohne verwendung des json direkt im widget einzugeben.Bindins entfernt, keine Besserung. Aber ... das ganz wird jetzt etwas seltsam ... sobald ich ein weiteres Widget einfüge und die DPs in diesem direkt eingebe, funktioniert es bei diesem Widget und bei dem mit JSON-Input ...
-
@darkiop
Perfekt, danke.
Dann weiß ich jetzt woran es liegt. Problem ist, das wenn DPs nur per json übergeben werden, dann werden diese nicht automatisch regstriert, d.h. runtime weiß nicht das er auf diese hören soll. Gleiches Problem hatte ich bereits beim IconList Widget und dort gelöst.Da ich die ganzen Funktionen vom IconList Widget eh auf das List Widget übertragen werden, werd ich das in diesem Zuge fixen. Dauert aber sicher nen bissle, weil das nicht ganz so trivial ist
-
@Scrounger Perfekt
Bei der JSON Option wäre es noch klasse wenn man grundsätzlich die Wahl hätte zwischen DP oder Textfeld im EDIT, denn nicht alle JSON werden generiert - aber ein JSON ist schneller angepasst/erstellt als die Optionen im EDIT durchzuklicken -
Moin zusammen!
Vielleicht eine Anfängerfrage, und vielleicht schon 26 mal beantwortet - sagt, wenn ich nerve. Trotzdem:
Ich habe ein Material-Design-List-Widget in VIS eingefügt. Das soll testweise mal drei Bool-Werte anzeigen. Folgendes JSON habe ich eingebaut:
[ { "background": "red", "text": "Feiertag", "subText": "", "image": "", "imageColor": "#ec0909", "imageActive": "", "imageActiveColor": "#5ad902", "buttonBackgroundColor": "", "buttonBackgroundActiveColor": "", "listType": "", "objectId": "feiertage.0.today.boolean", "buttonStateValue": "", "buttonNavView": "", "buttonLink": "", "buttonToggleValueTrue": "", "buttonToggleValueFalse": "", "valueAppendix": "", "showValueLabel": "true", "statusBarColor": "green", "lockEnabled": "false" }, { "background": "red", "text": "Ferien", "subText": "", "image": "", "imageColor": "#ec0909", "imageActive": "", "imageActiveColor": "#5ad902", "buttonBackgroundColor": "", "buttonBackgroundActiveColor": "", "listType": "", "objectId": "schoolfree.0.info.today", "buttonStateValue": "", "buttonNavView": "", "buttonLink": "", "buttonToggleValueTrue": "", "buttonToggleValueFalse": "", "valueAppendix": "", "showValueLabel": "true", "statusBarColor": "green", "lockEnabled": "false" }, { "background": "green", "text": "Freier Tag", "subText": "", "image": "", "imageColor": "#44739e", "imageActive": "", "imageActiveColor": "#44739e", "buttonBackgroundColor": "", "buttonBackgroundActiveColor": "#a0f628", "listType": "", "objectId": "0_userdata.0.freier_Tag", "buttonStateValue": "", "buttonNavView": "", "buttonLink": "", "buttonToggleValueTrue": "", "buttonToggleValueFalse": "", "valueAppendix": "", "showValueLabel": "false", "statusBarColor": "", "lockEnabled": "false" } ]"Art der Liste" steht auf
Checkbox.Im Prinzip funktioniert das auch, es zeigt korrekte Häkchen an, und die Werte lassen sich ggf. auch ändern. Das funktioniert aber nur, wenn ich auf der selben View drei Felder vom Typ String einfüge, die den jeweilgen Wert anzeigen. Lösche ich diese String-Felder, funktioniert das List-Widget nicht mehr.
Soll das so, muss das so? Oder mache ich was falsch?
Viele Grüße von
Sven
