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. Visualisierung mit Material Design

NEWS

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

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

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

Visualisierung mit Material Design

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vismaterial uimaterial css
38 Beiträge 7 Kommentatoren 6.1k Aufrufe 16 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.
  • AxelF1977A AxelF1977

    @dsiggi sagte in Visualisierung mit Material Design:

    Hallo,
    erstmal ein großes Lob für diese super Vis.

    Ich habe mir gerade mal deine Exports der Lichtsteuerung heruntergeladen um mir das ganze mal anzuschauen.
    Dazu hab ich gleich mal eine Frage.

    Du benutzt hier CSS-Klassen mit den Namen

    • clearright
    • mdui-flex-item

    Das sind Klassen die im originale MaterialDesign von @Uhula nicht existieren. Hast du diese selbst hinzugefügt?
    Wenn ja, was bewirken diese und kannst du die auch zur Verfügung stellen?

    Daniel

    Moin Daniel,

    danke für das Lob. Zu der Frage der CSS Klassen

    • clearright ist von mir, hatte ich vergessen hinzuzufügen, danke für den Hinweis. Dazu unten mehr*
    • mdui-flex-item gehört zur letzten Version des Material Framework und ist dort in der CSS enthalten, ich prüfe das aber mal, diese CSS Klasse hatte ich direkt aus den Beispielen von @Uhula übernommen

    *Das das Layout Floatent ist, müssen die Boxen wissen wann sie fließen (float) dürfen und wann nicht.. Ich zitiere mal von https://blog.kulturbanause.de/

    Floats beenden mit clear
    Die Eigenschaft »clear« (zu Deutsch: »abschalten«) beendet Floats. Erhält ein Element diese Eigenschaft, so schaltet es den Float vorangehender Elemente ab. Folgende Optionen stehen euch zur Verfügung:

    clear: both
    Floats beider Richtungen werden beendet. Normalerweise reicht das aus, um das gewünschte Ergebnis zu erzielen.

    clear: left
    beendet nur float: left

    clear: right
    beendet nur float: right

    Ein Element, das gecleared wurde, setzt sich nicht neben vorherige Elemente und versteckt sich auch nicht dahinter. Es positioniert sich eine Zeile darunter.

    Entsprechende CSS Klassen sehen dann so aus

    .clear
    {
        clear: both;
    }
    
    .clearboth
    {
        clear: both;
    }
    
    .clearleft
    {
        clear: left;
    }
    
    .clearright
    {
        clear: right;
    }
    
    
    dsiggiD Offline
    dsiggiD Offline
    dsiggi
    schrieb am zuletzt editiert von
    #25

    @AxelF1977
    Servus,
    Danke schon mal für deine super Antwort.
    Ich habe gerade mal auf Github bei @Uhula nachgeschaut.
    Der letzte Stand des Demo-Projekts ist vom 10.01.2018. Dort ist die Klasse "mdui-flex-item" nicht enthalten.

    Wo finde ich den den aktuellen Stand des Projekts?

    Gruß,
    Daniel

    AxelF1977A 1 Antwort Letzte Antwort
    0
    • dsiggiD dsiggi

      @AxelF1977
      Servus,
      Danke schon mal für deine super Antwort.
      Ich habe gerade mal auf Github bei @Uhula nachgeschaut.
      Der letzte Stand des Demo-Projekts ist vom 10.01.2018. Dort ist die Klasse "mdui-flex-item" nicht enthalten.

      Wo finde ich den den aktuellen Stand des Projekts?

      Gruß,
      Daniel

      AxelF1977A Offline
      AxelF1977A Offline
      AxelF1977
      schrieb am zuletzt editiert von
      #26

      @dsiggi sagte in Visualisierung mit Material Design:

      @AxelF1977
      Servus,
      Danke schon mal für deine super Antwort.
      Ich habe gerade mal auf Github bei @Uhula nachgeschaut.
      Der letzte Stand des Demo-Projekts ist vom 10.01.2018. Dort ist die Klasse "mdui-flex-item" nicht enthalten.

      Wo finde ich den den aktuellen Stand des Projekts?

      Gruß,
      Daniel

      Das ist der Stand den ich auch nutze. Evtl. gibt es die Klasse tatsächlich nicht. Ich hatte das nie wirklich geprüft, sondern die Klasse einfach übernommen. Funktionieren tut es so oder so

      ASROCK Deskmini Intel I3 8100 16GB mit Proxmox VM ioBroker VM DIYHue| CCU piVCCU + FHEM auf Raspberry | Maria DB mit Grafana und Prometheus auf Tinker Board

      1 Antwort Letzte Antwort
      0
      • dsiggiD Offline
        dsiggiD Offline
        dsiggi
        schrieb am zuletzt editiert von
        #27

        Hi,
        ich hab mal das Thread von @Uhula durchsucht und bin da auf die Klasse "mdui-flex-item" gestoßen.

        Ich hab deine Lichtsteuerung mal als neues Projekt angelegt und die das Script und die CSS-Klassen von @Uhula eingefügt. An die CSS-Klassen habe ich noch folgendes angehängt:

        /*
        Ergänzungen von @AxelF1977
        https://forum.iobroker.net/topic/27704/visualisierung-mit-material-design/24
        */
        
        .clear
        {
            clear: both;
        }
         
        .clearboth
        {
            clear: both;
        }
         
        .clearleft
        {
            clear: left;
        }
         
        .clearright
        {
            clear: right;
        }
        
        /*
        Ergänzungen von @Uhula
        https://forum.iobroker.net/topic/7322/projekt-material-design-css-für-iobroker-vis/27
        */
        
        .mdui-flex {
          display: flex !important;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
        }
        .mdui-flex-item{
          position:relative !important;
          left:0 !important;
          top:0 !important;
          margin:4px !important;
        }
        

        Leider schaut es bei mir einfach nicht aus wie bei dir. Hier im angehängten Screenshot siehst du, das die Elemente nicht ausgemittelt werden und rechts aus dem tile heraus ragen. Ich denke das Problem ist der "Rand" an der linken Seite.

        View.jpg

        Hast du noch eine Idee an was das liegen könnte?
        Das Ding ist nämlich das ich auch versuche eine Vis mit dem MaterialDesign aufzubauen aber eben das Problem habe mit den skalieren der Tile-Breite. Daher fand ich deinen Ansatz mit "Alles in Prozent angeben" super. Aber bei mir will das nicht wirklich funktionieren.

        Gruß,
        Daniel

        AxelF1977A 1 Antwort Letzte Antwort
        0
        • dsiggiD dsiggi

          Hi,
          ich hab mal das Thread von @Uhula durchsucht und bin da auf die Klasse "mdui-flex-item" gestoßen.

          Ich hab deine Lichtsteuerung mal als neues Projekt angelegt und die das Script und die CSS-Klassen von @Uhula eingefügt. An die CSS-Klassen habe ich noch folgendes angehängt:

          /*
          Ergänzungen von @AxelF1977
          https://forum.iobroker.net/topic/27704/visualisierung-mit-material-design/24
          */
          
          .clear
          {
              clear: both;
          }
           
          .clearboth
          {
              clear: both;
          }
           
          .clearleft
          {
              clear: left;
          }
           
          .clearright
          {
              clear: right;
          }
          
          /*
          Ergänzungen von @Uhula
          https://forum.iobroker.net/topic/7322/projekt-material-design-css-für-iobroker-vis/27
          */
          
          .mdui-flex {
            display: flex !important;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
          }
          .mdui-flex-item{
            position:relative !important;
            left:0 !important;
            top:0 !important;
            margin:4px !important;
          }
          

          Leider schaut es bei mir einfach nicht aus wie bei dir. Hier im angehängten Screenshot siehst du, das die Elemente nicht ausgemittelt werden und rechts aus dem tile heraus ragen. Ich denke das Problem ist der "Rand" an der linken Seite.

          View.jpg

          Hast du noch eine Idee an was das liegen könnte?
          Das Ding ist nämlich das ich auch versuche eine Vis mit dem MaterialDesign aufzubauen aber eben das Problem habe mit den skalieren der Tile-Breite. Daher fand ich deinen Ansatz mit "Alles in Prozent angeben" super. Aber bei mir will das nicht wirklich funktionieren.

          Gruß,
          Daniel

          AxelF1977A Offline
          AxelF1977A Offline
          AxelF1977
          schrieb am zuletzt editiert von
          #28

          @dsiggi sagte in Visualisierung mit Material Design:

          Hi,
          ich hab mal das Thread von @Uhula durchsucht und bin da auf die Klasse "mdui-flex-item" gestoßen.

          Ich hab deine Lichtsteuerung mal als neues Projekt angelegt und die das Script und die CSS-Klassen von @Uhula eingefügt. An die CSS-Klassen habe ich noch folgendes angehängt:

          /*
          Ergänzungen von @AxelF1977
          https://forum.iobroker.net/topic/27704/visualisierung-mit-material-design/24
          */
          
          .clear
          {
              clear: both;
          }
           
          .clearboth
          {
              clear: both;
          }
           
          .clearleft
          {
              clear: left;
          }
           
          .clearright
          {
              clear: right;
          }
          
          /*
          Ergänzungen von @Uhula
          https://forum.iobroker.net/topic/7322/projekt-material-design-css-für-iobroker-vis/27
          */
          
          .mdui-flex {
            display: flex !important;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
          }
          .mdui-flex-item{
            position:relative !important;
            left:0 !important;
            top:0 !important;
            margin:4px !important;
          }
          

          Leider schaut es bei mir einfach nicht aus wie bei dir. Hier im angehängten Screenshot siehst du, das die Elemente nicht ausgemittelt werden und rechts aus dem tile heraus ragen. Ich denke das Problem ist der "Rand" an der linken Seite.

          View.jpg

          Hast du noch eine Idee an was das liegen könnte?
          Das Ding ist nämlich das ich auch versuche eine Vis mit dem MaterialDesign aufzubauen aber eben das Problem habe mit den skalieren der Tile-Breite. Daher fand ich deinen Ansatz mit "Alles in Prozent angeben" super. Aber bei mir will das nicht wirklich funktionieren.

          Gruß,
          Daniel

          Exportier mir das mal, ich schau es mir dann bei mir an, dann kann ich am bersten nachvollziehen woran das liegt.

          ASROCK Deskmini Intel I3 8100 16GB mit Proxmox VM ioBroker VM DIYHue| CCU piVCCU + FHEM auf Raspberry | Maria DB mit Grafana und Prometheus auf Tinker Board

          dsiggiD 1 Antwort Letzte Antwort
          0
          • AxelF1977A AxelF1977

            @dsiggi sagte in Visualisierung mit Material Design:

            Hi,
            ich hab mal das Thread von @Uhula durchsucht und bin da auf die Klasse "mdui-flex-item" gestoßen.

            Ich hab deine Lichtsteuerung mal als neues Projekt angelegt und die das Script und die CSS-Klassen von @Uhula eingefügt. An die CSS-Klassen habe ich noch folgendes angehängt:

            /*
            Ergänzungen von @AxelF1977
            https://forum.iobroker.net/topic/27704/visualisierung-mit-material-design/24
            */
            
            .clear
            {
                clear: both;
            }
             
            .clearboth
            {
                clear: both;
            }
             
            .clearleft
            {
                clear: left;
            }
             
            .clearright
            {
                clear: right;
            }
            
            /*
            Ergänzungen von @Uhula
            https://forum.iobroker.net/topic/7322/projekt-material-design-css-für-iobroker-vis/27
            */
            
            .mdui-flex {
              display: flex !important;
              flex-wrap: wrap;
              align-items: center;
              justify-content: center;
            }
            .mdui-flex-item{
              position:relative !important;
              left:0 !important;
              top:0 !important;
              margin:4px !important;
            }
            

            Leider schaut es bei mir einfach nicht aus wie bei dir. Hier im angehängten Screenshot siehst du, das die Elemente nicht ausgemittelt werden und rechts aus dem tile heraus ragen. Ich denke das Problem ist der "Rand" an der linken Seite.

            View.jpg

            Hast du noch eine Idee an was das liegen könnte?
            Das Ding ist nämlich das ich auch versuche eine Vis mit dem MaterialDesign aufzubauen aber eben das Problem habe mit den skalieren der Tile-Breite. Daher fand ich deinen Ansatz mit "Alles in Prozent angeben" super. Aber bei mir will das nicht wirklich funktionieren.

            Gruß,
            Daniel

            Exportier mir das mal, ich schau es mir dann bei mir an, dann kann ich am bersten nachvollziehen woran das liegt.

            dsiggiD Offline
            dsiggiD Offline
            dsiggi
            schrieb am zuletzt editiert von
            #29

            @AxelF1977

            Super. :slightly_smiling_face:

            2019-12-30-MaterialTest.zip

            AxelF1977A 1 Antwort Letzte Antwort
            0
            • dsiggiD dsiggi

              @AxelF1977

              Super. :slightly_smiling_face:

              2019-12-30-MaterialTest.zip

              AxelF1977A Offline
              AxelF1977A Offline
              AxelF1977
              schrieb am zuletzt editiert von
              #30

              @dsiggi sagte in Visualisierung mit Material Design:

              @AxelF1977

              Super. :slightly_smiling_face:

              2019-12-30-MaterialTest.zip

              Moin,

              sieht bei mir aus wie es soll.

              6860d5f0-1303-483c-b78c-a83ef9bdb485-image.png

              Hast Du irgendwelche Einstellungen wegen der Auflösung eingestellt? Welchen Browser benutzt Du? Erzähl mal ein wenig von Deiner Umgebung wo Du es probierst. So kann ich es evtl. besser reproduzieren

              ASROCK Deskmini Intel I3 8100 16GB mit Proxmox VM ioBroker VM DIYHue| CCU piVCCU + FHEM auf Raspberry | Maria DB mit Grafana und Prometheus auf Tinker Board

              dsiggiD 1 Antwort Letzte Antwort
              0
              • AxelF1977A AxelF1977

                @dsiggi sagte in Visualisierung mit Material Design:

                @AxelF1977

                Super. :slightly_smiling_face:

                2019-12-30-MaterialTest.zip

                Moin,

                sieht bei mir aus wie es soll.

                6860d5f0-1303-483c-b78c-a83ef9bdb485-image.png

                Hast Du irgendwelche Einstellungen wegen der Auflösung eingestellt? Welchen Browser benutzt Du? Erzähl mal ein wenig von Deiner Umgebung wo Du es probierst. So kann ich es evtl. besser reproduzieren

                dsiggiD Offline
                dsiggiD Offline
                dsiggi
                schrieb am zuletzt editiert von
                #31

                @AxelF1977
                Servus,
                also ich nutze die VIS-Version 1.2.2.

                Dort habe ich ein neues Projekt angelegt "Setup -> Neues Projekt". Dort habe ich dann die CSS-Klassen und die Scripte eingefügt. Danach hab ich dann deine Views nach einander importiert. Ansonsten hab ich nichts eingestellt und alles so gelassen wie es ist.

                Getestet hab ich das ganze mit

                • Windows:

                  • Opera
                  • Edge
                • Linux

                  • Opera
                  • Firefox
                  • Falkon

                Bei allen Kombinationen wird es falsch dargestellt.

                AxelF1977A 1 Antwort Letzte Antwort
                0
                • dsiggiD dsiggi

                  @AxelF1977
                  Servus,
                  also ich nutze die VIS-Version 1.2.2.

                  Dort habe ich ein neues Projekt angelegt "Setup -> Neues Projekt". Dort habe ich dann die CSS-Klassen und die Scripte eingefügt. Danach hab ich dann deine Views nach einander importiert. Ansonsten hab ich nichts eingestellt und alles so gelassen wie es ist.

                  Getestet hab ich das ganze mit

                  • Windows:

                    • Opera
                    • Edge
                  • Linux

                    • Opera
                    • Firefox
                    • Falkon

                  Bei allen Kombinationen wird es falsch dargestellt.

                  AxelF1977A Offline
                  AxelF1977A Offline
                  AxelF1977
                  schrieb am zuletzt editiert von
                  #32

                  @dsiggi sagte in Visualisierung mit Material Design:

                  @AxelF1977
                  Servus,
                  also ich nutze die VIS-Version 1.2.2.

                  Dort habe ich ein neues Projekt angelegt "Setup -> Neues Projekt". Dort habe ich dann die CSS-Klassen und die Scripte eingefügt. Danach hab ich dann deine Views nach einander importiert. Ansonsten hab ich nichts eingestellt und alles so gelassen wie es ist.

                  Getestet hab ich das ganze mit

                  • Windows:

                    • Opera
                    • Edge
                  • Linux

                    • Opera
                    • Firefox
                    • Falkon

                  Bei allen Kombinationen wird es falsch dargestellt.

                  Ok, danke für die Infos,

                  ich nutze VIS 1.2.3, alle getestet in Chrome.

                  Ich habe mal eben den neuesten Opera installiert, und bei mir sieht es auch da aus, wie es soll. Alles unter Windows 10 an meinem PC. Auch unter Android und dem Fully Browser sieht es aus, wie gewünscht

                  440998c8-8efa-47ef-a52d-438f2e23bd63-image.png

                  Pc hat eine Full HD Auslösung, das Tablet eine Auflösung von 1280 x 800 px.

                  Wie sieht das da bei Dir aus?

                  ASROCK Deskmini Intel I3 8100 16GB mit Proxmox VM ioBroker VM DIYHue| CCU piVCCU + FHEM auf Raspberry | Maria DB mit Grafana und Prometheus auf Tinker Board

                  dsiggiD 1 Antwort Letzte Antwort
                  0
                  • AxelF1977A AxelF1977

                    @dsiggi sagte in Visualisierung mit Material Design:

                    @AxelF1977
                    Servus,
                    also ich nutze die VIS-Version 1.2.2.

                    Dort habe ich ein neues Projekt angelegt "Setup -> Neues Projekt". Dort habe ich dann die CSS-Klassen und die Scripte eingefügt. Danach hab ich dann deine Views nach einander importiert. Ansonsten hab ich nichts eingestellt und alles so gelassen wie es ist.

                    Getestet hab ich das ganze mit

                    • Windows:

                      • Opera
                      • Edge
                    • Linux

                      • Opera
                      • Firefox
                      • Falkon

                    Bei allen Kombinationen wird es falsch dargestellt.

                    Ok, danke für die Infos,

                    ich nutze VIS 1.2.3, alle getestet in Chrome.

                    Ich habe mal eben den neuesten Opera installiert, und bei mir sieht es auch da aus, wie es soll. Alles unter Windows 10 an meinem PC. Auch unter Android und dem Fully Browser sieht es aus, wie gewünscht

                    440998c8-8efa-47ef-a52d-438f2e23bd63-image.png

                    Pc hat eine Full HD Auslösung, das Tablet eine Auflösung von 1280 x 800 px.

                    Wie sieht das da bei Dir aus?

                    dsiggiD Offline
                    dsiggiD Offline
                    dsiggi
                    schrieb am zuletzt editiert von dsiggi
                    #33

                    @AxelF1977
                    Hi,
                    der PC an dem ich's getestet habe läuft mit 1920x1080px.
                    Mein Tablet (Android, Opera und Chrome) mit 1024x640 (laut VIS) bzw. 2560x1516 (laut mehreren Apps).

                    Ich hab auch mal ein update auf Version 1.2.3 gemacht, aber kein Unterschied.
                    Ich werde den VIS-Adapter jetzt mal komplett löschen und neu installieren.

                    EDIT: Auch eine Neuinstallation des Adapters hat nichts gebracht.

                    1 Antwort Letzte Antwort
                    0
                    • dsiggiD Offline
                      dsiggiD Offline
                      dsiggi
                      schrieb am zuletzt editiert von
                      #34

                      So, ich hab's hinbekommen.

                      Was hab ich gemacht?

                      1. Alle Visualisierungen exportiert
                      2. Alle Visualisierungsinstanzen gelöscht (Vis, Icons, ...)
                      3. Alle Visualisierungsadapter gelöscht
                      4. Unter /opt/iobroker/iobroker-data/file/ alle Ordner mit dem Namen vis.* gelöscht
                      5. Vis-Adapter wieder installiert
                      6. Projekte importiert

                      Frag mich jetzt aber nicht wo das Problem lag. :face_with_rolling_eyes:
                      Dank auf jeden Fall für deine Hilfe.

                      Gruß,
                      Daniel

                      AxelF1977A 1 Antwort Letzte Antwort
                      1
                      • dsiggiD dsiggi

                        So, ich hab's hinbekommen.

                        Was hab ich gemacht?

                        1. Alle Visualisierungen exportiert
                        2. Alle Visualisierungsinstanzen gelöscht (Vis, Icons, ...)
                        3. Alle Visualisierungsadapter gelöscht
                        4. Unter /opt/iobroker/iobroker-data/file/ alle Ordner mit dem Namen vis.* gelöscht
                        5. Vis-Adapter wieder installiert
                        6. Projekte importiert

                        Frag mich jetzt aber nicht wo das Problem lag. :face_with_rolling_eyes:
                        Dank auf jeden Fall für deine Hilfe.

                        Gruß,
                        Daniel

                        AxelF1977A Offline
                        AxelF1977A Offline
                        AxelF1977
                        schrieb am zuletzt editiert von
                        #35

                        @dsiggi sagte in Visualisierung mit Material Design:

                        So, ich hab's hinbekommen.

                        Was hab ich gemacht?

                        1. Alle Visualisierungen exportiert
                        2. Alle Visualisierungsinstanzen gelöscht (Vis, Icons, ...)
                        3. Alle Visualisierungsadapter gelöscht
                        4. Unter /opt/iobroker/iobroker-data/file/ alle Ordner mit dem Namen vis.* gelöscht
                        5. Vis-Adapter wieder installiert
                        6. Projekte importiert

                        Frag mich jetzt aber nicht wo das Problem lag. :face_with_rolling_eyes:
                        Dank auf jeden Fall für deine Hilfe.

                        Gruß,
                        Daniel

                        Was auch immer es war, gut das es behoben. Bei weiteren Fragen bin ich hier.

                        Viel Spaß damit

                        ASROCK Deskmini Intel I3 8100 16GB mit Proxmox VM ioBroker VM DIYHue| CCU piVCCU + FHEM auf Raspberry | Maria DB mit Grafana und Prometheus auf Tinker Board

                        1 Antwort Letzte Antwort
                        0
                        • S Online
                          S Online
                          SlipKoRn_DH88
                          schrieb am zuletzt editiert von
                          #36

                          Hallo,

                          ich habe mir ein Spotify Widget nach @AxelF1977 Vorlage gebaut. Jedoch habe ich das Problem, dass ich sowohl die Tracks in der Trackliste, als auch die Playlisten in der Playlistenauswahl nicht nutzen kann.

                          Ich klicke entweder auf einen Song oder eine Playlist, die Schrift davon leuchtet kurz grün auf und wird wieder weiß. Die Playlist oder der Song wechselt nicht.

                          Jedoch kann ich mit Skip vor und zurück den Song wechseln.

                          Hat jemand eine Idee?

                          Viele Grüße
                          NicoWidget Tracks.png Widget Spotify.png Widget Playlist.png

                          1 Antwort Letzte Antwort
                          0
                          • AxelF1977A AxelF1977

                            Hi zusammen,

                            ich dachte mir, es ist mal an der Zeit, meine Visualisierung zu präsentieren. Sie basiert auf der letzten Version des Material Design Framework von @Uhula. Ich möchte das hier als Inspiration zeigen, was man damit so machen kann, wenn man sich mit CSS auskennt.
                            Das ganze Projekt zu exportieren wird nicht gehen, dafür ist das zu groß und komplex. Einzelne Seite könnte ich aber gerne probieren. Sehr es mir aber bitte nach, das es in der Vorweihnachtszeit aber gerade knapp ist mit der Zeit dafür.

                            Viele Views sind in mehrere einzelne Views aufgeteilt. Auch wegen der dynamischen Größenanpassung. Das Projekt soll sowohl auf meinen Tablets (alle 1280er Auflösungen) Also auch ein meinen Geräten mit FullHD Auflösung funktionieren.

                            Großen Dank an der Stelle an @Uhula für das Framework, @sigi234 für das Bereitstellen seiner HUE View (habe ich bei mir als Expertenmodus eingebunden), @sissiwup für die Erklärung wie Grafana eingebunden wird, und allen die hier Scripte und Views präsentiert haben, die ich nutzen konnte, bzw. Anregungen gefunden habe.

                            Es ist noch viel zu tun, aber ich hier schon 2 Jahre entwickel, habe ich Geduld.

                            Meine persönlichen Highlights

                            • Hintergrund der Lampensteuerungen passen sich entweder in Farbe oder Weißwert dem aktuellen Zustand der Lampen an
                            • Lichtseite ähnlich aufgebaut wie die HUE App
                            • Mein Spotify VIEW, gibt es schon im Forum
                            • Das Heizungsview, durch das Auswählen des Punktes "wie Vortag" wird die ganze Zeile ein oder ausgeblendet, im unteren Teil sieht man den Heitungsverbrauch im Vergleich zu den Vorjahren, hier werden direkt die Techem Thermostate ausgelesen über einen Stick und über FHEM die Werte nach ioBroker geholt

                            Viel Spaß beim Stöbern und Anregungen holen, bei Fragen stehe ich Euch gerne zur Verfügung

                            001.jpg

                            002.jpg

                            003.jpg

                            004.jpg

                            005.jpg

                            006.jpg

                            007.jpg

                            008.jpg

                            009.jpg

                            011.jpg

                            013.jpg

                            012.jpg

                            014.jpg

                            014.5.jpg

                            015.jpg

                            015.5.jpg

                            016.jpg

                            017.jpg

                            018.jpg

                            019.jpg

                            020.jpg

                            B Offline
                            B Offline
                            Bones13
                            schrieb am zuletzt editiert von
                            #37

                            @axelf1977
                            Auch wenn der Beitrag inzwischen doch echt alt ist wollte ich mal kurz Fragen wie du es mit Material Design hinbekommen hast auf der ersten Seite, dass du verschieden Breite Spalten hast und direkt auch die Cards untereinander.
                            Ich bekomme mit Grid Views oder Masonry Views immer nur eine Lösung hin. Nie klappt es in einer Spalte z.B. mit verschiedenen Höhen. Wäre nett wenn du mir dazu vielleich einen Export machen könntes.

                            Danke!

                            1 Antwort Letzte Antwort
                            0
                            • AxelF1977A AxelF1977

                              Hi zusammen,

                              ich dachte mir, es ist mal an der Zeit, meine Visualisierung zu präsentieren. Sie basiert auf der letzten Version des Material Design Framework von @Uhula. Ich möchte das hier als Inspiration zeigen, was man damit so machen kann, wenn man sich mit CSS auskennt.
                              Das ganze Projekt zu exportieren wird nicht gehen, dafür ist das zu groß und komplex. Einzelne Seite könnte ich aber gerne probieren. Sehr es mir aber bitte nach, das es in der Vorweihnachtszeit aber gerade knapp ist mit der Zeit dafür.

                              Viele Views sind in mehrere einzelne Views aufgeteilt. Auch wegen der dynamischen Größenanpassung. Das Projekt soll sowohl auf meinen Tablets (alle 1280er Auflösungen) Also auch ein meinen Geräten mit FullHD Auflösung funktionieren.

                              Großen Dank an der Stelle an @Uhula für das Framework, @sigi234 für das Bereitstellen seiner HUE View (habe ich bei mir als Expertenmodus eingebunden), @sissiwup für die Erklärung wie Grafana eingebunden wird, und allen die hier Scripte und Views präsentiert haben, die ich nutzen konnte, bzw. Anregungen gefunden habe.

                              Es ist noch viel zu tun, aber ich hier schon 2 Jahre entwickel, habe ich Geduld.

                              Meine persönlichen Highlights

                              • Hintergrund der Lampensteuerungen passen sich entweder in Farbe oder Weißwert dem aktuellen Zustand der Lampen an
                              • Lichtseite ähnlich aufgebaut wie die HUE App
                              • Mein Spotify VIEW, gibt es schon im Forum
                              • Das Heizungsview, durch das Auswählen des Punktes "wie Vortag" wird die ganze Zeile ein oder ausgeblendet, im unteren Teil sieht man den Heitungsverbrauch im Vergleich zu den Vorjahren, hier werden direkt die Techem Thermostate ausgelesen über einen Stick und über FHEM die Werte nach ioBroker geholt

                              Viel Spaß beim Stöbern und Anregungen holen, bei Fragen stehe ich Euch gerne zur Verfügung

                              001.jpg

                              002.jpg

                              003.jpg

                              004.jpg

                              005.jpg

                              006.jpg

                              007.jpg

                              008.jpg

                              009.jpg

                              011.jpg

                              013.jpg

                              012.jpg

                              014.jpg

                              014.5.jpg

                              015.jpg

                              015.5.jpg

                              016.jpg

                              017.jpg

                              018.jpg

                              019.jpg

                              020.jpg

                              Ralf RiebeR Offline
                              Ralf RiebeR Offline
                              Ralf Riebe
                              schrieb am zuletzt editiert von
                              #38

                              @axelf1977

                              könntest du mir ein Export vom Wetter auf deine Startseite machen?

                              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

                              696

                              Online

                              32.4k

                              Benutzer

                              81.6k

                              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