Test Adapter Material Design Widgets v0.5.x

[IOBaer]

@Scrounger, Dein Adapter ist einfach genial. Ich will nicht wissen, wie viel Aufwand da dahintersteckt. Ich finde auch toll, dass Du auf ein bewährtes System wie VIS (mit all seinen Vorteilen) aufsetzt.

Nur etwas gefällt mir persönlich garnicht, nämlich die Farben und die Schriftarten. Ja, ich weiß, die kann man ändern. So wie bei jarvis wäre schick. Hat jemand von Euch da schon eigene Anpassungen vorgenommen?

[Scrounger]

@conquest sagte in Test Adapter Material Design Widgets v0.5.0-beta:

@scrounger

Hoffe das ist richtig hab noch nie was gemacht mit der Console.

Perfekt, genau das was ich brauche
Schau ich mir an und sobald fix zum testen da ist, meld ich mich

@iobaer sagte in Test Adapter Material Design Widgets v0.5.0-beta:

Nur etwas gefällt mir persönlich garnicht, nämlich die Farben und die Schriftarten. Ja, ich weiß, die kann man ändern. So wie bei jarvis wäre schick. Hat jemand von Euch da schon eigene Anpassungen vorgenommen?

Das ist subjektiv - die default Einstellungen sind halt wie Sie mir gefallen
Du kannst relativ schnell alle Farben, Schriftarten, Schriftgrößen anpassen, indem du nur die Standard änderst, das wird dann für alle Widgets automatisch übernommen:

Man kann das Theme auch exportieren über export der settings einstellungen. Hatte gehofft das evtl. das einige machen, dann könnte ich auf Basis dessen auch noch ein Theme auswahl einbauen.

Du hast mich auf eine gute Idee gebracht, man könnte ein VIS Projekt erstellen, wo man die Standard in der runtime direkt ändern kann und gleich für alle Wigdets die Veränderung sieht.

[Scrounger]

@conquest sagte in Test Adapter Material Design Widgets v0.5.0-beta:

@Scrounger
Hallo, ich habe jetzt auch die v0.5.0-beta installiert. Dabei ist mir aufgefallen das in der Konfiguration unter Farben(dunkel) keine Widgets angezeigt werden. Ist das richtig so?

Bug fix eingebaut, bitte teste die aktuelle version von gitHub - v0.5.1-beta, thx!

[Conquest]

@scrounger
Funktioniert. Danke.

[Conquest]

@scrounger
Hab noch ein Problem mit den Farben. Irgendwie werden die Farben nicht überall übernommen(siehe rote Pfeile).
Der Datenpunkt stimmt. Trage ich manuell eine Farbe ein passt es wieder.

[Conquest]

@Scrounger
Bei der Progress Bar das gleiche(siehe rote Pfeile). Anscheinend nimmt er bei manchen das light Theme warum auch immer.
Ausserdem löscht er mir manchmal ,wenn ich "useTheme" benutze , die Object ID.

Ok gerade festgestellt es passiert nur im View in widget 8. Öffne ich es normal ist alles richtig.

[Scrounger]

@conquest
werden die auch nach neu laden (F5) der runtime auch nicht übernommen?
setz mal alles zurück - auf den einzelnen Reitern der button zurücksetzen drücken und danach speichern.

[Conquest]

@scrounger sagte in Test Adapter Material Design Widgets v0.5.0-beta:

@conquest
werden die auch nach neu laden (F5) der runtime auch nicht übernommen?
setz mal alles zurück - auf den einzelnen Reitern der button zurücksetzen drücken und danach speichern.

F5 hat nicht geholfen.
Hab dann auf allen Reitern zurücksetzen gedrückt wird auch nicht bei allen übernommen (siehe rote Pfeile).
Noch eine Idee?

[Conquest]

@Scrounger

Ich kann die Farben eingeben wie ich will es ändert sich immer nur bis zur Nummer 12.

[Scrounger]

@conquest
Was steht im consolen log (F12) zur Laufzeit?
Stell bitte nen export von deinem Widget zur verfügung.

[Conquest]

@scrounger
Mach ich gerne. Schon mal vielen Dank für deine Hilfe.

Widget:

Spoiler

[{"tpl":"tplVis-materialdesign-TopAppBar-Navigation","data":{"oid":"0_userdata.0.materialdesign.topappbar","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","navItemCount":"11","submenuCounts_0":"0","submenuCounts_1":"0","topAppBarLayout":"standard","titleTopAppBar":"Menü","topAppBarZ_index":"998","vibrateTopAppBarOnMobilDevices":"50","drawerLayout":"modal","drawerItemLayout":"standard","listItemDividerStyle":"standard","z_index":"1600","showHeader":"true","headerLabel":"<h4 class='mdc-drawer__title'>Menü</h4><h6 class='mdc-drawer__subtitle'></h6>","showLabels":"true","listItemAlignment":"left","backdropLabelBackgroundHeight":"30","vibrateDrawerOnMobilDevices":"0","drawerSubItemLayout":"standard","listSubItemAlignment":"left","showSubItemsLabels":"true","iconDrawer0":"home","iconDrawer1":"robot-mower","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,"showIndexNum":true,"colorTopAppBarBackground":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.background","submenuCounts_2":"0","iconDrawer2":"lightbulb","submenuCounts_3":"0","iconDrawer3":"window-shutter","colorDrawerBackground":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.menu_background","colorDrawerHeaderBackground":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.header_background","colorListItemText":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_text","colorListItemSelected":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_selected","colorListItemDivider":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_divider","colorSubItemToggleIcon":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_icon_toggle","labels0":"Home","dividers0":true,"colorListItemTextSelected":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_text_selected","colorListItemHeaders":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.header_text","showSelectedItemAsTitle":true,"colorTopAppBarTitle":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.title","drawerIconHeight":"30","listItemHeaderTextSize":"#mdwTheme:vis-materialdesign.0.fontSizes.top_app_bar.header","labels1":"Alfredo","labels2":"Beleuchtung","dividers1":true,"dividers2":true,"labels3":"Beschattung","submenuCounts_4":"0","iconDrawer4":"cart","submenuCounts_5":"4","iconDrawer5":"radio","submenuCounts_6":"0","iconDrawer6":"temperature-celsius","submenuCounts_7":"0","iconDrawer7":"car-brake-alert","submenuCounts_8":"0","iconDrawer8":"pool","colorDrawerSubBackground":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.subItem_background_all","colorListSubItemSelected":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.subItem_selected","colorDrawerSubItemBackground":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.subItem_background","colorListSubItemText":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.subItem_text","submenuCounts_9":"7","iconDrawer9":"table-cog","headers0":"","dividers3":true,"labels4":"Bring","dividers4":true,"labels5":"Geräte&Medien","dividers5":true,"labels6":"Heizung","dividers6":true,"labels7":"Notdienste","dividers7":true,"labels8":"Pool","dividers8":true,"labels9":"System","dividers9":true,"submenuCounts_10":"0","iconDrawer10":"traffic-light","submenuCounts_11":"0","iconDrawer11":"weather-partly-cloudy","submenuCounts_12":"0","iconDrawer12":"/vis/widgets/materialdesign/img/IoBroker_Logo.png","submenuCounts_13":"0","iconDrawer13":"/vis/widgets/materialdesign/img/IoBroker_Logo.png","labels10":"Verkehr","dividers10":true,"labels12":"Verkehr","labels13":"Wetter","labels11":"Wetter","dividers11":true,"dividers12":true,"dividers13":true,"iconDrawerColor3":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_icon","iconDrawerColor2":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_icon","iconDrawerColor1":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_icon","iconDrawerColor0":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_icon","iconDrawerColor4":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_icon","iconDrawerColor6":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_icon","iconDrawerColor7":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_icon","iconDrawerColor9":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_icon","iconDrawerColor10":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_icon","iconDrawerColor5":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_icon","iconDrawerColor8":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_icon","iconDrawerColor11":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_icon","navDefaultValue":"0","titleFont":"#mdwTheme:vis-materialdesign.0.fonts.top_app_bar.title","titleFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.top_app_bar.title","listItemTextFont":"#mdwTheme:vis-materialdesign.0.fonts.top_app_bar.item","listItemTextFontDisabled":"#mdwTheme:vis-materialdesign.0.fonts.top_app_bar.item_disabled","listItemTextSize":"#mdwTheme:vis-materialdesign.0.fontSizes.top_app_bar.item","listItemHeaderFont":"#mdwTheme:vis-materialdesign.0.fonts.top_app_bar.header","colorDrawerItemBackground":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_background","colorListItemHover":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_hover","colorListItemTextDisabled":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_text_disabled","colorListItemIconDisabled":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_icon_disabled","colorDrawerbackdropLabelBackground":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_backdrop_background_text_off","colorDrawerbackdropLabelBackgroundActive":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.item_backdrop_background_text_on","listSubItemDividerStyle":"standard","colorListSubItemDivider":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.subItem_divider","listItemSubTextFont":"#mdwTheme:vis-materialdesign.0.fonts.top_app_bar.subItem","listSubItemTextSize":"#mdwTheme:vis-materialdesign.0.fontSizes.top_app_bar.subItem","listItemSubTextFontDisabled":"#mdwTheme:vis-materialdesign.0.fonts.top_app_bar.subItem_disabled","colorListSubItemHover":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.subItem_hover","colorListSubItemTextSelected":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.subItem_text_selected","colorDrawerbackdropSubLabelBackground":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.subItem_backdrop_background_text_off","colorDrawerbackdropSubLabelBackgroundActive":"#mdwTheme:vis-materialdesign.0.colors.top_app_bar.subItem_backdrop_background_text_on","permissionVisibility0":"hide","permissionVisibility1":"hide","permissionVisibility2":"hide","permissionVisibility3":"hide","permissionVisibility4":"hide","permissionVisibility5":"hide","permissionVisibility6":"hide","permissionVisibility7":"hide","permissionVisibility8":"hide","permissionVisibility9":"hide","permissionVisibility10":"hide","permissionVisibility11":"hide","submenus5":"[\n\t{\n\t\t\"text\": \"Fernseher\",\n\t\t\"icon\": \"filmstrip\",\n\t\t\"iconColor\": \"#13b3ec\",\n\t\t\"divider\": \"true\"\n\t}, \n\t{\n\t\t\"text\": \"Kamera\",\n\t\t\"icon\": \"camera\",\n\t\t\"iconColor\": \"#13b3ec\",\n\t\t\"divider\": \"true\"\n\t}, \n\t{\n\t\t\"text\": \"Nachrichten\",\n\t\t\"divider\": \"true\",\n\t\t\"iconColor\": \"#13b3ec\",\n\t\t\"icon\": \"newspaper\"\n\t\t\n\t},\n\t{\n\t    \"text\": \"Sonos\",\n\t    \"icon\": \"music-box\",\n\t    \"iconColor\": \"#13b3ec\"\n\t}    \n]","submenus9":"[\n\t{\n\t\t\"text\": \"Adapter\",\n\t\t\"icon\": \"view-comfy\",\n\t\t\"iconColor\": \"#13b3ec\",\n\t\t\"divider\": \"true\"\n\t}, \n\t{\n\t\t\"text\": \"Fritzbox\",\n\t\t\"icon\": \"phone-classic\",\n\t\t\"iconColor\": \"#13b3ec\",\n\t\t\"divider\": \"true\"\n\t}, \n\t{\n\t\t\"text\": \"Homematic\",\n\t\t\"divider\": \"true\",\n\t\t\"iconColor\": \"#13b3ec\",\n\t\t\"icon\": \"laptop\"\n\t},\n\t{\n\t    \"text\": \"Iobroker\",\n\t    \"icon\": \"server\",\n\t    \"iconColor\": \"#13b3ec\",\n\t    \"divider\": \"true\"\n\t},\n\t{\n\t    \"text\": \"Log\",\n\t    \"icon\": \"math-log\",\n\t    \"iconColor\": \"#13b3ec\",\n\t    \"divider\": \"true\"\n\t},\n\t{\n\t    \"text\": \"Netzwerk\",\n\t    \"icon\": \"network\",\n\t    \"iconColor\": \"#13b3ec\",\n\t    \"divider\": \"true\"\n\t},\n\t{\n\t    \"text\": \"Scripte\",\n\t    \"icon\": \"language-javascript\",\n\t    \"iconColor\": \"#13b3ec\",\n\t    \"divider\": \"true\"\n\t}\t\n]"},"style":{"left":"0px","top":"0px","width":"1280px","height":"60px"},"widgetSet":"materialdesign"}]

Consolen Log:

Spoiler

DevTools failed to load SourceMap: Could not load content for http://192.168.178.46:8082/lib/js/socket.io.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
promisebuffer.ts:24 Create inner vis object mihome-vacuum.0.info.error
promisebuffer.ts:24 Create inner vis object logparser.0.filters.Error.jsonCount

[Scrounger]

@conquest sagte in Test Adapter Material Design Widgets v0.5.0-beta:

@Scrounger

Ich kann die Farben eingeben wie ich will es ändert sich immer nur bis zur Nummer 12.

Hab den fehler behoben, teste bitte die aktuelle github version - VIS Adapter upload nach Installation machen!

[Conquest]

@scrounger
Funktioniert. Wieder mal tolle Arbeit von dir. Danke.

[liv-in-sky]

@conquest

vielleicht interessant für dich - ich wollte auch einen menu punkt farblich herausheben - nutze den häufig

habe einfach das in das beschriftungsfld geschrieben:

<font style="color:yellow; ">TABELLEN&emsp;&emsp;</font>

@Scrounger - oder geht das anders besser

[Scrounger]

@liv-in-sky sagte in Test Adapter Material Design Widgets v0.5.0-beta:

<font style="color:yellow; ">TABELLEN&emsp;&emsp;</font>

Genau richtig, für einen einzelnen Menüpunkt geht das nur per html.
Alle kann man per VIS Editor oder Theme Editor einstellen

[dack23]

@scrounger moin erstmal vielen dank für den tollen Adapter

Ich bekomme es nicht hin das submenü zu verlinken
Also buttons sind vorhanden im submenü aber wie linke ich sie zu einer view?

[Scrounger]

@dack23 sagte in Test Adapter Material Design Widgets v0.5.0-beta:

@scrounger moin erstmal vielen dank für den tollen Adapter

Ich bekomme es nicht hin das submenü zu verlinken
Also buttons sind vorhanden im submenü aber wie linke ich sie zu einer view?

Schau bitte in das folgende Thema, da wurde das schon sehr oft besprochen:
https://forum.iobroker.net/topic/29660/material-design-widgets-top-app-bar-widget

Tipp: es gibt bei jedem Widget Links, wo du direkt zum Thema der einzelnen Widgets (und Doku) gelangst. Dort sind bereits viele Fragestellungen geklärt, wenn nicht einfach Frage stellen dann hilft dir die Community und ich weiter.

[dack23]

@scrounger hab ich bereits alles gelesen die ganzen Erklärungen und gut seite mit Beispielen hilft nicht wirklich mache das wie auf github steht da steht ja nur für submenü das eintragen hab ich Menü da Funktion nein ..

Aber egal ich werde was anderes nutzen trotzdem danke

[Scrounger]

@dack23
Du musst zusammen mit dem View in Widget 8 nutzen. Bei beiden den gleichen datenpunkt vom Typ Nummer eintragen. Dann kannst die View im View in Widget 8 ändern

siehe https://forum.iobroker.net/topic/29660/material-design-widgets-top-app-bar-widget/26 und folgende

[dack23]

@scrounger kriege es nicht hin egal wie oder wo ich was einstelle

Edit:
So hab es endlich hinbekommen und Motorik dahinter verstanden