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. Entwicklung
  4. [Neuer VIS-Adpater] Material Design Widgets

NEWS

  • Monatsrückblick Januar/Februar 2026 ist online!
    BluefoxB
    Bluefox
    17
    1
    368

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

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

[Neuer VIS-Adpater] Material Design Widgets

Scheduled Pinned Locked Moved Entwicklung
adapter
271 Posts 30 Posters 57.1k Views 43 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.
  • ScroungerS Scrounger

    Hab eine neue Version hochgeladen, wo jetzt es jetzt SubMenu gibt.
    Wie ihr das konfigurieren müsste, steht hier

    topappbar_dismissible.gif

    Ich hab einiges geändert, d.h. evtl. zerschießt es euch die Top Bar und die List. Bevor ihr hier fehler postet, bitte zuerst die beiden Widgets komplett neu erstellen und dann testen ob es wirklich ein fehler ist!

    @crunchip, @andiko2
    Ich verwende jetzt die min lib der mdc api. Evtl. löst das das Ram Problem?

    Bitte testen.

    @gravidi sagte in [Neuer VIS-Adpater] Material Design Widgets:

    Du hattest noch nach einem Anwendungsbereich für das iframe tile gefragt. Ich lasse mir da z.B. meinen Kamerastream anzeigen.

    Ok, hat mir jemdand vielleicht auch ein funktionierendes Beispiel zu einem online stream, den man mit iFrame einbinden kann. Bräuchte das zu testzwecken und habe werde Zeit noch Lust mich in das iFrame im Detail einzuarbeiten.

    crunchipC Away
    crunchipC Away
    crunchip
    Forum Testing Most Active
    wrote on last edited by
    #186

    @Scrounger bei mir scheint das jetzt nach einem erneuten installieren nun auch korrekt zu laufen, Speicherproblem ist also nun beseitigt.
    Jetzt muss ich mich nur erst mal zurecht finden, wie das hier alles funtuoniert.

    umgestiegen von Proxmox auf Unraid

    1 Reply Last reply
    0
    • sigi234S Online
      sigi234S Online
      sigi234
      Forum Testing Most Active
      wrote on last edited by sigi234
      #187

      @Oli sagte in [Neuer VIS-Adpater] Material Design Widgets:

      Wo ändere ich die Hintergrundfarbe, für den Bereich der momentan Blau ist?

      Navigationsleiste: Farben
      Kopfzeile Hintergrund

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

      1 Reply Last reply
      0
      • O Oli

        Hallo @Scrounger ,

        ich finde den Adapter genial, danke für die Arbeit die du da hinein steckst.

        Allerdings hätte ich da noch ein paar Fragen dazu:

        1. Wenn ich aus der Navigation eine Seite aufrufe, wird sie mir angezeigt, aber nach ca 1 Minute verschwindet sie, woran könnte das liegen?

        3ce5f27e-f0e0-489e-a870-d61aafc08eb7-image.png

        6f51a132-92e8-481b-b244-c32e643323ae-image.png

        1. Wo ändere ich die Hintergrundfarbe, für den Bereich der momentan Blau ist?

        2. Wie muss ich die verschiedenen Seiten bei einem Untermenü eintragen? Momentan habe ich es, wie auf dem Bild bei Tab[5], leider wird mir da nichts angezeigt.

        c4eafc0b-0d4b-4d51-ad2a-77c2ac412edb-image.png

        Gruß Oliver

        ScroungerS Offline
        ScroungerS Offline
        Scrounger
        Developer
        wrote on last edited by Scrounger
        #188

        @Oli sagte in [Neuer VIS-Adpater] Material Design Widgets:

        Hallo @Scrounger ,

        ich finde den Adapter genial, danke für die Arbeit die du da hinein steckst.

        Allerdings hätte ich da noch ein paar Fragen dazu:

        1. Wenn ich aus der Navigation eine Seite aufrufe, wird sie mir angezeigt, aber nach ca 1 Minute verschwindet sie, woran könnte das liegen?

        kästchen bei persitent (dauernd) aktivieren, steht auch schon in der Doku ;)

        1. Wie muss ich die verschiedenen Seiten bei einem Untermenü eintragen? Momentan habe ich es, wie auf dem Bild bei Tab[5], leider wird mir da nichts angezeigt.

        c4eafc0b-0d4b-4d51-ad2a-77c2ac412edb-image.png

        Welche Version nutzt du? Falls ein Leerzeichen vor dem '|' das mal entfernen.
        Falls das nicht hilft das widget nochmal komplett neu aufbauen, hab da zur letzten Version ziemlich was geändert.

        O 1 Reply Last reply
        0
        • ScroungerS Scrounger

          @Oli sagte in [Neuer VIS-Adpater] Material Design Widgets:

          Hallo @Scrounger ,

          ich finde den Adapter genial, danke für die Arbeit die du da hinein steckst.

          Allerdings hätte ich da noch ein paar Fragen dazu:

          1. Wenn ich aus der Navigation eine Seite aufrufe, wird sie mir angezeigt, aber nach ca 1 Minute verschwindet sie, woran könnte das liegen?

          kästchen bei persitent (dauernd) aktivieren, steht auch schon in der Doku ;)

          1. Wie muss ich die verschiedenen Seiten bei einem Untermenü eintragen? Momentan habe ich es, wie auf dem Bild bei Tab[5], leider wird mir da nichts angezeigt.

          c4eafc0b-0d4b-4d51-ad2a-77c2ac412edb-image.png

          Welche Version nutzt du? Falls ein Leerzeichen vor dem '|' das mal entfernen.
          Falls das nicht hilft das widget nochmal komplett neu aufbauen, hab da zur letzten Version ziemlich was geändert.

          O Online
          O Online
          Oli
          wrote on last edited by Oli
          #189

          @Scrounger

          ich habe zur Zeit die Version 01.1, Leerzeichen sind keine vorhanden.

          Gruß
          Oliver

          ScroungerS 1 Reply Last reply
          0
          • O Oli

            @Scrounger

            ich habe zur Zeit die Version 01.1, Leerzeichen sind keine vorhanden.

            ScroungerS Offline
            ScroungerS Offline
            Scrounger
            Developer
            wrote on last edited by
            #190

            @Oli
            Aktualisier mal auf Versio 0.1.2, danach Widget löschen und neu aufbauen.

            O 1 Reply Last reply
            0
            • ScroungerS Scrounger

              Hallo zusammen,
              ich arbeite aktuell an einem VIS-Adapter, der auf Google material components web Bibliothek basiert und "echte" Material Widgets zur Verfügung stellt inkl. der entsprechenden Effekt, wie Overlay, ripple, etc.

              Aktuell ist der Adapter noch nicht im latest, da ich noch sehr viel daran arbeitet. Wer testen möchte muss direkt von github installieren: https://github.com/Scrounger/iobroker.vis-materialdesign

              Folgende Elemente sind bereits enthalten:
              tmp.png

              Da das mein erster VIS Adapter ist, benötige ich etwas Unterstützung bei der weiteren Entwicklung und natürlich Euer Feedback vom testen.

              Aktuelle hab ich folgende Probleme:

              • Wie muss ich den Pfad <link rel="stylesheet" href="widgets/materialdesign/css/material-components-web.css" /> ändern, so das er direkt auf node_modules/material-components-web geht und ich nicht die dateien bei einem update manuell kopieren muss?
              • Gibt es eine Möglichkeit programatisch die styling felder im vis zu befüllen? Also ich würde gerne z.B. Font color und text-align vorbefüllen. font.png
              • Kann einer der Pros hier den vertikalen Slider bauen, da ich es leider nicht hinbekomme?

              paypal

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

              @Scrounger

              Hallo, schön langsam begreife ich das System, was ich noch nicht verstehe sind die Bilder für die SubItems wo diese hingehören?

              Zitat:
              To change the image of the items, you have to a json object into the image filed with the index of the view field, example:

              {"itemImage": "/icons-material-svg/hardware/ic_computer_48px.svg", "subItems": ["/vis/widgets/materialdesign/img/IoBroker_Logo.png", "/icons-material-svg/action/ic_android_48px.svg"]}

              Screenshot (353)_LI.jpg

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

              O ScroungerS 2 Replies Last reply
              0
              • sigi234S sigi234

                @Scrounger

                Hallo, schön langsam begreife ich das System, was ich noch nicht verstehe sind die Bilder für die SubItems wo diese hingehören?

                Zitat:
                To change the image of the items, you have to a json object into the image filed with the index of the view field, example:

                {"itemImage": "/icons-material-svg/hardware/ic_computer_48px.svg", "subItems": ["/vis/widgets/materialdesign/img/IoBroker_Logo.png", "/icons-material-svg/action/ic_android_48px.svg"]}

                Screenshot (353)_LI.jpg

                O Online
                O Online
                Oli
                wrote on last edited by
                #192

                @sigi234

                das gehört in den Bilder hinterlegt

                ![alt text](670c46f7-0a7e-4a20-96f5-1668e2b08945-image.png image url)

                Gruß
                Oliver

                sigi234S 1 Reply Last reply
                0
                • O Oli

                  @sigi234

                  das gehört in den Bilder hinterlegt

                  ![alt text](670c46f7-0a7e-4a20-96f5-1668e2b08945-image.png image url)

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

                  @Oli

                  Auch für SubItems?

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

                  O 1 Reply Last reply
                  0
                  • ScroungerS Scrounger

                    @Oli
                    Aktualisier mal auf Versio 0.1.2, danach Widget löschen und neu aufbauen.

                    O Online
                    O Online
                    Oli
                    wrote on last edited by
                    #194

                    @Scrounger

                    Super funktioniert mit der neuen Version.

                    Gruß
                    Oliver

                    1 Reply Last reply
                    0
                    • sigi234S sigi234

                      @Oli

                      Auch für SubItems?

                      O Online
                      O Online
                      Oli
                      wrote on last edited by
                      #195

                      @sigi234

                      ja, alles in die Zeile des entsprechenden Bildes

                      Gruß
                      Oliver

                      1 Reply Last reply
                      0
                      • sigi234S sigi234

                        @Scrounger

                        Hallo, schön langsam begreife ich das System, was ich noch nicht verstehe sind die Bilder für die SubItems wo diese hingehören?

                        Zitat:
                        To change the image of the items, you have to a json object into the image filed with the index of the view field, example:

                        {"itemImage": "/icons-material-svg/hardware/ic_computer_48px.svg", "subItems": ["/vis/widgets/materialdesign/img/IoBroker_Logo.png", "/icons-material-svg/action/ic_android_48px.svg"]}

                        Screenshot (353)_LI.jpg

                        ScroungerS Offline
                        ScroungerS Offline
                        Scrounger
                        Developer
                        wrote on last edited by Scrounger
                        #196

                        @sigi234
                        Ja auch für die Bilder:
                        Clipboard02.png
                        Bei Bild[1] habe ich folgendes hinterlegt
                        {"itemImage": "/icons-material-svg/hardware/ic_computer_48px.svg", "subItems": ["/vis/widgets/materialdesign/img/IoBroker_Logo.png", "/icons-material-svg/action/ic_android_48px.svg"]}

                        was zu folgendem Ergebnis führt:
                        Clipboard03.png

                        Für das Objekt 'itemImage' wird das Bild für das "MenuItem" angegeben, im Array 'subItems' dann die Bilder für die einzelnen Unterpunkte, jeweils durch ein Komma getrennt

                        sigi234S 1 Reply Last reply
                        0
                        • ScroungerS Scrounger

                          @sigi234
                          Ja auch für die Bilder:
                          Clipboard02.png
                          Bei Bild[1] habe ich folgendes hinterlegt
                          {"itemImage": "/icons-material-svg/hardware/ic_computer_48px.svg", "subItems": ["/vis/widgets/materialdesign/img/IoBroker_Logo.png", "/icons-material-svg/action/ic_android_48px.svg"]}

                          was zu folgendem Ergebnis führt:
                          Clipboard03.png

                          Für das Objekt 'itemImage' wird das Bild für das "MenuItem" angegeben, im Array 'subItems' dann die Bilder für die einzelnen Unterpunkte, jeweils durch ein Komma getrennt

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

                          @Scrounger sagte in [Neuer VIS-Adpater] Material Design Widgets:

                          im Array 'subItems' dann die Bilder für die einzelnen Unterpunkte, jeweils durch ein Komma getrennt

                          Aha, habe ich 6 Unterpunkte muss ich es 6 mal einfügen durch Komma getrennt.

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

                          ScroungerS 1 Reply Last reply
                          0
                          • sigi234S sigi234

                            @Scrounger sagte in [Neuer VIS-Adpater] Material Design Widgets:

                            im Array 'subItems' dann die Bilder für die einzelnen Unterpunkte, jeweils durch ein Komma getrennt

                            Aha, habe ich 6 Unterpunkte muss ich es 6 mal einfügen durch Komma getrennt.

                            ScroungerS Offline
                            ScroungerS Offline
                            Scrounger
                            Developer
                            wrote on last edited by Scrounger
                            #198

                            @sigi234 sagte in [Neuer VIS-Adpater] Material Design Widgets:

                            @Scrounger sagte in [Neuer VIS-Adpater] Material Design Widgets:

                            im Array 'subItems' dann die Bilder für die einzelnen Unterpunkte, jeweils durch ein Komma getrennt

                            Aha, habe ich 6 Unterpunkte muss ich es 6 mal einfügen durch Komma getrennt.

                            Korrekt.
                            Wenn du z.B. bei Unterpunkt 3 kein Bild haben willst, müsstest da dann "" eingeben.

                            1 Reply Last reply
                            0
                            • O Online
                              O Online
                              Oli
                              wrote on last edited by Oli
                              #199

                              @Scrounger

                              kann ich auch dem Hauptitem eine Seite zuweisen oder nur den Subitems?

                              Möchte mir folgende Struktur aufbauen:

                              1. System1 = System Seite 1

                                • Gerät1 = 1. Gerät von Seite 1
                                • Gerät2 = 2. Gerät von Seite 1
                                • usw.
                              2. System2 = System Seite 2

                                • Gerät20 = 1. Gerät von Seite 2
                                • Gerät21 = 1. Gerät von Seite 2
                                • usw.

                              Gruß
                              Oliver

                              ScroungerS 1 Reply Last reply
                              0
                              • O Oli

                                @Scrounger

                                kann ich auch dem Hauptitem eine Seite zuweisen oder nur den Subitems?

                                Möchte mir folgende Struktur aufbauen:

                                1. System1 = System Seite 1

                                  • Gerät1 = 1. Gerät von Seite 1
                                  • Gerät2 = 2. Gerät von Seite 1
                                  • usw.
                                2. System2 = System Seite 2

                                  • Gerät20 = 1. Gerät von Seite 2
                                  • Gerät21 = 1. Gerät von Seite 2
                                  • usw.
                                ScroungerS Offline
                                ScroungerS Offline
                                Scrounger
                                Developer
                                wrote on last edited by
                                #200

                                @Oli
                                Nee geht leider nicht, nur den SubItems.

                                1 Reply Last reply
                                0
                                • ScroungerS Scrounger

                                  Hallo zusammen,
                                  ich arbeite aktuell an einem VIS-Adapter, der auf Google material components web Bibliothek basiert und "echte" Material Widgets zur Verfügung stellt inkl. der entsprechenden Effekt, wie Overlay, ripple, etc.

                                  Aktuell ist der Adapter noch nicht im latest, da ich noch sehr viel daran arbeitet. Wer testen möchte muss direkt von github installieren: https://github.com/Scrounger/iobroker.vis-materialdesign

                                  Folgende Elemente sind bereits enthalten:
                                  tmp.png

                                  Da das mein erster VIS Adapter ist, benötige ich etwas Unterstützung bei der weiteren Entwicklung und natürlich Euer Feedback vom testen.

                                  Aktuelle hab ich folgende Probleme:

                                  • Wie muss ich den Pfad <link rel="stylesheet" href="widgets/materialdesign/css/material-components-web.css" /> ändern, so das er direkt auf node_modules/material-components-web geht und ich nicht die dateien bei einem update manuell kopieren muss?
                                  • Gibt es eine Möglichkeit programatisch die styling felder im vis zu befüllen? Also ich würde gerne z.B. Font color und text-align vorbefüllen. font.png
                                  • Kann einer der Pros hier den vertikalen Slider bauen, da ich es leider nicht hinbekomme?

                                  paypal

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

                                  @Scrounger

                                  Kann man links im Menü die Icon Größe ändern?

                                  Screenshot (358)_LI.jpg

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

                                  ScroungerS 1 Reply Last reply
                                  0
                                  • sigi234S sigi234

                                    @Scrounger

                                    Kann man links im Menü die Icon Größe ändern?

                                    Screenshot (358)_LI.jpg

                                    ScroungerS Offline
                                    ScroungerS Offline
                                    Scrounger
                                    Developer
                                    wrote on last edited by Scrounger
                                    #202

                                    @sigi234 sagte in [Neuer VIS-Adpater] Material Design Widgets:

                                    @Scrounger

                                    Kann man links im Menü die Icon Größe ändern?

                                    Es gibt keine Einstellung dafür, müsste aber mit CSS überschreiben gehen. Das Icon ist Google Font Icon, d.h. mit css fontsize müsste man es ändern, hab ich aber noch nicht ausprobiert.

                                    1 Reply Last reply
                                    0
                                    • C Offline
                                      C Offline
                                      calliou1234
                                      wrote on last edited by
                                      #203

                                      Hallo,

                                      ich verwende für meine VIS auch den Adapter.
                                      Super Arbeit, vielen Dank dafür!

                                      Aktuell habe ich ein Problem und komme einfach nicht weiter.

                                      Ich muss noch dazusagen, dass ich das Material Design CSS für ioBroker.vis von Uhula nutze.

                                      Ich möchte eigentlich den kompletten Hintergrund schwarz haben.
                                      Das klappt für die Navigationsleisten super, nur der Viewbereich im VIS bleibt immer weiss.

                                      1.jpg

                                      Im VIS Editor ist dieser immer schwarz.

                                      Egal was ich bisher probiert habe, es ändert sich nichts.

                                      Irgendjemand ne Idee?

                                      Grüße
                                      Thomas

                                      :mrgreen:

                                      O sigi234S 2 Replies Last reply
                                      0
                                      • C calliou1234

                                        Hallo,

                                        ich verwende für meine VIS auch den Adapter.
                                        Super Arbeit, vielen Dank dafür!

                                        Aktuell habe ich ein Problem und komme einfach nicht weiter.

                                        Ich muss noch dazusagen, dass ich das Material Design CSS für ioBroker.vis von Uhula nutze.

                                        Ich möchte eigentlich den kompletten Hintergrund schwarz haben.
                                        Das klappt für die Navigationsleisten super, nur der Viewbereich im VIS bleibt immer weiss.

                                        1.jpg

                                        Im VIS Editor ist dieser immer schwarz.

                                        Egal was ich bisher probiert habe, es ändert sich nichts.

                                        Irgendjemand ne Idee?

                                        Grüße
                                        Thomas

                                        O Online
                                        O Online
                                        Oli
                                        wrote on last edited by Oli
                                        #204

                                        @calliou1234

                                        hast du den Hintergrund auf deiner verknüpften Seite schwarz?

                                        Gruß
                                        Oliver

                                        1 Reply Last reply
                                        0
                                        • C calliou1234

                                          Hallo,

                                          ich verwende für meine VIS auch den Adapter.
                                          Super Arbeit, vielen Dank dafür!

                                          Aktuell habe ich ein Problem und komme einfach nicht weiter.

                                          Ich muss noch dazusagen, dass ich das Material Design CSS für ioBroker.vis von Uhula nutze.

                                          Ich möchte eigentlich den kompletten Hintergrund schwarz haben.
                                          Das klappt für die Navigationsleisten super, nur der Viewbereich im VIS bleibt immer weiss.

                                          1.jpg

                                          Im VIS Editor ist dieser immer schwarz.

                                          Egal was ich bisher probiert habe, es ändert sich nichts.

                                          Irgendjemand ne Idee?

                                          Grüße
                                          Thomas

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

                                          @calliou1234

                                          Screenshot (361).png

                                          rgb(0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box

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

                                          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

                                          722

                                          Online

                                          32.7k

                                          Users

                                          82.5k

                                          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