Repository files navigation

Room Data at Your Fingertips

Built with the tools and technologies:

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

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.

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

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

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

thresholds:temperature:80# °F (default: 80)humidity:60# % (default: 60)mold:50# % (no default - shows whenever mold sensor is present)temperature_entity:sensor.living_room_temp# Specific sensor (optional)humidity_entity:sensor.living_room_humidity# Specific sensor (optional)temperature_operator:gt# Comparison operator (default: gt)humidity_operator:gt# Comparison operator (default: gt)

Comparison Operators: Usegt (>),gte (>=),lt (<),lte (<=), oreq (=) to control when thresholds trigger. Perfect for heating scenarios (uselt for temperature) or medical conditions (uselt for low humidity).yMold 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.

Individual Sensor Support: When you specifytemperature_entity orhumidity_entity, the card will look for that specific sensor in both:

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

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

sensors:  -sensor.living_room_temp_1# Individual temperature sensor  -sensor.living_room_humidity# Individual humidity sensorsensor_classes:  -pressure# Only pressure sensors from areathresholds:temperature:75humidity:50temperature_entity:sensor.living_room_temp_1# Uses individual sensorhumidity_entity:sensor.living_room_humidity# Uses individual sensor

In this example, the climate thresholds will use the individual temperature and humidity sensors, even thoughtemperature andhumidity aren't insensor_classes.

• 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

📖SeeEntity Icons Example for configuration details.

• 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
• Mold Indicator: Animated warning appears in the bottom left area when mold levels exceed thresholds

📖SeeProblem Detection Example for configuration details.

• 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

📖SeeOccupancy Detection Example for configuration details.

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

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

📖SeeSensor Layouts Examples for configuration details.

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

📖SeeBackground Images Examples for configuration details.

📖SeeBackground Configuration for detailed examples and advanced usage.

Direct RGB color values from entities withrgb_color attributes for accurate color representation.

📖SeeRGB Color Support Example for configuration details.

Support for thecustom-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

📖SeeCustom Icon Colors Example for configuration details.

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

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)

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

📖SeeCustom Styling Example for configuration details.

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

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"

1. Downloadroom-summary-card.js from thelatest release
2. Copy towww/community/room-summary-card/
3. Add to yourconfiguration.yaml:

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

type:custom:room-summary-cardarea:living_room

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 (viasensors config)
• Averaged sensor readings by device class (viasensor_classes config)
• Device and entity counts

📚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

The card supports multiple themes out of the box:

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

Default HA	UI Minimalist

See theTheming Guide for detailed color configuration and custom theme support.

• 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, @massaquah
• Flags: ability to disable features.
• Multiple sensors: support for displaying multiple sensors in the label area. - thanks @fctruter, @LE-tarantino, @zoic21
• Climate entity icon styling: climate entity will light up icon - thanks @murriano
• Climate Threshold tweaks & improvements: making this feature better and better - thanks @LE-tarantino, @ma-gu-16, @wmtech-1, @snotgun
• 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 ⭐ addedarea_name - thanks @Aulos
• Disable card styling: bug fixes and new skip_entity_styles feature - thanks @benjycov
• Custom icon color integration: supportcustom-icon-color - thanks @benjycov
• Sensor layout options: flexible sensor display layouts (default, stacked, bottom) - thanks @Ltek, @zoic21
• 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, @felippepuhle
• Custom Styles: ability to apply custom CSS styles - thanks @marceloroloff, @ma-gu-16, @Ltek, @johannwilken, @Sturby, @viprapp
• Random bugs: pointing out issues to improve card - thanks @rickd1994, @avijavez10, @awfulwoman, @anandv85
• Occupancy Detection: visual indicators for room occupancy with motion/occupancy sensors - thanks @X1pheR
• Mold Indicator: animated warning indicator for mold detection with threshold-based display - thanks @ma-gu-16
• Entity Labels: display entity names under icons for better identification - thanks @Ltek
• Clickable Sensors: individual sensors in info section open more info dialog - thanks @enrico-semrau
• Threshold-Based Icon Coloring: dynamic icon colors based on sensor values with configurable thresholds and operators - thanks @fusionstream, @marcokreeft87
• State-Based Icon Coloring: exact state & attribute matching for sensors like washing machines, device trackers, and status indicators - thanks @marcokreeft87 and @zoic21!
• Multi-Light Background: card background lights up when any light entity in the room is on - thanks @joshkay
• Entity Picture Display: automatic display of entity pictures with optional override - thanks @Zipp0KMS, @pheitman
• Custom Labels: entity and sensor labels with state/threshold-based overrides - thanks @ojm88

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

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

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

Check outBuild Documentation!