Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[Scrounger]

@dos1973 sagte in Test Adapter Material Design Widgets v0.2.x:

@Scrounger

Hi, kurze Frage, gibt/ gäbe es die Möglichkeit, dass Du noch einen Farbwert zur Verfügung stellt, wenn der Switch inaktiv ist.

Bei dunklen Screens wäre das Klasse.

Danke Dir

Hab's in den aktuellen master Branch eingebaut.

[B4n4n3]

Hallo @Scrounger

du hast mit dem Update 0.2.0 " colorSchemes for Charts" hinzugefügt.
Hierzu hab ich eine Frage: Kann ich die Farbangaben wie "material.brown" irgendwie verwenden?
Kann man die in CSS eintragen und das Farbkonzept wird angewendet?

Falls es bereits einen Thread dazu gab, wäre ein Link super.

Vielen Dank für die Hilfe.

Grüße B4n4n3

[davimas]

Hey,

Gerade ein neues Projekt angelegt und die Widgets rübergezogen. Im Editor ist alles da - wenn ich dann per VIS App darauf zugreife dann werden die Widgets nicht angezeigt.

Normale Standard Widgets schon. Also ist dieser Adapter inkompatibel mit der ioBroker App?

[Meistertr]

@davimas die widget müssen noch in die app integriert werden

[Scrounger]

@B4n4n3 sagte in Test Adapter Material Design Widgets v0.2.x:

Hallo @Scrounger

du hast mit dem Update 0.2.0 " colorSchemes for Charts" hinzugefügt.
...
Kann man die in CSS eintragen und das Farbkonzept wird angewendet?

Die ColorSchemes sind nur bei den Charts einsetzbar, kann man im Editor auswählen.
Per CSS verwenden geht nicht.

[davimas]

@Meistertr
Vielen Dank für deine Antwort.

[Zipkart]

@Scrounger sagte in Test Adapter Material Design Widgets v0.2.x:

@Zipkart
Hast du einen Toggle Button oder einen State Button verwendet?
Von welchem Typ ist der Datenpunkt?

Edit:
Mach mal nen Export von dem Widget und poste die raw daten des zugewiesenen datenpunktes.

Sorry dass ich mich jetzt erst melde, aber ich musst mal wieder ein Backup einspielen im Livesystem.

Hier ist schon mal das Widget

Spoiler

[{"tpl":"tplVis-materialdesign-Button-Toggle-vertical","data":{"oid":"hue.0.Philips_hue.Kugel_SZ.on","g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","buttonStyle":"unelevated","toggleType":"boolean","stateIfNotTrueValue":"on","vibrateOnMobilDevices":"50","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"colorBgFalse":"rgb(70, 70, 70)","colorBgTrue":"#CDDC39","imageTrue":"/icons-ultimate-png/983.png","image":"/icons-ultimate-png/981.png","valueOff":"","valueOn":"","labelFalse":"","labelTrue":"","colorPress":"green"},"style":{"left":"5px","top":"410px","width":"275px","height":"130px","text-align":"center"},"widgetSet":"materialdesign"}]

und hier der Raw des Datenpunktes

Spoiler

{
"from": "system.adapter.hue.0",
"user": "system.user.admin",
"ts": 1562209210940,
"common": {
"name": "Philips_hue.Kugel_SZ.on",
"type": "boolean",
"role": "switch",
"read": true,
"write": true
},
"native": {
"id": "26"
},
"acl": {
"object": 1636,
"owner": "system.user.admin",
"ownerGroup": "system.group.administrator",
"state": 1636
},
"_id": "hue.0.Philips_hue.Kugel_SZ.on",
"type": "state"
}

Vielleicht kannst du ja helfen

[Oli]

Hallo zusammen,

ich habe ein paar Fragen zum Line History Chart.

1. ist es Möglich nur das Diagrammfeld einzufärben wie beim angefügten Diagramm?
2. Wie kann ich mir zu der Uhrzeit noch das Datum in der X-Achse anzeigen lassen?
3. Wie kann ich die Messeinheit in der Y-Achse anzeigen lassen?

[Scrounger]

@Oli sagte in Test Adapter Material Design Widgets v0.2.x:

1. ist es Möglich nur das Diagrammfeld einzufärben wie beim angefügten Diagramm?

Nee das geht nicht, kann man aber sicher leicht einbauen - ich schau mal. Am besten wäre wenn du dazu ein Issue auf git anlegest, damit wir es nicht vergessen.

2. Wie kann ich mir zu der Uhrzeit noch das Datum in der X-Achse anzeigen lassen?

Du kannst über die Option 'time formats of x-axis' im Editor ganz individuell dein format einstellen. Ist in der Doku entsprechend beschrieben:
https://github.com/Scrounger/ioBroker.vis-materialdesign#line-history-chart

3. Wie kann ich die Messeinheit in der Y-Achse anzeigen lassen?

Ist noch nicht implementiert. Hier das gleiche wie oben, bitte ein issue auf github erstellen.

[Oli]

@Scrounger

alles klar, mache ich

[Oli]

@Scrounger

sorry, aber ich habe mir deinen Link zig mal durchgelesen, aber anscheinend reicht mein Horizont dafür nicht aus. Wäre nett wenn du mir da etwas unter die Arme greifen könntest.

Was müsste ich in der Option 'time formats of x-axis' eingeben, damit ich zur Uhrzeit zusätzlich noch das Datum angezeigt bekomme?

Beim testen deines 'List Value' Wigets ist mir aufgefallen, dass man die Höhe nicht ändern kann, ist das nur bei mir so?

Ich habe leider auch keine Einstellung gefunden, wo ich die Schriftfarbe ändern kann.

Und noch eine letzte Frage hätte och, gibt es bei deinem Table Wigets ein Möglichkeit des Zeilenumbruchs, wenn der Text zu lang ist?

[sigi234]

@Oli sagte in Test Adapter Material Design Widgets v0.2.x:

Beim testen deines 'List Value' Wigets ist mir aufgefallen, dass man die Höhe nicht ändern kann, ist das nur bei mir so?

Layout des Listenelements

[Oli]

@sigi234

und wo finde ich das?

[sigi234]

@Oli sagte in Test Adapter Material Design Widgets v0.2.x:

@sigi234

und wo finde ich das?

Warte, das ist das Widget List

Du meinst ja Value Select

[Oli]

@sigi234

ich glaube wir sprechen von unterschiedlichen Widgets, ich meine das hier:

[sigi234]

@Oli sagte in Test Adapter Material Design Widgets v0.2.x:

@sigi234

ich glaube wir sprechen von unterschiedlichen Widgets, ich meine das hier:

Siehe Beitrag unten, 2.Screenshot

[darkiop]

@Scrounger Kurze Frage, planst du aktuell auch ein 'input' für die Texteingabe?

Weiterhin alle Daumen hoch für die Arbeit hier!

Und noch eine Frage:

Könntest du die Schriftfarbe / Schriftart bei den Selects noch über VIS Edit Konfigurierbar machen? Aktuell bin ich da immer den Umweg über CSS gegangen.

[Scrounger]

@Oli sagte in Test Adapter Material Design Widgets v0.2.x:

@Scrounger

sorry, aber ich habe mir deinen Link zig mal durchgelesen, aber anscheinend reicht mein Horizont dafür nicht aus. Wäre nett wenn du mir da etwas unter die Arme greifen könntest.

folgendes ist ja standardmäßig eingestellt:

            {
                "millisecond":    "H:mm:ss.SSS",
                "second":         "H:mm:ss",
                "minute":         "H:mm",
                "hour":           "H",
                "day":            "MMM D",
                "week":           "ll",
                "month":          "MMM YYYY",
                "quarter":        "[Q]Q - YYYY",
                "year":           "YYYY"
            }

Wnn du jetzt z.B. als Timeinterval 1 Stunde festgelegt hast, dann zieht er die Fomatierung von 'minute' an. Du musst dann z.B. um folgendes erweitern H:mm DD.MM.YYYY. Mögliche Formatierungen sind hier beschrieben: https://momentjs.com/docs/#/displaying/format/
Einfach mal bissle rum spielen und ausprobieren, dann findet man meistens raus wie es funktioniert.

Und noch eine letzte Frage hätte och, gibt es bei deinem Table Wigets ein Möglichkeit des Zeilenumbruchs, wenn der Text zu lang ist?

auf die schnelle, bei 'vorangesteller Text' folgendes eintragen <span style="display: inline-block; word-wrap:break-word;"> und bei 'nachgestellter Text' folgendes eintragen </span> oder so ähnlich.

@darkiop sagte in Test Adapter Material Design Widgets v0.2.x:

@Scrounger Kurze Frage, planst du aktuell auch ein 'input' für die Texteingabe?

Ja, da es bestandteil der mdc lib ist. Allerdings ganz niedrige prio, da ich in meiner VIS keine input felder benötige. Am besten erstelltst dafür ein issue bei github, damit wir es nicht vergessen.

Könntest du die Schriftfarbe / Schriftart bei den Selects noch über VIS Edit Konfigurierbar machen? Aktuell bin ich da immer den Umweg über CSS gegangen.

Ja kann ich einbauen. Hierfür bitte auch ein issue auf github erstellen, danke!

[Oli]

@Scrounger said in Test Adapter Material Design Widgets v0.2.x:

danke, dass mit dem Datumsformat hab ich jetzt begriffen, aber das mit dem Zeilenumbruch klappt leider noch nicht.

[darkiop]

@Scrounger sagte in Test Adapter Material Design Widgets v0.2.x:

Hierfür bitte auch ein issue auf github erstellen, danke!

Guten Abend, sind beide erstellt.

Rein aus Interesse, würdest du als Entwickler der Widgets mal einen Screen deiner VIS posten?