Room Summary Card

Room Data at Your Fingertips

Built with the tools and technologies:

Table of Contents

• Overview
• Features
• Installation
• Quick Start
• Documentation
• Themes and Styling
• Project Roadmap
• Contributing

Overview

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 flexible layout.

Features

Sensor Averaging

Automatically calculates and displays averaged sensor readings by device class:

• Individual sensors: Display specific sensors in your preferred order
• Averaged sensors: Show area-wide averages for device classes (temperature, humidity, etc.)
• Smart grouping: Groups sensors by unit of measurement for accurate averaging

Climate Information

The card can display climate-related information and apply visual styling based on temperature and humidity thresholds.

Climate Thresholds

You can configure temperature and humidity thresholds to trigger visual indicators:

thresholds:
  temperature: 80 # °F (default: 80)
  humidity: 60 # % (default: 60)
  temperature_entity: sensor.living_room_temp # Specific sensor (optional)
  humidity_entity: sensor.living_room_humidity # Specific sensor (optional)

Individual Sensor Support: When you specify temperature_entity or humidity_entity, the card will look for that specific sensor in both:

1. Individual sensors (from config.sensors) - if the entity has the correct device class
2. Averaged sensors (from config.sensor_classes) - as a fallback

This allows you to use configured individual sensors for climate thresholds even when their device class isn't included in sensor_classes.

Example: Using Individual Sensors for Thresholds

sensors:
  - sensor.living_room_temp_1 # Individual temperature sensor
  - sensor.living_room_humidity # Individual humidity sensor
sensor_classes:
  - pressure # Only pressure sensors from area
thresholds:
  temperature: 75
  humidity: 50
  temperature_entity: sensor.living_room_temp_1 # Uses individual sensor
  humidity_entity: sensor.living_room_humidity # Uses individual sensor

In this example, the climate thresholds will use the individual temperature and humidity sensors, even though temperature and humidity aren't in sensor_classes.

Entity Status

• Color-coded icons indicating entity states
• Interactive icons with tap/hold actions
• Climate entity colors with automatic state detection
• RGB color support for accurate light representation

Problem Detection

• Automatically detects entities labeled as "problem" in the area
• Shows count of problem entities with color-coded indicators
• Red for active problems, green for no active problems

Occupancy Detection

• Visual indicators when rooms are occupied using motion/occupancy sensors
• Dynamic card borders and room icon colors based on occupancy status
• Support for multiple sensor types (motion, occupancy, presence, device trackers)
• Customizable colors and animation options
• Granular control over which visual effects are applied

Room Statistics

• Shows total number of devices and entities in the room
• Automatic entity discovery based on area assignment
• Configurable display options

Multiple Sensor Layouts

Choose from different sensor display options:

• Default: In the label area alongside room statistics
• Stacked: Vertically stacked in the label area
• Bottom: At the bottom of the card for maximum visibility

Background Images

Multiple background image sources with automatic fallbacks:

• Area Pictures: Automatically uses area pictures from Home Assistant
• Custom Images: Static image files from local storage or URLs
• Dynamic Entities: Live images from camera, person, or image entities
• Opacity Control: Customizable transparency levels
• Icon Background: Apply background to room icon only for subtle effects
• Disable Option: Complete background image control

area picture	entity picture	background picture

📖 See Background Configuration for detailed examples and advanced usage.

RGB Color Support

Direct RGB color values from entities with rgb_color attributes for accurate color representation.

Custom Icon Color Integration

Support for the custom-icon-color integration:

• Hex Colors: Direct hex color specification (#FF5733)
• Theme Colors: Use theme color names (red, blue, yellow)
• Color Priority: Intelligent color precedence system
• Cross-Theme Support: Works with multiple theme systems

Climate Entity Styling

Special styling for climate entities with automatic state detection:

• State-Based Icons: Automatic icons based on climate state (heat, cool, auto, etc.)
• Color Coding: Dynamic colors based on current operation mode
• Border Indicators: Visual climate threshold warnings
• Skip Option: Can be disabled for custom styling

Advanced Feature Flags

Extensive customization options:

• Hide Components: Area stats, climate labels, room icons, sensor icons
• Exclude Defaults: Skip default entity discovery
• Style Control: Disable climate styling, entity styling
• Layout Options: Multiple sensor display layouts

Custom Styling

Customize the appearance with CSS styles the way you like.

• Custom Styling: Apply custom CSS styles to different card areas (title, stats, sensors, card container)
• Precise Control: Override theme defaults with specific colors, fonts, and layout properties
• CSS Variables: Support for CSS custom properties for advanced customization
• Theme Integration: Works alongside existing themes while allowing complete visual override

Card Editor

Visual configuration interface:

• Drag & Drop: Easy entity management
• Live Preview: Real-time configuration preview
• Schema Validation: Built-in configuration validation
• Auto-Discovery: Automatic sensor and entity detection

Installation

HACS (Recommended)

1. Open HACS in your Home Assistant instance
2. Click the menu icon and select "Custom repositories"
3. Add: https://github.com/homeassistant-extras/room-summary-card
4. Select "Dashboard" as the category
5. Click "Install"

Manual Installation

1. Download room-summary-card.js from the latest release
2. Copy to www/community/room-summary-card/
3. Add to your configuration.yaml:

lovelace:
  resources:
    - url: /local/community/room-summary-card/room-summary-card.js
      type: module

Quick Start

Minimal Configuration

type: custom:room-summary-card
area: living_room

Card Editor

Use the visual editor for easy configuration:

The card automatically discovers and displays:

• Room light and fan entities (based on area naming)
• Problem entities (labeled with "problem")
• Individual temperature and humidity sensors (via sensors config)
• Averaged sensor readings by device class (via sensor_classes config)
• Device and entity counts

Documentation

📚 Detailed Documentation:

• Configuration Guide - Complete configuration options and examples
• Theming Guide - Theme support and color customization
• Advanced Usage - Advanced features and entity attributes
• Troubleshooting - Common issues and solutions
• Build - Build and Code Quality statistics

Themes and Styling

The card supports multiple themes out of the box:

• Default Home Assistant themes
• UI Minimalist theme
• iOS Themes

Theme Examples

Default HA	UI Minimalist

See the Theming Guide for detailed color configuration and custom theme support.

Project Roadmap

• Initial design: create initial room card based on button-card template in UI minimialist theme.
• Temperature: use uom from the device. - thanks @LiquidPT
• Card Editor: ability to use the HA card editor. - thanks @elsilius
• Test on other themes: make sure it works elsewhere. - thanks @tardis89, @avatar25pl
• Flags: ability to disable features.
• Multiple sensors: support for displaying multiple sensors in the label area. - thanks @fctruter, @LE-tarantino
• Climate entity icon styling: climate entity will light up icon - thanks @murriano
• Border styling for climate thresholds: border respects skip_climate_styles - thanks @LE-tarantino, @ma-gu-16, @wmtech-1
• Area name display: use area name instead of area ID on card - thanks @LE-tarantino
• Navigation with room entity: navigate now works with room entity set - thanks @LE-tarantino
• Card container sizing: card respects container - thanks @frdve, @Erikkyw
• Border styling improvements: border to match HA styles better - thanks @frdve
• Theme support for iOS theme: for opening issue on themes - thanks @yasalmasri
• UI Minimalist theme integration: add UI minimalist theme - thanks @tardis89
• iOS themes support: ios themes - thanks @avatar25pl
• Problem entities counter: add problem entities counter - thanks to multiple users
• Card RGB coloring: RGB lights color the card - thanks @ChristopherLMiller
• Custom names: ⭐ First contributor ⭐ added area_name - thanks @Aulos
• Disable card styling: bug fixes and new skip_entity_styles feature - thanks @benjycov
• Custom icon color integration: support custom-icon-color - thanks @benjycov
• Sensor layout options: flexible sensor display layouts (default, stacked, bottom) - thanks @Ltek
• Sensor averaging by device class: automatic averaging like HA area card - thanks @Ltek
• Moving away from customize.yaml: allowing more configuration on the card - thanks @johntdyer
• Area, entity, and custom backgrounds: can setup backgrounds and customize - thanks @CalamarBicefalo, @X1pheR, @Ltek
• Custom Styles: ability to apply custom CSS styles - thanks @marceloroloff, @ma-gu-16, @Ltek
• Random bugs: pointing out issues to improve card - thanks @rickd1994, @avijavez10
• Occupancy Detection: visual indicators for room occupancy with motion/occupancy sensors - thanks @X1pheR

Contributing

• 💬 Join the Discussions: Share your insights, provide feedback, or ask questions.
• 🐛 Report Issues: Submit bugs found or log feature requests for the room-summary-card project.
• 💡 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.

License

This project is protected under the MIT License. For more details, refer to the LICENSE file.

Acknowledgments

• Built using LitElement
• Inspired by Home Assistant's chip design
• Button-Card and Auto-Entities were a huge inspo
• Thanks to all contributors!

Build & Code Quality

Check out Build Documentation!