Questo è un esempio di custom button card con custom field e creazione html e javascript
nel custom field vengono create le variabili che verranno inglobate nell'html
Quest'esempio è relativo a una card per climate
- type: custom:button-card
entity: yourEntity
show_icon: false
show_name: false
show_state: false
custom_fields:
info: |
[[[
const e = states['youEntity'];
const isOn = e && e.state !== 'off';
const temp = e ? (e.attributes.temperature ?? 20) : 20;
const cur = e ? (e.attributes.current_temperature ?? '--') : '--';
const mode = e ? e.state : 'off';
const fan = e ? (e.attributes.fan_mode || '--') : '--';
const minT = e ? (e.attributes.min_temp ?? 16) : 16;
const maxT = e ? (e.attributes.max_temp ?? 30) : 30;
const pct = Math.max(0, Math.min(100, ((temp - minT) / (maxT - minT)) * 100));
const angle = (pct / 100) * 360;
const modeLabel = {'cool':'RAFFREDDAMENTO','heat':'RISCALDAMENTO','auto':'AUTO','dry':'DEUMIDIFICA','fan_only':'VENTILAZIONE','off':'SPENTO'}[mode] || mode.toUpperCase();
const accent = '#4FACFE';
const accentDark = '#1C6FB0';
const tempInt = Math.trunc(temp);
const tempDec = Math.round((temp - tempInt) * 10);
return `
<div style="font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;width:400px;display:flex;align-items:center;justify-content:space-between;gap:12px;">
<div style="text-align:left;flex-shrink:0;">
<div style="color:rgba(255,255,255,0.88);font-size:16px;font-weight:200;letter-spacing:3px;text-transform:uppercase;line-height:1.4;">
CLIMA<br>SALA
</div>
</div>
<div style="position:relative;width:108px;height:108px;flex-shrink:0;">
<svg width="108" height="108" viewBox="0 0 108 108" style="position:absolute;top:0;left:0;">
<circle cx="54" cy="54" r="47" fill="none" stroke="${isOn ? accentDark : 'rgba(255,255,255,0.10)'}" stroke-width="14" />
<circle cx="54" cy="54" r="47" fill="none" stroke="${isOn ? accent : 'rgba(255,255,255,0.22)'}" stroke-width="14"
stroke-dasharray="${(angle/360)*295.3} 295.3" stroke-linecap="round" transform="rotate(-90 54 54)" />
</svg>
<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:80px;height:80px;border-radius:50%;background:rgba(22,26,34,0.92);
display:flex;flex-direction:column;align-items:center;justify-content:center;
box-shadow:inset 0 2px 8px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06);">
<div style="display:flex;align-items:flex-end;color:#fff; ">
<span style="font-size:24px;font-weight:600;line-height:1;">${tempInt}</span>
<span style="font-size:11px;font-weight:500;margin-bottom:3px;">,${tempDec}°</span>
</div>
<div style="color:${isOn ? accent : 'rgba(255,255,255,0.3)'};font-size:8px;font-weight:700;letter-spacing:0.6px;margin-top:1px;">TARGET</div>
</div>
</div>
<div style="text-align:left;flex:1;min-width:0;">
<div style="display:flex;align-items:center;gap:6px;">
<span style="color:${isOn ? accent : 'rgba(255,255,255,0.4)'};font-size:22px;font-weight:700;">${cur}°</span>
<span style="color:rgba(255,255,255,0.4);font-size:12px;">attuale</span>
</div>
<div style="color:rgba(255,255,255,0.65);font-size:13px;font-weight:600;margin-top:6px;letter-spacing:0.3px;">${modeLabel}</div>
<div style="color:rgba(255,255,255,0.45);font-size:12px;margin-top:3px;">💨 Ventola ${fan}</div>
</div>
</div>`;
]]]
card_mod:
style: |
#info { width: 100%; }
La Seconda parte è relativa ad una card con toogle
- type: custom:button-card
entity: climate.sala
show_name: false
show_icon: false
tap_action:
action: call-service
service: climate.toggle
service_data:
entity_id: yourEntity
styles:
card:
- background: rgba(255,255,255,0.05) !important
- backdrop-filter: blur(24px) saturate(180%) !important
- -webkit-backdrop-filter: blur(24px) saturate(180%) !important
- border: 1px solid rgba(255,255,255,0.18) !important
- border-top: none !important
- border-radius: 0 0 24px 24px !important
- box-shadow: 0 8px 20px rgba(0,0,0,0.20) !important
- padding: 10px !important
- height: 40px !important
- margin-top: -1px !important
custom_fields:
toggle: |
[[[
const e = states['yourEntity'];
const isOn = e && e.state !== 'off';
const accent = '#4FACFE';
return `
<div style="display:flex;align-items:center;justify-content:center;gap:8px;
font-family:-apple-system,sans-serif;font-size:13px;font-weight:600;letter-spacing:0.5px;
color:${isOn ? accent : 'rgba(255,255,255,0.5)'};">
<ha-icon icon="${isOn ? 'mdi:power' : 'mdi:power-off'}" style="width:18px;height:18px;color:${isOn ? accent : 'rgba(255,255,255,0.5)'};"></ha-icon>
<span>${isOn ? 'ACCESO · TOCCA PER SPEGNERE' : 'SPENTO · TOCCA PER ACCENDERE'}</span>
</div>`;
]]]
card_mod:
style: |
#toggle { width: 100%; }
ha-card {
top:-10px;
}
card_mod:
style: |
#root { gap: 0 !important; }