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

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

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

Geplant Angeheftet Gesperrt Verschoben Visualisierung
650 Beiträge 111 Kommentatoren 221.2k 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.
  • K Online
    K Online
    K_o_bold
    schrieb am zuletzt editiert von
    #354

    Hallo zusammen,

    erst mal vielen Dank an Uhula für die tolle Arbeit und das kostenlose bereitstellen.
    Da ich noch unerfahren mit CSS und HTML bin, benötige ich Unterstützung bei einer Fehlersuche.
    Ich habe das MD_Demo Projekt importiert und bediene mich aus einzelnen Bereichen. Das funktionierte bisher auch ganz gut.
    Aktuell bin ich dabei ein Flot Diagramm in meine VIS einzubinden und habe dazu die CardFlot integriert.
    Mein Problem ist jetzt, dass das drop down Menü nicht funtioniert. Die einzelnen Buttons werden immer angezeigt und der im Bild gelb markierte Button hat keine Funktion.

    Hat jemand eine Idee woran das liegen könnte?
    Drop down bug.JPG

    UhulaU 1 Antwort Letzte Antwort
    0
    • S Offline
      S Offline
      Saschag
      schrieb am zuletzt editiert von
      #355

      Hallo,

      kann mir jemnad verraten wie ich den "blauen" Button (sieh Screenshort) bearbeiten kann?

      Danke und Grüße

      Unbenannt.JPG

      UhulaU 1 Antwort Letzte Antwort
      0
      • K K_o_bold

        Hallo zusammen,

        erst mal vielen Dank an Uhula für die tolle Arbeit und das kostenlose bereitstellen.
        Da ich noch unerfahren mit CSS und HTML bin, benötige ich Unterstützung bei einer Fehlersuche.
        Ich habe das MD_Demo Projekt importiert und bediene mich aus einzelnen Bereichen. Das funktionierte bisher auch ganz gut.
        Aktuell bin ich dabei ein Flot Diagramm in meine VIS einzubinden und habe dazu die CardFlot integriert.
        Mein Problem ist jetzt, dass das drop down Menü nicht funtioniert. Die einzelnen Buttons werden immer angezeigt und der im Bild gelb markierte Button hat keine Funktion.

        Hat jemand eine Idee woran das liegen könnte?
        Drop down bug.JPG

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

        @K_o_bold Hi, du musst den Schaltflächen noch mitteilen, welches Widget sie als Ziel nutzen sollen. Dieses Ziel gibst du bei der Schaltfläche unter "CSS Klasse" als "mdui-target-<dein ziel widget>" an.
        Wenn dein Grafik-Widget z.B. die ID w00090 hat (siehst du rechts in den Optionen, wenn da das Widget markierst), dann gibts du in der Schaltfläche unter "CSS Klasse" den Wert "mdui-target-w00090" an.
        Bei den anderen Schaltflächen zum Zoomen usw. auch.

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

        K 1 Antwort Letzte Antwort
        0
        • S Saschag

          Hallo,

          kann mir jemnad verraten wie ich den "blauen" Button (sieh Screenshort) bearbeiten kann?

          Danke und Grüße

          Unbenannt.JPG

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

          @Saschag Dieser "floating button" ist normalerweise im view "abar" eingefügt - bei mir hat er den Namen mainSTATE. Da es sich um einen floatenden Button handelt, ist er im Designer nicht leicht zu packen. Am besten den view "abar" wählen und dann über die Liste "Aktive Widgets" (links oben) das Widget "mainSTATE" wählen, dann kann man die Eigenschaften bearbeiten. Achtung: In der Liste sollte nur dieses eine Widget markiert sein.

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

          S 1 Antwort Letzte Antwort
          0
          • UhulaU Uhula

            @Saschag Dieser "floating button" ist normalerweise im view "abar" eingefügt - bei mir hat er den Namen mainSTATE. Da es sich um einen floatenden Button handelt, ist er im Designer nicht leicht zu packen. Am besten den view "abar" wählen und dann über die Liste "Aktive Widgets" (links oben) das Widget "mainSTATE" wählen, dann kann man die Eigenschaften bearbeiten. Achtung: In der Liste sollte nur dieses eine Widget markiert sein.

            S Offline
            S Offline
            Saschag
            schrieb am zuletzt editiert von
            #358

            @Uhula

            Super! Danke. Habe etwas suchen müssen war im „page1“ versteckt.

            Danke nochmal für dein Mega tolles Projekt.

            Bin etwas süchtig :relaxed: :smile:

            1 Antwort Letzte Antwort
            0
            • UhulaU Uhula

              @K_o_bold Hi, du musst den Schaltflächen noch mitteilen, welches Widget sie als Ziel nutzen sollen. Dieses Ziel gibst du bei der Schaltfläche unter "CSS Klasse" als "mdui-target-<dein ziel widget>" an.
              Wenn dein Grafik-Widget z.B. die ID w00090 hat (siehst du rechts in den Optionen, wenn da das Widget markierst), dann gibts du in der Schaltfläche unter "CSS Klasse" den Wert "mdui-target-w00090" an.
              Bei den anderen Schaltflächen zum Zoomen usw. auch.

              K Online
              K Online
              K_o_bold
              schrieb am zuletzt editiert von
              #359

              @Uhula , danke...Das hat funktioniert...

              1 Antwort Letzte Antwort
              0
              • UhulaU Offline
                UhulaU Offline
                Uhula
                schrieb am zuletzt editiert von
                #360

                Vorab-Info:
                Ich habe das Material Design CSS/Script bei mir etwas erweitert, es kann nun auch "Chips" darstellen (Alternative zu Radio-Buttons). Wenn ich es auf Github aktualisiert habe, gibt es einen Hinweis hier im Forum.

                087dd4fa-9a1c-4716-9969-296a2530cde8-image.png

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

                ThomasLPZT D 2 Antworten Letzte Antwort
                7
                • UhulaU Uhula

                  Vorab-Info:
                  Ich habe das Material Design CSS/Script bei mir etwas erweitert, es kann nun auch "Chips" darstellen (Alternative zu Radio-Buttons). Wenn ich es auf Github aktualisiert habe, gibt es einen Hinweis hier im Forum.

                  087dd4fa-9a1c-4716-9969-296a2530cde8-image.png

                  ThomasLPZT Offline
                  ThomasLPZT Offline
                  ThomasLPZ
                  schrieb am zuletzt editiert von
                  #361

                  @Uhula
                  Das sieht gut aus und ich freue mich auf die Erweiterung :-)

                  Danke und viele Grüße
                  ThomasLPZ

                  1 Antwort Letzte Antwort
                  0
                  • L Offline
                    L Offline
                    lesiflo
                    Most Active
                    schrieb am zuletzt editiert von
                    #362

                    Cool ! Wann geht's los ? :+1:

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


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          701

                                          Online

                                          32.4k

                                          Benutzer

                                          81.5k

                                          Themen

                                          1.3m

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

                                          • Du hast noch kein Konto? Registrieren

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