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

7 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: