Material Design Widets: Netzwerk Status

[sigi234]

@Machinima sagte in Material Design Widets: Netzwerk Status:

Welchen Adapter meint ihr mit "Fritzbox"? Diesen hier, siehe Screenshot

https://github.com/iobroker-community-adapters/ioBroker.tr-064

[Glasfaser]

@Machinima

Wie hier meine ich :

siehe : IP Devices im Netzwerk - HTML Tabelle vis, Iqontrol

[liv-in-sky]

@Glasfaser wenn ihr da etwas braucht - evtl ein json file - evtl könnte ich das in das script einbauen und in einen datenpunkt schreiben - dann könnt ihr das für dieses script verwenden

[Stephan Schleich]

Fügt ihr neue Endgeräte immer manuell in den TR-64 ein oder hat das jemand automatisiert?
Ansonsten klappt's einwandfrei - Danke

[HoffmannOs]

Kann ich das auch mit dem Unifi Adapter nutzen? was müsste ich dazu anpassen?

[darkiop]

@HoffmannOs sagte in Material Design Widets: Netzwerk Status:

Kann ich das auch mit dem Unifi Adapter nutzen? was müsste ich dazu anpassen?

Eine Variante dafür ist gerade von @Scrounger in Arbeit - Geduld

[HoffmannOs]

@darkiop Mega! Sorry dann habe ich diesen Part wohl überlesen

[PatrickFro]

Nach einem katastophalen Update des TR 064 habe ich nun die Netzwerkansicht zum Laufen bekommen. Allerdings erscheinen bei mir seit etwa einer Stunde mehrere Geräte doppelt:

Sie sind jeweils nur einfach hinterlegt. Woran kann dies liegen?

[Stephan Schleich]

@PatrickFro Du hast bestimmt doppelte Einträge im tr Adapter drin stehen

[PatrickFro]

Super, vielen Dank. Ich habe auf der FritzBox einige Geräte umbenannt, diese konnte TR dann nicht mehr finden. Ich ging davon aus, dass über IP-Adresse sortiert wird.

Karteileichen im Adapter gelöscht, schon gehts wieder. Danke!

[Machinima]

@sigi234
Genau den Adapter verwende ich doch im Skript, siehe 1. Post

@Stephan-Schleich
Bisher immer manuell. Ein Discovery der im Netzwerk verfügbaren Geräten über den Adapter gibt es bisher nicht. Keine Ahnung, ob das möglich. Da müsstest du mal in dem passenden Thread nachfragen.

@Glasfaser
Schau ich mir an

[sigi234]

@Machinima sagte in Material Design Widets: Netzwerk Status:

Genau den Adapter verwende ich doch im Skript, siehe 1. Post

Dieser liest aber nicht das gesamte Netzwerk aus, sondern nur die eingetragenen im Adapter.

[Machinima]

@sigi234
Mehr kann der Adapter doch auch nicht. Oder habe ich hier was übersehen? Es werden nur die getrackt, die manuell eingetragen bzw. hinzugefügt wurden. Wenn das gesamte Netzwerk gescannt werden soll, müsste der Adapter angepasst werden.

[sigi234]

@Machinima sagte in Material Design Widets: Netzwerk Status:

@sigi234
Mehr kann der Adapter doch auch nicht. Oder habe ich hier was übersehen? Es werden nur die getrackt, die manuell eingetragen bzw. hinzugefügt wurden. Wenn das gesamte Netzwerk gescannt werden soll, müsste der Adapter angepasst werden.

Nein, so was wie hier:

https://forum.iobroker.net/topic/30875/material-design-widgets-unifi-netzwerk-status

[Machinima]

@sigi234
Für das Scannen im gesamten Netzwerk gibt es ja bereits einen Thread, siehe IP Devices im Netzwerk - HTML Tabelle vis, Iqontrol. Da erstelle ich momentan ein Skript, dass die benötigten Daten automatisch erfasst. Aber für den TR064-Adapter kann ich mich nur wiederholen: die Geräte werden nicht automatisch hinzugefügt (siehe Readme Punkt Features -> Presence). Kannst du mir da die Funktion zeigen, so ich sie denn übersehen habe?

[sigi234]

@Machinima sagte in Material Design Widets: Netzwerk Status:

Aber für den TR064-Adapter kann ich mich nur wiederholen: die Geräte werden nicht automatisch hinzugefügt (siehe Readme Punkt Features -> Presence). Kannst du mir da die Funktion zeigen, so ich sie denn übersehen habe?

Ja das weis ich du hast sie nicht übersehen.

[bommel_030]

@Machinima
Ich habe mal dein Skript um die letzte An- und Abmeldung erweitert. Die entsprechenden States werden im TR064-Adapter allerdings erst gesetzt wenn Sie benötigt werden. Also alle fehlenden An- / bzw. Abmeldungen abgefangen und das Widget füllt sich sauber.

Leider schreibt er mir für jeden State den er nicht findet eine Warnung ins LOG. Hab mich auch mit existsState(id) beschäftigt, bin mit meinen rudimentären JavaScript-Fähigkeiten aber gescheitert... Vielleicht kannst du oder @Scrounger mit ja nen Tipp geben wie ich die Warnmeldungen abfangen kann.

Und wenn wir schon dabei sind, gibt es eine Möglichkeit, die Dicke der StatusBar im Skript zu ändern? Also sinngemäß, bei grün = 4px, bei rot = 8 px?

Wenn ich über CSS gehe, dann macht er mir ja immer alle entsprechend dick, oder?

Skript

const moment = require("moment");
 
// Skript Einstellungen *************************************************************************************************************************************************
 
let dpList = '0_userdata.0.VIS.Datenpunkte.TR064.jsonList';                    // Datenpunkt für IconList Widget (Typ: Zeichenkette (String))
 
let dpSortMode = '0_userdata.0.VIS.Datenpunkte.TR064.sortMode';                // Datenpunkt für Sortieren (Typ: Zeichenkette (String))
let dpFilterMode = '0_userdata.0.VIS.Datenpunkte.TR064.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 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)

//let farbeAdapterWerte = '#eceff1';                                       // Sekundärfarbe Adapterwerte, einer muss auskommentiert sein !
let farbeAdapterWerte = getState('0_userdata.0.VIS.Farben.Schrift_AdapterStatus_SubText').val;   // Sekundärfarbe aus Datenpunkt, einer muss auskommentiert sein !
let imageColor = '#eceff1';
// über die IP erfolgt das Matching mit den Einträgen aus dem TR064-Adapter; Alias und Icon werden für die View benötigt; Icons siehe https://materialdesignicons.com/; weitere Einträge müsst ihr für euch ergänzen 
const deviceNames = 
[
{ ip: "192.168.10.1", alias: "Fritzbox Master",          icon: "router-wireless" }, 
{ ip: "192.168.10.2", alias: "Fritzbox Slave",          icon: "router-wireless-settings" },
];
 
// **********************************************************************************************************************************************************************
let lastanmeldung = 'tesa'
let lastabmeldung = 'kleber'

// 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 = 'help-network-outline';
            let deviceName = obj.common.name.replace(/ \((?:\d{1,3}\.){3}\d{1,3}\)/g, '');
            let device = deviceNames.find(element => element.ip == ipAddress);
            // Letzte Anmeldung auslesen
            if(getState(id + '.lastActive').notExist)  {lastanmeldung = 'noch nicht angemeldet' }
                else {
                        lastanmeldung = getState(id + '.lastActive').val;
                    }
            // Letzte Abmeldung auslesen
            if(getState(id + '.lastInactive').notExist)  {lastabmeldung = 'noch nicht abgemeldet' }
                else {
                        lastabmeldung = getState(id + '.lastInactive').val;
                    }


            if(device)
            {
                deviceName = device.alias;
                image = device.icon;
             }
 
            let macAddress = obj.native.mac;
                     
           // let imageColor = 'white'; // In Konfig oben verschoben
            let statusBarColor = farbeGeraetOffline;
            let status = 2;
 
            if (getState(deviceActiveList[i]).val) {
                statusBarColor = farbeGeraetOnline;
                status = 1;
            }
  
            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; color: ${farbeAdapterWerte};">IP</div>
                               <div style="color: ${farbeAdapterWerte}; 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; color: ${farbeAdapterWerte};">MAC</div>
                               <div style="color: ${farbeAdapterWerte}; font-size: 14px; font-family: RobotoCondensed-LightItalic; text-align: right;">${macAddress}</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; color: ${farbeAdapterWerte};">Letze Anmeldung</div>
                               <div style="color: ${farbeAdapterWerte}; font-size: 14px; font-family: RobotoCondensed-LightItalic; text-align: right;">${lastanmeldung}</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; color: ${farbeAdapterWerte};">Letzte Abmeldung</div>
                               <div style="color: ${farbeAdapterWerte}; font-size: 14px; font-family: RobotoCondensed-LightItalic; text-align: right;">${lastabmeldung}</div>
                           </div>`
 
            deviceList.push({
                text: deviceName,
                subText: subText,
                statusBarColor: statusBarColor,
                image: image,
                imageColor: imageColor,
                listType: "text",
                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;
            }
        }
    }
}

Mal am Rande, wirft der TR-064 Datum und Uhrzeit auch mit AM/PM aus? Muss mich noch damit beschäftigen wie ich das in "normale" Zeiten bekomme...

[Machinima]

@sigi234
Dann kannst du mich sicherlich darüber aufklären, wie ich deine Anfrage umsetzen soll, wenn es diese Funktion nicht gibt. Ich möchte es wirklich gerne verstehen.

@bommel_030 said in Material Design Widets: Netzwerk Status:

Leider schreibt er mir für jeden State den er nicht findet eine Warnung ins LOG. Hab mich auch mit existsState(id) beschäftigt, bin mit meinen rudimentären JavaScript-Fähigkeiten aber gescheitert... Vielleicht kannst du oder @Scrounger mit ja nen Tipp geben wie ich die Warnmeldungen abfangen kann.

Du meinst sicherlich den state lastInactive, oder? lastActive und lastInactive werden bei mir, aus irgendeinem Grund, nicht zuverlässig gesetzt, deswegen habe ich sie erst gar nicht in das Skript mit aufgenommen. Schaue ich mir an!

@bommel_030 said in Material Design Widets: Netzwerk Status:

Und wenn wir schon dabei sind, gibt es eine Möglichkeit, die Dicke der StatusBar im Skript zu ändern? Also sinngemäß, bei grün = 4px, bei rot = 8 px?

Wenn ich über CSS gehe, dann macht er mir ja immer alle entsprechend dick, oder?

Da bin ich überfragt. Vielleicht kann @Scrounger dazu eine Antwort geben.

@bommel_030 said in Material Design Widets: Netzwerk Status:

Mal am Rande, wirft der TR-064 Datum und Uhrzeit auch mit AM/PM aus? Muss mich noch damit beschäftigen wie ich das in "normale" Zeiten bekomme...

Das schaue ich mir auch mal an. Bisher werden die Uhrzeiten bei mir nicht wirklich zuverlässig gesetzt. Das lässt sich aber sicherlich über eine der zahlreichen NPM-Module herausfinden.

[Scrounger]

@Machinima sagte in Material Design Widets: Netzwerk Status:

@bommel_030 said in Material Design Widets: Netzwerk Status:

Und wenn wir schon dabei sind, gibt es eine Möglichkeit, die Dicke der StatusBar im Skript zu ändern? Also sinngemäß, bei grün = 4px, bei rot = 8 px?

Wenn ich über CSS gehe, dann macht er mir ja immer alle entsprechend dick, oder?

Da bin ich überfragt. Vielleicht kann @Scrounger dazu eine Antwort geben.

Das geht leider nicht.

@bommel_030 said in Material Design Widets: Netzwerk Status:

Mal am Rande, wirft der TR-064 Datum und Uhrzeit auch mit AM/PM aus? Muss mich noch damit beschäftigen wie ich das in "normale" Zeiten bekomme...

Das schaue ich mir auch mal an. Bisher werden die Uhrzeiten bei mir nicht wirklich zuverlässig gesetzt. Das lässt sich aber sicherlich über eine der zahlreichen NPM-Module herausfinden.

Kann man ganz einfach mit der momentjs lib umwandeln. Die hast eh schon in deinem Skript drin

[Negalein]

@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