Custom card: Room Card

thanks Kyle,
I guess it is also not possible to give a state icon a color by using the styles option then?

info_entities:
  - entity: binary_sensor.study_sensor_motion
    show_icon: true
    icon:
      state_on: mdi:motion-sensor
      state_off: mdi:human-male
  - entity: binary_sensor.security_bathroom_door_contact
    show_icon: true
    icon:
      state_on: mdi:door-open
      styles:
        color: yellow
      state_off: mdi:door-closed

Maybe should issue a request on Github.

Yep, now it’s working :slight_smile:

Do you have any hint how could I modify the background of the card?
Never mind, card-mod helped :slight_smile:

Since you’re trying to change both the icon and the style, I think you have to switch over to conditions (rather than the simpler state_on and state_off), but this should do what you want (based on a quick test I did here).

  - entity: binary_sensor.study_sensor_motion
    show_icon: true
    icon:
      conditions:
        - condition: equals
          value: 'on'
          icon: mdi:motion-sensor
          styles:
            color: yellow
        - condition: equals
          value: 'off'
          icon: mdi:human-male

Some of the conditional structure has been shifting, so make sure you’re on the most recent version, as I can’t remember what changed when. The yaml above definitely works with v.1.3.0.

2 Likes

@pkscout
Yes, that works nicely indeed.
Gives me a lot more possibilties, thanks.

Can you share how you did it in card mod? Maybe I can look at it and see if it can be a future feature :slight_smile:

@pkscout @GH2user the show_icon bug should be fixed in 1.3.3

1 Like

This is how I managed to do it:

And as there are several other possibilities in card-mod, I made some more :slight_smile:

1 Like

Ah that’s something I can build if you want. Would work like the styles config for entities

I don’t know yet if I’d need in the future. Currently I just started to use card-mod, so form my point of view it’s not a must have feature.

But the possibilty to have action on the whole button would be very useful to me :slight_smile:

Then you can’t add any clickable entities to the card. But I can make it in the future, sure, but it kinda misses the whole idea of the room card

Font-Size for Header
 can we somehow (probably STYLES but I`m not experienced :frowning: ) make smaller font of header ?
for me title are to big and not fit to my all dashboard - thanks in advance !!

The problem is your theme here. Its making the title a little bit bigger. I would recommend tweaking it with card mod plugin or hiding the title: show_title: false.

thanks but my theme have only small modification, even when I switch to default there is no change with size of font
have a look with comparing to other parts of my dashboard
I made only modification on left site where is custom:button-card and all other thing on my dashboard is default font size but room-card have bigger header.

anyway I will try as you wrote with card mod :slight_smile: thanks !

—=== EDIT ===—
I solved - maybe want to use it also :slight_smile:

style: |
.card-header {
font-size: 18px;
}

image

2 Likes

Glad that worked for you. My OCD keep telling me to tell you the alignment of the title is not correct now

@marcokreeft87 After the latest update i.e. v1.3.6 icon conditions are not working

  1. The below was working before the update but after the update its not working
- entity: switch.fountain
                name: Fountain
                icon:
                  conditions:
                    - icon: mdi:fountain
                      condition: equals
                      attribute: state
                      value: 'off'
                      styles:
                        color: red
                    - icon: mdi:fountain
                      condition: equals
                      attribute: state
                      value: 'on'
                      styles:
                        color: skyblue
  1. for input_boolean, the icon state_on: and state_off: doesn’t work
      - entity: input_boolean.test
        name: Test
        show_icon: true
        icon:
          state_on: mdi:ab-testing
          state_off: mdi:abacus
  1. Can you please add a feature that will enable states of an entity to replace the name of the entity. e.g like in screenshot below the cpu temp is shown in state below the icon. so if we want it in place of name that would be a great option.
     - entity: sensor.cpu
        name: Cpu
        show_icon: true
        show_state: true
        icon:
          state_on: mdi:ab-testing
          state_off: mdi:abacus
      - entity: sensor.cpu
        name: {{ states("sensor.cpu") }}
        show_icon: true
        icon:
          state_on: mdi:ab-testing
          state_off: mdi:abacus

Screenshot 2022-09-13 at 8.31.06 AM

1 Try using it without the state attribute
2 Thats because input_boolean dont have an ‘off’ and ‘on’ state. You need to use the conditions for that
3 What you are trying to is showing the state as title? Why not just use show_state?

  1. I just saw there is an issue also opened on GitHub regarding this.

  2. Yes I was using conditions for input boolean with attributes which was working fine until the last update, it is no longer working in v1.3.6

  3. If you see the screenshot above I am using show_state for cpu in third column which is showing the temp just fine. I am requesting if instead of using show_state: true which will show the state below the icon we can do something like this so that all the icon aligns (if we don’t want the show_state: true for other icons also). I hope I am making some sense :slightly_smiling_face:

- entity: sensor.cpu
        name: {{ states("sensor.cpu") }}
        show_icon: true

1 is working fine. If someone tells you how to use it please don’t say it isnt so.
2 Yes, and software changes, so now you have adjust your config to it.
3 Is just a weird request imo, because how would you know which sensor that is ? And why not just hide the name and use the build in state display. Room card wont have this functionality in the near future.

  1. I am not relying on someone
 I myself using the below code which was working before the update.
- entity: switch.fountain
                name: Fountain
                icon:
                  conditions:
                    - icon: mdi:fountain
                      condition: equals
                      attribute: state
                      value: 'off'
                      styles:
                        color: red
                    - icon: mdi:fountain
                      condition: equals
                      attribute: state
                      value: 'on'
                      styles:
                        color: skyblue

kindly check if its working for you
 The attribute: state was working before the update but now not working

Are you even reading what I am posting? I told to not use the attribute in the condition, then it will work.