Automatische achtergrondkleuren in je kaarten

Wist je dat je in Home Assistant de achtergrond van je kaarten automatisch aan kunt laten passen aan de hand van waarden/status van sensoren?
Dit kan voor overzichten wel eens makkelijk zijn.
Zo heb ik bijvoorbeeld een Bitvavo integratie die mijn cryptovaluta monitored en de balansen weergeeft.
Hier heb ik Trend Helpers aangemaakt die kijken of de cryptomarkt omhoog of omlaag gaat.
Gaat de markt omhoog, dan wijzigt de Trend Up status in Aan. (groen)
Gaat deze omlaag, dan wijzigt de Trend Down status in Aan. (rood)
Blijft deze gelijk dan staan beide statussen op Uit. (oranje)

Aan de hand van deze statussen laat ik de achtergrond van de kaart veranderen van kleur;

  • Gaat de markt omhoog dan wordt de achtergrond groen
  • Gaat de markt omlaag dan wordt de achtergrond rood
  • Blijft de markt gelijk dan wordt de achtergrond oranje

Zonder kleur zie ik aan de waardes namelijk niet wat de trend is van het afgelopen uur. Met de kleuren kan ik dan aan de kaart zien wat er afgelopen uur met de markt gebeurd is.
Hoe heb ik dit voor elkaar gekregen?

Je hebt als eerste een HACS integratie nodig Card-Mod. Installeer deze voordat je verder gaat. Na installatie hoef je hiermee verder niets te doen of te configureren.

Card-Mod integratie

Nu kun je kaarten in je dashboard aanpassen.
Ga naar een dashboard en bewerk deze, kies vervolgens je kaart die je aan wilt passen en ga dan naar de code-editor weergeven.

Je kunt nu een stukje code toevoegen die ervoor zorgt dat je achtergrond veranderd bij het wijzigen van de status van een entiteit.
Voeg onderstaande code toe aan het eind van de bestaande code:

    card_mod:
      style: |
        ha-card {
          background: {% if(is_state('binary_sensor.bitvavo_trend_up','on')) %}
          green {% elif(is_state('binary_sensor.bitvavo_trend_down','on')) %}
          red{% else %}orange{%- endif %};
        }

Dit zorgt ervoor dat de kleuren van de achtergrond automatisch veranderen wanneer een status wijzigt.
LET OP: Ik maak hier gebruik van helpers binary_sensor.bitvavo_trend_up en binary_sensor.bitvavo_trend_down. Kies hier de juiste entiteiten anders werkt het natuurlijk niet.

Dit kun je voor elke status/waarde doen van een willekeurige entiteit in Home Assistant. Bijvoorbeeld temperatuur, of een lamp aan of uit staat etc. etc.
Sla dit op en vervolgens werkt het!

Crypto markt omlaag:

Cryptomarkt omlaag

Crypto markt blijft gelijk:

Cryptomarkt gelijk

En als de cryptomarkt omhoog gaat:

Cryptomarkt omhoog

Cheers! 🙂

Deel dit:

Laat een reactie achter

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Scroll naar boven