Blinkende Gauge bei gewissen zuständen

Allgemein
,
1

Hallo in die Runde
Ich bräuchte etwas hilfe in der Yaml

Ich nutze gauge-card-pro
Die Anzeige funktioniert ohne Problem für die Leistungserfassung in W
Um die blinken zulassen habe ich mir card_mod installiert

Unterschreite ich 150W blink diese grün überschreite ich 4000w blinkt sie rot.

Ich wollte jetzt noch zwischenstände also z.B. von 1500w bis 2500w gelb blinken einfügen.
Das von bis habe ich bis jetzt nicht hinbekommen.

Hat jemand einen Ansatz? Ich hatte einfach “2000 < 3000” getestet das geht aber irgendwie nicht

Gruß Ronny

hier das funktionierende was einfach an die vorhanden Gauge gehangen wurde

card_mod:
style: |
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0.3; }
100% { opacity: 1; }
}
:host {
{% if states('sensor.shellypro3em_78421c58cfa8_phase_c_leistung') | float > 4000 %}
animation: blink 1s linear infinite;
--card-background-color: rgba(255, 0, 0, 0.2); /* Optional: Rötlicher Hintergrund beim Blinken `*`/
{% endif %}
}
:host {
{% if states('sensor.shellypro3em_78421c58cfa8_phase_c_leistung') | float < 150 %}
animation: blink 5s linear infinite;
--card-background-color: rgba(0, 255, 0, 0.3); /`*` Optional: grüner Hintergrund beim Blinken */
{% endif %}
}

:crayon:by HarryP: Code-/Logzeilen formatiert (bitte immer in </> einbinden)
s.a.: (Neues Update & Features - Hier in der Community 🫶)

2

Hallo Ronny,
versuch mal den hier:

card_mod:
  style: >
    @keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
    }

    :host {
    {% if states('sensor.shellypro3em_78421c58cfa8_phase_c_leistung') | float > 4000 %}
    animation: blink 1s linear infinite;

    --card-background-color: rgba(255, 0, 0, 0.2); /* Optional: rötlicher
    Hintergrund beim Blinken `*`/ } :host {

    {% elif  1500 <= float(states('sensor.shellypro3em_78421c58cfa8_phase_c_leistung')) <= 2500  %}
    animation: blink 1s linear infinite;
    --card-background-color: rgba(0, 255, 0, 0.2); /* Optional: grünlicher
    Hintergrund beim Blinken `*`/ } :host {

    {% elif states('sensor.shellypro3em_78421c58cfa8_phase_c_leistung') | float < 150 %}
    animation: blink 1s linear infinite;
    --card-background-color: rgba(0, 0, 255, 0.2); /* Optional: bläulicher
    Hintergrund beim Blinken `*`/ } {% endif %} }

Der Code funktioniert auch mit dem moderneren UIX. Die Farben sind jetzt voll RGB. Kannst Du ja ändern nach persönlichem Geschmack.

VG
Rainer

Ich stelle Hysteresen am liebsten immer so ein:

1500 <= float(states('sensor.dein_sensor')) <= 2500

Funktioniert mit fast allem. Auch mit Datum und Zeit.

Nachtrag:
Die Formatierung ist oben ein wenig verrutscht. KI-optimiert sieht es dann so aus:

card_mod:
  style: |
    @keyframes blink {
      0% { opacity: 1; }
      50% { opacity: 0.3; }
      100% { opacity: 1; }
    }

    ha-card {
      {% set watt = states('sensor.shellypro3em_78421c58cfa8_phase_c_leistung') | float(0) %}
      {% if watt > 4500 %}
        animation: blink 1s linear infinite;
        background-color: rgba(255, 0, 0, 0.2) !important;
      {% elif watt >= 2000 and watt <= 3000 %}
        animation: blink 1s linear infinite;
        background-color: rgba(0, 255, 0, 0.2) !important;
      {% elif watt < 150 %}
        animation: blink 1s linear infinite;
        background-color: rgba(0, 0, 255, 0.2) !important;
      {% endif %}
    }

Such Dir das Beste raus.

3

Danke Rainer

Ich komme erst am Wochenende zum testen

Gruß Ronny

4

Btw. Card_Mod wurde von UIX abgelöst, UIX versteht aber Card_Mod da der ursprüngliche Entwickler nicht mehr an CADR_Mod weiter arbeitet, wie es scheint und es damit möglicherweise ab 2026.8 geben könnte. Diskussion dazu

Sorry, hatte das “I” vergessen UIX.

Cheers Franky