Hi, I’m trying to use Custom UI usign lovelace withot success… I reproduce step by step @Saturnus guide.
What I’m doing wrong?
Thanks
Lovelace doesn’t support the theming for entities… unfortunately. You can customize the icons though
No much more yet , but it won’t theme entities anymore and _stateDisplay is gone also. Some other niceties too… even in regular Ha. Theming does still work in regular Ha though.
I have trying to figure out how I can make this (Nest Protect) sensors, which return Ok now to green outline instead of red.
How does this work?
why don’t you give us the code of your sensor, tell us what it should look like, and we can help
Cool! So what I have is these default badges from Nest integration.
No extra code, except default customisation:
sensor.entryway_nest_protect_boven_co_status:
friendly_name: CO2 Boven
sensor.entryway_nest_protect_boven_smoke_status:
friendly_name: Rook Boven
sensor.hallway_nest_protect_beneden_co_status:
friendly_name: CO2 Beneden
sensor.hallway_nest_protect_beneden_smoke_status:
friendly_name: Rook Beneden
I want to have the red line turn into green
Same with these ones (default badges again):
ok, for the text boxes below the badge, you need to set the unit_of_measurement of these sensors
for the coloring of the badges you can use the themes, but you’d need to think about the template first: when to use which colors. Have anything in mind?
use a template like this:
homeassistant:
customize:
sensor.whatever:
templates:
theme: >
if (state === 'home') return 'green';
return 'grey';
or
templates:
theme: >
if (state > 0) return 'orange';
return 'green';
you must have these themes defined to be able to use them of course. Also, you need to have custom-ui installed.
Hi @Mariusthvdb. I have placed all the custom-ui files as described in the link you’ve pointed to.
Can I verify this is working?
What I want to achieve is the labels green if home (thuis) en red for away (afwezig).
Can you help me with the next steps for that?
sure , you need a green theme:
green_badge:
label-badge-red: green
label-badge-background-color: white
label-badge-color: grey
label-badge-text-color: green
red_badge:
label-badge-red: grey
label-badge-background-color: white
label-badge-text-color: red
and save that with your other themes
next create template for the device_trackers:
homeassistant:
customize:
device_tracker.phone_xx:
templates:
theme: >
if (state === 'home') return 'green_badge';
return 'red_badge';
please note that this isn’t Lovelace, but old_style HA…
Thanks! I do have the Lovelace UI active and running. So where do I define the themes?
I’ve put this in a themes.yaml file:
see https://www.home-assistant.io/components/frontend/#defining-themes
it all depends on how you’ve setup your configuration so check the docs and adjust if needed
I have put this in my configuration.yaml:
frontend:
themes: !include themes.yaml
I have added this to my customize.yaml
device_tracker.iphone_martin:
entity_picture: /local/martin.jpg
friendly_name: Martin
templates:
theme: >
if (state === 'home') return 'green_badge';
return 'red_badge';
I have put this in yo my themes.yaml:
green_badge:
label-badge-red: green
label-badge-background-color: white
label-badge-color: grey
label-badge-text-color: green
red_badge:
label-badge-red: grey
label-badge-background-color: white
label-badge-text-color: red
At themes I see this (is that ok?)
Not green yet
so the themes are correctly loaded.
Did you install custom-ui? home-assistant-custom-ui/docs/installing.md at master · andrey-git/home-assistant-custom-ui · GitHub
you should set the entity_picture and friendly_name in known devices.yaml (that is to say, if you don’t want them to change based on state).
use customize for the templates only in this case. Also, always check, if the state is exact. It will be in this case, but the templates need exact and case sensitive state/attributes to evaluate.
Yes I have copied all the files to the corresponding dirs
Can I verify it is running en loaded properly?
The entity_picture and friendly_name are both set like this because of the fact I used customization in the hassio configuration (UI).
This looks a bit odd though at the templates section
Have look at this
And put this in your frontend.yaml
javascript_version: latest
extra_html_url_es5:
- /local/custom_ui/state-card-custom-ui-es5.html
extra_html_url:
- /local/custom_ui/state-card-custom-ui.html
What do you mean with customise_glob.yaml? Is that a separate file, apart from customise.yaml?
Yes
homeassistant:
# Name of the location where Home Assistant is running
name: Home
# Location required to calculate the time the sun rises and sets
latitude: !secret home_latitude
longitude: !secret home_longitude
elevation: !secret home_elevation
unit_system: metric
# Pick yours from here: http://en.wikipedia.org/wiki/List_of_tz_database_time_zones
time_zone: Europe/London
customize: !include customize.yaml
customize_glob: !include customize_glob.yamlOk thanks! Will give it a try. What about this?
javascript_version: latest
extra_html_url_es5:
- /local/custom_ui/state-card-custom-ui-es5.html
extra_html_url:
- /local/custom_ui/state-card-custom-ui.html