Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[ChristianF]

Hallo,

kann man das basic Widget Value List HTML Style irgendwie nicht nur mit absoluten Werten, sondern auch mit größer und kleiner als beeinflussen? Beispiel: ich habe einen Wert, der sich regelmäßig ändert (zB eine Leistungsangabe aus einer Mess-Steckdose von HM), und ich möchte gern dass der Hintergrund des Widgets sich ab einem bestimmten Wert auf rot ändert (zB Wert >100 dann rot) und sonst grün ist (Wert <100 dann grün).

Habe das schon ausprobiert, funktioniert aber leider nicht :(

Hat jemand eine tolle Idee?

Danke und viele Grüße

Christian

[pix]

Hallo Christian,

das geht mit Bindings in VIS (siehe VIS Github Doku)

Im CSS Feld für den Hintergrund zB:

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

Gruß

Pix

EDIT 15.10.2016: korrekte Umsetzung mit Anführungszeichen siehe hier: http://forum.iobroker.net/viewtopic.php … 899#p36948

[ChristianF]

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

Gesendet von meinem Nexus 7 mit Tapatalk

[ChristianF]

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

Viele Grüße

Christian

[pix]

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

[ChristianF]

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

[pix]

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

[ChristianF]

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!!!

[pix]

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

[ChristianF]

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

Danke!!

[Brati]

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

Grüße

Brati

[pix]

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.

[Brati]

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.

[ChristianF]

Für alle, die wissen wollen wie es aussieht wenns fertig ist:

DANKE nochmal für die Unterstützung!