Material Design Widets: Netzwerk Status

[helfi9999]

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

Spoiler

[seelmkrl]

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

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

[sigi234]

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

[ub.privat]

@Machinima

Hallo und einen angenehmen guten Abend!
Klappt soweit ganz gut - SUPER und VIELEN DANK!!! , 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?
   
   Habe nur dort Links eingefügt, wo auch eine entsprechende eigene Website vorhanden ist.
   Oder müssen die restlichen mit "http" aufgefüllt werden???

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

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

[Scrounger]

@Machinima

Muss nicht implementiert werden, geht schon

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

[sigi234]

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

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

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

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?

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