Skip to content
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • 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

  • Default (No Skin)
  • No Skin
Collapse
Logo
  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.1k

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

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

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

Scheduled Pinned Locked Moved Visualisierung
vis
191 Posts 22 Posters 28.9k Views 43 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • mickymM Online
    mickymM Online
    mickym
    Most Active
    wrote on last edited by
    #2

    Klasse - wenn ich mal fertig bin, dann beteilige ich mich gerne - bin auch von dem Konzept begeistert. 🙂

    Jeder Flow bzw. jedes Script, das ich hier poste implementiert jeder auf eigene Gefahr. Flows und Scripts können Fehler aufweisen und weder der Seitenbetreiber noch ich persönlich können hierfür haftbar gemacht werden. Das gleiche gilt für Empfehlungen aller Art.

    D 1 Reply Last reply
    0
    • mickymM mickym

      Klasse - wenn ich mal fertig bin, dann beteilige ich mich gerne - bin auch von dem Konzept begeistert. 🙂

      D Offline
      D Offline
      der-eine
      wrote on last edited by
      #3

      @mickym bin auch noch nicht fertig aber wollte ein paar Bilder zeigen. Denke jeder View "hilft" hier wenn man noch Inspiration sucht! Also los 😉

      Dominik F.D 1 Reply Last reply
      0
      • D der-eine

        @mickym bin auch noch nicht fertig aber wollte ein paar Bilder zeigen. Denke jeder View "hilft" hier wenn man noch Inspiration sucht! Also los 😉

        Dominik F.D Offline
        Dominik F.D Offline
        Dominik F.
        wrote on last edited by Dominik F.
        #4

        @der-eine
        würdest du mir deine Vis zur Verfügung stellen? Du hast ein paar sehr interessante Views dabei wo ich gerne das ein oder andere bei mir einbauen würde.
        Dann poste ich hier auch mal meine Vis.
        Edit: Gerade gemerkt, ihr müsst die Views von hinten nach vorne anklicken damit es etwas Sinn ergibt^^
        Screenshot_20200319_204412_com.android.chrome.jpg Screenshot_20200319_204407_com.android.chrome.jpg Screenshot_20200319_204345_com.android.chrome.jpg Screenshot_20200319_204320_com.android.chrome.jpg Screenshot_20200319_204316_com.android.chrome.jpg Screenshot_20200319_204310_com.android.chrome.jpg Screenshot_20200319_204245_com.android.chrome.jpg Screenshot_20200319_204241_com.android.chrome.jpg Screenshot_20200319_204158_com.android.chrome.jpg Screenshot_20200319_204146_com.android.chrome.jpg Screenshot_20200319_204135_com.android.chrome.jpg Screenshot_20200319_204131_com.android.chrome.jpg Screenshot_20200319_204124_com.android.chrome.jpg Screenshot_20200319_204118_com.android.chrome.jpg Screenshot_20200319_204058_com.android.chrome.jpg Screenshot_20200319_204045_com.android.chrome.jpg

        D K 2 Replies Last reply
        0
        • Dominik F.D Dominik F.

          @der-eine
          würdest du mir deine Vis zur Verfügung stellen? Du hast ein paar sehr interessante Views dabei wo ich gerne das ein oder andere bei mir einbauen würde.
          Dann poste ich hier auch mal meine Vis.
          Edit: Gerade gemerkt, ihr müsst die Views von hinten nach vorne anklicken damit es etwas Sinn ergibt^^
          Screenshot_20200319_204412_com.android.chrome.jpg Screenshot_20200319_204407_com.android.chrome.jpg Screenshot_20200319_204345_com.android.chrome.jpg Screenshot_20200319_204320_com.android.chrome.jpg Screenshot_20200319_204316_com.android.chrome.jpg Screenshot_20200319_204310_com.android.chrome.jpg Screenshot_20200319_204245_com.android.chrome.jpg Screenshot_20200319_204241_com.android.chrome.jpg Screenshot_20200319_204158_com.android.chrome.jpg Screenshot_20200319_204146_com.android.chrome.jpg Screenshot_20200319_204135_com.android.chrome.jpg Screenshot_20200319_204131_com.android.chrome.jpg Screenshot_20200319_204124_com.android.chrome.jpg Screenshot_20200319_204118_com.android.chrome.jpg Screenshot_20200319_204058_com.android.chrome.jpg Screenshot_20200319_204045_com.android.chrome.jpg

          D Offline
          D Offline
          der-eine
          wrote on last edited by der-eine
          #5

          @Dominik-F

          Edit: VIS im ersten Post.

          Dominik F.D 2 Replies Last reply
          0
          • D der-eine

            @Dominik-F

            Edit: VIS im ersten Post.

            Dominik F.D Offline
            Dominik F.D Offline
            Dominik F.
            wrote on last edited by
            #6

            @der-eine

            Vielen Dank

            1 Reply Last reply
            0
            • D der-eine

              @Dominik-F

              Edit: VIS im ersten Post.

              Dominik F.D Offline
              Dominik F.D Offline
              Dominik F.
              wrote on last edited by
              #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 Reply Last reply
              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
                wrote on last edited by 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 Reply Last reply
                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.
                  wrote on last edited by Dominik F.
                  #9

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

                  D 1 Reply Last reply
                  0
                  • Dominik F.D Dominik F.

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

                    D Offline
                    D Offline
                    der-eine
                    wrote on last edited by
                    #10

                    @Dominik-F danke 👍

                    Dominik F.D 1 Reply Last reply
                    0
                    • D der-eine

                      @Dominik-F danke 👍

                      Dominik F.D Offline
                      Dominik F.D Offline
                      Dominik F.
                      wrote on last edited by 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 Reply Last reply
                      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
                        wrote on last edited by 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 Reply Last reply
                        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.
                          wrote on last edited by
                          #13

                          @der-eine

                          ah genau das wars, dank dir

                          1 Reply Last reply
                          0
                          • K Offline
                            K Offline
                            Kuddel
                            wrote on last edited by
                            #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 Reply Last reply
                            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
                              wrote on last edited by
                              #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 Reply Last reply
                              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
                                wrote on last edited by
                                #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 Reply Last reply
                                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
                                  wrote on last edited by
                                  #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 Reply Last reply
                                  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
                                    wrote on last edited by
                                    #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 Reply Last reply
                                    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
                                      wrote on last edited by
                                      #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 Reply Last reply
                                      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
                                        wrote on last edited by
                                        #20

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

                                        jo mach ich, aber das kann noch bisschen dauern

                                        Dominik F.D 1 Reply Last reply
                                        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.
                                          wrote on last edited by
                                          #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 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          751

                                          Online

                                          32.4k

                                          Users

                                          81.4k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe