I did a bunch of work on this, and posted my modified custom card, and my entire config and explanation at https://github.com/jcooper-korg/AlarmPanel
Screenshots:
2 Likes
Hi John,
I followed your instructions on github and am getting the same message as you had in post 37. My setup is almost identical to yours : Home Assistant 0.117.5, running on Hass.io, on a Raspberry Pi 3b+, a wall-mounted 7" Amazon Fire Tablet, running Fully Kiosk, the iOS Home Assistant Companion, and an alarm panel kit from Konnected.io. Any advice ??
Hi Michael,
Assuming you’ve installed the alarm_control_panel-card.js in the right place in the file system, and specified the path correctly in Configuration > Lovelace Dashboards > Resources, then that message usually means there’s a coding mistake or typo in alarm_control_panel-card.js. Did you make any modifications to it? Often there’s evidence of a syntax error / etc in the HA logs (under Configuration > Logs).
-John
Hi John, I would love to use your amazing card together with bwalarm, instead of manual.
I prefer your custom card over the standard HA lovelace card, because it will look much bigger on my 8" Lenovo wall tablet with Fully Kiosk.
When the bwalarm is armed it shows the card perfectly with buttons and keypad like your screenshot, but when the alarm is disarmed it doesn’t show anything.
Force reloading the page doesn’t help.
Any idea what might cause this?
Edit: Chrome Console panel gives this error:
Hi Bart- is there anything relevant in the HA logs? I haven’t tried my panel card with bwalarm so there may be something I missed.
-John
1 Like
Found nothing more in the HA logfile than the same message as in Chrome Dev Console:
2020-12-20 14:41:01 ERROR (MainThread) [frontend.js.latest.202012120] http://[sensored]:8123/local/alarm_control_panel-card.js:174:42 Uncaught TypeError: Cannot read property 'style' of null
BTW I’m running Home Assistant 2020.12.1 on an Intel NUC with Home Assistant OS 5.9
Hi Bart-
I found an issue in my card code that could cause this.
I wasn’t able to successfully resurrect my old bwalarm setup to test, but I was able to reproduce your issue with the manual alarm by turning on hide_keypad in the card config.
Try pulling the updated alarm_control_panel-card.js from https://github.com/jcooper-korg/AlarmPanel and let me know how it goes.
Cheers,
John
1 Like
Hi John, thanks for your effort to try to make it work, appreciate it! 
Unfortunately I still don’t see the arm home/away buttons in disarmed state, while I do see the card in pending/armed state.
The error has moved to line 181:
HA log:
2020-12-21 01:46:43 ERROR (MainThread) [frontend.js.latest.202012120] http://[sensored]:8123/local/alarm_control_panel-card.js?v=3:181:38 Uncaught TypeError: Cannot read property 'style' of null
and also in Chrome Dev Console:
Edit:
When I disarm the alarm in armed_home mode, I do see the disarmed state of the card.
But as soon as I navigate to a different page and then return it’s gone.
Can you tell me if your bwalarm entity publishes a “code_format” attribute? Look in Developer Tools > States. This is what manual alarm looks like:
If it doesn’t, I’ll need to modify the code to survive that (and assume numeric code format)
1 Like
It says:
code_format: null
Hi Bart-
Thanks for the feedback. I just pushed another change to deal with the null code_format. I hadn’t realized that was a possible scenario. Please pull and try it again! 
-John
1 Like
It’s working, on behalf of the entire household thank you so much John!
We don’t have to carry our magnifying glasses around the house anymore! 
1 Like
Great news! Happy to hear that it’s working ok with bwalarm now. Note- my countdown timer required a tweak to the manual alarm component to publish the current state duration. So that won’t work with bwalarm unless we do something similar.
-John
1 Like
Hello John,
I am also really new to home assistant, and I really love it so far. I really love your alarm card as it is larger than the stock one, and it works well on my fire 10 tablet. I have the ugly orange colors that seem to be from the stock code, and I’m not really sure how to code with the card modder to change the colors. I really like your color choice. I think I followed all your steps on your GitHub, but I am really lost on changing the colors. Also, I cannot find the config/custom_components/manual in my files to add that sweet countdown. Any advice or help would be greatly appreciated! Thank you
Welcome! You should see the same colors as my screenshots if you switch your profile theme to Dark. Click on your login name at the bottom left of the HA sidebar, and then change the selected theme to Dark. Like so:
For my customized manual component, download the 3 files from here:
and put them in your configuration folder inside custom_components/manual. (create the folders as necessary).
Then restart HA-- this will override the built-in manual alarm component.
Hope this helps!
-John
Thank you so much! That worked perfectly. I really appreciate it.
1 Like
Hi John, for me personally you don’t have to bother to make the counter available for bwalarm.
I have an automation that outputs an acoustic sequence for the countdown.
Thanks again!
@johnplanetz Thank you for your work on this, it is much appreciated. I’m also using a Fire 7 tablet with Fully Kiosk and the alarm panel was always a pain to read.
I have successfully setup your mod, the only issue I’m having is that I use a custom theme which causes the Home and Away buttons to be greyed out. I was hoping you could point me to where in the code I could try some different values so I can continue using my theme and see the Home/Away buttons.
If I set my dashboard theme to default I am able to see the buttons.
Thanks in advance for any help.
@guy0nabuffalo - take a look at the style css at the end of alarm_control_panel-card.js. Specifically- the “.actions button” section sets those button colors to pul the colors from the theme config:
border-color: var(--primary-text-color);
background-color: var(--primary-color);
color: var(--primary-text-color);
You can change those to whatever you like.
Or if you prefer not to edit that code directly, you can install card-mod, and add something to your alarm panel card config like this:
style:
.: |
button {
font-family: courier !important;
background-color: red !important;
color: white !important;
}
That example changes the button font to courier, background color to red, and text color to white.
Hope that helps!
-John
1 Like