Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

  1. ioBroker Community Home
  2. Deutsch
  3. Praktische Anwendungen (Showcase)
  4. Material Design Widets: Netzwerk Status

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.3k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    1.9k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    15
    1
    2.3k

Material Design Widets: Netzwerk Status

Geplant Angeheftet Gesperrt Verschoben Praktische Anwendungen (Showcase)
280 Beiträge 50 Kommentatoren 51.7k Aufrufe 65 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • M Machinima

    Ich habe die View und das Skript leicht angepasst, siehe 1. Post.
    Es ist jetzt möglich, Links zu vergeben.
    Ich arbeite auch bereits an einer Version, bei der man wahlweise zwischen eigenen Bildern oder den Material Design Icons switchen kann.

    GlasfaserG Offline
    GlasfaserG Offline
    Glasfaser
    schrieb am zuletzt editiert von
    #61

    @Machinima

    Top :+1:

    Link geht auch .....

    1.JPG

    Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

    1 Antwort Letzte Antwort
    0
    • M Machinima

      Ich habe die View und das Skript leicht angepasst, siehe 1. Post.
      Es ist jetzt möglich, Links zu vergeben.
      Ich arbeite auch bereits an einer Version, bei der man wahlweise zwischen eigenen Bildern oder den Material Design Icons switchen kann.

      ub.privatU Offline
      ub.privatU Offline
      ub.privat
      schrieb am zuletzt editiert von
      #62

      @Machinima

      Prima, deine Ergänzungen funktionieren einwandfrei. Arbeitest du auch die Ergänzungen (An- und Abmeldung) von @bommel_030 mit ein???

      1 Antwort Letzte Antwort
      0
      • M Machinima

        In Anlehnung an die Views Skript Status und Adapter Status mit den Material Design Widgets habe ich mir eine View mit den Geräten aus dem TR064-Adapter erstellt, siehe nachfolgender Screenshot.

        Netzwerkgeräte VIS.png

        Github: Link

        Voraussetzung:

        • Material Design Widgets v0.2.66

        Funktionen:

        • Anzeige des Netzwerkstatus euer Geräte aus dem TR064-Adapter (online, offline)
        • Anzeige von Werten des Adapters (IP-Adresse, letzte An- und Abmeldung)
        • Einträge, die mit einem Link hinterlegt wurden, können per Klick auf das Symbol in einem neuen Browser-Tab geöffnet werden
        • Sortier und Filter Funktion
        • Einstellungen, siehe im Skript Sektion Einstellungen, Funktion der Einstellungen ist dort als Kommentar beschrieben.

        View zum Importieren (für Material Design Icons):

        {
          "settings": {
            "style": {
              "background_class": ""
            },
            "theme": "redmond",
            "sizex": "",
            "sizey": "",
            "gridSize": "",
            "useBackground": false,
            "snapType": null
          },
          "widgets": {
            "e00001": {
              "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%",
                "background-color": "#44739e",
                "height": "50px",
                "z-index": "0"
              },
              "widgetSet": "basic"
            },
            "e00002": {
              "tpl": "tplVis-materialdesign-Select",
              "data": {
                "oid": "0_userdata.0.vis.NetzwerkStatus.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\": \"Gerätename\",\n\t\t\"value\": \"name\",\n\t\t\"icon\": \"sort-alphabetical\"\n\t},\n\t{\n\t\t\"text\": \"IP Adresse\",\n\t\t\"value\": \"ipAddress\",\n\t\t\"icon\": \"ip\"\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"
            },
            "e00003": {
              "tpl": "tplVis-materialdesign-Select",
              "data": {
                "oid": "0_userdata.0.vis.NetzwerkStatus.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\": \"online\",\n\t\t\"value\": \"online\",\n\t\t\"icon\": \"network\"\n\t},\n\t{\n\t\t\"text\": \"offline\",\n\t\t\"value\": \"offline\",\n\t\t\"icon\": \"network-off-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": "",
                "clearIconColor": "#ffffff"
              },
              "style": {
                "left": "calc(50% + 10px)",
                "top": "0px",
                "z-index": "1",
                "width": "calc(50% - 20px)",
                "height": "40px"
              },
              "widgetSet": "materialdesign"
            },
            "e00004": {
              "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,
                "maxItemsperRow": "8",
                "json_string_oid": "0_userdata.0.vis.NetzwerkStatus.jsonList",
                "labelFontSize": "22",
                "subLabelFontSize": "14",
                "labelFontFamily": "RobotoCondensed-Regular",
                "horizontalIconContainerWidth": "70",
                "buttonHeight": "",
                "iconHeight": "35",
                "iconItemMinWidth": "300",
                "buttonLayout": "round",
                "autoLockAfter": "10",
                "lockIconTop": "5",
                "lockIconLeft": "5",
                "lockFilterGrayscale": "30",
                "lockApplyOnlyOnImage": "true",
                "subLabelFontFamily": "RobotoCondensed-BoldItalic",
                "subLabelFontColor": "black",
                "verticalIconContainerHeight": "70"
              },
              "style": {
                "left": "",
                "top": "50px",
                "width": "100%",
                "height": "calc(100% - 50px)",
                "overflow-y": "auto"
              },
              "widgetSet": "materialdesign"
            }
          },
          "name": "330_System_NetzwerkStatus",
          "filterList": []
        }
        

        Skript (mit Material Design Icons):

        /* Versionshistorie:
         * 
         * 1.0.2:
         * - neu: Anzeige der letzten An- und Abmeldung
         * - neu: Verwendung eigener Bilder möglich
         * 
         * 1.0.1:
         * - neu: In dem Mapping der IP-Adressen kann jetzt eine URL vergeben werden ('http' oder direkt eine spezifische URL)
         * - geändert: Styling der Details
         * - entfernt: MAC-Adresse
         * 
         * 1.0.0:
         * - Initial Release
         */
        
        const moment = require("moment");
         
        // Skript Einstellungen *************************************************************************************************************************************************
         
        let dpList = '0_userdata.0.vis.NetzwerkStatus.jsonList';          // Datenpunkt für IconList Widget (Typ: Zeichenkette (String))
         
        let dpSortMode = '0_userdata.0.vis.NetzwerkStatus.sortMode';      // Datenpunkt für Sortieren (Typ: Zeichenkette (String))
        let dpFilterMode = '0_userdata.0.vis.NetzwerkStatus.filterMode';  // Datenpunkt für Filter (Typ: Zeichenkette (String))
         
        const checkInterval = 30;                                         // Interval wie oft Status der Skripte aktualisiert werden soll (in Sekunden)
         
        let sprache = 'de';                                               // Sprache für formatierung letzte Änderung
        let formatierungLastChange = "ddd DD.MM - HH:mm";                 // Formatierung letzte Änderung -> siehe momentjs library
        
        let imagePath = '/vis.0/myImages/networkDevices/'                 // Pfad zu den verwendeten Bildern (bitte über den VIS Dateimanager hochladen)
                                                                          // nach Variable imagePath suchen und die entsprechenden Zeilen aus- bzw. einkommentieren
                                                                          // Das Bild (Dateiformat png) in der Mapping-Liste hinterlegen
        let defaultImage = 'ip-network-outline';                          // Standardbild, falls kein Bild angegeben wurde (Material Design Icons)
        //let defaultImage = `${imagePath}default.png`;                   // Standardbild, falls kein Bild angegeben wurde (eigenes Bild)
         
        let farbeGeraetOnline = 'green';                                  // Status Bar Farbe wenn Geräte online ist
        let farbeGeraetOffline = 'FireBrick';                             // Status Bar Farbe wenn Geräte offline ist
         
        let sortResetAfter = 120;                                         // Sortierung nach X Sekunden auf sortReset zurücksetzen (0=deaktiviert)
        let sortReset = 'name'                                            // Sortierung auf die zurückgesetzt werden soll
         
        let filterResetAfter = 120;                                       // Filter nach X Sekunden zurücksetzen (0=deaktiviert)
        
        const deviceNames = 
        [{ ip: "192.168.178.20", alias: "NAS",                           image: "nas",                   link: "http://diskstation:5000" },
         { ip: "192.168.178.37", alias: "Gosund Küchenlicht",            image: "toggle-switch-outline", link: "http" },
         { ip: "192.168.178.45", alias: "Homematic Raspi",               image: "server",                link: "http" },
         { ip: "192.168.178.32", alias: "OnePlus 3T",                    image: "cellphone" }
        ];
         
        // **********************************************************************************************************************************************************************
         
        // Fomate für moment Lib
        moment.locale(sprache);
        
        // auf Änderungen aktiver Skripts hören
        let activeSelector = `[id=tr-064.*.devices.*.active]`;
        let deviceActiveList = $(activeSelector);
        if (deviceActiveList.length === 0) {
            // Fehlermeldung ausgeben, wenn selector kein result liefert
            console.error(`no result for selector '${activeSelector}'`)
        } else {
            // listener nur für Änderung bei alive
            deviceActiveList.on(netzwerkStatus);
        } 
         
        // auf Änderungen der Sortieung hören
        on({ id: dpSortMode, change: 'any' }, netzwerkStatus);
        on({ id: dpSortMode, change: 'any' }, resetSort);
         
        // // auf Änderungen der Filter hören
        on({ id: dpFilterMode, change: 'any' }, netzwerkStatus);
        on({ id: dpFilterMode, change: 'any' }, resetFilter);
         
         
        // Funktion adapterStatus alle x Sekunden ausführen
        schedule('*/' + checkInterval + ' * * * * *', netzwerkStatus);
         
        function netzwerkStatus() {
            try {
                let deviceList = [];
         
                for (var i = 0; i <= deviceActiveList.length - 1; i++) {
                    let id = deviceActiveList[i].replace('.active', '');
                    let obj = getObject(id);
         
                    let pattern = /(?:\d{1,3}\.){3}\d{1,3}/i;
        
                    let ipAddress = obj.common.name.match(pattern)[0];
                    let image = defaultImage;
                    let deviceName = obj.common.name.replace(/ \((?:\d{1,3}\.){3}\d{1,3}\)/g, '');
                    let device = deviceNames.find(element => element.ip == ipAddress);
                    let listType = 'text';
                    let buttonLink = '';
        
                    if(device) {
                        deviceName = device.alias;
                        image = device.image;
                        //image = `${imagePath}${device.image}.png`;
        
                        if(device.link) {
                            listType = 'buttonLink';
        
                            if(device.link == 'http') {
                                buttonLink = `http://${ipAddress}`;
                            } else {
                                buttonLink = device.link;
                            }
                        }
                    }
        
                    let macAddress = obj.native.mac;
                    let imageColor = 'black';
                    let statusBarColor = farbeGeraetOffline;
                    let status = 2;
         
                    if (getState(deviceActiveList[i]).val) {
                        statusBarColor = farbeGeraetOnline;
                        status = 1;
                    }
        
                    if(listType === 'buttonLink') {
                        deviceName = `<span style="text-decoration: underline">${deviceName}</span>`                
                    }
        
                    let lastSignIn = 'noch nicht angemeldet';
                    let lastSignOff = 'noch nicht abgemeldet';
        
                    // Letzte Anmeldung auslesen
                    if(existsState(id + '.lastActive')) {
                        lastSignIn = 'angemeldet seit: ' + moment((getState(id + '.lastActive').val)).format("DD.MM.YY HH:mm:ss");
                    }        
        
                    // Letzte Abmeldung auslesen
                    if(existsState(id + '.lastInactive')) {
                        lastSignOff = 'abgemeldet seit: ' + moment((getState(id + '.lastInactive').val)).format("DD.MM.YY HH:mm:ss");
                    }
        
                    let subText = `<div style="color: black; font-family: RobotoCondensed-BoldItalic">${ipAddress}</div>
                                   <div style="color: grey; font-family: RobotoCondensed-Regular">${lastSignIn}</div>
                                   <div style="color: grey; font-family: RobotoCondensed-Regular">${lastSignOff}</div>`
         
                    deviceList.push({
                        text: deviceName,
                        subText: subText,
                        statusBarColor: statusBarColor,
                        image: image,
                        imageColor: imageColor,
                        listType: listType,
                        buttonLink: buttonLink,
                        showValueLabel: false,
                        name: deviceName,
                        ipAddress: ipAddress,
                        status: status
                    });
                }
         
                let sortMode = myHelper().getStateValueIfExist(dpSortMode, 'name');
         
                if (sortMode === 'name' || sortMode === 'ipAddress') {
                    deviceList.sort(function (a, b) {
                        return a[sortMode].toLowerCase() == b[sortMode].toLowerCase() ? 0 : +(a[sortMode].toLowerCase() > b[sortMode].toLowerCase()) || -1;
                    });
                } else if (sortMode === 'status') {
                    deviceList.sort(function (a, b) {
                        return a[sortMode] == b[sortMode] ? 0 : +(a[sortMode] < b[sortMode]) || -1;
                    });
                } else {
                    // default: nach name sortieren
                    sortMode = 'name'
                    deviceList.sort(function (a, b) {
                        return a[sortMode].toLowerCase() == b[sortMode].toLowerCase() ? 0 : +(a[sortMode].toLowerCase() > b[sortMode].toLowerCase()) || -1;
                    });
                }
         
         
                let filterMode = myHelper().getStateValueIfExist(dpFilterMode, null);
         
                if (filterMode && filterMode !== null && filterMode !== '') {
                    if (filterMode === 'offline') {
                        deviceList = deviceList.filter(function (item) {
                            return item.status === 2;
                        });
                    } else if (filterMode === 'online') {
                        deviceList = deviceList.filter(function (item) {
                            return item.status === 1;
                        });
                    }
                }
         
         
                let result = JSON.stringify(deviceList);
                if (getState(dpList) !== result) {
                    setState(dpList, result, true);
                }
         
            } catch (err) {
                console.error(`[netzwerkStatus] error: ${err.message}, stack: ${err.stack}`);
            }
        }
         
        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);
            }
        }
         
        // Beim Staren des Skriptes Adapter Status abrufen
        netzwerkStatus();
         
        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;
                    }
                }
            }
        }
        

        Folgende NPM-Module müsst ihr in eurer Javascript-Instanz hinzufügen: moment, moment-timezone, moment-duration-format
        Außerdem bitte die Einstellung "Erlaube das Kommando setObject" in eurer Javascript-Instanz aktivieren

        H Offline
        H Offline
        helfi9999
        schrieb am zuletzt editiert von
        #63

        @Machinima Hi finde was du machst genial.
        Eine Frage hätte ich wie kann man die Farbe des Image


        Bild 1.png
        ändern??
        Danke schonmal im vorraus

        Intel NUC mit Iobroker

        GlasfaserG 1 Antwort Letzte Antwort
        1
        • H helfi9999

          @Machinima Hi finde was du machst genial.
          Eine Frage hätte ich wie kann man die Farbe des Image


          Bild 1.png
          ändern??
          Danke schonmal im vorraus

          GlasfaserG Offline
          GlasfaserG Offline
          Glasfaser
          schrieb am zuletzt editiert von Glasfaser
          #64

          1.JPG

          Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

          H 1 Antwort Letzte Antwort
          0
          • M Machinima

            Ich habe die View und das Skript leicht angepasst, siehe 1. Post.
            Es ist jetzt möglich, Links zu vergeben.
            Ich arbeite auch bereits an einer Version, bei der man wahlweise zwischen eigenen Bildern oder den Material Design Icons switchen kann.

            NegaleinN Offline
            NegaleinN Offline
            Negalein
            Global Moderator
            schrieb am zuletzt editiert von
            #65

            @Machinima sagte in Material Design Widets: Netzwerk Status:

            Ich habe die View und das Skript leicht angepasst, siehe 1. Post.

            Super, dann warte ich mit dem Script noch bis die eigenen Bilder kommen. :)
            Es läuft ja nichts davon

            ° Node.js: 20.17.0 NPM: 10.8.2
            ° Proxmox, Ubuntu 22.04.3 LTS
            ° Fixer ---> iob fix

            1 Antwort Letzte Antwort
            0
            • GlasfaserG Glasfaser

              1.JPG

              H Offline
              H Offline
              helfi9999
              schrieb am zuletzt editiert von
              #66

              @Glasfaser Danke habe es auch gerade gefunden.
              :+1:

              Intel NUC mit Iobroker

              B 1 Antwort Letzte Antwort
              0
              • H helfi9999

                @Glasfaser Danke habe es auch gerade gefunden.
                :+1:

                B Nicht stören
                B Nicht stören
                bommel_030
                schrieb am zuletzt editiert von bommel_030
                #67

                @seelmkrl
                Danke, hat aber nicht funktioniert. Hat JavaScript als Fehler angemeckert.
                Hab mal bei @Scrounger kopiert, damit klappt es bei mir:

                // Letzte Anmeldung auslesen
                let lastanmeldung = existsState(id + '.lastActive') ?moment((getState(id + '.lastActive').val)).format("DD.MM.YY HH:mm:ss") : 'noch nicht angemeldet';
                // Letzte Abmeldung auslesen        
                let lastabmeldung = existsState(id + '.lastInactive') ? moment((getState(id + '.lastInactive').val)).format("DD.MM.YY HH:mm:ss") : 'noch nicht abgemeldet';
                

                @ub-privat
                Die Warnungen kommen wahrscheinlich daher, dass einige Geräte noch nicht an- oder abgemeldet waren. Tausch mal den oberen Teil aus, sind die Warnungen dann weg?
                Edit, Code korrigiert und moment() Umwandlung hinzu.

                S 1 Antwort Letzte Antwort
                0
                • M Machinima

                  In Anlehnung an die Views Skript Status und Adapter Status mit den Material Design Widgets habe ich mir eine View mit den Geräten aus dem TR064-Adapter erstellt, siehe nachfolgender Screenshot.

                  Netzwerkgeräte VIS.png

                  Github: Link

                  Voraussetzung:

                  • Material Design Widgets v0.2.66

                  Funktionen:

                  • Anzeige des Netzwerkstatus euer Geräte aus dem TR064-Adapter (online, offline)
                  • Anzeige von Werten des Adapters (IP-Adresse, letzte An- und Abmeldung)
                  • Einträge, die mit einem Link hinterlegt wurden, können per Klick auf das Symbol in einem neuen Browser-Tab geöffnet werden
                  • Sortier und Filter Funktion
                  • Einstellungen, siehe im Skript Sektion Einstellungen, Funktion der Einstellungen ist dort als Kommentar beschrieben.

                  View zum Importieren (für Material Design Icons):

                  {
                    "settings": {
                      "style": {
                        "background_class": ""
                      },
                      "theme": "redmond",
                      "sizex": "",
                      "sizey": "",
                      "gridSize": "",
                      "useBackground": false,
                      "snapType": null
                    },
                    "widgets": {
                      "e00001": {
                        "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%",
                          "background-color": "#44739e",
                          "height": "50px",
                          "z-index": "0"
                        },
                        "widgetSet": "basic"
                      },
                      "e00002": {
                        "tpl": "tplVis-materialdesign-Select",
                        "data": {
                          "oid": "0_userdata.0.vis.NetzwerkStatus.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\": \"Gerätename\",\n\t\t\"value\": \"name\",\n\t\t\"icon\": \"sort-alphabetical\"\n\t},\n\t{\n\t\t\"text\": \"IP Adresse\",\n\t\t\"value\": \"ipAddress\",\n\t\t\"icon\": \"ip\"\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"
                      },
                      "e00003": {
                        "tpl": "tplVis-materialdesign-Select",
                        "data": {
                          "oid": "0_userdata.0.vis.NetzwerkStatus.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\": \"online\",\n\t\t\"value\": \"online\",\n\t\t\"icon\": \"network\"\n\t},\n\t{\n\t\t\"text\": \"offline\",\n\t\t\"value\": \"offline\",\n\t\t\"icon\": \"network-off-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": "",
                          "clearIconColor": "#ffffff"
                        },
                        "style": {
                          "left": "calc(50% + 10px)",
                          "top": "0px",
                          "z-index": "1",
                          "width": "calc(50% - 20px)",
                          "height": "40px"
                        },
                        "widgetSet": "materialdesign"
                      },
                      "e00004": {
                        "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,
                          "maxItemsperRow": "8",
                          "json_string_oid": "0_userdata.0.vis.NetzwerkStatus.jsonList",
                          "labelFontSize": "22",
                          "subLabelFontSize": "14",
                          "labelFontFamily": "RobotoCondensed-Regular",
                          "horizontalIconContainerWidth": "70",
                          "buttonHeight": "",
                          "iconHeight": "35",
                          "iconItemMinWidth": "300",
                          "buttonLayout": "round",
                          "autoLockAfter": "10",
                          "lockIconTop": "5",
                          "lockIconLeft": "5",
                          "lockFilterGrayscale": "30",
                          "lockApplyOnlyOnImage": "true",
                          "subLabelFontFamily": "RobotoCondensed-BoldItalic",
                          "subLabelFontColor": "black",
                          "verticalIconContainerHeight": "70"
                        },
                        "style": {
                          "left": "",
                          "top": "50px",
                          "width": "100%",
                          "height": "calc(100% - 50px)",
                          "overflow-y": "auto"
                        },
                        "widgetSet": "materialdesign"
                      }
                    },
                    "name": "330_System_NetzwerkStatus",
                    "filterList": []
                  }
                  

                  Skript (mit Material Design Icons):

                  /* Versionshistorie:
                   * 
                   * 1.0.2:
                   * - neu: Anzeige der letzten An- und Abmeldung
                   * - neu: Verwendung eigener Bilder möglich
                   * 
                   * 1.0.1:
                   * - neu: In dem Mapping der IP-Adressen kann jetzt eine URL vergeben werden ('http' oder direkt eine spezifische URL)
                   * - geändert: Styling der Details
                   * - entfernt: MAC-Adresse
                   * 
                   * 1.0.0:
                   * - Initial Release
                   */
                  
                  const moment = require("moment");
                   
                  // Skript Einstellungen *************************************************************************************************************************************************
                   
                  let dpList = '0_userdata.0.vis.NetzwerkStatus.jsonList';          // Datenpunkt für IconList Widget (Typ: Zeichenkette (String))
                   
                  let dpSortMode = '0_userdata.0.vis.NetzwerkStatus.sortMode';      // Datenpunkt für Sortieren (Typ: Zeichenkette (String))
                  let dpFilterMode = '0_userdata.0.vis.NetzwerkStatus.filterMode';  // Datenpunkt für Filter (Typ: Zeichenkette (String))
                   
                  const checkInterval = 30;                                         // Interval wie oft Status der Skripte aktualisiert werden soll (in Sekunden)
                   
                  let sprache = 'de';                                               // Sprache für formatierung letzte Änderung
                  let formatierungLastChange = "ddd DD.MM - HH:mm";                 // Formatierung letzte Änderung -> siehe momentjs library
                  
                  let imagePath = '/vis.0/myImages/networkDevices/'                 // Pfad zu den verwendeten Bildern (bitte über den VIS Dateimanager hochladen)
                                                                                    // nach Variable imagePath suchen und die entsprechenden Zeilen aus- bzw. einkommentieren
                                                                                    // Das Bild (Dateiformat png) in der Mapping-Liste hinterlegen
                  let defaultImage = 'ip-network-outline';                          // Standardbild, falls kein Bild angegeben wurde (Material Design Icons)
                  //let defaultImage = `${imagePath}default.png`;                   // Standardbild, falls kein Bild angegeben wurde (eigenes Bild)
                   
                  let farbeGeraetOnline = 'green';                                  // Status Bar Farbe wenn Geräte online ist
                  let farbeGeraetOffline = 'FireBrick';                             // Status Bar Farbe wenn Geräte offline ist
                   
                  let sortResetAfter = 120;                                         // Sortierung nach X Sekunden auf sortReset zurücksetzen (0=deaktiviert)
                  let sortReset = 'name'                                            // Sortierung auf die zurückgesetzt werden soll
                   
                  let filterResetAfter = 120;                                       // Filter nach X Sekunden zurücksetzen (0=deaktiviert)
                  
                  const deviceNames = 
                  [{ ip: "192.168.178.20", alias: "NAS",                           image: "nas",                   link: "http://diskstation:5000" },
                   { ip: "192.168.178.37", alias: "Gosund Küchenlicht",            image: "toggle-switch-outline", link: "http" },
                   { ip: "192.168.178.45", alias: "Homematic Raspi",               image: "server",                link: "http" },
                   { ip: "192.168.178.32", alias: "OnePlus 3T",                    image: "cellphone" }
                  ];
                   
                  // **********************************************************************************************************************************************************************
                   
                  // Fomate für moment Lib
                  moment.locale(sprache);
                  
                  // auf Änderungen aktiver Skripts hören
                  let activeSelector = `[id=tr-064.*.devices.*.active]`;
                  let deviceActiveList = $(activeSelector);
                  if (deviceActiveList.length === 0) {
                      // Fehlermeldung ausgeben, wenn selector kein result liefert
                      console.error(`no result for selector '${activeSelector}'`)
                  } else {
                      // listener nur für Änderung bei alive
                      deviceActiveList.on(netzwerkStatus);
                  } 
                   
                  // auf Änderungen der Sortieung hören
                  on({ id: dpSortMode, change: 'any' }, netzwerkStatus);
                  on({ id: dpSortMode, change: 'any' }, resetSort);
                   
                  // // auf Änderungen der Filter hören
                  on({ id: dpFilterMode, change: 'any' }, netzwerkStatus);
                  on({ id: dpFilterMode, change: 'any' }, resetFilter);
                   
                   
                  // Funktion adapterStatus alle x Sekunden ausführen
                  schedule('*/' + checkInterval + ' * * * * *', netzwerkStatus);
                   
                  function netzwerkStatus() {
                      try {
                          let deviceList = [];
                   
                          for (var i = 0; i <= deviceActiveList.length - 1; i++) {
                              let id = deviceActiveList[i].replace('.active', '');
                              let obj = getObject(id);
                   
                              let pattern = /(?:\d{1,3}\.){3}\d{1,3}/i;
                  
                              let ipAddress = obj.common.name.match(pattern)[0];
                              let image = defaultImage;
                              let deviceName = obj.common.name.replace(/ \((?:\d{1,3}\.){3}\d{1,3}\)/g, '');
                              let device = deviceNames.find(element => element.ip == ipAddress);
                              let listType = 'text';
                              let buttonLink = '';
                  
                              if(device) {
                                  deviceName = device.alias;
                                  image = device.image;
                                  //image = `${imagePath}${device.image}.png`;
                  
                                  if(device.link) {
                                      listType = 'buttonLink';
                  
                                      if(device.link == 'http') {
                                          buttonLink = `http://${ipAddress}`;
                                      } else {
                                          buttonLink = device.link;
                                      }
                                  }
                              }
                  
                              let macAddress = obj.native.mac;
                              let imageColor = 'black';
                              let statusBarColor = farbeGeraetOffline;
                              let status = 2;
                   
                              if (getState(deviceActiveList[i]).val) {
                                  statusBarColor = farbeGeraetOnline;
                                  status = 1;
                              }
                  
                              if(listType === 'buttonLink') {
                                  deviceName = `<span style="text-decoration: underline">${deviceName}</span>`                
                              }
                  
                              let lastSignIn = 'noch nicht angemeldet';
                              let lastSignOff = 'noch nicht abgemeldet';
                  
                              // Letzte Anmeldung auslesen
                              if(existsState(id + '.lastActive')) {
                                  lastSignIn = 'angemeldet seit: ' + moment((getState(id + '.lastActive').val)).format("DD.MM.YY HH:mm:ss");
                              }        
                  
                              // Letzte Abmeldung auslesen
                              if(existsState(id + '.lastInactive')) {
                                  lastSignOff = 'abgemeldet seit: ' + moment((getState(id + '.lastInactive').val)).format("DD.MM.YY HH:mm:ss");
                              }
                  
                              let subText = `<div style="color: black; font-family: RobotoCondensed-BoldItalic">${ipAddress}</div>
                                             <div style="color: grey; font-family: RobotoCondensed-Regular">${lastSignIn}</div>
                                             <div style="color: grey; font-family: RobotoCondensed-Regular">${lastSignOff}</div>`
                   
                              deviceList.push({
                                  text: deviceName,
                                  subText: subText,
                                  statusBarColor: statusBarColor,
                                  image: image,
                                  imageColor: imageColor,
                                  listType: listType,
                                  buttonLink: buttonLink,
                                  showValueLabel: false,
                                  name: deviceName,
                                  ipAddress: ipAddress,
                                  status: status
                              });
                          }
                   
                          let sortMode = myHelper().getStateValueIfExist(dpSortMode, 'name');
                   
                          if (sortMode === 'name' || sortMode === 'ipAddress') {
                              deviceList.sort(function (a, b) {
                                  return a[sortMode].toLowerCase() == b[sortMode].toLowerCase() ? 0 : +(a[sortMode].toLowerCase() > b[sortMode].toLowerCase()) || -1;
                              });
                          } else if (sortMode === 'status') {
                              deviceList.sort(function (a, b) {
                                  return a[sortMode] == b[sortMode] ? 0 : +(a[sortMode] < b[sortMode]) || -1;
                              });
                          } else {
                              // default: nach name sortieren
                              sortMode = 'name'
                              deviceList.sort(function (a, b) {
                                  return a[sortMode].toLowerCase() == b[sortMode].toLowerCase() ? 0 : +(a[sortMode].toLowerCase() > b[sortMode].toLowerCase()) || -1;
                              });
                          }
                   
                   
                          let filterMode = myHelper().getStateValueIfExist(dpFilterMode, null);
                   
                          if (filterMode && filterMode !== null && filterMode !== '') {
                              if (filterMode === 'offline') {
                                  deviceList = deviceList.filter(function (item) {
                                      return item.status === 2;
                                  });
                              } else if (filterMode === 'online') {
                                  deviceList = deviceList.filter(function (item) {
                                      return item.status === 1;
                                  });
                              }
                          }
                   
                   
                          let result = JSON.stringify(deviceList);
                          if (getState(dpList) !== result) {
                              setState(dpList, result, true);
                          }
                   
                      } catch (err) {
                          console.error(`[netzwerkStatus] error: ${err.message}, stack: ${err.stack}`);
                      }
                  }
                   
                  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);
                      }
                  }
                   
                  // Beim Staren des Skriptes Adapter Status abrufen
                  netzwerkStatus();
                   
                  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;
                              }
                          }
                      }
                  }
                  

                  Folgende NPM-Module müsst ihr in eurer Javascript-Instanz hinzufügen: moment, moment-timezone, moment-duration-format
                  Außerdem bitte die Einstellung "Erlaube das Kommando setObject" in eurer Javascript-Instanz aktivieren

                  H Offline
                  H Offline
                  helfi9999
                  schrieb am zuletzt editiert von
                  #68

                  @Machinima Wollte mich mal für die klasse Arbeit bedanken, anbei meine View:


                  Bild 2.png

                  Intel NUC mit Iobroker

                  1 Antwort Letzte Antwort
                  0
                  • B bommel_030

                    @seelmkrl
                    Danke, hat aber nicht funktioniert. Hat JavaScript als Fehler angemeckert.
                    Hab mal bei @Scrounger kopiert, damit klappt es bei mir:

                    // Letzte Anmeldung auslesen
                    let lastanmeldung = existsState(id + '.lastActive') ?moment((getState(id + '.lastActive').val)).format("DD.MM.YY HH:mm:ss") : 'noch nicht angemeldet';
                    // Letzte Abmeldung auslesen        
                    let lastabmeldung = existsState(id + '.lastInactive') ? moment((getState(id + '.lastInactive').val)).format("DD.MM.YY HH:mm:ss") : 'noch nicht abgemeldet';
                    

                    @ub-privat
                    Die Warnungen kommen wahrscheinlich daher, dass einige Geräte noch nicht an- oder abgemeldet waren. Tausch mal den oberen Teil aus, sind die Warnungen dann weg?
                    Edit, Code korrigiert und moment() Umwandlung hinzu.

                    S Offline
                    S Offline
                    seelmkrl
                    schrieb am zuletzt editiert von
                    #69

                    Bau bitte noch die Funktion mit ein, dann muss es funktionieren !
                    // erweiterte existsState() funktion
                    function extendedExists(id){
                    let r = ($(id).length > 0) && (existsState(id));
                    return r;
                    }

                    1 Antwort Letzte Antwort
                    0
                    • M Offline
                      M Offline
                      Machinima
                      schrieb am zuletzt editiert von
                      #70

                      Neue Version des Skripts steht für euch bereit. An der View hat sich nichst geändert.
                      Letzte An- und Abmeldung ist jetzt hinterlegt.
                      Und ihr könnt jetzt eigene Bilder verwenden. Beachtet dazu die Hinweise im Skript!

                      sigi234S ub.privatU 2 Antworten Letzte Antwort
                      1
                      • M Machinima

                        Neue Version des Skripts steht für euch bereit. An der View hat sich nichst geändert.
                        Letzte An- und Abmeldung ist jetzt hinterlegt.
                        Und ihr könnt jetzt eigene Bilder verwenden. Beachtet dazu die Hinweise im Skript!

                        sigi234S Online
                        sigi234S Online
                        sigi234
                        Forum Testing Most Active
                        schrieb am zuletzt editiert von sigi234
                        #71

                        @Machinima sagte in Material Design Widets: Netzwerk Status:

                        Und ihr könnt jetzt eigene Bilder verwenden. Beachtet dazu die Hinweise im Skript!

                        Kannst du ein Beispiel zeigen?

                        Erledigt.

                        Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                        Immer Daten sichern!

                        1 Antwort Letzte Antwort
                        0
                        • M Machinima

                          Neue Version des Skripts steht für euch bereit. An der View hat sich nichst geändert.
                          Letzte An- und Abmeldung ist jetzt hinterlegt.
                          Und ihr könnt jetzt eigene Bilder verwenden. Beachtet dazu die Hinweise im Skript!

                          ub.privatU Offline
                          ub.privatU Offline
                          ub.privat
                          schrieb am zuletzt editiert von
                          #72

                          @Machinima

                          Hallo und einen angenehmen guten Abend!
                          Klappt soweit ganz gut - SUPER und VIELEN DANK!!! :+1: :+1: , habe nur zwei Fragen:

                          1. Hast du eventuell von materialdesignicons.com ALLE PNG's als kompletten Download vorhanden?
                          2. Link wird zwar in der Card angezeigt, läßt sich aber nicht aufrufen!?
                            Soll sich hier ein nuer Tab öffnen?
                            Muss ich noch etwas einstellen, ausser die Zurodnung im Script?
                            e406a809-c176-4aca-863d-d1b52a4ecc0d-grafik.png
                            Habe nur dort Links eingefügt, wo auch eine entsprechende eigene Website vorhanden ist.
                            Oder müssen die restlichen mit "http" aufgefüllt werden???
                          M 1 Antwort Letzte Antwort
                          0
                          • ub.privatU ub.privat

                            @Machinima

                            Hallo und einen angenehmen guten Abend!
                            Klappt soweit ganz gut - SUPER und VIELEN DANK!!! :+1: :+1: , habe nur zwei Fragen:

                            1. Hast du eventuell von materialdesignicons.com ALLE PNG's als kompletten Download vorhanden?
                            2. Link wird zwar in der Card angezeigt, läßt sich aber nicht aufrufen!?
                              Soll sich hier ein nuer Tab öffnen?
                              Muss ich noch etwas einstellen, ausser die Zurodnung im Script?
                              e406a809-c176-4aca-863d-d1b52a4ecc0d-grafik.png
                              Habe nur dort Links eingefügt, wo auch eine entsprechende eigene Website vorhanden ist.
                              Oder müssen die restlichen mit "http" aufgefüllt werden???
                            M Offline
                            M Offline
                            Machinima
                            schrieb am zuletzt editiert von Machinima
                            #73

                            @ub-privat

                            @ub-privat said in Material Design Widets: Netzwerk Status:

                            1. Hast du eventuell von materialdesignicons.com ALLE PNG's als kompletten Download vorhanden?

                            Leider nicht

                            @ub-privat said in Material Design Widets: Netzwerk Status:

                            1. Link wird zwar in der Card angezeigt, läßt sich aber nicht aufrufen!?
                              Soll sich hier ein nuer Tab öffnen?
                              Muss ich noch etwas einstellen, ausser die Zurodnung im Script?
                              e406a809-c176-4aca-863d-d1b52a4ecc0d-grafik.png
                              Habe nur dort Links eingefügt, wo auch eine entsprechende eigene Website vorhanden ist.
                              Oder müssen die restlichen mit "http" aufgefüllt werden???

                            Der Link bezieht sich auf den Button, nicht auf den unterstrichenen Text. Das hab ich nur gemacht, um zu verdeutlichen, dass hier ein Link existiert. Der Button Link wird durch das IconList Widget vorgegeben.
                            Wobei, ich muss zugeben: ich wollte gerade eben intuitiv auf den unterstrichenen Text klicken (kennt man ja so von Links). @Scrounger Kannst du das als Alternative ebenfalls noch implementieren, einen Textlink sozusagen?

                            ScroungerS 1 Antwort Letzte Antwort
                            0
                            • M Machinima

                              @ub-privat

                              @ub-privat said in Material Design Widets: Netzwerk Status:

                              1. Hast du eventuell von materialdesignicons.com ALLE PNG's als kompletten Download vorhanden?

                              Leider nicht

                              @ub-privat said in Material Design Widets: Netzwerk Status:

                              1. Link wird zwar in der Card angezeigt, läßt sich aber nicht aufrufen!?
                                Soll sich hier ein nuer Tab öffnen?
                                Muss ich noch etwas einstellen, ausser die Zurodnung im Script?
                                e406a809-c176-4aca-863d-d1b52a4ecc0d-grafik.png
                                Habe nur dort Links eingefügt, wo auch eine entsprechende eigene Website vorhanden ist.
                                Oder müssen die restlichen mit "http" aufgefüllt werden???

                              Der Link bezieht sich auf den Button, nicht auf den unterstrichenen Text. Das hab ich nur gemacht, um zu verdeutlichen, dass hier ein Link existiert. Der Button Link wird durch das IconList Widget vorgegeben.
                              Wobei, ich muss zugeben: ich wollte gerade eben intuitiv auf den unterstrichenen Text klicken (kennt man ja so von Links). @Scrounger Kannst du das als Alternative ebenfalls noch implementieren, einen Textlink sozusagen?

                              ScroungerS Offline
                              ScroungerS Offline
                              Scrounger
                              Developer
                              schrieb am zuletzt editiert von Scrounger
                              #74

                              @Machinima

                              Muss nicht implementiert werden, geht schon :sunglasses:

                              Man kann href tag verwenden, d.h. du kannst die property textz.B. so gestalten:

                                          deviceList.push({
                                              text: `<a href="http://${ip}" target="_blank">${text}</a>`,
                                              subText: subText,
                                              statusBarColor: statusBarColor,
                                              image: image,
                                              imageColor: imageColor,
                                              listType: listType,
                                              buttonLink: buttonLink,
                                              showValueLabel: false,
                                              name: deviceName,
                                              ipAddress: ipAddress,
                                              status: status
                                          });
                              

                              @ub-privat sagte in Material Design Widets: Netzwerk Status:

                              1. Hast du eventuell von materialdesignicons.com ALLE PNG's als kompletten Download vorhanden?

                              gibts hier:
                              https://github.com/Templarian/MaterialDesign-SVG

                              <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                              <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                              1 Antwort Letzte Antwort
                              0
                              • M Machinima

                                In Anlehnung an die Views Skript Status und Adapter Status mit den Material Design Widgets habe ich mir eine View mit den Geräten aus dem TR064-Adapter erstellt, siehe nachfolgender Screenshot.

                                Netzwerkgeräte VIS.png

                                Github: Link

                                Voraussetzung:

                                • Material Design Widgets v0.2.66

                                Funktionen:

                                • Anzeige des Netzwerkstatus euer Geräte aus dem TR064-Adapter (online, offline)
                                • Anzeige von Werten des Adapters (IP-Adresse, letzte An- und Abmeldung)
                                • Einträge, die mit einem Link hinterlegt wurden, können per Klick auf das Symbol in einem neuen Browser-Tab geöffnet werden
                                • Sortier und Filter Funktion
                                • Einstellungen, siehe im Skript Sektion Einstellungen, Funktion der Einstellungen ist dort als Kommentar beschrieben.

                                View zum Importieren (für Material Design Icons):

                                {
                                  "settings": {
                                    "style": {
                                      "background_class": ""
                                    },
                                    "theme": "redmond",
                                    "sizex": "",
                                    "sizey": "",
                                    "gridSize": "",
                                    "useBackground": false,
                                    "snapType": null
                                  },
                                  "widgets": {
                                    "e00001": {
                                      "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%",
                                        "background-color": "#44739e",
                                        "height": "50px",
                                        "z-index": "0"
                                      },
                                      "widgetSet": "basic"
                                    },
                                    "e00002": {
                                      "tpl": "tplVis-materialdesign-Select",
                                      "data": {
                                        "oid": "0_userdata.0.vis.NetzwerkStatus.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\": \"Gerätename\",\n\t\t\"value\": \"name\",\n\t\t\"icon\": \"sort-alphabetical\"\n\t},\n\t{\n\t\t\"text\": \"IP Adresse\",\n\t\t\"value\": \"ipAddress\",\n\t\t\"icon\": \"ip\"\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"
                                    },
                                    "e00003": {
                                      "tpl": "tplVis-materialdesign-Select",
                                      "data": {
                                        "oid": "0_userdata.0.vis.NetzwerkStatus.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\": \"online\",\n\t\t\"value\": \"online\",\n\t\t\"icon\": \"network\"\n\t},\n\t{\n\t\t\"text\": \"offline\",\n\t\t\"value\": \"offline\",\n\t\t\"icon\": \"network-off-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": "",
                                        "clearIconColor": "#ffffff"
                                      },
                                      "style": {
                                        "left": "calc(50% + 10px)",
                                        "top": "0px",
                                        "z-index": "1",
                                        "width": "calc(50% - 20px)",
                                        "height": "40px"
                                      },
                                      "widgetSet": "materialdesign"
                                    },
                                    "e00004": {
                                      "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,
                                        "maxItemsperRow": "8",
                                        "json_string_oid": "0_userdata.0.vis.NetzwerkStatus.jsonList",
                                        "labelFontSize": "22",
                                        "subLabelFontSize": "14",
                                        "labelFontFamily": "RobotoCondensed-Regular",
                                        "horizontalIconContainerWidth": "70",
                                        "buttonHeight": "",
                                        "iconHeight": "35",
                                        "iconItemMinWidth": "300",
                                        "buttonLayout": "round",
                                        "autoLockAfter": "10",
                                        "lockIconTop": "5",
                                        "lockIconLeft": "5",
                                        "lockFilterGrayscale": "30",
                                        "lockApplyOnlyOnImage": "true",
                                        "subLabelFontFamily": "RobotoCondensed-BoldItalic",
                                        "subLabelFontColor": "black",
                                        "verticalIconContainerHeight": "70"
                                      },
                                      "style": {
                                        "left": "",
                                        "top": "50px",
                                        "width": "100%",
                                        "height": "calc(100% - 50px)",
                                        "overflow-y": "auto"
                                      },
                                      "widgetSet": "materialdesign"
                                    }
                                  },
                                  "name": "330_System_NetzwerkStatus",
                                  "filterList": []
                                }
                                

                                Skript (mit Material Design Icons):

                                /* Versionshistorie:
                                 * 
                                 * 1.0.2:
                                 * - neu: Anzeige der letzten An- und Abmeldung
                                 * - neu: Verwendung eigener Bilder möglich
                                 * 
                                 * 1.0.1:
                                 * - neu: In dem Mapping der IP-Adressen kann jetzt eine URL vergeben werden ('http' oder direkt eine spezifische URL)
                                 * - geändert: Styling der Details
                                 * - entfernt: MAC-Adresse
                                 * 
                                 * 1.0.0:
                                 * - Initial Release
                                 */
                                
                                const moment = require("moment");
                                 
                                // Skript Einstellungen *************************************************************************************************************************************************
                                 
                                let dpList = '0_userdata.0.vis.NetzwerkStatus.jsonList';          // Datenpunkt für IconList Widget (Typ: Zeichenkette (String))
                                 
                                let dpSortMode = '0_userdata.0.vis.NetzwerkStatus.sortMode';      // Datenpunkt für Sortieren (Typ: Zeichenkette (String))
                                let dpFilterMode = '0_userdata.0.vis.NetzwerkStatus.filterMode';  // Datenpunkt für Filter (Typ: Zeichenkette (String))
                                 
                                const checkInterval = 30;                                         // Interval wie oft Status der Skripte aktualisiert werden soll (in Sekunden)
                                 
                                let sprache = 'de';                                               // Sprache für formatierung letzte Änderung
                                let formatierungLastChange = "ddd DD.MM - HH:mm";                 // Formatierung letzte Änderung -> siehe momentjs library
                                
                                let imagePath = '/vis.0/myImages/networkDevices/'                 // Pfad zu den verwendeten Bildern (bitte über den VIS Dateimanager hochladen)
                                                                                                  // nach Variable imagePath suchen und die entsprechenden Zeilen aus- bzw. einkommentieren
                                                                                                  // Das Bild (Dateiformat png) in der Mapping-Liste hinterlegen
                                let defaultImage = 'ip-network-outline';                          // Standardbild, falls kein Bild angegeben wurde (Material Design Icons)
                                //let defaultImage = `${imagePath}default.png`;                   // Standardbild, falls kein Bild angegeben wurde (eigenes Bild)
                                 
                                let farbeGeraetOnline = 'green';                                  // Status Bar Farbe wenn Geräte online ist
                                let farbeGeraetOffline = 'FireBrick';                             // Status Bar Farbe wenn Geräte offline ist
                                 
                                let sortResetAfter = 120;                                         // Sortierung nach X Sekunden auf sortReset zurücksetzen (0=deaktiviert)
                                let sortReset = 'name'                                            // Sortierung auf die zurückgesetzt werden soll
                                 
                                let filterResetAfter = 120;                                       // Filter nach X Sekunden zurücksetzen (0=deaktiviert)
                                
                                const deviceNames = 
                                [{ ip: "192.168.178.20", alias: "NAS",                           image: "nas",                   link: "http://diskstation:5000" },
                                 { ip: "192.168.178.37", alias: "Gosund Küchenlicht",            image: "toggle-switch-outline", link: "http" },
                                 { ip: "192.168.178.45", alias: "Homematic Raspi",               image: "server",                link: "http" },
                                 { ip: "192.168.178.32", alias: "OnePlus 3T",                    image: "cellphone" }
                                ];
                                 
                                // **********************************************************************************************************************************************************************
                                 
                                // Fomate für moment Lib
                                moment.locale(sprache);
                                
                                // auf Änderungen aktiver Skripts hören
                                let activeSelector = `[id=tr-064.*.devices.*.active]`;
                                let deviceActiveList = $(activeSelector);
                                if (deviceActiveList.length === 0) {
                                    // Fehlermeldung ausgeben, wenn selector kein result liefert
                                    console.error(`no result for selector '${activeSelector}'`)
                                } else {
                                    // listener nur für Änderung bei alive
                                    deviceActiveList.on(netzwerkStatus);
                                } 
                                 
                                // auf Änderungen der Sortieung hören
                                on({ id: dpSortMode, change: 'any' }, netzwerkStatus);
                                on({ id: dpSortMode, change: 'any' }, resetSort);
                                 
                                // // auf Änderungen der Filter hören
                                on({ id: dpFilterMode, change: 'any' }, netzwerkStatus);
                                on({ id: dpFilterMode, change: 'any' }, resetFilter);
                                 
                                 
                                // Funktion adapterStatus alle x Sekunden ausführen
                                schedule('*/' + checkInterval + ' * * * * *', netzwerkStatus);
                                 
                                function netzwerkStatus() {
                                    try {
                                        let deviceList = [];
                                 
                                        for (var i = 0; i <= deviceActiveList.length - 1; i++) {
                                            let id = deviceActiveList[i].replace('.active', '');
                                            let obj = getObject(id);
                                 
                                            let pattern = /(?:\d{1,3}\.){3}\d{1,3}/i;
                                
                                            let ipAddress = obj.common.name.match(pattern)[0];
                                            let image = defaultImage;
                                            let deviceName = obj.common.name.replace(/ \((?:\d{1,3}\.){3}\d{1,3}\)/g, '');
                                            let device = deviceNames.find(element => element.ip == ipAddress);
                                            let listType = 'text';
                                            let buttonLink = '';
                                
                                            if(device) {
                                                deviceName = device.alias;
                                                image = device.image;
                                                //image = `${imagePath}${device.image}.png`;
                                
                                                if(device.link) {
                                                    listType = 'buttonLink';
                                
                                                    if(device.link == 'http') {
                                                        buttonLink = `http://${ipAddress}`;
                                                    } else {
                                                        buttonLink = device.link;
                                                    }
                                                }
                                            }
                                
                                            let macAddress = obj.native.mac;
                                            let imageColor = 'black';
                                            let statusBarColor = farbeGeraetOffline;
                                            let status = 2;
                                 
                                            if (getState(deviceActiveList[i]).val) {
                                                statusBarColor = farbeGeraetOnline;
                                                status = 1;
                                            }
                                
                                            if(listType === 'buttonLink') {
                                                deviceName = `<span style="text-decoration: underline">${deviceName}</span>`                
                                            }
                                
                                            let lastSignIn = 'noch nicht angemeldet';
                                            let lastSignOff = 'noch nicht abgemeldet';
                                
                                            // Letzte Anmeldung auslesen
                                            if(existsState(id + '.lastActive')) {
                                                lastSignIn = 'angemeldet seit: ' + moment((getState(id + '.lastActive').val)).format("DD.MM.YY HH:mm:ss");
                                            }        
                                
                                            // Letzte Abmeldung auslesen
                                            if(existsState(id + '.lastInactive')) {
                                                lastSignOff = 'abgemeldet seit: ' + moment((getState(id + '.lastInactive').val)).format("DD.MM.YY HH:mm:ss");
                                            }
                                
                                            let subText = `<div style="color: black; font-family: RobotoCondensed-BoldItalic">${ipAddress}</div>
                                                           <div style="color: grey; font-family: RobotoCondensed-Regular">${lastSignIn}</div>
                                                           <div style="color: grey; font-family: RobotoCondensed-Regular">${lastSignOff}</div>`
                                 
                                            deviceList.push({
                                                text: deviceName,
                                                subText: subText,
                                                statusBarColor: statusBarColor,
                                                image: image,
                                                imageColor: imageColor,
                                                listType: listType,
                                                buttonLink: buttonLink,
                                                showValueLabel: false,
                                                name: deviceName,
                                                ipAddress: ipAddress,
                                                status: status
                                            });
                                        }
                                 
                                        let sortMode = myHelper().getStateValueIfExist(dpSortMode, 'name');
                                 
                                        if (sortMode === 'name' || sortMode === 'ipAddress') {
                                            deviceList.sort(function (a, b) {
                                                return a[sortMode].toLowerCase() == b[sortMode].toLowerCase() ? 0 : +(a[sortMode].toLowerCase() > b[sortMode].toLowerCase()) || -1;
                                            });
                                        } else if (sortMode === 'status') {
                                            deviceList.sort(function (a, b) {
                                                return a[sortMode] == b[sortMode] ? 0 : +(a[sortMode] < b[sortMode]) || -1;
                                            });
                                        } else {
                                            // default: nach name sortieren
                                            sortMode = 'name'
                                            deviceList.sort(function (a, b) {
                                                return a[sortMode].toLowerCase() == b[sortMode].toLowerCase() ? 0 : +(a[sortMode].toLowerCase() > b[sortMode].toLowerCase()) || -1;
                                            });
                                        }
                                 
                                 
                                        let filterMode = myHelper().getStateValueIfExist(dpFilterMode, null);
                                 
                                        if (filterMode && filterMode !== null && filterMode !== '') {
                                            if (filterMode === 'offline') {
                                                deviceList = deviceList.filter(function (item) {
                                                    return item.status === 2;
                                                });
                                            } else if (filterMode === 'online') {
                                                deviceList = deviceList.filter(function (item) {
                                                    return item.status === 1;
                                                });
                                            }
                                        }
                                 
                                 
                                        let result = JSON.stringify(deviceList);
                                        if (getState(dpList) !== result) {
                                            setState(dpList, result, true);
                                        }
                                 
                                    } catch (err) {
                                        console.error(`[netzwerkStatus] error: ${err.message}, stack: ${err.stack}`);
                                    }
                                }
                                 
                                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);
                                    }
                                }
                                 
                                // Beim Staren des Skriptes Adapter Status abrufen
                                netzwerkStatus();
                                 
                                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;
                                            }
                                        }
                                    }
                                }
                                

                                Folgende NPM-Module müsst ihr in eurer Javascript-Instanz hinzufügen: moment, moment-timezone, moment-duration-format
                                Außerdem bitte die Einstellung "Erlaube das Kommando setObject" in eurer Javascript-Instanz aktivieren

                                sigi234S Online
                                sigi234S Online
                                sigi234
                                Forum Testing Most Active
                                schrieb am zuletzt editiert von
                                #75

                                @Machinima sagte in Material Design Widets: Netzwerk Status:

                                Einträge, die mit einem Link hinterlegt wurden, können per Klick auf das Symbol in einem neuen Browser-Tab geöffnet werden

                                Hm, das geht auch Ohne Einträge bei mir.

                                Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                                Immer Daten sichern!

                                1 Antwort Letzte Antwort
                                0
                                • M Machinima

                                  @Negalein said in Material Design Widets: Netzwerk Status:

                                  @Machinima

                                  Ist es möglich, wie hier folgendes mit deinem Script umzusetzen?

                                  • eigene Bilder der Geräte verwendbar
                                  • bei Klick auf das Geräteicon soll sich die Gerätewebsite (als neuer Browsertab) öffnen

                                  Das ist kein Problem. Bau ich ein

                                  M Offline
                                  M Offline
                                  mcfly11111
                                  schrieb am zuletzt editiert von
                                  #76

                                  Woher kommen die Standard-Icons?

                                  Im letzten script, ohne "imagepath", habe ich meine devices eingetragen.

                                  z.B.
                                  { ip: "10.100.10.10", alias: "Fritzbox 6590", image: "router" },
                                  { ip: "10.100.10.20", alias: "Synology", image: "nas" },
                                  usw.
                                  angezeigt werden auch icons, die aussehen wie ein router bzw. nas, aber woher kommen diese? Über den Dateimanager in vis habe ich diese icons gesucht, jedoch gibt es in den materialdesignicons die beiden gar nicht. Ich würde gerne meine anderen devices mit entsprechenden icons ausstatten, allerdings weiß ich nicht, wo ich danach suchen soll.
                                  Die neue Funktion mit dem "imagepath" wäre sicher eine Lösung, allerdings würden mir die Standard-Icons reichen und ich müsste nicht zusätzliche icons hochladen.

                                  danke im Voraus

                                  ub.privatU 1 Antwort Letzte Antwort
                                  0
                                  • M mcfly11111

                                    Woher kommen die Standard-Icons?

                                    Im letzten script, ohne "imagepath", habe ich meine devices eingetragen.

                                    z.B.
                                    { ip: "10.100.10.10", alias: "Fritzbox 6590", image: "router" },
                                    { ip: "10.100.10.20", alias: "Synology", image: "nas" },
                                    usw.
                                    angezeigt werden auch icons, die aussehen wie ein router bzw. nas, aber woher kommen diese? Über den Dateimanager in vis habe ich diese icons gesucht, jedoch gibt es in den materialdesignicons die beiden gar nicht. Ich würde gerne meine anderen devices mit entsprechenden icons ausstatten, allerdings weiß ich nicht, wo ich danach suchen soll.
                                    Die neue Funktion mit dem "imagepath" wäre sicher eine Lösung, allerdings würden mir die Standard-Icons reichen und ich müsste nicht zusätzliche icons hochladen.

                                    danke im Voraus

                                    ub.privatU Offline
                                    ub.privatU Offline
                                    ub.privat
                                    schrieb am zuletzt editiert von ub.privat
                                    #77

                                    @mcfly11111

                                    Bitte das Script ab Zeile 30 aufmerksam lesen, da ist beschrieben, was zu machen ist!
                                    Für mich als absoluter Laie war das Hilfe genug!

                                    @Machinima hat in diesem Script von "icon" auf "image" umgestellt.
                                    Wenn du das vorgehende Script vergleichst, ist dies einleuchtend.
                                    Der Threadverlauf beschreibt genau deine Frage!
                                    Du musst dir die icons "aufwendig" von materialicons herunterladen und in den Pfad unter der VIS ablegen.

                                    Nur Mut und ein wenig Geduld, das bekommst Du hin.
                                    Je mehr du dich in die Materie einarbeitest, destso mehr versteht man die Scripte und die Arbeit der Jungs.
                                    Geht zumindest mir so...

                                    M 1 Antwort Letzte Antwort
                                    0
                                    • ub.privatU ub.privat

                                      @mcfly11111

                                      Bitte das Script ab Zeile 30 aufmerksam lesen, da ist beschrieben, was zu machen ist!
                                      Für mich als absoluter Laie war das Hilfe genug!

                                      @Machinima hat in diesem Script von "icon" auf "image" umgestellt.
                                      Wenn du das vorgehende Script vergleichst, ist dies einleuchtend.
                                      Der Threadverlauf beschreibt genau deine Frage!
                                      Du musst dir die icons "aufwendig" von materialicons herunterladen und in den Pfad unter der VIS ablegen.

                                      Nur Mut und ein wenig Geduld, das bekommst Du hin.
                                      Je mehr du dich in die Materie einarbeitest, destso mehr versteht man die Scripte und die Arbeit der Jungs.
                                      Geht zumindest mir so...

                                      M Offline
                                      M Offline
                                      mcfly11111
                                      schrieb am zuletzt editiert von
                                      #78

                                      @ub-privat

                                      das script hab ich gelesen und das neue (1.0.2) auch verstanden.
                                      Mir geht es aber um die 1.0.1, wo noch die Standard-Icons verwendet wurden.
                                      Ich trage unter devices nas, router oder amazon ein und die icons werden angezeigt. Meine Frage ist, woher kommen diese, also in welchem Verzeichnis befinden sie sich und gibt es eine Übersicht, wo alle icons angezeigt werden?

                                      Die adapter icons.material.png und icons.material.svg, sowie vis.material, vis.materialdesign und vis.material.webfont sind installiert.

                                      Danke

                                      ub.privatU 1 Antwort Letzte Antwort
                                      0
                                      • M mcfly11111

                                        @ub-privat

                                        das script hab ich gelesen und das neue (1.0.2) auch verstanden.
                                        Mir geht es aber um die 1.0.1, wo noch die Standard-Icons verwendet wurden.
                                        Ich trage unter devices nas, router oder amazon ein und die icons werden angezeigt. Meine Frage ist, woher kommen diese, also in welchem Verzeichnis befinden sie sich und gibt es eine Übersicht, wo alle icons angezeigt werden?

                                        Die adapter icons.material.png und icons.material.svg, sowie vis.material, vis.materialdesign und vis.material.webfont sind installiert.

                                        Danke

                                        ub.privatU Offline
                                        ub.privatU Offline
                                        ub.privat
                                        schrieb am zuletzt editiert von
                                        #79

                                        @mcfly11111

                                        Die Icons musst du von https://materialdesignicons.com/ herunterladen und via VIS-Download in ein von dir definiertes Verzeichnis laden. Im Script ordnest du die korrekten png-Namen zu und beschreibst den Ordner, wo die von dir notwendigen Icons liegen.

                                        Du kannst auch von dir selbst definierte PNGs ablegen und zuordnen. Ergo das gleiche Vorgehen!

                                        Thats it...

                                        sigi234S 1 Antwort Letzte Antwort
                                        0
                                        • ub.privatU ub.privat

                                          @mcfly11111

                                          Die Icons musst du von https://materialdesignicons.com/ herunterladen und via VIS-Download in ein von dir definiertes Verzeichnis laden. Im Script ordnest du die korrekten png-Namen zu und beschreibst den Ordner, wo die von dir notwendigen Icons liegen.

                                          Du kannst auch von dir selbst definierte PNGs ablegen und zuordnen. Ergo das gleiche Vorgehen!

                                          Thats it...

                                          sigi234S Online
                                          sigi234S Online
                                          sigi234
                                          Forum Testing Most Active
                                          schrieb am zuletzt editiert von
                                          #80

                                          @ub-privat sagte in Material Design Widets: Netzwerk Status:

                                          Thats it...

                                          Jupp...

                                          Screenshot (1956).png

                                          Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                                          Immer Daten sichern!

                                          ub.privatU D3ltoroxpD NegaleinN 3 Antworten Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          653

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Home
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe