Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Praktische Anwendungen (Showcase)
    4. View Adapter Status

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    View Adapter Status

    This topic has been deleted. Only users with topic management privileges can see it.
    • sigi234
      sigi234 Forum Testing Most Active @saeft_2003 last edited by

      @saeft_2003 sagte in View Adapter Status:

      Bekommst du das hin? Ich habs zwar noch nicht probiert, aber ich habe da doch meine selbstzweifel...

      Nö, das würde ich eher @Scrounger überlassen. 😀

      1 Reply Last reply Reply Quote 0
      • K
        Kuddel last edited by

        Wo genau finde ich die aktuelle Version vom Skript ?

        sigi234 1 Reply Last reply Reply Quote 0
        • sigi234
          sigi234 Forum Testing Most Active @Kuddel last edited by sigi234

          @Kuddel sagte in View Adapter Status:

          Wo genau finde ich die aktuelle Version vom Skript ?

          post 383428
          https://forum.iobroker.net/topic/26533/view-adapter-status/109

          1 Reply Last reply Reply Quote 0
          • Scrounger
            Scrounger Developer last edited by Scrounger

            Sodele nochmal eine neue Version des Skriptes

            Voraussetzung Material Design Widgets v0.2.62 (demnächst im latest) !!!

            • mehr Farbeinstellung
            • Sortier Funktion
            • Filter Funktion - wäre sicher als nächster Wunsch gekommen, deshalb hab ich es schon mal eingebaut 😉
              (Benötigt ihr weitere schaut ins skript und passt es auf eure Bedürfnisse an)
            • Adapter Modus wird angezeigt
            • Fehler behoben

            AdapterStatus.gif

            Ist auch im Online Beispiel enthalten

            View:

            {
              "settings": {
                "style": {
                  "background_class": ""
                },
                "theme": "redmond",
                "sizex": "",
                "sizey": "",
                "gridSize": "",
                "snapType": null
              },
              "widgets": {
                "e00001": {
                  "tpl": "tplVis-materialdesign-Icon-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",
                    "wrapItems": true,
                    "listItemDataMethod": "jsonStringObject",
                    "countListItems": "1",
                    "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": "#000000",
                    "labelFontFamily": "RobotoCondensed-Regular",
                    "subLabelFontFamily": "RobotoCondensed-Light",
                    "horizontalIconContainerWidth": "120"
                  },
                  "style": {
                    "left": "0px",
                    "top": "50px",
                    "width": "100%",
                    "height": "calc(100% - 50px)",
                    "overflow-x": "",
                    "overflow-y": "auto",
                    "z-index": "1"
                  },
                  "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": "RobotoCondensed-LightItalic",
                    "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": "RobotoCondensed-LightItalic",
                    "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": "1",
                    "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": "RobotoCondensed-LightItalic",
                    "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": "RobotoCondensed-LightItalic",
                    "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"
                  },
                  "style": {
                    "left": "calc(50% + 10px)",
                    "top": "0px",
                    "z-index": "1",
                    "width": "calc(50% - 20px)",
                    "height": "40px"
                  },
                  "widgetSet": "materialdesign"
                }
              },
              "name": "AdapterStatus",
              "filterList": []
            }
            

            Skript

            // Imports -> müssen im Javascript Adapter unter 'Zusätzliche NPM-Module' eingetragen sein
            const moment = require("moment");
            const momentDurationFormatSetup = require("moment-duration-format");
            
            
            // Skript Einstellungen *************************************************************************************************************************************************
            
            let dpList = '0_userdata.0.vis.AdapterStatus.jsonList';                     // Datenpunkt für IconList Widget (Typ: Zeichenkette (String))
            let dpAdapterRestart = '0_userdata.0.vis.AdapterStatus.restartTrigger';     // Datenpunkt für Adapter restart (Typ: Zeichenkette (String))
            
            let dpSortMode = '0_userdata.0.vis.AdapterStatus.sortMode';                 // Datenpunkt für Sortieren (Typ: Zeichenkette (String))
            let dpFilterMode = '0_userdata.0.vis.AdapterStatus.filterMode';             // Datenpunkt für Filter (Typ: Zeichenkette (String))
            
            let adminUpdatesList = 'admin.0.info.updatesList';                          // Datenpunkt Admin Adapter für verfübare Updates der Adapter
            
            const checkInterval = 30;                                                   // Interval wie oft Status der Adapter aktualisiert werden soll (in Sekunden)
            
            let sprache = 'de';                                                         // Sprache für formatierung Dauer 
            let formatierungDauer = "dd[T] hh[h] mm[m]";                                // Formatierung der Dauer -> siehe momentjs library
            
            let neustarten = true;                                                      // true: Adapter wird neugestartet, false: Adapter wird gestoppt oder gestartet
            
            let farbeAdapterAktiv = 'green';                                            // Status Bar Farbe wenn Adapter aktiv ist
            let farbeAdapterNichtAktiv = 'FireBrick';                                   // Status Bar Farbe wenn Adapter nicht aktiv ist oder Fehler vorliegt
            let farbeAdapterDeaktiviert = 'darkgrey';                                   // Status Bar Farbe wenn Adapter deaktiviert ist
            let farbeAdapterNichtVerbunden = 'yellow';                                  // Status Bar Farbe wenn Adapter nicht verbunden ist
            let farbeAdapterZeitgesteuert = 'lightgreen';                               // Status Bar Farbe wenn Adapter zeitgesteuert ist
            let farbeAdapterErweiterung = '#44739e';                                    // Status Bar Farbe wenn Adapter Erweiterung ist
            let farbeAdapterSystem = '#44739e';                                         // Status Bar Farbe wenn Adapter mit System gestartet wird
            
            let sortResetAfter = 120;                                                   // Sortierung nach X Sekunden auf sortReset zurücksetzen (0=deaktiviert)
            let sortReset = 'memHeapUsed'                                               // Sortierung auf die zurückgesetzt werden soll
            
            let filterResetAfter = 120;                                                 // Filter nach X Sekunden zurücksetzen (0=deaktiviert)
            
            // **********************************************************************************************************************************************************************
            
            
            // Fomate für moment Lib
            moment.locale(sprache);
            
            // auf .alive Änderungen hören
            let aliveSelector = `[id=system.adapter.*.alive]`;
            let adapterAliveList = $(aliveSelector);
            if (adapterAliveList.length === 0) {
                // Fehlermeldung ausgeben, wenn selector kein result liefert
                console.error(`no result for selector '${aliveSelector}'`)
            } else {
                // listener nur für Änderung bei alive
                adapterAliveList.on(adapterStatus);
            }
            
            // auf .connection Änderungen hören
            let connectionSelector = `[id=*.info.connection]`;
            let adapterConnectionList = $(connectionSelector);
            if (adapterConnectionList.length === 0) {
                // Fehlermeldung ausgeben, wenn selector kein result liefert
                console.error(`no result for selector '${connectionSelector}'`)
            } else {
                // listener nur für Änderung bei alive
                adapterConnectionList.on(adapterStatus);
            }
            
            // auf .connected Änderungen hören
            let connectedSelector = `[id=system.adapter.*.connected]`;
            let adapterConnectedList = $(connectedSelector);
            if (adapterConnectedList.length === 0) {
                // Fehlermeldung ausgeben, wenn selector kein result liefert
                console.error(`no result for selector '${connectedSelector}'`)
            } else {
                // listener nur für Änderung bei alive
                adapterConnectedList.on(adapterStatus);
            }
            
            // auf Änderungen der Sortieung hören
            on({ id: dpSortMode, change: 'any' }, adapterStatus);
            on({ id: dpSortMode, change: 'any' }, resetSort);
            
            // auf Änderungen der Filter hören
            on({ id: dpFilterMode, change: 'any' }, adapterStatus);
            on({ id: dpFilterMode, change: 'any' }, resetFilter);
            
            // Funktion adapterStatus alle x Sekunden ausführen
            schedule('*/' + checkInterval + ' * * * * *', adapterStatus);
            
            function adapterStatus() {
                // Funktion um Status der Adapter abzurufen und als JSON String für das Material Design Widget IconList aufbereiten
                let adapterList = [];
                let updateList = myHelper().getStateValueIfExist(adminUpdatesList);
            
                try {
                    for (var i = 0; i <= adapterAliveList.length - 1; i++) {
                        let id = adapterAliveList[i].replace('.alive', '');
                        let obj = getObject(adapterAliveList[i].replace('.alive', ''));
            
                        let nameArray = id.replace('system.adapter.', '').split(".");
            
                        let name = nameArray[0];
                        name = name.charAt(0).toUpperCase() + name.slice(1);
            
                        let nameWithInstance = name;
                        let adapterInstance = nameArray[1];
                        if (parseInt(adapterInstance) > 0) {
                            nameWithInstance = name + '.' + adapterInstance;
                        }
            
                        let uptime = (existsState(id + '.uptime')) ? moment.duration(getState(id + '.uptime').val, 'seconds').format(formatierungDauer, 0) : '-';
                        let image = (myHelper().checkCommonPropertyExist(obj, 'icon')) ? `/${nameArray[0]}.admin/${obj.common.icon}` : 'image-off-outline';
            
                        let hasUpdates = updateList && updateList.includes(nameArray[0]);
                        let newVersion = (hasUpdates) ? '<span class="mdi mdi-update" style="color: #ec0909;"></span>' : '';
            
                        let text = `<div style="display: flex; flex-direction: row; line-height: 1.5; padding-right: 8px; align-items: center;">
                                        <div style="flex: 1">${newVersion} ${nameWithInstance}</div>
                                        <div style="color: grey; font-size: 12px; font-family: RobotoCondensed-LightItalic;">${myHelper().getCommonPropertyIfExist(obj, 'version', '-', 'v', '')}</div>
                                    </div>`
            
                        let subText = `<div style="display: flex; flex-direction: row; line-height: 1.3; padding-left: 1px; padding-right: 8px; align-items: center;">
                                            <div style="flex: 1;">CPU</div>
                                            <div style="color: grey; font-size: 14px; font-family: RobotoCondensed-LightItalic;">${myHelper().getStateValueIfExist(id + '.cpu', '-', '', ' %')}</div>
                                        </div>
                                        <div style="display: flex; flex-direction: row; line-height: 1.3; padding-left: 1px; padding-right: 8px; align-items: center;">
                                            <div style="flex: 1;">RAM total</div>
                                            <div style="color: grey; font-size: 14px; font-family: RobotoCondensed-LightItalic;">${myHelper().getStateValueIfExist(id + '.memHeapTotal', '-', '', ' MB')}</div>
                                        </div>
                                        <div style="display: flex; flex-direction: row; line-height: 1.3; padding-left: 1px; padding-right: 8px; align-items: center;">
                                            <div style="flex: 1;">RAM verwendet</div>
                                            <div style="color: grey; font-size: 14px; font-family: RobotoCondensed-LightItalic;">${myHelper().getStateValueIfExist(id + '.memHeapUsed', '-', '', ' MB')}</div>
                                        </div>
                                        <div style="display: flex; flex-direction: row; line-height: 1.3; padding-left: 1px; padding-right: 8px; align-items: center;">
                                            <div style="flex: 1;">RAM reserviert</div>
                                            <div style="color: grey; font-size: 14px; font-family: RobotoCondensed-LightItalic;">${myHelper().getStateValueIfExist(id + '.memRss', '-', '', ' MB')}</div>
                                        </div>
                                        <div style="display: flex; flex-direction: row; line-height: 1.3; padding-left: 1px; padding-right: 8px; align-items: center;">
                                            <div style="flex: 1;">Betriebszeit</div>
                                            <div style="color: grey; font-size: 14px; font-family: RobotoCondensed-LightItalic;">${uptime}</div>
                                        </div>
                                        <div style="display: flex; flex-direction: row; line-height: 1.3; padding-left: 1px; padding-right: 8px; align-items: center;">
                                            <div style="flex: 1;">Modus</div>
                                            <div style="color: grey; font-size: 14px; font-family: RobotoCondensed-LightItalic;">${myHelper().getCommonPropertyIfExist(obj, 'mode', '-')}</div>
                                        </div>`
            
                        let statusBarColor = farbeAdapterNichtAktiv;
                        let status = 3;
            
                        if (myHelper().getStateValueIfExist(adapterAliveList[i]) === 'true') {
                            statusBarColor = farbeAdapterAktiv;
                            status = 0;
            
                            if (existsState(id.replace('system.adapter.', '') + '.info.connection')) {
                                if (!getState(id.replace('system.adapter.', '') + '.info.connection').val) {
                                    statusBarColor = farbeAdapterNichtVerbunden;
                                    status = 4;
                                }
                            } else {
                                if (myHelper().getStateValueIfExist(adapterAliveList[i].replace('.alive', '.connected')) === 'false') {
                                    statusBarColor = farbeAdapterNichtVerbunden;
                                    status = 4;
                                }
                            }
                        }
            
                        if (myHelper().getCommonPropertyIfExist(obj, 'mode') === 'schedule') {
                            // Adapter ist zeitgesteuert
                            statusBarColor = farbeAdapterZeitgesteuert;
                            status = 1;
                        }
            
                        if (myHelper().getCommonPropertyIfExist(obj, 'mode') === 'extension') {
                            // Adapter ist Extension
                            statusBarColor = farbeAdapterErweiterung;
                            status = 1;
                        }
            
                        if (myHelper().getCommonPropertyIfExist(obj, 'mode') === 'once') {
                            // Adapter wird mit System gestartet
                            statusBarColor = farbeAdapterSystem;
                            status = 1;
                        }
            
                        if (myHelper().getCommonPropertyIfExist(obj, 'enabled', false).toString() === 'false') {
                            // Adapter ist deaktiviert
                            statusBarColor = farbeAdapterDeaktiviert;
                            status = 2;
                        }
            
                        adapterList.push({
                            text: text,
                            subText: subText,
                            image: image,
                            listType: "buttonState",
                            objectId: dpAdapterRestart,
                            buttonStateValue: id,
                            statusBarColor: statusBarColor,
                            showValueLabel: false,
                            name: name,
                            mode: myHelper().getCommonPropertyIfExist(obj, 'mode'),
                            hasUpdates: hasUpdates,
                            cpu: parseFloat(myHelper().getStateValueIfExist(id + '.cpu', '0')),
                            memHeapTotal: parseFloat(myHelper().getStateValueIfExist(id + '.memHeapTotal', '0')),
                            memHeapUsed: parseFloat(myHelper().getStateValueIfExist(id + '.memHeapUsed', '0')),
                            memRss: parseFloat(myHelper().getStateValueIfExist(id + '.memRss', '0')),
                            uptime: parseFloat(myHelper().getStateValueIfExist(id + '.uptime', 0)),
                            status: status
                        })
                    }
            
                } catch (err) {
                    console.error(`[adapterStatus] error: ${err.message}, stack: ${err.stack}`);
                }
            
                let sortMode = myHelper().getStateValueIfExist(dpSortMode, 'name');
            
                if (sortMode === 'name' || sortMode === 'mode') {
                    adapterList.sort(function (a, b) {
                        return a[sortMode] == b[sortMode] ? 0 : +(a[sortMode] > b[sortMode]) || -1;
                    });
                } else if (sortMode === 'hasUpdates' || sortMode === 'cpu' || sortMode === 'memHeapTotal' || sortMode === 'memHeapUsed' || sortMode === 'memRss' || sortMode === 'uptime' || sortMode === 'status') {
                    adapterList.sort(function (a, b) {
                        return a[sortMode] == b[sortMode] ? 0 : +(a[sortMode] < b[sortMode]) || -1;
                    });
                } else {
                    // default: nach name sortieren
                    sortMode = 'name'
                    adapterList.sort(function (a, b) {
                        return a[sortMode] == b[sortMode] ? 0 : +(a[sortMode] > b[sortMode]) || -1;
                    });
                }
            
                // Filter: not connected, updates, deaktiviert, aktiviert
            
                let filterMode = myHelper().getStateValueIfExist(dpFilterMode, null);
            
                if (filterMode && filterMode !== null && filterMode !== '') {
                    if (filterMode === 'hasUpdates') {
                        adapterList = adapterList.filter(function (item) {
                            return item.hasUpdates === true;
                        });
                    } else if (filterMode === 'notConnected') {
                        adapterList = adapterList.filter(function (item) {
                            return item.status === 4;
                        });
                    } else if (filterMode === 'deactivated') {
                        adapterList = adapterList.filter(function (item) {
                            return item.status === 2;
                        });
                    } else if (filterMode === 'activated') {
                        adapterList = adapterList.filter(function (item) {
                            return item.status <= 1;
                        });
                    }
                }
            
                // adapterList = adapterList.filter(function(item){
                //     return item.status === 4;
                // })
            
                let result = JSON.stringify(adapterList);
                if (getState(dpList) !== result) {
                    setState(dpList, result, true);
                }
            
            
            }
            
            // Beim Staren des Skriptes Adapter Status abrufen
            adapterStatus();
            
            // Funktion um Adapter zu starten / neu starten
            on({ id: dpAdapterRestart }, function (obj) {
                var adapter = getObject(obj.state.val.toString());
            
                if (neustarten) {
                    if (adapter.common && adapter.common.enabled === false) {
                        // Adapter deaktiviert -> starten
                        adapter.common.enabled = true;
                    }
                } else {
                    if (adapter.common && adapter.common.enabled) {
                        adapter.common.enabled = !adapter.common.enabled;
                    } else {
                        adapter.common.enabled = true;
                    }
                }
            
                setObject(obj.state.val, adapter);
                console.log(`${obj.state.val.replace('system.adapter.', '')} neugestartet`);
            });
            
            
            function resetSort() {
                let sortMode = myHelper().getStateValueIfExist(dpSortMode, null);
            
                if (sortResetAfter > 0) {
                    setTimeout(function () {
                        if (sortMode !== null && sortMode === myHelper().getStateValueIfExist(dpSortMode, null)) {
                            setState(dpSortMode, sortReset);
                        }
                    }, sortResetAfter * 1000);
                }
            }
            
            function resetFilter() {
                let filterMode = myHelper().getStateValueIfExist(dpFilterMode, null);
            
                if (filterResetAfter > 0) {
                    setTimeout(function () {
                        if (filterMode !== null && filterMode === myHelper().getStateValueIfExist(dpFilterMode, null)) {
                            setState(dpFilterMode, '');
                        }
                    }, filterResetAfter * 1000);
                }
            }
            
            function myHelper() {
                return {
                    getStateValueIfExist: function (id, nullValue = undefined, prepand = '', append = '') {
                        if (existsState(id)) {
                            return prepand + getState(id).val + append;
                        } else {
                            return nullValue;
                        }
                    },
                    getCommonPropertyIfExist: function (object, prop, nullValue = undefined, prepand = '', append = '') {
                        if (myHelper().checkCommonPropertyExist(object, prop)) {
                            return prepand + object.common[prop] + append;
                        } else {
                            return nullValue;
                        }
                    },
                    checkCommonPropertyExist: function (object, prop) {
                        if (object && object.common && object.common[prop]) {
                            return true;
                        } else {
                            return false;
                        }
                    }
                }
            }
            
            sigi234 ub.privat S 4 Replies Last reply Reply Quote 6
            • sigi234
              sigi234 Forum Testing Most Active @Scrounger last edited by

              @Scrounger

              Das ist MEGA Geil!👍

              C 1 Reply Last reply Reply Quote 0
              • C
                Conquest @sigi234 last edited by

                @sigi234 sagte in View Adapter Status:

                @Scrounger

                Das ist MEGA Geil!👍

                Das ist aber weit untertrieben 😂
                Ich fang wieder bei null an wenn ich die ganzen neuen Sachen hier sehe.

                1 Reply Last reply Reply Quote 0
                • sigi234
                  sigi234 Forum Testing Most Active @Scrounger last edited by

                  @Scrounger

                  Screenshot (1837).png

                  Scrounger 1 Reply Last reply Reply Quote 0
                  • Scrounger
                    Scrounger Developer @sigi234 last edited by Scrounger

                    @sigi234
                    Du brauchst Version 0.2.62!
                    Und die scheinst du nicht zu haben, da der JSON-String noch als html input im Editor ist, man aber ab der Version 0.2.62 eine Objekt Id angeben muss.

                    siehe Online Beispiel

                    1 Reply Last reply Reply Quote 0
                    • Negalein
                      Negalein Global Moderator last edited by

                      @Scrounger

                      läuft 🙂
                      vis (34).png

                      Glasfaser 1 Reply Last reply Reply Quote 0
                      • Glasfaser
                        Glasfaser @Negalein last edited by Glasfaser

                        @Scrounger

                        Mein View geht im Popup Widget auf ... kann aber nichts anwählen über die Select , dort geht nichts auf.

                        1.JPG

                        Normaler View geht :

                        2.JPG

                        Geht das nicht über ein Popup !?

                        Scrounger 1 Reply Last reply Reply Quote 0
                        • Scrounger
                          Scrounger Developer @Glasfaser last edited by

                          @Glasfaser sagte in View Adapter Status:

                          Mein View geht im Popup Widget auf ... kann aber nichts anwählen über die Select , dort geht nichts auf.

                          Was meinst du mit Popup? Welches Widget?
                          Mach am besten mal nen export.

                          Glasfaser 1 Reply Last reply Reply Quote 0
                          • Glasfaser
                            Glasfaser @Scrounger last edited by

                            @Scrounger

                            Sorry habe ich vergessen .. Container Dialog

                            [{"tpl":"tplContainerDialog","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","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,"contains_view":"AdapterStatus","dialog_width":"1400","dialog_height":"782","title":"Adapter Status","dialog_top":"0","dialog_left":"0","modal":false,"noHeader":false,"class":"","name":"Adapterstatus Popup","comment":"transparent Layout"},"style":{"left":"881px","top":"378px","background":"transparent","width":"197px","height":"90px","z-index":"20","border-color":"transparent","font-family":"Jura-DemiBold","font-size":"14px"},"widgetSet":"jqui"}]
                            

                            1 Reply Last reply Reply Quote 0
                            • Scrounger
                              Scrounger Developer last edited by Scrounger

                              Hab das skript oben nochmal geupdated
                              https://forum.iobroker.net/topic/26533/view-adapter-status/142

                              und folgende Funktionen hinzugefügt:

                              • Sortierung nach x Sekunden zurücksetzen
                              • Filter nach x Sekunden zurücksetzen

                              Timer startet jedesmal, wenn man die Auswahl für Sortierung oder Filter ändert. Konfigurierbar / Deaktivierbar über

                              let sortResetAfter = 120;                                                   // Sortierung nach X Sekunden auf sortReset zurücksetzen (0=deaktiviert)
                              let sortReset = 'memHeapUsed'                                               // Sortierung auf die zurückgesetzt werden soll
                              
                              let filterResetAfter = 120;                                                 // Filter nach X Sekunden zurücksetzen (0=deaktiviert)
                              

                              @Glasfaser sagte in View Adapter Status:

                              @Scrounger

                              Sorry habe ich vergessen .. Container Dialog

                              Muss ich mir in Ruhe anschauen, tippe auf einen Bug im Select Widget. Bitte erstellt dazu einen issue auf git, dann vergesse ich es nicht.

                              Scrounger Negalein 2 Replies Last reply Reply Quote 0
                              • Scrounger
                                Scrounger Developer @Scrounger last edited by

                                @Glasfaser sagte in View Adapter Status:

                                @Scrounger

                                Sorry habe ich vergessen .. Container Dialog

                                Muss ich mir in Ruhe anschauen, tippe auf einen Bug im Select Widget. Bitte erstellt dazu einen issue auf git, dann vergesse ich es nicht.

                                Ok ist nur ein z-index problem. Musst für die beiden Select Widgets nur den z-index erhöhen, hab ihn einfach mal auf 1000 gesetzt, dann wirds angezeigt.

                                Glasfaser 1 Reply Last reply Reply Quote 0
                                • Negalein
                                  Negalein Global Moderator @Scrounger last edited by

                                  @Scrounger sagte in View Adapter Status:

                                  und folgende Funktionen hinzugefügt:

                                  Muss das ganze Script ausgetauscht werden, oder reicht es die besagten Zeilen einzufügen?

                                  Scrounger 1 Reply Last reply Reply Quote 0
                                  • Scrounger
                                    Scrounger Developer @Negalein last edited by

                                    @Negalein sagte in View Adapter Status:

                                    @Scrounger sagte in View Adapter Status:

                                    und folgende Funktionen hinzugefügt:

                                    Muss das ganze Script ausgetauscht werden, oder reicht es die besagten Zeilen einzufügen?

                                    Das ganze Skript

                                    1 Reply Last reply Reply Quote 0
                                    • Glasfaser
                                      Glasfaser @Scrounger last edited by Glasfaser

                                      @Scrounger

                                      Sorry ... habe alles gemacht auch mal auf 9999 Z-Index gesetzt ....immer das gleiche

                                      Habe auch ein ContainerIconDialog genommen , dort auch das gleiche ,

                                      [{"tpl":"tplContainerIconDialog","data":{"g_fixed":true,"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,"signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis.0/negalein/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.0/negalein/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.0/negalein/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,"src":"/vis.0/negalein/Akkuleer.png","class":"","contains_view":"AdapterStatus","modal":true,"dialog_width":"1400","dialog_height":"782","dialog_top":"0","dialog_left":"0","overflowX":"hidden","overflowY":"hidden","visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide"},"style":{"left":"791px","top":"403px","width":"36px","height":"23px","z-index":"2"},"widgetSet":"jqui"}]
                                      

                                      das merkwürdige ist , wenn man den Select-Widget im Popup aufklappt sieht man den weißen Rand der runtergeht und schließt man den Popup ist die Auflistung im Hintergrund noch auf .

                                      5.JPG

                                      Scrounger 1 Reply Last reply Reply Quote 0
                                      • Scrounger
                                        Scrounger Developer @Glasfaser last edited by

                                        @Glasfaser
                                        Das dropdown wird hinter dem popup nach dem öffnen angezeigt.
                                        Bin mir sicher das des ein z-index thema ist.

                                        Bei mir gehts, auch mit ContainerIconDialog

                                        AdapterStatus_popup.gif

                                        Glasfaser 1 Reply Last reply Reply Quote 1
                                        • Glasfaser
                                          Glasfaser @Scrounger last edited by

                                          @Scrounger

                                          Danke ... dein Popup Video hat mich gerade darauf gebracht ...

                                          Ich habe ein anderes Design von Material Design CSS V1 ,
                                          dort ist mir gerade aufgefallen , das im Skript der Fehler liegt , da wenn ich es entferne dann wird der Select-Widget richtig geöffnet .

                                          1.JPG

                                          Habe mal zum Test das neue Material Design CSS V2 Skript eingefügt , dort ist der Fehler auch

                                          Hast du eine Idee wo der Fehler sein könnte ??
                                          .
                                          SKRIPT :

                                          /* -----
                                            Material Design JS for ioBroker.vis
                                            (c) 2017 Uhula, MIT License
                                            https://github.com/Uhula/ioBroker-Material-Design-Style
                                            V1.7 28.12.2017
                                            o Korrektur mdui-lnav/rnav. Funktionierte mit mdui-toggle nicht korrekt  
                                            V1.6 16.10.2017 
                                            O _toggleFullscreen geändert, damit die function auch im ioBroker
                                                            fullscreen Mode funktioniert
                                            o Delegator-Eventhandler für body gesetzt (bisher #vis_container, wirkten dann aber in Dialogen nicht)
                                            V1.5 11.10.2017 
                                            o MDUI.handleTables fertig
                                            V1.3 24.09.2017 
                                            + MDUI.handleTables hinzu (in Entwicklung)
                                            V1.0 01.09.2017
                                            ----- */
                                          
                                          // Zur sicheren CSS-Erkennung der Runtime eine CSS-Klasse anlegen
                                          document.documentElement.className +=  " mdui-runtime";
                                          
                                          // Überprüfen ob touch zur Verfügung steht und entsprechend eine 
                                          // CSS Klasse touch bzw no-touch erzeugen 
                                          document.documentElement.className += 
                                             (("ontouchstart" in document.documentElement) ? " mdui-touch" : " mdui-notouch");
                                          
                                          
                                          /* -----
                                            MDUI
                                            ----- 
                                            Sammlung von JS-Funktionen für das Material Design
                                            (c) 2017 Uhula, MIT License
                                          */
                                          
                                          var MDUI = (function () {
                                          
                                          
                                          var isSubtreeModified = false;
                                          
                                          // liefert den suffix einer gegeben class zurück-Navigieren
                                          // Bsp: mdui-target-w00002 -> w00002
                                          //      mdui-zoom-to-200 -> 200
                                          function _getClassSuffix( $ele, classname ) {
                                             var suf = "";
                                             if ($ele) {
                                                 var c = $ele.attr( "class" );
                                                 suf = c.substr(c.indexOf(classname)+classname.length,1000)+" ";
                                                 suf = suf.substr(0,suf.indexOf(" "));
                                             }
                                             return suf;    
                                          }
                                          
                                          //
                                          function _getGroupID( ele ) { return _getClassSuffix(ele, "mdui-group-" ); }
                                          //
                                          function _getTargetID( ele ) { return _getClassSuffix(ele, "mdui-target-" ); }
                                          
                                          //
                                          function _getScrollbarWidth() {
                                             var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
                                                 widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth();
                                             $outer.remove();
                                             return 100 - widthWithScroll;
                                          }
                                          //
                                          function _getScrollbarHeight() {
                                             var $outer = $('<div>').css({visibility: 'hidden', height: 100, overflow: 'scroll'}).appendTo('body'),
                                                 heightWithScroll = $('<div>').css({height: '100%'}).appendTo($outer).outerHeight();
                                             $outer.remove();
                                             return 100 - heightWithScroll;
                                          }
                                          
                                          function _formatDatetime(date, format) {
                                             function fill(comp) {
                                                 return ((parseInt(comp) < 10) ? ('0' + comp) : comp)
                                             }
                                                 
                                             var months = ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'];
                                             var d = format;
                                             var o = {
                                                     "y+": date.getFullYear(), // year
                                                     "m+": fill(date.getMonth()+1), //month
                                                     "M+": months[date.getMonth()], //month
                                                     "d+": fill(date.getDate()), //day
                                                     "H+": fill((date.getHours() > 12) ? date.getHours() % 12 : date.getHours()), //hour
                                                     "h+": fill(date.getHours()), //hour
                                                     "n+": fill(date.getMinutes()), //minute
                                                     "s+": fill(date.getSeconds()), //second
                                                     "S+": fill(date.getMilliseconds()), //millisecond,
                                                     "b+": (date.getHours() >= 12) ? 'PM' : 'AM'
                                                 };
                                             for (var k in o) {
                                                 if (new RegExp("(" + k + ")").test(format)) {
                                                     d = d.replace(RegExp.$1, o[k]);
                                                 }
                                             }
                                             return d;
                                          }
                                          
                                          
                                          
                                          // alle Elemente mit class "mdui-group-XXX" togglen, in denen 
                                          // XXX aus class "mdui-group-XXX" des ele ist UND
                                          // alle Elemente mit class "mdui-target-XXX" togglen, in denen 
                                          // XXX aus class "mdui-target-XXX" des ele ist
                                          function _toggleVisibility( $ele ) {
                                             $ele.toggleClass("ui-state-active");
                                             var id = _getGroupID( $ele );
                                             if (id!=="") 
                                                 $("[class*='mdui-group-"+id+"']").not("[class*='mdui-toggle']").each( function (index) {
                                                     $(this).toggleClass("mdui-hide");
                                                 });    
                                             id = _getTargetID( $ele );
                                             if (id!=="") 
                                                 $( "[class*='mdui-target-"+id+"']").not("[class*='mdui-toggle']").each( function (index) {
                                                     $(this).toggleClass("mdui-hide");
                                                 });
                                          }
                                          
                                          // das in ele class \"mdui-target-XXX\" angegeben Element mit der id \"XXX\"  wird 
                                          // - fullscreen angezeigt, wenn es noch nicht fullscreen ist
                                          // - wieder normal angezeigt, wenn es fullscreen ist
                                          function _toggleFullscreen( $ele ){
                                             if (!$ele) return;
                                             var $target = $ele.closest(".vis-view");
                                             if (!$target) return;
                                             var styleold = $target.attr("styleold");
                                             if (styleold) {
                                                 $target.attr("style",styleold);
                                                 $target.removeAttr("styleold");
                                                 $target.appendTo(".mdui-id-"+$target.attr("id"));
                                                 } else {
                                                     $target.parent().addClass("mdui-id-"+$target.attr("id"));
                                                     $target.attr("styleold",$target.attr("style"));
                                                     $target.attr("style","position:fixed; left:0; top:0; width:100%; height:100%; z-index: 2147483647 !important;background:#212121 !important; ");
                                                     $target.appendTo( "body" );
                                                     //$target.appendTo( "body #vis_container" );
                                                     }
                                          }
                                          
                                          
                                          // ele muss class Einträge für das Target und den Skalierungsmodus haben
                                          // "mdui-target-(id) mdui-scale-(scalemode)" 
                                          // id: Ziel-Element mit id=id, welches ein zu skalierendes img enthält
                                          // scalemode: fit / hfit / vfit / in / out / (number)
                                          // number: Zahl in %
                                          function _scale( ele ) {
                                             var id = _getTargetID( ele );
                                             var $img = $( "#"+id+" img" );
                                             if ($img) {
                                                 var scale = _getClassSuffix(ele, "mdui-scale-" );
                                                 $img.width("1px"); // Scrollbars entfernen um die echte Höhe zu bekommen
                                                 $img.height("1px");
                                                 var dim = {
                                                     pw : $img.parent().width(), 
                                                     ph : $img.parent().height(), 
                                                     w  : $img[0].naturalWidth, 
                                                     h  : $img[0].naturalHeight
                                                 };
                                                 switch(scale) {
                                                     case "fit":
                                                         if (dim.pw / dim.w < dim.ph / dim.h ) scale = dim.pw / dim.w;  
                                                         else scale = dim.ph / dim.h;
                                                         break;
                                                     case "hfit":
                                                         if (dim.pw / dim.w < dim.ph / dim.h ) scale = dim.pw / dim.w;
                                                         else scale = (dim.pw - _getScrollbarWidth() - 4  ) / dim.w;
                                                         break;
                                                     case "vfit":
                                                         if ( dim.pw / dim.w > dim.ph / dim.h ) scale = dim.ph / dim.h;
                                                         else scale = (dim.ph - _getScrollbarHeight() - 4  ) / dim.h;
                                                         break;
                                                     case "in":
                                                     case "out":
                                                         var old = $img.attr( "style" );
                                                         old = old.substr(old.indexOf("scale(")+6,20);  
                                                         old = old.substr(0,old.indexOf(")"));  
                                                         if (old * 1==0) scale = 1;
                                                         else if (scale=="in") scale = old * 1.41;
                                                              else scale = old / 1.41;
                                                         break;
                                                     default:
                                                         if (scale<=0 || scale>10000)
                                                             scale = 100;
                                                         scale = scale/100;
                                                 }
                                                 scale = Math.round(scale*100)/100;
                                                 $img.attr( "style", "position:absolute;top:0;left:0;transform-origin:0 0;transition: transform 0.3s ease-out; transform:scale("+scale+");" );
                                                 }
                                          }
                                          
                                          // ersetzt im src-Attribute des Unter-Elements von (id) den "&range=& 
                                          // durch den Wert des in ele angegebenen (span). Für flot-Diagramme
                                          // "mdui-target-(id) mdui-timespan-(span)" 
                                          // id: Ziel-Element mit id=id, welches das flot (src) enthält
                                          // span: inc / dec / (number)
                                          // number: Zahl in Minuten
                                          function _timespan( ele ) {
                                             var id = _getTargetID( ele );
                                             var target = $( "#"+id+" [src]" );
                                             if (target) {
                                                 var timespan = _getClassSuffix(ele, "mdui-timespan-" );
                                                 var src = target.attr( "src" );
                                                 var min = src.substr(src.indexOf("&range=")+7,20);  
                                                 min = min.substr(0,min.indexOf("&"));  
                                                 switch(timespan) {
                                                     case "inc":
                                                         min = min * 2;
                                                         break;
                                                     case "dec":
                                                         min = min / 2;
                                                         break;
                                                     default:
                                                         if ( timespan<=0 )
                                                             timespan = 1440;
                                                         min = timespan;
                                                 }
                                                 src = src.replace(/&range=[0-9]*&/g, "&range="+min+"&");
                                                 target.attr("src",src);
                                             }
                                          }
                                          
                                          /*  */
                                          function _resetTable( $ele, $table ) {
                                             $ele.removeClass("mdui-table-tile");
                                             $ele.removeClass("mdui-table-card");
                                             $ele.removeClass("mdui-table-list");
                                             $table.find("tbody>tr").each( function(index) {
                                                 $(this).width("auto");
                                                 $(this).height("auto");
                                                 $(this).find("td").each( function(index) {
                                                     $(this).attr("labelth","");
                                                 });  
                                             });
                                          }
                                          
                                          /*  */
                                          function _handleTable( $ele, $table, opt ) {
                                          
                                             function setColWidth( colwidth ) {
                                                 $table.find("tbody>tr").each( function(index) {
                                                     $(this).outerWidth(colwidth);
                                                 });
                                             }
                                             function setColHeight() {
                                                 var height = 0;
                                                 $table.find("tbody>tr").each( function(index) {
                                                     if ($(this).height() > height ) height = $(this).height();
                                                 });
                                                 if ( height > 0 )
                                                     $table.find("tbody>tr").each( function(index) {
                                                         $(this).height( height );
                                                     });
                                             }
                                             
                                             var innerWidth = $ele.innerWidth();
                                          
                                             _resetTable($ele, $table);
                                             $ele.addClass("mdui-table-"+opt.type);
                                             if (opt.label) {
                                                 // Zellen mit Labels aus <th> ergänzen ?    
                                                 var labels = [];
                                                 $table.find("thead>tr>th").each( function(index) {
                                                     labels[index] = $(this).text();
                                                 });
                                                 $table.find("tbody>tr").each( function(index) {
                                                     $(this).find("td").each( function(index) {
                                                         if (index < labels.length) 
                                                             $(this).attr("labelth",labels[index]);
                                                     });  
                                                 });
                                             }
                                          
                                             if (opt.colwidth>1) setColWidth(opt.colwidth);
                                             if (opt.colwidth>2) setColHeight();
                                          
                                             return true;    
                                          }
                                          
                                          
                                          /* Alle mdui-table durchlaufen und überprüfen, ob die minimale Width erreicht
                                          wurde um sie in den responsive State zu überführen 
                                          mdui-table-(mode)(-opt1)(-opt2)...(-optn)
                                          mdui-table-ascard-r600-w200-l */
                                          function _handleTables( ) {
                                             $("[class*='mdui-table ']").each( function (index) {
                                                 var $ele = $(this);
                                                 var $table;
                                                 $table = $ele;
                                                 if (!$table.is("table")) $table=$table.find("table");
                                                 if (!$table.is("table")) return true; // next each 
                                                 
                                                 var innerWidth = $ele.innerWidth();
                                                 var classes = $ele.attr("class")
                                                     .split(" ")
                                                     .filter( function ( ele ) { 
                                                             return  (ele.indexOf("mdui-table-ascard") > -1)
                                                                  || (ele.indexOf("mdui-table-astile") > -1)
                                                                  || (ele.indexOf("mdui-table-aslist") > -1); });
                                                 var opts = [];
                                                 var opt;
                                                 for (var i = 0; i < classes.length; i++) {
                                                     opts[i] = [];
                                                     opts[i].reswidth = 9999;
                                                     opts[i].colwidth = 0;
                                                     opts[i].label = false;
                                                     opts[i].type = classes[i].substr(13,4); 
                                                     opt = classes[i].substr(18,200).split("-"); 
                                                     for (var j = 0; j < opt.length; j++) {
                                                         switch(opt[j][0]) {
                                                         case "r":
                                                             opts[i].reswidth = parseInt(opt[j].substr(1,5));
                                                             break;
                                                         case "w":
                                                             opts[i].colwidth = parseInt(opt[j].substr(1,5));
                                                             break;
                                                         case "c":
                                                             opts[i].colwidth = parseInt(opt[j].substr(1,5));
                                                             if (opts[i].colwidth>0) opts[i].colwidth = (innerWidth-_getScrollbarWidth()-8) / opts[i].colwidth;
                                                             break;
                                                         case "l":
                                                             opts[i].label = true;
                                                             break;
                                                         default:    
                                                         }                       
                                                     }
                                                 }
                                                 opts.sort(function(a, b){return a.reswidth-b.reswidth});
                                          //console.log(opts);
                                                 if (opts.length === 0) return true; // next each 
                                                 var handled = false;
                                                 for (i = 0; i < opts.length; i++) {
                                                     if ( innerWidth < opts[i].reswidth )
                                                        handled = _handleTable( $ele, $table, opts[i]);
                                                     if (handled) break;   
                                                 }
                                                 if (!handled) _resetTable($ele, $table);
                                             }); 
                                          
                                          }
                                          
                                          
                                          
                                          
                                          // DOM SubTree-Änderungen einmalig alle 500ms auswerten (diese Events werden 
                                          // u.U. 1000-fach gefeuert und müssen deswegen verzögert ausgeführt werden)
                                          function _onSubTreeModified( $ele ) {
                                             if (!isSubtreeModified) {
                                                 isSubtreeModified = true;
                                                 setTimeout(function () {
                                                     _handleTables();
                                                     isSubtreeModified=false;
                                                 }, 500);
                                             }
                                          }
                                          
                                          return {
                                             toggleVisibility: _toggleVisibility,
                                             toggleFullscreen: _toggleFullscreen,
                                             scale: _scale,
                                             timespan: _timespan,
                                             handleTables: _handleTables,
                                             onSubTreeModified : _onSubTreeModified
                                          };
                                          
                                          })();
                                          
                                          
                                          // Eventhandler für body-Delegators setzen (früher:#vis_container) 
                                          setTimeout(function () {
                                             // click-Event für das left-nav Element zum Öffnen
                                             $("body").on( "click", ".mdui-lnavbutton", function() { 
                                                 $( ".mdui-lnav" ).addClass( "mdui-lnav-open" );
                                             } );
                                             // click-Event für die left-nav zum Schließen
                                             $("body").on( "click", ".mdui-lnav", function() { 
                                                 $( ".mdui-lnav" ).removeClass( "mdui-lnav-open" ); 
                                             } );
                                             // click-Event für das right-nav Element zum Öffnen
                                             $("body").on( "click", ".mdui-rnavbutton", function() { 
                                                 $( ".mdui-rnav" ).addClass( "mdui-rnav-open" );
                                             } );
                                             // click-Event für die right-nav zum Schließen
                                             $("body").on( "click", ".mdui-rnav", function() { 
                                                 $( ".mdui-rnav" ).removeClass( "mdui-rnav-open" ); 
                                             } );
                                          
                                             // click-Eventhandler für "mdui-scale-" setzen
                                             $("body").on( "click", "[class*='mdui-scale-']", function(event) { 
                                                 MDUI.scale( $(this) );
                                             } );
                                          
                                             // click-Handler für "mdui-toggle"  
                                             $("body").on( "click", ".mdui-toggle", function(event) { 
                                                 event.preventDefault();
                                                 event.stopImmediatePropagation();
                                                 MDUI.toggleVisibility( $(this) );
                                             } );
                                          
                                             // click-Handler für "mdui-fullscreen" 
                                             $("body").on( "click", ".mdui-fullscreen", function(event) { 
                                                 MDUI.toggleFullscreen( $(this) );
                                             } );
                                          
                                             // click-Handler für "mdui-timepsan-" 
                                             $("body").on( "click", "[class*='mdui-timespan-']", function(event) { 
                                                 MDUI.timespan( $(this) );
                                             } );
                                          
                                             $( window ).on("resize", function() {
                                               MDUI.handleTables();
                                             });
                                          
                                             // Überwachen des #vis_containers auf Änderungen (z.B. wenn views nachgeladen
                                             // werden)
                                             $( "#vis_container" ).on( "DOMSubtreeModified", function(event) { 
                                                 MDUI.onSubTreeModified( $(this) );
                                             } );
                                             // für den ersten load einmal aufrufen
                                             MDUI.onSubTreeModified( );
                                          
                                          }, 1000); 
                                          
                                          
                                          
                                          

                                          Scrounger 1 Reply Last reply Reply Quote 0
                                          • Scrounger
                                            Scrounger Developer @Glasfaser last edited by

                                            @Glasfaser
                                            Nee sorry, hab mich mit Material Design CSS noch nie beschäftigt.

                                            Glasfaser 1 Reply Last reply Reply Quote 1
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            897
                                            Online

                                            31.7k
                                            Users

                                            79.8k
                                            Topics

                                            1.3m
                                            Posts

                                            view view adapter
                                            31
                                            212
                                            25580
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo