Material Design Widets: Netzwerk Status

D3ltoroxp

@sigi234 said in Material Design Widets: Netzwerk Status:

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

Thats it...

Jupp...

Klappt bei mir mal wieder nicht.

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..

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

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!

@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

@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

D3ltoroxp

@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 !!

Stephan Schleich

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

@Nickel Hab mein Screen vergessen ^^

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

@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

@Nickel Danke funktioniert nun wunderbar

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

micklafisch

@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:

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"

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.

tobasium

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

micklafisch

@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!

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

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

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

@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.
Die Werte auf der Rechten Seite sind aktuell noch im Code versuche es aber auch auf den Untertext umzustellen im nächsten Update.

micklafisch

@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

Negalein

@sigi234 sagte in Material Design Widets: Netzwerk Status:

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

Thats it...

Jupp...

Griasde Sigi!

Hast du die PNG's zufällig noch?

sigi234

@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

NEWS

Material Design Widets: Netzwerk Status

Support us

692
Online

31.9k
Users

80.2k
Topics

1.3m
Posts

NEWS

Material Design Widets: Netzwerk Status

Support us

692Online

31.9kUsers

80.2kTopics

1.3mPosts

692
Online

31.9k
Users

80.2k
Topics

1.3m
Posts