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

      Das klingt spannend, probiere ich morgen direkt aus. Danke!

      Gesendet von meinem Nexus 7 mit Tapatalk

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

                            465
                            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