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. [Projekt] Material Design CSS für ioBroker.vis

NEWS

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

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

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

[Projekt] Material Design CSS für ioBroker.vis

Geplant Angeheftet Gesperrt Verschoben Visualisierung
650 Beiträge 111 Kommentatoren 221.0k Aufrufe 68 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
    danyo80
    schrieb am zuletzt editiert von
    #363

    Hallo zusammen,

    danke erstmal an Uhula, für diese tolle Projekt. Ich arbeite mich auch gerade ein wenig ein. Dank der guten Dokumentation aber nicht ganz so schwer.

    Eine Frage habe ich mal. Ich nutze die iobroker.vis App. Wie definiere ich denn bei dem Design die Default Startseite. Ich möchte, dass immer pageMain aufgerufen wird, beim starten der App. Allerdings habe ich immer nur einen weißen Hintergrund ohne jegliche Inhalte. Das Kästchen für Default View im VIS ist nur auswählbar, wenn man eine View Größe angibt, aber bei dem Demoprojekt z.B. sind auch keine Größen definiert, dennoch startet immer die Landingpage _landing.

    Habe ich vielleicht etwas übersehen?

    Danke und Gruß
    Danyo

    UhulaU 1 Antwort Letzte Antwort
    0
    • D danyo80

      Hallo zusammen,

      danke erstmal an Uhula, für diese tolle Projekt. Ich arbeite mich auch gerade ein wenig ein. Dank der guten Dokumentation aber nicht ganz so schwer.

      Eine Frage habe ich mal. Ich nutze die iobroker.vis App. Wie definiere ich denn bei dem Design die Default Startseite. Ich möchte, dass immer pageMain aufgerufen wird, beim starten der App. Allerdings habe ich immer nur einen weißen Hintergrund ohne jegliche Inhalte. Das Kästchen für Default View im VIS ist nur auswählbar, wenn man eine View Größe angibt, aber bei dem Demoprojekt z.B. sind auch keine Größen definiert, dennoch startet immer die Landingpage _landing.

      Habe ich vielleicht etwas übersehen?

      Danke und Gruß
      Danyo

      UhulaU Offline
      UhulaU Offline
      Uhula
      schrieb am zuletzt editiert von
      #364

      @danyo80 Wenn kein "Default"-View definiert wurde, wird - nach meinen Tests - immer der View genommen, der in der Sortierung ganz links/oben steht. Im Demo Projekt eben "_landing" (durch das _, ist kleiner als A). Ich habe mal eben einen View mit "__test" angelegt, in der vis-App wird dann dieser verwendet. Du müsstest also deine "pageMain" als Default markieren, oder in "_pageMain" umbenennen.
      In der Vis App kann man m.E. keine Start-View direkt angeben. In Browsers in der URL schon, indem man den View Namen hinten nach einem # anhängt.
      Bsp: http://x.x.x.x.:8082/vis/index.html?MD_Demo#pageStart

      Uhula - Leise und Weise
      Ex: ioBroker on Gigabyte NUC Proxmox

      D 1 Antwort Letzte Antwort
      0
      • UhulaU Uhula

        @danyo80 Wenn kein "Default"-View definiert wurde, wird - nach meinen Tests - immer der View genommen, der in der Sortierung ganz links/oben steht. Im Demo Projekt eben "_landing" (durch das _, ist kleiner als A). Ich habe mal eben einen View mit "__test" angelegt, in der vis-App wird dann dieser verwendet. Du müsstest also deine "pageMain" als Default markieren, oder in "_pageMain" umbenennen.
        In der Vis App kann man m.E. keine Start-View direkt angeben. In Browsers in der URL schon, indem man den View Namen hinten nach einem # anhängt.
        Bsp: http://x.x.x.x.:8082/vis/index.html?MD_Demo#pageStart

        D Offline
        D Offline
        danyo80
        schrieb am zuletzt editiert von
        #365

        @Uhula Hi, besten Dank.... funktioniert so..... :-)

        Gruß
        danyo

        1 Antwort Letzte Antwort
        0
        • D Offline
          D Offline
          davincino
          schrieb am zuletzt editiert von
          #366

          Top, gefällt mir auch gut. Das Material Design gibt optisch einiges her und mit deiner Vorlage kommt man echt schnell zu guten Ergebnissen. Danke an dieser Stelle auch für die Weiterentwicklung. Freue mich schon auf das Update.

          1 Antwort Letzte Antwort
          0
          • foxriver76F Offline
            foxriver76F Offline
            foxriver76
            Developer
            schrieb am zuletzt editiert von
            #367

            @Uhula ich habe auf einer Card, ein Widget, welches dynamisch die Höhe verändert, entsprechend habe ich ihm height: auto verpasst. Wenn ich nun der Card allerdings auf meinem Content View auch eine Auto Höhe festlegen möchte, erhält die Card dadurch 0px und ist nicht sichtbar. Hast du da einen guten Tipp um das Problem zu lösen? ;-)

            Videotutorials & mehr

            Hier könnt ihr mich unterstützen.

            UhulaU 1 Antwort Letzte Antwort
            0
            • foxriver76F foxriver76

              @Uhula ich habe auf einer Card, ein Widget, welches dynamisch die Höhe verändert, entsprechend habe ich ihm height: auto verpasst. Wenn ich nun der Card allerdings auf meinem Content View auch eine Auto Höhe festlegen möchte, erhält die Card dadurch 0px und ist nicht sichtbar. Hast du da einen guten Tipp um das Problem zu lösen? ;-)

              UhulaU Offline
              UhulaU Offline
              Uhula
              schrieb am zuletzt editiert von
              #368

              @foxriver76 Height:auto unter CSS ist mit Vorsicht zu genießen, funktioniert zwar bei reinen Text-Elementen ganz gut, hat aber ansonsten seine Grenzen; bei Cards geht es nicht, die benötigen eine feste Höhe oder eine berechnete Höhe zum Eltern-Element.
              Im MD kannst du in der cont-Page dem Card-Container mit mdui-rows-n (n=1 bis 10) eine relative Höhe zuweisen. Bsp: "mdui-rows-3"

              Wenn die Card immer 100% haben soll: Height=100%

              Interessant ist auch, dass man in den Left/Top/Height/Width Zuweisungen "rechnen" kann um somit relative Werte anzugeben.

              Bsp: Left=calc(100% - 59px); Height=calc(100% - 26px); Height=calc(50% + 20px) usw

              Wichtig: "-" und "*" müssen mit Leerzeichen abgegrenzt sein, also " + ", " - "

              Uhula - Leise und Weise
              Ex: ioBroker on Gigabyte NUC Proxmox

              foxriver76F 1 Antwort Letzte Antwort
              1
              • UhulaU Uhula

                @foxriver76 Height:auto unter CSS ist mit Vorsicht zu genießen, funktioniert zwar bei reinen Text-Elementen ganz gut, hat aber ansonsten seine Grenzen; bei Cards geht es nicht, die benötigen eine feste Höhe oder eine berechnete Höhe zum Eltern-Element.
                Im MD kannst du in der cont-Page dem Card-Container mit mdui-rows-n (n=1 bis 10) eine relative Höhe zuweisen. Bsp: "mdui-rows-3"

                Wenn die Card immer 100% haben soll: Height=100%

                Interessant ist auch, dass man in den Left/Top/Height/Width Zuweisungen "rechnen" kann um somit relative Werte anzugeben.

                Bsp: Left=calc(100% - 59px); Height=calc(100% - 26px); Height=calc(50% + 20px) usw

                Wichtig: "-" und "*" müssen mit Leerzeichen abgegrenzt sein, also " + ", " - "

                foxriver76F Offline
                foxriver76F Offline
                foxriver76
                Developer
                schrieb am zuletzt editiert von
                #369

                @Uhula Danke für deine ausführliche Antwort.

                Um es mal besser bildlich darzustellen, es geht um das folgende Widget, bei dem die Anzahl an Items variieren kann und somit entsprechend die Höhe, auf dem Bild sieht man den View für die Card, hier funktioniert es mit der auto Höhe prima.

                So wie ich dich verstehe, kann ich es also wenn dann direkt ohne Card in den Content packen, damit die automatische Höhenanpassung läuft, ansonsten könnte ich wohl nur mit JS rumtricksen um die Höhe dynamisch zu ändern, wenn ein Item kommt/geht.

                Bildschirmfoto von 2019-03-24 11-19-39.png

                Videotutorials & mehr

                Hier könnt ihr mich unterstützen.

                UhulaU 1 Antwort Letzte Antwort
                0
                • foxriver76F foxriver76

                  @Uhula Danke für deine ausführliche Antwort.

                  Um es mal besser bildlich darzustellen, es geht um das folgende Widget, bei dem die Anzahl an Items variieren kann und somit entsprechend die Höhe, auf dem Bild sieht man den View für die Card, hier funktioniert es mit der auto Höhe prima.

                  So wie ich dich verstehe, kann ich es also wenn dann direkt ohne Card in den Content packen, damit die automatische Höhenanpassung läuft, ansonsten könnte ich wohl nur mit JS rumtricksen um die Höhe dynamisch zu ändern, wenn ein Item kommt/geht.

                  Bildschirmfoto von 2019-03-24 11-19-39.png

                  UhulaU Offline
                  UhulaU Offline
                  Uhula
                  schrieb am zuletzt editiert von
                  #370

                  @foxriver76 Da habe ich leider auch keine direkte Lösung, da irgendwann, wenn die Anzahl der innenliegenden Icons zu groß wird, sicher auch der Inhalt gescrollt werden können soll. Ich habe ein ähnliches Problem mit der Anzeige der Telefonate - eine wachsende Tabelle.
                  Ich empfehle dir die Höhe des Widgets auf calc(100% - 58px - 13px) zu setzen, damit bestimmt dann die Angabe im cont-View die Darstellhöhe (und scrollen wird möglich). Im cont-View kannst du dann für dein card-View 100% setzen, dann füllt die card den ganzen content aus.

                  Uhula - Leise und Weise
                  Ex: ioBroker on Gigabyte NUC Proxmox

                  1 Antwort Letzte Antwort
                  0
                  • T Offline
                    T Offline
                    tempestas
                    schrieb am zuletzt editiert von
                    #371

                    @Uhula

                    Woran kann es liegen, dass die Menu Bar auf allen Seiten sauber "einfährt"; nur wenn ich von einer anderen Page auf meine Hauptpage zurückgehe, bleibt das Menü stehen und ich muss durch klick irgendwo hin dieses einfahren lassen.

                    Ideen?

                    Danke vorab!

                    <size="85">ioBroker | 21 Adapter | Ubuntu Server | intel NUC | Homematic CCU2 | Hue | Osram Lightify| Sonos | 2x Instar Cam | Samsung Tab A 2016 im Holzrahmen| 3x Echo dot | 1x Echo | Neato Botvac D5</size>

                    M UhulaU 2 Antworten Letzte Antwort
                    0
                    • T tempestas

                      @Uhula

                      Woran kann es liegen, dass die Menu Bar auf allen Seiten sauber "einfährt"; nur wenn ich von einer anderen Page auf meine Hauptpage zurückgehe, bleibt das Menü stehen und ich muss durch klick irgendwo hin dieses einfahren lassen.

                      Ideen?

                      Danke vorab!

                      M Offline
                      M Offline
                      marcel-k
                      schrieb am zuletzt editiert von
                      #372

                      @Uhula Leider hänge ich am vermutlich einfachsten fest ... ich weiß nicht wie ich die Widget Container anders platzieren kann. Unter "CSS Allgemein -> Top oder Left , reagieren die Container nicht wenn man die pixel Werte ändert ... Wo sind die Werte bitte einzutragen?

                      Auch ich möchte mich für deine Arbeit bedanken ... das ist wirklich sehr gelungen!InkedScreenshot_2019-04-15 Edit vis_LI.jpg

                      foxriver76F UhulaU 2 Antworten Letzte Antwort
                      0
                      • M marcel-k

                        @Uhula Leider hänge ich am vermutlich einfachsten fest ... ich weiß nicht wie ich die Widget Container anders platzieren kann. Unter "CSS Allgemein -> Top oder Left , reagieren die Container nicht wenn man die pixel Werte ändert ... Wo sind die Werte bitte einzutragen?

                        Auch ich möchte mich für deine Arbeit bedanken ... das ist wirklich sehr gelungen!InkedScreenshot_2019-04-15 Edit vis_LI.jpg

                        foxriver76F Offline
                        foxriver76F Offline
                        foxriver76
                        Developer
                        schrieb am zuletzt editiert von
                        #373

                        @marcel-k die mdui-float klasse lässt die Widgets floaten, sprich du müsstest mal die Klasse weg tun und neu angeben um ein Widget ganz hinten einzufügen.

                        Videotutorials & mehr

                        Hier könnt ihr mich unterstützen.

                        1 Antwort Letzte Antwort
                        0
                        • M marcel-k

                          @Uhula Leider hänge ich am vermutlich einfachsten fest ... ich weiß nicht wie ich die Widget Container anders platzieren kann. Unter "CSS Allgemein -> Top oder Left , reagieren die Container nicht wenn man die pixel Werte ändert ... Wo sind die Werte bitte einzutragen?

                          Auch ich möchte mich für deine Arbeit bedanken ... das ist wirklich sehr gelungen!InkedScreenshot_2019-04-15 Edit vis_LI.jpg

                          UhulaU Offline
                          UhulaU Offline
                          Uhula
                          schrieb am zuletzt editiert von
                          #374

                          @marcel-k Moin, da gibt es im vis leider keinen direkten Weg, da es keine Funktion gibt um die Widgets in der Erstellungsreihenfolge zu ändern (wäre als Feature request sinnvoll).
                          Du kannst es erreichen, in dem du alle Widgets, die nach deinem Widget angezeigt werden sollen, markierst und "exportierst" (in die Zwischenablage). Dann löschen und anschließend wieder "importieren". Etwas umständlich, funktioniert aber.

                          Uhula - Leise und Weise
                          Ex: ioBroker on Gigabyte NUC Proxmox

                          M 1 Antwort Letzte Antwort
                          0
                          • T tempestas

                            @Uhula

                            Woran kann es liegen, dass die Menu Bar auf allen Seiten sauber "einfährt"; nur wenn ich von einer anderen Page auf meine Hauptpage zurückgehe, bleibt das Menü stehen und ich muss durch klick irgendwo hin dieses einfahren lassen.

                            Ideen?

                            Danke vorab!

                            UhulaU Offline
                            UhulaU Offline
                            Uhula
                            schrieb am zuletzt editiert von
                            #375

                            @tempestas da habe ich leider keine Idee. Kenne den Effekt aber auch und vermeide ihn, indem ich Drittseiten nur mit blank-targets aufrufe. Also als neues Tab im Browser. Ich nutze die iobroker vis App.

                            Uhula - Leise und Weise
                            Ex: ioBroker on Gigabyte NUC Proxmox

                            1 Antwort Letzte Antwort
                            0
                            • UhulaU Uhula

                              @marcel-k Moin, da gibt es im vis leider keinen direkten Weg, da es keine Funktion gibt um die Widgets in der Erstellungsreihenfolge zu ändern (wäre als Feature request sinnvoll).
                              Du kannst es erreichen, in dem du alle Widgets, die nach deinem Widget angezeigt werden sollen, markierst und "exportierst" (in die Zwischenablage). Dann löschen und anschließend wieder "importieren". Etwas umständlich, funktioniert aber.

                              M Offline
                              M Offline
                              marcel-k
                              schrieb am zuletzt editiert von marcel-k
                              #376

                              @Uhula Vielen Dank natürlich auch für den spitzen Support ! Ehrlich, das macht richtig Spaß ... den Umweg finde ich keineswegs umständlich, das dauert manchmal mit CSS Anweisungen etwas länger ... Jetzt muss ich die Container nur noch auf die richtige Größe bringen, damit sie auch auch genau dahin floaten wo ich sie haben möchte ...

                              Also nochmal, dicken Daumen nach oben, ganz großes Kino

                              EDIT 05.05.19: Ok, auch mit den CSS Anweisungen in der VIS super einfach !

                              1 Antwort Letzte Antwort
                              0
                              • D Offline
                                D Offline
                                dos1973
                                schrieb am zuletzt editiert von
                                #377

                                jetzt wollte ich mich auch mal daran versuchen, aber ich bekomme keines der bsp Projekt importiert?!

                                VIS meldet erfolgreich, dann findet er keinerlei JSON Dateien und ich lande auf das Standard Projekt. Gibt es etwas zu beachten?

                                1 Antwort Letzte Antwort
                                0
                                • L Offline
                                  L Offline
                                  Lumpenhund
                                  schrieb am zuletzt editiert von
                                  #378

                                  Hi Leute,

                                  erstmal "Hut ab" sehr gelungenes Design.
                                  Ein Problem tritt bei mir auf welches ich trotz viel Suchen und probieren nicht lösen konnte. Vielleicht kann mir jemand auf die Sprünge helfen.
                                  Die Schriftart des mdui-select lässt sich nicht anpassen. Ganzheitlich wird ja Roboto verwendet, aber im Selector scheint eine Standard Schrift hinterlegt zu sein, die sich nicht ändern lässt. Hat da jemand Erfahrungen...Hier mal ein Screenshot.. ich hoffe es wird klar:
                                  schrift.JPG
                                  Danke und Grüße

                                  1 Antwort Letzte Antwort
                                  0
                                  • L Offline
                                    L Offline
                                    Lumpenhund
                                    schrieb am zuletzt editiert von
                                    #379

                                    der Vollständigkeit halber:
                                    habe es gefunden. Der Eintrag muss in der mdui-select select erfolgen:

                                    .mdui-select select  {
                                      color : rgba(255,255,255,1);
                                      height:100% !important;
                                      font-size:1em !important;
                                      font-family: Roboto, Arial;
                                      background: rgba(0,0,0,0);
                                      border: none;
                                      outline: none;
                                      border-bottom : 2px solid rgba(255,255,255,0.54);
                                      width:100%;
                                    }
                                    
                                    

                                    nun passt es...
                                    Grüße

                                    1 Antwort Letzte Antwort
                                    1
                                    • L Offline
                                      L Offline
                                      LordAdragon
                                      schrieb am zuletzt editiert von
                                      #380

                                      Hey Leute,

                                      ich benötige einen Switch der nicht wie "basic bool checkbox" true/false setzt sondern 0/1. Wie kann ich das anstellen, stehe gerade irgendwie auf dem Schlauch.

                                      Grüße

                                      1 Antwort Letzte Antwort
                                      0
                                      • O Offline
                                        O Offline
                                        ok1
                                        schrieb am zuletzt editiert von
                                        #381

                                        @Uhula
                                        Hallo, ich nutze ja schon länger Dein MD CSS Framework. Mittlerweile hat sich darauf ein umfangreiches Projekt entwickelt.
                                        Das Problem ist nur, dass die Ladezeiten auf dem Samsung Tablet A10 immer länger werden - im Moment vom Reload der Seite bis zur Anzeige im Browser 20-30sec. Solange ist die Seite weiss. Im PC-Browser (Chrome wie auch auf dem A10 Tablet) lädt die Seite in ca. 3-5 sec.

                                        Auffällig ist beim Debuggen im Browser das Auftreten vieler jquery-Meldungen in der Browser-Console:

                                        jquery-1.11.2.min.js:3 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
                                        

                                        In Deinen MD_Demo Projekt sind das ca. 50 Meldungen und die Seite lädt in ca.3 sec, was gefühlt ok ist.
                                        In meinem größeren Projekt laufen derzeit 300 Meldungen auf, und die Ladezeit geht wie oben beschrieben gegen eine halbe Minute.

                                        Meine Frage ist, ob Du diese Meldungen evtl. kennst, ob diese kritisch für die Performance sind und ggf. einen Tipp hast, wie man sie weg bekommt.

                                        Ich habe zum Vergleich mal andere jquery-Seiten im Debugger mitlaufen lassen, da tauchen die o.g. Meldungen nicht auf und laden auch als jquery-Seiten schnell im Mobile-Chrome.

                                        Ich bin für jeden Tipp dankbar, VG ok

                                        MeistertrM O 2 Antworten Letzte Antwort
                                        0
                                        • O ok1

                                          @Uhula
                                          Hallo, ich nutze ja schon länger Dein MD CSS Framework. Mittlerweile hat sich darauf ein umfangreiches Projekt entwickelt.
                                          Das Problem ist nur, dass die Ladezeiten auf dem Samsung Tablet A10 immer länger werden - im Moment vom Reload der Seite bis zur Anzeige im Browser 20-30sec. Solange ist die Seite weiss. Im PC-Browser (Chrome wie auch auf dem A10 Tablet) lädt die Seite in ca. 3-5 sec.

                                          Auffällig ist beim Debuggen im Browser das Auftreten vieler jquery-Meldungen in der Browser-Console:

                                          jquery-1.11.2.min.js:3 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
                                          

                                          In Deinen MD_Demo Projekt sind das ca. 50 Meldungen und die Seite lädt in ca.3 sec, was gefühlt ok ist.
                                          In meinem größeren Projekt laufen derzeit 300 Meldungen auf, und die Ladezeit geht wie oben beschrieben gegen eine halbe Minute.

                                          Meine Frage ist, ob Du diese Meldungen evtl. kennst, ob diese kritisch für die Performance sind und ggf. einen Tipp hast, wie man sie weg bekommt.

                                          Ich habe zum Vergleich mal andere jquery-Seiten im Debugger mitlaufen lassen, da tauchen die o.g. Meldungen nicht auf und laden auch als jquery-Seiten schnell im Mobile-Chrome.

                                          Ich bin für jeden Tipp dankbar, VG ok

                                          MeistertrM Offline
                                          MeistertrM Offline
                                          Meistertr
                                          Developer
                                          schrieb am zuletzt editiert von
                                          #382

                                          @ok1 dem Problem kann ich mich anschließen.

                                          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

                                          704

                                          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