Custom UI - icon color change

Hi, I’m trying to use Custom UI usign lovelace withot success… I reproduce step by step @Saturnus guide.

  • Installed and activated custom ui like their documentation. I can see it loaded in the info dev page.
    imagen
  • Add template under cuscomize_glob, and themes with cuscomize colour stiles in configuration.yaml:
  • And a sesor has values and read the added templante:
    imagen

What I’m doing wrong?
Thanks

Lovelace doesn’t support the theming for entities… unfortunately. You can customize the icons though

Thanks @Mariusthvdb, then only icons can be customized?

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.

1 Like

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

1 Like

Cool! So what I have is these default badges from Nest integration.

image

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):

image

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).

image

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

image

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

@Mariusthvdb, I moved the picture and name to the known_devices.yaml.

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.yaml

Ok 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