Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. [Material Design CSS / MDCSS V2] Vis-Views zur Inspiration

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.6k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.1k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    2.8k

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

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
191 Beiträge 22 Kommentatoren 29.3k Aufrufe 43 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • D der-eine

    @Dominik-F

    Edit: VIS im ersten Post.

    Dominik F.D Offline
    Dominik F.D Offline
    Dominik F.
    schrieb am zuletzt editiert von
    #6

    @der-eine

    Vielen Dank

    1 Antwort Letzte Antwort
    0
    • D der-eine

      @Dominik-F

      Edit: VIS im ersten Post.

      Dominik F.D Offline
      Dominik F.D Offline
      Dominik F.
      schrieb am zuletzt editiert von
      #7

      @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 Antwort Letzte Antwort
      0
      • Dominik F.D Dominik F.

        @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 Offline
        D Offline
        der-eine
        schrieb am zuletzt editiert von der-eine
        #8

        @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.D 1 Antwort Letzte Antwort
        0
        • D 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.D Offline
          Dominik F.D Offline
          Dominik F.
          schrieb am zuletzt editiert von Dominik F.
          #9

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

          D 1 Antwort Letzte Antwort
          0
          • Dominik F.D Dominik F.

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

            D Offline
            D Offline
            der-eine
            schrieb am zuletzt editiert von
            #10

            @Dominik-F danke :+1:

            Dominik F.D 1 Antwort Letzte Antwort
            0
            • D der-eine

              @Dominik-F danke :+1:

              Dominik F.D Offline
              Dominik F.D Offline
              Dominik F.
              schrieb am zuletzt editiert von Dominik F.
              #11

              @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 Antwort Letzte Antwort
              0
              • Dominik F.D 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 Offline
                D Offline
                der-eine
                schrieb am zuletzt editiert von der-eine
                #12

                @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.D 1 Antwort Letzte Antwort
                0
                • D 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.D Offline
                  Dominik F.D Offline
                  Dominik F.
                  schrieb am zuletzt editiert von
                  #13

                  @der-eine

                  ah genau das wars, dank dir

                  1 Antwort Letzte Antwort
                  0
                  • K Offline
                    K Offline
                    Kuddel
                    schrieb am zuletzt editiert von
                    #14

                    @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 Antwort Letzte Antwort
                    0
                    • K Kuddel

                      @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 Offline
                      D Offline
                      der-eine
                      schrieb am zuletzt editiert von
                      #15

                      @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 Antwort Letzte Antwort
                      0
                      • D der-eine

                        @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 Offline
                        K Offline
                        Kuddel
                        schrieb am zuletzt editiert von
                        #16

                        @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 Antwort Letzte Antwort
                        0
                        • K Kuddel

                          @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 Offline
                          D Offline
                          der-eine
                          schrieb am zuletzt editiert von
                          #17

                          @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 Antwort Letzte Antwort
                          0
                          • D der-eine

                            @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 Offline
                            K Offline
                            Kuddel
                            schrieb am zuletzt editiert von
                            #18

                            @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 Antwort Letzte Antwort
                            0
                            • K Kuddel

                              @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 Offline
                              D Offline
                              der-eine
                              schrieb am zuletzt editiert von
                              #19

                              @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 Antwort Letzte Antwort
                              0
                              • D der-eine

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

                                K Offline
                                K Offline
                                Kuddel
                                schrieb am zuletzt editiert von
                                #20

                                @der-eine ... wenn ich fertig bin :-) ....

                                jo mach ich, aber das kann noch bisschen dauern

                                Dominik F.D 1 Antwort Letzte Antwort
                                0
                                • K Kuddel

                                  @der-eine ... wenn ich fertig bin :-) ....

                                  jo mach ich, aber das kann noch bisschen dauern

                                  Dominik F.D Offline
                                  Dominik F.D Offline
                                  Dominik F.
                                  schrieb am zuletzt editiert von
                                  #21

                                  @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 Antwort Letzte Antwort
                                  0
                                  • D Offline
                                    D Offline
                                    der-eine
                                    schrieb am zuletzt editiert von
                                    #22

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

                                    Dominik F.D 1 Antwort Letzte Antwort
                                    0
                                    • D der-eine

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

                                      Dominik F.D Offline
                                      Dominik F.D Offline
                                      Dominik F.
                                      schrieb am zuletzt editiert von
                                      #23

                                      @der-eine

                                      Icons Material und Icons8

                                      D 1 Antwort Letzte Antwort
                                      0
                                      • Dominik F.D Dominik F.

                                        @der-eine

                                        Icons Material und Icons8

                                        D Offline
                                        D Offline
                                        der-eine
                                        schrieb am zuletzt editiert von
                                        #24

                                        @Dominik-F Danke

                                        1 Antwort Letzte Antwort
                                        0
                                        • T Offline
                                          T Offline
                                          Tirador
                                          schrieb am zuletzt editiert von Tirador
                                          #25

                                          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 bilberryB 2 Antworten Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          891

                                          Online

                                          32.4k

                                          Benutzer

                                          81.5k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Home
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe