I think the latter, it really is very simple
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
It is not working on Android Mobile App. Is there anything we can do to solve it?
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?
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
No , I deleted all the other files
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;-)
EDIT: Removed everything from
/config/www/custom_ui/and only left
state-card-custom-ui.html. It’s working again
EDIT2: Went back to my original
configuration.yaml file where I only have
homeassistant: customize: !include customize.yaml
where the file
customize.yaml was NOT modified (doesn’t even have that
custom_ui_state_card: state-card-custom-ui in it) and it still works so I’m a happy camper.
You can ignore what’s below this line
I can’t get it to work
I’ve changed the original
/config/www/custom_ui/state-card-custom-ui.html file to the file Mariusthvdb has in his github (had to copy the whole file and paste it in the supervisor file editor because I couldn’t find a way to grab the file directly)
Here’s the relevant lines in my
frontend: extra_html_url: - /local/custom_ui/state-card-custom-ui.html homeassistant: # customize: !include customize.yaml <- My old method of customization customize_glob: switch.ventilateursalonalimentation: custom_ui_state_card: state-card-custom-ui templates: icon: "return 'mdi:fan';" icon_color: "if (state == 'unavailable') return 'rgb(193,193,193)'; else if (entities['input_number.ventilateur_salon_speed'].state < 1.0) return 'rgb(54, 95, 140)'; else if
custom_ui_state_card: state-card-custom-ui makes no difference wether it’s their or not.
When I click the fan icon, its color changes from its off color to yellow, then back to its off color. Before, the fan color would change to the color defined for that speed. It’s not just that one item that it doesn’t work, all my customized icons are no longer changing their color correctly.
Here’s a simpler one that also doesn’t work:
remote.harmony_hub: custom_ui_state_card: state-card-custom-ui templates: icon: "if (state == 'on') return 'mdi:television'; else return 'mdi:television-off';" icon_color: "if (state == 'unavailable') return 'rgb(193,193,193)'; else if (state == 'on') return 'rgb(251,210,41)'; else return 'rgb(54, 95, 140)';"
This used to work perfectly before this dreaded 0.110 update
Thanks for your help
Trying to understand your post… I take it it’s working now? Glad if you did!
Do note that below the line your config was all sorts of wrong, so it shouldn’t have worked
Eg, the glob customize isn’t a glob at all but an entity, and you don’t need to set the state-card-custom-ui at all and the final else is unfinished
Anyways , hope you understand what it takes now , if not, let us know
Yeah, it’s working now, except from the app connected to Nabu Casa. That one still not showing the icon color. Trying to figure that one out right now.
What should have had in my config for it to work?
Edit: I had to forcibly close the App (Android) and relaunch it for it to have the icon colors again. Simply clearing the app cache didn’t work.
Mariusthvdb, out of topic question: Which card did you use to get the printer to display its status and ink level?
check here: Lovelace: Bar Card
we already new that extra_html_url were no longer advised, hence my remark in this thread and elsewhere to load custom_ui via the customizer option:
customizer: custom_ui: local
I fear though, and hence my contribution to the discussion started by Balloob in the link, that the customizer route will be frustrated too…
and those shadows have been resolved too!
as explained here https://github.com/home-assistant/frontend/issues/6028#issuecomment-633531546
we can use
frontend: extra_module_url: - /local/custom_ui/state-card-custom-ui.js
to be able to do so, edit the
state-card-custom-ui.html as Ive explained earlier, to have it use the new icon handling in HA110.
added to that, delete the opening on the last line (delete the last line is what I did…)
of course, rename to
state-card-custom-ui.js and restart.
since this is no longer a real PR on the original file I havent yet issued it on the custom-ui repo.
You can manually add a small edit in the line 27 (search for the date) so it reflects the new Custom-ui JS in the developer-tools/info and inspector like:
light_level sensors from the example a top of this thread:
as a followup, and better way of installing, see my dedicated repo
Now load custom_ui as resource, and no longer need
Hero! Thank you and everyone involved!
That did the trick for me.
Just moddifying the html file was not enough.