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

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

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

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

[Neuer VIS-Adpater] Material Design Widgets

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

          G Offline
          G Offline
          gravidi
          wrote on last edited by
          #183

          @dos1973
          Kein Ding, habs schon gefunden. Danke dir!
          Falls jemand braucht:
          https://github.com/manifestinteractive/weather-underground-icons

          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.

            G Offline
            G Offline
            gravidi
            wrote on last edited by
            #184

            @Scrounger
            Ansich eine gute Idee. Ob online oder offline stört mich nicht. Offline ist immer schöner, weil funktioniert auch ohne Internet und Ladezeiten sind für die meisten schneller.

            1 Reply Last reply
            0
            • O Offline
              O Offline
              Oli
              wrote on last edited by
              #185

              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

              Gruß
              Oliver

              ScroungerS 1 Reply Last reply
              0
              • 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.

                    <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                    <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                    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 Offline
                      O Offline
                      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.

                        <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                        <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                        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 Offline
                            O Offline
                            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 Offline
                                O Offline
                                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 Offline
                                  O Offline
                                  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

                                    <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                                    <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                                    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.

                                        <a href="https://github.com/Scrounger/ioBroker.linkeddevices">LinkedDevices Adapter</a>

                                        <a href="https://github.com/Scrounger/ioBroker.vis-materialdesign">Material Design Widgets</a>

                                        1 Reply Last reply
                                        0
                                        • O Offline
                                          O Offline
                                          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
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          846

                                          Online

                                          32.4k

                                          Users

                                          81.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