Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[dietlman]

Ich hab zwar hier schon einen Beitrag gefunden wo über dieses Thema diskutiert wurde, allerdings konnte ich keine Lösung für mein Problem finden.
Ich habe eine Visualisierung meiner PV Anlage gemacht und benutze dafür auch SVG Images. Diese Images würde ich gerne je nach Wert (Leistung - Verbrauch usw.) farblich verändern. Ich habe dazu schon mit den verschiedenen "jqui-mfd" widgets experimentiert, konnte aber kein passendes widget finden. Vielleicht kann da jemand helfen. Anbei auch ein Screenshot meiner VIS damit man sich besser vorstellen kann was ich meine.
Wie gesagt es geht um die Icons in den Ecken (Speicher, Hausnetz usw.) Die Werte kommen in Watt und %

[sigi234]

Sie dir das mal an. Ist ein Widget.

[{"tpl":"tplMfdCustom10","data":{"oid":"hm-rpc.1.xxxxxxx.4.BATTERY_STATE","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,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","asButton":true,"icon0":"/icons-mfd-svg/measure_battery_0.svg","icon1":"/icons-mfd-svg/measure_battery_0.svg","icon2":"/icons-mfd-svg/measure_battery_0.svg","icon3":"/icons-mfd-svg/measure_battery_0.svg","icon4":"/icons-mfd-svg/measure_battery_0.svg","icon5":"/icons-mfd-svg/measure_battery_0.svg","icon6":"/icons-mfd-svg/measure_battery_0.svg","icon7":"/icons-mfd-svg/measure_battery_0.svg","icon8":"/icons-mfd-svg/measure_battery_0.svg","icon9":"/icons-mfd-svg/measure_battery_0.svg","icon10":"/icons-mfd-svg/measure_battery_0.svg","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,"min":"1,5","max":"3,2","name":"Wohnzimmer HK2","show_active":false,"invert_value":true,"iconColor10":"#0fcc36","iconValue0":"1,5","iconColor0":"#b7061a","iconValue1":"1,5","iconColor1":"#b7061a","iconValue2":"1,6","iconValue3":"1,6","iconValue4":"1,6","iconValue5":"1,6","iconValue6":"1,9","iconValue7":"1,9","iconValue8":"2,5","iconValue9":"3,0","iconValue10":"3,2","iconColor2":"#b7061a","iconColor3":"#fecdcd","iconColor4":"#fecdcd","iconColor5":"#fecdcd","iconColor6":"#bcfbc2","iconColor7":"#bcfbc2","iconColor8":"#9bfa6b","iconColor9":"#bcfbc2","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":"205px","top":"186px","width":"35px","height":"35px","z-index":"2"},"widgetSet":"jqui-mfd"}]

[dietlman]

@sigi234 Danke, das hilft schon mal weiter, werd heute Abend mal damit testen und dann berichten.

[dietlman]

kurzer Bericht; das Widget funktioniert genauso wie ich mir das vorgestellt habe für die Batterieladung. Ich habe jetzt versucht dieses Widget auch für meine anderen Icons zu verwenden, dort sind die Werte allerdings Watt, und da kann ich leider nicht einstellen dass er z.b bei einem -Wert ein anderes Image nimmt als bei einem +Wert. Vielleicht gibt es da noch ein anderes Widget wo man das abbilden kann.
Vielen dank nchmal für diese Info!

[Frank_y]

Ich habe ähnliche Probleme immer über die Bedingung 'Sichtbarkeit' der Widgets gelöst. Einfach zwei Widgets (z.B. eins in rot, eins in grün) genau übereinander anordnen und die Bedingung so setzen, dass nur eines sichtbar ist.
Nicht die feine Art, aber funktioniert

[dietlman]

@Frank_y das ist auch eine super Idee, welches widget hast du dafür verwendet?

[RappiRN]

Die Sichtbarkeit kannst du bei jedem Widget in Abhängigkeit eines Datenpunktes einstellen, ist glaub ich der zweite Punkt in den Widgeteinstellungen.

Enrico

[Frank_y]

Hier mal ein Beispiel für einen Button, den ich nur einblende, wenn der STATE==1 ist.
Bei STATE==0 blende ich einen anderen Button ein.

[dietlman]

vielen Dank für die Anleitung. Ich habe das soweit jetzt hinbekommen, allerdings sind meine Werte "Watt" und diese ändern sich auch von + auf - usw. Damit musste ich doch ein wenig herumspielen bis ich es dann so hatte wie ich es wollte.