Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Skripten / Logik
    4. JavaScript
    5. Javascript | Button Hintergrundfarbe nach Wert

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    Javascript | Button Hintergrundfarbe nach Wert

    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      MCU last edited by

      @tg70

      {v:coronavirus-statistics.0.Germany.todayDeaths;(v<0)? "green": (v<35)? "yellow": (v>50)? "red": "grey"}
      

      Bei mir schon:
      f370fdd4-68eb-43cd-b8c6-f7d3b1a16b9e-image.png

      TG70 1 Reply Last reply Reply Quote 0
      • TG70
        TG70 Forum Testing @MCU last edited by TG70

        Hast du mein Widget probiert... bei mir gehts leider nicht
        Das als Beispiel > 100 (128)

        {v:coronavirus-statistics.0.Germany.Kreis.Nürnberger_Land.cases7_per_100k;(v<50)? "green": (v<100)? "yellow": (v>100)? "red": "grey"}
        
        M 1 Reply Last reply Reply Quote 0
        • M
          MCU @TG70 last edited by

          @tg70 Kann ich nicht:
          19047fb0-86a7-4961-b6bc-5aa08343a0ff-image.png

          TG70 1 Reply Last reply Reply Quote 0
          • TG70
            TG70 Forum Testing @MCU last edited by

            @mcu .. das ist aber seltsam

            Farbe Rot


            [{"tpl":"tplValueFloat","data":{"oid":"coronavirus-statistics.0.Germany.Stadt.Nürnberg.cases7_per_100k","g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","is_comma":false,"factor":"1","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,"digits":"1"},"style":{"left":"142px","top":"602px","background":"{v:coronavirus-statistics.0.Germany.Kreis.Nürnberger_Land.cases7_per_100k;(v<50)? "green": (v<100)? "yellow": (v>100)? "red": "grey"}","width":"54px","height":"15px","border-width":"1px","border-style":"solid","border-radius":"4px","border-color":"grey","color":"black","text-align":"center","font-size":"16px","font-weight":"bolder","font-variant":"normal","background-color":""},"widgetSet":"basic"}]

            Farbe Gelb


            [{"tpl":"tplValueFloat","data":{"oid":"coronavirus-statistics.0.Germany.Kreis.Nürnberger_Land.cases7_per_100k","g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","is_comma":false,"factor":"1","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,"digits":"1"},"style":{"left":"205px","top":"602px","background":"{v:coronavirus-statistics.0.Germany.Kreis.Nürnberger_Land.cases7_per_100k; (v<50)? "green": (v<100)? "yellow": (v>100)? "red": "grey"}","width":"54px","height":"15px","border-width":"1px","border-style":"solid","border-radius":"4px","border-color":"grey","color":"black","text-align":"center","font-size":"16px","font-weight":"bolder","font-variant":"normal"},"widgetSet":"basic"}]

            M 1 Reply Last reply Reply Quote 0
            • M
              MCU @TG70 last edited by MCU

              @tg70 Kann ich beide nicht importieren?
              Bei Dir wird nicht korrekt exportiert:
              f4ef8ec7-2625-45c0-b1ff-256899d279e9-image.png
              Es sind keine

              "\"
              

              vor den ", deswegen kommt der Import damit nicht klar.
              Achso, du musst die Code-Tags nehmen!
              </> im Spoiler

              -> Erst Spoiler klicken, danach direkt Code-Tags (</>) und dann mit STRG+V, den Code einfügen.

              TG70 M 2 Replies Last reply Reply Quote 1
              • TG70
                TG70 Forum Testing @MCU last edited by

                @mcu ich hab das über den Export Button gemacht. Ist das nicht richtig?

                1 Reply Last reply Reply Quote 0
                • M
                  MCU @MCU last edited by

                  @mcu Doch, aber dann das Einfügen in den Post ist falsch, siehe oben.

                  TG70 1 Reply Last reply Reply Quote 0
                  • TG70
                    TG70 Forum Testing @MCU last edited by TG70

                    @mcu 🤦
                    Bin gerade unterwegs..schick dir in einer Stunde die beiden buttons

                    1 Reply Last reply Reply Quote 0
                    • M
                      MCU last edited by MCU

                      @tg70 Dort hat man es auch schon versucht:
                      https://forum.iobroker.net/topic/23851/bindings-in-vis/50

                      Es gibt auch ein Issue beim VIS-Adapter:

                      https://github.com/ioBroker/ioBroker.vis/issues/339

                      ice987987 created this issue in ioBroker/ioBroker.vis

                      closed Binding for background-color does not work #339

                      TG70 1 Reply Last reply Reply Quote 0
                      • TG70
                        TG70 Forum Testing @MCU last edited by TG70

                        @mcu supi ... das heißt warten 😞 .... aber ich hab auf jeden Fall aboniert!
                        Aber da geht es eher um die Widget "background" oder?

                        Ich suche ja noch nach einer VIEW background Binding Möglichkeit

                        Oh klar ich füge ja einen Code in den Spoiler ein... sorry
                        Hier der "red"

                        [{"tpl":"tplValueFloat","data":{"oid":"coronavirus-statistics.0.Germany.Stadt.Nürnberg.cases7_per_100k","g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","is_comma":false,"factor":"1","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,"digits":"1"},"style":{"left":"142px","top":"602px","background":"{v:coronavirus-statistics.0.Germany.Kreis.Nürnberger_Land.cases7_per_100k;(v<50)? \"green\": (v<100)? \"yellow\": (v>100)? \"red\": \"grey\"}","width":"54px","height":"15px","border-width":"1px","border-style":"solid","border-radius":"4px","border-color":"grey","color":"black","text-align":"center","font-size":"16px","font-weight":"bolder","font-variant":"normal","background-color":""},"widgetSet":"basic"}]
                        

                        Hier der "green"

                        [{"tpl":"tplValueFloat","data":{"oid":"coronavirus-statistics.0.Germany.Kreis.Nürnberger_Land.cases7_per_100k","g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","is_comma":false,"factor":"1","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,"digits":"1"},"style":{"left":"205px","top":"602px","background":"{v:coronavirus-statistics.0.Germany.Kreis.Nürnberger_Land.cases7_per_100k; (v<50)? \"green\": (v<100)? \"yellow\": (v>100)? \"red\": \"grey\"}","width":"54px","height":"15px","border-width":"1px","border-style":"solid","border-radius":"4px","border-color":"grey","color":"black","text-align":"center","font-size":"16px","font-weight":"bolder","font-variant":"normal"},"widgetSet":"basic"}]
                        

                        Edit | background color:

                        Kann das so funktionieren - nein - weil es nicht funktioniert 😐

                        {v:coronavirus-statistics.0.Germany.Kreis.Roth.cases7_per_100k; (v<35)? "green": (v<50)? "yellow": (v>50)? "red" (v>100)? "darkred": "grey"}
                        

                        Das hier soll umgesetzt werden:
                        f23967bd-f733-4f0e-8b39-d4b2fe192e69-image.png

                        M 3 Replies Last reply Reply Quote 0
                        • M
                          MCU @TG70 last edited by MCU

                          @tg70 Also bei mir funktioniert es:
                          de2346b1-1c34-4f78-9a8f-40cce8c72f66-image.png

                          Red funktioniert nicht bei Dir, weil der Wert falsch ist:

                          "oid":"coronavirus-statistics.0.Germany.Stadt.Nürnberg.cases7_per_100k"
                          
                          und in der Abfrage:
                          
                          "background":"{v:coronavirus-statistics.0.Germany.Kreis.Nürnberger_Land.cases7_per_100k;(v<50)? \"green\": (v<100)? \"yellow\": (v>100)? \"red\": \"grey\"}"
                          

                          Also id und Abfrage für Background haben unterschiedliche Werte! Einmal Stadt und einmal Kreis, das geht nicht.

                          1 Reply Last reply Reply Quote 0
                          • M
                            MCU @TG70 last edited by MCU

                            @tg70 sagte in Javascript | Button Hintergrundfarbe nach Wert:

                            Kann das so funktionieren - nein - weil es nicht funktioniert

                            Das würde auch funktionieren, wenn die Werte entsprechend gleich wären. ID und Binding müssen passen: siehe oben.

                            1 Reply Last reply Reply Quote 0
                            • M
                              MCU @TG70 last edited by

                              @tg70 sagte in Javascript | Button Hintergrundfarbe nach Wert:

                              Aber da geht es eher um die Widget "background" oder?

                              Nein. Im Issue geht es um die Background-Color vom gesamten View. Siehe oben in der Beschreibung vom Issue.

                              TG70 1 Reply Last reply Reply Quote 1
                              • TG70
                                TG70 Forum Testing @MCU last edited by

                                @mcu Guten Morgen ... danke dir für dein unermütliche Hilfe.
                                Man lern jeden Tag dazu hier - das ID/Binding nicht passten kam wahrscheinlich vom vielen probieren.
                                Ich habe immer das Problem mit dem letztem, oberen Wert - hier wird zb. das "blue" nicht angezeigt.

                                [{"tpl":"tplValueFloat","data":{"oid":"coronavirus-statistics.0.Germany.Stadt.Nürnberg.cases7_per_100k","g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","is_comma":false,"factor":"1","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,"digits":"1"},"style":{"left":"552px","top":"576px","background":"{v:coronavirus-statistics.0.Germany.Stadt.Nürnberg.cases7_per_100k;(v<35)? \\\"green\\\": (v<50)? \\\"yellow\\\": (v<100)? \\\"red\\\": (v>=100)? \\\"blue\\\": \\\"grey\\\"}","width":"54px","height":"16px","border-width":"1px","border-style":"solid","border-radius":"4px","border-color":"grey","color":"black","text-align":"center","font-size":"16px","font-weight":"bolder","font-variant":"normal","background-color":"","line-height":"17px"},"widgetSet":"basic"},{"tpl":"tplValueList","data":{"oid":"nothing_selected","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"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","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_prepend":"Nürnberg","html_append":"","name":"TEXT_TV_schauen"},"style":{"left":"552px","top":"599px","color":"white","font-size":"11px","width":"54px","height":"15px","text-align":"center","font-weight":"bolder","background":"","font-family":"Tahoma, Geneva, sans-serif","font-style":"normal","font-variant":"normal","line-height":"14px","z-index":"103","background-color":"","letter-spacing":""},"widgetSet":"basic"}]
                                

                                TG70 1 Reply Last reply Reply Quote 0
                                • TG70
                                  TG70 Forum Testing @TG70 last edited by TG70

                                  ERGEBNIS: Es lag an einem defekten Widget, wer weiß auch immer was da anders war wie bei den anderen.
                                  Habe ein neues Widget erstellt und ID und Bindings gesetzt und alles ist TOP

                                  DANKE @MCU du hast mir sehr geholfen |+1|
                                  Wenn du was raus bekommst wg. VIEW Background Bindings denkst vllt. an mich .. wäre TOP

                                  {v:coronavirus-statistics.0.Germany.Stadt.Nürnberg.cases7_per_100k;(v<35)? \"green\": (v<50)? \"yellow\": (v<100)? \"red\": (v=>100)? \"darkred\": \"grey\"}
                                  

                                  TOPIC: Wenn jemand noch eine Idee hat warum der ganz oben genannte java-script nicht funktioniert wäre das
                                  super. Würde mich sehr interessieren.

                                  M 1 Reply Last reply Reply Quote 0
                                  • M
                                    MCU @TG70 last edited by

                                    @tg70 Das Script funktioniert. Hab es gerade nochmal getestet.

                                    1 Reply Last reply Reply Quote 1
                                    • First post
                                      Last post

                                    Support us

                                    ioBroker
                                    Community Adapters
                                    Donate

                                    812
                                    Online

                                    31.8k
                                    Users

                                    80.0k
                                    Topics

                                    1.3m
                                    Posts

                                    2
                                    61
                                    2900
                                    Loading More Posts
                                    • Oldest to Newest
                                    • Newest to Oldest
                                    • Most Votes
                                    Reply
                                    • Reply as topic
                                    Log in to reply
                                    Community
                                    Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                    The ioBroker Community 2014-2023
                                    logo