Custom UI - icon color change

Mariusthvdb · January 12, 2021, 6:57pm

no bother , no worries.

just helped someone else here https://github.com/Mariusthvdb/custom-ui/issues/31#issuecomment-758862466

click https://github.com/Mariusthvdb/custom-ui/releases/tag/20201218-b and save that file to the folder of your choice under www. then follow the instructions in the link.

lovelace.reload_resources is a core service, and has nothing to do with custom_ui:

Must confess I am not 100% positive, but this will have to do with using yaml mode or not. If you don’t use yaml mode, (you use the GUI for changing Lovelace) adding resources will automatically load them.

cavern · January 13, 2021, 12:22pm

thanks again. I beleive it has to do with the path to reach the file. For information my UI version is 20201229.1 on a 2021.1.0 version HA.

I didn’t have the www folder and created the whole www/lovelace/ressources/custom_ui path to put in the last given custom-ui.js (and removed the old one).

not sure about the way HA reads the /local… path.
I declared /local/lovelace/resources/custom-ui/custom-ui.js without effect so I just changed to the real full path /homeassistant-conf/www/lovelace/resources/custom_ui/custom-ui.js, but still no effect.

I’m not in yaml mode for lovelace that’s why I cant’t access the reload_resources service.

Mariusthvdb · January 13, 2021, 12:39pm

be precise: use the exact same folder name as you declare in the path: either custom-ui or custom_ui … right now, you use the one in the path and the other in the folder

cavern · January 13, 2021, 12:57pm

well done Sheldon ! (private joke) I’ve just adjusted the _ vs - and the ss vs s (for resources).

~~Tried the /homeassistant-conf/www… path with no success, and the /local… path doesn’t give any better…~~

After a clean restart and a clean cache refresh, at last, it works. Thanks a lot Marius, you made my day !

cavern · January 13, 2021, 8:22pm

Really @Mariusthvdb did a wonderfull job with his JavaScript version of Custom-UI.

I’m now very pleased with my lovelace look.

The only thing I stil don’t manage to customize are the persons badges on top of lovelace.

I defined themes in a themes.yaml file:

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

The theme file is included in my configuration.yaml :

frontend:
  themes: !include themes.yaml

And used in my customize_glob.yaml :

person.*:
  templates:
    theme: >
      if (state === 'home') return 'green_badge';
      return 'red_badge';

But maybe one can only customize badges within a card ?

Mariusthvdb · January 13, 2021, 8:49pm

Sorry but no, themes don’t work anymore, and haven’t found an edit to reinstate that functionality in Lovelace yet. Remember this was designed for States…

You can use card-mod for badges and I will post an example when I am back at my desk.
Cheers!
back

badges:
  - entity: person.marius
    style:
      ha-state-label-badge:
        $:
          ha-label-badge:
            $: |
              .label-badge .label span{
                {% if is_state('person.marius','home') %} color: red;
                {% else %} color: black;
                {% endif %}
              }
        .: |
          :host {
            {% if is_state('person.marius','home') %} --label-badge-red: green;
            {% else %} --label-badge-red: grey;
            {% endif %}
          }

see: https://github.com/thomasloven/lovelace-card-mod#styling-badges

cavern · January 14, 2021, 2:43pm

Ok, so you create new entities of type badge and those are “stylable”.

that could be good enough to me. I’ll give it a try this weekend to see if i’m capable of that understanding.

Have a good day.

Mariusthvdb · January 14, 2021, 3:23pm

no, these are Lovelace badges, and the code above is the top of a Lovelace view. Entity is of the domain person.

cavern · January 14, 2021, 3:50pm

thanks for this detail.

So far i haven’t yet modified my lovelace views file and was about to set that in the configuration.yaml. You saved me a bit of time.

cavern · January 16, 2021, 9:50am

card-mod did the trick. thanks again @Mariusthvdb. Although I’m not too acquainted yet to JavaScript and CSS so I more or less copied examples.

I believe there is a way to better optimize my code as it mostly duplicates three times :

    badges:
      - entity: person.anne_laure
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                .: |
                  :host {
                    {% if is_state('person.anne_laure','home') %} --label-badge-red: green;
                    {% else %} --label-badge-red: red;
                    {% endif %}
                   }
      - entity: person.emmanuel
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                .: |
                  :host {
                    {% if is_state('person.emmanuel','home') %} --label-badge-red: green;
                    {% else %} --label-badge-red: red;
                    {% endif %}
                   }
      - entity: person.valentine
        style:
          ha-state-label-badge:
            $:
              ha-label-badge:
                .: |
                  :host {
                    {% if is_state('person.valentine','home') %} --label-badge-red: green;
                    {% else %} --label-badge-red: red;
                    {% endif %}
                   }

Mariusthvdb · January 16, 2021, 3:05pm

exactly, hence my request above if we could use entity instead of the entity name in the template. If so, we could simply use a yaml anchor:

    badges:
      - entity: person.anne_laure
        style: &badge_style
          ha-state-label-badge:
            $:
              ha-label-badge:
                .: |
                  :host {
                    {% if is_state(entity,'home') %} --label-badge-red: green;
                    {% else %} --label-badge-red: red;
                    {% endif %}
                   }

      - entity: person.emmanuel
        style: *badge_style

      - entity: person.etc
        style: *badge_style

we might have to ask Thomas Loven or Kendell about this, since they wont be reading along here
see 🔹 Card-mod - Super-charge your themes! for the relevant thread

NM! Found it already: use config.entity

even 1 line shorter:

badges:
  - entity: person.me
    <<: &badge
      style:
        ha-state-label-badge:
          $:
            ha-label-badge:
              $: |
                .label-badge .label span{
                  {% if is_state(config.entity,'home') %} color: purple;
                  {% else %} color: black;
                  {% endif %}
                }
          .: |
            :host {
              {% if is_state(config.entity,'home') %} --label-badge-red: gold;
              {% else %} --label-badge-red: grey;
              {% endif %}
            }

  - entity: person.she
    <<: *badge

depending on what you want to define under the anchor.

cavern · January 16, 2021, 3:37pm

I understand the syntax (never used the &myvariable/*myvariable scheme before) and discover the config.entity possibility. Have to read a bit about that config.entity way of doing.

HA is an infinite montain of knew knowledge for me

Mariusthvdb · January 16, 2021, 3:52pm

yeah these are Yaml Anchors, and can be defined ‘on the fly’ so to speak. Anything written after the definition character <<: &anchor_name will be copied (‘merged’ in anchor lingo) when you put <<: *anchor_name

anchors are defined per yaml file. Meaning, if you need the same anchor in another file you need to recreate it first.

here’s a Yaml primer by Thomas, read all the way down: http://www.thomasloven.com/blog/2018/08/YAML-For-Nonprogrammers/

since examples can be easier to understand than the above primer, (there are 2 different ways to create Anchors) have a look at more examples in https://github.com/Mariusthvdb/custom-ui/blob/2ba4168e9554e9290bc3f2c872316a522639f2e4/examples.md

cavern · January 16, 2021, 4:04pm

thanks, I’ll read that.

the anchor syntax is simple yet powerful. I’ll probably reuse it as I hate repeating code.

basti4k · January 31, 2021, 12:15pm

Change the ICON Color dont work for me

customize:

binary_sensor.office_window_xiaomi_1_openclose:
  friendly_name: Büro Fenster
  device_class: window
  templates:
    rgb_color: "if (state === 'on') return [200, 100, 30]; else return [10, 20, 30];"

But this Example dont work

if i open the Window, the icon color is the Frontend Style:

ha-icon[data-domain="binary_sensor"][data-state="on"]
color: var(--paper-item-icon-active-color, #fdd835);

default Color.

What I need, is when the window is open, then change the color: --color-red-error-1
or RGB

i hope you an help me! Thanks all

Mariusthvdb · January 31, 2021, 1:04pm

You should use icon_color: and not rgb_color:

Also, check the correct color format to use, you can find many examples in the examples ;-)-

basti4k · January 31, 2021, 1:38pm

yes, i test so many ways, but nothing works.

here the new Test in customize File:

binary_sensor.office_window_xiaomi_1_openclose:
  friendly_name: Büro Fenster
  device_class: window
  icon_color: "{% if is_state('binary_sensor.office_window_xiaomi_1_openclose', 'on') %}rgb(255, 214, 10){% else %}rgb(255, 255, 255){% endif %}"

Mariusthvdb · February 1, 2021, 3:38pm

icon_color can only be set using custom-ui, which uses javascript templates, and not jinja templates like you use.

did you install custom-ui?

basti4k · February 1, 2021, 6:09pm

yes i install custom-ui

frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /local/custom-ui/custom-ui.js

/usr/share/hassio/homeassistant/www/custom_ui/custom-ui.js

is that okay?

the yaml in customize:

binary_sensor.office_window_xiaomi_1_openclose:
  friendly_name: Büro Fenster
  device_class: window
  templates:
    icon_color: '{% if is_state("binary_sensor.office_window_xiaomi_1_openclose", "on") %}rgb(255, 214, 10){% else %}rgb(255, 255, 255){% endif %}'

yaml office:

- type: glance
        show_name: true
        style: !include ../includes/style_entities.yaml
        entities:
          - entity: light.light1test
            name: Licht
          - sensor.buro_dect301_1_temperature
          - entity: binary_sensor.office_window_xiaomi_1_openclose
            name: Fenster

window

window2

Mariusthvdb · February 2, 2021, 9:00am

this is not ok. As I said before.

please check the many examples… you started out well Custom UI - icon color change - #159 by basti4k but somehow changed from a JS template to a jinja template… why?

try:

  templates:
    icon_color: >
      if (state == 'on') return 'rgb(200, 100, 30)'; 
      return 'rgb(10, 20, 30)';

and you should be set