VERY useful!!! 
Thanks, everyone for the ideas, still in progress but I have something working quite ok now. Much better than the original Lovelace UI as it was completely cluttered. As I have lots of devices and many rooms, I used 6 cards to collapse devices (e.g. lights) under a popup for each room/area. Some devices have their own card and I still have 6 empty spots that I haven’t decided what to put.
Finally, I got rid of the Philips Hue bridge and moved ±20 lights to ZHA after I found out about Mushroom cards. ZHA is much faster and smoother. Mushroom cards are very neat and awesome to control RGB-CCT led strips and lights when you have so many of them, all other light cards did not stick to me. One on the top controls all lights in a group with the ability to adjust individual lights. Would be awesome to have the ability to save scenes and better WLED lights support.
5 Likes
hi guys,
I have a problem with the background and screen usage.
I am using a Fire HD 10 tablet from 2017. the screen has a resolution of 1920x1200 says the internet.
However, on the tablet, the footer is not displayed completely and you have to scroll down to see it.
I have already tested various resolutions of the background images.
Also “background-size: cover” or “background-size: contain” in the themes.yaml do not help.
Is there a setting in Fully Kiosk that I may have forgotten?
What does your hacs_installed command line sensor look like?
- platform: command_line
name: hacs_installed
command: |-
python3 << EOF
import os, json
installed = {"repositories": []}
path = "/config/.storage/hacs/"
for file in os.listdir(path):
name, ext = os.path.splitext(file)
if ext == ".hacs":
hacs_file = path + file
with open(hacs_file, "r") as file:
dict = json.load(file)
name = dict["data"]["full_name"]
installed["repositories"] += [name]
file.close()
print(json.dumps(installed))
EOF
value_template: >
{{ value_json.repositories | count }}
json_attributes:
- repositories
scan_interval: 86400
It looks exactly the same and doesn’t work. Did you do anything else to make it work? What value does the sensor return?
For anyone else struggling with the SVGs, I think I sussed it.
There were syntax issues in the path d= line.
After creating an SVG, I found this site, uploaded my SVG and clicked Optimize. Then copy and paste the result between
icon: >
[[[
return `
<svg viewBox="0 0 900 798"><path d="YOURSVGPATH"/></svg>`;
`;
]]]
Such as this:
icon_nanoleaf:
styles:
custom_fields:
icon:
- width: 78%
- margin-left: -5%
custom_fields:
icon: >
[[[
let state = variables.state_on && variables.timeout < 2000 ? 'on' : null;
return `
<svg viewBox="0 0 900 798">
<path class="${state}" fill="var(--light-color)" d="M393 1.4c0 .8-1.2 2.1-2.7 2.8-2.7 1.3-8.3 8.8-12.5 16.6-1.3 2.4-2.7 5.1-3.3 6-.5 1-2.8 4.9-5 8.7-2.2 3.9-4.5 7.9-5.2 9s-1.5 2.7-1.9 3.5-2.5 4.4-4.7 7.9c-2.1 3.5-4.3 7.4-4.8 8.5-.5 1.2-1.8 3.4-2.9 5.1-1.1 1.6-2.3 3.7-2.7 4.5s-2.6 4.8-5 8.8c-6.9 11.7-6.2 16.7 5.2 35.2 1.2 1.9 2.5 4.2 2.8 5 .4.8 1.6 2.8 2.7 4.5 1.1 1.6 2.4 3.9 2.9 5.1.5 1.1 2.7 5 4.8 8.5 2.2 3.5 4.2 7.1 4.6 7.9s1.6 2.8 2.7 4.5c1.1 1.6 2.3 3.7 2.7 4.5s3.3 5.9 6.5 11.3c3.2 5.5 5.8 10.3 5.8 10.7 0 .5 2.4 2.9 5.2 5.4l5.3 4.6h100.2l3.9-2.9c5-3.6 6.6-5.5 9.8-11.6 1.5-2.8 3.1-5.7 3.6-6.5 2-3.1 12.6-21.6 13.3-23 .4-.8 1.6-2.9 2.7-4.5 1.1-1.7 2.4-3.9 2.9-5.1.5-1.1 2.7-5 4.8-8.5 2.2-3.5 4.2-7.1 4.6-7.9s1.6-2.9 2.7-4.5c6.9-10.7 9.4-19.9 7.1-25.7-.5-1.3-1.2-3-1.5-3.8-.4-.8-1.5-2.9-2.6-4.5-1.1-1.7-2.4-3.9-2.9-5.1-.8-1.9-7.7-13.7-10.1-17.4-.6-.8-1.3-2.2-1.7-3s-2.6-4.8-5-8.8-4.3-7.4-4.3-7.7c0-.2-1.2-2.3-2.7-4.7-4.1-6.3-4.9-7.8-7.9-13.3-4.6-8.9-9.8-15.9-12.7-17.3-1.6-.8-3.1-2-3.4-2.8C493.5-.7 393-.7 393 1.4zm171.5 103.5c-4.3 1.9-9.2 6.3-10.7 9.6-.5 1.1-1.4 2.9-2.1 4s-3.7 6.3-6.7 11.5-6 10.4-6.7 11.5-1.6 2.7-2 3.5-2.6 4.6-4.8 8.5c-2.3 3.8-4.4 7.7-4.8 8.5s-1.6 2.8-2.7 4.5c-1.1 1.6-2.3 3.7-2.7 4.5-.3.8-1.6 3.1-2.8 5-11 17.8-11.8 22.7-5.9 33.8 1.9 3.7 4.4 8 5.5 9.7 1 1.6 2.2 3.7 2.6 4.5s2.6 4.6 4.8 8.5c2.3 3.8 4.4 7.7 4.8 8.5s1.6 2.8 2.6 4.5c1.1 1.6 3.2 5.2 4.7 8 1.4 2.7 3.5 6.2 4.5 7.6 1 1.5 2.3 3.7 2.9 5s1.9 3.7 3 5.4c1.1 1.6 2.3 3.7 2.7 4.5 2.1 4.8 7.9 12.2 11.1 14.2l3.7 2.3H614c26.7 0 49.6-.3 51-.7 4.5-1.3 8.7-6.1 14.9-16.8 3.4-5.8 6.6-11.2 7.1-12 .6-.8 1.3-2.2 1.7-3 .7-1.6 11.7-20.6 13.3-23 .6-.8 1.3-2.2 1.7-3s3.3-5.9 6.5-11.3 5.8-10.1 5.8-10.5c0-.3.6-1.3 1.4-2.1 2.6-3.1 4.7-11.4 3.7-14.9-1.1-3.6-5.2-12.1-8.1-16.7-2-3.2-3.2-5.2-7.2-12.5-1.3-2.5-3.6-6.4-5.1-8.7-1.5-2.4-2.7-4.5-2.7-4.7s-2.6-4.9-5.8-10.3-6.1-10.5-6.5-11.3-1.6-2.9-2.7-4.5c-1.1-1.7-2.3-3.7-2.7-4.5-1.6-3.4-6.8-11.6-8.3-13.2-1-.9-3.8-2.6-6.3-3.7-4.4-2-6.1-2.1-50.9-2.1-42.8 0-46.6.2-50.3 1.9zM734.9 207c-4.2 2.2-10.1 9.4-12.8 15.6-.5 1.1-2.7 5-4.8 8.5-2.2 3.5-4.2 7.1-4.6 7.9s-1.6 2.8-2.6 4.5c-1.1 1.6-3.2 5.2-4.7 8-4.9 8.9-5.5 10-7.4 13-1.1 1.6-2.3 3.7-2.7 4.5-.8 1.7-8.9 15.8-10.3 18-4.7 7.2-5 18.1-.6 23.9 1.3 1.7 3.3 5.1 4.5 7.7.9 1.9 7.8 13.8 10.1 17.4.6.8 1.3 2.2 1.7 3s2.6 4.6 4.8 8.5c2.3 3.8 4.4 7.7 4.8 8.5s1.6 2.8 2.7 4.5c1.1 1.6 2.4 3.9 3 5 .5 1.1 2.6 4.7 4.5 8s3.8 6.7 4.2 7.5c1.6 3.7 6.9 9.2 10.4 11 3.6 1.9 6.1 2 51.9 2 58.9 0 54 1.4 65.3-18 3-5.2 6.4-11.1 7.6-13 1.1-1.9 2.4-4.2 2.8-5s3.2-5.8 6.3-11 5.9-10.2 6.3-11 1.6-2.9 2.6-4.5c1.1-1.7 3.2-5.3 4.7-8 4.9-8.9 5.5-9.9 7.9-14 1.8-3 2.4-5.5 2.5-9.8 0-5.8-1.9-10.4-9.5-22.7-1.2-1.9-2.5-4.2-2.8-5-.4-.8-1.6-2.9-2.7-4.5-1.1-1.7-2.3-3.7-2.7-4.5-.8-1.8-8.9-15.8-10.3-18-.6-.8-1.3-2.2-1.7-3s-4-7.1-8-13.9c-4-6.7-7.3-12.6-7.3-13 0-1-5.9-6.4-9.2-8.4-2.5-1.5-7.5-1.7-51.5-1.7-46.2.1-49 .2-52.4 2zM562.5 309.4c-3.9 2.2-9.1 8.8-13.5 17.1-1.1 2.2-2.5 4.7-3 5.5-1.7 2.8-9.6 16.5-10.3 18-.4.8-1.6 2.8-2.7 4.5-1.1 1.6-2.3 3.7-2.7 4.5s-3.2 5.8-6.3 11-5.9 10.2-6.3 11-1.6 2.8-2.7 4.5c-6.6 10.2-7.7 18.1-3.5 25.8 2.1 4.1 9.9 17.7 13.2 23.2.7 1.1 1.5 2.7 1.9 3.5.9 1.7 11.9 20.7 13.4 23 .6.8 1.3 2.2 1.7 3s3.3 5.9 6.5 11.3 5.8 10.2 5.8 10.6c0 .9 5.7 6.3 9 8.4 2.2 1.5 7.6 1.7 52.1 1.7h49.6l4.2-3c3.5-2.6 8.9-9.6 11.5-15 .4-.8 1.2-2.4 1.9-3.5s3-5.1 5.2-9c2.2-3.8 4.5-7.9 5.2-9s1.7-2.9 2.3-4 1.9-3.4 3-5c1.1-1.7 2.3-3.7 2.7-4.5s2.6-4.8 5-8.8c2.4-4.1 4.3-7.5 4.3-7.8 0-.2 1.9-3.4 4.2-7.1 2.2-3.8 5-9.2 6-12.2 1.8-5 1.8-5.6.2-10.3-.9-2.7-4.2-9.3-7.3-14.6-3.2-5.4-6-10.4-6.4-11.2s-1.6-2.9-2.7-4.5c-1.1-1.7-2.3-3.7-2.7-4.5s-2.5-4.7-4.8-8.5c-2.2-3.9-4.4-7.7-4.8-8.5s-1.6-2.9-2.7-4.5c-1.1-1.7-2.3-3.7-2.7-4.5-1.7-3.7-12.6-21.7-14.1-23.4-1-1-3.4-2.7-5.4-3.7-3.5-1.8-6.5-1.9-52-1.9l-48.3.1-4 2.3zm180.4 99.5c-2 .4-4.9 1.7-6.6 2.9-2.7 1.9-8.3 8.4-8.3 9.6 0 .4-8 14.5-10 17.6-.6.8-1.3 2.2-1.7 3-.7 1.6-11.7 20.5-13.3 23-.6.8-1.3 2.2-1.7 3s-3.3 5.9-6.5 11.3-5.8 10.1-5.8 10.5c0 .3-.6 1.3-1.4 2.1-2.5 3-3.7 10.6-2.5 15.8.7 2.7 1.7 5.5 2.4 6.3s1.5 2.2 1.9 3 1.2 2.4 1.9 3.5 3.7 6.3 6.7 11.5 6 10.4 6.7 11.5 1.5 2.7 1.9 3.5 3.3 5.8 6.4 11 5.9 10.2 6.3 11 1.1 2.2 1.7 3c.5.8 3.1 5.1 5.6 9.5 5.7 9.9 7.7 12.1 13.3 14.6 4.1 1.8 6.9 1.9 50.7 1.9 41.5 0 46.7-.2 50.1-1.7 3.8-1.7 10.3-7 10.3-8.4 0-.4 2.6-5.2 5.8-10.6s6.1-10.5 6.5-11.3 1.6-2.9 2.7-4.5c1.1-1.7 2.3-3.7 2.7-4.5s2.5-4.7 4.8-8.5c2.2-3.9 4.4-7.7 4.8-8.5s1.6-2.9 2.7-4.5c1.1-1.7 2.3-3.7 2.7-4.5s1.9-3.6 3.4-6.1c8.4-14.4 8.9-15.6 8.9-21.9 0-6.5-.6-8-7.5-19.5-2.3-3.9-4.5-7.7-4.9-8.5s-1.2-2.4-1.9-3.5-3.7-6.3-6.7-11.5-6-10.4-6.7-11.5-1.5-2.7-1.9-3.5-3.3-5.8-6.4-11-5.9-10.2-6.3-11c-3.6-7.6-9.6-12.9-15.9-14.1-5.2-1-89.8-1-94.9 0zm-349.4 2c-4.3 2-9.2 6.4-10.6 9.6-.5 1.1-1.3 2.7-1.9 3.5-1.5 2.3-12.6 21.3-13.3 23-.4.8-1.6 2.8-2.7 4.5-1.1 1.6-2.3 3.7-2.7 4.5s-2.5 4.6-4.8 8.5c-2.2 3.8-4.4 7.7-4.8 8.5s-1.3 2.4-2 3.5-3.8 6.5-7 12.1c-5 8.8-5.7 10.7-5.7 15.5 0 4.6.7 6.6 4.6 13.4 2.5 4.4 5.9 10.5 7.6 13.5s5 8.6 7.3 12.5c2.2 3.8 4.4 7.7 4.8 8.5s1.6 2.8 2.7 4.5c1.1 1.6 2.4 3.9 2.9 5.1.8 1.7 5.9 10.6 10.1 17.4.5.8 1.9 3.3 3 5.5 3.1 5.6 5.6 8.5 9.8 11.4l3.7 2.6H444c47.8 0 49.6-.1 52.5-2 4.7-3.2 6.5-5.3 11.1-13.4 2.5-4.2 4.9-8.3 5.4-9.1.6-.8 1.3-2.2 1.7-3s3.2-5.8 6.3-11 5.9-10.2 6.3-11 1.6-2.9 2.7-4.5c1.1-1.7 2.3-3.7 2.7-4.5.8-1.6 8.8-15.6 10.3-18 3.5-5.5 7-14.4 7-18s-3.6-12.7-7-18c-.5-.8-3.7-6.2-7-12s-6.5-11.2-7-12c-.6-.8-1.3-2.2-1.7-3s-3.2-5.8-6.3-11-5.9-10.2-6.3-11-1.6-2.9-2.6-4.5c-1.1-1.7-3.2-5.4-4.8-8.4-3.4-6.7-7.5-10.8-12.8-13.2-3.7-1.7-7.6-1.9-50.5-1.9-43 0-46.8.2-50.5 1.9zm-167.4 99.6c-5.3 1.7-9.3 5.3-13.4 12.5-1.8 3-3.7 6.4-4.4 7.5s-1.6 2.7-2 3.5-2.6 4.6-4.8 8.5c-2.3 3.8-4.4 7.7-4.8 8.5s-1.6 2.8-2.7 4.5c-1.1 1.6-2.3 3.7-2.7 4.5-.8 1.7-11.8 20.7-13.3 23-.6.8-1.3 2.2-1.7 3s-2 3.7-3.6 6.5c-5 8.3-4.2 17.1 2.3 27.5 1.8 2.8 9.6 16.5 10.3 18 .4.8 1.6 2.8 2.7 4.5 1.1 1.6 2.3 3.7 2.7 4.5s3.3 5.9 6.5 11.3 5.8 10.1 5.8 10.4 1.4 2.5 3 5c1.7 2.4 3 4.7 3 5.1 0 1.6 9.1 14.6 11.3 16.1 5.3 3.8 9 4.1 55.1 4.1 30.8 0 46.1-.4 48.7-1.1 5.1-1.6 9.9-5.7 12.7-11 1.3-2.4 3.2-5.8 4.2-7.4 1.1-1.7 2.3-3.7 2.7-4.5.8-1.8 11.9-20.8 13.3-23 .6-.8 1.3-2.2 1.7-3s2.6-4.7 4.8-8.5c2.3-3.9 4.4-7.7 4.8-8.5s1.6-2.9 2.7-4.5c1.1-1.7 2.3-3.7 2.7-4.5s2-3.8 3.7-6.5c2.7-4.4 3-5.9 3-12.5 0-7.1-.2-7.9-4.5-15-2.5-4.1-4.8-8.2-5.2-9s-1.6-2.9-2.7-4.5c-1.1-1.7-2.3-3.7-2.7-4.5-.8-1.7-11.8-20.7-13.3-23-.6-.8-1.3-2.2-1.7-3s-2.4-4.4-4.6-7.9c-2.1-3.5-4.3-7.4-4.8-8.5-.5-1.2-1.8-3.5-2.9-5.1-1.1-1.7-2.3-3.7-2.7-4.5-1.6-3.4-7.7-7.8-12.5-8.9-7.6-1.7-90.9-1.4-96.7.4zM60 607.9c-7.8 1.8-13.5 5.8-16.1 11.6-.5 1.1-1.8 3.3-2.8 5-1.1 1.6-3.2 5.2-4.7 8-4.9 8.9-5.5 10-7.4 13-1.1 1.6-2.3 3.7-2.7 4.5s-3.3 5.9-6.5 11.3-5.8 10.1-5.8 10.3-1.2 2.3-2.7 4.7c-1.5 2.3-3.6 5.8-4.6 7.7-1.1 1.9-3 5.4-4.3 7.8-1.8 3.3-2.4 5.8-2.4 10.7 0 6.5 1.1 9.3 7.9 20.5 1.1 1.9 2.4 4.2 2.8 5 .8 1.8 11.9 20.8 13.3 23 .6.8 1.3 2.2 1.7 3s2.4 4.4 4.6 7.9c2.1 3.5 4.3 7.4 4.8 8.5.5 1.2 1.8 3.4 2.9 5.1 1 1.6 2.9 5 4.2 7.4s4.2 6.3 6.6 8.7c3.6 3.6 5 4.4 9.5 4.9 2.8.3 25.9.5 51.3.3l46-.3 3.6-2.4c2.9-2 11.7-14.5 14.2-20.1.3-.8 1.5-2.9 2.6-4.5 1.1-1.7 2.3-3.7 2.7-4.5.8-1.8 11.9-20.8 13.3-23 .6-.8 1.3-2.2 1.7-3s2.5-4.7 4.8-8.5c2.2-3.9 4.4-7.7 4.8-8.5s1.6-2.9 2.7-4.5c3.1-4.7 5.1-9.7 5.7-13.6.4-2.9-.2-5.3-3.1-11-2-4.1-4.5-8.8-5.6-10.4-1.9-3.1-5-8.5-8.3-14.5-1-1.9-2.7-4.9-3.8-6.5-1-1.7-2.2-3.7-2.6-4.5s-3.2-5.8-6.3-11-5.9-10.2-6.3-11-1.6-2.9-2.7-4.5c-1-1.7-2.9-4.9-4.2-7.3-3.2-6.3-8.5-12-12.7-14-3.2-1.5-8.6-1.7-48.1-1.8-24.5-.1-46.1.1-48 .5zm680.8 3.4c-.9.7-2.6 1.9-3.8 2.7-1.8 1.3-13.1 19-15.4 24-.3.8-1.5 2.8-2.6 4.5-1.1 1.6-2.3 3.7-2.7 4.5s-3.3 5.9-6.5 11.3-5.8 10-5.8 10.2-3.3 5.9-7.3 12.7c-11.5 19.4-12.4 22.9-8.4 30.8 3.4 6.5 7.5 14 9.7 17.5 2 3.2 3.3 5.4 7.2 12.5 1.3 2.5 3.6 6.4 5.1 8.7 1.5 2.4 2.7 4.5 2.7 4.7s2.6 4.8 5.8 10.3c3.2 5.4 6.1 10.5 6.5 11.3s1.6 2.8 2.7 4.5c1.1 1.6 2.3 3.7 2.7 4.5.3.8 1.9 3.2 3.5 5.2 5.5 7 3.5 6.8 58.8 6.8h49.7l3.8-2.6c3.8-2.5 7.4-6.2 7.5-7.6 0-.4 1.8-3.8 4.1-7.4 2.2-3.7 4.5-7.7 5-8.8.5-1.2 1.8-3.5 2.9-5.1 1.1-1.7 2.3-3.7 2.7-4.5.8-1.8 11.9-20.8 13.3-23 .6-.8 1.3-2.2 1.7-3s3.2-5.9 6.4-11.2 6-10.6 6.4-11.8c.3-1.1 1.3-2 2.1-2 1.1 0 1.4-1.6 1.4-7 0-5.3-.3-7-1.4-7-.8 0-1.9-1.2-2.5-2.8-.6-1.5-2-4.1-3.1-5.7-1.1-1.7-2.3-3.7-2.7-4.5-.8-1.8-8.9-15.8-10.3-18-.6-.8-1.3-2.2-1.7-3s-3.2-5.8-6.3-11-5.9-10.2-6.3-11-1.6-2.9-2.7-4.5c-1.1-1.7-2.3-3.7-2.7-4.5-3.1-6.6-10.2-16.7-13.6-19.1l-4-2.9h-50.1c-37.8.1-50.5.4-51.8 1.3z"/>
</svg>
`;
]]]
Which produces the following result:
My sensor state is 76
Attributes:
repositories:
- custom-cards/circle-sensor-card
- totaldebug/atomic-calendar-revive
- fondberg/spotcast
- nielsfaber/alarmo-card
- AmoebeLabs/flex-horseshoe-card
- tomaae/homeassistant-openmediavault
- LaggAt/hacs-govee
- custom-cards/nintendo-wishlist-card
- dummylabs/watchman
- kalkih/mini-media-player
- custom-cards/secondaryinfo-entity-row
- thomasloven/lovelace-card-tools
- elax46/custom-brand-icons
- custom-cards/spotify-card
- bramkragten/weather-card
- ljmerza/light-entity-card
- grinstantin/todoist-card
- ljmerza/github-card
- AlexxIT/SonoffLAN
- mattieha/slider-button-card
- dylandoamaral/uptime-card
- twrecked/hass-aarlo
- hacs/integration
- marcomow/ble-bulb-card
- thomasloven/lovelace-auto-entities
- r-renato/ha-card-waze-travel-time
- bertbert72/HomeAssistant_VirginTivo
- dylandoamaral/trakt-integration
- iantrich/config-template-card
- mampfes/hacs_waste_collection_schedule
- maxwroc/battery-state-card
- ofekashery/vertical-stack-in-card
- custom-cards/bar-card
- custom-cards/light-entity-row
- nervetattoo/banner-card
- kalkih/mini-graph-card
- custom-components/alexa_media_player
- dummylabs/thewatchman
- custom-components/ble_monitor
- gadgetchnnel/lovelace-home-feed-card
- fufar/simple-clock-card
- iantrich/text-divider-row
- thecode/ha-rpi_gpio
- r-renato/ha-card-weather-conditions
- madmicio/channel-pad
- twrecked/lovelace-hass-aarlo
- IATkachenko/HA-SleepAsAndroid
- rospogrigio/localtuya
- thomasloven/hass-fontawesome
- vigonotion/hass-simpleicons
- DBuit/light-popup-card
- thomasloven/hass-browser_mod
- thomasloven/lovelace-card-mod
- nielsfaber/alarmo
- maxwroc/github-flexi-card
- thomasloven/lovelace-state-switch
- jcwillox/lovelace-paper-buttons-row
- bruxy70/Garbage-Collection
- finity69x2/light-brightness-preset-row
- benct/lovelace-multiple-entity-row
- thomasloven/lovelace-layout-card
- madmicio/LG-WebOS-Remote-Control
- RomRider/apexcharts-card
- thomasloven/lovelace-template-entity-row
- Villhellm/custom-sidebar
- c-st/auto_areas
- arallsopp/hass-hue-icons
- custom-cards/flex-table-card
- thomasloven/lovelace-slider-entity-row
- custom-cards/decluttering-card
- Savjee/button-text-card
- thomasloven/lovelace-fold-entity-row
- orickcorreia/caule-themes-pack-1
- ironsheep/lovelace-rpi-monitor-card
- bramkragten/swipe-card
- custom-cards/button-card
friendly_name: hacs_installed
When and how did you install HACS?
I recently installed HACS from the site you provided. Do you have this file?
The path path = "/config/.storage/hacs/" is a folder, not a file
unfortunately I don’t have such a folder
button_card_templates.yaml
updater_hacs:
template:
- updater
- settings
state_display: |
[[[
if (entity) {
let output = '',
count = parseInt(entity.state) || 0,
subtitle = count === 0
? `${variables.translate_no_updates} <b>←</b> ${states['update.hacs_update'].attributes.installed_version || ''}`
: `${count} ${count === 1 ? variables.translate_update_available : variables.translate_updates_available} ${String.fromCodePoint('0x1f389')}`;
Object.keys(states).forEach(key => {
let s = states[key],
e = s.entity_id,
a = s.attributes;
if (e.includes('update.') && s.state === 'on' && a.release_url) {
let split_url = a.release_url.split('/'),
name = `${split_url[3]}/${split_url[4]}`,
installed = states['sensor.hacs_installed'].attributes.repositories;
if (installed.includes(name)) {
output += `<li><b><a href="#" onclick="window.open('${a.release_url}');">
${name}</a></b> ${a.installed_version} <b>→</b> ${a.latest_version}</li>`
}
}
});
return `
<ha-icon icon="hacs:hacs"></ha-icon> <span class="title">Community Store</span><br>
<p class="subtitle">${subtitle}</p>
<ul>${output}</ul>
`;
}
]]]
ui-lovelace.yaml
#################################################
# #
# FOOTER #
# #
#################################################
- type: horizontal-stack
view_layout:
grid-area: footer
cards:
- type: custom:button-card
name: >
<ha-icon icon="mdi:arrow-up-bold-circle-outline"></ha-icon> Updates
tap_action:
!include popup/footer/updater.yaml
variables:
notify: >
[[[
let hass_installed = hass.config.version,
hass_version_latest = states['sensor.template_hass_version'],
hass_version_latest_beta = states['sensor.hass_version_latest_beta'],
hacs = states['sensor.hacs'];
if (hass_version_latest && hass_version_latest.state.includes('.')
&& hass_version_latest_beta && hass_version_latest_beta.state.includes('.')
&& hacs && Number.isInteger(parseInt(hacs.state))) {
let hass_latest = hass_installed.includes('b')
? hass_version_latest_beta.state
: hass_version_latest.state,
hass_count = hass_installed !== hass_latest ? 1 : 0;
return hass_count + parseInt(hacs.state);
}
return 0;
]]]
template: footer
footer/updater.yaml
action: fire-dom-event
browser_mod:
command: popup
title: Updates
style:
.: |
:host .content {
width: 100%;
}
hui-grid-card:
$: |
button-card:nth-child(2),
button-card:nth-child(4) {
margin: 0.6em 0 2.1em 0.8em;
}
button-card:nth-child(6) {
margin: 0.6em 0 0.5em 0.8em;
}
#root {
grid-gap: 0 !important;
padding: var(--card-content-padding);
width: max-content;
}
card:
type: grid
columns: 1
square: false
cards:
- type: custom:button-card
entity: sensor.template_hass_version
template: updater_hass
- type: custom:button-card
entity: sensor.template_hass_version
triggers_update:
- sensor.template_hass_version
- sensor.template_hass_dev_version
name: Update HASS
icon: mdi:update
styles:
card:
- width: max-content
- filter: >
[[[
return `[[[
if (entity) {
return entity.state === states['sensor.template_hass_version'].state ||
entity.state === states['sensor.template_hass_dev_version'].state
? 'opacity(30%)'
: 'drop-shadow(3px 3px 5px #00000050)';
}
]]]`
]]]
- display: >
[[[
return `[[[
return entity
? 'flex'
: 'none';
]]]`
]]]
tap_action:
services: |
[[[
return `[[[
hass.callService('browser_mod', 'toast', {
message: 'Start watchtower...'
});
hass.callService('switch', 'turn_on', {
entity_id: 'switch.docker_watchtower'
});
]]]`
]]]
template: icon_name
- type: custom:button-card
entity: sensor.hacs
template: updater_hacs
- type: custom:button-card
entity: sensor.hacs
name: Open HACS
icon: mdi:open-in-new
styles:
card:
- width: max-content
- filter: >
[[[
return `[[[
if (entity) {
return entity.state === '0'
? 'opacity(30%)'
: 'drop-shadow(3px 3px 5px #00000050)';
}
]]]`
]]]
- display: >
[[[
return `[[[
return entity && entity.state !== 'unknown'
? 'flex'
: 'none';
]]]`
]]]
template: >
[[[
return window.navigator.userAgent.match(/iPhone/i)
? 'hacs_navigate_ios'
: 'hacs_iframe';
]]]
1 Like
Do you use switch.docker_watchtower?
I will be looking for a solution
Enable the ‘experimental features’ on the HACS integration, and then check what entities show up on the Developer Tools for ‘STATES’ tab with ‘hacs’. Replace matt8707’s hacs sensor with whatever shows up there.
For me that was ‘sensor.hacs’ which makes the updater footer popup work.
Do you have sensor.hacs_installed ?
I managed to figure out how to get SVGs to work eventually.
However, when attempting to use fill="var(--light-color)" the colour does not come through, it’s just black.
This happens when I use
icon_nanoleaf:
styles:
custom_fields:
icon:
- width: 78%
- margin-left: -5%
- fill: >
[[[ return variables.state_on ? 'var(--light-color)' : '#9da0a2'; ]]]
and even when I try fill="var(--light-color)" in the SVG path such as:
custom_fields:
icon: >
[[[
return `
<svg viewBox="0 0 900 798">
<path fill="var(--light-color)" style="stroke: none;" d="M393 1.4c0
It does change the colour if I use [[[ return variables.state_on ? '#3282B6' : '#9da0a2'; ]]]
Could it be due to the light using xy colours and not RGB?