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.
Thanks for the reply. You’re right. I can probably do that with automation. Should have thought about this…
Thanks!
please, can some one tell me how to add the Arm Night button?
See docs, add it under states in config.
iv’e already done, the problem is that the button it’s blank…
I don’t get it? Can you post your whole config för the alarm-panel? I also want to get at big icon.
Sorry, I threw that away and went for the original one.
I still think my looks better though 
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_temperatureHi! 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@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
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}
}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?
I have had som issues with the alarm card but in incognito browser it works. That is the issue?
Same thing… no pad in incognito either
remove hide_keypad: false and replace with show_keypad: true
That doesn’t work either
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.
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!
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?
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:
This worked well last night so this seems to be influenced by the last release…
1 Like