Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. [Projekt] Material Design CSS für ioBroker.vis

NEWS

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    2.1k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    935

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.2k

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

Scheduled Pinned Locked Moved Visualisierung
650 Posts 111 Posters 231.0k Views 68 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • NegaleinN Offline
    NegaleinN Offline
    Negalein
    Global Moderator
    wrote on last edited by
    #347

    @intruder7:

    Habs vertauscht :o

    Trag es mal so ein. Sollte dann von Tag 1 bis Tag 0 blinken ;)

    {val:javascript.0.muell.Restabfall; val<=1? "mdui-red-flash": val>=2? "": "yellowgreen"} `

    Kein Problem!

    Habs gerade selber auch entdeckt! :)

    ° Node.js & System Update ---> sudo apt update, iob stop, sudo apt full-upgrade
    ° Node.js Fixer ---> iob nodejs-update
    ° Fixer ---> iob fix

    1 Reply Last reply
    0
    • coyoteC Offline
      coyoteC Offline
      coyote
      Most Active
      wrote on last edited by
      #348

      Ich sag ja, es geht bestimmt auch einfacher ;)

      Schöne, einfache Lösung. Danke intruder7 werde ich vllt auch so übernehmen 8-)

      1 Reply Last reply
      0
      • I Offline
        I Offline
        IOkev
        wrote on last edited by
        #349

        Hallo, ich bin zur zeit an der erarbeitung meiner views, ich hätte eine frage, kann mir jeamand sagen ob man nur den lnav und rnav button und den zurück button nehmen kann und was ich dafür alles benötige? Ich bin anfänger und vertraue mich immer mehr an mit css und den skripten aber komme mit dem material design noch nicht so richtig klar. wäre dankbar über eure hilfe. Danke MFG Kevin

        1 Reply Last reply
        0
        • S Offline
          S Offline
          Saschag
          wrote on last edited by
          #350

          Hallo zusammen,

          ich hätte gerne einen raisedbutton oder flatbutton zum steuern von VT einer CCU oder zum triggern eines HM Programm.

          Habe schon mit dem Hq Button gespielt aber der will nicht so richtig in die CSS (optisch)

          Hat da jemand schon etwas?

          Grüße

          1 Reply Last reply
          0
          • sw23S Offline
            sw23S Offline
            sw23
            wrote on last edited by sw23
            #351

            Hi,

            ich bin ein Neuling hier.

            Wie kann ich denn die Views (MD_Simple oder MD_Demo) importieren. Wenn ich auf Views gehe und importiern nutze, bekomme ich den Fehler "Cannot render view "NameDerView". Invalid settings. Projekt Import geht gar nicht, da falsches File Format und via der Suche habe ich leider auch noch nichts geeignetes gefunden.

            Vielleicht hat ja wer einen Hinweis für mich :)

            sigi234S 1 Reply Last reply
            0
            • sw23S sw23

              Hi,

              ich bin ein Neuling hier.

              Wie kann ich denn die Views (MD_Simple oder MD_Demo) importieren. Wenn ich auf Views gehe und importiern nutze, bekomme ich den Fehler "Cannot render view "NameDerView". Invalid settings. Projekt Import geht gar nicht, da falsches File Format und via der Suche habe ich leider auch noch nichts geeignetes gefunden.

              Vielleicht hat ja wer einen Hinweis für mich :)

              sigi234S Online
              sigi234S Online
              sigi234
              Forum Testing Most Active
              wrote on last edited by sigi234
              #352

              @sw23

              Zip einfügen, Name vergeben.

              Das ist keine View sondern ein Projekt!

              Screenshot (1815).png

              Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
              Immer Daten sichern!

              sw23S 1 Reply Last reply
              0
              • sigi234S sigi234

                @sw23

                Zip einfügen, Name vergeben.

                Das ist keine View sondern ein Projekt!

                Screenshot (1815).png

                sw23S Offline
                sw23S Offline
                sw23
                wrote on last edited by
                #353

                @sigi234 sagte in [Projekt] Material Design CSS für ioBroker.vis:

                @sw23

                Zip einfügen, Name vergeben.

                Screenshot (1815).png

                Ohh, das ging ja einfach und schnell. Vielen Dank. Auf die Idee mit dem Zip hätte ich auch kommen können ;)

                Hat wunderbar geklappt.

                1 Reply Last reply
                0
                • K Offline
                  K Offline
                  K_o_bold
                  wrote on last edited by
                  #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 Reply Last reply
                  0
                  • S Offline
                    S Offline
                    Saschag
                    wrote on last edited by
                    #355

                    Hallo,

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

                    Danke und Grüße

                    Unbenannt.JPG

                    UhulaU 1 Reply Last reply
                    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
                      wrote on last edited by
                      #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 Reply Last reply
                      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
                        wrote on last edited by
                        #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 Reply Last reply
                        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
                          wrote on last edited by
                          #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 Reply Last reply
                          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 Offline
                            K Offline
                            K_o_bold
                            wrote on last edited by
                            #359

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

                            1 Reply Last reply
                            0
                            • UhulaU Offline
                              UhulaU Offline
                              Uhula
                              wrote on last edited by
                              #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 Replies Last reply
                              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
                                wrote on last edited by
                                #361

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

                                Danke und viele Grüße
                                ThomasLPZ

                                1 Reply Last reply
                                0
                                • L Online
                                  L Online
                                  lesiflo
                                  Most Active
                                  wrote on last edited by
                                  #362

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

                                  1 Reply Last reply
                                  1
                                  • D Offline
                                    D Offline
                                    danyo80
                                    wrote on last edited by
                                    #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 Reply Last reply
                                    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
                                      wrote on last edited by
                                      #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 Reply Last reply
                                      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
                                        wrote on last edited by
                                        #365

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

                                        Gruß
                                        danyo

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


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          726

                                          Online

                                          32.6k

                                          Users

                                          82.2k

                                          Topics

                                          1.3m

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

                                          • Don't have an account? Register

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