Add HACS integration, 8 Lovelace cards, and pairing page
New HA integration (integration/custom_components/luma_home/) with: - WS API: luma/get_config (Lovelace→v2 bridge), luma/pair, luma/pair_status - Config flow with dashboard URL path setting 8 HACS frontend cards (cards/) matching TV app visual spec: - toggle, range, climate, media, curtain, action, vacuum, weather - Glass card design: rgba(36,40,48,0.75) bg, 22px radius, accent glows Pairing page (pairing/luma-pair.html) for TV token provisioning. Web dashboard (web-dashboard/) — legacy config editor (deprecated). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kaloyan DanchevandClaude Opus 4.6 committed
1 parent
a890ba6baf
commit
d681f20884
18 files changed
+2708
No files matched your search
@@ -0,0 +1,198 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Luma TV Pairing</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0c0f14;
|
||||
--surface: #161a22;
|
||||
--card-border: rgba(255,255,255,0.08);
|
||||
--text: #f0f0f0;
|
||||
--text-muted: rgba(232,232,232,0.50);
|
||||
--accent: #7EB8DA;
|
||||
--danger: #e05555;
|
||||
--radius: 16px;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: var(--radius);
|
||||
padding: 32px;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
h1 { font-size: 22px; font-weight: 600; margin-bottom: 4px; }
|
||||
.subtitle { color: var(--text-muted); font-size: 14px; margin-bottom: 24px; }
|
||||
.field { margin-bottom: 16px; }
|
||||
.field label { display: block; font-size: 12px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
|
||||
.field input {
|
||||
width: 100%;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 10px;
|
||||
padding: 12px 14px;
|
||||
color: var(--text);
|
||||
font-size: 15px;
|
||||
font-family: inherit;
|
||||
}
|
||||
.field input:focus { outline: none; border-color: var(--accent); }
|
||||
.field input.pin-input {
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3em;
|
||||
}
|
||||
.field .hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: filter 0.15s;
|
||||
}
|
||||
.btn-primary { background: var(--accent); color: #111; }
|
||||
.btn-primary:hover { filter: brightness(1.1); }
|
||||
.btn-primary:disabled { opacity: 0.5; cursor: default; filter: none; }
|
||||
.msg { font-size: 14px; margin-top: 16px; text-align: center; min-height: 20px; }
|
||||
.msg.error { color: var(--danger); }
|
||||
.msg.success { color: #4ade80; }
|
||||
.step-list { margin: 16px 0; padding-left: 20px; }
|
||||
.step-list li { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; line-height: 1.5; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<h1>Luma TV Pairing</h1>
|
||||
<p class="subtitle">Connect your TV to Home Assistant</p>
|
||||
|
||||
<ol class="step-list">
|
||||
<li>On the TV, go to Settings → Home Assistant → Pair</li>
|
||||
<li>Enter the 6-digit PIN shown on the TV screen below</li>
|
||||
<li>Paste your HA long-lived access token</li>
|
||||
</ol>
|
||||
|
||||
<div class="field">
|
||||
<label>PIN from TV</label>
|
||||
<input id="pin" type="text" class="pin-input" maxlength="6" inputmode="numeric" pattern="[0-9]*" placeholder="000000" autocomplete="off">
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>HA Long-Lived Access Token</label>
|
||||
<input id="token" type="password" placeholder="Paste token from HA Profile page">
|
||||
<div class="hint">HA → Profile → Long-Lived Access Tokens → Create Token</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary" id="pair-btn" onclick="doPair()">Pair TV</button>
|
||||
<div class="msg" id="msg"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function getHaBaseUrl() {
|
||||
return window.location.origin;
|
||||
}
|
||||
|
||||
async function doPair() {
|
||||
const pin = document.getElementById('pin').value.trim();
|
||||
const token = document.getElementById('token').value.trim();
|
||||
const msg = document.getElementById('msg');
|
||||
const btn = document.getElementById('pair-btn');
|
||||
|
||||
msg.className = 'msg';
|
||||
msg.textContent = '';
|
||||
|
||||
if (!pin || pin.length !== 6 || !/^\d{6}$/.test(pin)) {
|
||||
msg.className = 'msg error';
|
||||
msg.textContent = 'Enter the 6-digit PIN from the TV.';
|
||||
return;
|
||||
}
|
||||
if (!token) {
|
||||
msg.className = 'msg error';
|
||||
msg.textContent = 'Paste your HA access token.';
|
||||
return;
|
||||
}
|
||||
|
||||
btn.disabled = true;
|
||||
msg.textContent = 'Pairing...';
|
||||
|
||||
try {
|
||||
const haUrl = getHaBaseUrl();
|
||||
const wsUrl = haUrl.replace(/^http/, 'ws') + '/api/websocket';
|
||||
|
||||
const ws = new WebSocket(wsUrl);
|
||||
await new Promise((resolve, reject) => {
|
||||
ws.onopen = resolve;
|
||||
ws.onerror = () => reject(new Error('WebSocket connection failed'));
|
||||
setTimeout(() => reject(new Error('Connection timeout')), 5000);
|
||||
});
|
||||
|
||||
// Auth
|
||||
const authMsg = await new Promise(resolve => {
|
||||
ws.onmessage = e => resolve(JSON.parse(e.data));
|
||||
});
|
||||
|
||||
if (authMsg.type === 'auth_required') {
|
||||
ws.send(JSON.stringify({ type: 'auth', access_token: token }));
|
||||
const authResult = await new Promise(resolve => {
|
||||
ws.onmessage = e => resolve(JSON.parse(e.data));
|
||||
});
|
||||
if (authResult.type !== 'auth_ok') {
|
||||
throw new Error('Invalid token. Check your HA access token.');
|
||||
}
|
||||
}
|
||||
|
||||
// Call luma/pair
|
||||
ws.send(JSON.stringify({
|
||||
id: 1,
|
||||
type: 'luma/pair',
|
||||
pin: pin,
|
||||
token: token,
|
||||
ha_url: wsUrl,
|
||||
}));
|
||||
|
||||
const result = await new Promise((resolve, reject) => {
|
||||
ws.onmessage = e => {
|
||||
const data = JSON.parse(e.data);
|
||||
if (data.id === 1) resolve(data);
|
||||
};
|
||||
setTimeout(() => reject(new Error('Timeout waiting for response')), 5000);
|
||||
});
|
||||
|
||||
ws.close();
|
||||
|
||||
if (result.success) {
|
||||
msg.className = 'msg success';
|
||||
msg.textContent = 'Paired! The TV will connect in a few seconds.';
|
||||
btn.textContent = 'Done';
|
||||
} else {
|
||||
throw new Error(result.error?.message || 'Pairing failed');
|
||||
}
|
||||
} catch (err) {
|
||||
msg.className = 'msg error';
|
||||
msg.textContent = err.message;
|
||||
btn.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('pin').addEventListener('input', function() {
|
||||
this.value = this.value.replace(/\D/g, '').slice(0, 6);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user