Ha 110 no longer supports custom-ui?

You have to understand that tagging is different for everyone. When you get upwards of 100 tags an hour it becomes rude. This is pretty much why the rule is in place. Some people don’t want that. Simple as that.

Understood, I was too slow withdrawing my post as I decided not to complain.

1 Like

not to stray too much from the original topic here, but only now do I notice you are showing a Moderator badge. Is that new, or did I miss it before?

It’s relatively new

2 Likes

congrats petro

1 Like

Icons now use mdc-icon-size instead of iron-icon-width so you can target that. And I think the “padding” is because there’s no display: flex

- type: custom:button-card
  styles:
    icon:
      [--mdc-icon-size: 2.2em, display: flex, align-items: center]

Add a custom_icons.js to resources as module and prefix your icons with custom:

async function getIcon(name) {

    if (name === "virus") {
      return {
        path: "M22.5 10.7h-1c-2.3 0-3.5-2.8-1.9-4.5l.7-.7c.5-.5.5-1.4-.1-1.9-.5-.5-1.3-.5-1.8 0l-.7.7c-1.7 1.7-4.5.5-4.5-1.9v-1c0-.7-.6-1.3-1.3-1.3s-1.3.6-1.3 1.3v1c0 2.3-2.8 3.5-4.5 1.9l-.6-.7c-.5-.4-1.4-.4-1.9.1-.4.5-.4 1.3 0 1.8l.7.7c1.7 1.7.5 4.5-1.9 4.5h-1c-.7 0-1.3.6-1.3 1.3s.6 1.3 1.3 1.3h1c2.3 0 3.5 2.8 1.9 4.5l-.7.7c-.5.5-.5 1.4.1 1.9.5.5 1.3.5 1.8 0l.7-.7c1.7-1.7 4.5-.5 4.5 1.9v1c0 .7.6 1.3 1.3 1.3s1.3-.6 1.3-1.3v-1c0-2.3 2.8-3.5 4.5-1.9l.7.7c.5.5 1.4.5 1.9-.1.5-.5.5-1.3 0-1.8l-.7-.7c-1.7-1.7-.5-4.5 1.9-4.5h1c.7 0 1.3-.6 1.3-1.3s-.6-1.3-1.4-1.3h0zm-12 2a2.22 2.22 0 0 1-2.2-2.2 2.22 2.22 0 0 1 2.2-2.2 2.22 2.22 0 0 1 2.2 2.2 2.22 2.22 0 0 1-2.2 2.2zm3.7 2.6a1.11 1.11 0 0 1-1.1-1.1 1.11 1.11 0 0 1 1.1-1.1 1.11 1.11 0 0 1 1.1 1.1 1.11 1.11 0 0 1-1.1 1.1z",
      };
    }
  
    if (name === "roborock") {
      return {
        path: "M13.3 5.3c-.1 0-.2 0-.3.1-.1 0-.2 0-.4-.1-.1-.2-.3-.3-.6-.3s-.5.2-.6.4c-.1 0-.2 0-.3.1-.1-.1-.2-.1-.3-.1a.47.47 0 0 0-.5.5.47.47 0 0 0 .5.5c.2 0 .4-.1.4-.3h.2c.1.2.3.3.6.3.2 0 .5-.1.6-.4h.2c.1.2.2.3.4.3a.47.47 0 0 0 .5-.5c0-.3-.2-.5-.4-.5zM12 6.9a3.33 3.33 0 0 1 3.3 3.3 3.33 3.33 0 0 1-3.3 3.3 3.33 3.33 0 0 1-3.3-3.3A3.33 3.33 0 0 1 12 6.9zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm7.4 13.1c-.4 1-1 1.8-1.7 2.6a7.82 7.82 0 0 1-2.6 1.7c-1 .4-2.1.6-3.1.6s-2.1-.2-3.1-.6-1.8-1-2.6-1.7-1.3-1.6-1.7-2.6S4 13 4 12c0-.4 0-.8.1-1.1h4.3c0-.2-.1-.4-.1-.6s0-.4.1-.6h-4c.1-.3.2-.5.3-.8.4-1 1-1.8 1.7-2.6C7 5.5 7.9 5 8.9 4.6S11 4 12 4s2.1.2 3.1.6 1.8 1 2.6 1.7 1.3 1.6 1.7 2.6c.1.2.2.5.3.8h-4c0 .2.1.4.1.6s0 .4-.1.6H20c.1.4.1.8.1 1.1 0 1.1-.2 2.1-.7 3.1z",
      };
    }
  }
  
  window.customIconsets = window.customIconsets || {};
  window.customIconsets["custom"] = getIcon;
2 Likes

hey Mattias,

you seem very knowledgeable in these matters… might I persuade you to have a look at the state-card-custom-ui.html file , and see what in line 27 is causing the icon_color no longer to function because of the new way of handling icons in 110?
We have established that the icons themselves can still be templated using the js templates, like before, so I have hope that changing the script to the new method should be possible?

icon_color appearing on C 2835, 12607, 12731, 12925 and 13048
thanks if you could and would.

just as an update, posted this in the feature request, as further reason to have an alternative to custom-ui, since all the current card-mod stylings dont set the more-info in the entities, and only change the representation of them in the frontend cards.

imaging having to do things like this in each lovelace card:

  - type: custom:auto-entities
    card:
      title: Test auto coloring light level (lux) sensors
      type: entities
    filter:
      include:
        - entity_id: sensor.*_sensor_light_level_raw
          options:
            style: |
              :host {
                --paper-item-icon-color:
                 {% set level = states(config.entity)|float %}
                 {% if level == 0 %} black
                 {% elif level < 1 %} maroon
                 {% elif level < 300 %} firebrick
                 {% elif level < 10000 %} orange
                 {% elif level < 17000 %} green
                 {% elif level < 22000 %} gold
                 {% elif level < 25500 %} teal
                 {% elif level < 28500 %} dodgerblue
                 {% elif level < 33000 %} lightskyblue
                 {% elif level < 40000 %} lightblue
                 {% elif level < 40000 %} lightcyan
                 {% else %} azure
                 {% endif %}
                 ;
               }

and realize this is an easy card, with auto-entities. I gain having to do so on individual and hand picked entities in a more complex card…

Yess! @bram_kragten (this tag is for applauding!) fixed this issue, custom-ui is again showing colors: https://github.com/home-assistant/frontend/issues/5892#issuecomment-630910390

only use the state-card-custom-ui.html file (load it either via front-end or customizer) and change the code Bram provides.

This really makes the world for me right now. couldn’t be happier!

2 Likes

Will the patched version be posted somewhere or will each user have to make their own changes?

I think the latter, it really is very simple :wink:

fork the repo and make the change and others can use your repo

had it forked since 2017… now, I don’t know how to get rid of that old fork and fork anew…
so here’s a full copy of the state-card-custom-ui.html you can use, I filed a PR:

file is too big to post here unfortunately.

either install it via the frontend method:

frontend:
  extra_html_url:
    - /local/custom_ui/state-card-custom-ui.html

or the customizer method (which requires you to also install the tiny custom component customizer) all documented on https://github.com/andrey-git/home-assistant-custom-ui/blob/5274c9b1e51d8a4ba409cbf510d286472d42c328/docs/activating.md#1-tell-home-assistant-to-load-relevant-files

these are the only relevant files for now (and can even be edited to cut all irrelevant state card settings, but I haven’t done that yet)

after that, start customizing!

  customize_glob:
    sensor.epson_wf_c5710_series_*:
      templates:
        icon_color: >
          if (state > 70) return 'green';
          if (state > 50) return 'orange';
          return 'red';

and in more-info:

Is it possible to stop more-info showing the icon_color template?

no, not yet. or not anymore…

Ive tried it with the customizer setting, like it was possible (long time ago) but have never been able to replicate that.
I did file a feature request in the frontend repo on this though: https://github.com/home-assistant/frontend/issues/5773

Hello guys!!

It is not working on Android Mobile App. Is there anything we can do to solve it?

Thanks,
José Henrique.

Hey Marius
Thank you for your efforts to keep this alive!

May I ask you; after changing the state-card-custom-ui.html, did you additionally convert it to state-card-custom-ui.html.gz to replace the old one?

PS regarding:

You can delete the old fork at the bottom of the repo-settings. I tried to fork and change it myself, but was quite overwhelmed with all this to be honest :exploding_head:

No , I deleted all the other files :wink:

1 Like

Deleting the rest is good advice, my installation was not working with icon_color until i deleted the remainder and left only
state-card-custom-ui.html and state-card-custom-ui-es5.html

now it works as it should, thanks @Mariusthvdb

Depending on your devices, you can probably also take out the es5 file. It isn’t used any longer by modern devices. And, it isn’t changed so would not work if used without the same hack;-)