hermes-skills/smart-home/smart-home-automation/references/ha-dashboard-redesign.md

HA Dashboard Redesign — Brainstorming & Design

Session: 2026-07-10. User requested a complete dashboard redesign, mobile-first, with Mushroom Cards + Bubble Card navigation.

Brainstorming Process

Used the brainstorming skill. Key decisions via clarifying questions:

1. Goal: Komplett-Redesign — alles neu, sauber strukturiert
2. Primary device: Handy (mobile-first, desktop is secondary)
3. Top functions: Energie (PV/Speicher/Marstek/Strompreis), Rollos, Licht
4. Structure: Ein Hauptdashboard + Energie separat (as before)
5. Card approach: Mix aus Mushroom + Bubble Navigation

Entity Inventory (via browser console)

Domain	Count	Key entities
light	20	Schlafzimmer, Esszimmer, Bad, Tradfri×7, Kinderzimmer×2, Garten×2, Deckenleuchte
cover	10	Wohnzimmerfenster×2, Wohnzimmertür, Esszimmertür, Küchenfenster×2, Badrollo, Terrassenrollo, Markise
climate	12	ViCare heating + 11 room thermostats (Bad, Büro, Esszimmer, FBH-WC, Flur unten, Gang OG, Wohnzimmer, Kinderzimmer Cleo, Schlafzimmer, Schminkzimmer, Windfang)
camera	10	Terrasse, Einfahrt, 6× robot vacuum maps, thumbnail
scene	9	Alles aus×2, Fernsehabend, Heizungen an/aus, Raffstore am Tag
lock	5	Haustür + others
media_player	10	Wohnzimmer, Harmony Hub + others
automation	35	Including Marstek Kaskaden-Steuerung
switch	196	Much chaff among them
sensor	1128	Heavily overloaded

Existing Dashboard State (pre-redesign)

Dashboard	URL Path	Views	Cards (main)	Status
Übersicht (default)	lovelace	3	43+1+1	⚠️ Overloaded — cameras, blinds, 11 thermostats, media, energy, lights, sensors, scenes, weather, door contacts all on one view
Stromerzeugung/-verbrauch	stromerzeugung-verbrauch	5	30	3 of 5 views empty (PV Erzeugung, Stromverbrauch, Kindle)
IT	dashboard-it	1	16	OK
Karte	map	1	1	Minimal
Editor	dashboard-editor	1	1	Tool (config-editor-card)
Übersicht (test)	dashboard-test	1	0	Empty — delete candidate
Haus	dashboard-haus	0	0	Empty — repurpose as new main dashboard
Typen	dashboard-typen	0	0	Empty — delete candidate
Home_Auto	home-auto	0	0	Empty — delete candidate
Moonraker	dashboard-moonraker	0	0	Empty — delete candidate

Installed Custom Cards (via HACS)

Already installed:

• custom:power-flow-card-plus — power distribution visualization
• custom:price-timeline-card — electricity price timeline
• custom:config-editor-card — dashboard editor

Needed for redesign:

• mushroom-cards — compact, touch-friendly UI elements (HACS)
• bubble-card — bottom-bar navigation, swipe between views (HACS)

Approved Design

Dashboard 1: "Haus" (Main Dashboard, mobile-first)

Navigation: Bubble Card Bottom-Bar with 5 tabs

🏠 Home | ☀️ Rollos | 💡 Licht | 🔒 Sicherheit | 🌡️ Klima

Tab 1 — Home (Minimal):

• Mushroom Title Card "Schön Home"
• Mushroom Template Card: Weather + outside temp
• Power-Flow-Card-Plus (mini energy flow: PV ↔ Battery ↔ House ↔ Grid)
• 2× Mushroom Entity Card: Presence (Dominik, Sarah)
• 1× Mushroom Chips Card: Door open/closed, Marstek SoC, electricity price — quick-info badges

Tab 2 — Rollos (10 covers, grouped by floor):

• Mushroom Cover Card per cover (large touch buttons: up/stop/down)
• Ground floor: Wohnzimmer×2, Esszimmer, Küche×2, Terrasse, Markise
• Upper floor: Bad, Schlafzimmer
• Master "Alle Rollos" card at top

Tab 3 — Licht (20 lights + 9 scenes):

• Mushroom Light Card per room (group where possible)
• Scenes as Mushroom Action Buttons at bottom: "Alles aus", "Fernsehabend", "Raffstore am Tag"

Tab 4 — Sicherheit:

• 2 Camera Cards (Terrasse, Einfahrt) — Picture Glance, compact
• Binary sensors: door/window contacts as Mushroom Entity Cards
• Lock: front door as Mushroom Lock Card

Tab 5 — Klima (12 thermostats):

• Mushroom Climate Card per room
• ViCare Heating + hot water at top
• Outside temperature chip

Dashboard 2: "Energie" (existing, upgraded)

Remains separate. Fill the 3 empty views:

• PV Erzeugung: Apexcharts (daily/weekly curves SMA)
• Stromverbrauch: Apexcharts (consumer breakdown: heat pump, household, wallbox)
• Kindle: Black/white E-Ink optimized dashboard

Cleanup

Dashboard	Action
dashboard-test (empty)	Delete
Haus (empty)	Repurpose → new main dashboard
Typen (empty)	Delete
Home_Auto (empty)	Delete
Moonraker (empty)	Delete
Editor	Keep (tool)
IT	Keep
Karte	Keep
Übersicht (lovelace, 43 cards)	Keep as backup after migration, then delete

Implementation Notes

• All dashboards use mode: 'storage' (UI-managed, not YAML files)
• Dashboard config write-back via WebSocket: conn.sendMessagePromise({type: 'lovelace/config/save', url_path: '...', config: cfg})
• Custom cards must be installed via HACS before referencing them in dashboard config
• Bubble Card bottom navigation requires a bubble-card config at the view level

HACS Installation via WebSocket (confirmed working 2026-07-10)

HACS custom cards can be installed programmatically via the WebSocket API — no need to fight the HACS UI iframe:

// 1. Find repository ID
const repos = await conn.sendMessagePromise({type: 'hacs/repositories/list'});
const mushroom = repos.find(r => r.full_name === 'piitaya/lovelace-mushroom');
// mushroom.id = '444350375'

// 2. Install
await conn.sendMessagePromise({type: 'hacs/repository/download', repository: mushroom.id});
// Returns {} on success

// 3. Verify resource registration
const resources = await conn.sendMessagePromise({type: 'lovelace/resources'});
// Look for /hacsfiles/lovelace-mushroom/mushroom.js in resources

Installed: Mushroom v5.1.1 (repo ID 444350375), Bubble Card v3.2.4 (repo ID 680112919).

Entity Verification Pitfalls (encountered during implementation)

• Scene name mismatch: scene.alles_aus does NOT exist — the correct entity is scene.alles_aus_2. Always query ha.hass.states for scene entities before referencing.
• Binary sensors lacking device_class: Door/window binary sensors in this homelab do NOT have device_class: door or device_class: window. Filtering by device_class returns zero results. Instead, filter by entity name keywords: tur, fenster, door, window.
• Available binary sensors (as of 2026-07-10): binary_sensor.wohnzimmerfenster2, binary_sensor.wohnzimmerture, binary_sensor.esszimmerture, binary_sensor.esszimmerture_2 — only 4, not the full set shown in the old overview dashboard.
• Locks: 5 lock entities exist: lock.voreingestellte_tur (main door), lock.turoffner_1, lock.free_hometouch_7, lock.free_hometouch_7_2, lock.free_hometouch_7_3.

Post-Implementation Dashboard State (2026-07-10)

Dashboard	URL Path	Views	Cards/view	Status
Haus (NEW)	dashboard-haus	5	6/3/5/4/5	✅ Mushroom + Bubble, mobile-first
Stromerzeugung/-verbrauch	stromerzeugung-verbrauch	5	30/1/4/4/1	✅ All views filled
Übersicht (backup)	lovelace	3	43/1/1	Kept as backup
IT	dashboard-it	1	16	Unchanged
Karte	map	1	1	Unchanged
Editor	dashboard-editor	1	1	Unchanged

Deleted: dashboard-test, Typen, Home_Auto, Moonraker (4 empty ghost dashboards).

Haus Dashboard View Structure (final)

View	Path	Cards	Content
Home	home	6	Bubble popup, weather template, power-flow-card-plus, presence grid, chips (door/Marstek/SMA), bubble nav
Rollos	rollos	3	Bubble popup, 9 mushroom cover cards in 2-col grid, bubble nav
Licht	licht	5	Bubble popup, scene chips (5 scenes), 8 room lights in 2-col grid, 9 tradfri/misc lights in 3-col grid, bubble nav
Sicherheit	sicherheit	4	Bubble popup, 2 camera picture-glance, 2 lock cards + 4 door/window sensors in 2-col grid, bubble nav
Klima	klima	5	Bubble popup, ViCare climate card, WW + outside temp grid, 11 room climate cards in 2-col grid, bubble nav

Energie Dashboard Filled Views

View	Path	Cards	Content
PV Erzeugung	pv-erzeugung	4	3 apexcharts (PV delivery, SoC, Solcast forecast vs actual), entity stats
Stromverbrauch	stromverbrauch	4	3 apexcharts (house consumption, battery discharge, sauna power), consumer entity list
Kindle	kindle	1	Vertical stack of 6 mushroom template cards (PV, Haus, SMA SoC, Marstek SoC, Strompreis, PV Einsparung) — black icons for E-Ink