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.
    • C
      ChristianF last edited by

      Hm, das hat nicht funktioniert. War es so gemeint:

      455_rot.jpg

      Viele Grüße

      Christian

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

                          755
                          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