Room Data at Your Fingertips
Built with the tools and technologies:
A custom card for Home Assistant that provides a comprehensive room overview, including climate information, device states, and problem indicators. The card displays room temperature, humidity, connected devices, and entity states in an organized grid layout.
- Displays room temperature and humidity
- this can be turned off with an optional flag
- Visual indicators for temperature and humidity thresholds
- Border colors indicate climate status:
- Red: Temperature above threshold (default: 80°F)
- Blue: Humidity above threshold (default: 60%)
- Color-coded icons indicating entity states
- Interactive icons with tap/hold actions
- Climate entity colors:
- Auto: Green
- Cool: Blue
- Heat: Red
- Dry: Yellow
- Heat/Cool: Purple
- Fan Only: Green
- Off: Grey
Entity Off Color attribute. Shows lightly in a different color than the default.
- Automatically detects entities labeled as "problem" in the area based on area and labels
- Shows count of problem entities
- Color-coded indicator:
- Red: Active problems
- Green: No active problems
- Shows total number of devices in the room
- Shows total number of entities in the room
- Automatic entity discovery based on area
- Open HACS in your Home Assistant instance
- Click the menu icon in the top right and select "Custom repositories"
- Add this repository URL and select "Dashboard" as the category
https://github.com/homeassistant-extras/room-summary-card
- Click "Install"
- Download the
room-summary-card.jsfile from the latest release in the Releases tab. - Copy it to your
www/community/room-summary-card/folder - Add the following to your
configuration.yaml(or add as a resource in dashboards menu)
lovelace:
resources:
- url: /local/community/room-summary-card/room-summary-card.js
type: module
Add the card to your dashboard using the UI editor or YAML:
Slowly I'm enabling all the features in the card editor. Note that as things get converted to there some yaml settings may move / rename.
This is the most minimal configuarion needed to get started. See below for advanced usage.
type: custom:room-summary-card
area: living_roomThe card will automatically:
- Display count + status for any entity labeled with "status" that is in the area
- Display fan/light entities based on area naming
- Update in real-time as entity states change
- Light up icons when entities are in 'on' state, 'True', or a positive numeric state
Most of these are optional if you setup the entities a certain way using labels and attributes. For example, see my HA configuration for my dashboard home page: 01-home.yaml
| Name | Type | Default | Description |
|---|---|---|---|
| area | string | Required | The area identifier for the room (e.g., 'living_room', 'kitchen') |
| entity | string | object | light.<area>_light |
Main entity for the room |
| entities | array | See below | Additional entities to display |
| temperature_sensor | string | sensor.<area>_climate_air_temperature |
Temperature sensor entity ID |
| humidity_sensor | string | sensor.<area>_climate_humidity |
Humidity sensor entity ID |
| navigate | string | area name (dash-separated) | Custom navigation path when clicking the room name / icon |
| features | list | See below | Optional flags to toggle different features |
| Name | Type | Description |
|---|---|---|
| hide_climate_label | flag | Show the climate label or not |
| hide_area_stats | flag | Show the area statistics label or not |
| exclude_default_entities | flag | Exclude the default light/fan entities |
| skip_climate_styles | flag | Disable climate-based color coding |
By default, the card will include (if found):
- Room light (
light.<area>_light)- this is also the main entity of the card by default for coloring
- Room fan (
switch.<area>_fan) unlessremove_fanis true
Entities can be specified in two ways:
- Simple string format:
entities:
- light.living_room_lamp
- switch.living_room_tv- Detailed configuration object:
entities:
- entity_id: light.living_room_lamp
icon: mdi:lamp
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none| Name | Type | Default | Description |
|---|---|---|---|
| entity_id | string | Required | Entity ID in Home Assistant |
| icon | string | entity default | Custom MDI icon |
| tap_action | object | {action: "toggle"} |
Action on single tap |
| hold_action | object | {action: "more-info"} |
Action on hold |
| double_tap_action | object | {action: "none"} |
Action on double tap |
Available actions for tap_action, hold_action, and double_tap_action:
| Action | Parameters | Description |
|---|---|---|
| toggle | none | Toggle entity state |
| more-info | none | Show more info dialog |
| navigate | navigation_path | Navigate to a different view |
| none | none | Disable the action |
Example action configuration:
tap_action:
action: navigate
navigation_path: /lovelace/living-roomYou can add attributes to entities to customize the functionality further.
| Name | Type | Default | Description |
|---|---|---|---|
| on_color | string | yellow | Color when the entity is active |
| off_color | string | theme off color | Color when the entity is not active |
| temperature_threshold | number | 80 | Threshold to show red border. |
| humidity_threshold | number | 60 | Threshold to show blue border. |
| icon | string | entity default | Custom MDI icon |
You can customize entity attributes several ways.
For entities you don't control, use customizations.
customize:
switch.garage_opener_plug:
on_color: green
off_color: red
switch.water_softener_plug:
on_color: green
off_color: red
sensor.garage_climate_air_temperature:
temperature_threshold: 90
sensor.shed_climate_air_temperature:
temperature_threshold: 90
humidity_threshold: 70For entities you template, just set the attributes then.
sensor:
- name: Printer Left On
unique_id: b4081d9f-24f3-4083-9fa6-70c30a432c26
state: "{{ not is_state('sensor.mfc_7860dw_page_counter', 'unavailable') and (now() - states.sensor.mfc_7860dw_page_counter.last_updated) > timedelta(minutes=5) }}"
icon: mdi:printer-alert
attributes:
icon: mdi:printer-alert
on_color: blueImportant
Using this setting requires a label.
Give entities a label of "problem". These entities will be tracked and the icon will show red if any are "on" or have a positive state. It will show green otherwise. In both cases it will show the total count of tracked problem entities.
type: custom:room-summary-card
area: living_roomtype: custom:room-summary-card
area: living_room
entity:
entity_id: light.living_room_main
icon: mdi:ceiling-light
tap_action:
action: toggle
hold_action:
action: more-info
entities:
- entity_id: switch.living_room_tv
icon: mdi:television
- light.living_room_lamp
- switch.living_room_fan
temperature_sensor: sensor.living_room_temperature
humidity_sensor: sensor.living_room_humidity
skip_climate_styles: false
navigate: /lovelace/living-room
features:
- hide_climate_labeltype: custom:room-summary-card
area: office
remove_fan: true
entities:
- entity_id: light.office_desk
icon: mdi:desk-lamp
- entity_id: switch.office_computer
icon: mdi:desktop-tower
- entity_id: climate.office_ac
icon: mdi:air-conditionerFor examples, see my HA configuration for my dashboard home page: 01-home.yaml
The card will match the following themes
Default HA Example
UI Minimalist Example
iOS Themes Example
Active entities will be colored based on their domain unless overriden.
| Domain Category | Domains | Active Color |
|---|---|---|
| Lighting | light, switch_as_x |
Yellow |
| Switches & Electric | switch, input_boolean, automation, script |
Blue |
| Climate & Environment | climate, fan |
Teal |
| Security & Safety | alarm_control_panel, lock |
Red |
| Covers & Doors | cover, garage_door, door |
Green |
| Media | media_player |
Indigo |
| Sensors & Binary Sensors | binary_sensor, sensor |
Cyan |
| Person & Presence | person, device_tracker |
Purple |
| Weather | weather |
Orange |
| Vacuum | vacuum |
Deep Purple |
| Timer & Schedule | timer, schedule |
Pink |
| Unknown Domains | Any other domain | Yellow |
Each domain has a predefined color to indicate its active status.
The on_color and off_color attributes support these color stylings from the theme.
- primary
- accent
- red
- pink
- purple
- deep-purple
- indigo
- blue
- light-blue
- cyan
- teal
- green
- light-green
- lime
- yellow
- amber
- orange
- deep-orange
- brown
- light-grey
- grey
- dark-grey
- blue-grey
- black
- white
- disabled
-
Initial design:create initial room card based on button-card template in UI minimialist theme. -
Temperature:use uom from the device. -
Card Editor:ability to use the HA card editor. -
Test on other themes:make sure it works elsewhere. -
Flags:ability to disable features. -
Test on iOS theme: another theme to consider -
Sizing: ability to fit different size squares.
- 💬 Join the Discussions: Share your insights, provide feedback, or ask questions.
- 🐛 Report Issues: Submit bugs found or log feature requests for the
room-summary-cardproject. - 💡 Submit Pull Requests: Review open PRs, and submit your own PRs.
- 📣 Check out discord: Need further help, have ideas, want to chat?
- 🃏 Check out my other cards! Maybe you have an integration that I made cards for.
Contributing Guidelines
- Fork the Repository: Start by forking the project repository to your github account.
- Clone Locally: Clone the forked repository to your local machine using a git client.
git clone https://github.com/homeassistant-extras/room-summary-card
- Create a New Branch: Always work on a new branch, giving it a descriptive name.
git checkout -b new-feature-x
- Make Your Changes: Develop and test your changes locally.
- Commit Your Changes: Commit with a clear message describing your updates.
git commit -m 'Implemented new feature x.' - Push to github: Push the changes to your forked repository.
git push origin new-feature-x
- Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
- Review: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!
This project is protected under the MIT License. For more details, refer to the LICENSE file.
- Built using LitElement
- Inspired by Home Assistant's chip design
- Button-Card was a huge inspo
- Thanks to all contributors!
Forgive me and my badges..
Stats
Ratings