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

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Material Design Widets: Netzwerk Status

    This topic has been deleted. Only users with topic management privileges can see it.
    • Negalein
      Negalein Global Moderator @Machinima last edited by

      @Machinima sagte in Material Design Widets: Netzwerk Status:

      Ich habe die View und das Skript leicht angepasst, siehe 1. Post.

      Super, dann warte ich mit dem Script noch bis die eigenen Bilder kommen. 🙂
      Es läuft ja nichts davon

      1 Reply Last reply Reply Quote 0
      • H
        helfi9999 @Glasfaser last edited by

        @Glasfaser Danke habe es auch gerade gefunden.
        👍

        B 1 Reply Last reply Reply Quote 0
        • B
          bommel_030 @helfi9999 last edited by bommel_030

          @seelmkrl
          Danke, hat aber nicht funktioniert. Hat JavaScript als Fehler angemeckert.
          Hab mal bei @Scrounger kopiert, damit klappt es bei mir:

          // Letzte Anmeldung auslesen
          let lastanmeldung = existsState(id + '.lastActive') ?moment((getState(id + '.lastActive').val)).format("DD.MM.YY HH:mm:ss") : 'noch nicht angemeldet';
          // Letzte Abmeldung auslesen        
          let lastabmeldung = existsState(id + '.lastInactive') ? moment((getState(id + '.lastInactive').val)).format("DD.MM.YY HH:mm:ss") : 'noch nicht abgemeldet';
          

          @ub-privat
          Die Warnungen kommen wahrscheinlich daher, dass einige Geräte noch nicht an- oder abgemeldet waren. Tausch mal den oberen Teil aus, sind die Warnungen dann weg?
          Edit, Code korrigiert und moment() Umwandlung hinzu.

          S 1 Reply Last reply Reply Quote 0
          • H
            helfi9999 @Machinima last edited by

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


            Bild 2.png

            1 Reply Last reply Reply Quote 0
            • S
              seelmkrl @bommel_030 last edited by

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

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

                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 ub.privat 2 Replies Last reply Reply Quote 1
                • sigi234
                  sigi234 Forum Testing Most Active @Machinima last edited by 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.

                  1 Reply Last reply Reply Quote 0
                  • ub.privat
                    ub.privat @Machinima last edited by

                    @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?
                      e406a809-c176-4aca-863d-d1b52a4ecc0d-grafik.png
                      Habe nur dort Links eingefügt, wo auch eine entsprechende eigene Website vorhanden ist.
                      Oder müssen die restlichen mit "http" aufgefüllt werden???
                    M 1 Reply Last reply Reply Quote 0
                    • M
                      Machinima @ub.privat last edited by 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:

                      1. 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?
                        e406a809-c176-4aca-863d-d1b52a4ecc0d-grafik.png
                        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 1 Reply Last reply Reply Quote 0
                      • Scrounger
                        Scrounger Developer @Machinima last edited by 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

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

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

                          1 Reply Last reply Reply Quote 0
                          • M
                            mcfly11111 @Machinima last edited by

                            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 1 Reply Last reply Reply Quote 0
                            • ub.privat
                              ub.privat @mcfly11111 last edited by 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...

                              M 1 Reply Last reply Reply Quote 0
                              • M
                                mcfly11111 @ub.privat last edited by

                                @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 1 Reply Last reply Reply Quote 0
                                • ub.privat
                                  ub.privat @mcfly11111 last edited by

                                  @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 1 Reply Last reply Reply Quote 0
                                  • sigi234
                                    sigi234 Forum Testing Most Active @ub.privat last edited by

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

                                    Thats it...

                                    Jupp...

                                    Screenshot (1956).png

                                    ub.privat D3ltoroxp Negalein 3 Replies Last reply Reply Quote 0
                                    • ub.privat
                                      ub.privat @sigi234 last edited by

                                      @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


                                      👁 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 1 Reply Last reply Reply Quote 0
                                      • Negalein
                                        Negalein Global Moderator @ub.privat last edited by

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

                                        1 Reply Last reply Reply Quote 0
                                        • C
                                          Conquest last edited by

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

                                          screenshot-192.168.178.46_8081-2020.03.12-18_34_12.png

                                          arteck 1 Reply Last reply Reply Quote 0
                                          • arteck
                                            arteck Developer Most Active @Conquest last edited by

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

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            657
                                            Online

                                            31.6k
                                            Users

                                            79.6k
                                            Topics

                                            1.3m
                                            Posts

                                            50
                                            280
                                            35377
                                            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