Trying to implement a custom js Lovelace alarm panel card with countdown timer

I’m working on a custom alarm panel Lovelace card, written in javascript. I’m implementing a countdown timer on state change (when arming/pending), but it’s complicated since the manual alarm doesn’t publish its “seconds remaining”. So, I’ve rigged up a solution with a separate global timer entity, which works, but the question is what to set its timer to. I’ve had to just hard code some numbers for now, because I would need to set the timer based on what state the alarm_control_panel was in before it changed state (which isn’t a published attribute), and what the configuration settings are for its delay_time and arming_time (which also aren’t published).

Would it be possible to modify the manual alarm_control_panel to publish an attribute of “seconds_remaining”, which counts down when in the arming/pending state. Or, if it’s considered too expensive (like the Timer entity) to update the attribute every second during arming/pending, then it would be helpful to have just an attribute which shows “seconds for this state”, which updates only on state change.

Thanks for any ideas / suggestions.

screenshot of my current work:

1 Like

I modified the manual component to add a new state_duration attribute, when in the arming/pending state. Sent Pull Request

My updated custom alarm panel card with countdown timer is at