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.

✨ Features

• 🖱️ Full Visual Editor: No YAML required. The optimized editor ensures smooth configuration without focus loss.
• 📱 Responsive Flex Layout: Buttons intelligently wrap on smaller screens (Mobile/Tablet) while maintaining your preferred relative widths. No more cut-off content!
• 🌡️ Smart Climate Integration: Optionally select a main climate device (e.g., Tado, Netatmo) to automatically display temperature and humidity in the header.
• 🌍 Dynamic Unit Support: Automatically adapts to your Home Assistant system settings (Celsius, Fahrenheit).
• 🧭 Label & Status Position: Choose where label/status appear (Right / Left / Top / Bottom) per button, with a global default.
• 📏 Flexible Sizing: Buttons can take up 1/3, 1/4, 1/5, etc. of the width. Important buttons can be taller, others smaller.
• 🔋 Advanced Status Chips: Automatically alerts you about room status:
  • Windows: Shows open windows immediately.
  • Batteries: Differentiates between "Critical" (≤ 5%), "Low" (≤ 15%), or "Empty" (Binary Sensors).
• 💧 Humidity Warning: Optional high-humidity chip and blue outline with configurable threshold.
• ⚡ Performance: Vanilla JS, no external dependencies, loads extremely fast.
• 🖱️ Sortable: Reorder buttons via drag & drop or arrow keys in the editor.
• 🖼️ Built-in Image Uploader: Upload your room background images directly in the card editor. No file manager needed!
• ⚡ Quick Add (Editor): Add buttons quickly from existing entity types using the Quick Add accordion.
• 🧩 Editor Sections: Collapsible sections for Image, Manual Sensors, and Batteries.
• 🧭 Bulk Expand/Collapse (Editor): Expand or collapse all button settings at once.
• 👆 Configurable Actions: Define what happens on Tap, Hold, and Double Tap for every single button (Toggle, More Info, Navigate, etc.).
• 🌡️ Target Temperature: Optionally display the setpoint/target temperature next to the current room temperature.
• 🧩 Collapsible Button Editor: Each button configuration can be expanded/collapsed for faster navigation in large cards.
• 🧼 Cleaner Buttons: Toggle Show State, Show Label, and Show Icon per button to reduce visual noise.
• ↕️ Text Order: Choose which text comes first (State/Value or Name) per button.
• 🎯 Button Visibility: Hide/show individual buttons without deleting them.
• 🎛️ Manual Color Override: Force a custom color for a button icon even when the entity is inactive.
• 🎨 Dynamic Header Icon Coloring: Header icon now follows the same state-based color logic as buttons.
• 📴 Offline/Unavailable Handling: unavailable / unknown entities are clearly indicated and safely non-interactive.
• 🧭 Device Picker: Select a device and let the editor auto-pick a suitable entity.
• 🧩 Template Presets: Add buttons using type presets (Light/Switch/Climate/Cover/Media).

Header Icon Color Priority

Header icon color now follows this order:

1. Force Color (manual override)
2. Dynamic state-based color (same logic as buttons, including climate hvac_action)
3. Default theme color

No scripting is required, and existing dashboards remain backward compatible.

🆕 What's new in 1.1.1

• Fix: Removed MigrationWarningCard / room-card alias to prevent conflicts with other custom cards that use the same element name (e.g. thomasloven's or benct's room-card). Previously, if oneline-room-card loaded first, it would block other room-card implementations from registering, breaking those dashboards.

🆕 What's new in 1.1.0

• Runtime: Improved handling for unavailable / unknown entities (dimmed controls, offline indicator, blocked actions).
• Runtime: Header icon uses the same dynamic state-based color logic as buttons.
• Runtime: Header icon supports Force Color override with safe fallback to dynamic/theme color.
• Editor UX: New Live preview toggle (enabled by default).
• Performance: Internal state-signature caching reduces unnecessary DOM/UI updates.
• Internal: Centralized state definitions for active/offline checks (maintainability improvement, no user config change).

🆕 What's new in 1.0.9

• Runtime: High-humidity warning chip and blue outline with configurable threshold (humidity_warning_threshold, default 60).
• Runtime: Label/status position modes (right/left/top/bottom) with per-button label_position and global global_label_position.
• Runtime: Battery and humidity warnings now highlight the card outline.
• Editor UX: Quick Add accordion to add buttons from existing entity types.
• Editor UX: Collapsible sections for Image, Manual Sensors, and Battery list.
• Editor UX: Drag & drop reordering plus bulk expand/collapse button settings.
• Fix: Editing a button no longer collapses entries or jumps the editor scroll.

📥 Installation

Via HACS (Recommended)

or

1. Open HACS -> Frontend.
2. Click the menu (three dots) in the top right corner -> Custom repositories.
3. Paste the URL of this repository.
4. Select category Lovelace (or Dashboard).
5. Click "Add" and then "Install".

Manual Installation

1. Download the room-card.js file from the latest release.
2. Copy it to your /config/www/ folder.
3. Add the resource to your Dashboard configuration:
   • URL: /local/room-card.js
   • Type: JavaScript Module

⚙️ Configuration

Simply add the card via "Add Card" in your dashboard and select "OneLine Room Card". The visual editor guides you through all settings:

• General: Name, Icon, Colors, Background Image, and optional Tap → Navigate path.
• Header Icon Color: Uses the same behavior as buttons with Force Color support in the editor.
• Sensors: Select your temperature (current & target), humidity, window, and battery sensors. Optional humidity warning threshold.
• Buttons: Add devices/entities, set width/height, alignment, and actions (Tap/Hold/Double Tap).
• Cleaner Buttons: Toggle Show State, Show Label, Show Icon, and Visible per button.
• Text Order: Choose whether State/Value or Name appears first.
• Label Position: Set Right / Left / Top / Bottom per button and a global default.
• Manual Color: Force a custom icon color (always visible).
• Template Presets: Add buttons from type presets, or switch a row to Template.
• Editor UX: Button entries are collapsible for better overview.
• Live preview: Enabled by default. Disable it to update preview only after saving (helpful on slower devices / large dashboards).

Unavailable / Offline behavior

When an entity is unavailable or unknown:

• its control is visually dimmed/disabled,
• an offline indicator (icon/tooltip) is shown,
• toggle/actions are ignored until the entity is available again.

This improves feedback and prevents accidental actions, while keeping layout and behavior stable.

YAML options

type: custom:oneline-room-card
humidity_warning_threshold: 60
global_label_position: bottom  # right | left | top | bottom
controls:
  - entity: light.living_room
    label_position: bottom      # global | right | left | top | bottom

Technical improvements (internal)

• Room Card now tracks relevant entity state signatures and updates UI only when relevant values change.
• Active/offline state checks are now centrally defined, making maintenance and future extensions safer.
• No additional configuration is required for these optimizations.

⚠️ Migration 1.1.0 → 1.1.1

No breaking changes.

⚠️ Migration 1.0.9 → 1.1.0

No breaking changes.

• Existing YAML configs continue to work.
• Existing header color values keep their visual behavior through conservative backward-compat handling.

⚠️ Migration 1.0.8 → 1.0.9

No breaking changes. global_label_position is new; existing configs using buttons_label_position remain supported as a fallback.

Template Buttons (Optional)

You can switch a button row to Template to render dynamic text/icon/color/state.

• Use JavaScript inside ${ ... }.
• Helpers available: hass, states, entity(id), attr(id, name), ctrl.

Example:

content: ${entity("climate.living_room")?.state?.toUpperCase() ?? "—"}
icon: ${(({heat:"mdi:fire",cool:"mdi:snowflake"}[(entity("climate.living_room")?.state||"").toLowerCase()]) ?? "mdi:help-circle")}
color: ${(({heat:"#FF5722",cool:"#2196F3"}[(entity("climate.living_room")?.state||"").toLowerCase()]) ?? "#9E9E9E")}
state: ${attr("climate.living_room","hvac_action") ?? ""}

---

☕ Support

Do you like my work? I develop this card in my free time. I would be very happy about a coffee!

---

Developed by OneLine