How do you display per-room entities?

[prankousky]

Hi everybody,

I am currently trying to create a new lovelace dashboard. My current layout looks like this

Each room has this pattern in custom:button-card, it goes like this

First row: room name¹ | door | window
Second row: temperature | climate entity
Third row (perhaps more) entities to switch (lights, outlets, etc.)

¹ The little ok icon underneath the room name (Arbeitszimmer in this example) will change to an exclamation mark if the motion sensor has currently reported occupancy. I’d like to change this, as these little icons are not something I even notice when even looking at my dash board.

There is one VIP section displaying the most important entities (not per room, but what I like to check on most out of all Home Assistant entities).

My latest attempt was to create cards per domain, not per room. Here is an example

What I really don’t like is that the icons are not colored. My custom:button-card from above will color open doors and windows red (otherwise green), this will only indicate their status via icon, not color.

Then I tried custom:banner-card. It raises the same issue: icons are not colored. Also, I was not able to display and icon and status. For example, Temperatur and Feuchte could either display an icon, or a state, but not both. So that wasn’t an option, either.

Ideally, I’d have a setup like this per room

room name

room door state | room window state | motion (all color coded with icons and last changed state)

temperature (measurement) | climate entity | (if applicable in that room) smoke detector

lights | switches

other entities (media players etc.)

All things I tried either won’t have the features I want (colored icons and last_changed state), or -like my current dashboard (first screenshot)- are too clunky.

How do your dashboards looks regarding these values?

Thank you in advance for your input

[GlennHA (Glenn)]

To help with some of your questions:
For color changes on state, is this what you want?

I use auto-entries card for almost everything and I name my sensors having that in mind.
The entities card has an option to change color based on state.

type: 'custom:auto-entities'
sort:
  method: state
  numeric: true
card:
  type: entities
  title: Motion
  state_color: true
show_empty: false
unique: true
filter:
  include:
    - entity_id: '*motion*'
      options:
        secondary_info: last-changed
    - entity_id: binary_sensor.doorbell
      options:
        secondary_info: last-changed
  exclude:
    - state: unknown
    - domain: automation

I also utilize the custom-button-text-card alot which allows me to change the icon to many possible options based on state (more than binary):

type: 'custom:button-text-card'
title: |
  [[[ return states["sensor.purpleair_description"].state ]]]
subtitle: >
  [[[ return "Air Quaility Index is " + states["sensor.purpleair_aqi_a"].state
  ]]]
icon_size: 55
icon_color: |
  [[[
    if(states["sensor.purpleair_aqi_a"].state > 300){
      return 'white';
    } else if(states["sensor.purpleair_aqi_a"].state > 200){
      return 'white';
    } else if(states["sensor.purpleair_aqi_a"].state > 150){
      return 'white';
    } else if(states["sensor.purpleair_aqi_a"].state > 100){
      return 'white';
    } else if(states["sensor.purpleair_aqi_a"].state > 50){
      return 'black';
    } else{
      return 'black';
    }
  ]]]
icon: |
  [[[
    if(states["sensor.purpleair_aqi_a"].state > 300){
      return 'mdi:emoticon-dead';
    } else if(states["sensor.purpleair_aqi_a"].state > 200){
      return 'mdi:emoticon-cry';
    } else if(states["sensor.purpleair_aqi_a"].state > 150){
      return 'mdi:emoticon-sad';
    } else if(states["sensor.purpleair_aqi_a"].state > 100){
      return 'mdi:emoticon-confused';
    } else if(states["sensor.purpleair_aqi_a"].state > 50){
      return 'mdi:emoticon-neutral';
    } else{
      return 'mdi:emoticon-happy';
    }
  ]]]
font_color: |
  [[[
    if(states["sensor.purpleair_aqi_a"].state > 300){
      return 'white';
    } else if(states["sensor.purpleair_aqi_a"].state > 200){
      return 'white';
    } else if(states["sensor.purpleair_aqi_a"].state > 150){
      return 'white';
    } else if(states["sensor.purpleair_aqi_a"].state > 100){
      return 'white';
    } else if(states["sensor.purpleair_aqi_a"].state > 50){
      return 'black';
    } else{
      return 'black';
    }
  ]]]
large: true
background_color: |
  [[[
    if(states["sensor.purpleair_aqi_a"].state > 300){
      return '#731425';
    } else if(states["sensor.purpleair_aqi_a"].state > 200){
      return '#8C1A4B';
    } else if(states["sensor.purpleair_aqi_a"].state > 150){
      return '#EA3324';
    } else if(states["sensor.purpleair_aqi_a"].state > 100){
      return '#EF8533';
    } else if(states["sensor.purpleair_aqi_a"].state > 50){
      return '#FFFF55';
    } else{
      return '#68FF43';
    }
  ]]]

https://community.home-assistant.io/t/lovelace-button-text-card/210687/8

[prankousky]

Thank you so much!

The state_color: true line was missing from my card, now it looks great.

I will look into the button-text-card tomorrow when I got some spare time, but that looks really interesting as well. I can probably use that for room name and just change color and/or icon depending on whether motion has been detected. Awesome!

UPDATE: @GlennHA

I got the card looking like this by using the code below. Can you tell me how I can format the last_changed value so that it will only display "%H:%M", for example 13:12"? I tried using strftime`, but that will not work.

type: 'custom:button-text-card'
title: Arbeitszimmer
entity: binary_sensor.arbeitszimmer_motion_occupancy
subtitle: >
  [[[

  return states["sensor.arbeitszimmer_messwerte_temperature"].state + " °C " +
  "(" + states["sensor.arbeitszimmer_messwerte_temperature"].last_changed + ")"

  ]]]
background_color: |
  [[[
    if (states["binary_sensor.arbeitszimmer_motion_occupancy"].state == "off"){
    return "green";
    } else {
    return "red";
    }
    
  ]]]

UPDATE: This works "(" + states["sensor.arbeitszimmer_messwerte_temperature"].last_changed.split("-")[2].split("T")[1].split(".")[0] + ")"

[r1kkie]

I only use phone so its created for that only.

[prankousky]

That looks really nice! What cards are you using for this? The dark card at the top that lets you go back to the main view is great! Would you mind sharing your yaml?

[r1kkie]

Thanks, all credits goes to dwainscheeren, https://github.com/dwainscheeren/dwains-lovelace-dashboard, who created this awesome theme/dashboard. I just recreated it with the help of his config to suit my need and desire.

95% is custom button card. The card with the back link is a markdown card.

header:
  card:
    type: markdown
    content: |
      [<font color="White"><ha-icon icon=fas:chevron-left></ha-icon>](/lovelace/[[path]])
      <h3>[[subtitle]]</h3>
      <h1>[[title]]</h1>

Here are my lovelace config files, its a bit messy and lots of templates.

r1kkie/HomeAssistant