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,269 @@
|
||||
/**
|
||||
* Luma Toggle Card — Custom HA Lovelace card
|
||||
* Matches the TV app's toggle card visual spec.
|
||||
*/
|
||||
|
||||
const LUMA_CARD_VERSION = '0.1.0';
|
||||
|
||||
class LumaToggleCard extends HTMLElement {
|
||||
static get properties() {
|
||||
return { hass: {}, config: {} };
|
||||
}
|
||||
|
||||
set hass(hass) {
|
||||
this._hass = hass;
|
||||
this._render();
|
||||
}
|
||||
|
||||
setConfig(config) {
|
||||
if (!config.entity) throw new Error('Entity is required');
|
||||
this._config = {
|
||||
entity: config.entity,
|
||||
name: config.name || '',
|
||||
size: config.size || '1x1',
|
||||
accent_color: config.accent_color || '',
|
||||
glow_color: config.glow_color || '',
|
||||
icon: config.icon || '',
|
||||
tap_action: config.tap_action || { action: 'toggle' },
|
||||
hold_action: config.hold_action || { action: 'more-info' },
|
||||
confirmation: config.confirmation || false,
|
||||
...config,
|
||||
};
|
||||
this._render();
|
||||
}
|
||||
|
||||
getCardSize() {
|
||||
const size = this._config?.size || '1x1';
|
||||
return size === '1x2' || size === '2x2' ? 4 : 2;
|
||||
}
|
||||
|
||||
static getConfigElement() {
|
||||
return document.createElement('luma-card-editor');
|
||||
}
|
||||
|
||||
static getStubConfig() {
|
||||
return { entity: '', name: '', size: '1x1' };
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
if (!this.shadowRoot) {
|
||||
this.attachShadow({ mode: 'open' });
|
||||
}
|
||||
this._render();
|
||||
}
|
||||
|
||||
_getState() {
|
||||
if (!this._hass || !this._config) return null;
|
||||
return this._hass.states[this._config.entity];
|
||||
}
|
||||
|
||||
_isOn() {
|
||||
const state = this._getState();
|
||||
return state && (state.state === 'on' || state.state === 'open' || state.state === 'unlocked');
|
||||
}
|
||||
|
||||
_getAccentColor() {
|
||||
if (this._config?.accent_color) return this._config.accent_color;
|
||||
const state = this._getState();
|
||||
if (!state) return '#bbbbbb';
|
||||
switch (state.state) {
|
||||
case 'on': case 'open': return '#7EB8DA';
|
||||
case 'heat': case 'heat_cool': case 'auto': return '#f0a060';
|
||||
case 'cool': return '#60b0f0';
|
||||
default: return '#bbbbbb';
|
||||
}
|
||||
}
|
||||
|
||||
_getGlowColor() {
|
||||
if (this._config?.glow_color) return this._config.glow_color;
|
||||
const state = this._getState();
|
||||
if (state?.attributes?.rgb_color) {
|
||||
const [r, g, b] = state.attributes.rgb_color;
|
||||
return `rgb(${r}, ${g}, ${b})`;
|
||||
}
|
||||
return '#fab95c';
|
||||
}
|
||||
|
||||
_getTypeLabel() {
|
||||
const entity = this._config?.entity || '';
|
||||
if (entity.startsWith('light.')) return 'Light';
|
||||
if (entity.startsWith('cover.')) return 'Cover';
|
||||
if (entity.startsWith('switch.')) return 'Switch';
|
||||
if (entity.startsWith('lock.')) return 'Lock';
|
||||
return 'Toggle';
|
||||
}
|
||||
|
||||
_getStatusText() {
|
||||
const state = this._getState();
|
||||
if (!state) return 'Unavailable';
|
||||
const map = { on: 'On', off: 'Off', open: 'Open', closed: 'Closed', locked: 'Locked', unlocked: 'Unlocked' };
|
||||
return map[state.state] || state.state;
|
||||
}
|
||||
|
||||
_getIcon() {
|
||||
if (this._config?.icon) return this._config.icon;
|
||||
const entity = this._config?.entity || '';
|
||||
if (entity.startsWith('light.')) return 'mdi:lightbulb';
|
||||
if (entity.startsWith('cover.')) return 'mdi:curtains';
|
||||
if (entity.startsWith('switch.')) return 'mdi:power-plug';
|
||||
if (entity.startsWith('lock.')) return 'mdi:lock';
|
||||
return 'mdi:toggle-switch';
|
||||
}
|
||||
|
||||
_handleClick() {
|
||||
if (!this._hass || !this._config) return;
|
||||
const action = this._config.tap_action?.action || 'toggle';
|
||||
if (action === 'toggle') {
|
||||
this._hass.callService('homeassistant', 'toggle', { entity_id: this._config.entity });
|
||||
} else if (action === 'more-info') {
|
||||
const event = new Event('hass-more-info', { composed: true });
|
||||
event.detail = { entityId: this._config.entity };
|
||||
this.dispatchEvent(event);
|
||||
}
|
||||
}
|
||||
|
||||
_render() {
|
||||
if (!this.shadowRoot || !this._config) return;
|
||||
|
||||
const isOn = this._isOn();
|
||||
const accent = this._getAccentColor();
|
||||
const glow = this._getGlowColor();
|
||||
const typeLabel = this._getTypeLabel();
|
||||
const name = this._config.name || this._getState()?.attributes?.friendly_name || this._config.entity.split('.')[1] || '';
|
||||
const status = this._getStatusText();
|
||||
const icon = this._getIcon();
|
||||
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
--accent: ${accent};
|
||||
--glow: ${glow};
|
||||
}
|
||||
.card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: rgba(36, 40, 48, 0.75);
|
||||
border: 1px solid rgba(255, 255, 255, 0.10);
|
||||
border-radius: 22px;
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
height: 100%;
|
||||
min-height: 120px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
|
||||
}
|
||||
.card:hover {
|
||||
border-color: rgba(255, 255, 255, 0.18);
|
||||
box-shadow: 0 8px 28px rgba(0,0,0,0.28);
|
||||
}
|
||||
.card.on {
|
||||
border-color: color-mix(in srgb, var(--accent) 25%, transparent);
|
||||
}
|
||||
.glow {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: -20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, color-mix(in srgb, var(--glow) 25%, transparent) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.card.on .glow { opacity: 1; }
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.icon-circle {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
flex-shrink: 0;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.card.on .icon-circle {
|
||||
background: color-mix(in srgb, var(--accent) 20%, transparent);
|
||||
}
|
||||
.icon-circle ha-icon {
|
||||
--mdc-icon-size: 28px;
|
||||
color: rgba(187, 187, 187, 0.5);
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.card.on .icon-circle ha-icon {
|
||||
color: var(--accent);
|
||||
}
|
||||
.info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.type-label {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.04em;
|
||||
color: rgba(232, 232, 232, 0.45);
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.card.on .type-label { color: var(--accent); }
|
||||
.name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.status {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
color: rgba(187, 187, 187, 0.5);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.card.on .status { color: #fff; }
|
||||
</style>
|
||||
<div class="card ${isOn ? 'on' : ''}" @click="${this._handleClick}">
|
||||
<div class="glow"></div>
|
||||
<div class="top">
|
||||
<div class="icon-circle">
|
||||
<ha-icon icon="${icon}"></ha-icon>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="type-label">${typeLabel}</div>
|
||||
<div class="name">${name}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status">${status}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
this.shadowRoot.querySelector('.card').addEventListener('click', () => this._handleClick());
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('luma-toggle-card', LumaToggleCard);
|
||||
|
||||
window.customCards = window.customCards || [];
|
||||
window.customCards.push({
|
||||
type: 'luma-toggle-card',
|
||||
name: 'Luma Toggle',
|
||||
description: 'Luma-style toggle card for lights, switches, and binary entities.',
|
||||
preview: true,
|
||||
});
|
||||
|
||||
console.info(`%c LUMA-TOGGLE-CARD %c v${LUMA_CARD_VERSION} `, 'background:#7EB8DA;color:#111;font-weight:bold', 'background:#161a22;color:#7EB8DA');
|
||||
Reference in new issue
Block a user