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, humidity, and mold thresholds to trigger visual indicators:

thresholds:
  temperature:
    - value: 80 # °F (optional - defaults to 80) or entity ID (e.g., sensor.temp_threshold)
      operator: gt # Comparison operator (optional - default: gt)
      # entity_id is optional - if omitted, uses averaged temperature sensor
  humidity:
    - value: 60 # % (optional - defaults to 60) or entity ID (e.g., sensor.humidity_threshold)
      operator: gt # Comparison operator (optional - default: gt)
      # entity_id is optional - if omitted, uses averaged humidity sensor
  mold: 50 # % (no default - shows whenever mold sensor is present)

Simple Configuration: All fields are optional! You can skip properties or the whole section to use all defaults (80°F for temperature, 60% for humidity, gt operator, averaged sensor). Or specify only the fields you want to customize.

Specific Sensors: If you need to check a specific sensor instead of the average, add entity_id to the threshold entry.

Dynamic Thresholds: The value field can be either a numeric value or an entity ID. When using an entity ID, the threshold value is read from the entity's state, allowing for dynamic threshold configuration.

Multiple Thresholds: You can configure multiple threshold entries for temperature and humidity, each checking different sensors with different values and operators.

Comparison Operators: Use gt (>), gte (>=), lt (<), lte (<=), or eq (=) to control when thresholds trigger. Perfect for heating scenarios (use lt for temperature) or medical conditions (use lt for low humidity).

Mold Indicator: When mold levels exceed the threshold, an animated indicator appears in the bottom left area near problem entities with pulsing effects and warning symbols.

Example: Using Multiple Thresholds¶

thresholds:
  temperature:
    - value: 75 # Uses averaged temperature sensor
      operator: gt
    - entity_id: sensor.bedroom_temp # Also check specific sensor
      value: 70
      operator: gt
  humidity:
    - value: 50 # Uses averaged humidity sensor
      operator: gt

In this example, the card will trigger the hot border if either the averaged temperature exceeds 75°F or the bedroom temperature exceeds 70°F.

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

Entity Icons

📖 See Entity Icons Example for configuration details.

Entity Badges¶

Small overlay icons that appear on entity icons to provide additional visual information:

Multiple Badges: Up to 4 badges per entity, positioned at any corner
Display Modes: Always visible, Home Assistant style, or state-based matching
Flexible Configuration: Show entity state icons or custom icons based on conditions
Related Entities: Badges can display information from different entities
State Matching: Supports attribute-based matching for advanced use cases

Entity Badges

📖 See Badge Configuration for complete documentation.

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
Clickable Indicator: Click the problem indicator to view a detailed dialog listing all problem entities with their names, states, and active/inactive status
Entity Details: Click any entity in the dialog to open its more-info dialog for detailed information
Mold Indicator: Animated warning appears in the bottom left area when mold levels exceed thresholds

Problem Detection

Problem Dialog

Problem Dialog Mobile

📖 See Problem Detection Example for configuration details.

Alarm Detection¶

Occupancy Detection: Visual indicators when rooms are occupied using motion/occupancy/presence sensors
Smoke Detection: Visual indicators when smoke is detected using smoke detectors
Gas Detection: Visual indicators when gas is detected using gas sensors
Water Detection: Visual indicators when water leaks are detected using moisture sensors
Dynamic card borders and room icon colors based on alarm status
Support for multiple sensor types per alarm category
Customizable colors and animation options for each alarm type
Granular control over which visual effects are applied
Priority System: Smoke > Gas > Water > Occupancy (higher priority alarms suppress lower priority ones)

Occupancy

📖 See Alarm Detection Example for configuration details.

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

Sensor Layouts

📖 See Sensor Layouts Examples for configuration details.

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 Images Examples for configuration details.

📖 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.

RGB Light Colors

📖 See RGB Color Support Example for configuration details.

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

📖 See Custom Icon Colors Example for configuration details.

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
Sticky Entities: Keep entity positions stable even when state is unavailable (prevents UI layout shifts)

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

styles

📖 See Custom Styling Example for configuration details.

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

Card Editor

Installation¶

HACS (Recommended)¶

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

Manual Installation¶

Download room-summary-card.js from the latest release
Copy to www/community/room-summary-card/
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:

Card Editor Interface

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
Frosted Glass theme

Theme Examples¶

Theme	Light	Dark
Default HA
UI Minimalist
Frosted Glass

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

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!