Material Design Widets: Netzwerk Status

Glasfaser

Sehr schick ...

Kurztest durchgeführt , sieht gut aus .......

.
TIP : Schreibe noch in dein Skript ein paar Infos rein ,
z.B:

// https://forum.iobroker.net/topic/30812/material-design-widets-netzwerk-status
//@Machinima Maerz 2020 Ver. 1

Negalein

@Glasfaser sagte in Material Design Widets: Netzwerk Status:

Sehr schick ...

Servus

Wie hast du dieses PopUp hinbekommen?
Ohne X rechts oben, dafür Schliessen unten.

Kann ich einen Export haben?

darkiop

@Negalein sagte in Material Design Widets: Netzwerk Status:

Wie hast du dieses PopUp hinbekommen?

Das müsste ein per CSS angepasster Dialog View von Scrounger sein.

sigi234

@Machinima

Würde es nicht auch für die FritzBox gehen?

Agria4800

@Machinima sagte in Material Design Widets: Netzwerk Status:

Würdest du das Script auch für den Adapter fb-checkpresence anpassen ?
Ich glaube, der Adapter wird oft genutzt.

PatrickFro

Irgendwas mache ich falsch.

Datenpunkte sind angelegt und angepasst. TR-064 (Community) läuft und findet Geräte. In TR-064 sind auch mehrere Geräte in Beobachtung. Korrekte Version von Scrounger ist installiert.

Fehlermeldung:

javascript.0 (2245) script.js.Anzeigen.Netzwerkstatus: no result for selector '[id=tr-064.*.devices.*.active]'

Glasfaser

@Negalein sagte in Material Design Widets: Netzwerk Status:

Kann ich einen Export haben?

Kein Problem ... war nicht gerade einfach CSS ,
aber durch den Tip von Scrounger mit dem Video , habe ich es dann für mich hinbekommen .

Den CSS Befehl für den Rand schmaler machen rechts /links mußte ich zweimal reinmachen , sonst geht es nicht ( keine andere Lösung gefunden )

mit Farbverlauf ( Purple )
.
Widget ist ein Dialog View von Scrounger wie schon @darkiop geschrieben hat

[{"tpl":"tplVis-materialdesign-Dialog-View","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":true,"g_css_border":true,"g_gestures":false,"g_signals":true,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","showInEditor":false,"showInCenterOfScreen":"true","z_index":"3999","title":"Netzwerk Status","buttonText":"Schließen","vibrateOnMobilDevices":"50","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"","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":"","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":"","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,"showDialogOid":"0_userdata.0.11","contains_view":"NetzwerkStatus","colorBackground":"#202020","colorButtonText":"#fff","colorTitleBackground":"#202020","colorButtonBackground":"","colorTitle":"#fff","name":"dialog_NetzwerkStatus","class":""},"style":{"left":"117px","top":"315px","width":"800px","height":"600px","z-index":"","border-width":"","border-style":"","border-radius":"","border-color":"","padding-left":"","margin-top":"","padding":""},"widgetSet":"materialdesign"}]

CSS :

/* ANFANG Anpassung Dialog View von Scrounger */

.mdc-dialog__content {
   padding: 0 4px !important;
}
.mdc-dialog__content {
   padding: 0 4px !important;
   }
   
   
.mdc-dialog__title {
   padding: 0 24px 1px !important;
   }

.mdc-dialog__actions {
  padding: 0px  !important;
  min-height: 1px !important;
  margin: auto !important
}

.mdc-dialog .mdc-dialog__scrim {

   background:linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f)!important;
   opacity: .8 !important;
}

.element.style ::-webkit-scrollbar {
   width: 0px;
   background: transparent; 
}

.mdc-dialog .element.style {
     overflow-y: none !important;
   } 
   
/* ENDE Anpassung Dialog View von Scrounger */

Glasfaser

@PatrickFro sagte in Material Design Widets: Netzwerk Status:

TR-064 (Community)

??????

Zeige mal deine Datenpunkte von tr-064

Negalein

@Glasfaser sagte in Material Design Widets: Netzwerk Status:

Kein Problem

Danke, funktioniert super.

Aber eine frage habe ich noch.
Wo stell ich die Dialoggröße ein?

vis (1).png Edit vis.png

Glasfaser

@Negalein

Eingestellt ist der Dialog auf 800x600

Hier der Punkt:

Negalein

@Glasfaser sagte in Material Design Widets: Netzwerk Status:

Hier der Punkt:

Danke
Ich hab mich schon gewundert, dass im MaterialWidget keine Einstellungen sind.
Bins vom normalen Dialog gewohnt.

Glasfaser

@Negalein

Du kannst auch im Hauptview Adapterstatus einstellen , dann passt es sich automatisch je nach View oder Dialoggröße selber an !!

Glasfaser

@Machinima

@sigi234 sagte in Material Design Widets: Netzwerk Status:

@Machinima

Würde es nicht auch für die FritzBox gehen?

Würde mich auch dafür Interessieren

Negalein

@Glasfaser sagte in Material Design Widets: Netzwerk Status:

Eingestellt ist der Dialog auf 800x600

muss dich nochmal um Hilfe bitten

AdapterWidget hab ich auf 800x600 geändert.
DialogView ebenfalls auf 800x600

Trotzdem bekomme ich die grauen Scrollbalken nicht weg.
vis (2).png

Und mit
Adapterview: calc(50% -20px) und
Dialogview: 898x600
schaut es auch nicht besser aus.

Edit vis (1).png vis (3).png Edit vis (2).png

Was mache ich noch falsch?

Glasfaser

@Negalein

Nimm mal diese Adapter View :

{
 "settings": {
   "style": {
     "background_class": "hq-background-h-gradient-black-4"
   },
   "theme": "dark-hive",
   "sizex": "",
   "sizey": "",
   "gridSize": "",
   "snapType": null,
   "useBackground": false
 },
 "widgets": {
   "e00001": {
     "tpl": "tplVis-materialdesign-Icon-List",
     "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",
       "wrapItems": true,
       "listItemDataMethod": "jsonStringObject",
       "countListItems": "-4",
       "vibrateOnMobilDevices": "50",
       "listLayout": "card",
       "itemLayout": "horizontal",
       "listType0": "text",
       "showValueLabel0": "true",
       "listType1": "text",
       "showValueLabel1": "true",
       "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,
       "json_string_oid": "0_userdata.0.vis.AdapterStatus.jsonList",
       "maxItemsperRow": "6",
       "iconItemMinWidth": "300",
       "iconHeight": "60",
       "buttonHeight": "100",
       "labelFontSize": "22",
       "subLabelFontSize": "14",
       "subLabelFontColor": "#d7cec1",
       "labelFontFamily": "Jura-DemiBold",
       "subLabelFontFamily": "Jura-DemiBold",
       "horizontalIconContainerWidth": "120",
       "itemBackgroundColor": "linear-gradient(0deg, #2c2a3f, #4f344c, #2c2a3f)"
     },
     "style": {
       "left": "0px",
       "top": "49px",
       "width": "100%",
       "height": "calc(100% - 50px)",
       "overflow-x": "",
       "overflow-y": "auto",
       "z-index": "1",
       "background": "",
       "background-color": "",
       "font-family": ""
     },
     "widgetSet": "materialdesign"
   },
   "e00002": {
     "tpl": "tplHtml",
     "data": {
       "g_fixed": false,
       "g_visibility": false,
       "g_css_font_text": false,
       "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
     },
     "style": {
       "left": "0",
       "top": "0",
       "width": "100%",
       "height": "50px",
       "background-color": "#44739e"
     },
     "widgetSet": "basic"
   },
   "e00003": {
     "tpl": "tplVis-materialdesign-Select",
     "data": {
       "oid": "0_userdata.0.vis.AdapterStatus.sortMode",
       "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": "regular",
       "showInputMessageAlways": "true",
       "showInputCounter": false,
       "clearIconShow": false,
       "listDataMethod": "jsonStringObject",
       "countSelectItems": "1",
       "listPosition": "bottom",
       "showSelectedIcon": "prepend-inner",
       "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,
       "inputLabelText": "Sortieren nach",
       "inputLabelColor": "#ffffff",
       "inputLabelFontFamily": "Jura-DemiBold",
       "collapseIconColor": "#ffffff",
       "collapseIconSize": "",
       "jsonStringObject": "[\n\t{\n\t\t\"text\": \"Adaptername\",\n\t\t\"value\": \"name\",\n\t\t\"icon\": \"sort-alphabetical\"\n\t},\n\t{\n\t\t\"text\": \"Status\",\n\t\t\"value\": \"status\",\n\t\t\"icon\": \"information-variant\"\n\t},\t\n\t{\n\t\t\"text\": \"Modus\",\n\t\t\"value\": \"mode\",\n\t\t\"icon\": \"view-dashboard\"\n\t},\n\t{\n\t\t\"text\": \"Updates verfügbar\",\n\t\t\"value\": \"hasUpdates\",\n\t\t\"icon\": \"package-down\"\n\t},\n\t{\n\t\t\"text\": \"CPU\",\n\t\t\"value\": \"cpu\",\n\t\t\"icon\": \"cpu-64-bit\"\n\t},\n\t{\n\t\t\"text\": \"RAM total\",\n\t\t\"value\": \"memHeapTotal\",\n\t\t\"icon\": \"memory\"\n\t},\n\t{\n\t\t\"text\": \"RAM verwendet\",\n\t\t\"value\": \"memHeapUsed\",\n\t\t\"icon\": \"memory\"\n\t},\n\t{\n\t\t\"text\": \"RAM reserviert\",\n\t\t\"value\": \"memRss\",\n\t\t\"icon\": \"memory\"\n\t},\n\t{\n\t\t\"text\": \"Betriebszeit\",\n\t\t\"value\": \"uptime\",\n\t\t\"icon\": \"clock-check-outline\"\n\t}\n]",
       "listPositionOffset": true,
       "inputLayoutBackgroundColor": "transparent",
       "inputLabelColorSelected": "#ffffff",
       "inputTranslateX": "-15",
       "clearIcon": "",
       "inputLayoutBorderColorHover": "#ffffff",
       "inputLayoutBorderColorSelected": "#ffffff",
       "inputLayoutBorderColor": "#a1a1a1",
       "listItemFontColor": "",
       "inputTextColor": "#ffffff",
       "inputTextFontFamily": "Jura-DemiBold",
       "prepandIcon": "",
       "prepandIconColor": "",
       "prepandIconSize": "",
       "prepandInnerIcon": "",
       "prepandInnerIconColor": "#ffffff",
       "prepandInnerIconSize": "18",
       "collapseIcon": "",
       "inputTranslateY": "-12",
       "listIconSelectedColor": "#44739e",
       "listIconColor": "",
       "appendOuterIcon": "",
       "appendOuterIconSize": "2",
       "listItemFont": "RobotoCondensed-Regular",
       "listItemRippleEffectColor": "",
       "inputLayoutBackgroundColorSelected": "",
       "inputLayoutBackgroundColorHover": ""
     },
     "style": {
       "left": "10px",
       "top": "0px",
       "z-index": "2147483647",
       "width": "calc(50% - 20px)",
       "height": "40px"
     },
     "widgetSet": "materialdesign"
   },
   "e00004": {
     "tpl": "tplVis-materialdesign-Select",
     "data": {
       "oid": "0_userdata.0.vis.AdapterStatus.filterMode",
       "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": "regular",
       "showInputMessageAlways": "true",
       "showInputCounter": false,
       "clearIconShow": true,
       "listDataMethod": "jsonStringObject",
       "countSelectItems": "1",
       "listPosition": "bottom",
       "showSelectedIcon": "prepend-inner",
       "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,
       "inputLabelText": "Filtern nach",
       "inputLabelColor": "#ffffff",
       "inputLabelFontFamily": "Jura-DemiBold",
       "collapseIconColor": "#ffffff",
       "collapseIconSize": "",
       "jsonStringObject": "[\n\t{\n\t\t\"text\": \"nicht verbunden\",\n\t\t\"value\": \"notConnected\",\n\t\t\"icon\": \"network-off\"\n\t},\n\t{\n\t\t\"text\": \"deaktiviert\",\n\t\t\"value\": \"deactivated\",\n\t\t\"icon\": \"checkbox-blank-outline\"\n\t},\t\n\t{\n\t\t\"text\": \"aktiviert\",\n\t\t\"value\": \"activated\",\n\t\t\"icon\": \"checkbox-intermediate\"\n\t},\n\t{\n\t\t\"text\": \"Updates verfügbar\",\n\t\t\"value\": \"hasUpdates\",\n\t\t\"icon\": \"package-down\"\n\t}\n]",
       "listPositionOffset": true,
       "inputLayoutBackgroundColor": "transparent",
       "inputLabelColorSelected": "#ffffff",
       "inputTranslateX": "-15",
       "clearIcon": "",
       "inputLayoutBorderColorHover": "#ffffff",
       "inputLayoutBorderColorSelected": "#ffffff",
       "inputLayoutBorderColor": "#a1a1a1",
       "listItemFontColor": "",
       "inputTextColor": "#ffffff",
       "inputTextFontFamily": "Jura-DemiBold",
       "prepandIcon": "",
       "prepandIconColor": "",
       "prepandIconSize": "",
       "prepandInnerIcon": "",
       "prepandInnerIconColor": "#ffffff",
       "prepandInnerIconSize": "18",
       "collapseIcon": "",
       "inputTranslateY": "-12",
       "listIconSelectedColor": "#44739e",
       "listIconColor": "",
       "appendOuterIcon": "",
       "appendOuterIconSize": "2",
       "listItemFont": "RobotoCondensed-Regular",
       "listItemRippleEffectColor": "",
       "inputLayoutBackgroundColorSelected": "",
       "inputLayoutBackgroundColorHover": "",
       "clearIconColor": "#ffffff",
       "inputAppendixFontFamily": "Jura-DemiBold"
     },
     "style": {
       "left": "calc(50% + 10px)",
       "top": "0px",
       "z-index": "2147483647",
       "width": "calc(50% - 20px)",
       "height": "40px"
     },
     "widgetSet": "materialdesign"
   }
 },
 "name": "AdapterStatus",
 "filterList": []
}

helfi9999

@Machinima wie kann man das umschreiben für fb-checkpresence.0.

Bräuchte bitte Hilfe.

Negalein

@Glasfaser sagte in Material Design Widets: Netzwerk Status:

Nimm mal diese Adapter View :

Mit deinem View funktioniert es.

Wenn ich es mit meinem (Einstellungen 1:1 wie dein View) versuche, hab ich noch immer rechts den Scrollbalken vom PopUp

Glasfaser

@Negalein

Ich vermute , das die andern Widgets nicht richtig eingestellt sind

Tabelle :

Links:

Rechts:

PatrickFro

@Glasfaser

Glasfaser

@PatrickFro

Ganz einfach .deshalb habe ich es schon bei meiner Anfrage fett markiert .....du hast den Community Adapter der wird nicht mehr gepflegt !!!

Das Skript ließt die Datenpunkte von dem aktuellen Adapter aus .

Das Skript muß dann auf " tr-64.community. " geändert werden, wenn du es nutzen willst .

Aber überlege dir in der nächsten Zeit den Adapter zu aktualisieren .

NEWS

Material Design Widets: Netzwerk Status

Support us

540
Online

31.7k
Users

79.6k
Topics

1.3m
Posts

NEWS

Material Design Widets: Netzwerk Status

Support us

540Online

31.7kUsers

79.6kTopics

1.3mPosts

540
Online

31.7k
Users

79.6k
Topics

1.3m
Posts