Kaloyan DanchevandClaude Opus 4.6
89ff17a3bc
Custom card bundle (luma-card, luma-weather-card) with slide-in panels for light/climate/cover/media/vacuum, matching the TV launcher's design tokens. Includes theme, dashboard YAML for all 8 rooms, and deployment handoff doc. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
113 lines
4.1 KiB
Markdown
113 lines
4.1 KiB
Markdown
# Luma HA Cards — Deployment Handoff
|
|
|
|
## What this is
|
|
|
|
Custom Lovelace card bundle that replicates the Luma TV launcher's glass UI as a
|
|
Home Assistant dashboard. Built in a single session on 2026-10-27.
|
|
|
|
## Files in `ha-cards/`
|
|
|
|
| File | Size | What it does |
|
|
|------|------|-------------|
|
|
| `luma-cards.js` | 43 KB | Main card element (`<luma-card>`) — glass cards with accent glow per domain, brightness bars, curtain SVGs, media artwork. Click opens a slide-in panel (420px, right edge) with full controls for each domain. |
|
|
| `luma-weather-card.js` | 7 KB | Weather card (`<luma-weather-card>`) — current conditions + 5-day forecast row. |
|
|
| `luma-theme.yaml` | 2.5 KB | HA theme (`luma_glass`) — dark glass palette, gold accent, Inter font. |
|
|
| `dashboard.yaml` | 7 KB | Full dashboard YAML — all 8 rooms from `ha-home/config.json`, native HA grid cards, no HACS dependencies. |
|
|
| `README.md` | 3 KB | Installation steps (also summarised below). |
|
|
|
|
## Slide-in panel controls per domain
|
|
|
|
| Domain | Panel sections |
|
|
|--------|---------------|
|
|
| **light** | Brightness slider + presets (Off/25/50/100%) + colour temp + colour swatches + effects grid |
|
|
| **climate** | Target temp + HVAC mode icons + fan auto (Auto/Quiet/Turbo) + fan manual slider + airflow buttons |
|
|
| **cover** | Position slider + Open/Stop/Close + presets (Open/60/45/30/Closed) |
|
|
| **media_player** | Now playing (art + title + artist) + progress bar + transport (prev/play-pause/next) + volume |
|
|
| **vacuum** | Status + battery + fan mode buttons + Start/Pause/Dock |
|
|
| **switch/scene/script** | No panel — click toggles directly |
|
|
|
|
## Design token mapping
|
|
|
|
All colours, radii, shadows, and sizes come from `design-system/tokens.json`.
|
|
Key values hardcoded in the JS `T` object:
|
|
|
|
- Card fill: `rgba(34,38,46,0.88)`, border `rgba(255,255,255,0.10)`, radius 22
|
|
- Panel fill: `rgba(30,34,42,0.98)`, width 420, radius 28
|
|
- Accents: light `#F5B85A`, heat `#F06A4A`, cool `#4C9BF0`, curtain `#DCD2B4`, media `#9B7DDB`, vacuum `#60C090`
|
|
|
|
## Deployment steps (on Unraid SSH → HA)
|
|
|
|
### 1. Copy JS + theme files to HA
|
|
|
|
From Unraid (which has the repo or can pull from Gitea):
|
|
|
|
```bash
|
|
# Clone or pull on Unraid
|
|
cd /tmp && git clone https://jazzymc:<password>@git.xtrm-lab.org/jazzymc/luma-home.git 2>/dev/null || (cd /tmp/luma-home && git pull)
|
|
|
|
# SCP to HA (needs HA SSH addon password or key)
|
|
scp -P 22 /tmp/luma-home/ha-cards/luma-cards.js /tmp/luma-home/ha-cards/luma-weather-card.js root@192.168.10.102:/config/www/luma/
|
|
|
|
# Or if the HA Terminal addon is used, from inside HA:
|
|
mkdir -p /config/www/luma
|
|
# then pull files via scp from Unraid
|
|
```
|
|
|
|
### 2. Register Lovelace resources
|
|
|
|
In HA → **Settings → Dashboards → Resources** (top-right ⋮ menu), add:
|
|
|
|
| URL | Type |
|
|
|-----|------|
|
|
| `/local/luma/luma-cards.js` | JavaScript Module |
|
|
| `/local/luma/luma-weather-card.js` | JavaScript Module |
|
|
|
|
Or in `configuration.yaml`:
|
|
```yaml
|
|
lovelace:
|
|
resources:
|
|
- url: /local/luma/luma-cards.js
|
|
type: module
|
|
- url: /local/luma/luma-weather-card.js
|
|
type: module
|
|
```
|
|
|
|
### 3. Install theme
|
|
|
|
Copy theme file:
|
|
```bash
|
|
mkdir -p /config/themes
|
|
cp /tmp/luma-home/ha-cards/luma-theme.yaml /config/themes/luma_glass.yaml
|
|
```
|
|
|
|
Or merge into existing themes config. Then reload themes in **Developer Tools → YAML → Themes**.
|
|
|
|
### 4. Create dashboard
|
|
|
|
**Settings → Dashboards → Add Dashboard** → set title "Luma Home", icon `mdi:television`.
|
|
Switch to YAML mode and paste `dashboard.yaml` contents.
|
|
|
|
Or add to `configuration.yaml`:
|
|
```yaml
|
|
lovelace:
|
|
dashboards:
|
|
luma:
|
|
mode: yaml
|
|
title: Luma Home
|
|
icon: mdi:television
|
|
show_in_sidebar: true
|
|
filename: dashboards/luma.yaml
|
|
```
|
|
Then `cp ha-cards/dashboard.yaml /config/dashboards/luma.yaml`.
|
|
|
|
### 5. Activate theme
|
|
|
|
Profile (avatar) → Theme → **Luma Glass**.
|
|
|
|
## What's NOT deployed yet (TV binary)
|
|
|
|
The Luma TV binary with all 11 fixes from this session was compiled and is at
|
|
`/mnt/user/appdata/luma-build/target/armv7-unknown-linux-gnueabi/release/luma` on Unraid
|
|
and `/tmp/luma-deploy` on Mac. The TV (192.168.30.124) was offline during this session.
|
|
Deploy when it comes back online — see the main project README for the deploy process.
|