Lovelace: Alarm card


Alright, so I have monster card working now, and the error for the alarm card had gone. But it’s just a blank bar now. Nothing is displayed in the alarm card.

Is this due to me using “Yet another take on an alarm system”? Or are people successfully using this with that?


EDIT: Got it working! I realised my entity name didn’t match up! So simple. :roll_eyes:


@grantc can you please open an issue with config sample as well on the github repo for custom-lovelace?


Awesome card, I intend to use it in a wall mounted panel.

One question though; How do I configure the auto_enter options?

  - code_lenght: 4
  - arm_action: arm_home

Is obvious not the right way, but what is?


Thanks. Try to use:

  code_length: 4
  arm_action: arm_home

Update: Corrected spelling as well


@L-mo length is spelled wrong.


Thank you @ciotlosm and @petro !
Glad I asked :slight_smile:
Keep up the good work! :vulcan_salute:


I’m running HA in a docker container.

When I restart HA using docker’s api restart command called from HA, the alarm is changing upon boot up from armed_away to disarmed.


That is related to the state machine inside HA and not to the card. The card just represents the state in the state machine and calls services to alter that state, but only updates the visual after the state machine responds positive updates.

You can check with older ‘Alarm’ more-info card on /states dashboard. Some components need ‘history’ enabled to have the internal persistence layer active to restore previous states.


This is a great card. Thanks for developing it!

I am wondering if we can add even more functionality to the card by using the “sensor.home_alarm_keypad” and exposing some of the information. I am not sure if other alarm components provide this entity (I am using envisalink)

For example, it has a field for “ready”. If the alarm is not ready we could then disable the option to “arm” (the alarm will not let me do it anyways). There is also an alpha readout that mimics my alarm panel … eg, it will say where the fault is, etc. We could use this instead of the static text so you know why the alarm is not ready. There are also some other sensors like battery level that would be nice to incorporate.

Do others have this entity in their HA state machine? If not, possibly we make a fork for the envisalink component that provides it…


@abarbaccia Any feature can be incorporated, but I’ve never seen on any other alarm those. I’m a bit reluctant to add such features specific only for one alarm. I could branch this for a POC and see how many mods it requires, but I would need mocks for the extra sensors to understand what to build.


Thanks for this, it works a treat. I don’t yet have an alarm but wanted to try, I’m just getting started with the whole alarm thing and your lovelace card is what got me to give it a go. Great stuff indeed.
Now I need to look for a space tablet :slight_smile:


@ciotlosm Great job on the card, exactly what I needed! :slight_smile:

Quick question, I’m pretty sure it’s lovelace related and not the custom card…but when I navigate to the page holding the alarm - I see a quick flash of a big red “cannot find card, etc” error message (posted several times above). It only lasts probably sub quarter of a second before the element loads normally but it’s enough to see it each time you change to/fro the page.

Any idea what might be causing this?, at the moment it’s the only custom card I use so may not be limited to that.



The touch response om my wall mounted lenovo tablet is infuriatingly bad, resulting in quite a few missed touch presses when i try to disarm/arm.

I tried adding a beep sound, similar to the real alarm keypads and it seems to have made the experience a bit better. It is still slow but at least now I know if my press failed or succeeded.

Since i am not a js developer, i just added this to the click event.

  var sound = new Audio('http://hass:8123/local/sounds/beep.wav');;

Maybe an optional click sound is something that can be added to the configuration?
Would love to get rid of my own hack…

/ David


@Galazar That is how lovelace implemented custom card loading. It assumes the card won’t work/load and then when load is successful it replaced the error with the card DOM.

I guess it needs a patch in core for different behaviour and avoid the big red box.


I will have a look. I will be away for a week unfortunately. I think best way would be to fix the button tap speed to be seamless. I find it lagging as well, which is very annoying.

@David_L Can you please add an item in the issue backlog for both the sound enhancement and the problem with button tap lag?


You could try using Fully Kiosk Browser .
It suits the alarm card combined with the kiosk option very well, and can be configured to use the device’s own touch beep. I use it with an old Sony Z1 with great result.


I have hacked the layout a little to match my old Z1 better, and to make it easier to see the state from a distance. A little more wife friendly :slight_smile:

I’d like to remove the state text in the upper left corner, but I can’t figure out how. Can you point me in the right direction?

Edit: I noticed that the state replaces the title so I set

      .state {
        font-size: 0px;

title: ' '

Today’s ugliest hack, but mission accomplished :slight_smile:

As a feature request, I’d like to require the code to be able to arm any state of the alarm (to avoid my kids arming it). Would that be possible in this card, or is that related to the alarm component (I use this) ?


This looks like such a great card, I’ll have to get this setup soon.



This is good works well, but seems to affect other entities. But first, here are my setup details:

Download the .js file

Create a folder www in home/homeassistant/.homeassistant

Copy the alarm_control_panel-card.js to the www folder

Edit the ui-lovelace.yaml file to add a new entry under resources:

- url: /local/alarm_control_panel-card.js?v=1
type: js

Add the Alarm Control Panel entity to a card in love lace

  - type: custom:alarm_control_panel-card
    entity: alarm_control_panel.home_alarm
    title: Alarm
      - arm_home
      - arm_away

Like above, others have reported the red box. This is before the panel loads:

This is when the panel has loaded. Notice how it’s affected the light icons too

Any thoughts why it’s changing it? I’ve played with the v=1, v=2, v=3 on both entries in the ui-lovelace.yaml file but not made much difference.


@chrisaxe21 if you are using firefox, see the FAQ. Shadowdom is not properly implemented yet without dev flags: