Lovelace: Alarm card


#83

It’s not something for the UI, but for the backend to support. It probably can be achieved also with automation if the basic backend component doesn’t support this.


#84

Thanks for the reply. You’re right. I can probably do that with automation. Should have thought about this…
Thanks!


#85

please, can some one tell me how to add the Arm Night button?


#86

See docs, add it under states in config.


#87

iv’e already done, the problem is that the button it’s blank…23


#88

I don’t get it? Can you post your whole config för the alarm-panel? I also want to get at big icon.


#89

Sorry, I threw that away and went for the original one.
I still think my looks better though :wink:


#90

I want it to be like picture 2 but get picture 1. Why?


ui-lovelace.yaml

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

title: PimpRoad 9
views:
  - title: Home
    icon: mdi:home
    cards:
      - type: custom:alarm_control_panel-card
        entity: alarm_control_panel.larm
        show_keypad: true
        title: PimpRoad 9
        style: '--alarm-color-disarmed: var(--label-badge-green);'
        states:
          #- arm_home
          - arm_away
        scale: 16px
        labels:
          ui.card.alarm_control_panel.code: Ange kod
          state.alarm_control_panel.arm_away: Borta!
      - type: entities
        entities:
          - sensor.ytterdorr_status
      - type: entity-filter
        entities:
          - sensor.sara_status
          - sensor.niclas_status
          - sensor.hugo_status
        state_filter:
          - Hemma
        card:
          type: glance
          column_width: 20%
          #title: Vem är Hemma
          show_state: false
          show_name: false
      - type: weather-forecast
        entity: weather.dark_sky
      - type: history-graph
        hours_to_show: 168
        refresh_interval: 3600
        entities:
          - entity: sensor.qubino_zmnhadx_flush_1_relay_temperature

#91

Hi! I can’t get the card to work. I get custom element dosen’t exist: alarm_control_panel-card.
I have download the alarm_control_panel-card to my www folder in config. I also tried to change te v=number - but no luck.

This is my config

resources:
  - url: /local/mini-media-player-bundle.js?v=0.9.2
    type: module
  - url: /local/alarm_control_panel-card.js?v=5
    type: js

  - title: Alarm
    icon: mdi:security-home
    panel: true
    id: alarm
    cards:
      - type: vertical-stack
        cards:
          - type: custom:alarm_control_panel-card
            title: Larm
            entity: alarm_control_panel.ha_alarm
            scale: 100px
            states:
              - arm_away
          - type: entities
            title: Detektorer
            show_header_toggle: false
            entities:
              - input_boolean.grovkok
              - input_boolean.hall
              - input_boolean.vardagsrum

#92

@ciotlosm I love this card, but the touch delay on a mobile device is killing me - especially on slightly older devices.

I am not a js programmer, but have you considered using touch-action: manipulation to remove the touch delay on mobile browsers? I would have a go myself but at best I would just be hacking your code around.

Thanks


#93

Ok - I worked it out after a bit of searching in google and the improvement is noticeable. For anyone having issues with keypad responsiveness on a mobile browser (tested on Android Chrome), I added touch-action: manipulation to the style section of the code, as shown below, changed the version number in resources section of ui-lovelace.yaml to force a re-read, and slight improvement in keypad responsiveness.

@ciotlosm maybe you can test this and see if you get similar results?

  _style(icon_style) {
    const style = document.createElement('style');
    style.textContent = `
      ha-card {
        touch-action: manipulation;
        padding-bottom: 16px;
        position: relative;
        --alarm-color-disarmed: var(--label-badge-green);
        --alarm-color-pending: var(--label-badge-yellow);
        --alarm-color-triggered: var(--label-badge-red);
        --alarm-color-armed: var(--label-badge-red);
        --alarm-color-autoarm: rgba(0, 153, 255, .1);
        --alarm-state-color: var(--alarm-color-armed);
        --base-unit: ${this._config.scale};
        font-size: calc(var(--base-unit));
        ${icon_style}
      }

#94

I’m trying to get this to work with my abode alarm. Works fine but I can’t get the number pad to show:

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

Any ideas? Or is the abode component just not capable?


#95

I have had som issues with the alarm card but in incognito browser it works. That is the issue?


#96

Same thing… no pad in incognito either


#97

remove hide_keypad: false and replace with show_keypad: true


#98

That doesn’t work either


#99

hide_keypad: true does not seem to work.
Also the example says show_keypad instead of hide_keypad.
I have tried both, and noe of them seem to be able to hide the keypad.


#100

This in my config:

in packages/alarm.yaml

alarm_control_panel:
  - platform: manual
    name: Larm
    code: !secret alarm_code
    pending_time: 10
    delay_time: 3
    trigger_time: 2
    disarmed:
      trigger_time: 0
    armed_home:
      pending_time: 0
      delay_time: 0

and this in ui-lovalace.yaml

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

title: PimpRoad 9
views:
  - title: Home
    icon: mdi:home
    cards:
      - type: custom:alarm_control_panel-card
        entity: alarm_control_panel.larm
        show_keypad: true
        title: PimpRoad 9
        style: '--alarm-color-disarmed: var(--label-badge-green);'
        states:
          #- arm_home
          - arm_away
        scale: 16px
        labels:
          ui.card.alarm_control_panel.code: Ange kod
          state.alarm_control_panel.arm_away: Borta!

Dont forget to place the “alarm_control_panel-card.js” file in the www-folder

AND this works!


#101

Hi
I can’t seem to get the colour of when it’s armed/disarmed to work

style: ‘–alarm-color-armed_away: var(–label-badge-red);’

Is there anything I’m missing?


#102

Hello gents! Today I upgraded to HA version 0.85.0 and had a lot of fixing to do due to the new entity IDs, but that aside, all is now well except the alarm card that now looks like this:

image

This worked well last night so this seems to be influenced by the last release…