Lovelace: Alarm card

[ciotlosm (Marius)]

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.

Options

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.

Example

- 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);'
  states:
    - arm_home
    - arm_away

You can find the code here

Instructions

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

resources:
  - 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

4. Write configuration for the card in your ui-lovelace.yaml

- type: custom:alarm_control_panel-card
  entity: alarm_control_panel.alarm
  title: My Alarm
  states:
    - arm_home
    - arm_away

5. 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

if you like the cards so much that wish to express your gratitude.

[davec (David Conlin)]

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?

Dave

[frenck (Franck Nijhof)]

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!

[ludeeus]

Great work @ciotlosm!

@frenck

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!

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

[ciotlosm (Marius)]

@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.

[ciotlosm (Marius)]

@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.

[frenck (Franck Nijhof)]

@ludeeus

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

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.

@ciotlosm

@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.

That makes sense, thank you for answering that!

It just looks so awesome…

[mistrovly (Marc-Edouard Louis)]

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”.

[ciotlosm (Marius)]

What browser are you using?

[mistrovly (Marc-Edouard Louis)]

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

[davec (David Conlin)]

Sorry, I didn’t explain myself very well.
See image of an example security alarm keypad here - https://goo.gl/images/8fKdwb

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.

[ciotlosm (Marius)]

Thanks @davec . That makes a bit more sense for me now. I’ve raised and enhancement issue here: https://github.com/ciotlosm/custom-lovelace/issues/78

@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.

[ciotlosm (Marius)]

Card got a few new updates based on feedback.

[dannyhanes]

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.

[ciotlosm (Marius)]

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: https://github.com/ciotlosm/custom-lovelace/issues/82

[bloody2k (Stefan Grundtworm Larsen)]

Hi,

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
    entities:
      - alarm_control_panel.alarm_panel
    state_filter:
      - armed_away
      - armed_home
    card:
      type: custom:alarm_control_panel-card
      entity: alarm_control_panel.alarm_panel
      title: "Alarm"
      states:
        - arm_home
        - arm_away

But I get following error:

Cannot read property "states"of undefinded

Anyone have a clue?

[ciotlosm (Marius)]

Unless you are using beta, that won’t work. It might work with monster card and “when” condition until 0.74 hits. See: https://rc--home-assistant-docs.netlify.com/lovelace/changelog/ and search for “robust”

[bloody2k (Stefan Grundtworm Larsen)]

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

I’ll wait for next release

[bloody2k (Stefan Grundtworm Larsen)]

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?

[ciotlosm (Marius)]

Yes that is correct: https://github.com/ciotlosm/custom-lovelace#custom-components-dont-load-on-my-ios-device
You can go with ‘latest’ if you are on IOS >11