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.
    • TG70
      TG70 Forum Testing @MCU last edited by

      schau ich mir gleich an ... bin gespannt....

      DU schau mal, die Farbe "red" funktioniert bei mir nicht

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


      [{"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":"583px","background":"{v:coronavirus-statistics.0.Germany.Stadt.Nürnberg.cases7_per_100k; (v<50)? "green": (v<100)? "yellow": (v>100)? "red": "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":""},"widgetSet":"basic"}]

      1 Reply Last reply Reply Quote 0
      • 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

                                      423
                                      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