CustomUI - discussion thread

[Nemesis24]

Hi,
I’m searching, but don’t find so i hope you could help me.
I show a script like a badge, this work fine.
But inside the badge i’ve got “on” or “off”
and i woul’d like to have an icon.
is’it possible?
If yes how?
Thank you very much, and sorry for my “bad” english.

[PianSom]

Hello @andrey

I have just updated to 0.78.1 and have run update.sh. My frontend is broken. I am getting errors like

Sep 21 08:58:30 hassbian hass[23975]: 2018-09-21 08:58:30 ERROR (MainThread) [frontend.js.latest.201809160] :0:0 Script error.

and

Sep 21 09:00:58 hassbian hass[23975]: F%22toggle%22%3A%22display%22%7D(t%2Ci)%2Cd%3Dvoid%200%2Cc%3Di.attributes.state_card_custom_ui_secondary%3B%22light%22%3D%3D%3Da%26%26this.sliderEligible_(a%2Ci%2Ce)%3F(Object.assign(s%2C%7BcontrolElement%3A%22ha-entity-toggle%22%2CserviceMin%3A%22turn_off%22%2CserviceMax%3A%22turn_on%22%2CvalueName%3A%22brightness%22%2Cdomain%3Aa%7D)%2Cd%3D%22state-card-with-slider%22)%3A%22cover%22%3D%3D%3Da%26%26this.sliderEligible_(a%2Ci%2Ce)%3F(Object.assign(s%2C%7BcontrolElement%3A%22ha-cover-controls%22%2Cmax%3A100%2CserviceMin%3A%22close_cover%22%2CserviceMax%3A%22set_cover_position%22%2CsetValueName%3A%22position%22%2CvalueName%3A%22current_position%22%2CnameOn%3A%22open%22%2Cdomain%3Aa%7D)%2Cd%3D%22state-card-with-slider%22)%3A%22climate%22%3D%3D%3Da%26%26this.sliderEligible_(a%2Ci%2Ce)%3F(Object.assign(s%2C%7BcontrolElement%3A%22ha-climate-state%22%2Cmin%3Ai.attributes.min_temp%7C%7C-100%2Cmax%3Ai.attributes.max_temp%7C%7C200%2CserviceMin%3A%22set_temperature%22%2CserviceMax%3A%22set_temperature%22%2CvalueName%3A%22temperature%22%2CnameOn%3A%22%22%2Cdomain%3Aa%7D)%2Cd%3D%22state-card-with-slider%22)%3Avoid%200!%3D%3Dw%5Bl%5D%3F(s.controlElement%3Dw%5Bl%5D%2Cd%3D%22state-card-without-slider%22)%3Ai.attributes.show_last_changed%26%26!y.includes(l)%26%26(s.inDialog%3D!0)%2C%22unavailable%22%3D%3D%3Di.state%26%26(s.controlElement%3D%22%22)%2Cvoid%200!%3D%3Di.attributes.control_element%26%26(s.controlElement%3Di.attributes.control_element)%2Co(this%2C(c%7C%7Cd%7C%7C%60STATE-CARD-%24%7Bl%7D%60).toUpperCase()%2Cs)%7D%7D)%7D%2Cfunction(t%2Ce)%7Bwindow.JSCompiler_renameProperty%3Dfunction(t)%7Breturn%20t%7D%7D%5D)%3B%0A%2F%2F%23%20sourceMappingURL%3Dscripts.js.map%0A%2F%2F%23%20sourceURL%3Dhttp%3A%2F%2F192.168.99.254%3A8123%2Flocal%2Fcustom_ui%2Fstate-card-custom-ui.html.js%0A:0:0 Script error., service=write, domain=system_log, service_call_id=bb6b612dc1f74fffb6a54b53617a21e2>
Sep 21 09:00:58 hassbian hass[23975]: _custom_ui_secondary%3B%22light%22%3D%3D%3Da%26%26this.sliderEligible_(a%2Ci%2Ce)%3F(Object.assign(s%2C%7BcontrolElement%3A%22ha-entity-toggle%22%2CserviceMin%3A%22turn_off%22%2CserviceMax%3A%22turn_on%22%2CvalueName%3A%22brightness%22%2Cdomain%3Aa%7D)%2Cd%3D%22state-card-with-slider%22)%3A%22cover%22%3D%3D%3Da%26%26this.sliderEligible_(a%2Ci%2Ce)%3F(Object.assign(s%2C%7BcontrolElement%3A%22ha-cover-controls%22%2Cmax%3A100%2CserviceMin%3A%22close_cover%22%2CserviceMax%3A%22set_cover_position%22%2CsetValueName%3A%22position%22%2CvalueName%3A%22current_position%22%2CnameOn%3A%22open%22%2Cdomain%3Aa%7D)%2Cd%3D%22state-card-with-slider%22)%3A%22climate%22%3D%3D%3Da%26%26this.sliderEligible_(a%2Ci%2Ce)%3F(Object.assign(s%2C%7BcontrolElement%3A%22ha-climate-state%22%2Cmin%3Ai.attributes.min_temp%7C%7C-100%2Cmax%3Ai.attributes.max_temp%7C%7C200%2CserviceMin%3A%22set_temperature%22%2CserviceMax%3A%22set_temperature%22%2CvalueName%3A%22temperature%22%2CnameOn%3A%22%22%2Cdomain%3Aa%7D)%2Cd%3D%22state-card-with-slider%22)%3Avoid%200!%3D%3Dw%5Bl%5D%3F(s.controlElement%3Dw%5Bl%5D%2Cd%3D%22state-card-without-slider%22)%3Ai.attributes.show_last_changed%26%26!y.includes(l)%26%26(s.inDialog%3D!0)%2C%22unavailable%22%3D%3D%3Di.state%26%26(s.controlElement%3D%22%22)%2Cvoid%200!%3D%3Di.attributes.control_element%26%26(s.controlElement%3Di.attributes.control_element)%2Co(this%2C(c%7C%7Cd%7C%7C%60STATE-CARD-%24%7Bl%7D%60).toUpperCase()%2Cs)%7D%7D)%7D%2Cfunction(t%2Ce)%7Bwindow.JSCompiler_renameProperty%3Dfunction(t)%7Breturn%20t%7D%7D%5D)%3B%0A%2F%2F%23%20sourceMappingURL%3Dscripts.js.map%0A%2F%2F%23%20sourceURL%3Dhttp%3A%2F%2F192.168.99.254%3A8123%2Flocal%2Fcustom_ui%2Fstate-card-custom-ui.html.js%0A:0:0 Script error.

Any suggestions please??

EDIT: Problem solved by moving from the frontend: method to the customizer: method in configuration.yaml

[Mariusthvdb (Marius)]

@Nemesis24

But inside the badge i’ve got “on” or “off”
and i woul’d like to have an icon.
is’it possible?

you mean like this:

[Mariusthvdb (Marius)]

Hi ALl, @andrey

Ive searched everywhere but cant get it right, so please help me if you would:

i have this in my image templates:
return 'background-image: url(\"/local/tiles/family/m_' + state + '.png\")'

which works fine for my home and not_home states using m_home.png and m_not_home.png.

Since this is based on my Life360 device tracker, the state can be in the format of my other zones too, and that is where the issue arises:

They all start with a Capital, and some of them consist of 2 words. Captitals and un-concatenated filenames are not allowed, so I need to change Zone Hospital into zone_hospital to be able to use m_zone_hospital.png in the above template.

how do I transform state into that? I’ve tried several varieties of replace(' ','_')| lower but cant get it right.

Please have a look?

Thx!

[Mariusthvdb (Marius)]

working now with a intermediary template sensor:

sensor:
platform: template
sensors:
m_life360_state:
friendly_name_template: >
{{states(‘device_tracker.life360_m’)|title|replace(’’,’ ‘)}}
value_template: >
{% set state = states(‘device_tracker.life360_m’) %}
{{ state|replace(’ ‘,’’)| lower }}
entity_picture_template: >
{{ ‘/local/tiles/family/m_’ + states(‘sensor.m_life360_state’) +’.png’}}

which state is read in the Tiles:

    entities:
      - entity: device_tracker.life360_m
        style_template: >
          if (state === 'home' || state === 'not_home') return 'background-image: url(\"/local/tiles/family/m_' + state + '.png\")';
          return 'background-color: #643aac;background-image: url(\"/local/tiles/family/m_' + entities['sensor.m_life360_state'].state + '.png\")';

and I have made dedicated images per state. Bit of a workaround but it works beautifully…

[Mariusthvdb (Marius)]

new question:

Ive made a dedicated post in the subject:

Customize custom updater sensors: impossible?

HI, Using @ludeeus great custom updater I run into an issue Ive never met before: sensors that cant be customized… Ive had a little chat with @ludeeus on the subject, https://github.com/custom-components/custom_updater/issues/22#issuecomment-425700318 but didn’t yet follow it up, since it was about another issue, and thought it best to check here on the forum for related experience on that particular issue. could it be related to this? Must say I’ve never ran into this kind of trouble ye…

still, I’d like to ask the community here too about it. See @ludeeus CC Custom Updater, been talking with him about the impossibility to customize the sensors it creates. Don’t know why this is, and how this could be changed. Would any of you customizers have a clue?
thx

[Mibix]

For some reason my light switches with the slider bars are working perfectly fine when accessing from my server’s browser but when I access them from my phone or laptop they are gone unless I comment out the these settings in the customize.yaml file:
light.downstairs_lamp:
custom_ui_state_card: state-card-custom-ui
state_card_mode: break-slider-toggle
stretch_slider: true

I have tried clearing cookies/data on all devices and I still get the same results I’m not sure what changed besides updating both customui and HA.

EDIT: Turns out I just had to change custom_ui: local to custom_ui: hosted under customizer

[jtitley]

@andrey, does extra_data_template it work on groups? I have two switches which have power statistics. They work fine with extra_data_template. But I’d like to add them up and show them under the Group name or next to the same somehow. Is this possible? If not is there a suggested work around?

[maurizio53 (Maurizio Fabiani)]

After updating to 0.84.2 everytime i open a view in lovelace frontend i get this error:

2018-12-14 13:06:06 ERROR (MainThread) [frontend.js.latest.201812110] https://xxxxxxxx.duckdns.org/local/custom_ui/state-card-custom-ui.html:27:15926 Uncaught TypeError: Class extends value undefined is not a constructor or null

Must i disable the Custom UI or what?

[axgio (Alessandro Giovannelli)]

Ihave also the same problem. For now I have installed version 0.83.3. Any solution?

[thecode (Shay)]

Andrey has just release a Hotfix - “Release 20181217. Hotfix for hA 0.84.1”

[maurizio53 (Maurizio Fabiani)]

Link? Where to get it? Or i only need to run the update.sh script?

[thecode (Shay)]

I used the update.sh script, All is working as it should now

[Mariusthvdb (Marius)]

@thecode

All is working as it should now

my groups on the iPhone App still are empty unfortunately, can you conform this to be solved?

[thecode (Shay)]

@Mariusthvdb

my groups on the iPhone App still are empty unfortunately, can you conform this to be solved?

I don’t use iPhone, the web UI and on android is OK, also the exception that caused it doesn’t happen anymore.
Try to force refresh the page or check on another device first

[maurizio53 (Maurizio Fabiani)]

I updated using the script, cleared cache but i still get this error:

2018-12-17 15:16:22 ERROR (MainThread) [frontend.js.latest.201812111] https://myduckdns.duckdns.org/local/custom_ui/state-card-custom-ui.html:27:15926 Uncaught TypeError: Class extends value undefined is not a constructor or null

If i would like to disable completely custom ui, how to do this:

[Mariusthvdb (Marius)]

Yes!
Ive got it working again… thank you @andrey !

had to reset the app, delete it, restart, reinstall…
no matter it’s back, hope it will stay this time.

for fun:

homeassistant:
  customize_glob:
    sensor.dark_sky*icon*:
      templates:
        entity_picture: >
          return '/local/weather/icons/' + state + '.png';

glad it’s (still) possible (again)

[Mariusthvdb (Marius)]

@maurizio53

disable completely custom ui, how to do this:

just comment it out in your configuration.yaml, and frontend.yaml (of course depending on the way you have it installed)

[maurizio53 (Maurizio Fabiani)]

All regarding extra_html_url and extra_html_url_es5 ?

[Mariusthvdb (Marius)]

@maurizio53

All regarding extra_html_url and extra_html_url_es5 ?

yes indeed.

When do you see that error? Does it happen when loading a certain page, or card?