Lovelace: Alarm card

Thanks!! And sorry for not Reading your faq

Alarm card got more updates and a refactoring. Make sure you check the Change log

2 Likes

I got the basic example lovelace page to work but when trying to include alarm card, I keep getting "while scanning for the next token found character ‘\t’ that cannot start any token in “/home/homeassistant/.homeassistant/ui-lovelace.yaml”, line 40, column 3

Here’s my ui-lovelace.yaml Thanks for any tip!

title: Example
# Optional background for all views. Check https://developer.mozilla.org/en-US/docs/Web/CSS/background for more examples.
background: center / cover no-repeat url("/background.png") fixed
# Exclude entities from "Unused entities" view
excluded_entities:
  - weblink.router
resources:
  - url: /local/alarm_control_panel-card.js?v=1
    type: js
views:
    # View tab title.
  - title: example
    # Optional unique id for direct access /lovelace/${id}
    id: main
    # Optional background (overwrites the global background).
    background: radial-gradient(crimson, skyblue)
    # Each view can have a different theme applied. Theme should be defined in the frontend.
    theme: dark-mode
    # The cards to show on this view.
    cards:
        # The filter card will filter entities for their state
      - type: entity-filter
        entities:
          - device_tracker.x
          - device_tracker.x
          - device_tracker.x
          - device_tracker.x
        state_filter:
          - 'home'
        card:
          type: glance
          title: People that are home
        # The picture entity card will represent an entity with a picture
      - type: picture-entity
        image: https://www.home-assistant.io/images/default-social.png
        entity: light.master_light
      - type: custom:alarm_control_panel-card
        entity: alarm_control_panel.ha_alarm
        title: My Alarm
        states:
          - arm_home
          - arm_away

You have a tab instead of spaces somewhere on that line.

Thank you much for the quick response. That was it. I felt silly as I did see the explanation from HA docs site but looking at the line and didn’t see any tab spacing lol

I’m still not able to see the card. It flashes with a red screen, I assume with errors, then minimize. See attached. There is nothing in the ha log (I ran HA at command line as monitor the scrolling screen).

My dev box is Ubuntu 18.04 LTS. Running ha in virtual env. 0.74.1

I did also pump the version v= to 2 and 3. Opened Incognito mode a few times. Also cleared Cache few times. Same issue.

Browers used were Chrome on Windows 10 and Windows 7.

I do have javascript_version: latest in configuration.yaml

Any other tip? Thanks!

Please disregard…I didn’t define alarm_control_panel in configuration.yam Doh!!!

I get the same error. Did this ever get fixed? My error is in my system log. Log Details (ERROR)
Thu Jul 26 2018 01:17:44 GMT+0430 (Afghanistan Time)

https://xxxxxxxxxx.duckdns.org:8123/local/custom_ui/alarm_control_panel-card.js?v=5:7:1 Uncaught SyntaxError: Unexpected token <

any idea what could be causing this?

Please read the FAQ. You did not download the raw file

This is awesome!

Is it possible to make it fullscreen, for use on a tablet/mobile in kiosk mode? If so - how?

Today I use MQTT Alarm Control Panel for Raspberry Pi and Android for that, but this could be a quicker way.

1 Like

Yes it can. Use panel: true for view amd add proper scale to make buttons bigger

Thanks, that was actually not what I meant, but it was good info anyway :slight_smile:

I meant the HA header:

Cand you search for a kiosk mode that can be enabled in your browser? That might do it, but I never actually tried it myself

The kiosk mode is easy with Chrome or an app on your phone, but it won’t remove the red header - it has to be done within Home Assistant. No biggie - I was just curious. Thanks anyway!

Try this https://www.reddit.com/r/homeassistant/comments/92707p/kiosk_mode_for_lovelace_hack/ made just for you :slight_smile:

1 Like

That’s so cool. Thanks!
I don’t want to sound greedy now - but is there some way to make it work on just selected views?
Maybe a future development?

Typically I’d use kiosk mode on https://hassio/lovelace/3 (the alarm keypad view) but not on https://hassio/lovelace/1, 2, 4 and so on.

Then I could just enter https://hassio/lovelace/3 in the kiosk app on the tablet and since a guest can’t change the URL, they can’t see anything else of HA, just the alarm card.

3 Likes

Doable. Will look tomorrow.

@boneheadfraggle
Update: Take another look at the gist, it’s updated. Now you only need to make sure your URL has the word kiosk in it and you’re done.
You can either use view ID or a query parameter to achieve this.

4 Likes

Hi,

Getting this error in the logs

" ERROR (MainThread) [frontend.js.latest.201807200] http://192.168.1.2:8123/local/alarm_control_panel-card.js?v=0.3.1:148:66 Uncaught TypeError: Cannot set property ‘value’ of null

When manually trying to disarm the Arlo control panel

And this appears after a HA restart - [frontend.js.latest.201807200] http://192.168.1.2:8123/frontend_latest/app-6e4d53ede29a686d41a2bb0807ecd12c.js:445:3536 Uncaught TypeError: Cannot read property ‘_stateDisplay’ of null

I’m getting this error.
I have added the alarm_control_panel-card.js in config/www
I have added the resource info in the ui-lovelace.yaml.

I am using Yet Another Take on an Alarm System, if that affects it?

Any ideas please?

alarm

Add ?v=2 or v=3 or increase the number. Your cache is expired.
Also make sure you’ve restarted HASS since creating any new files in www

I already tried changing the number and restarting ha.
The error is still there.

This is the first custom card I’ve tried with Lovelace. I might try a different custom card and see what happens.

Edit: just tried monster card. Same issue. I have tried copying the raw data and created the Js from scratch. Still no avail. Any ideas please?