Room cards

Share your Projects! Dashboards & Frontend
1

This is my first post in this community.
I have been using HA for more than 4 years and I miss some a minimalistic card to show area information. I was working a little bit in this project I want to share to you.
It is a set of cards to display the area temperature and humidity with charts and actionable icons that group the status of multiple entities, for example if any light is on.
It can also can define alarms to highlight the card with alarm

image
image796×634 64.9 KB

Now the configuration is manual via yaml, but I will try to add the UI to make it simpler

Any feedback is welcomed

8 Likes
2

This card is nice. So far it looks like things are working except when I choose tap_action and set it to toggle, it does nothing. Am I missing something?

1 Like
3

could you share the card config to understand what tap_action do you mean?

4

This is what I have right now

type: custom:sc-area-card
area: living_room
style: header
tap_action: toggle
summary:
  - name: Light
    icon: mdi:lightbulb
    entities:
      - light.peter_s_room_2
    tap_action: toggle
  - name: Lamp
    icon: mdi:floor-lamp-dual
    entities:
      - light.goofy_lights
  - name: Fire
    icon: mdi:fire-alert
    entities:
      - binary_sensor.living_room_smoke_detector_smoke_detected
  - name: C02
    icon: mdi:molecule-co2
    entities:
      - binary_sensor.living_room_smoke_detector_carbon_monoxide_detected
presence:
  - binary_sensor.office_motion_presence
5

This looks beautiful, better than most room cards I saw so far. I like the easy way to group and display the sensors and the humidity/temperature graph being integrated.

I can’t seem to get the color working with the var(--green) example - it stays black. Where can I find the variables supported?

Could you please also make it adhere to grid_options? Currently, the card background scales correctly, but the card itself does not. I’d like to try and use it at a size of 1 row. Then it could potentially replace my current room entries:
{AB2C7D2B-564D-4292-BD9B-74B87858D006}

6

Thanks for your project :slight_smile:
Is it possible to change circle size and icon size ? And move the circle more in the angle with code or css ?

Or delete circle and icon ? :slight_smile:

Thanks :slight_smile:

7

You could achieve it with CSS. Anyway check the latest version as it have more different "modes"maybe can fit better with your needs

8

Sorry for the delay!

The correct way to do that is:
tap_action:
action: toggle

Anyway check the latest version as it includes the visual UI settings form

9

Hey there,

I Like your card but I´m struggling with the colors.

My card looks like:

image
image840×268 21.9 KB

How could I color it like in your githubs readme?

10

Hi! Latest version includes a visual config editor which includes the color picker

image
image1033×612 41.6 KB

11

Hi,

I tried it - but as soon as I choose a color the graph disappear:

image
image2056×1534 180 KB

Edit: Some Logs of the console:

sc-custom-cards.js?h…=981707476160:46956 Error loading Home Assistant form components: Error: Failed to load components: mwc-button
    at HX (sc-custom-cards.js?h…1707476160:46954:13)
    at async sc-custom-cards.js?h…81707476160:46988:1

sc-custom-cards.js?h…=981707476160:46959 Attempting fallback loading method for HA components
sc-custom-cards.js?h…ag=981707476160:711 Uncaught (in promise) TypeError: e.startsWith is not a function
    at kl (sc-custom-cards.js?h…981707476160:711:12)
    at kn.render (sc-custom-cards.js?h…981707476160:813:15)
    at kn.update (sc-custom-cards.js?h…981707476160:517:20)
    at kn.performUpdate (sc-custom-cards.js?h…981707476160:216:16)
    at kn.scheduleUpdate (sc-custom-cards.js?h…981707476160:204:17)
    at kn._$Ej (sc-custom-cards.js?h…981707476160:200:20)
3
sc-custom-cards.js?h…ag=981707476160:198 Uncaught (in promise) TypeError: e.startsWith is not a function
    at kl (sc-custom-cards.js?h…981707476160:711:12)
    at get chartOptions (sc-custom-cards.js?h…1707476160:45041:15)
    at Ii.render (sc-custom-cards.js?h…1707476160:45117:23)
    at Ii.update (sc-custom-cards.js?h…981707476160:517:20)
    at Ii.performUpdate (sc-custom-cards.js?h…981707476160:216:16)
    at Ii.scheduleUpdate (sc-custom-cards.js?h…981707476160:204:17)
    at Ii._$Ej (sc-custom-cards.js?h…981707476160:200:20)
sc-custom-cards.js?h…ag=981707476160:198 Uncaught (in promise) TypeError: e.startsWith is not a function
    at kl (sc-custom-cards.js?h…981707476160:711:12)
    at get chartOptions (sc-custom-cards.js?h…1707476160:45041:15)
    at Ii.render (sc-custom-cards.js?h…1707476160:45117:23)
    at Ii.update (sc-custom-cards.js?h…981707476160:517:20)
    at Ii.performUpdate (sc-custom-cards.js?h…981707476160:216:16)
    at Ii.scheduleUpdate (sc-custom-cards.js?h…981707476160:204:17)
    at Ii._$Ej (sc-custom-cards.js?h…981707476160:200:20)
21
sc-custom-cards.js?h…ag=981707476160:711 Uncaught (in promise) TypeError: e.startsWith is not a function
    at kl (sc-custom-cards.js?h…981707476160:711:12)
    at get chartOptions (sc-custom-cards.js?h…1707476160:45041:15)
    at Ii.render (sc-custom-cards.js?h…1707476160:45117:23)
    at Ii.update (sc-custom-cards.js?h…981707476160:517:20)
    at Ii.performUpdate (sc-custom-cards.js?h…981707476160:216:16)
    at Ii.scheduleUpdate (sc-custom-cards.js?h…981707476160:204:17)
    at Ii._$Ej (sc-custom-cards.js?h…981707476160:200:20)

and

[Error] Unhandled Promise Rejection: TypeError: e.startsWith("var is not a function. (In 'e.startsWith("var(")', 'e.startsWith("var' is undefined)
	performUpdate (sc-custom-cards.js:218)
	_$Ej (sc-custom-cards.js:200)
12

I also have problems with using this component. :frowning:

type: custom:sc-area-card
area: living_room
style: full
tap_action: toggle
summary:
  - name: Light
    icon: mdi:lightbulb
    entities:
      - light.wb_r52_k1
    actions:
      tap_action:
        action: toggle
  - name: Lamp1
    icon: mdi:floor-lamp-dual
    entities:
      - light.wb_r52_k2
    actions:
      tap_action:
        action: toggle
  - name: Fire
    icon: mdi:fire-alert
    entities:
      - binary_sensor.living_room_smoke_detector_smoke_detected
  - name: C02
    icon: mdi:molecule-co2
    entities:
      - sensor.climate_a_co2
  - name: Presence
    icon: mdi:account-multiple
    entities:
      - binary_sensor.0x54ef441001462a2e_magnet_b2_1_contact
    alarm_entities: []
  - name: Lights
    icon: mdi:lightbulb
    entities:
      - light.wb_r52_k4
    alarm_entities: []
variant: default
color:
  - 55
  - 255
  - 0

ss1
ss11037×442 11.1 KB

13

Did you find a solution for your case?

14

no. Perhaps a little bit.

With this code at least coloring of the icons runs anyway - but no graph…

type: custom:sc-area-card
area: wohnzimmer
summary:
  - name: Lights
    icon: mdi:lightbulb
    state_color: true
    entities:
      - switch.schwippbogen
  - name: Doors
    icon: mdi:door
    state_color: true
    entities:
      - binary_sensor.fenster_wohnzimmer_vorn
      - binary_sensor.fenster_wohnzimmer_hinten_links
  - name: Rollläden
    icon: mdi:window-shutter
    state_color: true
    entities:
      - cover.wohnzimmer_rollo_vorn
      - cover.rollo_wohnzimmer_hinten_links_neu
      - cover.rollo_wohnzimmer_hinten_rechts
  - name: Heizung
    icon: mdi:heating-coil
    state_color: true
    entities:
      - climate.heizung_wohnzimmer_heizung_1
style: full
variant: default
graph:
  entity: sensor.temperature_wohnzimmer
  icon: mdi:air-conditioner
color: "green"
15

Thanks for the feedback. I also opened the issue here

The owner of the component is already in contact → very good!

16

I added the logs to that issue on GitHub. Hope the owner finds a solution for us :wink:

1 Like