Skip to content
  • Home
  • 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

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Tester
  4. Test Adapter Material Design Widgets v0.5.x

NEWS

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

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

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

Test Adapter Material Design Widgets v0.5.x

Geplant Angeheftet Gesperrt Verschoben Tester
adaptermaterialmaterial design widgetsvisvisualisationwidget
110 Beiträge 22 Kommentatoren 18.8k Aufrufe 38 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.
  • GlasfaserG Glasfaser

    @oli

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

    1.JPG

    O Online
    O Online
    Oli
    schrieb am zuletzt editiert von
    #77

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

    Gruß
    Oliver

    1 Antwort Letzte Antwort
    0
    • ScroungerS Scrounger

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

      O Online
      O Online
      Oli
      schrieb am zuletzt editiert von
      #78

      @scrounger

      hier das gewünschte log
      log neu

      Gruß
      Oliver

      ScroungerS 1 Antwort Letzte Antwort
      0
      • O Oli

        @scrounger

        hier das gewünschte log
        log neu

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

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

        <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 Antwort Letzte Antwort
        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 Online
          O Online
          Oli
          schrieb am zuletzt editiert von Oli
          #80

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

          Gruß
          Oliver

          ScroungerS 1 Antwort Letzte Antwort
          0
          • O Oli

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

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

            @oli
            OK da steht leider nix brauchbares drin. Dann bitte Dialog Widget komplett neu 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>

            O 1 Antwort Letzte Antwort
            0
            • ScroungerS Scrounger

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

              O Online
              O Online
              Oli
              schrieb am zuletzt editiert von
              #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 Antwort Letzte Antwort
              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
                schrieb am zuletzt editiert von
                #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 Antwort Letzte Antwort
                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
                  schrieb am zuletzt editiert von
                  #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.

                  <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
                  1
                  • D Online
                    D Online
                    darkiop
                    Most Active
                    schrieb am zuletzt editiert von
                    #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 Antwort Letzte Antwort
                    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
                      schrieb am zuletzt editiert von
                      #86

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

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

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

                      D 1 Antwort Letzte Antwort
                      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
                        schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                        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
                          schrieb am zuletzt editiert von 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?

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

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

                          B D 2 Antworten Letzte Antwort
                          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
                            schrieb am zuletzt editiert von
                            #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 Antwort Letzte Antwort
                            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
                              schrieb am zuletzt editiert von
                              #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?

                              <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
                              • ice987I Offline
                                ice987I Offline
                                ice987
                                schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                                0
                                • ice987I ice987

                                  @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…

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

                                  @ice987
                                  Ja geht mit dem value Widget. Da kannst du einfach im das Feld fürs Icon eine Bedingung schreiben. Wie das mit den Bedingungen geht ist in der Doku zum value Widget beschrieben.

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

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

                                  ice987I 1 Antwort Letzte Antwort
                                  0
                                  • ScroungerS Scrounger

                                    @ice987
                                    Ja geht mit dem value Widget. Da kannst du einfach im das Feld fürs Icon eine Bedingung schreiben. Wie das mit den Bedingungen geht ist in der Doku zum value Widget beschrieben.

                                    ice987I Offline
                                    ice987I Offline
                                    ice987
                                    schrieb am zuletzt editiert von ice987
                                    #93

                                    @scrounger
                                    das value Widget habe ich mir auch angekuckt und noch gedacht, irgendwie könnte das das richtige Widget sein :sunglasses:

                                    auf jeden Fall funktioniert das wie gewünscht bis auf einen kleinen Schönheitsfehler: in der Runtime aktualisiert sich die Grafik wie gewünscht, im Editor aktualisiert es die Grafik nicht auf Anhieb. Beim Anklicken dauert es immer eine Weile bis das Widget aktiv wird (Bedienung/Eingabe insgesamt sehr träge):

                                    Hier einen Export:

                                    [{"tpl":"tplVis-materialdesign-value","data":{"oid":"0_userdata.0.test.wert27","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","targetType":"auto","image":"#value == 0 ? \"home\" : (#value > 0 and #value <= 10 ? \"abacus\" : \"account\")","imageColor":"","iconPosition":"left","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"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,"g_changeEffect":false,"effectFontColor":"#mdwTheme:vis-materialdesign.0.colors.value.effect","effectFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.value.effect","effectDuration":"750","overrideText":"","g_layout":false,"textAlign":"start","valueLabelWidth":"4","valuesFontColor":"#mdwTheme:vis-materialdesign.0.colors.value.text","valuesFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.value.text","valuesFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.value.text","prepandTextColor":"#mdwTheme:vis-materialdesign.0.colors.value.prepand","prepandTextFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.value.prepand","prepandTextFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.value.prepand","appendTextColor":"#mdwTheme:vis-materialdesign.0.colors.value.append","appendTextFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.value.append","appendTextFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.value.append","g_formatNumber":false,"g_formatBoolean":false,"iconHeight":"25"},"style":{"left":"173px","top":"665px"},"widgetSet":"materialdesign"}]
                                    

                                    Versions:
                                    Adapter version: material design widgets v0.5.9
                                    JS-Controller version: v3.2.16
                                    Node version: v12.22.1
                                    VIS Adapter version: v1.3.9

                                    husqvarna-automower, meteoblue, wiserbyfeller, spritmonitor

                                    ScroungerS 1 Antwort Letzte Antwort
                                    0
                                    • ice987I ice987

                                      @scrounger
                                      das value Widget habe ich mir auch angekuckt und noch gedacht, irgendwie könnte das das richtige Widget sein :sunglasses:

                                      auf jeden Fall funktioniert das wie gewünscht bis auf einen kleinen Schönheitsfehler: in der Runtime aktualisiert sich die Grafik wie gewünscht, im Editor aktualisiert es die Grafik nicht auf Anhieb. Beim Anklicken dauert es immer eine Weile bis das Widget aktiv wird (Bedienung/Eingabe insgesamt sehr träge):

                                      Hier einen Export:

                                      [{"tpl":"tplVis-materialdesign-value","data":{"oid":"0_userdata.0.test.wert27","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","targetType":"auto","image":"#value == 0 ? \"home\" : (#value > 0 and #value <= 10 ? \"abacus\" : \"account\")","imageColor":"","iconPosition":"left","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"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,"g_changeEffect":false,"effectFontColor":"#mdwTheme:vis-materialdesign.0.colors.value.effect","effectFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.value.effect","effectDuration":"750","overrideText":"","g_layout":false,"textAlign":"start","valueLabelWidth":"4","valuesFontColor":"#mdwTheme:vis-materialdesign.0.colors.value.text","valuesFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.value.text","valuesFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.value.text","prepandTextColor":"#mdwTheme:vis-materialdesign.0.colors.value.prepand","prepandTextFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.value.prepand","prepandTextFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.value.prepand","appendTextColor":"#mdwTheme:vis-materialdesign.0.colors.value.append","appendTextFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.value.append","appendTextFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.value.append","g_formatNumber":false,"g_formatBoolean":false,"iconHeight":"25"},"style":{"left":"173px","top":"665px"},"widgetSet":"materialdesign"}]
                                      

                                      Versions:
                                      Adapter version: material design widgets v0.5.9
                                      JS-Controller version: v3.2.16
                                      Node version: v12.22.1
                                      VIS Adapter version: v1.3.9

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

                                      @ice987
                                      Das ist aber normal im Editor. Die States werden da nur beim laden aktualisiert und wenn man an den Einstellungen des Widgets etwas ä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>

                                      ice987I D3ltoroxpD O 3 Antworten Letzte Antwort
                                      0
                                      • ScroungerS Scrounger

                                        @ice987
                                        Das ist aber normal im Editor. Die States werden da nur beim laden aktualisiert und wenn man an den Einstellungen des Widgets etwas ändert.

                                        ice987I Offline
                                        ice987I Offline
                                        ice987
                                        schrieb am zuletzt editiert von
                                        #95

                                        @scrounger

                                        ah ok, dann ist alles i.O. Ich dachte nur, da das Widget Button Toggle vertikal auch direkt im Editor aktualisiert wird.

                                        das value Widget kann auch so genutzt werden, was die ganze Geschichte sehr interessant macht (zwei DP's als Binding, ohne Object ID) :flushed:

                                        [{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"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,"html":"<div class='vis-widget materialdesign-widget materialdesign-value materialdesign-value-html-element'\n\tstyle='width: 100%; height: 100%; position: relative; display: flex; align-items: center;'\n\tmdw-debug='false'\n\tmdw-oid='nothing_selected'\n\tmdw-targetType='auto'\n\tmdw-overrideText=' '\n\tmdw-textAlign='start'\n\tmdw-valueLabelWidth='4'\n\tmdw-valuesFontColor='#mdwTheme:vis-materialdesign.0.colors.value.text'\n\tmdw-valuesFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.text'\n\tmdw-valuesFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.text'\n\tmdw-prepandTextColor='#mdwTheme:vis-materialdesign.0.colors.value.prepand'\n\tmdw-prepandTextFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.prepand'\n\tmdw-prepandTextFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.prepand'\n\tmdw-appendTextColor='#mdwTheme:vis-materialdesign.0.colors.value.append'\n\tmdw-appendTextFontFamily='#mdwTheme:vis-materialdesign.0.fonts.value.append'\n\tmdw-appendTextFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.append'\n\tmdw-image='{wert1:0_userdata.0.test.test26;wert2:0_userdata.0.test.wert27;wert1 === \\\"true\\\" ? \\\"/vis.0/main/img/icon_nowifi.png\\\" : (wert2 >= -50 ? \\\"/vis.0/main/img/icon_wifi_excellent.png\\\" : (wert2 < -50 && wert2 >= -60 ? \\\"/vis.0/main/img/icon_wifi_good.png\\\" : (wert2 < -60 && wert2 >= -70 ? \\\"/vis.0/main/img/icon_wifi_fair.png\\\" : \\\"/vis.0/main/img/icon_wifi_weak.png\\\")))}'\n\tmdw-iconPosition='left'\n\tmdw-iconHeight='25'\n\tmdw-effectFontColor='#mdwTheme:vis-materialdesign.0.colors.value.effect'\n\tmdw-effectFontSize='#mdwTheme:vis-materialdesign.0.fontSizes.value.effect'\n\tmdw-effectDuration='750'\n></div>"},"style":{"left":"659px","top":"116px"},"widgetSet":"basic"}]
                                        

                                        husqvarna-automower, meteoblue, wiserbyfeller, spritmonitor

                                        1 Antwort Letzte Antwort
                                        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?

                                          D Online
                                          D Online
                                          darkiop
                                          Most Active
                                          schrieb am zuletzt editiert von
                                          #96

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

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

                                          Hatte schon befürchtet das man das evtl. per Skript abfangen muss.

                                          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.

                                          Ja, die Idee hatte ich auch, werd ich demnächst noch Testen.

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

                                          Ich nutze von Uhulas Framework eigentlich nur den Rahmen - also alles was die Seite Responsiv macht - die Inhalte werden größtenteils mit deinen Widgets dargestellt. Und Uhulas Konzept mit mehreren Page Views habe ich auf eine Page View mit einem View in Widget 8 und deiner TopAppBar angepasst.

                                          Eine Idee war noch, das ganze über ein Bindung der BG-Optionen der Seite selbst zu machen (kein Widget selektiert):

                                          205e0567-b0b8-4b56-99a8-7f9800ffb8db-grafik.png

                                          Leider sind hier Bindings ohne Funktion.

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

                                          D 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

                                          768

                                          Online

                                          32.4k

                                          Benutzer

                                          81.5k

                                          Themen

                                          1.3m

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

                                          • Du hast noch kein Konto? Registrieren

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