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. Tester
  4. Test Adapter Material Design Widgets v0.5.x

NEWS

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

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

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.2k

Test Adapter Material Design Widgets v0.5.x

Scheduled Pinned Locked Moved Tester
adaptermaterialmaterial design widgetsvisvisualisationwidget
110 Posts 22 Posters 20.1k Views 38 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

    @oli
    Teste bitte die aktuelle Version von github.
    In den Adapter Themen settings alle zurücksetzen, also hell, dunkel, Schriftart und Schriftgröße - Button oben rechts.

    Und wichtig vis Upload machen!

    O Offline
    O Offline
    Oli
    wrote on last edited by
    #72

    @scrounger

    nach ersten Tests, sollte wieder alles funktionieren, Danke

    Gruß
    Oliver

    1 Reply Last reply
    0
    • ScroungerS Scrounger

      @oli
      Teste bitte die aktuelle Version von github.
      In den Adapter Themen settings alle zurücksetzen, also hell, dunkel, Schriftart und Schriftgröße - Button oben rechts.

      Und wichtig vis Upload machen!

      O Offline
      O Offline
      Oli
      wrote on last edited by
      #73

      @scrounger

      Sorry, aber ein Problem ab ich beim Dialog Widget och festgestellt

      Dialog Widget.gif

      Gruß
      Oliver

      ScroungerS 1 Reply Last reply
      0
      • O Oli

        @scrounger

        Sorry, aber ein Problem ab ich beim Dialog Widget och festgestellt

        Dialog Widget.gif

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

        @Oli
        wie immer console log?
        Debug Modus beim Widget davor aktivieren

        O 2 Replies Last reply
        0
        • ScroungerS Scrounger

          @Oli
          wie immer console log?
          Debug Modus beim Widget davor aktivieren

          O Offline
          O Offline
          Oli
          wrote on last edited by
          #75

          @scrounger

          sorry für die doofe Frage, aber wo aktiviere ich den Debug Modus bei einem Widget?

          Gruß
          Oliver

          1 Reply Last reply
          0
          • GlasfaserG Offline
            GlasfaserG Offline
            Glasfaser
            wrote on last edited by
            #76

            @oli

            Unter Editor Settings :
            https://github.com/Scrounger/ioBroker.vis-materialdesign

            1.JPG

            Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

            O 1 Reply Last reply
            0
            • GlasfaserG Glasfaser

              @oli

              Unter Editor Settings :
              https://github.com/Scrounger/ioBroker.vis-materialdesign

              1.JPG

              O Offline
              O Offline
              Oli
              wrote on last edited by
              #77

              @glasfaser
              danke für den Hinweis, wieder was gelernt

              Gruß
              Oliver

              1 Reply Last reply
              0
              • ScroungerS Scrounger

                @Oli
                wie immer console log?
                Debug Modus beim Widget davor aktivieren

                O Offline
                O Offline
                Oli
                wrote on last edited by
                #78

                @scrounger

                hier das gewünschte log
                log neu

                Gruß
                Oliver

                ScroungerS 1 Reply Last reply
                0
                • O Oli

                  @scrounger

                  hier das gewünschte log
                  log neu

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

                  @oli
                  Hast du das Dialog Widget angewählt bevor du das console log gezogen hast?
                  Erstell Mal das Dialog Widget komplett neu.

                  O 1 Reply Last reply
                  0
                  • ScroungerS Scrounger

                    @oli
                    Hast du das Dialog Widget angewählt bevor du das console log gezogen hast?
                    Erstell Mal das Dialog Widget komplett neu.

                    O Offline
                    O Offline
                    Oli
                    wrote on last edited by Oli
                    #80

                    @scrounger
                    Ja habe ich, heute schaffe ich es nicht mehr, liefer es morgen nach

                    Gruß
                    Oliver

                    ScroungerS 1 Reply Last reply
                    0
                    • O Oli

                      @scrounger
                      Ja habe ich, heute schaffe ich es nicht mehr, liefer es morgen nach

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

                      @oli
                      OK da steht leider nix brauchbares drin. Dann bitte Dialog Widget komplett neu erstellen.

                      O 1 Reply Last reply
                      0
                      • ScroungerS Scrounger

                        @oli
                        OK da steht leider nix brauchbares drin. Dann bitte Dialog Widget komplett neu erstellen.

                        O Offline
                        O Offline
                        Oli
                        wrote on last edited by
                        #82

                        @scrounger

                        guten Morgen, habe den Fehler gefunden. Ich habe bei der Rahmenfarbe ein Binding hinterlegt, sobald ich das herausnehme funktioniert das Widget wieder
                        Hier mal ein Export des Widgets.

                        [{"tpl":"tplVis-materialdesign-Vuetify-Dialog-View","data":{"g_fixed":true,"g_visibility":true,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":true,"g_css_border":true,"g_gestures":false,"g_signals":true,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","showDialogMethod":"button","fullscreenResolutionLower":"360","vibrateOnMobilDevices":"50","buttonStyle":"raised","iconPosition":"left","closingClickOutside":"true","showTitle":"true","buttonPosition":"flex-end","buttonSize":"medium","signals-cond-0":">","signals-val-0":"0","signals-icon-0":"/icons-mfd-png/measure_battery_0.png","signals-icon-size-0":"40","signals-blink-0":false,"signals-horz-0":"7","signals-vert-0":"10","signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":"0","signals-icon-1":"/icons-mfd-png/measure_battery_100.png","signals-icon-size-1":"40","signals-blink-1":false,"signals-horz-1":"7","signals-vert-1":"10","signals-hide-edit-1":false,"signals-cond-2":">","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"contains_view":"Startseite_System_Batteriestatus_Dialog","dialogMaxWidth":"85%","viewHeight":"90%","backgroundColor":"#mdwTheme:vis-materialdesign.0.colors.dialog.background","showDivider":true,"dividerColor":"#mdwTheme:vis-materialdesign.0.colors.dialog.divider","titleFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.dialog.title","titleFont":"#mdwTheme:vis-materialdesign.0.fonts.dialog.title","title":"Batteriestatus","titleColor":"#mdwTheme:vis-materialdesign.0.colors.dialog.header_text","buttonFullWidth":true,"buttonText":"Schließen","buttonFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.dialog.button","buttonFont":"#mdwTheme:vis-materialdesign.0.fonts.dialog.button","buttonFontColor":"#mdwTheme:vis-materialdesign.0.colors.dialog.close_button_text","pressColor":"#mdwTheme:vis-materialdesign.0.colors.dialog.close_button_press","viewDistanceToBorder":"0","signals-oid-2":"","signals-oid-1":"0_userdata.0.Energieverbrauch.Batterie.AkkuAlarm","signals-oid-0":"0_userdata.0.Energieverbrauch.Batterie.AkkuAlarm","class":"","headerBackgroundColor":"linear-gradient(to bottom, #202020, grey, #202020)","textFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.button.default.text","textFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.button.default.text","mdwButtonPrimaryColor":"#mdwTheme:vis-materialdesign.0.colors.button.default.primary","mdwButtonSecondaryColor":"#mdwTheme:vis-materialdesign.0.colors.button.default.secondary","fullscreenCloseIcon":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.dialog.close_button_icon;dark:vis-materialdesign.0.colors.dark.dialog.close_button_icon; mode === \"true\" ? dark : light}","imageColor":"#mdwTheme:vis-materialdesign.0.colors.button.icon.icon_off","footerBackgroundColor":"linear-gradient(to bottom, #202020, grey, #202020)","overlayColor":"#mdwTheme:vis-materialdesign.0.colors.dialog.overlay","fullscreenCloseIconColor":"#mdwTheme:vis-materialdesign.0.colors.dialog.close_button_icon","fullscreenCloseIconPressColor":"#mdwTheme:vis-materialdesign.0.colors.dialog.close_button_fullscreen_press","debug":true},"style":{"left":"calc(66% - 35px)","top":"45px","height":"50px","width":"50px","z-index":"1","background":"#2e2e2e","box-shadow":"2px 2px 3px rgba(20, 20, 20, 50)","border-radius":"5px","border-color":"{wert:0_userdata.0.Energieverbrauch.Batterie.AkkuAlarm; wert==0 ? \"green\" :: \"red\"}","border-style":"solid","border-width":"2px"},"widgetSet":"materialdesign"}]
                        

                        Gruß
                        Oliver

                        Stephan SchleichS 1 Reply Last reply
                        0
                        • O Oli

                          @scrounger

                          guten Morgen, habe den Fehler gefunden. Ich habe bei der Rahmenfarbe ein Binding hinterlegt, sobald ich das herausnehme funktioniert das Widget wieder
                          Hier mal ein Export des Widgets.

                          [{"tpl":"tplVis-materialdesign-Vuetify-Dialog-View","data":{"g_fixed":true,"g_visibility":true,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":true,"g_css_border":true,"g_gestures":false,"g_signals":true,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","showDialogMethod":"button","fullscreenResolutionLower":"360","vibrateOnMobilDevices":"50","buttonStyle":"raised","iconPosition":"left","closingClickOutside":"true","showTitle":"true","buttonPosition":"flex-end","buttonSize":"medium","signals-cond-0":">","signals-val-0":"0","signals-icon-0":"/icons-mfd-png/measure_battery_0.png","signals-icon-size-0":"40","signals-blink-0":false,"signals-horz-0":"7","signals-vert-0":"10","signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":"0","signals-icon-1":"/icons-mfd-png/measure_battery_100.png","signals-icon-size-1":"40","signals-blink-1":false,"signals-horz-1":"7","signals-vert-1":"10","signals-hide-edit-1":false,"signals-cond-2":">","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"contains_view":"Startseite_System_Batteriestatus_Dialog","dialogMaxWidth":"85%","viewHeight":"90%","backgroundColor":"#mdwTheme:vis-materialdesign.0.colors.dialog.background","showDivider":true,"dividerColor":"#mdwTheme:vis-materialdesign.0.colors.dialog.divider","titleFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.dialog.title","titleFont":"#mdwTheme:vis-materialdesign.0.fonts.dialog.title","title":"Batteriestatus","titleColor":"#mdwTheme:vis-materialdesign.0.colors.dialog.header_text","buttonFullWidth":true,"buttonText":"Schließen","buttonFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.dialog.button","buttonFont":"#mdwTheme:vis-materialdesign.0.fonts.dialog.button","buttonFontColor":"#mdwTheme:vis-materialdesign.0.colors.dialog.close_button_text","pressColor":"#mdwTheme:vis-materialdesign.0.colors.dialog.close_button_press","viewDistanceToBorder":"0","signals-oid-2":"","signals-oid-1":"0_userdata.0.Energieverbrauch.Batterie.AkkuAlarm","signals-oid-0":"0_userdata.0.Energieverbrauch.Batterie.AkkuAlarm","class":"","headerBackgroundColor":"linear-gradient(to bottom, #202020, grey, #202020)","textFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.button.default.text","textFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.button.default.text","mdwButtonPrimaryColor":"#mdwTheme:vis-materialdesign.0.colors.button.default.primary","mdwButtonSecondaryColor":"#mdwTheme:vis-materialdesign.0.colors.button.default.secondary","fullscreenCloseIcon":"{mode:vis-materialdesign.0.colors.darkTheme;light:vis-materialdesign.0.colors.light.dialog.close_button_icon;dark:vis-materialdesign.0.colors.dark.dialog.close_button_icon; mode === \"true\" ? dark : light}","imageColor":"#mdwTheme:vis-materialdesign.0.colors.button.icon.icon_off","footerBackgroundColor":"linear-gradient(to bottom, #202020, grey, #202020)","overlayColor":"#mdwTheme:vis-materialdesign.0.colors.dialog.overlay","fullscreenCloseIconColor":"#mdwTheme:vis-materialdesign.0.colors.dialog.close_button_icon","fullscreenCloseIconPressColor":"#mdwTheme:vis-materialdesign.0.colors.dialog.close_button_fullscreen_press","debug":true},"style":{"left":"calc(66% - 35px)","top":"45px","height":"50px","width":"50px","z-index":"1","background":"#2e2e2e","box-shadow":"2px 2px 3px rgba(20, 20, 20, 50)","border-radius":"5px","border-color":"{wert:0_userdata.0.Energieverbrauch.Batterie.AkkuAlarm; wert==0 ? \"green\" :: \"red\"}","border-style":"solid","border-width":"2px"},"widgetSet":"materialdesign"}]
                          
                          Stephan SchleichS Offline
                          Stephan SchleichS Offline
                          Stephan Schleich
                          wrote on last edited by
                          #83

                          @Scrounger Welcher Punkte wäre das in deinem Adapter wenn ich die Beschreibung in weiß ändern möchte? Ist nun ja direkt in deinem Adapter zu setzten wenn ich mich nicht irre
                          fc42d384-1195-4f73-a549-cd6ed2469717-image.png

                          ScroungerS 1 Reply Last reply
                          0
                          • Stephan SchleichS Stephan Schleich

                            @Scrounger Welcher Punkte wäre das in deinem Adapter wenn ich die Beschreibung in weiß ändern möchte? Ist nun ja direkt in deinem Adapter zu setzten wenn ich mich nicht irre
                            fc42d384-1195-4f73-a549-cd6ed2469717-image.png

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

                            @stephan-schleich
                            Du kannst es nach wie vor per vis Editor konfigurieren.
                            Oder über die Adapter Einstellungen. Hier gibt's ein Filter Feld, dort den Namen des Widget eingeben oder auswählen und dann werden dir alle Einstellung für dieses Widget angezeigt. Die Beschreibung ist gleich wie im vis Editor.

                            1 Reply Last reply
                            1
                            • D Online
                              D Online
                              darkiop
                              Most Active
                              wrote on last edited by
                              #85

                              @Scrounger Hast du für vis-materialdesign.0.colors.darkTheme eine globale CSS ID/Class vorgsehen damit man auch über die CSS drauf reagieren kann? Suche mir grad den Wolf :D

                              Proxmox-ioBroker-Redis-HA Doku: https://forum.iobroker.net/topic/47478/dokumentation-einer-proxmox-iobroker-redis-ha-umgebung

                              ScroungerS 1 Reply Last reply
                              0
                              • D darkiop

                                @Scrounger Hast du für vis-materialdesign.0.colors.darkTheme eine globale CSS ID/Class vorgsehen damit man auch über die CSS drauf reagieren kann? Suche mir grad den Wolf :D

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

                                @darkiop
                                Ne das ist ein Datenpunkt, da geht nix per CSS. Was hast denn vor?

                                D 1 Reply Last reply
                                0
                                • ScroungerS Scrounger

                                  @darkiop
                                  Ne das ist ein Datenpunkt, da geht nix per CSS. Was hast denn vor?

                                  D Online
                                  D Online
                                  darkiop
                                  Most Active
                                  wrote on last edited by darkiop
                                  #87

                                  @scrounger

                                  Ich nutze eine Mischung aus Uhula's Framework und deinen Widgets.

                                  Grundsätzlich ist meine aktuelle Fragestellung:

                                  Wie setze ich in Abhängigkeit von dem Theme-DP die Hintergrund-Grafik. Mit einer <body id="dark-mode-on"> / <body id="dark-mode-off"> wäre das simpel.

                                  Oder übersehe ich gerade etwas?

                                  Proxmox-ioBroker-Redis-HA Doku: https://forum.iobroker.net/topic/47478/dokumentation-einer-proxmox-iobroker-redis-ha-umgebung

                                  ScroungerS 1 Reply Last reply
                                  0
                                  • D darkiop

                                    @scrounger

                                    Ich nutze eine Mischung aus Uhula's Framework und deinen Widgets.

                                    Grundsätzlich ist meine aktuelle Fragestellung:

                                    Wie setze ich in Abhängigkeit von dem Theme-DP die Hintergrund-Grafik. Mit einer <body id="dark-mode-on"> / <body id="dark-mode-off"> wäre das simpel.

                                    Oder übersehe ich gerade etwas?

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

                                    @darkiop

                                    puhhhh...
                                    Wahrscheinlich müsstest du direkt im VIS Editor ein Skript schreiben, dass den Datenpunkt liest und in Abhängigkeit dann jedem Widget eine Klasse zu weist. Für diese beiden Klassen kannst dann css regeln erstellen.

                                    Wenn du nur den Hintergrund anpassen willst, würd ich nen html Widget in den Hintergrund legen und dann per binding die hintergrundfarbe in Abhängigkeit des Datenpunktes setzen.

                                    Kannst du nicht den Uhula Widgets die Layout datenpunkte des Theme Editors per binding zuweisen?

                                    B D 2 Replies Last reply
                                    0
                                    • ScroungerS Scrounger

                                      @darkiop

                                      puhhhh...
                                      Wahrscheinlich müsstest du direkt im VIS Editor ein Skript schreiben, dass den Datenpunkt liest und in Abhängigkeit dann jedem Widget eine Klasse zu weist. Für diese beiden Klassen kannst dann css regeln erstellen.

                                      Wenn du nur den Hintergrund anpassen willst, würd ich nen html Widget in den Hintergrund legen und dann per binding die hintergrundfarbe in Abhängigkeit des Datenpunktes setzen.

                                      Kannst du nicht den Uhula Widgets die Layout datenpunkte des Theme Editors per binding zuweisen?

                                      B Offline
                                      B Offline
                                      BobBruni
                                      wrote on last edited by
                                      #89

                                      Dank der "generate HTML Element" lassen sich super Widgets basteln :+1:

                                      Gibt es auch eine Möglichkeit aus dem generierten HTML-Code das ursprüngliche Widget wieder herzustellen?

                                      ScroungerS 1 Reply Last reply
                                      0
                                      • B BobBruni

                                        Dank der "generate HTML Element" lassen sich super Widgets basteln :+1:

                                        Gibt es auch eine Möglichkeit aus dem generierten HTML-Code das ursprüngliche Widget wieder herzustellen?

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

                                        @bobbruni sagte in Test Adapter Material Design Widgets v0.5.x:

                                        Dank der "generate HTML Element" lassen sich super Widgets basteln :+1:

                                        Zeig doch Mal was du so gebastelt hast, würde mich sehr interessieren.

                                        Gibt es auch eine Möglichkeit aus dem generierten HTML-Code das ursprüngliche Widget wieder herzustellen?

                                        Ja manuelle Eingabe der Daten im Editor ;-)
                                        Warum sollte man das brauchen?

                                        1 Reply Last reply
                                        0
                                        • ice987I Offline
                                          ice987I Offline
                                          ice987
                                          wrote on last edited by ice987
                                          #91

                                          @Scrounger
                                          Ich möchte z. B. den Batterieladestand und die WiFi Qualität grafisch ausgeben. Gibt‘s ein Widget, bei welchem je nach Wert eine andere/s Grafik/Symbol angezeigt werden kann?

                                          Für die Batterie gienge evtl. Progress für WiFi passt jedoch das Symbol nicht so richtig…

                                          husqvarna-automower, meteoblue, wiserbyfeller, spritmonitor

                                          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

                                          329

                                          Online

                                          32.6k

                                          Users

                                          82.2k

                                          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