OneLine Room Card

A clean, performant, and fully visually configurable room card for Home Assistant. Developed with a focus on stability, simple design, and maximum flexibility.

Collapsed

---

✨ Features

Editor

• 🖱️ Full visual editor — no YAML required, with live preview
• 🖼️ Built-in image uploader — upload room backgrounds directly in the editor
• 🧭 Quick Add — add buttons from existing entity types in one click, including select / input_select
• 🏠 Area-Based Auto-Setup — pick a Home Assistant area and one click auto-populates climate, controls (light/switch/cover/fan/media_player/lock), temperature/humidity/window/battery sensors
• 🖱️ Drag & drop reordering, bulk expand/collapse, collapsible button entries

Header

• 🌡️ Smart climate integration — temperature, humidity and target temp auto-populated
• 🌍 Dynamic unit support — Celsius / Fahrenheit from HA system settings
• 🏷️ Custom header badges — any entity with optional label, name toggle and rgba(...) background
• 📐 Configurable header height — set in px, or 0 to hide completely
• 🚫 Hide background image (show_image: false) — collapses the header to its content height while keeping name, icon, badges and chips visible
• 🌗 Image grayscale by light state (image_entity) — header image fades to grayscale when the chosen light/switch is off
• 🚶 Presence indicator chip (presence_sensor) — green chip when a person / motion / device_tracker is active
• 🚨 Configurable alert sensors — red header chips and red card outline when sensors trip; collapsed mode shows a count badge with click-to-list dialog
• 🎨 Header typography — font size, weight, style and color per element
• 📍 Header position sliders — drag title and info line left/right with snap points
• 🪟 Window sensor chips — custom colors for open/closed states
• 🔋 Battery warning chips — Critical / Low / Empty with card outline
• 💧 Humidity warning chip — configurable threshold with card outline
• 🗂️ Collapsible card — click header to collapse/expand, state persists

Buttons

• 📏 Flexible sizing — width (1/3, 1/4, …) and height per button
• 🎛️ Inline slider — brightness (light), position (cover), temperature (climate), volume (media player)
• 🔘 Inline cover buttons — Open / Stop / Close directly on the tile
• ▶️ Media player controls — transport buttons, volume slider, source/sound-mode chips and optional media title
• 🔽 Select / Input Select buttons — add dropdown-style entities and control options with inline Previous / Next buttons
• 🎨 Color Favorites — tap-to-set RGB swatches on light buttons
• 💡 Brightness presets — tap-to-set brightness chips for lights (e.g. 25% / 50% / 75% / 100%)
• 🌡️ Climate presets — tap-to-set temperature presets (fixed, auto, max)
• 🔥 HVAC mode chips (show_hvac_modes) — tappable chips for attributes.hvac_modes with matching MDI icons (off/auto/heat/cool/heat_cool/dry/fan_only)
• 💨 Fan speed chips (show_fan_modes) — tappable chips for attributes.fan_modes
• 📈 Sensor sparklines (show_sparkline) — tiny line charts on sensor buttons; configurable history (sparkline_hours) and refresh cadence (sparkline_refresh)
• 📐 Cover position presets — tap-to-set position presets (default: 0% / 50% / 100%)
• 🎨 State-dependent colors (color_map) — icon color and background by entity state
• 💡 Dynamic state icons — auto icon per state for Light, Switch, Fan, Lock, Cover, Media Player
• 🎨 Custom icon map (icon_map) — per-state icon overrides
• 📐 Configurable icon size — per button or global default
• 🧼 Show/hide state, label, icon per button
• 🕐 Time since last change — show_last_changed: true shows elapsed time on the button (e.g. "2h 15min"), combined with state as "on · 2h"
• ↕️ Label position — Right / Left / Top / Bottom per button and global default
• 👆 Configurable actions — Tap / Hold / Double Tap per button
• 🧩 Action service payloads — call-service actions now support inline service_data JSON in the visual editor
• 📂 Nested Card Behavior actions — action settings are grouped under Card Behavior and default to collapsed
• 🎯 Button visibility toggle
• 📴 Unavailable / offline handling — dimmed, non-interactive, with indicator

Advanced

• 🖌️ CSS Custom Properties — --rc-btn-bg, --rc-icon-color for card-mod styling
• 📝 Template buttons — arbitrary HTML content, icon, color and state via Jinja2
• ⚡ Vanilla JS, no external dependencies — fast load, no build step

---

📥 Installation

Via HACS (Recommended)

Or manually: HACS → Frontend → ⋮ → Custom repositories → paste URL → Category: Lovelace.

Manual

1. Download room-card.js from the latest release
2. Copy to /config/www/
3. Add resource: URL /local/room-card.js · Type: JavaScript Module

---

⚙️ Configuration

Add the card via "Add Card" → select OneLine Room Card. The visual editor covers all settings — no YAML required.

Key YAML options

Card level

Option	Default	Description
name	—	Room name
entity	—	Main entity (drives header icon color)
image	—	Header background image URL
show_image	true	Show the header background image. false hides the <img> and dark gradient and lets the header collapse to content height while name / icon / badges / chips remain visible
image_entity	—	Light / switch / input_boolean / group entity. When this entity is off, the header image fades to grayscale
header_height	120	Header image height in px (0 = hidden, ignored when show_image: false)
collapsible	false	Enable click-to-collapse on header
default_state	expanded	expanded · collapsed
tap_action	—	Card tap action (e.g. navigate)
hold_action	none	Card hold action
double_tap_action	none	Card double tap action
global_label_position	right	Default label position for all buttons
global_icon_size	20px	Default icon size for all buttons
global_button_background	—	Default button background (e.g. rgba(0,0,0,0))
show_card_last_activity	false	Show a header badge with elapsed time since the most recently changed button entity (e.g. 5 min, 2h 15min). Auto-refreshes every 60 s.
sparkline_refresh	300	Auto-refresh cadence for all sparkline buttons in seconds (60–3600)

Sensors & chips

Option	Default	Description
presence_sensor	—	Person / binary_sensor / device_tracker entity. Adds a green presence chip when active (on, home, active, detected)
presence_sensor_label	—	Custom label for the presence chip
temp_sensor	—	Temperature sensor (overrides climate)
target_temp_sensor	—	Target temperature sensor
humid_sensor	—	Humidity sensor (overrides climate)
temp_sensor_label	—	Custom label prefix for the temperature value
target_temp_sensor_label	—	Custom label prefix for the target temperature value
humid_sensor_label	—	Custom label prefix for the humidity value
humidity_warning_threshold	60	Humidity warning threshold (%)
alert_sensors	—	List of alert configurations: { entity, state, above, below }. Triggers red header chips and a red card outline when active
alert_chip_mode	expanded	expanded shows one chip per active alert; collapsed shows a count badge that opens a list dialog on click
alert_border_color	#d32f2d	CSS color for the red card outline when alerts are active (any valid CSS color)
window_sensors	—	List of window/door sensors (binary_sensor or sensor domain)
window_labels	—	Per-window custom labels keyed by entity ID, e.g. { binary_sensor.bedroom_window: "Sofia's bedroom window" }
window_always_show	false	Show chip even when closed
window_open_color	#FFA000	Chip color when open
window_closed_color	#9E9E9E	Chip color when closed
window_solid_background	false	Use the resolved window color as a solid chip background instead of a translucent tint
window_open_states	["on","open"]	List of state values treated as "open" (e.g. ["offen","gekippt"] for custom sensors). on is always included automatically for backward compatibility.
window_state_colors	—	Per-state color overrides, e.g. { offen: "#FFA000", gekippt: "#FFD740" }
battery_sensors	—	List of battery sensors

window_sensors:
  - binary_sensor.bedroom_window
window_labels:
  binary_sensor.bedroom_window: "Sofia's bedroom window"
window_solid_background: true

Buttons (controls)

Option	Default	Description
entity	—	Entity ID
name	—	Display label
width	15	Relative width (1–60)
height	60	Height in px
control_mode	—	slider · buttons · full (media player full combines volume slider and transport controls)
color_map	—	Per-state icon color map
icon_map	—	Per-state icon map
show_media_sources	false	Show media player source chips from source_list
show_media_sound_modes	false	Show media player sound-mode chips from sound_mode_list
show_media_title	false	Show current media title/artist instead of the raw state
show_brightness_presets	false	Show light brightness preset chips
brightness_presets	[25,50,75,100]	Brightness preset values in percent
show_cover_presets	false	Show cover position preset chips
cover_presets	[0,50,100]	Position preset values
show_climate_presets	false	Show climate temperature preset chips
climate_presets	—	Temperature preset values
show_hvac_modes	false	Show HVAC mode chips for climate entities (uses attributes.hvac_modes, calls climate.set_hvac_mode)
show_fan_modes	false	Show fan speed chips for climate entities (uses attributes.fan_modes, calls climate.set_fan_mode)
show_sparkline	false	Show a small history line chart on sensor buttons
sparkline_hours	24	Sparkline history range in hours (1–168)
show_color_favorites	false	Show light color favorite swatches
color_favorites	—	List of #hex or r,g,b colors
show_state	true	Show entity state text on button
show_last_changed	false	Show elapsed time since last state change (e.g. 2h 15min). Combined with show_state renders as on · 2h. Auto-refreshes every 60 s.
tap_action	more-info	toggle · more-info · none
hold_action	toggle	—
double_tap_action	none	—

🎨 Background Settings

The button background can be customized on two levels. The specific per-button setting overrides the global setting, which in turn overrides the default theme background.

# Card-level default for all buttons
global_button_background: rgba(0,0,0,0)       # e.g., fully transparent

# Per-button override
controls:
  - entity: light.living_room
    button_background: rgba(128,128,128,0.18) # e.g., slightly tinted

Priority: button_background (per button) > global_button_background (all buttons) > theme default

---

🔧 CSS Custom Properties

Override via card-mod for advanced theming:

card_mod:
  style: |
    ha-card {
      --rc-btn-bg: rgba(0,0,0,0);        /* button background */
      --rc-icon-color: white;             /* all icon colors */
    }

Per-button targeting via data-entity attribute (set on each .btn element):

card_mod:
  style: |
    .btn[data-entity="light.living_room"] {
      --rc-btn-bg: rgba(255, 0, 0, 0.5) !important;
      --rc-icon-color: gold !important;
    }

---

📋 Changelog

See CHANGELOG.md for the full release history.

---

☕ Support

If you enjoy this card, consider buying me a coffee!