31 | 
32 | 
33 | 
34 |
35 | ## Installation
36 |
37 | To use this card in Home Assistant:
38 |
39 | 
40 |
41 |
42 | * copy the `AlarmPanel.js` into the www folder in your config folder (create the www folder if it's missing, and restart Home Assistant)
43 | * install it as a custom Lovelace resource in Configuration > Dashboards > Resources. (Resources is under the top right ... menu).
44 | * Turn on Advanced Mode in your user profile if you can't see the Resources tab.
45 | * The Url of the file will be `/local/AlarmPanel.js`, and the type is "JavaScript Module".
46 | * If you are making local modifications to the file, you can add a version number to the end of the Url, like `/local/AlarmPanel.js?v=3` and increment the number each time you make a change, to force it to use the new version instead of your browser cached version.
47 | * add the alarm panel to your lovelace view using a Manual card, with type set as `type: 'custom:alarm_control_panel-card'` and specify your alarm\_control\_panel entity as named in your configuration.yaml (e.g. `entity: alarm_control_panel.house`). See my [example AlarmLovelaceDashboard yaml configs](https://github.com/jcooper-korg/AlarmPanel/blob/master/ExampleConfig).
48 |
49 | ## Card configuration options
50 |
51 | See the [ExampleConfig](https://github.com/jcooper-korg/AlarmPanel/tree/master/ExampleConfig) folder for my configuration files. See details on my setup in the Example Configuration section below.
52 |
53 | The card options are:
54 |
55 | * `entity`: (required string) the name of the manual `alarm_control_panel` entity
56 | * `show_countdown_timer`: (optional boolean). default false. set to true to show countdown timer, or false to hide it. If enabled, you must also configure the `durations` list, specifying a duration in seconds for the arming, and pending states. These times should match the times you specified in your manual config.
57 | * `scale`: (optional string). default is 14px. increase/decrease the size of the buttons/text/etc by changing this number
58 | * `title`: (optional string) if provided will show this title at the top of the card, and the alarm state will be below it. if not provided, will show the alarm state as the title (which saves some vertical space, if you are space constrained, like on a wall tablet)
59 | * `states`: (optional list). list of arming states to support. Default is `armed_away` and `armed_home`. If you use more than two, you may need to adjust the `.actions button` widths
60 | * `confirm_entities`: (optional list) a list of sensors which will be continuously monitored when disarmed so it can show Ready/Not ready text in the card header. If `confirm_entities` is specified, you may optionally also set `disable_arm_if_not_ready` to disable the arm buttons and auto_enter action unless all the listed sensors are ready. And if `disable_arm_if_not_ready` is set, you may also optionally set `show_override_if_not_ready` to show an override checkbox when the entities are not ready, which will re-enable the arming buttons (allowing you, for example, to arm the alarm but leave a window open).
61 | * `labels`: (optional list) list of text replacements, allowing you to customize the text that is shown for `ui.card.alarm_control_panel.arm_away`, `ui.card.alarm_control_panel.arm_home`, `ui.card.alarm_control_panel.clear_code`, `ready` and `not_ready`
62 | * `display_letters`: (optional boolean) shows letters on number pad buttons like a telephone keypad
63 | * `style`: (optional string) this text will be appended to the card css style, allowing you to override colors, etc. Also see [Thomas Loven's card mod](https://github.com/thomasloven/lovelace-card-mod)
64 | * `auto_hide`: (optional boolean) hides the keypad and action buttons. click on the badge to show/hide them.
65 | * `auto_enter`: (optional object). you must also specify `code_length` and `arm_action`. This will automatically disarm or arm with the specified arm\_action when entering the code. When a code of the correct length is entered and the alarm is currently armed, the alarm will be disarmed. If `alarm_control_panel.code_arm_required` is on and the alarm is currently disarmed, and a code of the correct length is entered, the arm_action will be triggered (e.g. 'arm\_home' or 'arm\_away').
66 |
67 | ## My Setup
68 |
69 | My alarm setup consists of:
70 |
71 | * Home Assistant running on Hass.io, on a [Raspberry Pi 3b+](https://www.raspberrypi.org/products/raspberry-pi-3-model-b-plus/)
72 | * a wall-mounted 7" Amazon Fire Tablet, running [Fully Kiosk](https://www.fully-kiosk.com). NOTE: you may need to manually update the WebView component on older Fire tablets. Mine is a 7th Gen (2017), running FireOS 5.1.1, and the [latest compatible WebView is v110](https://amazon-system-webview.en.uptodown.com/android/versions)
73 | * the iOS [Home Assistant Companion](https://apps.apple.com/us/app/home-assistant/id1099568401)
74 | * an alarm panel kit from [Konnected.io](https://konnected.io/collections/shop-now) with various door/window/motion/smoke sensors, and a siren, beeper, and red/green LEDs
75 |
76 | ## Example Configuration
77 | My config files are in the [ExampleConfig](https://github.com/jcooper-korg/AlarmPanel/tree/master/ExampleConfig) folder.
78 |
79 | * My Alarm lovelace dashboard has two cards- the new custom alarm panel card, and a [Conditional Card](https://www.home-assistant.io/lovelace/conditional) which shows when any of the door/window sensors is opened, while disarmed.
80 | * I have configured the custom card with:
81 | * label replacements to use shorter all-caps words for the AWAY, HOME, etc.
82 | * `confirm_entities` list of sensors, so that it shows "Ready" if they're all off, or "Not ready" if any are on
83 | * `disable_arm_if_not_ready` and `show_override_if_not_ready` both set, so the arm buttons are disabled unless all the `confirm_entities` are ready, or the override checkbox is checked
84 | * countdown timer enabled and durations in seconds specified for arming (60) and pending (30) to match the `arming_time` and `delay_time` in the manual platform's armed_away config
85 | * I have set up automations to handle:
86 | * turning on/off the green/red LEDs, beeper, and siren based on sensor entity states and the manual `alarm_control_panel` armed/disarmed/triggered state
87 | * notifying our iphones when armed / disarmed or when triggered
88 | * triggering the alarm on smoke sensors, regardless of arming state
89 | * In order to include the name of the entity that triggered the alarm in the trigger notifications, I'm using an `input_text` entity in my config, which is set when the alarm trigger automation runs, and is then referenced by the notification
90 | * In order to be able to trigger the alarm immediately for some sensors, while other sensors (e.g. entry doors) are delayed, I have a script called `trigger_alarm_immediately` which first disarms the alarm, and then triggers. Requires that the the `delay_time` is set to 0 for the disarmed state in the `alarm_control_panel` configuration.
91 | * I created a separate user named Alarm Panel that I use to log in from my wall mounted tablet. I'm using [Custom Header](https://maykar.github.io/custom-header) to hide the sidebar and title bar on the wall mounted tablet for that user.
92 |
93 | ## Credits
94 |
95 | * This custom alarm panel card was forked in September 2020 from [Kevin Cooper's repo](https://github.com/JumpMaster/custom-lovelace) (no relation).
96 | * The appearance of the countdown timer was inspired by [John Schult's countdown360 project](https://github.com/johnschult/jquery.countdown360).
97 |
98 |
99 |
--------------------------------------------------------------------------------
/ExampleConfig/automations.yaml:
--------------------------------------------------------------------------------
1 | - id: '1598210904880'
2 | alias: Turn on Beeper
3 | description: When entering pending or warning state, sound the beeper
4 | trigger:
5 | - entity_id: alarm_control_panel.house
6 | from: disarmed
7 | platform: state
8 | to: arming
9 | - entity_id: alarm_control_panel.house
10 | platform: state
11 | to: pending
12 | condition: []
13 | action:
14 | - device_id: 50e2350f1b4f40cc835509d0f34d9bcc
15 | domain: switch
16 | entity_id: switch.beep
17 | type: turn_on
18 | mode: single
19 | - id: '1598211133176'
20 | alias: Alarm Triggered
21 | description: ''
22 | trigger:
23 | - entity_id: alarm_control_panel.house
24 | platform: state
25 | to: triggered
26 | condition: []
27 | action:
28 | - device_id: cd4e154d91e749b084a3196d9371826c
29 | domain: switch
30 | entity_id: switch.siren
31 | type: turn_on
32 | - data:
33 | data:
34 | subtitle: The Alarm is Sounding
35 | message: 'Home Alarm triggered by: {{ states(''input_text.trigger_source'')
36 | }}'
37 | title: Smart Home Alert
38 | service: notify.alarm_notification_group
39 | mode: single
40 | - id: '1598211302522'
41 | alias: Alarm Disarmed
42 | description: ''
43 | trigger:
44 | - entity_id: alarm_control_panel.house
45 | platform: state
46 | to: disarmed
47 | condition: []
48 | action:
49 | - device_id: cd4e154d91e749b084a3196d9371826c
50 | domain: switch
51 | entity_id: switch.siren
52 | type: turn_off
53 | - device_id: 50e2350f1b4f40cc835509d0f34d9bcc
54 | domain: switch
55 | entity_id: switch.beep
56 | type: turn_off
57 | - device_id: 50e2350f1b4f40cc835509d0f34d9bcc
58 | domain: switch
59 | entity_id: switch.red_led
60 | type: turn_off
61 | - service: notify.alarm_notification_group
62 | data:
63 | title: Smart Home Alert
64 | message: Alarm Disarmed
65 | mode: single
66 | - id: '1598213488706'
67 | alias: All zones clear while disarmed
68 | description: Turn on the green LED when all zones are clear while disarmed
69 | trigger:
70 | - entity_id: group.alarm_zones_for_led
71 | platform: state
72 | to: 'off'
73 | - entity_id: alarm_control_panel.house
74 | platform: state
75 | to: disarmed
76 | condition:
77 | - condition: state
78 | entity_id: alarm_control_panel.house
79 | state: disarmed
80 | - condition: state
81 | entity_id: group.alarm_zones
82 | state: 'off'
83 | action:
84 | - device_id: 50e2350f1b4f40cc835509d0f34d9bcc
85 | domain: switch
86 | entity_id: switch.green_led
87 | type: turn_on
88 | mode: single
89 | - id: '1598213553348'
90 | alias: Alarm zone opened while disarmed
91 | description: Turn off the green LED when any alarm zone is open while disarmed
92 | trigger:
93 | - entity_id: group.alarm_zones_for_led
94 | platform: state
95 | to: 'on'
96 | - entity_id: alarm_control_panel.house
97 | platform: state
98 | to: disarmed
99 | condition:
100 | - condition: state
101 | entity_id: alarm_control_panel.house
102 | state: disarmed
103 | - condition: state
104 | entity_id: group.alarm_zones
105 | state: 'on'
106 | action:
107 | - device_id: 50e2350f1b4f40cc835509d0f34d9bcc
108 | domain: switch
109 | entity_id: switch.green_led
110 | type: turn_off
111 | mode: single
112 | - id: '1598213810560'
113 | alias: Alarm Armed
114 | description: ''
115 | trigger:
116 | - entity_id: alarm_control_panel.house
117 | platform: state
118 | to: armed_home
119 | - entity_id: alarm_control_panel.house
120 | platform: state
121 | to: armed_away
122 | condition: []
123 | action:
124 | - device_id: 50e2350f1b4f40cc835509d0f34d9bcc
125 | domain: switch
126 | entity_id: switch.beep
127 | type: turn_off
128 | - device_id: 50e2350f1b4f40cc835509d0f34d9bcc
129 | domain: switch
130 | entity_id: switch.green_led
131 | type: turn_off
132 | - device_id: 50e2350f1b4f40cc835509d0f34d9bcc
133 | domain: switch
134 | entity_id: switch.red_led
135 | type: turn_on
136 | - service: notify.alarm_notification_group
137 | data:
138 | title: Smart Home Alert
139 | message: Alarm Armed
140 | mode: single
141 | - id: '1600468597816'
142 | alias: Trigger Immediately when Arming
143 | description: disarm first, then trigger, causes immediate siren due to disarmed
144 | delay_time=0
145 | trigger:
146 | - entity_id: binary_sensor.office_window
147 | from: 'off'
148 | platform: state
149 | to: 'on'
150 | - entity_id: binary_sensor.living_room_window
151 | from: 'off'
152 | platform: state
153 | to: 'on'
154 | - entity_id: binary_sensor.kitchen_sink_window
155 | from: 'off'
156 | platform: state
157 | to: 'on'
158 | - entity_id: binary_sensor.kitchen_table_window
159 | from: 'off'
160 | platform: state
161 | to: 'on'
162 | - entity_id: binary_sensor.dining_room_window
163 | from: 'off'
164 | platform: state
165 | to: 'on'
166 | - entity_id: binary_sensor.master_bedroom_window
167 | from: 'off'
168 | platform: state
169 | to: 'on'
170 | - entity_id: binary_sensor.master_bath_window
171 | from: 'off'
172 | platform: state
173 | to: 'on'
174 | - entity_id: binary_sensor.bedroom1_window
175 | from: 'off'
176 | platform: state
177 | to: 'on'
178 | - entity_id: binary_sensor.bedroom2_window
179 | from: 'off'
180 | platform: state
181 | to: 'on'
182 | - entity_id: binary_sensor.side_garage_door
183 | from: 'off'
184 | platform: state
185 | to: 'on'
186 | condition:
187 | - condition: state
188 | entity_id: alarm_control_panel.house
189 | state: arming
190 | action:
191 | - data_template:
192 | entity_id: input_text.trigger_source
193 | value: '{{ trigger.to_state.attributes.friendly_name }}'
194 | service: input_text.set_value
195 | - data: {}
196 | service: script.trigger_alarm_immediately
197 | mode: single
198 | - id: '1600468682227'
199 | alias: Trigger Immediately when Armed Home
200 | description: ''
201 | trigger:
202 | - entity_id: binary_sensor.office_window
203 | from: 'off'
204 | platform: state
205 | to: 'on'
206 | - entity_id: binary_sensor.living_room_window
207 | from: 'off'
208 | platform: state
209 | to: 'on'
210 | - entity_id: binary_sensor.kitchen_sink_window
211 | from: 'off'
212 | platform: state
213 | to: 'on'
214 | - entity_id: binary_sensor.kitchen_table_window
215 | from: 'off'
216 | platform: state
217 | to: 'on'
218 | - entity_id: binary_sensor.dining_room_window
219 | from: 'off'
220 | platform: state
221 | to: 'on'
222 | - entity_id: binary_sensor.master_bedroom_window
223 | from: 'off'
224 | platform: state
225 | to: 'on'
226 | - entity_id: binary_sensor.master_bath_window
227 | from: 'off'
228 | platform: state
229 | to: 'on'
230 | - entity_id: binary_sensor.bedroom1_window
231 | from: 'off'
232 | platform: state
233 | to: 'on'
234 | - entity_id: binary_sensor.bedroom2_window
235 | from: 'off'
236 | platform: state
237 | to: 'on'
238 | - entity_id: binary_sensor.side_garage_door
239 | from: 'off'
240 | platform: state
241 | to: 'on'
242 | - entity_id: binary_sensor.garage_door
243 | from: 'off'
244 | platform: state
245 | to: 'on'
246 | - entity_id: binary_sensor.front_door
247 | from: 'off'
248 | platform: state
249 | to: 'on'
250 | - entity_id: binary_sensor.back_door
251 | from: 'off'
252 | platform: state
253 | to: 'on'
254 | condition:
255 | - condition: state
256 | entity_id: alarm_control_panel.house
257 | state: armed_home
258 | action:
259 | - data_template:
260 | entity_id: input_text.trigger_source
261 | value: '{{ trigger.to_state.attributes.friendly_name }}'
262 | service: input_text.set_value
263 | - data: {}
264 | entity_id: alarm_control_panel.house
265 | service: alarm_control_panel.alarm_trigger
266 | mode: single
267 | - id: '1600468738107'
268 | alias: Trigger Immediately when Armed Away
269 | description: disarm first, then trigger, causes immediate siren due to disarmed
270 | delay_time=0
271 | trigger:
272 | - entity_id: binary_sensor.office_window
273 | from: 'off'
274 | platform: state
275 | to: 'on'
276 | - entity_id: binary_sensor.living_room_window
277 | from: 'off'
278 | platform: state
279 | to: 'on'
280 | - entity_id: binary_sensor.kitchen_sink_window
281 | from: 'off'
282 | platform: state
283 | to: 'on'
284 | - entity_id: binary_sensor.kitchen_table_window
285 | from: 'off'
286 | platform: state
287 | to: 'on'
288 | - entity_id: binary_sensor.dining_room_window
289 | from: 'off'
290 | platform: state
291 | to: 'on'
292 | - entity_id: binary_sensor.master_bedroom_window
293 | from: 'off'
294 | platform: state
295 | to: 'on'
296 | - entity_id: binary_sensor.master_bath_window
297 | from: 'off'
298 | platform: state
299 | to: 'on'
300 | - entity_id: binary_sensor.bedroom1_window
301 | from: 'off'
302 | platform: state
303 | to: 'on'
304 | - entity_id: binary_sensor.bedroom2_window
305 | from: 'off'
306 | platform: state
307 | to: 'on'
308 | - entity_id: binary_sensor.side_garage_door
309 | from: 'off'
310 | platform: state
311 | to: 'on'
312 | - entity_id: binary_sensor.hall_motion
313 | from: 'off'
314 | platform: state
315 | to: 'on'
316 | - entity_id: binary_sensor.living_room_motion
317 | from: 'off'
318 | platform: state
319 | to: 'on'
320 | - entity_id: binary_sensor.glass_break_master_bath
321 | from: 'off'
322 | platform: state
323 | to: 'on'
324 | - entity_id: binary_sensor.glass_break_kitchen
325 | from: 'off'
326 | platform: state
327 | to: 'on'
328 | - entity_id: binary_sensor.glass_break_other
329 | from: 'off'
330 | platform: state
331 | to: 'on'
332 | condition:
333 | - condition: state
334 | entity_id: alarm_control_panel.house
335 | state: armed_away
336 | action:
337 | - data_template:
338 | entity_id: input_text.trigger_source
339 | value: '{{ trigger.to_state.attributes.friendly_name }}'
340 | service: input_text.set_value
341 | - data: {}
342 | service: script.trigger_alarm_immediately
343 | mode: single
344 | - id: '1600468865168'
345 | alias: Trigger Immediately on Smoke
346 | description: disarm first, then trigger, causes immediate siren due to disarmed
347 | delay_time=0
348 | trigger:
349 | - entity_id: binary_sensor.hall_smoke
350 | from: 'off'
351 | platform: state
352 | to: 'on'
353 | - entity_id: binary_sensor.carbon_monoxide_kitchen
354 | from: 'off'
355 | platform: state
356 | to: 'on'
357 | condition: []
358 | action:
359 | - data_template:
360 | entity_id: input_text.trigger_source
361 | value: '{{ trigger.to_state.attributes.friendly_name }}'
362 | service: input_text.set_value
363 | - data: {}
364 | service: script.trigger_alarm_immediately
365 | mode: single
366 | - id: '1600472249835'
367 | alias: Trigger Pending When Armed Away
368 | description: ''
369 | trigger:
370 | - entity_id: binary_sensor.front_door
371 | from: 'off'
372 | platform: state
373 | to: 'on'
374 | - entity_id: binary_sensor.back_door
375 | from: 'off'
376 | platform: state
377 | to: 'on'
378 | - entity_id: binary_sensor.garage_door
379 | from: 'off'
380 | platform: state
381 | to: 'on'
382 | condition:
383 | - condition: state
384 | entity_id: alarm_control_panel.house
385 | state: armed_away
386 | action:
387 | - data: {}
388 | entity_id: alarm_control_panel.house
389 | service: alarm_control_panel.alarm_trigger
390 | mode: single
391 |
--------------------------------------------------------------------------------
/AlarmPanel.js:
--------------------------------------------------------------------------------
1 | // Alarm Control Panel custom card
2 | // Orignally by Kevin Cooper (no relation) at https://github.com/JumpMaster/custom-lovelace
3 | // Modified by John S Cooper at https://github.com/jcooper-korg/AlarmPanel
4 | // customized button appearance and colors, hide keypad when disarmed if !code_arm_required, new confirm_entities config option, etc
5 | // See example config at https://github.com/jcooper-korg/AlarmPanel/ExampleConfig
6 | //
7 | // if confirm_entities is provided, then when disarmed, it will show "Ready" in
8 | // the status title if all those entities are off, otherwise it'll show "Not Ready".
9 | // (can customize those strings in the labels config using ready and not_ready).
10 | // also, if confirm_entities, disable_arm_if_not_ready, and show_override_if_not_ready are all set, then
11 | // it will show an Override checkbox when not ready.
12 | //
13 | // if show_countdown_timer is enabled, then the config should specify a list of durations (in seconds) for the arming and pending states
14 | //
15 | // if alarm_control_panel.code_arm_required is set, the keypad will be shown when disarmed, regardless of the
16 | // hide_keypad and auto_hide options.
17 |
18 | class AlarmControlPanelCard extends HTMLElement {
19 | constructor() {
20 | super();
21 | this.attachShadow({ mode: 'open' });
22 | this._icons = {
23 | 'armed_away': 'mdi:shield-lock',
24 | 'armed_custom_bypass': 'mdi:security',
25 | 'armed_home': 'mdi:shield-home',
26 | 'armed_night': 'mdi:shield-home',
27 | 'disarmed': 'mdi:shield-check',
28 | 'pending': 'mdi:shield-outline',
29 | 'triggered': 'hass:bell-ring',
30 | }
31 | this._entitiesReady = false;
32 | this._previousAlarmState = 'disarmed';
33 | this._countdownTimerFunction = null;
34 | this._timerRadius = 30;
35 | this._timerStrokeWidth = this._timerRadius / 5;
36 | this._timerSize = 2 * (this._timerRadius + this._timerStrokeWidth);
37 | this._currentStateDuration = 0;
38 | }
39 |
40 | set hass(hass) {
41 | const entity = hass.states[this._config.entity];
42 |
43 | if (entity) {
44 | this.myhass = hass;
45 | this.code_arm_required = entity.attributes.code_arm_required;
46 | this.has_numeric_code = !entity.attributes.code_format || entity.attributes.code_format == "number";
47 | if(!this.shadowRoot.lastChild) {
48 | this._createCard(entity);
49 | }
50 |
51 | const updatedEntitiesReady = this._confirmEntitiesReady();
52 | if (entity.state != this._state || this._entitiesReady != updatedEntitiesReady) {
53 | this._previousAlarmState = this._state;
54 | this._state = entity.state;
55 | this._entitiesReady = updatedEntitiesReady;
56 | this._updateCardContent(entity);
57 | }
58 | }
59 | }
60 |
61 | _createCard(entity) {
62 | const config = this._config;
63 |
64 | const card = document.createElement('ha-card');
65 | card.innerHTML = `
66 | ${this._iconLabel()}
67 | ${this._timerCanvas()}
68 | ${config.title ? '' : ''}
69 | `;
70 |
71 | const content = document.createElement('div');
72 | content.id = "content";
73 | content.style.display = config.auto_hide ? 'none' : '';
74 | content.innerHTML = `
75 | ${this._actionButtons()}
76 | ${this.has_numeric_code ?
77 | `