Gekleurde icoonen in dashboard

Wij gebruiken voor ‘ons huis’ naast de automatiseringen ook wel eens een dashboard en bijna altijd doen we dat via onze mobiele telefoon. Daar hebben we dit dashboard voor gemaakt.

De icoonen in de tegel kaarten op deze weergave gebruiken de status kleur om aan te geven dat de entiteit die in de tegel kaart gebruikt is, aan staat. Dus als een lamp(groep) gebruikt is voor de tegel-kaart geeft het een indicatie of de lamp(groep) aan of uit is.

Nu zou ik eigenlijk een andere kleur willen zien als er een raam of deur(groep) open staat in de betreffende ruimte. Echter kan dat niet ingesteld worden met een icon-color als gebruik gemaakt wordt van een tegel-kaart. (dat zou wel met een mushroom-template kaart kunnen of met de HACS card_mod integratie)

Echter… er kan in elke kaart een voorwaarde voor zichtbaarheid ingesteld worden, ook voor een tegel-kaart! Dus…

De standaard tegel-kaart voor verlichting in Kantoor:

met als Zichtbaarheid-voorwaarde dat het raam gesloten is:

Als nu het raam is gesloten is, zal deze kaart getoond worden en kan ik dus zien of het licht aan of uit is. Via de Interacties kan het licht tevens. aan of uit geschakeld worden.

De tegel voor open raam detectie:

Ik maak een duplicaat van deze tegel maar gebruik als entiteit het raam en geef aan dat de kleur rood moet zijn.

met als Zichtbaarheid-voorwaarde dat het raam open is:

Zet de tegel naast de ‘standaard’ tegel en de nieuwe tegel vervangt de originele zodra het raam open staat.

Tip: gebruik lampgroepen en raam/deurgroepen voor ruimtes met meerdere lampen en ramen of deuren!


Card-Mod integratie

Mocht je jezelf dapper genoeg vinden om met yaml-code aan de gang te gaan, is er de card-mod HACS integratie waarmee diverse instellingen mogelijk zijn, ook de icoon kleuren. Voorwaarde is dat HACS geïnstalleerd is, en via HACS de card-mod integratie is geladen.

Het voordeel van deze methode is dat je niet twee verschillende kaarten in je dashboard nodig hebt. De kleuren worden ingesteld via de status van de lichten en de raam/deur sensors. Dus, één tegel-kaart in het dashboard voor bijvoorbeeld ‘Kantoor’

waarin de status verborgen wordt en de naam samengesteld is aan de hand van de ruimte, in dit geval dus ‘Kantoor’. Als icoon wordt ‘mdi:desk’ gebruikt en dan ziet het er zo uit:

Via Interacties wordt het tikgedrag zo ingesteld dat met het icoon de verlichting omgeschakeld wordt en via de tegel zelf wordt naar het dashboard voor het Kantoor genavigeerd.

Via ‘Code-editor weergeven‘ kan de yaml-code bewerkt worden en hier wordt de volgende code toegevoegd om de kleuren van het icoon aan te passen:

card_mod:
  style: |
    :host {
      --card-mod-icon-color:
    {%- if is_state('binary_sensor.raam_kantoor','on') %}
      red
    {%- elif is_state('light.verlichting_kantoor','on') %}
      orange
    {%- else %}
      grey
    {% endif -%}

Dus, als het raam open staat is het icoon rood, zoniet dan wordt gecontroleerd of het licht aan staat, dan wordt het icoon oranje, en als alles dicht en uit is, wordt het icoon grijs. De prioriteit van de kleuren is dus:

  • raam open/dicht – rood
  • verlichting aan/uit – oranje

Als dus het licht aan is en het raam is ook open, dan wordt het icoon in het rood weergegeven omdat dit de prioriteit heeft.