Custom UI - icon color change

123 · November 16, 2018, 1:50am

Check the About page to ensure Custom UI is installed.

Faecon · November 16, 2018, 7:47pm

yes. That is what I have too. just my HA version is 0.81.2

Mariusthvdb · November 16, 2018, 8:06pm

did you change the path, and still get the error?

Faecon · November 17, 2018, 6:39am

in config.yaml :

customize: !include customize.yaml
customizer: !include config/customizer.yaml
frontend: !include frontend.yaml

in frontend.yaml :
## https://home-assistant.io/components/frontend/
## https://home-assistant.io/developers/frontend_creating_custom_ui/

  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

in customize.yaml:
sensor.fibaro_system_fgms001zw5_motion_sensor_temperature_2:
templates:
icon_color: >
if (state > 25) return 'rgb(0, 128, 0 )’;
if (state >= 18 ) return ‘rgb(223, 76, 00 )’;
return ‘rgb(35, 76, 99 )’;

sensor.fibaro_system_fgms001zw5_motion_sensor_temperature:
  templates:
    icon_color: >
      if (state > 25) return 'rgb(0, 128, 0 )’;
      if (state >= 18 ) return 'rgb(223, 76, 00 )';
      return 'rgb(35, 76, 99 )';

my entityid : sensor.fibaro_system_fgms001zw5_motion_sensor_temperature

Mariusthvdb · November 17, 2018, 6:27pm

please range the path here also: !include customizer.yaml

next, I think it would be wise to set
customize_glob:
‘.’:
custom_ui_state_card: state-card-custom-ui

set that in configuration.yaml

homeassistant:
  name: Homeassistant
  latitude: !secret latitude
  longitude: !secret longitude
  elevation: !secret elevation
  unit_system: metric
  time_zone: !secret time_zone
  customize: !include_dir_merge_named customize
  customize_glob: !include customize_glob.yaml

and this in the customize_glob.yaml

##########################################################################################
# Customize entities matching a pattern
# to override use: custom_ui_state_card: null
# YAML keys can’t start with an asterisk - *, so in that case quotes are requires.
# However in the middle or end of the key an asterisk is allowed.
# https://community.home-assistant.io/t/customui-discussion-thread/48694/237?u=mariusthvdb
##########################################################################################

'*.*':
  custom_ui_state_card: state-card-custom-ui

Faecon · November 21, 2018, 3:40pm

this is my config, and it doesn’t work. Anyone who can help me ?

in config.yaml :

customize: !include customize.yaml
customizer: !include config/customizer.yaml
frontend: !include frontend.yaml

in frontend.yaml :
## https://home-assistant.io/components/frontend/
## https://home-assistant.io/developers/frontend_creating_custom_ui/

  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

in customize.yaml:
sensor.fibaro_system_fgms001zw5_motion_sensor_temperature_2:
templates:
icon_color: >
if (state > 25) return 'rgb(0, 128, 0 )’;
if (state >= 18 ) return ‘rgb(223, 76, 00 )’;
return ‘rgb(35, 76, 99 )’;

sensor.fibaro_system_fgms001zw5_motion_sensor_temperature:
  templates:
    icon_color: >
      if (state > 25) return 'rgb(0, 128, 0 )’;
      if (state >= 18 ) return 'rgb(223, 76, 00 )';
      return 'rgb(35, 76, 99 )';

my entityid : sensor.fibaro_system_fgms001zw5_motion_sensor_temperature

costomize_glob.yaml

##########################################################################################

# Customize entities matching a pattern

# to override use: custom_ui_state_card: null

# YAML keys can’t start with an asterisk - *, so in that case quotes are requires.

# However in the middle or end of the key an asterisk is allowed.

# https://community.home-assistant.io/t/customui-discussion-thread/48694/237?u=mariusthvdb

##########################################################################################



'*.*':

  custom_ui_state_card: state-card-custom-ui

Mariusthvdb · November 21, 2018, 4:06pm

hi back again!

You don’t mention the contents of your customizer.yaml. You can take that line out if you don’t have it, or at lest correct the path to !include customizer.yaml

you actually have these files installed? in /config/www/custom_ui/ ?

RezzZ · November 22, 2018, 11:44am

I have. I use the local automatic installation (using the update.sh script). It will download these files to the correct folder.
Did you look at the installation instructions?

this I added in my configuration.yaml:

# Enables configuration UI
config:

# enable custom_ui for icon color customization
customizer:
  custom_ui: local

Mariusthvdb · November 22, 2018, 12:18pm

… yes,
and that’s why I told you you shouldn’t use the customizer: settings you posted above.

You’re using the update.sh script, which takes care of installing the files, just add the front-end settings and the customize_glob and you’re set to go.

RezzZ · November 22, 2018, 1:43pm

hmm sorry, I totally missed the context of your question. It was to help Faecon.

But you’re saying the customizer: part is not required?

Mariusthvdb · November 22, 2018, 2:07pm

Indeed, unless you want to set other specific settings as described in the docs on the github, not needed for installing custom-ui when the update.sh script is used for automatic installation.

Faecon · November 23, 2018, 11:39am

Nothing is changing. Is it possible something is overwriting the colour ? From another yaml file ?

Mariusthvdb · November 23, 2018, 1:58pm

did you take out the custom_ui: local after customizer: ?

Faecon · November 24, 2018, 7:16am

I already had removed the customizer

#customizer: !include customizer.yaml

Faecon · November 25, 2018, 10:55am

hi guys.

this works for me

sensor.fibaro_system_fgms001zw5_motion_sensor_temperature:
  friendly_name: kamer Joachim en Saar
  templates:
    icon_color: >
      if (state > 25) return '#008000';
      if (state >= 18 ) return '#df4c00';
      return '#234c63';

not in rgb but in hexa

Mariusthvdb · November 25, 2018, 2:14pm

well that’s good to hear, finally… proves custom-ui is working.

you can use any css color format, including rgb. see: home-assistant-custom-ui/docs/features.md at master · andrey-git/home-assistant-custom-ui · GitHub

templates:
  icon_color: >
    if (state > 25) return 'rgb(0, 128, 0)';
    if (state >= 18 ) return 'rgb(223, 76, 0)';
    return 'rgb(35, 76, 99)';

or use the color names:

templates:
  icon_color: >
    if (state > 25) return 'green';

unless for some reason your lights don’t support these color settings. You can check that in the dev-state page and look in the attributes column:

Saturnus · December 8, 2018, 11:54pm

Is there one post to start from?

I am trying to give device_tracker items a green colour when they are home. This thread seems to be cluttered with 10 ways of doing it where half don’t work and the other half don’t provide a step by step plan but assume you know each file where the code needs to go, etc.

Mariusthvdb · December 9, 2018, 9:26am

yes, you shouldinstall custom-ui first, read the documentation ann then you probably have concluded this will do it:

homeassistant:
  customize_glob:
    device_tracker.ping_iphone_*:
      show_last_changed: true
      templates:
        icon_color: >
          if (state === 'home') return 'rgb(251, 210, 41)';
          return 'rgb(128, 128, 128)';
        _stateDisplay: >
          if (state === 'home') return 'Online';
          return 'Offline';

to set customization globally,

or:

homeassistant:
  customize:
    device_tracker.appletv:
      templates:
        theme: >
          if (state === 'home') return 'green';
          return null;
        _stateDisplay: >
          if (state === 'home') return 'On';
          return 'Off';

for an individual entity

Saturnus · December 9, 2018, 12:10pm

Thanks for helping out. Got it figured out in the end and will describe here how for newbies.

First I have to state that I was not clear in my post about what I wanted to accomplish. Apologies for that. I was looking for badges/labels/icons that would change colour based on the state of device_tracker, thus home or not_home. The code given above this post will change the colour when a listbox is rendered or when an entry (also device_tracker ones) is clicked on and a layover box is opened. But the badge/label won’t change. Again, my mistake for not being clear.

So, here is how to do it:

Part 1 - CustomUI
Install CustomUI by following the ‘Automatic install’ procedure from home-assistant-custom-ui/docs/installing.md at master · andrey-git/home-assistant-custom-ui · GitHub.

Then activate with method 1.1 from home-assistant-custom-ui/docs/activating.md at master · andrey-git/home-assistant-custom-ui · GitHub.

Finally add this to configuration.yaml:

customizer:
  custom_ui: local

Restart HA. You can find this by clicking Configuration - General from the webinterface.

Confirm CustomUI to be working by looking at the dev-info page by clicking the i-button in the developer tools area from the webinterface:

Custom UIs:

CustomUI: 20180831

If Custom UI is not mentioned, then it is not installed and/or activated.

Part 2 - Styling
Always use the check config feature in the webinterface located at Configuration - General between edits.

To have the icon and badge colours changed:

This goes into configuration.yaml:

homeassistant:
  customize_glob:
    device_tracker.*:
      state_card_mode: badges
      templates:
        theme: >
          if (state === 'home') return 'green_badge'; else return 'red_badge';

Likely it can be dropped into customize_glob.yaml if you have this separate file and call it from configuration.yaml. For newbies reading this, realize that YAML uses indentation as part of code structure. So using wrong indentation will lead to errors. Also elements can only be called once. Here in the code above homeassistant: is called, which is by default in the configuration.yml already, so what you need to do is copy only new code and put it ‘inside’ the reach of homeassistant:.

Here an example of how the first part of your configuration.yaml might look when integrating the above code:

homeassistant:
  latitude: 53
  longitude: 9
  elevation: 20
  time_zone: CET
    # Customization file
  customize: !include customize.yaml
  customize_glob:
    device_tracker.*:
      state_card_mode: badges
      templates:
        theme: >
          if (state === 'home') return 'green_badge'; else return 'red_badge';
# Show links to resources in log and frontend
#introduction:

Continuing in configuration.yml:

frontend:

  themes:  
    green_badge:
      label-badge-red: green
      label-badge-border-color: lightgrey
      label-badge-background-color: white
      label-badge-text-color: green

    red_badge:
     label-badge-red: grey
     label-badge-border-color: lightgrey
     label-badge-background-color: white
     label-badge-text-color: red

Again here, frontend: is already in the configuration by default so insert the new code with the right indent.

Restart HA as described earlier.

Now it should work.

Borrowed most of this code from cameron earlier in this thread.

My questions still:

Would there be a better way to organize this? Like a different method instead of themes? Since themes will be displayed in the skin selector menu.
Can the label be renamed to something else? Since devices are not always away but just offline.
How about something like ‘state groups.’ Some devices are critical and always online, so when offline something must be wrong, thus you would want to show them as red when offline but show normal devices as orange when offline. Also, some devices can be offline but won’t leave the house thus when offline they should be given even another colour. Etc.

If no easy answer, I hope to answer the questions myself one day. At least CSS skills onboard.

kriss13 · December 11, 2018, 7:51am

You sir are gold.
Finally all the info in one place and WORKING!.

BTW, I use Hassio, so I used manual install (local) and activated using 1.2 chapter from links above.

Thank you

ps.
Somebody make this a sticky and into documentation please.