Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Praktische Anwendungen (Showcase)
    4. Material Design Widets: Netzwerk Status

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    Material Design Widets: Netzwerk Status

    This topic has been deleted. Only users with topic management privileges can see it.
    • D3ltoroxp
      D3ltoroxp @sigi234 last edited by

      @sigi234 said in Material Design Widets: Netzwerk Status:

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

      Thats it...

      Jupp...

      Screenshot (1956).png

      Klappt bei mir mal wieder nicht.

      96493fd9-91a9-4cb5-aac0-14625d01a523-image.png

      So sieht es im Script aus ::

      let imagePath = '/vis.0/main/icons/'   
      
      const deviceNames = 
      [{ ip: "192.168.178.60", alias: "ALP 600",                           image: "alp600",                   link: "http://192.168.178.60/login.asp" },
       { ip: "192.168.178.15", alias: "Nvidia Shield",            image: "toggle-switch-outline", link: "http" },
      

      Und hochgeladen im VIS Dateimanager hierhin..

      2d565f4c-e576-4cdc-ac68-73bfabb56306-image.png

      Aber es ist nichts zu sehen. Das png sieht man nur so schlecht, da es auch recht dunkel ist, wie das Theme vom Editor.

      ? 1 Reply Last reply Reply Quote 0
      • 4
        4-Real last edited by 4-Real

        Hallo! Erstmal vielen Dank für die Arbeit die du hier gemacht hast!!
        Habs nun auch vorhin mal versucht funktioniert auch alles! Das einzige was ich nun nicht hinbekomme ist, das ich den Weißen Hintergrund bei den ganzen Geräten wegbekomme, da weiß ich nicht, wie ich das machen kann... Also Quasi das sie Transparent sind und nur der Name + die Zeitstempel ohne Hintergrund angezeigt werden.
        Kann mir da jemand helfen? Vielen Lieben dank schonmal!

        1 Reply Last reply Reply Quote 0
        • ?
          A Former User @D3ltoroxp last edited by A Former User

          @D3ltoroxp
          Für gemischte mal Material Design Icon mal Png bei ca Zeile 110 suchen nach: image = device.image;
          und ersetzten durch:

                          image = device.image;
                          if (image.search(".png") > 0) {
                              image = imagePath + device.image;
                          }
          

          Desweiteren bei allem was ein .png bild ist bei der deviceNames liste ein .png hinter den Namen.

          @Stephan-Schleich
          Leider finde ich den Fehler im Moment nicht zu der Fehlermeldungen.
          Egal was ich bei mir anstelle ich kann sie nicht reproduzieren, gebe aber bescheid wenn ich dennoch was finde oder es eine neue Version gibt.

          @AxelF1977
          Ganz eigenartig dort sollte kein Fehler sein solange Inhalt in der deviceList[sortMode] ist. In diesem Fall wohl im name oder ipAddress. Da davor ein Fehler mit der IP war nehme ich das an das es die IP ist.
          Zum testen die Zeile mit der IP wo der Fehler war (ca Zeile 85) ändern in:

          let ipAddress = myHelper().getStateValueIfExist(id + '.lastIP', "0.0.0.0")
          
          AxelF1977 D3ltoroxp 2 Replies Last reply Reply Quote 2
          • AxelF1977
            AxelF1977 @Guest last edited by

            @Nickel sagte in Material Design Widets: Netzwerk Status:

            @AxelF1977
            Ganz eigenartig dort sollte kein Fehler sein solange Inhalt in der deviceList[sortMode] ist. In diesem Fall wohl im name oder ipAddress. Da davor ein Fehler mit der IP war nehme ich das an das es die IP ist.
            Zum testen die Zeile mit der IP wo der Fehler war (ca Zeile 85) ändern in:

            let ipAddress = myHelper().getStateValueIfExist(id + '.lastIP', "0.0.0.0")
            

            Nabend,

            Danke @Nickel. Der Fehler ist weg. ich gucke es mir morgen alles nochmal genauer an und berichte Dir dann.

            Schönen Abend

            1 Reply Last reply Reply Quote 0
            • D3ltoroxp
              D3ltoroxp @Guest last edited by

              @Nickel said in Material Design Widets: Netzwerk Status:

              @D3ltoroxp
              Für gemischte mal Material Design Icon mal Png bei ca Zeile 110 suchen nach: image = device.image;
              und ersetzten durch:
              image = device.image;
              if (image.search(".png")) {
              image = imagePath + device.image;
              }

              Desweiteren bei allem was ein .png bild ist bei der deviceNames liste ein .png hinter den Namen.

              Vielen Dank Nickel, das hat geholfen !!

              1 Reply Last reply Reply Quote 0
              • Stephan Schleich
                Stephan Schleich @Stephan Schleich last edited by

                @Stephan-Schleich sagte in Material Design Widets: Netzwerk Status:

                @Nickel Hab mein Screen vergessen ^^
                ddab2e52-8cda-4fe7-bb2e-ff313de6b163-image.png

                @Nickel hast du dafür auch ne Lösung?

                ? 1 Reply Last reply Reply Quote 0
                • ?
                  A Former User @Stephan Schleich last edited by

                  @Stephan-Schleich
                  Falls Zeile 86 das mit den speed ist ersetz sie mal durch:

                               let mbits = myHelper().getStateValueIfExist(id + '.speed', "0");
                               let speed = (mbits != "0") ? mbits + ' MBit/s' : '-';
                  

                  Wenn nein kannst du bitte Zeile 86 Posten?

                  Stephan Schleich 1 Reply Last reply Reply Quote 1
                  • Stephan Schleich
                    Stephan Schleich @Guest last edited by Stephan Schleich

                    @Nickel Danke funktioniert nun wunderbar 👍

                    Was mir noch aufgefallen ist, ist das die Online/Offline Anzeige beim Router immer auf Offline steht

                    M 1 Reply Last reply Reply Quote 0
                    • M
                      micklafisch @Stephan Schleich last edited by

                      @Stephan-Schleich sagte in Material Design Widets: Netzwerk Status:

                      Was mir noch aufgefallen ist, ist das die Online/Offline Anzeige beim Router immer auf Offline steht

                      Das Problem habe ich auch. Der Router ist angeblich immer offline 🤔

                      Zusätzlich passt die Sortierung nach IP nicht:

                      netzwerkstatus.png

                      1 Reply Last reply Reply Quote 0
                      • M
                        micklafisch last edited by micklafisch

                        nebem der Erkennung des Routers ist auch die Erkennung der VPN Verbindungen fehlgeschlagen. Die Verbindung wird korrekt mit grün oder rot angezeigt aber auch dort erscheint "offline"

                        netzwerkstatus2.png

                        1 Reply Last reply Reply Quote 0
                        • ?
                          A Former User last edited by A Former User

                          Das mit den Router habe ich schon ne Lösung und bei den VPN Verbindungen kann ich es leider nicht reproduzieren da ich keine einrichten kann bei meinem Setup.
                          Hier mal zum testen ein etwas um modifiziertes Script ob alles Funktioniert.

                          Hinweis: Dieser Code ist nicht für den TR-064 Adapter

                          /* FritzBox Presence Check
                          * created by Nickel - based on Network Status from Machinima
                          * 
                          * Vorraussetztungen
                          *  - Material Design Widgets
                          *  - fb-checkpresence
                          * 
                          * Versionshistorie:
                          * 1.0.0:
                          * - Initial Release
                          */
                          // 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 imagePath = '/vis.0/main/icons/'                                // Pfad zu den verwendeten Bildern (bitte über den VIS Dateimanager hochladen)
                                                                                             // Das Bild (Dateiformat png) in der Mapping-Liste hinterlegen
                          let defaultImage1 = 'ip-network-outline';                           // Standardbild, Ethernet (Material Design Icons)
                          let defaultImage2 = 'wifi';                                         // Standardbild, Wifi (Material Design Icons)
                          let defaultImage3 = 'network-off-outline';                          // Standardbild, Offline (Material Design Icons)
                          
                          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.20.1",   alias: "FritzBox",              image: "fritzbox.png",            link: "http"}
                          ];
                          
                          // **********************************************************************************************************************************************************************
                          
                          // Selector für LAN & WLAN Devices
                          let devices = $(`[id=fb-checkpresence.*.fb-devices.*.active]`);
                          
                          // Funktion adapterStatus alle x Sekunden ausführen
                          schedule('*/' + checkInterval + ' * * * * *', 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);
                          
                          // Hauptfunktion
                          function netzwerkStatus() {
                             try {
                                 let deviceList = [];
                          
                                 for (var i = 0; i <= devices.length - 1; i++) {
                                     let idDevice = devices[i].replace('.active', '');
                                     let isConn = (getStateIfExist(devices[i]) == '1') ? true : false;
                                     let ipAddress = getStateIfExist(idDevice + ".ipaddress", '-');
                                     let mac = getStateIfExist(idDevice + ".macaddress");
                                     let name = idDevice.replace(/fb-checkpresence\.[0-9]\.fb-devices\./i, "");
                                     let connection = getStateIfExist(idDevice + '.interfacetype', '-');
                                     let speed = getStateIfExist(idDevice + '.speed', '0');
                                     speed = (speed == "0") ? '-' : speed + ' MBit/s';
                                     let isGuest = getState(idDevice + ".guest").val;
                                     let isWired = true;
                          
                                     let listType = 'text';
                                     let image = defaultImage3;
                                     let buttonLink = '';
                                     let statusBarColor = farbeGeraetOffline;
                          
                                     if (isConn === true) {
                                         statusBarColor = farbeGeraetOnline;
                                         image = (connection == "802.11") ? defaultImage2 : defaultImage1
                                     }
                          
                                     if (connection == "802.11") {
                                         connection = "Wireless-Lan";
                                         isWired = false;
                                     }
                          
                                     let device = deviceNames.find(element => element.ip == ipAddress);
                                     if (device) {
                                         name = device.alias;
                                         if (device.image.search("png") > 0) {
                                             image = imagePath + device.image;
                                         } 
                                         if (device.link) {
                                             listType = 'buttonLink';
                                             name = `<span style="text-decoration: underline">${name}</span>`
                                             buttonLink = (device.link == 'http') ?  'http://${ipAddress}' : device.link
                                         }
                                     }
                          
                                     let text = name;
                                     if (isGuest === true) {
                                         text = '<span class="mdi mdi-account-box" style="color: #ff9800;"> ${name}</span>';
                                     }
                                     let subText = `<div style="display: flex; flex-direction: row; line-height: 1.3; padding-left: 1px; padding-right: 8px; align-items: center;">
                                                         <div style="flex: 1; width: 1px; text-overflow: ellipsis; overflow: hidden;">IP-Addresse</div>
                                                         <div style="color: grey; font-size: 14px; font-family: RobotoCondensed-LightItalic; text-align: right;">${ipAddress}</div>
                                                     </div>
                                                     <div style="display: flex; flex-direction: row; line-height: 1.3; padding-left: 1px; padding-right: 8px; align-items: center;">
                                                         <div style="flex: 1; width: 1px; text-overflow: ellipsis; overflow: hidden;">Verbindung</div>
                                                         <div style="color: grey; font-size: 14px; font-family: RobotoCondensed-LightItalic; text-align: right;">${connection}</div>
                                                     </div><div style="display: flex; flex-direction: row; line-height: 1.3; padding-left: 1px; padding-right: 8px; align-items: center;">
                                                         <div style="flex: 1; width: 1px; text-overflow: ellipsis; overflow: hidden;">Geschwindigkeit</div>
                                                         <div style="color: grey; font-size: 14px; font-family: RobotoCondensed-LightItalic; text-align: right;">${speed}</div>
                                                     </div>`
                                         
                                     deviceList.push({
                                         text: text,
                                         subText: subText,
                                         listType: listType,
                                         buttonLink: buttonLink,
                                         image: image,
                                         statusBarColor: statusBarColor,
                                         name: name,
                                         ipAddress: ipAddress,
                                         speed: parseFloat(getStateIfExist(idDevice + '.speed', '0')),
                                         status: isConn,
                                         isWired: isWired
                                     });
                                 }
                          
                                 let sortMode = existsState(dpSortMode) ? getState(dpSortMode).val : 'ipAddress';
                          
                                 if (sortMode === 'name') {
                                     deviceList.sort(function (a, b) {
                                         return a[sortMode].toLowerCase() == b[sortMode].toLowerCase() ? 0 : +(a[sortMode].toLowerCase() > b[sortMode].toLowerCase()) || -1;
                                     });
                                 } else if (sortMode === 'ipAddress') {
                                     deviceList.sort(function (a, b) {
                                         return a[sortMode].split('.')[0] - b[sortMode].split('.')[0] || a[sortMode].split('.')[1] - b[sortMode].split('.')[1] || a[sortMode].split('.')[2] - b[sortMode].split('.')[2] || a[sortMode].split('.')[3] - b[sortMode].split('.')[3]
                                     });
                                 } else if (sortMode === 'status' || sortMode === 'speed') {
                                     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 = existsState(dpFilterMode) ? getState(dpFilterMode).val : '';
                          
                                 if (filterMode && filterMode !== null && filterMode !== '') {
                                     if (filterMode === 'offline') {
                                         deviceList = deviceList.filter(function (item) {
                                             return item.status === false;
                                         });
                                     } else if (filterMode === 'online') {
                                         deviceList = deviceList.filter(function (item) {
                                             return item.status === true;
                                         });
                                     }
                                 }
                          
                                 let result = JSON.stringify(deviceList);
                                 if (existsState(dpList) && getState(dpList).val !== result) {
                                     setState(dpList, result, true);
                                 } else {
                                     setState(dpList, result, true);
                                 }
                          
                             } catch (err) {
                                 console.error(`[netzwerkStatus] error: ${err.message}, stack: ${err.stack}`);
                             }
                          
                             // Funktionen
                             function getStateIfExist(id, nullValue = '', prepand = '', append = '') {
                                 if (existsState(id)) {
                                     return prepand + getState(id).val + append;
                                 } else {
                                     return nullValue;
                                 }
                             }
                          }
                          
                          // Beim Staren des Skriptes Status abrufen
                          netzwerkStatus();
                          
                          
                          function resetSort() {
                             let sortMode = existsState(dpSortMode) ? getState(dpSortMode).val : '';
                          
                             if (sortResetAfter > 0) {
                                 setTimeout(function () {
                                     if (existsState(dpSortMode) && sortMode === getState(dpSortMode).val) {
                                         setState(dpSortMode, sortReset);
                                     }
                                 }, sortResetAfter * 1000);
                             }
                          }
                          
                          function resetFilter() {
                             let filterMode = existsState(dpFilterMode) ? getState(dpFilterMode).val : '';
                          
                             if (filterResetAfter > 0) {
                                 setTimeout(function () {
                                     if (existsState(dpFilterMode) && filterMode === getState(dpFilterMode).val) {
                                         setState(dpFilterMode, '');
                                     }
                                 }, filterResetAfter * 1000);
                             }
                          }
                          

                          Falls noch andere interessiert sind es ist für den Adapter: FritzBox CheckPresence (fb-checkpresence), einfach melden.

                          M Negalein A 3 Replies Last reply Reply Quote 2
                          • tobasium
                            tobasium last edited by

                            Hallo Zusammen,

                            irgendwo hänge ich leider noch. Habe das script gestartet Datenpunkte erstellt aber erhalte folgenden Fehler:

                            javascript.0 (24900) script.js.java.TR064-Status: [netzwerkStatus] error: deviceNames.find is not a function, stack: TypeError: deviceNames.find is not a function at Object.netzwerkStatus (script.js.java.TR064-Status:92:38) at Job.job (/opt/iobroker/node_modules/iobroker.javascript/lib/sandbox.js:1270:34) at Job.invoke (/opt/iobroker/node_modules/iobroker.javascript/node_modules/node-schedule/lib/schedule.js:173:10) at /opt/iobroker/node_modules/iobroker.javascript/node_modules/node-schedule/lib/schedule.js:543:11 at Timeout._onTimeout (/opt/iobroker/node_modules/iobroker.javascript/node_modules/node-schedule/lib/schedule.js:501:7) at listOnTimeout (internal/timers.js:549:17) at processTimers (internal/timers.js:492:7)
                            

                            Hat mir hier jemand einen Ansatz wo ich den Fehler finde.

                            Danke

                            1 Reply Last reply Reply Quote 0
                            • M
                              micklafisch @Guest last edited by

                              @Nickel
                              ja sieht gut aus. Die Verbindung bei Router und VPN wird jetzt nichts angezeigt und nicht mehr "offline". Anhand der Farbe wird der Status korrekt dargestellt.

                              Die Sortierung nach IP Adresssen sieht nun auch sehr gut aus.

                              Von meiner Seite aus aktuell keine Anmerkungen oder Fehler feststellbar.

                              Danke!

                              1 Reply Last reply Reply Quote 0
                              • Stephan Schleich
                                Stephan Schleich last edited by Stephan Schleich

                                @Nickel kann ich bestätigen, top Vielen Dank.
                                Einen Wunsch hätte ich noch und zwar eine Sortierung nach Status (online/offline) und eine Frage wie ich in der Zeile 101 die Schriftgröße ändern kann

                                M 1 Reply Last reply Reply Quote 0
                                • M
                                  micklafisch @Stephan Schleich last edited by micklafisch

                                  @Stephan-Schleich
                                  ich hab das bereits bei mir hinzugefügt:

                                  Du musst den JSON String im Widget "sortMode" in der VIS anpassen. Ich habe meinen JSON String wie folgt ergänzt:

                                  [
                                  	{
                                  		"text": "Gerätename",
                                  		"value": "name",
                                  		"icon": "alphabet-latin"
                                  	},
                                  	{
                                  		"text": "IP Adresse",
                                  		"value": "ipAddress",
                                  		"icon": "ip"
                                  	},
                                  	{
                                  		"text": "Geschwindigkeit",
                                  		"value": "speed",
                                  		"icon": "speedometer"
                                  	},
                                  	{
                                  		"text": "Status",
                                  		"value": "status",
                                  		"icon": "state-machine"
                                  	}
                                  ]
                                  
                                  

                                  Bezüglich der Schriftgröße: du willst nur die angezeigte Geschwindigkeit größer darstellen? Schau mal in die Zeile 147, da wird die Schriftgröße für "Speed" definiert.

                                  Stephan Schleich ? 2 Replies Last reply Reply Quote 0
                                  • Stephan Schleich
                                    Stephan Schleich @micklafisch last edited by

                                    @micklafisch danke, Werd ich testen, ne ich mein schon den namen des Gerätes

                                    M 1 Reply Last reply Reply Quote 0
                                    • ?
                                      A Former User @micklafisch last edited by

                                      @micklafisch
                                      Finde ja lustig das du die weitere Sortiermethode gefunden hast, da ich noch nicht gesagt habe das sie existiert, weil ich damit noch teste. Nächste Planung jetzt für das Wochenende ist Filtern (W-Lan, Lan etc).
                                      Komme nach und mach immer mehr in Javascript als Sprache rein.

                                      @Stephan-Schleich
                                      Die Schriftgröße kannst du im Vis Editor ändern.
                                      1ddfc7cc-2943-4062-af94-3a2e54cdd394-image.png Die Werte auf der Rechten Seite sind aktuell noch im Code versuche es aber auch auf den Untertext umzustellen im nächsten Update.

                                      1 Reply Last reply Reply Quote 1
                                      • M
                                        micklafisch @Stephan Schleich last edited by

                                        @Stephan-Schleich
                                        sorry, wollte nicht spoilern 😊
                                        Hatte mich auf die Suche nach sinnvollen weiteren Sortierungen begeben und ich muss sagen das funktioniert bisher sehr gut 😊

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

                                          @sigi234 sagte in Material Design Widets: Netzwerk Status:

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

                                          Thats it...

                                          Jupp...

                                          Screenshot (1956).png

                                          Griasde Sigi!

                                          Hast du die PNG's zufällig noch?

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

                                            @Negalein sagte in Material Design Widets: Netzwerk Status:

                                            @sigi234 sagte in Material Design Widets: Netzwerk Status:

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

                                            Griasde Sigi!

                                            Hast du die PNG's zufällig noch?

                                            Icons_Netzwerkstatus.zip

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            894
                                            Online

                                            31.9k
                                            Users

                                            80.2k
                                            Topics

                                            1.3m
                                            Posts

                                            50
                                            280
                                            40384
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo