Hey all, am a refugee from smartthings given the issues with actually having a useful panel for a tablet/alarm.
Like others I found the alarm panel in HA too small to be useful so tried searching to no avail, and a bunch of other stuff (custom panels etc), but all I wanted to do was resize the fonts/text on the current panel.
I’ve found a way to do that which I thought would be useful to share for others if they’re trying to achieve the same thing.
long story short I ended up adjusting the homeassistant javascript to resize the number fonts, button size, and panel width to get the numbers and buttons bigger.
Was a bit of faffing to figure it out but ultimately it comes down to;
- finding the chunk file the alarm control panel code gets built into
- adding in / adjusting styling elements
- mucking around to clear the cache for things that load the file
to find the chunk that gets coded you
- open developer tools (F12), go to Sources, select the folder 'frontend_latest"
- right click -> search in folder, and search for ‘alarmcode’
- this should find one file called ‘chunk.xxxxxxxxxxxxxx.js’ mine was called chunk.74157e5a57fb84601820.js
now you need to go to the ha install and adjust this file.
For mine i use docker, so i had to get a shell in the docker container using
sudo docker exec -it homeassistant /bin/bash
Once in there i had to find the chunk file using
find / -iname "chunk.74157e5a57fb84601820.js*"
This should fine 3 files. Then I needed to edit the JS file in vi (eww) using the command below.
vi /usr/local/lib/python3.8/site-packages/hass_frontend/frontend_latest/chunk.74157e5a57fb84601820.js
I then edited the file from #keypad down to look like this. Differences are;
- max width changed to 400px
- height:75px given to #keypad mwc-button (this further spaces the buttons vertically, but doesn’t make the button’s itself bigger. that requires changes on the inner button control which i haven’t quite figured out yet)
- font-size in mwc-button.numberkey changed to 2rem
#keypad {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: auto;
width: 100%;
max-width: 400px;
}
#keypad mwc-button {
padding: 8px;
width: 30%;
box-sizing: border-box;
height: 75px;
}
.actions {
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.actions mwc-button {
margin: 0 4px 4px;
}
mwc-button#disarm {
color: var(--error-color);
}
mwc-button.numberkey {
--mdc-typography-button-font-size: var(--keypad-font-size, 2rem);
}
`}}]}}),i.oi)}}]);
one this was done I needed to update the GZ as that still had the old js.
Backup the original file
mv /usr/local/lib/python3.8/site-packages/hass_frontend/frontend_latest/chunk.74157e5a57fb84601820.js.gz /usr/local/lib/python3.8/site-packages/hass_frontend/frontend_latest/backup-chunk.74157e5a57fb84601820.js.gz.backup
Then zip the new one
gzip -k /usr/local/lib/python3.8/site-packages/hass_frontend/frontend_latest/chunk.74157e5a57fb84601820.js
Then restart HA.
At this point i thought i was done, but browser caching was exceptionally annoying and I had to actually clear the cache completely to get it to work. I had funny results in postman, browsers etc until i did this. To see if it worked, do a curl command from both the box directly, and a cmdline eleswhere. you shoudl see the changes applied. if that works but the the app/web site doesn’t reflect the changes then you need to clear your browser cache.
Hope this helps others as it’s helped me.
end result
*edited for formatting and correctness
