Test Adapter Material Design Widgets v0.2.x

[mctom]

Diese Material Design kann einem ja echt den Kopf zerbrechen. Man hat so viele Ideen.

Wenn man die Widgets installiert hat, stehen in den Widgets ja auch die Icons von https://materialdesignicons.com/ zur Verfügung.

Ich würde jetzt an verschiedenen Stellen nur eines dieser Icons anzeigen.

Hat jemand eine Idee wie ich das hinbekomme?

Okay beim schreiben habe ich eine Lösung gefunden:

Basic HTML widget mit folgendem Inhalt:

<span class="mdi mdi-lightbulb-on-outline" style="font-size: 40px"></span>

Ich fände es cool wenn es ein fertiges Widget geben würde wo man die Icons direkt auswählen könnte.

[Scrounger]

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

@Scrounger (Sorry, wenn das schon mal beantwortet wurde, aber ich habe nichts gefunden)

Was ist beste Entwicklungsprozess für Widgets? Kann am irgendwo im laufenden Vis die Dateien editieren? Wie machst Du das? Oder geht alles über git und einem (zeitintensiven) Update des Adapters?

Infos dazu findest du hier:
https://forum.iobroker.net/topic/671/widget-entwicklung/2
https://github.com/ioBroker/ioBroker.docs/tree/master/docs/en/dev
https://github.com/ioBroker/ioBroker.docs/blob/master/docs/en/dev/adaptervis.md

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

Ich fände es cool wenn es ein fertiges Widget geben würde wo man die Icons direkt auswählen könnte.

Steht schon auf der Todo Liste:
https://github.com/Scrounger/ioBroker.vis-materialdesign/issues/52

Scrounger created this issue in Scrounger/ioBroker.vis-materialdesign

closed Material Design Icon Widget #52

[cmorlok]

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

Infos dazu findest du hier:
https://forum.iobroker.net/topic/671/widget-entwicklung/2
https://github.com/ioBroker/ioBroker.docs/tree/master/docs/en/dev
https://github.com/ioBroker/ioBroker.docs/tree/master/docs/en/dev/adaptervis.md

Danke, die Doku habe ich auch schon gelesen. Was mich aber verwirrt ist dieser Absatz:

replace index.html and edit.html replace files in /opt/iobroker/iobroker-data/files/vis/index.html and edit.html with files from /opt/iobroker/node_modules/iobroker.vis/www/index.html.original and edit.html.original. Change the file /opt/iobroker/iobroker-data/files/vis/cache.manifest. No matter what, just one symbol to trigger the browser to load files anew. The files must be smaller than 200k. If you have got wrong files, so they are definitly largen than 400k.

Warum sollte ich das tun? Die .original-Dateien gibt es noch nicht einmal?! (In der deutschen Übersetzung ist das noch seltsamer formuliert).

Weshalb ich aber eigentlich frage ist Folgendes. Vis läd bei mir /opt/iobroker/iobroker-data/files/vis/widgets/materialdesign/js/widgets.min.js, das ja den Inhalt von vis/widgets/materialdesign/js/* enthält. Muss ich diese Datei jeweils neu erzeugen? Wenn ja, wie? Oder kann ich vis irgendwie dazu bringen, die Javascript-Quellen zu laden statt der minified?

[Scrounger]

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

Warum sollte ich das tun? Die .original-Dateien gibt es noch nicht einmal?! (In der deutschen Übersetzung ist das noch seltsamer formuliert).

Das kann ich dir im Detail auch nicht beantworten. Mit diesen Einstellung erreichst du, dass die Änderungen im Code direkt beim neuladen der VIS / Runtime übernommen werden.

Weshalb ich aber eigentlich frage ist Folgendes. Vis läd bei mir /opt/iobroker/iobroker-data/files/vis/widgets/materialdesign/js/widgets.min.js, das ja den Inhalt von vis/widgets/materialdesign/js/* enthält. Muss ich diese Datei jeweils neu erzeugen? Wenn ja, wie? Oder kann ich vis irgendwie dazu bringen, die Javascript-Quellen zu laden statt der minified?

Ja musst du. Ich verwende als IDE VS Code und das plugin Minify - das erzeugt nach Änderungen direkt die minified files.
Alternativ kannst du auch die js files verwenden, musst dann in der materialdesign.html entsprechend definieren. Achtung reihenfolge ist hier wichtig, helper dateien müssen zuerst imptiert werden.

[Scrounger]

IconList Widget ist fertig. Den Nutzern von lovelace könnte das bekannt vorkommen

Bei dem Widget können z.B. Funktionen Toggle, State, Navigation, Link jetzt für jedes einzelne Element eingestellt werden. Weiter könnt Ihr per json string das Widget komplett dynamisch per skript erzeugen.

Wer es testen möchte, aktuellen master ziehen -> v.0.2.57

Fragen zu Einstellungen des Widgets bitte hier posten!!!
https://forum.iobroker.net/topic/30331/material-design-widgets-iconlist-widget

[Scrounger]

@ub-privat
Hab wie besprochen jetzt noch was eingebaut. Bitte teste mal die aktuelle version von git -> v0.2.58.
Nach der installation ein iobroker update vis ausführen und danach einen neustart von iob.

[ub.privat]

@Scrounger

...leider keine Veränderung, alles leider wie vorher.
Bin deinen Anleitungen gefolgt, habe auch Widget NEU angelegt.
Im Editor ist alles ok, in der RUNTIME leider nur das nackte Widget ohne Inhalte.

[0018]

@Scrounger
Ich habe ein ähnliches Problem mit dem select-widget. ich möchte gerne einen Datenpunkt "number" ändern. Habe die Werteliste soweit ausgefüllt. Beim Start der Runtime ist der angezeigte Wert leer. Wähle ich einen Wert aus, bleibt dieser bestehen. Allerdings nur solange wie der Datenpumkt sich nicht aktualisiert. Kommt ein Refresh des Datenpunktes, ist die Runtime wieder leer. Ich habe zum Vergleich nochmal ein jpui - select ValueList daneben (links) gelegt, dort passt alles.

Der Datenpunkt sieht wie folgt aus:

Mein Widget dazu:

Spoiler

[{"tpl":"tplVis-materialdesign-Select","data":{"oid":"mihome-vacuum.0.control.fan_power","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"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","inputType":"text","inputLayout":"outlined-rounded","showInputMessageAlways":false,"showInputCounter":false,"clearIconShow":false,"listDataMethod":"valueList","countSelectItems":"0","listPosition":"auto","showSelectedIcon":"no","showValue":false,"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,"inputLayoutBorderColor":"#FFCA28","inputLayoutBorderColorSelected":"white","inputLabelText":"","inputLabelColor":"#FFCA28","inputLabelFontFamily":"RobotoCondensed-Regular","inputTranslateX":"15","inputTranslateY":"","valueListLabels":"Leise,Ausgeglichen,Turbo,Maximum,5%,10%,15%,20%,25%,30%,35%,40%,45%,50%,55%,65%,70%,75%,80%,85%,95%,100%","valueList":"38,60,77,90,5,10,15,20,25,30,35,40,45,50,55,65,70,75,80,85,95,100","listItemBackgroundColor":"#263238","listItemBackgroundHoverColor":"#37474F","listItemBackgroundSelectedColor":"#37474F","listItemRippleEffectColor":"","listIconColor":"","listItemFontColor":"#ffffff","listItemFontHoverColor":"#ffffff","inputTextColor":"white","inputLabelColorSelected":"#FFCA28","inputAppendixColor":"","inputCounterColor":"","clearIconColor":"","prepandIconSize":"","prepandIconColor":"","prepandInnerIconColor":"","appendOuterIcon":"","listItemSubFontColor":"","listItemSubFontHoverColor":"#FFCA28","inputLayoutBackgroundColor":"","inputLayoutBackgroundColorHover":"#37474F","inputLayoutBorderColorHover":"#00838f","inputTextFontFamily":"RobotoCondensed-Regular","prepandIcon":"","jsonStringObject":"","valueListIcons":"","inputPrefix":"    ","inputMessage":"","inputLabelFontSize":"","listItemFontSelectedColor":"#ffffff","listItemSubFontSelectedColor":"#FFCA28"},"style":{"left":"380px","top":"199px","z-index":"10","width":"216px","height":"38px"},"widgetSet":"materialdesign"}]

Kann es sein das das Select Widget Probleme mit dem Datentyp "number" hat?
Zumindest funktioniert es mit einem String wunderbar.

Edit: in testing thread verschoben, da es fehlerbehbung betrifft und nicht die Einstellung des Widgets

[Scrounger]

@0018
Also bei mir funktioniert number datenpunkte wunderbar.
Allerdings scheint das irgendwas spezielles bei dir zu sein weil das steht 25%(25), hab ich so noch nicht gesehen.

Poste bitte mal die raw Daten des Datenpunktes, dann schau ich mir das an.

[0018]

@Scrounger
Ist aus dem aktuellen mihome-vacuum Adapter.
Hier die raw:

Spoiler

{
 "from": "system.host.BrokerNUC.cli",
 "ts": 1578613960883,
 "common": {
   "name": "Suction power",
   "type": "number",
   "role": "level",
   "max": 100,
   "read": true,
   "write": true,
   "states": {
     "5": "5%",
     "10": "10%",
     "15": "15%",
     "20": "20%",
     "25": "25%",
     "30": "30%",
     "35": "35%",
     "38": "QUIET",
     "40": "40%",
     "45": "45%",
     "50": "50%",
     "55": "55%",
     "60": "BALANCED",
     "65": "65%",
     "70": "70%",
     "75": "75%",
     "77": "TURBO",
     "80": "80%",
     "85": "85%",
     "90": "MAXIMUM",
     "95": "95%",
     "100": "100%"
   }
 },
 "native": {},
 "acl": {
   "object": 1636,
   "owner": "system.user.admin",
   "ownerGroup": "system.group.administrator",
   "state": 1636
 },
 "_id": "mihome-vacuum.0.control.fan_power",
 "type": "state"
}

[smartboart]

Update auf 0.2.59 durchgeführt...wieder zurück auf 0.2.49.

Nach dem Update diverse Widget Informationen verloren gegangen...Diverse Widgets mussten im Vis Editor neu konfiguriert werden...Meist der Textinhalt und die Farbe des Textest und auch die Anzahl der Spalten des Bool List widget..Ausserdem beim Bedienen des bool list widget waren andere widgets in der view nicht mehr aktiv.
FullyBrowser als auch firefox)
Da life system nicht lange getestet und gleich wieder zurück...

[skokarl]

@smartboart
bei mir auch .....blöd ....

[darkiop]

Guten Morgen, habt ihr das bei den Listen? Hatte ich auch ab irgendeiner Github-Version - hier müsst ihr die Anzahl der Listen-Elemente wieder erhöhen, dann passt wieder alles. Die Widgets sind halt seitens @Scrounger noch in Entwicklung, da kann sowas schonmal vorkommen

[skokarl]

@darkiop
das ist ja auch nicht wirklich schlimm, alles gut.
Ich hatte es bei Button Toggle, Button Navigation, Texte weg

[darkiop]

@Scrounger Ich habe aber evtl. etwas was speziell die 0.2.59 betrifft:

Da Bilder mehr als Worten sagen, erstmal 2 Gif's:

SOLL mit der 0.2.49:

IST mit der 0.2.59:

Das Log sagt dazu imho erstmal wenig:

In Textform: Die Schalter der Listen aktualisieren sich mit der 0.2.59 nicht mehr automatisch während der Laufzeit. Hast du eine Idee woran das liegen könnten?

Des Weiteren ist mir noch etwas bei den 'Icon-Button-State' bzw. 'Button-State' aufgefallen. Beim 'Icon-Button-State' wird erst beim zweiten Klick der hinterlegte Wert (true) geschrieben.

[Negalein]

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

Da Bilder mehr als Worten sagen, erstmal 2 Gif's:

Hi Thorsten!

Wie hast du das mit den "eigenen Befehlen" gemacht?

[darkiop]

@Negalein Hi! Als Vorlage dienten die Skripte von @dslraser

https://forum.iobroker.net/topic/23370/alexa-ansagen-über-ssml

Hab das an meine Bedürfnisse angepasst.

Gruß

[Scrounger]

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

Kann es sein das das Select Widget Probleme mit dem Datentyp "number" hat?
Zumindest funktioniert es mit einem String wunderbar.

Hab ich behoben, aktuellen master bitte testen v0.2.60

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

In Textform: Die Schalter der Listen aktualisieren sich mit der 0.2.59 nicht mehr automatisch während der Laufzeit. Hast du eine Idee woran das liegen könnten?

Hab ich behoben, aktuellen master bitte testen v0.2.60

Des Weiteren ist mir noch etwas bei den 'Icon-Button-State' bzw. 'Button-State' aufgefallen. Beim 'Icon-Button-State' wird erst beim zweiten Klick der hinterlegte Wert (true) geschrieben.

Kann ich nicht reproduzieren. Funktioniert bei mir korrekt. Bitte lösch mal das Widget und erstell es komplett neu.

[darkiop]

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

Hab ich behoben, aktuellen master bitte testen v0.2.60

Schau ich mir gleich an.

Edit: Funktioniert wieder. Danke!

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

Kann ich nicht reproduzieren. Funktioniert bei mir korrekt. Bitte lösch mal das Widget und erstell es komplett neu.

Ok, allerdings sind das neue - zuvor waren da die Button-States. Schau ich mir auch nochmal an.

[Scrounger]

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

Ok, allerdings sind das neue - zuvor waren da die Button-States. Schau ich mir auch nochmal an.

Versteh ich nicht, was meinst du mit neu und zuvor waren da die Button-States?