Increase font size of numbers on manual alarm panel keypad

TarheelGrad1998 · August 7, 2019, 7:41pm

Thanks for this thread, it was driving me batty. So I followed suit and am using this one, and could edit the buttons: https://github.com/ciotlosm/custom-lovelace/tree/master/alarm_control_panel-card

BUT now I just want to make the password placeholders bigger, so that it’s clearer how many digits are entered on my wall mounted phone I’m using as a panel. I can make the change in dev tools, but no matter what I do I can’t get the style to apply.

After reading up on Polymer, my best guess is adding the below to the js code itself, just before the paper-input, but no dice. Any clues?

         <style is="custom-style">
          paper-input { 
            --paper-input-container-input: { 
              font-size: 125px !important; 
              height: 34px !important; 
              text-align: center !important;
            }; 
          }
          </style>

TarheelGrad1998 · August 7, 2019, 7:42pm

No. I have that problem a lot, I just don’t think the viewer pane handles every case.

You only need to use the ?v= parameter if you change the js file. It doesn’t matter what number you use, just that it’s different every time you update the js file.

TarheelGrad1998 · August 11, 2019, 7:23pm

Never mind, I gave up and solved it myself, as usual. I removed the paper button and just used a regular input, and the styling worked fine there.

Thanks anyway.

fourtrax01 · September 1, 2019, 8:06am

So where exactly do I paste this code to make this replace the stock alarm card? New to home assistant sorry. Running Hassio latest.

ongkhua · September 3, 2019, 3:29am

no no, the v=xxx is to make sure it uses the latest modified file. If you see no changes after editing, increase the v=xxx

ongkhua · September 3, 2019, 3:33am

This is using the custom card, not the stock alarm panel card. Save the code I pasted in the www folder as alarm_control_panel-card.js, then in your ui-loavelace.yaml add the following to the top of the file:

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

and to use this custom card:

- type: custom:alarm_control_panel-card
  entity: alarm_control_panel.home_alarm
  show_keypad: true
  title: Alarm
  states:
    - arm_home
    - arm_away

sviconospam · February 29, 2020, 1:06am

Hi all I’m a beginner with HA, adding custom panel I get the following error message

Cannot add property scale, object is not extensible

below the code used for the card:

type: 'custom:alarm_control_panel-card'
entity: alarm_control_panel.allarme
show_keypad: true
title: Alarm
states:
  - arm_home
  - arm_away

is the custom component still working? I’m missing somethings.
Thanks in advice for your suggestions!

krinehart · March 8, 2020, 12:38am

Add scale: 15px. I think that’s the default scale. It seems like something in the latest update has broken this. I had to add both states and scale to my lovelace config to get it to work.

sviconospam · March 11, 2020, 11:44pm

Many thanks, It works!

johnplanetz · September 19, 2020, 4:16am

Now that html isn’t supported anymore for bwalarm in 0.115, I’m trying to use the manual alarm and standard alarm control panel card, but its buttons/numbers are way too small for my wall tablet.

Is the custom card posted above still expected to work? I’m on 0.114.3. This is my first time trying a custom card, and I see “Custom element doesn’t exist: alarm_control_panel-card.”

I added the Javascript module, /local/alarm_control_panel-card?v=7 in the Lovelace Dashboards > Resources, and then made a new empty dashboard and view and added a Manual card, and entered this into the editor, but I see the following error:

I also tried card-mod with the standard alarm panel card, and with that I can increase the font size, but not the button size, so it still looks pretty bad.

Thanks for any advice.
-John

DaveTX · September 21, 2020, 6:55pm

I’m with ya. Moving away from bwalarm and on Amazon Fire 7 tablet the alarm buttons way too small. So much space available to make them bigger. Stuck with card-mod and bigger font but still trying to get the buttons bigger…

Watching…!

DaveTX · September 21, 2020, 9:10pm

I did get the above javascript and custom card to work.

I copied the last javascript in to www directory.

I added it to the Lovelace resource and in my case used
/local/alarm_control_panel-card.js?v=1
(the version part I don’t get but worked).

Here’s my manual card: (make sure your entity matches and use scale/arm as suggested)

type: 'custom:alarm_control_panel-card'
entity: alarm_control_panel.house
show_keypad: true
scale: 15px
title: Alarm
states:
  - arm_home
  - arm_away

Now gonna see about tweaking colors…

johnplanetz · September 21, 2020, 9:40pm

Thanks DaveTX for the update. I’m not sure what’s different this time, but yeah, it works now!
Maybe I made some copy/paste mistake when I prepared the previous alarm_control_panel-card.js.
Cool- this should be much easier to play with, versus card mod!
-John

johnplanetz · September 26, 2020, 1:47am

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:

mikealdo · November 11, 2020, 5:05pm

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 ??

johnplanetz · November 12, 2020, 6:34pm

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

QkulleQ · December 18, 2020, 1:31am

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:

johnplanetz · December 18, 2020, 3:40am

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

QkulleQ · December 20, 2020, 1:53pm

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

johnplanetz · December 20, 2020, 8:46pm

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