Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

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

[sigi234]

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

Thats it...

Jupp...

[ub.privat]

@sigi234

Sigi, wenn ich deine Views sehe, bin ich immer hin und her gerissen. Entweder Materialdesign oder dein Design...
Schaut Klasse aus, hast wirklich ein

Spoiler

:eye: für gutes Design!!!

Wir sollten ALLE Mal eine Icon- und Imagessammlung zentralisiert erarbeiten!
Diese könnte dann allen zugänglich und hilfreich sein... Quasi eine IOBROKER Sammlung.

[Negalein]

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

Wir sollten ALLE Mal eine Icon- und Imagessammlung zentralisiert erarbeiten!

Ja, das wär ne sehr gute Idee.

@sigi234 fängst du an? :grinning:

[Conquest]

Hallo ich bekomme beim Scriptstart einen Error kann mir jemand sagen was ich falsch mache?

[arteck]

@Conquest da ist ein Datenpunkt nicht gefüllt.. deshlab bricht das Script ab

[Conquest]

@arteck sagte in Material Design Widets: Netzwerk Status:

@Conquest da ist ein Datenpunkt nicht gefüllt.. deshlab bricht das Script ab

Ok hab aber keine Ahnung woran es liegt. Bekomm es einfach nicht zum laufen.
Fehlermeldung:

Script:

Spoiler

/* 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/MaterialHome/myimages/'                 // 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.31", alias: "Mi9TPro",                           image: "Fritzbox7590",                   link: "" },

];

// **********************************************************************************************************************************************************************

// 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;
           }
       }
   }
}

Datenpunkte:

Vielleicht kann mir ja noch jemand helfen den Fehler zu finden.
Vielen Dank schon mal.

[Knallochse]

@Conquest welche Version des tr-064 Adapter hast du installiert?

[Conquest]

@Knallochse sagte in Material Design Widets: Netzwerk Status:

@Conquest welche Version des tr-064 Adapter hast du installiert?

[Knallochse]

@Conquest musst du updaten. Aktuell ist 3.1.4

[Conquest]

@Knallochse sagte in Material Design Widets: Netzwerk Status:

@Conquest musst du updaten. Aktuell ist 3.1.4

Läuft. Vielen Dank.

[Knallochse]

@Machinima Ich danke dir vielmals für die Bereitstellung deines Projekt.
Hat auf Anhieb tadellos funktioniert.
Richtig geil wäre noch, wenn man eine manuelle Sortierfunktion hätte.

[Machinima]

@mcfly11111 said in Material Design Widets: Netzwerk Status:

@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

Die Icons von https://materialdesignicons.com kann man herunterladen, muss man aber nicht. Diese werden bereits durch den materialdesign-Widget-Adapter von Scrounger automatisch eingebunden. Ich nehme mal an, dass die direkt als NPM-Modul geladen werden und dadurch in keinem Verzeichnis zu finden sind.

@Knallochse said in Material Design Widets: Netzwerk Status:

@Machinima Ich danke dir vielmals für die Bereitstellung deines Projekt.
Hat auf Anhieb tadellos funktioniert.
Richtig geil wäre noch, wenn man eine manuelle Sortierfunktion hätte.

Man kann doch manuell die Sortierung umstellen, eben nur zwischen Gerätename und IP-Adresse. ;) Oder was stellst du dir da konkret vor?

[Knallochse]

@Machinima ich meinte mit manuellen Sortieren, dass ich die Reihenfolge der Geräte selbst festlegen kann, also nicht alphabetisch. (Vielleicht über den Alias-Teil im Script - anzeigereihenfolge wie angegeben) Möchte anfügen, dass wäre „nice to have“ , da ich mit dem derzeitigen Stand schon sehr zufrieden bin.
Danke nochmals dafür

[Machinima]

@Knallochse
Das müsste theoretisch über eine weitere Eigenschaft in der deviceNames-Auflistung realisierbar sein, z.B. über eine Zählervariable, die man selbst vergeben. Wenn die View initial geladen bzw. die aktuell verwendete Sortierung zurückgesetzt wird, käme deine für dich angepasste Sortierung zum Zug. Kann ich gerne noch mit einbauen.

[Knallochse]

@Machinima ich danke dir

[Stephan Schleich]

Was müsste man alles ändern um es fb-checkpresence tauglich zu machen? Dieser Adapter aktualisiert die devices autoamtisch nicht so wieder der TR-64 wo man's manuell machen muss.

[PatrickFro]

Folgende Fehlermeldung habe ich bei nach jedem Neustart vom Raspi / IoBroker im Log:

javascript.0	2020-03-15 12:48:00.493	error	(22514) script.js.Anzeigen.Netzwerkview: [netzwerkStatus] error: Cannot read property 'common' of null, stack: TypeError: Cannot read property 'common' of null at Object.netzwerkStatus (script.js.
javascript.0	2020-03-15 12:48:00.492	warn	(22514) Object "tr-064.0.devices.Android" does not exist

Sobald ich das Script neu starte, erscheint dieser Fehler nicht mehr.

Ich habe kein Gerät namens Android, habe es auch noch nie besessen. Es ist keine entsprechende Definition im Script. Auch im TR064-Adapter habe ich keinen Datenpunkt mit diesem Namen.

Was kann ich hier tun? Woran kann es liegen?

[Glasfaser]

@PatrickFro

Das liegt nicht am Script , er holt sich ja nur die Daten !

Eintrag vom 5.März:
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?

Lege mal bitte ein Gerät in tr-064 an und bezeichne es dann als Android und nach dem erstellen wieder löschen .
Wenn du nicht weiterkommt dann , bitte hier im weiter posten Link Text , da es nichts mit dem Script zu tun hat !

[Stephan Schleich]

@Machinima was muss man im Script ändern damit es mit dem fb-checkpresence Adapter läuft?