Skip to content
  • 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
  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.1k

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

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

[Neuer VIS-Adpater] Material Design Widgets

Geplant Angeheftet Gesperrt Verschoben Entwicklung
adapter
271 Beiträge 30 Kommentatoren 50.9k Aufrufe 43 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.
  • ScroungerS Offline
    ScroungerS Offline
    Scrounger
    Developer
    schrieb am zuletzt editiert von Jey Cee
    #1

    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

    <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 7 Antworten Letzte Antwort
    8
    • Marco LaserM Offline
      Marco LaserM Offline
      Marco Laser
      schrieb am zuletzt editiert von
      #2

      Moin also optisch sieht es schon mal echt cool aus.
      Den Switch kann ich leider nicht nutzen, der lässt sich nicht aus der Leiste links ziehen 😅 und die Slider Springen immer nach dem Einstellen etwas wenn min und Max nicht auf 0 und 100 stehen. Lass mich wissen wenn du irgendwelche weiteren Infos brauchst 🙂

      ScroungerS 1 Antwort Letzte Antwort
      0
      • Marco LaserM Marco Laser

        Moin also optisch sieht es schon mal echt cool aus.
        Den Switch kann ich leider nicht nutzen, der lässt sich nicht aus der Leiste links ziehen 😅 und die Slider Springen immer nach dem Einstellen etwas wenn min und Max nicht auf 0 und 100 stehen. Lass mich wissen wenn du irgendwelche weiteren Infos brauchst 🙂

        ScroungerS Offline
        ScroungerS Offline
        Scrounger
        Developer
        schrieb am zuletzt editiert von Scrounger
        #3

        @Marco-Laser

        • slider benötigt zwingend min und max werte damit der funktioniert
        • Beim Switch muss auf die Überschirft klicken und dann ziehen. Irgendwie gehts das bei dem nicht, wenn man direkt auf den Switch geht - evtl. muss ich hier doch ein image nehmen

        switch.gif

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

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

        Marco LaserM 1 Antwort Letzte Antwort
        0
        • ScroungerS Scrounger

          @Marco-Laser

          • slider benötigt zwingend min und max werte damit der funktioniert
          • Beim Switch muss auf die Überschirft klicken und dann ziehen. Irgendwie gehts das bei dem nicht, wenn man direkt auf den Switch geht - evtl. muss ich hier doch ein image nehmen

          switch.gif

          Marco LaserM Offline
          Marco LaserM Offline
          Marco Laser
          schrieb am zuletzt editiert von
          #4

          @Scrounger aber bei mir ist es auch so wenn ich min und Max Werte setzte, zum Beispiel 20 - 80 dann springt er immer komisch immer umher, vielleicht mach ich nenn gif dazu wenn ich wieder zu Hause bin

          ScroungerS 1 Antwort Letzte Antwort
          0
          • sigi234S Online
            sigi234S Online
            sigi234
            Forum Testing Most Active
            schrieb am zuletzt editiert von sigi234
            #5

            Top, sehr cool! Teste gerade.👍

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

            1 Antwort Letzte Antwort
            0
            • Marco LaserM Marco Laser

              @Scrounger aber bei mir ist es auch so wenn ich min und Max Werte setzte, zum Beispiel 20 - 80 dann springt er immer komisch immer umher, vielleicht mach ich nenn gif dazu wenn ich wieder zu Hause bin

              ScroungerS Offline
              ScroungerS Offline
              Scrounger
              Developer
              schrieb am zuletzt editiert von Scrounger
              #6

              @Marco-Laser
              Hab den Fehler gefunden, zieh dir die aktuelle Version von github und teste nochmal.

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

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

              Marco LaserM 1 Antwort Letzte Antwort
              1
              • H Offline
                H Offline
                helfi9999
                schrieb am zuletzt editiert von helfi9999
                #7

                Hi bei mir ist es so das ich den materialdesin - progress in meiner Vis eingebaut habe und es auf dem Laptop angezeigt wird (Firefox) aber nicht auf dem Tablet.(Fully Kiosk)

                Intel NUC mit Iobroker

                ScroungerS 1 Antwort Letzte Antwort
                0
                • ScroungerS Scrounger

                  @Marco-Laser
                  Hab den Fehler gefunden, zieh dir die aktuelle Version von github und teste nochmal.

                  Marco LaserM Offline
                  Marco LaserM Offline
                  Marco Laser
                  schrieb am zuletzt editiert von
                  #8

                  @Scrounger ja klappt jetzt optimal 👍🏼

                  1 Antwort Letzte Antwort
                  0
                  • H helfi9999

                    Hi bei mir ist es so das ich den materialdesin - progress in meiner Vis eingebaut habe und es auf dem Laptop angezeigt wird (Firefox) aber nicht auf dem Tablet.(Fully Kiosk)

                    ScroungerS Offline
                    ScroungerS Offline
                    Scrounger
                    Developer
                    schrieb am zuletzt editiert von Scrounger
                    #9

                    @helfi9999
                    Der Browser wird leider von Material nicht unterstützt:

                    browser.png
                    https://github.com/material-components/material-components-web/blob/master/docs/supported-browsers.md

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

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

                    H 1 Antwort Letzte Antwort
                    0
                    • ScroungerS Scrounger

                      @helfi9999
                      Der Browser wird leider von Material nicht unterstützt:

                      browser.png
                      https://github.com/material-components/material-components-web/blob/master/docs/supported-browsers.md

                      H Offline
                      H Offline
                      helfi9999
                      schrieb am zuletzt editiert von
                      #10

                      @Scrounger schade würde gerne deine Widgets benutzen geht aber nicht da Fully Kiosk Browser nicht unterstützt wird 😧 😧

                      Intel NUC mit Iobroker

                      1 Antwort Letzte Antwort
                      0
                      • D Offline
                        D Offline
                        dos1973
                        schrieb am zuletzt editiert von
                        #11

                        Ach Schade, hatte mir den Post schon angepinnt...
                        aber ohne Fully Unterstützung 😞 Schade.

                        H 1 Antwort Letzte Antwort
                        0
                        • D dos1973

                          Ach Schade, hatte mir den Post schon angepinnt...
                          aber ohne Fully Unterstützung 😞 Schade.

                          H Offline
                          H Offline
                          helfi9999
                          schrieb am zuletzt editiert von
                          #12

                          @dos1973 Ich hoffe das er noch was macht diesbezüglich

                          Intel NUC mit Iobroker

                          ScroungerS 1 Antwort Letzte Antwort
                          0
                          • Marco LaserM Offline
                            Marco LaserM Offline
                            Marco Laser
                            schrieb am zuletzt editiert von
                            #13

                            Also bei mir funktioniert es auch im Fully, ist ja auch kein eigener Browser sondern greift auf irgendeinen anderen zurück soweit ich weiß

                            1 Antwort Letzte Antwort
                            0
                            • MeistertrM Offline
                              MeistertrM Offline
                              Meistertr
                              Developer
                              schrieb am zuletzt editiert von
                              #14

                              Der fully Browser greift auf Chrome zurück soweit ich weiß

                              H 1 Antwort Letzte Antwort
                              0
                              • MeistertrM Meistertr

                                Der fully Browser greift auf Chrome zurück soweit ich weiß

                                H Offline
                                H Offline
                                helfi9999
                                schrieb am zuletzt editiert von
                                #15

                                @Meistertr kriege es nicht angezeigt obwohl ich 2 versch. Widgets eingebaut habe

                                Intel NUC mit Iobroker

                                sigi234S 1 Antwort Letzte Antwort
                                0
                                • H helfi9999

                                  @Meistertr kriege es nicht angezeigt obwohl ich 2 versch. Widgets eingebaut habe

                                  sigi234S Online
                                  sigi234S Online
                                  sigi234
                                  Forum Testing Most Active
                                  schrieb am zuletzt editiert von
                                  #16

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

                                  @Meistertr kriege es nicht angezeigt obwohl ich 2 versch. Widgets eingebaut habe

                                  Screenshot bitte.

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

                                  1 Antwort Letzte Antwort
                                  0
                                  • H helfi9999

                                    @dos1973 Ich hoffe das er noch was macht diesbezüglich

                                    ScroungerS Offline
                                    ScroungerS Offline
                                    Scrounger
                                    Developer
                                    schrieb am zuletzt editiert von
                                    #17

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

                                    @dos1973 Ich hoffe das er noch was macht diesbezüglich

                                    Sorry Leute, dass kann ich leider nicht.
                                    Wie oben geschrieben nutze ich die Google material components web Bibliothek.
                                    Die geben vor welche Browser unterstützt werden -> https://github.com/material-components/material-components-web/blob/master/docs/supported-browsers.md

                                    Ihr könnt aber versuchen dort ein Issue zu erstellen.

                                    <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 Antwort Letzte Antwort
                                    0
                                    • H Offline
                                      H Offline
                                      Home4.0
                                      schrieb am zuletzt editiert von
                                      #18

                                      Hallo @Scrounger ,

                                      bis jetzt klappt alles bestens. (auch mit Fully) 👍

                                      Vielen Dank für die tollen Widgets....

                                      Gruß

                                      H 1 Antwort Letzte Antwort
                                      0
                                      • H Home4.0

                                        Hallo @Scrounger ,

                                        bis jetzt klappt alles bestens. (auch mit Fully) 👍

                                        Vielen Dank für die tollen Widgets....

                                        Gruß

                                        H Offline
                                        H Offline
                                        helfi9999
                                        schrieb am zuletzt editiert von
                                        #19

                                        @Home4-0 welche Einstellung hast du beim Fully gemacht

                                        Intel NUC mit Iobroker

                                        H 1 Antwort Letzte Antwort
                                        0
                                        • H helfi9999

                                          @Home4-0 welche Einstellung hast du beim Fully gemacht

                                          H Offline
                                          H Offline
                                          Home4.0
                                          schrieb am zuletzt editiert von
                                          #20

                                          @helfi9999 Ich habe nichts an den Einstellungen geändert.

                                          (Android 6 und 7 mit Fully 1.35.2)

                                          Gruß

                                          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

                                          557

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe