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

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 Offline
    GlasfaserG Offline
    Glasfaser
    schrieb am zuletzt editiert von
    #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 Antwort Letzte Antwort
    0
    • 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 Offline
                      D Offline
                      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 Offline
                          D Offline
                          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
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          827

                                          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