Lovelace: Alarm card

Galazar · August 12, 2018, 2:01pm

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

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.

Thanks

David_L · August 12, 2018, 8:51pm

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');
  sound.play();

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

/ David

ciotlosm · August 12, 2018, 9:11pm

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

ciotlosm · August 12, 2018, 9:12pm

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

boneheadfraggle · August 14, 2018, 6:03pm

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.

boneheadfraggle · August 14, 2018, 8:29pm

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

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;

and
title: ' '

Today’s ugliest hack, but mission accomplished

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) ?

matt2468 · August 19, 2018, 11:07am

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

chrisaxe21 · August 19, 2018, 12:44pm

Hi

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

Download the .js file

https://raw.githubusercontent.com/ciotlosm/custom-lovelace/master/alarm_control_panel-card/alarm_control_panel-card.js

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:

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
    states:
      - 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.

ciotlosm · August 20, 2018, 8:45am

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

github.com

ciotlosm/custom-lovelace/blob/master/README.md#i-am-running-firefox-but-custom-cards-like-gauge-card-look-bad-or-dont-load-at-all-how-do-i-fix-this

# Lovelace Custom Cards
Custom cards for lovelace

## How to use

### Simple version

- Copy the `js` file from inside the card folder you like (e.g. monster-card), inside your `config/www`
- Add the `js` file as dependency inside your `ui-lovelace.yaml`

Example:

```yaml
resources:
  - url: /local/monster-card.js?v=1
    type: js
```

⚠️ Make sure you change v=1 to a higher number every time you update your card with new code!

This file has been truncated. show original

chrisaxe21 · August 20, 2018, 10:50am

I’m using Edge

ciotlosm · August 20, 2018, 12:34pm

Unfortunately Edge wasn’t supposed to be supported. You could prefix CSS here: https://github.com/ciotlosm/custom-lovelace/blob/master/alarm_control_panel-card/alarm_control_panel-card.js#L240 to be more specific to avoid bleeding to other elements.

ciotlosm · August 20, 2018, 12:36pm

@boneheadfraggle the backend needs to support arming and disarming only with code. The generic alarm implementation has this, no idea on your particular implementation, but this is not something for the card itself.

mjf55 · August 22, 2018, 4:21am

So I am having the same problem as quattro had in his post ( alarm card very thin without any text ) but I am still living in the ‘Doh’ moment. What do I need to define in configuration.yaml?
I have this in configuration.yaml
frontend:
javascript_version: latest

in ui-lovelace.yaml
resources:

url: /local/custom-lovelace/alarm_control_panel-card/alarm_control_panel-card.js?v=2
type: js

then under cards, i have this:

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

What am I missing?

ciotlosm · August 22, 2018, 5:37am

Can you please use hastebin to post your config? What is the exact error?

mjf55 · August 22, 2018, 5:46am

Posting code now. I get no ‘error’ messages, it is just the alarm card is very thin like this post https://community-home-assistant-assets.s3-us-west-2.amazonaws.com/original/3X/1/5/153e7732b7670b1ac6c141b9b7a1436428ddaa04.JPG

here is my ui-lovelace.yaml-> https://hastebin.com/wahecekiti.bash

here is my configuration.yaml -> https://hastebin.com/exafodotax.shell
( all I added was the javascript_version )

I did this to install the custom cards
git clone -b ‘master’ --single-branch --depth 1 https://github.com/ciotlosm/custom-lovelace.git

ciotlosm · August 22, 2018, 6:29am

@mjf55 Do you have an alarm entity configured in the backend? Make sure this entity actually exists:

alarm_control_panel.alarm

mjf55 · August 22, 2018, 6:34am

No I do not. Where /how would that go?

ciotlosm · August 22, 2018, 9:56am

The card presented here is just a frontend for an existing alarm. If you want to setup a new alarm and dont’ have one already you could use something like https://www.home-assistant.io/components/alarm_control_panel.manual/ or look for any available: https://www.home-assistant.io/components/#alarm

An alarm system UI makes no sense without an actual alarm system controlled by the backend and state machine.

mjf55 · August 22, 2018, 4:36pm

I have components (hardware) and a node-red panel UI working. I was wanting to replace the panel to a HA UI panel. I will read the linked documentation. Thank you…

mjf55 · August 22, 2018, 5:08pm

Got it working. For those having the same issue as me, add this to configuration.yaml:
alarm_control_panel:
platform: manual
name: “Home”
code: 1234
pending_time: 60
delay_time: 60
disarmed:
trigger_time: 0