Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. [Material Design CSS / MDCSS V2] Vis-Views zur Inspiration

    NEWS

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    [Material Design CSS / MDCSS V2] Vis-Views zur Inspiration

    This topic has been deleted. Only users with topic management privileges can see it.
    • Dominik F.
      Dominik F. @der-eine last edited by

      @der-eine

      Würdest du mir vielleicht dein Skript für den QR Code für den Wlan Gastzugang bereitstellen? Muss dafür noch irgendwo etwas zusätzliches eingestellt werden?

      D 1 Reply Last reply Reply Quote 0
      • D
        der-eine @Dominik F. last edited by der-eine

        @Dominik-F

        // https://www.npmjs.com/package/qr-image
         
        var MySSID          = "FRITZ!Box XXX";           //  SSID Name
         
        var MyCrypt         = "WPA2";                //  [WEP|WPA|WPA2]
         
        var MyVisibility    = "n";                  //  Hidden SSID? 
         
        var cronStr         = "1 3 * * *"           // Script wird jeden Tag um 03:01 Ausgeführt
                                                    //Skript jede Minute ausführen * * * * * 
         
         
        var idQRZiel = "javascript.0.QR-Code.Gast"; // Zieldatenpunkt für QR-Code
         
        var IdGPasswd = "tr-064.0.states.wlanGuestPassword"; /*wlanGuestPassword*/
         
         
         
        if(MyVisibility == "y") {
         
           var MyHidden="H:true";
         
        } 
         
        else {
         
           MyHidden="";
         
        } 
         
         
         
        createState(idQRZiel, "", {
         
         
         
            name: 'QR-Code für Gastpasswort',
         
            desc: 'QR-Code für Gastpasswort',
         
            type: 'string',
         
            role: 'value'
         
        });
         
         
         
        function randomString(length) {         // Methode zur Erstellung eines Random-Passworts kann angepasst werden
         
         
         
           return Math.round((Math.pow(36, length + 1) - Math.random() * Math.pow(36, length))).toString(36).slice(1);
         
         
         
        }
         
         
         
        function createQRcode() {
         
         
         
           var qr = require('qr-image');
         
           var NewPasswd = randomString(16);       // 16 Stelliges Passwort
         
           var svg_string = qr.imageSync('WIFI:S:'+MySSID+';T:'+MyCrypt+';P:'+NewPasswd+';'+MyHidden+';', { type: 'svg' });
         
                
         
           setState(idQRZiel, svg_string);
           setState(IdGPasswd, NewPasswd);
           console.log('+++ Wlan Gast QR-Code neu erstellt +++');
        }
         
         
         
         
        // regelmässige Wiederholungen
         
        schedule(cronStr, createQRcode);
        
        

        Nur den Namen des Gastwlans eintragen.
        Exportierst Du Deine Vis auch mal bitte?

        Edit:
        Du musst noch in der JavaScript Instanz qr-image hinzufügen.

        Dominik F. 1 Reply Last reply Reply Quote 0
        • Dominik F.
          Dominik F. @der-eine last edited by Dominik F.

          @der-eine
          2020-03-19-Handy.zip

          D 1 Reply Last reply Reply Quote 0
          • D
            der-eine @Dominik F. last edited by

            @Dominik-F danke 👍

            Dominik F. 1 Reply Last reply Reply Quote 0
            • Dominik F.
              Dominik F. @der-eine last edited by Dominik F.

              @der-eine

              Irgendwie klappts nicht mit dem QR Code. Hab es mit

              npm install qr-image
              

              installiert, dann in der Javascript Instanz eingetragen und iobroker neu gestartet. Es wird jedoch nichts generiert, eine Fehlermeldung bekomme ich jedoch auch nicht

              D 1 Reply Last reply Reply Quote 0
              • D
                der-eine @Dominik F. last edited by der-eine

                @Dominik-F hab Dir mal den Originalbeitrag rausgesucht:

                https://forum.iobroker.net/topic/4574/fritzbox-wlan-passwort-ändern/8

                Weiß nicht ob es das gleiche ist aber ich habe das qr-Image einfach in der Instanz eingetragen. Sieht man im Beitrag auch.

                Edit: Der QR Code wird erst ab einer bestimmten Uhrzeit erstellt stell mal im Script den Cronjob auf jede Minute(cronstr) * * * * *

                Dominik F. 1 Reply Last reply Reply Quote 0
                • Dominik F.
                  Dominik F. @der-eine last edited by

                  @der-eine

                  ah genau das wars, dank dir

                  1 Reply Last reply Reply Quote 0
                  • K
                    Kuddel last edited by

                    @Dominik-F und @der-eine

                    Eure VIS kann auf dem Handy, Tabelt und PC angezeigt werden und wird immer je nach größe des Displays dargestellt oder ?

                    D 1 Reply Last reply Reply Quote 0
                    • D
                      der-eine @Kuddel last edited by

                      @Kuddel sollte sie wenn sie richtig aufgebaut wurde. Hab ich nur am Anfang mal getestet. Gib gerne eine Rückmeldung wenn irgendwas nicht wie gewünscht funktioniert.

                      K 1 Reply Last reply Reply Quote 0
                      • K
                        Kuddel @der-eine last edited by

                        @der-eine da muss ich mich erstmal reinfuchsen.

                        das sind aktuell noch bömische dörfer für mich.

                        ich hab gerade erst ein neues Menü eingabaut:

                        https://forum.iobroker.net/topic/30497/vorstellung-meine-dritte-vis

                        Da ist das mit Cards etc und automatischer Darstellung alles noch Neuland

                        D 1 Reply Last reply Reply Quote 0
                        • D
                          der-eine @Kuddel last edited by

                          @Kuddel schau Dir den Projekt Beitrag und Github Seite mal an die im ersten Post verlinkt sind da steht alles was Du wissen musst. Die Anleitung auf Github wird von Uhula noch an V2.x angepasst.

                          K 1 Reply Last reply Reply Quote 0
                          • K
                            Kuddel @der-eine last edited by

                            @der-eine alles klar. danke.

                            dann werde ich denke ich mal meine VIS umbauen.

                            erspart mir eine neue VIS fürs Handy zu basteln

                            D 1 Reply Last reply Reply Quote 0
                            • D
                              der-eine @Kuddel last edited by

                              @Kuddel Bitte. Das war auch der Grund wieso ich auf MD CSS gewechselt bin. Wenn Du fertig bist mit umstellen gerne hier vorstellen!

                              K 1 Reply Last reply Reply Quote 0
                              • K
                                Kuddel @der-eine last edited by

                                @der-eine ... wenn ich fertig bin 🙂 ....

                                jo mach ich, aber das kann noch bisschen dauern

                                Dominik F. 1 Reply Last reply Reply Quote 0
                                • Dominik F.
                                  Dominik F. @Kuddel last edited by

                                  @Kuddel

                                  Meine Vis ist noch nicht komplett responsive. Die einzelnen Cards sind schon so eingestellt, dass sich die Elemente automatisch nach der Breite anordnen. Die Größe der Cards ist bisher nur auf ein Smartphone optimiert da ich selber noch kein Tablet habe. Es sind aber nur kleine Einstellungen nötig um die Vis auch für ein Tablet zu optimieren, mir fehlt da bisher nur die Möglichkeit zum Testen

                                  1 Reply Last reply Reply Quote 0
                                  • D
                                    der-eine last edited by

                                    @Dominik-F welche Icons nutzt Du für die Iobroker-Instanz-View?

                                    Dominik F. 1 Reply Last reply Reply Quote 0
                                    • Dominik F.
                                      Dominik F. @der-eine last edited by

                                      @der-eine

                                      Icons Material und Icons8

                                      D 1 Reply Last reply Reply Quote 0
                                      • D
                                        der-eine @Dominik F. last edited by

                                        @Dominik-F Danke

                                        1 Reply Last reply Reply Quote 0
                                        • T
                                          Tirador last edited by Tirador

                                          Danke für eure Inspirationen. Da sind schöne Designs bei, die ich bestimmt mal übernehmen werde. Ich poste dann auch mal meine VIS. Ich versuche grundlegend auch die Cards responsive zu halten. Als Icons nur das Material Icons Webfont, so dass alle Farben schnell dynamisch umkonfiguriert werden können.
                                          Eine Zeitlang hatte ich auch ein Dark Design, aber momentan gefällt mir das weisse besser.

                                          Ich bin leider auch noch nicht fertig, d.h. alles Work in Process.

                                          Beispiel: Dark Theme

                                          2020-03-20 19_20_29-vis.png

                                          Beispiele: White Theme

                                          2020-03-20 18_59_53-vis.png

                                          2020-03-20 19_00_03-vis.png

                                          2020-03-20 19_00_22-vis.png

                                          2020-03-20 19_00_32-vis.png

                                          2020-03-20 19_00_40-vis.png

                                          2020-03-20 19_00_46-vis.png

                                          2020-03-20 19_00_53-vis.png

                                          D bilberry 2 Replies Last reply Reply Quote 0
                                          • D
                                            der-eine @Tirador last edited by der-eine

                                            @Tirador sehr schön. Gibt auch bei Dir ein paar interessante Views, danke fürs teilen! 👍

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            858
                                            Online

                                            31.7k
                                            Users

                                            79.8k
                                            Topics

                                            1.3m
                                            Posts

                                            vis
                                            22
                                            191
                                            21565
                                            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