Dynamische Icons ab bestimmten Wert farbig darstellen

[Yfkt5A]

Hallo zusammen,

wie oben beschrieben würde ich ein dynamisches Icon ab einem bestimmten Wert farbig darstellen.

Konkreter Fall:
Der Windsack sollte von 0-10m/s "nach oben gehen" und ab 10m/s - da löst mein Windalarm aus - sich rot färben...

Gibt es hierfür ein Beispiel/best practice

Hatte schon mit if probiert, aber irgendwie wird das nicht interpretiert... geht das nur in Widgets?

{% if (wind.alarm == 1) %}[INDENT]{{ basic.symbol('symbol1', 'wind.alarm', '', 'weather_wind.svg', '', '', '#FFFFFF') }}[/INDENT]
  {% else %}[INDENT]{{ icon.windsock('icon3', '', 'wind.geschwindigkeit', '0', '10', '') }}[/INDENT]
  {% endif %}

[bmx]

Du brauchst dazu den aktuellen sich stetig ändernden Wert. Der wird zwischen SmartVISU und SmartHomeNG via Websocket ausgetauscht. Auf die Daten vom Websocket kommst Du per Browser aber nur mit Javascript und das bedeutet eben nur über's Widget Javascript.

[smai]

Das rote Icon ein- und auszublenden ist kein Problem, dies geschieht schon mit dem normalen basic.symbol Widget ohne weitere Bedingung (nur ist deines mit #FFFFFF weiss statt rot).

Um das dynamische Icon auszublenden, kannst du status.collapse benutzen.
Leider lässt sich aber der Vergleichswert nicht angeben, sondern es wird immer beim Wert 0 ausgeblendet und bei jedem anderen Wert eingeblendet. Deshalb must du ein Item machen, dass deinen Alarmstatus invertiert (im Beispiel unten wind.noalarm).

{{ basic.symbol('symbol1', 'wind.alarm', '', 'weather_wind.svg', '', '', 'red') }}
{{ status.collapse('w1', 'wind.noalarm') }}
<div data-bind="w1">
{{ icon.windsock('icon3', '', 'wind.geschwindigkeit', '0', '10', '') }}
</div> 

Ich habe übrigens den Issue #114 erfasst, damit der Item-Wert für ausgeblendet in Zukunft angegeben werden könnte und die Invertierung nicht notwendig wäre.

[Yfkt5A]

Danke für eure schnellen Antworten...

Habs jetzt mit smai´s Vorschlag gelöst...
Hier noch die beiden Items... vielleicht kanns ja noch jemand brauchen:

[wind]
    [[alarm]]
            type = bool
            knx_dpt = 1
            knx_init = ?/?/?
            visu_acl = ro

     #wind.noalarm wird nur für smartVISU benötigt um den Status darzustellen
     [[noalarm]]
            type = bool
            eval_trigger = wind.alarm
            eval = 1 if sh.wind.alarm() == 0 else 0
            enforce_updates = true
            visu_acl = ro

Eine Frage hab ich aber auch noch und zwar hab ich schon öfter versucht es selbst zu lösen bekomms aber einfach nicht hin...
Und zwar hast du die Farbe für den Windalarm jetzt hier fest mit "red" vorgegeben, ich würde dies aber gerne zentral machen. Also so das ich z.B. icon_alert angeben kann, das müsste doch irgendwie in der visu.css zu definieren sein. Hab z.B. schon folgendes probiert:

svg.icon_alert {
    stroke: #FF0000;
    fill: #FF0000;
}

Leider ohne Erfolg

[smai]

Das Attribut fur die Farbe wird direkt in die css-Attribute geschrieben und nicht als class gesetzt (mit Ausnahme von icon1).
Deshalb ist dies leider nicht möglich. Es gibt aber bereits einen Issue #82, dies in Zukunft zu ändern.

Das eval in noalarm könntest du übrigens vereinfachen zu

eval = not(value)