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
    622

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

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

[Neuer VIS-Adpater] Material Design Widgets

Scheduled Pinned Locked Moved Entwicklung
adapter
271 Posts 30 Posters 57.6k 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.
  • CKMartensC CKMartens

    Hallo,

    jetzt muss ich mal dumm Fragen bezüglich der Top App Bar.

    Ich habe meine Views mit einem einheitlichen Button-Menu als eigenständige View, einem Content-Bereich als eigenständige View und einem Footer, ebenfalls als View, erstellt. erstellt. Wenn ich die Top App Bar nutzen will muss ich eine View mit dem Widget erstellen und jede View dort eintragen. Oder verstehe ich da was falsch?

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

    @CKMartens
    Korrekt. Du machst dir eine View in der nur das Top App Bar Widget drin ist.
    Bei der Top App Bar trägst du dann unter 'Views' alle anderen Views ein:
    example.png

    Anhand des Index z.B. Tab[2] kannst du dann alles andere entsprechend konfigurieren, z.B. Text und Bilder der Nav Leiste:
    7e2a973c-08bc-48d0-9b89-f92fb2914c67-grafik.png

    Die oben dargestellten Einstellung der Screenshots ergeben dann folgende Nav Leiste:
    30dc670f-e0fd-44e1-b079-63dec1795f6c-grafik.png

    CKMartensC 1 Reply Last reply
    2
    • ScroungerS Scrounger

      @CKMartens
      Korrekt. Du machst dir eine View in der nur das Top App Bar Widget drin ist.
      Bei der Top App Bar trägst du dann unter 'Views' alle anderen Views ein:
      example.png

      Anhand des Index z.B. Tab[2] kannst du dann alles andere entsprechend konfigurieren, z.B. Text und Bilder der Nav Leiste:
      7e2a973c-08bc-48d0-9b89-f92fb2914c67-grafik.png

      Die oben dargestellten Einstellung der Screenshots ergeben dann folgende Nav Leiste:
      30dc670f-e0fd-44e1-b079-63dec1795f6c-grafik.png

      CKMartensC Offline
      CKMartensC Offline
      CKMartens
      wrote on last edited by
      #164

      @Scrounger Danke für die Erlärung

      1 Reply Last reply
      0
      • G gravidi

        @Scrounger

        Vielen vielen Dank für diesen tollen Adapter. Läuft wie eine eins und ist etwas was ich mir schon lange für vis gewünscht habe!
        Sehr gute Arbeit!

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

        @dos1973

        Magst du mir verraten welchen ICON Pack für Wetter Icons das ist? Danke!

        D Offline
        D Offline
        dos1973
        wrote on last edited by
        #165

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

        @dos1973

        Magst du mir verraten welchen ICON Pack für Wetter Icons das ist? Danke!

        sorry, keine Ahnung wo ich das her hatte... ich kann es aber zippen und hochladen...

        sigi234S G 2 Replies Last reply
        0
        • L Offline
          L Offline
          Leviathan09
          wrote on last edited by
          #166

          Täuscht es oder verbraucht der Adapter einiges an Speicherplatz auf der Platte?
          Liegt vermutlich ja an den ganzen Grafiken....aber ob man da vllt bisschen was shrinken kann oder ?

          ScroungerS 1 Reply Last reply
          0
          • D dos1973

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

            @dos1973

            Magst du mir verraten welchen ICON Pack für Wetter Icons das ist? Danke!

            sorry, keine Ahnung wo ich das her hatte... ich kann es aber zippen und hochladen...

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

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

            Magst du mir verraten welchen ICON Pack für Wetter Icons das ist? Danke!

            Gelöscht, Falsch

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

            1 Reply Last reply
            0
            • L Leviathan09

              Täuscht es oder verbraucht der Adapter einiges an Speicherplatz auf der Platte?
              Liegt vermutlich ja an den ganzen Grafiken....aber ob man da vllt bisschen was shrinken kann oder ?

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

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

              Täuscht es oder verbraucht der Adapter einiges an Speicherplatz auf der Platte?
              Liegt vermutlich ja an den ganzen Grafiken....aber ob man da vllt bisschen was shrinken kann oder ?

              Was heißt den einiges in Zahlen?
              Bei mir braucht der ca. 10Mb.

              Und welche ganzen Grafiken meinst du?

              Edit:
              Jetzt bin ich auf den trichter gekommen was du mit grafiken meinst. Die werden gar net benötigt, die dependencies ist falsch, hab das entsprechend korrigiert.
              d.h. die Ordner '/node_module/material-components-web/' und '/node_modules/material-design-icons/' können ohne Auswirkungen zu haben gelöscht werden - das spart dann mal glatt 50Mb ;)

              L 1 Reply Last reply
              0
              • ScroungerS Scrounger

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

                Täuscht es oder verbraucht der Adapter einiges an Speicherplatz auf der Platte?
                Liegt vermutlich ja an den ganzen Grafiken....aber ob man da vllt bisschen was shrinken kann oder ?

                Was heißt den einiges in Zahlen?
                Bei mir braucht der ca. 10Mb.

                Und welche ganzen Grafiken meinst du?

                Edit:
                Jetzt bin ich auf den trichter gekommen was du mit grafiken meinst. Die werden gar net benötigt, die dependencies ist falsch, hab das entsprechend korrigiert.
                d.h. die Ordner '/node_module/material-components-web/' und '/node_modules/material-design-icons/' können ohne Auswirkungen zu haben gelöscht werden - das spart dann mal glatt 50Mb ;)

                L Offline
                L Offline
                Leviathan09
                wrote on last edited by Leviathan09
                #169

                @Scrounger Die zwei Ordner schau ich mir gleich mal an.

                Bei mir hat der Ordner "/iobroker.vis-materialdesign" um die 400MB.
                Habe jedoch zwei Adapter zu dem Thema Material Design.
                Bin mir jetzt gerade nicht sicher ob dieser zu deinem Adapter gehört.

                Edit: War aber auch nicht als "geflenne" gemeint das dein Adapter zu viel Platz verbraucht, habe ja 15GB die sollten reichen.
                Fand es nur Auffällig das der oben genannte Ordner über 400MB hat während alle anderen Ordner im Bereich von max 50MB liegen (Ausnahme Javascript und Zigbee, die haben auch um die 300MB)

                sigi234S 1 Reply Last reply
                0
                • L Leviathan09

                  @Scrounger Die zwei Ordner schau ich mir gleich mal an.

                  Bei mir hat der Ordner "/iobroker.vis-materialdesign" um die 400MB.
                  Habe jedoch zwei Adapter zu dem Thema Material Design.
                  Bin mir jetzt gerade nicht sicher ob dieser zu deinem Adapter gehört.

                  Edit: War aber auch nicht als "geflenne" gemeint das dein Adapter zu viel Platz verbraucht, habe ja 15GB die sollten reichen.
                  Fand es nur Auffällig das der oben genannte Ordner über 400MB hat während alle anderen Ordner im Bereich von max 50MB liegen (Ausnahme Javascript und Zigbee, die haben auch um die 300MB)

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

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

                  "/iobroker.vis-materialdesign

                  Wo ist dieser genau?

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

                  L 1 Reply Last reply
                  0
                  • sigi234S sigi234

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

                    "/iobroker.vis-materialdesign

                    Wo ist dieser genau?

                    L Offline
                    L Offline
                    Leviathan09
                    wrote on last edited by
                    #171

                    @sigi234 /node_modules/iobroker.vis-materialdesign

                    sigi234S 1 Reply Last reply
                    0
                    • L Leviathan09

                      @sigi234 /node_modules/iobroker.vis-materialdesign

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

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

                      @sigi234 /node_modules/iobroker.vis-materialdesign

                      Danke, da habe ich 9 MB

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

                      L 1 Reply Last reply
                      0
                      • sigi234S sigi234

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

                        @sigi234 /node_modules/iobroker.vis-materialdesign

                        Danke, da habe ich 9 MB

                        L Offline
                        L Offline
                        Leviathan09
                        wrote on last edited by
                        #173

                        @sigi234 Ich habe den Adapter nun nochmal neu installiert.
                        Nun sind es bei mir auch nur 9MB

                        Sehr komisch....

                        1 Reply Last reply
                        0
                        • ScroungerS Offline
                          ScroungerS Offline
                          Scrounger
                          Developer
                          wrote on last edited by Scrounger
                          #174

                          Nachdem ich heute weiter an meinem Produktiv VIS gearbeitet habe, ist mir aufgefallen dass einfach keine wirklich schönen Graphen gibt, die man so gestalten kann das sie dem Material Design entsprechen. Hab also mal geschaut was es so für APIs gibt.

                          Jetzt brauch ich mal Euren Rat bzw. Meinung. Ich würde gerne die Google Chart Api, da super easy zu verwenden - auf den ersten Blick ;).
                          Hier mal ein kleines Beispiel, läuft bei mir im VIS schon:
                          charts.gif

                          Allerdings kann diese API nur online genutzt werden. Wie seht ihr das, ist das ein NO GO?

                          Alternativ gebe es noch die TOAST UI Chart API, die man auch offline nutzen kann, allerdings entspricht die halt nicht dem Material Design bzw. die Anpassung darauf wird viel aufwendiger.

                          sigi234S MeistertrM G 3 Replies Last reply
                          0
                          • ScroungerS Scrounger

                            Nachdem ich heute weiter an meinem Produktiv VIS gearbeitet habe, ist mir aufgefallen dass einfach keine wirklich schönen Graphen gibt, die man so gestalten kann das sie dem Material Design entsprechen. Hab also mal geschaut was es so für APIs gibt.

                            Jetzt brauch ich mal Euren Rat bzw. Meinung. Ich würde gerne die Google Chart Api, da super easy zu verwenden - auf den ersten Blick ;).
                            Hier mal ein kleines Beispiel, läuft bei mir im VIS schon:
                            charts.gif

                            Allerdings kann diese API nur online genutzt werden. Wie seht ihr das, ist das ein NO GO?

                            Alternativ gebe es noch die TOAST UI Chart API, die man auch offline nutzen kann, allerdings entspricht die halt nicht dem Material Design bzw. die Anpassung darauf wird viel aufwendiger.

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

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

                            Wie seht ihr das, ist das ein NO GO?

                            Ja

                            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:

                              Wie seht ihr das, ist das ein NO GO?

                              Ja

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

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

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

                              Wie seht ihr das, ist das ein NO GO?

                              Ja

                              Und warum?

                              sigi234S 1 Reply Last reply
                              0
                              • ScroungerS Scrounger

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

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

                                Wie seht ihr das, ist das ein NO GO?

                                Ja

                                Und warum?

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

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

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

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

                                Wie seht ihr das, ist das ein NO GO?

                                Ja

                                Und warum?

                                Internet geht nicht Chart weg?

                                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:

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

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

                                  Wie seht ihr das, ist das ein NO GO?

                                  Ja

                                  Und warum?

                                  Internet geht nicht Chart weg?

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

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

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

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

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

                                  Wie seht ihr das, ist das ein NO GO?

                                  Ja

                                  Und warum?

                                  Internet geht nicht Chart weg?

                                  Naja wenn das Internet nicht geht, dann gibt es bei vielen wahrscheinlich ganz andere Cloud Probleme ;)
                                  Und das könnte man umgehen, da es die API schon offline gibt, aber sie dann halt nicht mehr den terms of service entsprechen würde. Das könnte aber jeder selbst anpassen. Allerdings das direkt in einem OpenSource einzubinden geht halt nicht.

                                  Ich selber habe eher ein Problem damit, dass meine ganzen Daten dann über google laufen.

                                  sigi234S 1 Reply Last reply
                                  0
                                  • ScroungerS Scrounger

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

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

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

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

                                    Wie seht ihr das, ist das ein NO GO?

                                    Ja

                                    Und warum?

                                    Internet geht nicht Chart weg?

                                    Naja wenn das Internet nicht geht, dann gibt es bei vielen wahrscheinlich ganz andere Cloud Probleme ;)
                                    Und das könnte man umgehen, da es die API schon offline gibt, aber sie dann halt nicht mehr den terms of service entsprechen würde. Das könnte aber jeder selbst anpassen. Allerdings das direkt in einem OpenSource einzubinden geht halt nicht.

                                    Ich selber habe eher ein Problem damit, dass meine ganzen Daten dann über google laufen.

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

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

                                    Ich selber habe eher ein Problem damit, dass meine ganzen Daten dann über google laufen.

                                    Na ja, die wissen eh schon alles über mich. Wenn ich einen Lebenslauf brauche rufe ich dort an.:grinning:

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

                                    1 Reply Last reply
                                    1
                                    • S Offline
                                      S Offline
                                      simpixo
                                      wrote on last edited by
                                      #180

                                      Hallo zusammen

                                      ich finde den ADPTER spitze, aber komme nicht so schnell voran :( Hat jemand von euch ein Grundgerüst aus paar Seiten die er als Export zu Verfügung stellen könnte?

                                      Würde mich riesig drüber freuen, damit ich verstehen lernen kann, wie ich eine schöne VIS erstellen könnte

                                      Vielen Dank

                                      Gruß
                                      Adrian

                                      1 Reply Last reply
                                      0
                                      • H Offline
                                        H Offline
                                        heinzie
                                        wrote on last edited by heinzie
                                        #181

                                        Ich suche für meine Heizung noch eine Möglichkeit 3 Tempearaturen (15,17 u.21°) vorzuwählen.
                                        Bisher beutze ich dafür eine Radio Button Element, geht das mit den aktuellen Möglichkeiten irgendwie?

                                        Ist das richtig das die kleinste Einstellung für die Button immer 64px ist? oder kann man das irgendwo einstellen. Ist auf dem Handy usw. ziemlich groß.

                                        1 Reply Last reply
                                        0
                                        • ScroungerS Scrounger

                                          Nachdem ich heute weiter an meinem Produktiv VIS gearbeitet habe, ist mir aufgefallen dass einfach keine wirklich schönen Graphen gibt, die man so gestalten kann das sie dem Material Design entsprechen. Hab also mal geschaut was es so für APIs gibt.

                                          Jetzt brauch ich mal Euren Rat bzw. Meinung. Ich würde gerne die Google Chart Api, da super easy zu verwenden - auf den ersten Blick ;).
                                          Hier mal ein kleines Beispiel, läuft bei mir im VIS schon:
                                          charts.gif

                                          Allerdings kann diese API nur online genutzt werden. Wie seht ihr das, ist das ein NO GO?

                                          Alternativ gebe es noch die TOAST UI Chart API, die man auch offline nutzen kann, allerdings entspricht die halt nicht dem Material Design bzw. die Anpassung darauf wird viel aufwendiger.

                                          MeistertrM Offline
                                          MeistertrM Offline
                                          Meistertr
                                          Developer
                                          wrote on last edited by
                                          #182

                                          @Scrounger also mir wäre es egal ob online oder nicht. Vond datenseite her ist es ja auch egal. Ohne Zusammenhang kann selbst Google da nix mit anfangen... Aber wenn es ein vergleichbares offline framework gibt wäre das schon zu bevorzugen.

                                          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

                                          302

                                          Online

                                          32.7k

                                          Users

                                          82.6k

                                          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