Custom card: Room Card

Thanks for the example !

Great news for everyone with the custom element doesnt exist error. Thnx to @scottt732 this is fixed in v1.08.00

With version v1.08.00, All my room cards disapeared. I have made a total refresh in chrome. Help

Yeah there was a bug in there. Should be fixed with new version

You can’t deal with entity state dependent color. will you help?

info_entities:

  • entity: binary_sensor.czujnik_otwarcia_drzwi_salon_contact
    show_icon: true
    icon:
    state_on: mdi:door-sliding-open
    state_off: mdi:door-sliding-lock
  • entity: binary_sensor.czujnik_otwarcia_drzwi_salon_contact
    show_icon: true
    icon:
    state_on: mdi:window-shutter
    state_off: mdi:window-shutter-open

Yeah still trying to figure that one out. Unfortunately I don’t have that much spare time lately, but I hope to get some time for it in the next couple of weeks

Do you want to gave something like this (color code is: Grey window is close, green window is closed but should be opened to dry the room, yellow means open, red means close the window otherwise humidity will increase).

To get this result I use a template that creates four states for the sensor entity (in german … oeffnen, schliessen, offen, geschlossen) and based on this I’m using template for the info-entity

  - entity: binary_sensor.az_fenster_r_contact
    show_name: false
    show_icon: true
    icon:
      template:
        styles: >
          if (states["sensor.statusfensteraz"].state == 'schliessen' )
          return 'color: darkred';  if
          (states["sensor.statusfensteraz"].state == 'oeffnen' ) return
          'color: darkgreen'; if (states["sensor.statusfensteraz"].state ==
          'geschlossen' ) return 'color: grey'; if
          (states["sensor.statusfensteraz"].state == 'offen' ) return
          'color: darkorange';
2 Likes

Hi, im new to room cards and try to set it up. unfortunately, the info entities are not shown next to the room name. Is there something im doing wrong?

type: custom:room-card
title: Wohnzimmer
entity: light.wohnzimmer_all
icon: mdi:lightbulb-outline
show_icon: true
tap_action:
action: toggle
entities:
  - entity: light.wohnzimmer_all
    name: Wohnbereich
info-entities:
  - sensor.1_nord2_simon_battery_level

you missed the 'entity: ’ in front of the info entity sensor (what you used correctly in the entities entry) … needs to be

  • entity: sensor.1_nord2_simon_battery_level

After trying for some time I figured out how to combine jinja templates to define a color gradient for temp/humidity and windows status colors globally and template sensors to translate those into entities that can be used in the room card to colorize info entities using only a single line in the custom room card (or two due the template: statement):

          template: |
            return states["sensor.bathhumidcolor"].state;

The big advantages are that this allows tweaking of the colors by changing only one entry in one file and to use a finer gradient with more entries if needed - meanwhile I’m using 9.

To get this working you need to:

  1. create a directory custom_templates in config root directory of your home assistant
  2. In this directory create a file tools.jinja
  3. Add the following lines in this file
{% macro color_humidity(entity_id) %}
{% set status = states(entity_id) %}  
    {% if status == 'unknown' %} color: darkgrey 
      {% else %}
      {% if status| float >= 70 %} color: red
        {% elif status| float >= 65 %} color: darkorange
        {% elif status| float >= 60 %} color: orange
        {% elif status| float >= 55 %} color: #DDDD00
        {% elif status| float >= 50 %} color: yellowgreen
        {% elif status| float >= 45 %} color: green
        {% elif status| float >= 40 %} color: #DDDD00
        {% elif status| float >= 35 %} color: darkorange
        {% elif status| float < 35 %} color: red
      {% endif %}
    {% endif %}
{% endmacro %}        

{% macro color_temperature(entity_id) %}
{% set status = states(entity_id) %}  
    {% if status == 'unknown' %} color: darkgrey 
      {% else %}
      {% if status| float >= 26.5 %} color: red
        {% elif status| float >= 25.5 %} color: orangered
        {% elif status| float >= 24.5 %} color: orange
        {% elif status| float >= 23.5 %} color: #FFAE42
        {% elif status| float >= 22.5 %} color: #DDDD00
        {% elif status| float >= 21.5 %} color: yellowgreen
        {% elif status| float >= 20.5 %} color: green
        {% elif status| float >= 19.5 %} color: turquoise
        {% elif status| float < 19.5 %} color: blue
      {% endif %}
    {% endif %}
{% endmacro %}   
  1. In your templates.yaml (or configuration.yaml if you are not using an included templates.yaml) add entries like those (using your temperature/humidity entities of course) for each info entity that should have custom color created using jinja (I suggest to use unique_id to be able to change stuff from the gui, I started my custom scheme before I saw that some people are using UUID generators - with my style I need to ensure they are unique, with the generators v1 the will be unique as long as you create them on the same computer):
  - sensor:      # !!!!! remove this line if you already have defined sensors and add these lines below the existing sensors !!!!

    - name: "BathTempColor"
      unique_id: "BathTempColor_temp"
      state: >
        {% from 'tools.jinja' import color_temperature %}
        {{ color_temperature('sensor.bath_hygro_temperature') }}

    - name: "BathHumidColor"
      unique_id: "BathHumidColor_temp"
      state: >
        {% from 'tools.jinja' import color_humidity %}
        {{ color_humidity('sensor.bath_hygro_humidity') }}
  1. Now you can simply use this setup in the room card to get the colors defined in tools,jinja:
  - type: custom:room-card
    title: Bath
    info_entities:
      - entity: sensor.bath_hygro_humidity
        format: precision0
        styles:
          template: |
            return states["sensor.bathhumidcolor"].state;
      - entity: sensor.bath_hygro_temperature
        format: precision1
        styles:
          template: |
            return states["sensor.bathtempcolor"].state;
1 Like

Thanks for the reply. But it also does not work. I’m also confused here, because the wiki/configure example does not include the “entity:” in front of the temperature sensors

Is the the sensor name correct? What isthe sensor value when you search for it in the development section?

in my setup with jinja that I posted yesterday you can see how I defined it and that is using -entity:

Question @marcokreeft87

Looks like the when using custom room card templates they are only evaluated when:

a) any entity in the section changes (My custom wimdow colors are only updated correctly when temp or humidity value of the same room changes - but not if ONLY the value of the window icon color is changing
b) I reload the whole dashboard

Any idea if this is due to the fact that HA is not eveluating those entries per default or if there is a possibility to force an updated also when the icon color entry changes?

Regards Guenther

@marcokreeft87

Interestingly the issue with the missing ‘live’ update of the colors only happens for the icon entities, those that show values seem to work.

For the icon entities the update of the icon color only works when the evaluation of the color is done directly in the card using if statements as shown in the manual and as I did i my first setup.

Is it possible that this is a real issue and that this also is the reason for the icon coloring problems that were reported by other people?

Yes the name(s) is correct. The values also display the correct temperature/humidity. I’d dies not matter if I use “- entity:” or not. I also do not get a error message.

It looks for all entities given in the config. So if another card in the room card cards section doesn’t have a “entity” property in config it cannot know when to update this card.
Does that help?

You sure the entities exist? If the card can’t find the entity it doesn’t display the entity.
And yes, “entity:” isn’t required when there are no additional configuration params

Yes I’m sure. I also used the auto complete function to add this. I also tried a different sensor
Thanks for the clarification!

What attributes does the sensor have?

Model type
Connection type
Rssi device
Rssi peer
ID
Is group

At least this is what the entity shows. But how is it possible that it displays the temperature?

But even a different sensor like my MacBooks battery state which has the attribute Current Capacity is not displayed