[Neuer VIS-Adpater] Material Design Widgets

sigi234

@Scrounger sagte in [Neuer VIS-Adpater] Material Design Widgets:

Hab eine neue Version hochgeladen, wo jetzt es jetzt SubMenu gibt.

Puh, da geht nicht bei mir, kann man ein Beispiel reinstellen?

Scrounger

@darkiop sagte in [Neuer VIS-Adpater] Material Design Widgets:

Die Stelle hab ich gefunden, Problematik liegt hier wohl an der Verschachtelung der flex-container:

Ok, versteh ich nicht. Kopier doch einfach mal das obige beispiel von mir in die Beschriftung eines List items. Evtl. musst du das flex halt noch auf deinen Browser anpassen.

@sigi234 sagte in [Neuer VIS-Adpater] Material Design Widgets:

Puh, da geht nicht bei mir, kann man ein Beispiel reinstellen?

Hier ist beschrieben wie man es einrichten muss: https://github.com/Scrounger/ioBroker.vis-materialdesign#submenu
Zeigt genau das Beispiel in dem Screenshot

darkiop

@Scrounger sagte in [Neuer VIS-Adpater] Material Design Widgets:

Ok, versteh ich nicht. Kopier doch einfach mal das obige beispiel von mir in die Beschriftung eines List items. Evtl. musst du das flex halt noch auf deinen Browser anpassen.

Hier mal die View zum Testen. Im HTML Widget funktioniert die Ausrichtung Linker Rand / Rechter Rand.

Im Feld Beschriftung nicht - außer ich entferne display:flex von .mdc-list-item.

{
  "settings": {
    "style": {
      "background_class": ""
    },
    "theme": "redmond",
    "sizex": "",
    "sizey": "",
    "gridSize": "10",
    "snapType": 2,
    "useBackground": false
  },
  "widgets": {
    "e00001": {
      "tpl": "tplVis-materialdesign-List",
      "data": {
        "g_fixed": false,
        "g_visibility": false,
        "g_css_font_text": true,
        "g_css_background": true,
        "g_css_shadow_padding": true,
        "g_css_border": true,
        "g_gestures": false,
        "g_signals": false,
        "g_last_change": false,
        "visibility-cond": "==",
        "visibility-val": 1,
        "visibility-groups-action": "hide",
        "count": "3",
        "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,
        "subLabel2": "Secondary",
        "groupHeader0": "",
        "groupHeader2": "Header",
        "groupHeader1": "",
        "label1": "Beschriftung",
        "label2": "Label",
        "dividers1": false,
        "dividers2": true,
        "dividers3": true,
        "dividers0": false,
        "dividerStyle": "standard",
        "types1": "checkbox",
        "types0": "checkbox",
        "types2": "checkbox",
        "types3": "checkbox",
        "listType": "buttonState",
        "subLabel0": "",
        "listItemHeight": "",
        "listImageLeft0": "/icons-material-svg/action/ic_grade_48px.svg",
        "listImageLeft1": "/icons-material-svg/action/ic_bookmark_outline_48px.svg",
        "listImageLeft2": "/vis/img/bulb_off.png",
        "listImageLeft3": "/icons-material-svg/action/ic_bookmark_outline_48px.svg",
        "listImageLeftHeight": "36",
        "oid1": "javascript.0.test.bool3",
        "oid2": "javascript.0.test.bool2",
        "oid3": "javascript.0.test.bool3",
        "oid0": "javascript.0.test.bool0",
        "distanceBetweenTextAndImage": "10",
        "listItemBackground": "",
        "listItemBackgroundActive": "",
        "colorCheckBox": "#fab614",
        "colorItemSelected": "#ffeb1f",
        "colorItemHover": "#ec1818",
        "colorListItemHover": "",
        "colorListItemSelected": "",
        "colorListItemText": "#f11313",
        "colorListItemTextSelected": "#1a07bb",
        "colorListItemHeaders": "#b214f5",
        "colorListItemDivider": "#169207",
        "listItemDividerStyle": "standard",
        "listLayout": "card",
        "readOnly1": false,
        "listItemReadOnly1": true,
        "listItemReadOnly0": true,
        "listItemReadOnly2": false,
        "listItemReadOnly3": true,
        "listImageLeftActive0": "/icons-material-svg/action/ic_bookmark_outline_48px.svg",
        "listImageLeftActive2": "/vis/img/bulb_on.png",
        "listImageHeight": "",
        "listImage0": "/vis/img/bulb_off.png",
        "listImage1": "/vis/img/bulb_off.png",
        "listImage2": "/vis/img/bulb_off.png",
        "listImage3": "/vis/img/bulb_off.png",
        "listImageActive0": "/vis/img/bulb_on.png",
        "listImageActive1": "/vis/img/bulb_on.png",
        "listImageActive2": "/vis/img/bulb_on.png",
        "listImageActive3": "/vis/img/bulb_on.png",
        "listTypeButtonStateValue0": "10",
        "listTypeButtonStateValue1": "20",
        "listTypeButtonStateValue2": "30",
        "listTypeButtonStateValue3": "40",
        "listTypeButtonNav0": "Buttons",
        "listTypeButtonNav1": "Cards",
        "listTypeButtonNav2": "Progress",
        "listTypeButtonNav3": "Slider",
        "listTypeButtonLink0": "http://10.0.124.189/login.htm",
        "listTypeButtonLink1": "https://10.0.124.186:8082/vis/index.html?Omi#Overview",
        "listTypeButtonLink2": "https://10.0.124.186:8443/manage/account/login",
        "listTypeButtonLink3": "http://10.0.124.191/",
        "listItemTextSize": "",
        "listItemSubTextSize": "",
        "listItemHeaderTextSize": "",
        "label0": "<div class=\"flex-container\"><div class=\"flex-item\">Item</div><div class=\"flex-item\">Item</div></div>"
      },
      "style": {
        "left": "10px",
        "top": "290px",
        "width": "calc(100% - 20px)",
        "height": "220px",
        "border-radius": "",
        "padding-top": "",
        "background-color": "",
        "color": ""
      },
      "widgetSet": "materialdesign"
    },
    "e00002": {
      "tpl": "tplHtml",
      "data": {
        "g_fixed": false,
        "g_visibility": false,
        "g_css_font_text": true,
        "g_css_background": true,
        "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",
        "refreshInterval": "0",
        "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,
        "html": "<div class=\"flex-container\">   \n  <div class=\"flex-item\">Item</div>   \n  <div class=\"flex-item\">Item</div>         \n</div>"
      },
      "style": {
        "left": "10px",
        "top": "60px",
        "width": "calc(100% - 20px)",
        "background": "yellow",
        "color": "#000",
        "height": "100px"
      },
      "widgetSet": "basic"
    },
    "e00003": {
      "tpl": "tplVis-materialdesign-List",
      "data": {
        "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",
        "count": "0",
        "listType": "text",
        "listItemDividerStyle": "standard",
        "listLayout": "standard",
        "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,
        "colorListItemText": "",
        "label0": "<div class=\"flex-container\"><div class=\"flex-item\">Item</div><div class=\"flex-item\">Item</div></div>"
      },
      "style": {
        "left": "10px",
        "top": "200px",
        "width": "calc(100% - 20px)",
        "height": "auto"
      },
      "widgetSet": "materialdesign"
    }
  },
  "name": "FlexBox-Test",
  "filterList": []
}

CSS dazu:

.flex-container{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

sigi234

@Scrounger sagte in [Neuer VIS-Adpater] Material Design Widgets:

Hier ist beschrieben wie man es einrichten muss: https://github.com/Scrounger/ioBroker.vis-materialdesign#submenu
Zeigt genau das Beispiel in dem Screenshot

Tja, wenn es den gehen würde? Tab schalten nicht weiter.
Screenshot (288).png

Screenshot (291).png

Edit:
Nach Neuinstallation geht es wieder.

Scrounger

@darkiop
Keine Ahnung was du da mit nem flex-container machst. Wie oben bereits geschrieben einfach rein kopieren als Beschriftung, binding anpassen
d.h. <div style="display:flex; flex-direction: row; justify-content: center; align-items: center"> <label style="width: 100%">Beschreibung</label> <label>{virtualpowermeter.0.Virtual_Energy_Total}Wh</label> </div>
in

kopieren.

Dann klappt es auch mit deiner View:

@sigi234
Hast du die alte Top App Bar gelöscht? Update wie oben geschrieben durchgeführt und iob neugestartet? GGf. komplett deinstallieren und nochmal neu installireren.

darkiop

@Scrounger sagte in [Neuer VIS-Adpater] Material Design Widgets:

Keine Ahnung was du da mit nem flex-container machst. Wie oben bereits geschrieben einfach rein kopieren als Beschriftung, binding anpassen

Habe alles nochmal neu von Github gezogen, jetzt passt - irgendwas war da vorher wohl zerschossen.

So muss das ausschauen:

Für den Typ 'html' bei der Beschreibung könnte ich dir nen PR schicken, oder möchtest es so lassen?

CKMartens

Hallo,

jetzt muss ich mal dumm Fragen bezüglich der Top App Bar.

Ich habe meine Views mit einem einheitlichen Button-Menu als eigenständige View, einem Content-Bereich als eigenständige View und einem Footer, ebenfalls als View, erstellt. erstellt. Wenn ich die Top App Bar nutzen will muss ich eine View mit dem Widget erstellen und jede View dort eintragen. Oder verstehe ich da was falsch?

Scrounger

@CKMartens
Korrekt. Du machst dir eine View in der nur das Top App Bar Widget drin ist.
Bei der Top App Bar trägst du dann unter 'Views' alle anderen Views ein:

Anhand des Index z.B. Tab[2] kannst du dann alles andere entsprechend konfigurieren, z.B. Text und Bilder der Nav Leiste:

Die oben dargestellten Einstellung der Screenshots ergeben dann folgende Nav Leiste:

CKMartens

@Scrounger Danke für die Erlärung

dos1973

@gravidi sagte in [[Neuer VIS-Adpater] Material Design Widgets]

@dos1973

Magst du mir verraten welchen ICON Pack für Wetter Icons das ist? Danke!

sorry, keine Ahnung wo ich das her hatte... ich kann es aber zippen und hochladen...

Leviathan09

Täuscht es oder verbraucht der Adapter einiges an Speicherplatz auf der Platte?
Liegt vermutlich ja an den ganzen Grafiken....aber ob man da vllt bisschen was shrinken kann oder ?

sigi234

@dos1973 sagte in [Neuer VIS-Adpater] Material Design Widgets:

Magst du mir verraten welchen ICON Pack für Wetter Icons das ist? Danke!

Gelöscht, Falsch

Scrounger

@Leviathan09 sagte in [Neuer VIS-Adpater] Material Design Widgets:

Täuscht es oder verbraucht der Adapter einiges an Speicherplatz auf der Platte?
Liegt vermutlich ja an den ganzen Grafiken....aber ob man da vllt bisschen was shrinken kann oder ?

Was heißt den einiges in Zahlen?
Bei mir braucht der ca. 10Mb.

Und welche ganzen Grafiken meinst du?

Edit:
Jetzt bin ich auf den trichter gekommen was du mit grafiken meinst. Die werden gar net benötigt, die dependencies ist falsch, hab das entsprechend korrigiert.
d.h. die Ordner '/node_module/material-components-web/' und '/node_modules/material-design-icons/' können ohne Auswirkungen zu haben gelöscht werden - das spart dann mal glatt 50Mb

Leviathan09

@Scrounger Die zwei Ordner schau ich mir gleich mal an.

Bei mir hat der Ordner "/iobroker.vis-materialdesign" um die 400MB.
Habe jedoch zwei Adapter zu dem Thema Material Design.
Bin mir jetzt gerade nicht sicher ob dieser zu deinem Adapter gehört.

Edit: War aber auch nicht als "geflenne" gemeint das dein Adapter zu viel Platz verbraucht, habe ja 15GB die sollten reichen.
Fand es nur Auffällig das der oben genannte Ordner über 400MB hat während alle anderen Ordner im Bereich von max 50MB liegen (Ausnahme Javascript und Zigbee, die haben auch um die 300MB)

sigi234

@Leviathan09 sagte in [Neuer VIS-Adpater] Material Design Widgets:

"/iobroker.vis-materialdesign

Wo ist dieser genau?

Leviathan09

@sigi234 /node_modules/iobroker.vis-materialdesign

sigi234

@Leviathan09 sagte in [Neuer VIS-Adpater] Material Design Widgets:

@sigi234 /node_modules/iobroker.vis-materialdesign

Danke, da habe ich 9 MB

Leviathan09

@sigi234 Ich habe den Adapter nun nochmal neu installiert.
Nun sind es bei mir auch nur 9MB

Sehr komisch....

Scrounger

Nachdem ich heute weiter an meinem Produktiv VIS gearbeitet habe, ist mir aufgefallen dass einfach keine wirklich schönen Graphen gibt, die man so gestalten kann das sie dem Material Design entsprechen. Hab also mal geschaut was es so für APIs gibt.

Jetzt brauch ich mal Euren Rat bzw. Meinung. Ich würde gerne die Google Chart Api, da super easy zu verwenden - auf den ersten Blick ;).
Hier mal ein kleines Beispiel, läuft bei mir im VIS schon:

Allerdings kann diese API nur online genutzt werden. Wie seht ihr das, ist das ein NO GO?

Alternativ gebe es noch die TOAST UI Chart API, die man auch offline nutzen kann, allerdings entspricht die halt nicht dem Material Design bzw. die Anpassung darauf wird viel aufwendiger.

sigi234

@Scrounger sagte in [Neuer VIS-Adpater] Material Design Widgets:

Wie seht ihr das, ist das ein NO GO?

Ja

NEWS

[Neuer VIS-Adpater] Material Design Widgets

Support us

961
Online

31.6k
Users

79.4k
Topics

1.3m
Posts

NEWS

[Neuer VIS-Adpater] Material Design Widgets

Support us

961Online

31.6kUsers

79.4kTopics

1.3mPosts

961
Online

31.6k
Users

79.4k
Topics

1.3m
Posts