Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. ValueList HTML mit Größer und Kleiner als beeinflussen?

    NEWS

    • Neues Video "KI im Smart Home" - ioBroker plus n8n

    • Neues Video über Aliase, virtuelle Geräte und Kategorien

    • Wir empfehlen: Node.js 22.x

    ValueList HTML mit Größer und Kleiner als beeinflussen?

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

      Ja, nur schreib es mal eine zeile tiefer bei Color rein.

      1 Reply Last reply Reply Quote 0
      • C
        ChristianF last edited by

        Tut leider genauso wenig… muss man noch irgendwas aktivieren oder so?

        1 Reply Last reply Reply Quote 0
        • P
          pix last edited by

          Hab die Häkchen vergessen, meine Schuld :shock:

          In Background-Color:

          {v:hm-rpc.0.1234567.2.POWER; (v>100) ? "red": "green"}
          

          Natürlich sind auch RGB-Werte möglich:

          {v:hm-rpc.0.1234567.2.POWER; (v>100) ? "rgba(255,0,0,1)": "rgb(0,255,0)"}
          

          Gruß

          Pix

          1 Reply Last reply Reply Quote 0
          • C
            ChristianF last edited by

            Perfekt, vielen Dank, das funktioniert prima. Man muss nur wissen, dass es in der Edit Ansicht nicht schaltet, aber das ist ja egal 🙂

            Gibt es auch eine Möglichkeit, den angezeigten Wert anhand der Größe des Power Entrys zu beeinflussen?

            Beispiel

            Wenn POWER>100W steht dort "Heizbetrieb ein" (und rot über Deinen Tipp von eben)

            Wenn Power<100W steht dort "Stand-By" (und grün über Deinen Tipp von eben)

            Vielen Dank!!!

            1 Reply Last reply Reply Quote 0
            • P
              pix last edited by

              Klar geht das. Versuche es mit diesem Widget:

              [{"tpl":"tplHtml","data":{"g_fixed":false,"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,"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,"html":"{v:hm-rpc.0.LEQ0931306.2.POWER; (v>100) ? \"Heizbetrieb ein\": \"Stand-By\"}"},"style":{"left":"1050px","top":"29px","background":"","background-color":"{v:hm-rpc.0.LEQ0931306.2.POWER; (v>100) ? \"red\": \"green\"}","color":"white"},"widgetSet":"basic"}]
              

              Du kannst diese Abfrage innerhalb eines Bindings in JEDEM Feld verwenden. Also zB auch die Größe/Schriftgröße/Position/Rundung des Rahmens usw. ändern.

              Also zB. wenn alles grün, dann kleine weiße Schrift auf grünen Grund und kleiner grüner Rahmen 30px hoch mal 100px breit.

              Wenn aber rot, dann gelbe Schrift in 40px auf rotem Grund und 90x300px Größe und gestricheltem Rand.

              Bei diesem Typ der Abfrage hast du immer zwei Optionen: trifft zu oder nicht. Das kannst eben in jedem CSS Feld verwenden. Einfacher geht es, wenn du die Abfrage in das CSS-Feld "CSS-Klasse" schreibst: Also zB````
              {v:hm-rpc.0.LEQ0931306.2.POWER; (v>100) ? "strom_rot" : "strom_gruen"}

              .strom_gruen {
              font-size: 12px;
              background-color: green;
              color: white;
              ...}
              .strom_rot {
              font-size: 30px;
              background-color: red;
              color: yellow;
              ...}

              
              So lassen sich aufpoppende Fenster o.ä. realisieren.
              
              Gruß
              
              Pix
              1 Reply Last reply Reply Quote 0
              • C
                ChristianF last edited by

                Sag mal Pix, kann man bei Dir Seminare buchen oder so? Wie cool ist das denn 🙂

                Danke!!

                1 Reply Last reply Reply Quote 0
                • B
                  Brati last edited by

                  Sehr genial. Eine "oder" Verknüpfung in den Bedingungen geht nicht auch zufällig?

                  Grüße

                  Brati

                  1 Reply Last reply Reply Quote 0
                  • P
                    pix last edited by

                    Hallo Brati,

                    dieser Teil ist einfach Javascript:

                    (v>100) ? "strom_rot" : "strom_gruen"
                    

                    Man kann auch vorher noch weitere Variablen definieren und verbauen:

                    Wenn v1 oder v2 größer als 100 ist, dann rot, sonst grün.

                    {v1:hm-rpc.0.LEQ0931306.2.POWER; v2:hm-rpc.0.LEQ1234567.2.POWER;(v1>100 || v2>100) ? "strom_rot" : "strom_gruen"}
                    

                    Gruß

                    Pix

                    PS: Das wird alles im Browser auf dem Client errechnet und kann daher bei exzessiver Nutzung die Geschwindigkeit bremsen. Wir hatten das Thema schon im Forum.

                    1 Reply Last reply Reply Quote 0
                    • B
                      Brati last edited by

                      Trotzdem danke, ich habe das bisher über die Sichtbarkeit realisiert und 2 Widgets übereinander liegen. Je nach Zustand wird das jeweilige angezeigt. Den Status lasse ich mir im JavaScript berechnen und setzte dann einen entsprechenden State.

                      Verbraucht vermutlich weniger Ressourcen.

                      Grüße Brati

                      von unterwegs gesendet.

                      1 Reply Last reply Reply Quote 0
                      • C
                        ChristianF last edited by

                        Für alle, die wissen wollen wie es aussieht wenns fertig ist:
                        455_energie.jpg

                        DANKE nochmal für die Unterstützung!

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

                        Support us

                        ioBroker
                        Community Adapters
                        Donate

                        781
                        Online

                        32.1k
                        Users

                        80.7k
                        Topics

                        1.3m
                        Posts

                        3
                        14
                        2514
                        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