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

      Also ich dachte ich löse das mit einem javascript und dem entsprechenden Link im
      Hintergrund Feld. Das ist das Java was dazu gehört:

      var idFarbe = "javascript.0.VIS.Corona";
      var idAktor = "coronavirus-statistics.0.Germany.Kreis.Roth.cases7_per_100k";
       
      createState(idFarbe, 'white', {
          def: 'white',
          type: 'string',
          role: 'text'
      });
       
      on(idAktor, function (data) {
          if (data.state.val > 1 && data.state.val <= 49) setState(idFarbe, 'green');
          else if (data.state.val >= 50 && data.state.val <= 99) setState(idFarbe, 'yellow');
          else if (data.state.val >= 100 && data.state.val <= 1000) setState(idFarbe, 'red');
      });
      

      Mein Button enthält eigentlich nur den Verweis im "background" Feld

      {javascript.0.VIS.Corona}
      


      [{"tpl":"i-vis-universal","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","iUniversalWidgetType":"State","iValueType":"boolean","iValueComparison":"equal","iStateResponseTime":"0","iStateResetValueTime":"0","iNavWait":"100","iPopUpBackground":"#666666","iPopUpPreventClickOutside":"","iPopUpShowTitle":"true","iPopUpTitle":"","iPopUpTitleColor":"#ffffff","iPopUpCloseBtnColor":"#dc2e2e","iPopUpWidth":"800px","iPopUpHeight":"500px","iPopUpPosition":"center","iPopUpCornerRadiusUL":"12","iPopUpCornerRadiusUR":"0","iPopUpCornerRadiusLR":"12","iPopUpCornerRadiusLL":"0","iPopUpShadowXOffset":"2","iPopUpShadowYOffset":"2","iPopUpShadowBlur":"2","iPopUpShadowSpread":"1","iPopUpShadowColor":"#111111","iButtonCol":"{javascript.0.VIS.Corona}","iButtonActive":"{javascript.0.VIS.Corona}","iButtonColHover":"","iOpacityBack":"1","iCornerRadiusUL":"12","iCornerRadiusUR":"0","iCornerRadiusLR":"12","iCornerRadiusLL":"0","iContentFlexDirection":"vertical","iContentVertAlign":"iSpace-between","iContentOrder":"orderImgText","iOpacityCtn":"1","iTextColor":"#ffffff","iTextSize":"12","iTextAlign":"iStart","iTextSpaceTop":"0","iTextSpaceBottom":"0","iTextSpaceLeft":"0","iTextSpaceRight":"0","iIconSize":"35","iImgAlign":"iCenter","iImgSpaceTop":"5","iImgSpaceBottom":"0","iImgSpaceLeft":"0","iImgSpaceRight":"0","iImgRotation":"0","iImgBlinkFalse":"0","iImgBlinkTrue":"0","iImgColorFalse":"","iImgColorTrue":"","iShadowXOffset":"2","iShadowYOffset":"2","iShadowBlur":"2","iShadowSpread":"1","iShadowColor":"#111111","iShadowColorActive":"#111111","iShadowColorHover":"","iShadowInnerXOffset":"0","iShadowInnerYOffset":"0","iShadowInnerBlur":"0","iShadowInnerSpread":"0","iShadowInnerColor":"#111111","iShadowInnerColorActive":"#111111","iShadowInnerColorHover":"","iBorderSize":"0","iBorderStyle":"none","iBorderColor":"#ffffff","iBorderColorActive":"#ffffff","iBorderColorHover":"","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,"oid":"coronavirus-statistics.0.Germany.Kreis.Roth.cases7_per_100k"},"style":{"left":"664px","top":"459px"},"widgetSet":"vis-inventwo"}]

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

        @tg70 Das javascript benötigst du, um die Hintergrund-Farbe zu ermitteln. Das Script ist aber nicht in der VIS. Dort wird nur mit Hilfe von sogenannten Bindings ({javascript.0.VIS.Corona}) der Wert der Farbe genutzt.

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

          genau so war mein Plan .... über das Script die Farbe ermitteln und in der VIS dann setzen.

          Erst wollte ich es mit einem Value-List probieren, aber da kriege ich die Eingrenzungen nicht hin.
          Da schaffe ich es immer nur mit 2 Werten.

          Über die Bedingungen hatte ich auch nachgedacht.

          Danach wollte ich einfach im "background" (genauer Code von gestern finde ich
          gerade nicht mehr)

          {v:adapter; (v<0) ? "green" : (v<35) ? "yellow" : (v<50) ? "red" : "grey"} 
          
          M 1 Reply Last reply Reply Quote 0
          • M
            MCU @TG70 last edited by

            @tg70 Das funktioniert doch mit dem Hintergrund und dem letzten Binding. Oder hast du da jetzt noch Probleme?

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

              @mcu
              Nein funktioniert nicht ... es wird "kein" Hintegrund angezeigt.
              Deshalb habe ich es mit dem u.g. Weg probiert. (Java/Binding)

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

                @tg70 Hast du das Update auf 1.3.8 gemacht?
                Bei mir funktionieren beide Wege.

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

                  @mcu sagte in Javascript | Button Hintergrundfarbe nach Wert: 1. 3.8

                  bisher noch nicht ... kann ich den updaten? Auf "Beta" bin ich - wird kein Update Symbol angezeigt. Oder geht das nur über die Console?

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

                    @tg70 Erst die Adapter updaten:
                    ceb92156-7fac-4d8e-b05f-c40518b08f56-image.png

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

                      genau dieses Symbol ist beim VIS (Visualisierung) nicht vorhanden.
                      Nur beim etlichen anderen Adaptern, da ich ja keine Betas installiert habe

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

                        @TG70
                        ae123021-6c6c-47e5-8a4b-b18836fee225-image.png

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

                          Ok ich habs über die Konsole gemacht. Die restlichen Adapter lasse ich mal vorerst nicht
                          auf Beta

                          6cae4c35-f013-413e-8189-0f928d5258bd-grafik.png

                          bb30542d-1a7c-4f47-8b7e-b0a6f82f3eb7-grafik.png

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

                            @tg70 Und funktioniert es jetzt?

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

                              @mcu .. leider nein 😧 ... was ist bei mir falsch

                              fd2898a8-0cb8-40cb-b03c-438e950a1b00-grafik.png

                              VIS
                              8704d9be-457a-42e2-baf0-8d684a2ccc8e-grafik.png

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

                                @tg70 Nimm doch mal das Widget was ich dir geschickt habe. Wie sieht es da aus?
                                Und schick mir das, was du da gerade nutzt als Export.

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

                                  @MCU erklärst du mir bitte kurz was dein Widget macht, du hast ja zwei Datensätze in 0_userdata**** angelegt. Was passiert da.
                                  Woher kommt der Wert 4 in "Zahl_SEL" deiner Ojekt ID?
                                  .... der zweite Datensatz "Zahl_SONOS" mit dem Wert "green", auf den du dann in der VIS über "background" zugreifst?

                                  Edit: so würde das bestimmt funktionieren, dass eben die Zahl 4 mit grünen Hintergrund angezeigt wird

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

                                    @tg70 Das sind Beispielwerte, die ich selbst angelegt habe.
                                    Hier mit corona....

                                    [{"tpl":"tplValueFloat","data":{"oid":"coronavirus-statistics.0.Germany.todayDeaths","g_fixed":false,"g_visibility":false,"g_css_font_text":false,"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","is_comma":"true","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},"style":{"left":"1001px","top":"145px","background":"{v:coronavirus-statistics.0.Germany.todayDeaths;(v<0)? \"green\": (v<35)? \"yellow\": (v<50)? \"red\": \"grey\"}","width":"104px","height":"72px"},"widgetSet":"basic"}]
                                    

                                    d031f5f4-6613-4b74-be8b-7420dcc02b58-image.png

                                    Hast du im CSS-Bereich was drin?

                                    be262b0e-4d84-40d7-a5fd-4b2b0906b861-image.png

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

                                      Also das funktioniert.

                                      Im CSS habe ich nur folgendes:

                                      .rotate90{
                                          transform: rotate(90deg);
                                      }
                                      .rotate180{
                                          transform: rotate(180deg);
                                      }
                                      .rotate270{
                                          transform: rotate(270deg);
                                      }
                                      

                                      Habe es jetzt auf den Ort umgeschrieben dann funktioniert das auch, warum jetzt?

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

                                        @tg70 Hauptsache es funktioniert.

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

                                          Seltsam verstehe ich nicht - hast die die Java Variante auch probiert?

                                          OFF TOPIC: Wenn ich schon mal so einen tollen Spezialisten habe - mein nächstes Projekt - ich möchte auch mit Bindings oder auch ander, alle VIS Hintegründe auf einmal ändern.
                                          Hab vorhin Hintegründe getestet und bei 92 Views ist das sehr viel geklicke

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

                                            @tg70 ABER NUR FÜR EXPERTEN:
                                            /opt/iobroker/iobroker-data/files/vis.0/Projektname/vis-views.json

                                            Dort steht quasi das ganze Projekt in json.

                                            e70a3dd2-5a88-4c4d-9f0b-f18b9c1f1e5f-image.png

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            775
                                            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