Custom card: Room Card

marcokreeft87 · February 4, 2023, 9:02pm

The card isn’t designed for nesting. And why would you do that?

marcokreeft87 · February 4, 2023, 9:22pm

Malkierian:

 - type: custom:room-card
    title: Controls
    entities:
      - entity: light.diy_charge_on_off
        name: DIY
        styles:
          color: green
          font-size: 14px
        state_color: true
        show_icon: true
        icon: mdi:battery-plus
        tap_action:
          action: toggle

The font-size styles will not work because in the css of the card the font size is set on the span inside the entity div .

Maybe this info will help you set the font size with card-mod

And the color is working because the css of the card is not setting the font color on that level, but on the card level. Thats why the styles applied to the entity will override the styles applied on the card. If that makes sense. And if not, play around with the developer tools in your browser, that will help you understand.

GH2user · February 5, 2023, 9:44pm

I’m using HA2023-02 and noticed that while adding a history-graph to the room card (in the cards section) it doesn’t refresh the card in place but collapses it and then re-renders. This happens every 5-10sec with my graph.
Most likely this is due to the new auto-updating feature of the history-graph I guess.

Anyone else noticed this behaviour?

C.G.B.Spender · February 24, 2023, 6:13am

Hi,
since about last 2 ha versions my vacuum icon inside room-card misbehaves slightly, I have it set up to change colors depending on what the vacuum is doing, but now on the 1st load of the HA dashboard it is grey, and will not update to color of current state until I reload the dashboard by actually reloading it or swapping to different view and back to the 1st one.

Just a small cosmetic issue, but maybe you’ll have some advice. I only noticed it because 99% of time it’s either green (ready to go) or orange (already vacuuming), and suddenly it was grey on occassions.

Relevant code:

          - entity: vacuum.robovac
            name: Vacuum
            show_icon: true
            state_color: true
            tap_action:
              action: more-info
            show_state: false
            icon:
              conditions:
                - condition: equals
                  entity: vacuum.robovac
                  attribute: status
                  value: docked
                  styles:
                    color: orange
                - condition: equals
                  entity: vacuum.robovac
                  attribute: status
                  value: returning
                  styles:
                    color: purple
                - condition: equals
                  entity: vacuum.robovac
                  attribute: status
                  value: error
                  styles:
                    color: red
                - condition: equals
                  entity: sensor.robovac_battery_level
                  value: 100
                  styles:
                    color: green

full card code here: PrivateBin

marcokreeft87 · February 24, 2023, 11:16pm

It’s probably because it hasn’t loaded yet and has no state or not one you have provided in the conditions.

C.G.B.Spender · February 25, 2023, 8:23am

I thought that’s it too, but those are all the states exposed by it. I’ve also found out it’s enough to open the more-info dialog of the vacuum to force the dashboard to “read” its state.

To debug, I added a new Markdown card into the dashboard

  - type: markdown
    content: |-
      {{ state_attr('vacuum.robovac', 'status') }}

and funnily enough this alone “fixed” the issue as it appears that Markdown card forces the dashboard to read the status of the vacuum on each load I guess? I will update you if I happen to manage to catch the dashboard in a state where the icon would be gray and what will the status of the vacuum be then.

Sorry about bothering you with these minuscule issues, but I just like how my ui looks and use it often so immediately notice when any small thing is off

edit: just a train of thought:

the vacuum has the normal state attribute which is only off and on and when it’s off it’s grey
while the status attribute of the vacuum is docked the state is still off, in any other status state it is on

Couldn’t it then be, that somehow the dashboard confuses which attribute to read 1st? As in. normally if I put the entity into HA dashboard it would be either gray when off and yellow when on, but I force additional colors through your card via a different attribute

if that makes sense

C.G.B.Spender · February 28, 2023, 2:55pm

I managed to capture it where the state is known (docked) yet the icon is gray. It is virtually identical in the behaviour of the media player icon not updating I had in comment Custom card: Room Card - #284 by C.G.B.Spender

As for reproducibility I can’t manage to reproduce, but I have observed it only potentially happens if the dashboard is loading for the very 1st time, i.e.I open HA on phone and if first I see the blue HA logo as the app loads means it wasn’t in the background = the icon will likely be gray. Any subsequent loads of the dashboard show correct color, however it’s not 100% as when I forcibly kill the app and open it again it might be correct color, it might be gray.

you can see the gray icon in the card, under it the card that says docked is a markdown card from the post above (which also has the code for whole card)

edit: although the screenshot is from phone it does happen on desktop too so it’s not related to the android app

tsukiall · March 1, 2023, 6:28am

I have noticed a similar problem with a couple of buttons in a grid that I’ve stuffed in some room cards. One button has a shelly relay that controls some lights as the entity, and the other two are scripts that fire the vacuum in the different rooms. All three change state color only when I refresh the page, nothing happens when I’m interacting with them. Again, both on desktop and the android app like your issue.

marcokreeft87 · March 1, 2023, 8:12pm

Hmm could it be that the state of that entity takes longer to load?

C.G.B.Spender · March 2, 2023, 12:06am

I do not think so, I tried scrolling around a bit when it happens and it remains gray, until a reload of the dashboard happens or if I click on the entity itself (which in my config opens the more-info dialog). It worked perfectly fine until about 2 HA versions back though, then I started noticing this so it is possibly some change in HA that exacerbates the issue.

tsukiall · March 2, 2023, 6:33am

I’ve tried creating the same button grid as a separate card outside of the room card, and that one updates correctly when I toggle the lights:

I think mine is a time thing, if I leave a tab with HA alone for a while it updates in the room card as well, but there’s something off for sure since it updates instantly outside the card.

Could there be something like an optimistic response, switching the state to what it would expect from the next state report, that for some reason doesn’t happen in the card?

C.G.B.Spender · March 12, 2023, 7:58am

Hi, another small issue I have is with the Thermal Perception entity

    info_entities:
      - sensor.thermal_comfort_perception

I would like it to show what’s highlighted in green, not what is highlighted in purple (I hope that makes sense).

Not sure if I’m getting the terms right, but instead of the attribute I’d like it to show it’s “state name?”. Basically I’d like to see Very Comfortable on the room card instead of very_comfortable.

marcokreeft87 · March 13, 2023, 8:41am

I get your point. Can you make an enhancement request here :

ossodiseppia · March 22, 2023, 9:59pm

Thank you for this most wonderful card, @marcokreeft87. I am a novice at anything to do with Home Assistant. It took me a couple of hours to work through this thread and get a simple room card made.

Your patience with all of the questions is very much appreciated. Had you not handled this the way you did, I would not have been able to do this.

Thank you!

marcokreeft87 · March 22, 2023, 10:21pm

Glad to help

ptmuldoon · April 7, 2023, 1:30am

I just came across this room card, and slowly working on creating a home dashboard. And I really like this card!!

Is there a way to have the ‘pop up’ when you press a light or fan entity open up to a rgb color wheel, fan-control, etc? currently the default ‘pop up’ takes me to an on/off and slider. Can that be modded in any way?

Thanks,
PT

pkscout · April 7, 2023, 10:16am

You can use browser mod to do that.

Here’s an example of a card I defined so that when I click on the bedroom_occupied sensor I get a card displaying the controls for the room instead of the normal info card.

type: custom:popup-card
dismissable: true
card:
  type: entities
    entities:
        - entity: light.bedroom_closet_bulb
        - type: custom:slider-entity-row
          entity: cover.bedroom_left
        - type: custom:slider-entity-row
          entity: cover.bedroom_center
        - type: custom:slider-entity-row
          entity: cover.bedroom_right
  show_header_toggle: false
entity: binary_sensor.bedroom_occupied
title: Bedroom Controls

marcokreeft87 · April 7, 2023, 5:51pm

Easiest way is to check out actions in the wiki: Configuration · marcokreeft87/room-card Wiki · GitHub

7h3ju57 · April 15, 2023, 4:37pm

I cannot for the life of me get icon colors to work. running HA 2023.4.4

type: custom:room-card
title: Kitchen
show_icon: true
entity: light.light_kitchen_underglow
rows:
  - entities:
      - entity: light.light_kitchen_underglow
        name: Bureau
        styles:
          color: green
        state_color: true
        show_icon: true
        icon:
          conditions:
            - condition: equals
              value: 'on'
              icon: mdi:led-strip-variant
              styles:
                color: orange
        tap_action:
          action: toggle

marcokreeft87 · April 15, 2023, 7:32pm

I think the styles is blocking the conditions. Can you try it without?