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

  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.3k

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

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

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

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
191 Beiträge 22 Kommentatoren 29.0k 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 Offline
    D Offline
    der-eine
    schrieb am zuletzt editiert von der-eine
    #1

    Hallo zusammen,

    dieser Post ist für alle VIS-Views gedacht, die auf der Basis von Uhulas Material Design Styles aufgebaut wurden.
    Bitte auch nur Views vorstellen, die die unterstützten Widgets, Skripte und Codes verwenden.
    Diese Beiträge sollen zur Vorstellung, Inspiration und Ideengebung dienen.
    Danke an Uhula, dass er uns diesen Style zur Verfügung stellt!
    Link zum [Projekt] MDCSS V2:
    https://forum.iobroker.net/topic/30363/projekt-mdcss-v2-material-design-css-version-2
    Github Link mit Anleitung, Vorlagen, Wiki...:
    https://github.com/Uhula/ioBroker-Material-Design-Style
    Viel Spaß damit :)

    Hier mal die ersten Eindrücke meiner VIS:

    Bildschirmfoto 2020-05-08 um 11.08.36.png Bildschirmfoto 2020-05-08 um 11.10.01.png Bildschirmfoto 2020-05-08 um 11.05.10.png Bildschirmfoto 2020-05-08 um 11.05.43.png Bildschirmfoto 2020-05-08 um 11.05.53.png Bildschirmfoto 2020-05-08 um 11.06.00.png Bildschirmfoto 2020-05-08 um 11.06.10.png Bildschirmfoto 2020-05-08 um 11.06.27.png Bildschirmfoto 2020-05-08 um 11.06.36.png Bildschirmfoto 2020-05-08 um 11.07.07.png Bildschirmfoto 2020-05-08 um 11.07.54.png Bildschirmfoto 2020-05-08 um 11.07.28.png Bildschirmfoto 2020-05-08 um 11.07.54.png Bildschirmfoto 2020-05-08 um 11.08.10.png Bildschirmfoto 2020-05-08 um 11.08.20.png Bildschirmfoto 2020-05-08 um 11.08.52.png Bildschirmfoto 2020-05-08 um 11.09.18.png Bildschirmfoto 2020-05-08 um 11.09.38.png Bildschirmfoto 2020-05-08 um 11.09.45.png

    VIS vom 07.07.2020
    Änderungen:

    • Neue Config eingefügt
    • lnav von MD-Demo eingefügt (Datum, Uhrzeit, jetzt öffnet und schliesst sie auch wie gewollt)
    • mdui-order auf jeder card angepasst
    • title-color zu den Texten hinzugefügt
    • tnav und andere Schriftzüge für Tablets angepasst
    • diverse kleinere Veränderungen

    http://gofile.me/6HXaS/GrdK2OZTy
    PW: ioBroker

    Edit: 28.03.2020

    Bei Problemen und nicht funktionieren Views bitte als erstes prüfen ob:

      1. Unter Eigenschaften CSS im Projekt das Material Design CSS vorhanden ist.
        https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/source/project.css
      1. Für die Icons der Pfad zum Namen des VIS-Projekts stimmt hier VIS-iPhone

    Bildschirmfoto 2020-03-28 um 14.08.16.png

      1. Eigenschaften Skripte das Material Design CSS Skript hinterlegt ist
        https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/source/script.js

    Bildschirmfoto 2020-03-28 um 14.11.51.png

      1. Eigenschaften CSS Global entweder nichts oder das von Material Design CSS hinterlegt ist
        https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/source/global.css

    Bildschirmfoto 2020-03-28 um 14.13.11.png

      1. Der Adapter "iobroker.vis-material" nicht installiert ist.

    Danke!!!!

    H D M 3 Antworten Letzte Antwort
    5
    • mickymM Offline
      mickymM Offline
      mickym
      Most Active
      schrieb am zuletzt editiert von
      #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 Antwort Letzte Antwort
      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
        schrieb am zuletzt editiert von
        #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 Antwort Letzte Antwort
        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.
          schrieb am zuletzt editiert von 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 Antworten Letzte Antwort
          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
            schrieb am zuletzt editiert von der-eine
            #5

            @Dominik-F

            Edit: VIS im ersten Post.

            Dominik F.D 2 Antworten 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
              #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
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          671

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          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