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

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

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

NEWS

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

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

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

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

Geplant Angeheftet Gesperrt Verschoben Visualisierung
650 Beiträge 111 Kommentatoren 220.7k 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.
  • NegaleinN Offline
    NegaleinN Offline
    Negalein
    Global Moderator
    schrieb am zuletzt editiert von
    #344

    @intruder7:

    macht es nicht so kompliziert….

    wenn dun unter css die mdui-color-flash class hast dann gib einfach in deinem Widget unter CSS Klasse

    {val:"hier den Datenpunkt für die Tage rein ohne Anführungszeichen"; val==0? "": val>=1? "mdui-red-flash": "yellowgreen"}

    ein.

    du must allerdings in deinem Projekt die Javaskripte und CSS Klassen von Uhula drin haben. `

    Bins nochmal!

    Also, ich hab {val:javascript.0.muell.Restabfall; val==0? "": val>=1? "mdui-red-flash": "yellowgreen"} in CSS Klass vom Widget geschrieben!

    Allerdings blinkt das Widget jetzt schon. Es sollte erst 1 Tag vor Abholung blinken!

    Hab ich was falsch eingetragen?

    Danke

    ° Node.js: 20.17.0 NPM: 10.8.2
    ° Proxmox, Ubuntu 22.04.3 LTS
    ° Fixer ---> iob fix

    1 Antwort Letzte Antwort
    0
    • NegaleinN Offline
      NegaleinN Offline
      Negalein
      Global Moderator
      schrieb am zuletzt editiert von
      #345

      @coyote:

      Dann versuche mal das hier, füge es einfach am Ende des Scripts ein: `

      Danke, deins versuch ich natürlich auch!

      Gehört das ins Müllscript?

      ° Node.js: 20.17.0 NPM: 10.8.2
      ° Proxmox, Ubuntu 22.04.3 LTS
      ° Fixer ---> iob fix

      1 Antwort Letzte Antwort
      0
      • I Online
        I Online
        intruder7
        schrieb am zuletzt editiert von
        #346

        @Negalein:

        @intruder7:

        macht es nicht so kompliziert….

        wenn dun unter css die mdui-color-flash class hast dann gib einfach in deinem Widget unter CSS Klasse

        {val:"hier den Datenpunkt für die Tage rein ohne Anführungszeichen"; val==0? "": val>=1? "mdui-red-flash": "yellowgreen"}

        ein.

        du must allerdings in deinem Projekt die Javaskripte und CSS Klassen von Uhula drin haben. `

        Bins nochmal!

        Also, ich hab {val:javascript.0.muell.Restabfall; val==0? "": val>=1? "mdui-red-flash": "yellowgreen"} in CSS Klass vom Widget geschrieben!

        Allerdings blinkt das Widget jetzt schon. Es sollte erst 1 Tag vor Abholung blinken!

        Hab ich was falsch eingetragen?

        Danke `

        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"}

        1 Antwort Letzte Antwort
        0
        • NegaleinN Offline
          NegaleinN Offline
          Negalein
          Global Moderator
          schrieb am zuletzt editiert von
          #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: 20.17.0 NPM: 10.8.2
          ° Proxmox, Ubuntu 22.04.3 LTS
          ° Fixer ---> iob fix

          1 Antwort Letzte Antwort
          0
          • coyoteC Offline
            coyoteC Offline
            coyote
            Most Active
            schrieb am zuletzt editiert von
            #348

            Ich sag ja, es geht bestimmt auch einfacher ;)

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

            1 Antwort Letzte Antwort
            0
            • I Offline
              I Offline
              IOkev
              schrieb am zuletzt editiert von
              #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 Antwort Letzte Antwort
              0
              • S Offline
                S Offline
                Saschag
                schrieb am zuletzt editiert von
                #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 Antwort Letzte Antwort
                0
                • sw23S Offline
                  sw23S Offline
                  sw23
                  schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                  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
                    schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                    0
                    • sigi234S sigi234

                      @sw23

                      Zip einfügen, Name vergeben.

                      Das ist keine View sondern ein Projekt!

                      Screenshot (1815).png

                      sw23S Offline
                      sw23S Offline
                      sw23
                      schrieb am zuletzt editiert von
                      #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 Antwort Letzte Antwort
                      0
                      • 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
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          723

                                          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