Lovelace: Alarm card

Alarm control panel card

UPDATE: Version 0.3.0 introduced a bug for those using it without code. Please update to 0.3.1

Alarm control panel card allows you to control alarm_control_panel domain entities.



Name Type Default Description
type string Required custom:alarm_control_panel-card
entity string Required An entity_id from alarm_control_panel domain. Example: ‘alarm_control_panel.alarm’
title string optional A title for the alarm
hide_keypad boolean false Force hiding of number keypad
display_letters boolean false Show letters on keypad
scale string 15px Allows you to scale the alarm panel
states list optional A list of possible arm buttons. Supports arm_home, arm_away, arm_night, arm_custom_bypass.
style string optional Allows to override some default styles. Example --alarm-color-disarmed: var(--label-badge-blue);
auto_enter object optional Options to auto arm and disarm. See auto_enter options.

auto_enter options:

Name Type Default Description
code_length integer Required When number of digits entered system will arm/disarm
arm_action string Required Action to invoke when after digits entered. Can be any of the same values as states above.


- type: custom:alarm_control_panel-card
  entity: alarm_control_panel.alarm
  show_keypad: true
  title: My Alarm
  style: '--alarm-color-disarmed: var(--label-badge-blue);'
    - arm_home
    - arm_away

You can find the code here


The instructions are also found on the above repo.

  1. Download alarm_control_panel-card.js
  2. Place the file in your config/www folder
  3. Include the card code in your ui-lovelace.yaml
  - url: /local/alarm_control_panel-card.js?v=1
    type: js

Note: You can change v=1 to a higher number whenever updating code to avoid having to clear cache in all browsers

  1. Write configuration for the card in your ui-lovelace.yaml
- type: custom:alarm_control_panel-card
  entity: alarm_control_panel.alarm
  title: My Alarm
    - arm_home
    - arm_away
  1. Reload your Lovelace tab (no need to restart Home Assistant or other things) and you should see the card.

FAQ: GitHub - ciotlosm/lovelace-thermostat-dark-card: 🌡 Thermostat card with a round and black feel to it

Buy Me A Coffee if you like the cards so much that wish to express your gratitude.


Nice one!

How about adding some letters to the bottom of the numbers that mimic the typical keypad. Perhaps this could be a configuration option?


Looks awesome!

Weird question though, why put this in a separate repository instead of opening a PR to the core?
I think it would help everything (the project and the users) moving forward!

1 Like

Great work @ciotlosm! :smiley:

@frenck well, the same could be said for everyHassio add-on, there is also an official repo for those :wink:

@frenck as @balloob suggested, I think going with a custom card first until majority of requests & features are ironed out helps a core PR be better and upset less people. When this passes the “green flag” from more people I’ll prepare it (with proper core compatible code) and get it in the core.


@davec when your security code uses letters as well the keyboard disappears and you just get a normal text input and use whatever keyboard your device has to input the text. Not sure how you wished exactly this to work with letters on the bottom.

That is not the same since the “official” core add-ons have a different purpose and are explicitly limited by choice. Secondly, most of my add-ons have nothing to do with Home Assistant (or even Home Automation). There is even an open discussion about limiting the core add-ons even more.

That makes sense, thank you for answering that!

It just looks so awesome… :slight_smile:

Nice. But I’ve got a little issue though. I installed it and everything works for the frist 5-10 mns and after i’ve got this screen:

And this is happening to every custom cards i’ve installed on “UI-LOVELACE”.

What browser are you using?

Thank you for your reply. I’m using Chrome Version 67.0.3396.99 (Official Build) (64-bit)

Sorry, I didn’t explain myself very well.
See image of an example security alarm keypad here -

I was trying to suggest that like a PIN number for your credit card you may use a word that translates to numbers on a keypad, such as you would find on some alarm panels and most phones.

Your access card is still a sequence of numbers, the letters on the buttons are simply a reminder of what key is what letter.

Not a requirements, just thought I would put the suggestion out there as most alarm panels I use regularly have the letters printed on the keys.

Thanks @davec . That makes a bit more sense for me now. I’ve raised and enhancement issue here:

@mistrovly make sure you have javascript_version: latest or at least you’re not forcing es5. Also make sure you add version number at the end of resources in ui-lovelace.yaml to avoid caching. Try an incognito browser just to double check how it behaves.

Card got a few new updates based on feedback.

This looks awesome! I’ll give it a try when I get home tonight. Question though, and this may be a Lovelace limitation, is it possible to make this single card extra large, or scale to a certain percentage of the display? I can see this being useful as a single pane on something like a Fire Tablet 7-inch, but would love for it to be full screen.

Yes, that is possible. Just add panel: true to a view and it will make 1st card in view fullscreen.
Currently alarm doesn’t scale properly, but it’s planned to get a fix:


Trying to use entity-filter to only show the alarm panel-card when the alarm is armed.
I’'m using following code,

      - type: entity-filter
      - alarm_control_panel.alarm_panel
      - armed_away
      - armed_home
      type: custom:alarm_control_panel-card
      entity: alarm_control_panel.alarm_panel
      title: "Alarm"
        - arm_home
        - arm_away

But I get following error:

Cannot read property "states"of undefinded

Anyone have a clue?

Unless you are using beta, that won’t work. It might work with monster card and “when” condition until 0.74 hits. See: and search for “robust”

Tried with the monster-card as well, no luck.

I’ll wait for next release :slight_smile:

Well, just using your custom-card, it is working en chrome, but from IOS app, i get following error:

.setConfig is not a function (In ‘n.setConfig(t)’, ‘n-setConfig’ is undefined).

Could be the javascript version?

Yes that is correct:
You can go with ‘latest’ if you are on IOS >11