CustomUI - discussion thread

Mikeinnc · June 6, 2018, 12:07am

Like you, I seemed to have a lot of 'messing around. until I finally chanced on a code snippet that seemed to work in the way I want - changing the colours of the icon according to the state. As you will have seen, this particular device is an alarm PIR, and I wanted a red-type colour for when it is active ie movement detected. I used the colour picker available at https://www.rapidtables.com/web/color/color-picker.html to define the RGB values I wanted (although I think an even better one is at https://www.w3schools.com/colors/colors_picker.asp)

binary_sensor.back_bedroom_pir:
  device_class: motion
  templates:
    state: >
      if (state === 'on') return 'Active';
      return state; 
    icon_color: >
      if (state === 'on') return 'rgb(206,27,88)';
      return 'rgb(26,192,116)';

This code is in my customize.yaml file. I believe the key issue here is to make certain that you have the ‘rgb(x,y,z)’ statement included within quotes. And it works!! Oh, and if you are like me and you usually spell colour with a ‘u’, make sure you don’t. Hope that helps…

Mikeinnc · June 6, 2018, 12:33am

Thanks so much, Andrey! Like others, I hadn’t realised what ‘customizer’ was capable of. That is exactly what I need to know - and I can confirm it works.

customizer:
  custom_ui: local
  hide_attributes:
    - icon_color

SensorCard_TextProblemsSolved

As to your second question about state - well, yes, I had wondered about that. My guess is that it is derived - somehow - from the Custom UI code that I am trialing on that device to change the on state message:

binary_sensor.back_bedroom_pir:
  device_class: motion
  templates:
    state: >
      if (state === 'on') return 'Active';
      return state;

So, when this PIR ‘fires’, it shows ‘Active’ (see above) and when there’s no movement, it shows ‘Clear’ - the default value. I don’t have this code snippet attached to any other sensor and it is the only one that shows this state attribute. Any comments would be welcome!! Thanks again for all your help

Mikeinnc · June 6, 2018, 12:40am

And I can also confirm that if I add ‘- state’ to the list of hidden attributes in customizer, that works, too!

customizer:
  custom_ui: local
  hide_attributes:
    - icon_color
    - state

Robbrad · June 6, 2018, 8:12am

It worked! You’re a star

Now I just need a way to hide the sensor when there is no value

Mariusthvdb · June 8, 2018, 8:31pm

HI @andrey, folks,

Is there a way we can customize the background-color of an individual card, and set it different and independent from the current theme?

something like:

homeassistant:
  customize:
    group.test:
      background-color: '#303030'

would be really nice to be able to set individual cards off against the reigning theme…
If not possible yet, Id like to file a feature request

Thx,
Marius

NigelL · June 9, 2018, 2:22am

Hi everyone,

I’m trying to take control of the default view, so am looking to use the hide_in_default_view: true. However, when I try to use it, I get an error when I validate the configuration. I tried searching the forums, but couldn’t find any references to people using this feature.

Invalid config for [group]: [hide_in_default_view] is an invalid option for [group]. Check: group->group->home->hide_in_default_view. (See /home/homeassistant/.homeassistant/configuration.yaml, line 118). Please check the docs at Group - Home Assistant

I’ve also noticed that some of the time, when I go to the Configuration tab, the Custom UI entry doesn’t show up.

Currently using HA 0.69.1 with CustomUI 20180602.

Mariusthvdb · June 14, 2018, 8:59am

Hi @andrey,
please let me ask a combined question on both improvement…
can we have confirmable controls on a script, and combining, even when an action_name is set?

example

homeassistant:
  customize:
    script.ha_restart
      action_name: Restart
      confirm_controls_show_lock: true

If yes, cool! If not, would you consider it, and except a feature request?

Mariusthvdb · June 14, 2018, 12:27pm

another customizing request concerning the use of mdi:icons and their appearance.

please see https://github.com/Templarian/MaterialDesign/issues/3057#issuecomment-397065190 for their advice how to proceed and see if custom-ui or hassio can be adapted to allow for positioning the icons like:

mdi:lightbulb:flip-h
mdi:lightbulb:rotate-45

it all started with my request, which was met recently, for a dedicated mdi:desk-lamp which id love to be able to flip horizontally for obvious reasons, having a right and a left desk-lamp…

could this be realized, and what would be the best way to proceed?

thanks,
Marius

Dennis87 · June 18, 2018, 2:48am

is it possible to change the icon color for locks? I have two zwave lock I want to be green if unlocked and red when locked.

Im able to use icon_color to change to red etc. but im not able to use If template to specify if unlocked show icon color green and locked red. The customize setting under is working but not if I use if template that I have working for sensors. Is it only supported for sensors?

lock.danalock_front_door_locked:
friendly_name: Front Door
icon_color: red
lock.danalock_garage_door_locked:
friendly_name: Garage Door
icon_color: green

claytonjn · June 18, 2018, 3:08pm

This is what I’m using to change icon color based on battery level, it should work for lock state too:

sensor.*_battery*:
  device_class: battery
  templates:
    hs_color: >
      if (state >= 66) {
        return;
      } else if (state < 66 && state >= 33) {
        return [30, 100];
      } else {
        return [0, 100];
      }

itay · June 22, 2018, 8:46pm

Hi friends,
I Have heared so much good stuff regarding customUi i just had to try it.
I have followed the intructions and ran the update.sh as root and all worked just fine !
Than i wanted to activate it and inserted the following to the configuration.yaml
customizer:
custom_ui: local

I have used the Configuration validation and all is good

However whan i add the following to the customize.yaml file as suggested and used the Configuration validation the validation was seems to be stuck and erros apeared at the HA loggers:

customize_glob:
light.:
custom_ui_state_card: state-card-custom-ui
cover.:
custom_ui_state_card: state-card-custom-ui

##ERRORS
2018-06-22 23:55:43 ERROR (MainThread) [aiohttp.server] Error handling request
Traceback (most recent call last):
File “/srv/homeassistant/lib/python3.6/site-packages/aiohttp/web_protocol.py”, line 385, in start
resp = await self._request_handler(request)
File “/srv/homeassistant/lib/python3.6/site-packages/aiohttp/web_app.py”, line 338, in _handle
resp = await handler(request)
File “/srv/homeassistant/lib/python3.6/site-packages/aiohttp/web_middlewares.py”, line 88, in impl
return await handler(request)
File “/srv/homeassistant/lib/python3.6/site-packages/homeassistant/components/http/static.py”, line 68, in staticresource_middle…

has anyone has a clue what i have done wrong? am i missing somthing?
I am using HA 0.71.0 on a raspberian.

Thanks in advance for any suggestion!

Bobby_Nobble · June 28, 2018, 11:12am

I’ve got an issue with icons not loading since somewhere between 0.69 and current. Everything is currently up to date and cache has been flushed. It happens in an Chrome, Safari and Edge on desktop and mobile.

On first load of a page after starting browser or a forced refresh, if the first page only has custom cards on it, icons fail to load on the group menu at the top and also any used in the custom card. If you click where an icon should be at the top it will open the relevant group and, if that has any normal card in it, all the icons appear and the initial page will then display properly.

If I add any normal card, even with just one simple switch or sensor, to the page that only has a custom card, everything works correctly until it is removed again.

Initially I though it was the Tiles card as that was the only one I had on it’s own but further investigation shows it is definitely an error with any custom card, eg one of the weather ones.

andrey · July 2, 2018, 5:20am

Itay, did you figure it out?
The error message seem unrelated.
The glob should be:

homeassistant:
  customize_glob:
    light.*:
      custom_ui_state_card: state-card-custom-ui

itay · July 2, 2018, 1:40pm

HI Andray,
I think I figured it just now following your response ( I have given up since I couldent get any help up to now )
It looks to me the issue is a combination of wrong Activating instructions and me being a newbie
In step 2:
“In the customize: section of configuration.yaml put custom_ui_state_card:…”
Which I belive should be directly under the homeassistant object and not the homeassistant ->customize object.

As I did so there’s no more errors or the validating script no longer hangs up.
Since I am a newbie let me know if I am correct and if so I will open an issue at the project to update the documentation.

Thanks buddy!

jtitley · July 2, 2018, 1:47pm

Is there a known compatibility issue with with the latest HASS? My customisations for changing the color of motion sensors and device trackers have failed when I upgraded. The GUI is super slow to start up presumably due to the amount of sensors that are failing with CustomIUI. This is the error in my log:

2018-07-02 23:39:14 ERROR (MainThread) [frontend.js.latest.201806250] https://{redacted}.duckdns.org:8123/frontend_latest/app-17305af0f25247ad302620ff87b7a617.js:2:12634 Uncaught TypeError: Cannot read property ‘applyThemesOnElement’ of undefined

I applied the update.sh

I’m using a theme in customize_glob.yaml:
“binary_sensor.motion_*”:
templates:
theme: >
if (state === ‘on’) return ‘motion_badge’; else return ‘nomotion_badge’;

“device_tracker.*”:
custom_ui_state_card: state-card-custom_ui
templates:
theme: >
if (state === ‘home’) return ‘home_badge’; else return ‘away_badge’;

And this is my frontend:
themes:
motion_badge:
label-badge-blue: ‘#bf1b00’
nomotion_badge:
icon: mdi:walk
home_badge:
primary-text-color: ‘#629e51’
label-badge-red: ‘#629e51’
away_badge:
primary-text-color: ‘#DF4C1E’
label-badge-red: ‘#DF4C1E’

I guess it could be some sort of element has changed in the GUI and the code can’t find it but I don’t know enough of HASS to determine if this is the case.

J

jtitley · July 2, 2018, 3:00pm

Oh wow, just saw this.
HA 0.70.0 and CustomUI 20180521 issues #134

Cache was the issue. All good.

sagilo · July 2, 2018, 8:31pm

How can I use themes as presets for icon colors?
I’ve tried creating this theme for example:

  themes:
    temp_hot:
      icon_color: "#cb8122"

And then set it to one of my sensors:

sensor.sata_6_temp:
  theme: temp_hot

But the theme isn’t applied.
I know its possible to set the color directly but I want to have a theme/preset and not hard coded color.

andrey · July 16, 2018, 3:21pm

I pushed a new version 20180713 that fixes two features broken in 0.73:
Column width and extra_badge from an attribute.

Mariusthvdb · July 16, 2018, 7:56pm

thank you very much!

Mariusthvdb · July 17, 2018, 10:14am

sorry to get back to this, but no such luck on IOS?

still the service system_log/write called spam caused by
mydomain.duckdns.org/frontend_latest/app-47a9b8a28d18c1f03ce16f220e977662.js:2:12641 TypeError: null is not an object (evaluating 't.substr')

and no badge…