Garageport: brug zigbee binary_sensor, animation baseret på last_changed

This commit is contained in:
2026-05-05 19:43:51 +02:00
parent 812199889e
commit 1525cc0070
+18 -20
View File
@@ -543,24 +543,25 @@ cards:
show_state: true show_state: true
- type: custom:button-card - type: custom:button-card
entity: cover.anne entity: binary_sensor.garageport
name: Garage name: Garage
show_name: true show_name: true
show_state: false show_state: false
show_label: true show_label: true
label: > label: >
[[[ [[[
const s = entity.state; const isOpen = entity.state === 'on';
if (s === 'opening') return 'Åbner...'; const lastChanged = new Date(entity.last_changed);
if (s === 'closing') return 'Lukker...'; const secsAgo = (Date.now() - lastChanged) / 1000;
if (s === 'open') return 'Åben'; const inMotion = secsAgo < 30;
return 'Lukket'; if (inMotion) return isOpen ? 'Åbner...' : 'Lukker...';
return isOpen ? 'Åben' : 'Lukket';
]]] ]]]
icon: > icon: >
[[[ [[[
const s = entity.state; return entity.state === 'on'
if (s === 'open' || s === 'opening') return 'mdi:garage-open-variant'; ? 'mdi:garage-open-variant'
return 'mdi:garage-variant'; : 'mdi:garage-variant';
]]] ]]]
extra_styles: | extra_styles: |
@keyframes garage-pulse { @keyframes garage-pulse {
@@ -572,26 +573,23 @@ cards:
card: card:
- animation: > - animation: >
[[[ [[[
const s = entity.state; const secsAgo = (Date.now() - new Date(entity.last_changed)) / 1000;
return (s === 'opening' || s === 'closing') return secsAgo < 30 ? 'garage-pulse 0.8s ease-in-out infinite' : 'none';
? 'garage-pulse 0.8s ease-in-out infinite'
: 'none';
]]] ]]]
icon: icon:
- color: > - color: >
[[[ [[[
const s = entity.state; const isOpen = entity.state === 'on';
if (s === 'open') return 'orange'; const secsAgo = (Date.now() - new Date(entity.last_changed)) / 1000;
if (s === 'opening' || s === 'closing') return 'dodgerblue'; if (secsAgo < 30) return 'dodgerblue';
return 'var(--primary-text-color)'; return isOpen ? 'orange' : 'var(--primary-text-color)';
]]] ]]]
label: label:
- font-size: 11px - font-size: 11px
- color: > - color: >
[[[ [[[
const s = entity.state; const secsAgo = (Date.now() - new Date(entity.last_changed)) / 1000;
if (s === 'opening' || s === 'closing') return 'dodgerblue'; return secsAgo < 30 ? 'dodgerblue' : 'var(--secondary-text-color)';
return 'var(--secondary-text-color)';
]]] ]]]
tap_action: tap_action:
action: call-service action: call-service