I've installed custom-ui using HACS and it is working fine for the standard customizing changes like colors and icons.

When i try to add confirm_controls_show_lock or extra_badge etc, it does not seem to work.
Are these valid for your version of custom-ui?

Inspect

Btw. the custom-ui is not showing up any more on /config/info

customizing:

switch.sonoff_s55_4381:
  icon_color: gold
  show_last_changed: true
  confirm_controls_show_lock: true
  extra_badge:
    entity_id: sensor.sonoff_s55_4381_status
    attribute: LoadAvg
    unit: dBm
sensor.sonoff_s55_4381_status:
  icon_color: gold
  show_last_changed: true
  extra_data_template: "${attributes.LoadAvg}dBm"

Resulting Entities Card

This issue appeared after updating to some of the latest version of Custom UI.
Currently using Custom UI 20220419.1 (Win10x64, Chrome).

When a customized entity is inside a config-template-card it may loose it's color.
The code:

type: custom:config-template-card
entities:
  - input_number.test_level_2
card:
  type: entities
  entities:
    - input_number.test_level_2

The entity is customized by Custom UI:

homeassistant:
  customize_glob:
    input_number.test_level_2:
      templates:
        icon_color: >-
          if (state <= 10) return 'yellow';
          else
          if (state <= 20) return 'brown';
          else
          if (state <= 30) return 'magenta';
          else
          if (state <= 40) return 'lightblue';
          else
          if (state <= 50) return 'green';
          else
          if (state <= 60) return 'orange';
          else
          if (state <= 70) return 'purple';
          else
          if (state <= 80) return 'red';
          else
          if (state <= 90) return 'gold';
          else
          return 'cyan';

The icon is flickering:

A similar case - when the customized entity is used inside multiple-entity-row inside config-template-card:

Customization is just setting an entity_picture value (not dynamically changing value).

Probably a similar case - a customized person entity placed inside a map card WITHOUT config-template-card - then the whole map is flickering and restoring it's scale (described here - home-assistant/frontend#12357).

With the former custom-ui

and the following config:

customizer:
  custom_ui: local

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

Colors stopped working. Can get them in picture-elements-card via style though:

[...]
style:
      '--paper-item-icon-color': '#FDD835'
[...]

Then I've found your rewriting of custom-ui and installed it quickly. THX. Gr8 work.

But now I miss the buttons and all the other extras from the 'old' solution, see

With customizer:

With custom-ui:

Any ideas? Thanks in advance....

Hey Marius, I hope you are doing well!

Since a few days - at least I didn't notice earlier - the customizations sometimes take a long time (5-10 sec.) to load.
This happens when I reload (F5) a page on my Windows PC in Edge and Firefox, but not on the iOS companion app.

Are you guys experiencing similar problems?

I'm using the HomeMatic integration and was trying to show correct color icons.
There is no reaction to the customizing implemented.

The entities do not seem to have a unique id ...

customizing:

sensor.hm_low_battery:
  templates:
    icon_color: if (state == 'O.K.') return 'green'; return 'orange';    

Any idea why this is not working?

never noticed before but clicking an entity on an type: entity card doesn't respect the settings we set under hidden attributes. As on an custom:mini-graph-card.

tagging @CAB426 since you fixed this on the more-info before, please could you once more have a look?

eg:
Lovelace card:

  - type: custom:mini-graph-card
    entities:
      - entity: sensor.co2_living
        name: Co2
      - entity: sensor.temperatuur_living
        name: Temp Living
      - entity: sensor.luchtvochtigheid_living
        name: Vocht
      - entity: sensor.schimmel_sensor
        name: Schimmel
    height: 100
    line_width: 4
    font_size: 75
    show:
      graph: true
      fill: true
      extrema: true

clicking the entity in the card results in:

while the same entity is correctly treated in a entities or glance card:

this happens on the latest version 20210511, but also on earlier versions. I guess the Lovelace cards use an other way of calling the more info on these cards, which I hope can be added to the updateMoreInfo() function in custom-ui.

Thanks if you could have a look

I am looking in to the code and I can see device classes are something that shows up.

Can I style based on device class somehow?

Hello, ever since 0.115 I've been getting this error. I assumed it was for everyone and due to the new updated but haven't seen any issues opened. Please advise if anyone can point me in the right direction. Thanks!

HA Version: Hassio Docker - 0.115.6
Custom UI Version: 20200918 adapted for HA110+ (Installed via HACS)
Logger: homeassistant.setup
Source: custom_components/customizer/init.py:63
First occurred: 12:33:57 AM (1 occurrences)
Last logged: 12:33:57 AM
Error during setup of component customizer

Traceback (most recent call last):
File "/usr/src/homeassistant/homeassistant/setup.py", line 213, in _async_setup_component
result = await task
File "/config/custom_components/customizer/init.py", line 71, in async_setup
add_extra_html_url('/local/custom_ui/state-card-custom-ui')
File "/config/custom_components/customizer/init.py", line 63, in add_extra_html_url
frontend.add_extra_html_url(
AttributeError: module 'homeassistant.components.frontend' has no attribute 'add_extra_html_url'

Hi,

I am experiencing this issue:
https://community.home-assistant.io/t/fixed-in-ios-14-b6-ios-14-beta-5-reloads-every-time-you-click-on-link/219974

I belive that there was a patch in 0.115, but I am still experiencing the same issue. Could this be related to the custom ui?

Many thanks

Hi there,
first of all big cudos for your work on the module!

I've included the module via lovelace resources as described in repo README.md
On my laptop it works as a charm but i got really confused it seems not to work on any mobile devices I have.

In HomeAssistant mobile app it causes some strange behaviour e.g dashboard is either not loaded or refreshing in loop.
Via Chrome browser on android I get 404 error when navigating to dashboard.

Is it expected behavior?

my setup:
Frontend version: 20200811.0 - latest
Home Assistant 0.115.0.dev20200813
CustomUI: JS 20200720 adapted for HA 110.+

lovelace.yaml

mode: yaml
resources: !include lovelace/resources.yaml
dashboards:
  lovelace-landpage:
    mode: yaml
    filename: ui-lovelace-landpage.yaml
    title: Start
    icon: mdi:account-group
    show_in_sidebar: true
    require_admin: false

lovelace/resources.yaml

  type: module

With resources:
On laptop:

On Android:

Without resources:
On Android:

Since I upgraded HA to 2022.4 (supervised), icon changes based on states stopped working for me.

The following code (defined in customize_glob.yaml) used to work fine with HA pre-2022.4:

"binary_sensor.rain01":
  templates:
    icon: >-
      if (state === 'on') return 'mdi:white-balance-sunny';
      return 'mdi:weather-rainy';
    icon_color: >-
      if (state === 'on') return 'rgb(253,216,54)';
      return 'rgb(68,115,158)';

Expected (pre-2022.4 without page refresh):
➡️

Current behaviour:
➡️

As you can see, icon_color changes work fine (as in dynamically and without page refresh), but icon changes still require a page refresh to update.

By the way, I am not redefining states, I simply change the label of a custom:button-card based on on/off to display dry/wet.

I upgraded custom_ui to 20220419 and restarted HA (2022.4.6), still does not work.

Did I miss something?

Thanks,
softice

For some reason, if you set a custom icon using the code below, those icons won't show up on iOS 10 devices. It does work on the computer and newer devices though. It seems like anything inside the Templates: section is what it doesn't like. I can set icons outside of that Templates: section and they do change on the iPad. I tried putting the logic outside of the templates section but that didn't work either.

This is an example of what I have in my customize.yaml:

switch.xmas_tree_big:
  templates:
    icon: >
      if (state === 'off') return 'mdi:pine-tree';
      if (state === 'on') return 'mdi:pine-tree';
    
    icon_color: >
      if (state === 'on') return 'rgb(255,0,0)';

This is what it looks like on the computer:

This is what it looks like on an iOS 10 iPad 4:

Dear Marius,

I have many light entities. When a lovelace entity card is used the icon changes depending the brightness of the bulb.

Brightness 0 is translated into a white icon, 255 becomes a light blue icon.

Is it possible by your custom-ui to change it globally so all light entities to a custom color change.
I mean if brightness = 0 = black icon -> 255 = white icon

Thanks in advance,

    Failed to load resource: the server responded with a status of 404 (Not Found)

Deleted the plugin and reinstall, did not help.

http://x.x.x.x:8123/hacsfiles/custom-ui/custom-ui.js?hacstag=26755814820230106 net::ERR_ABORTED 404 (Not Found)

Originally posted by @kristianolofsson in #86 (comment)

Greetings to all,
I do not understand why this code to change the color It does not work, in : config/customize.yaml:

#Sensores Estacion Meterologica:
sensor.temperatura1:
friendly_name: "Temperatura dht22"
icon: mdi:speedometer-slow
templates:
#icon_color: green
icon_color: >
if (state < 25) return 'green';
else return 'red';

Target:

Entity:

Config-> Info:

observing the file structure I don't have the lovelace directory in www, is it normal? it is installed in docker.
Thanks for everything!!!

Hi.

I would like to report that doesn't work the per-entity theming of the top-of-the-page badges .

It is possible?

Tnx

core-2021.4.3
CustomUI JS 20210322-X

I got something like this can use in button card template , it will shows a animation icon when the device on / off. i would like to know if i can use this kind with all the animation svg code/path template inside customize.yaml instead of inside lovelace's button card template , otherwise every icon almost 100 lines code, and put all the animation in lovelace, every time refresh or loading the ha will slow.

  icon_tv:
    styles:
      custom_fields:
        icon:
          - width: 89%
          - margin-top: -7%
          - margin-left: 1%
          - fill: >
              [[[
                return variables.state === 'on' ? '#616161' : '#9da0a2';
              ]]]
    custom_fields:
      icon: >
        [[[
          const style = `
            <style>
              @keyframes on {
                from {
                  transform: scaleY(0);
                }
                to {
                  transform: scaleY(1);
                }
              }
              .on {
                animation: on 1s;
                transform-origin: -100% 46%;
                animation-fill-mode: forwards;
              }
              @keyframes off {
                from {
                  transform: scaleY(1);
                }
                to {
                  transform: scaleY(0);
                }
              }
              .off {
                animation: off 1s;
                transform-origin: -100% 46%;
                animation-fill-mode: forwards;
              }
            </style>
          `;
          const path = `
            <path d="M46 9.2v27.5H4.1V9.2H46m2.4-2.4H1.6v32.3h46.7c.1 0 .1-32.3.1-32.3zM11.9 43.2h26.3c.6 0 1.1-.4 1.1-1v-.3c0-.6-.4-1.1-1-1.1H11.9c-.6 0-1.1.4-1.1 1v.3a1.11 1.11 0 0 0 1.1 1.1z"/>
          `;
          const gradient = `
            <linearGradient id="A" gradientUnits="userSpaceOnUse" x1="5.401" y1="34.714" x2="43.817" y2="11.74">
              <stop offset="0" stop-color="#64acb7"/>
              <stop offset="1" stop-color="#7fdbe9"/>
            </linearGradient>
          `;
          if (variables.state === 'on' && variables.timeout < 2000) {
            return `
              <svg viewBox="0 0 50 50"> ${style} ${gradient} 
                <path d="M2.9,8h44.3v29.9H2.9V8z" fill="#20262890"/>
                <path class="on" d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/> ${path} 
              </svg>
            `;
          }
          if (variables.state === 'on' && variables.timeout > 2000) {
            return `
              <svg viewBox="0 0 50 50"> ${gradient} 
                <path d="M2.9,8h44.3v29.9H2.9V8z" fill="#20262890"/>
                <path class="on" d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/> ${path} 
              </svg>
            `;
          }
          if (variables.state === 'off' && variables.timeout < 2000) {
            return `
              <svg viewBox="0 0 50 50"> ${style} ${gradient} 
                <path class="off" d="M2.9,8h44.3v29.9H2.9V8z" fill="url(#A)"/> ${path} 
              </svg>
            `;
          } else {
            return `
              <svg viewBox="0 0 50 50"> ${style} 
                ${path}
              </svg>
            `;
          }
        ]]]

Logger: frontend.js.latest.202112150
Source: components/system_log/init.py:189
First occurred: 4:54:17 PM (537 occurrences)
Last logged: 4:54:49 PM

https://brunt.duckdns.org/hacsfiles/custom-ui/custom-ui.js:219:9 Uncaught TypeError: Cannot read properties of undefined (reading 'state')

Used my prev config from Ver 2022.x and works fine. Upgraded to 2023.1 and no icons are no longer colored.
Attribut logic still works but not working.

On HA 0.115.2 I get that error on reboot

Logger: frontend.js.latest.202009180
Source: components/system_log/init.py:193
First occurred: 21:33:58 (1 occurrences)
Last logged: 21:33:58
https://192.168.20.178:8123/local/community/custom-ui/custom-ui.js?v=20200528:940:0 NotSupportedError: Operation is not supported

If I add an * in the sensor name to include all devices similar in name I get an error when I check the config. If I add the sensors individually it works fine

Entry in customize.yaml with wildcard

binary_sensor.lumi_lumi_sensor_wleak_aq1_*_ias_zone:
templates:
icon_color: >
if (state === 'on') return 'red';
return 'steelblue';

Sensors listed individually works

binary_sensor.lumi_lumi_sensor_motion_aq2_c2abbc07_ias_zone:
templates:
icon_color: >
if (state === 'on') return 'red';
return 'steelblue';

binary_sensor.front_door_motion:
templates:
icon_color: >
if (state === 'on') return 'red';
return 'steelblue';

Error checking config

extra keys not allowed @ data['customize']['binary_sensor.lumi_lumi_sensor_wleak_aq1_*_ias_zone']

On startup of HA I get this error

Logger: frontend.js.latest.202009171
Source: components/system_log/__init__.py:193
First occurred: 21:02:37 (1 occurrences)
Last logged: 21:02:37
https://192.168.20.178:8123/local/community/custom-ui/custom-ui.js?v=20200528:940:0 NotSupportedError: Operation is not supported

Can't change some of my my cards ti different icon color.
This is my card, that is underneath a grid card:
- type: button entity: binary_sensor.garageoppnare_channel_1_input name: Garageport show_name: true show_state: true show_icon: true tap_action: action: call-service service: script.oppna_stang_garageport confirmation: text: öppna / Stäng ?

And this is the rows from the customize section;
binary_sensor.garageoppnare_channel_1_input: templates: icon: > if (state === 'on') return 'mdi:garage-open-variant'; return 'mdi:garage-variant'; icon_color: > if (state ==='on') return 'red'; if (state ==='off') return 'green'; return 'green';

The icon is changing but the colors is just the standard ones with yellow when on

see:
https://community.home-assistant.io/t/2022-9-home-assistant-birthday-release/458283/177?u=mariusthvdb

added to the more-info issue, this is a new step in the HA development where Custom-ui needs to be adapted thoroughly

please assist if you know your way around HA frontend and JS

Hi Mariusthvdb,

I installed your custom-ui and finally I'm very happy that 1 icon changes color based on a sensor.

So far, I haven't split up my configuration so my configuration.yaml looks like:

(Used a picture, because otherwise it was 1 line of text)

A nice result:

As you can see I have more temperature sensors and I'd like to use the above for all my temperature sensors.
I checked your page with examples and tried many things. Unfortunately the only thing, I get are errors.

When I change sensor.living_temp: into sensor.*_temp by using the wildcard I get an error when checking my configuration:
extra keys not allowed @ data['customize']['sensor.*_temp']

Spend already some hours to solve this but can't find it. Can you put me in the right direction? Many thanks!

Hi,

I just upgraded to HA 0.116.2. Since this upgrade, my card-mod setting does not work any more, if custom-ui is activated.

With card-mod, I am modifying the font size and space between 2 lines. This is the glance card, where I identified the problem. card-mod verison is 2.0.2

• type: glance
  show_icon: false
  columns: 6
  align: right
  style: |
  ha-card {
  font-size: 12px;
  margin-top: -2.5%;
  }
  state_color: true
  entities:
  - entity: sensor.hourly_current_total_power_consumption
  name: "Hourly"
  - entity: sensor.daily_current_total_power_consumption
  name: "Today"
  - entity: sensor.weekly_current_total_power_consumption
  name: "Weekly"
  - entity: sensor.monthly_current_total_power_consumption
  name: "Monthly"
  - entity: sensor.quarterly_current_total_power_consumption
  name: "Quarterly"
  - entity: sensor.yearly_current_total_power_consumption
  name: "Yearly"

I get an error that the custom_ui is not found:

The file is there:

I appended the url with todays date to make sure it loads it new.
I have tried to CTRL + F5.

What else is there to do?

Everything seems to work as it should. The icons are colored dynamically as I have coded in customize.yaml

I am not sure that I placed the lovelace resource folder in the correct location.

I am running hass.io on my synology via docker.

I placed the lovelace folder under www (see image). Where should it be for my setup?

Home assistant changed the way it handles the Frontend, and instead of tracking states, it now subscribes to entities. For core HA this should bring extra speed.

However, this fundamentally breaks the way custom-ui tracks states to implement its template functionality.

The only way we can now make the template kick-in is by reloading the view. The templates still are valid, but are simply not updated anymore on state change.

Writing this as a generic placeholder, and adding the links I posted in the Breaking section in the readme:

Home Assistant 2022.4,
PR HAWS 6.1
Websockets.

Checkout Paulus's explanation in the 2022.4 release party on the matter.

For Custom-ui this means the templates we use are no longer immediately executed, but need a View reload. Which obviously makes many templates useless, especially the ones that set an icon on state change (on/off...) or where a signal color was used as the indication of an alert color.

Hello Marius,
I grew tired of the HA lightbulb colors in my frontend being unconducive to me...

and have been searching all evening to find a solution and found this thread: https://community.home-assistant.io/t/customize-dimming-light-icon/98780/8. I've tried implementing a template but it's not working:

homeassistant:
  customize: !include customize.yaml
  customize_domain:
    switch:
      templates:
        icon_color: >
          if (state == 'on') return 'green';
          return 'red';
        icon: >
          if (state == 'on') return 'mdi:toggle-switch';
          return 'mdi:toggle-switch-off';
    light:
      templates:
        theme: ''
        icon_color: >
          if (state == 'off' return 'rgb(128,128,128)';
          if (attributes.brightness < 16) return 'rgb(255,255,255)';
          if (attributes.brightness < 32) return 'rgb(255,255,240)';
          if (attributes.brightness < 64) return 'rgb(255,255,224)';
          if (attributes.brightness < 80 return 'rgb(255,255,208)';
          if (attributes.brightness < 96) return 'rgb(255,255,192)';
          if (attributes.brightness < 112) return 'rgb(255,255,176)';
          if (attributes.brightness < 128) return 'rgb(255,255,260)';
          if (attributes.brightness < 144) return 'rgb(255,255,144)';
          if (attributes.brightness < 160) return 'rgb(255,255,128)';
          if (attributes.brightness < 176) return 'rgb(255,255,112)';
          if (attributes.brightness < 192) return 'rgb(255,255,96)';
          if (attributes.brightness < 208) return 'rgb(255,255,80)';
          if (attributes.brightness < 224) return 'rgb(255,255,64)';
          if (attributes.brightness < 240) return 'rgb(255,255,32)';
          if (attributes.brightness < 255) return 'rgb(255,255,16)';
          return green;

The template for domain: switches is working.
Can you see what I'm doing wrong or is what I am trying to do not possible?

Hi,
I have the following in my customize.yaml:

yahoofinance.qcom:
  friendly_name: QCOM
  templates:
    icon_color: >
      if is_state_attr('yahoofinance.qcom', 'trending', 'up') return 'green';
      return 'red';

However, the icon color does not change. Could you help?

Hi,

I am trying to add dynamic icon and icon color to an MQTT sensor but it shows an error when verifying the configuration.

Here you've got the code and the error. How can I fix it? Thanks!

   - name: inverter_bat_status_description
      state_topic: Inverter/Bat_Status_Description
      unique_id: inverter_bat_status_description_id
      icon: >
        {{'mdi:check-bold' if this.state === 'Running' else 'mdi:alert-circle'}}
      attributes:
        icon_color: >
          {{'green' if this.state === 'Running' else 'red'}}

Invalid config for [mqtt]: [attributes] is an invalid option for [mqtt]. Check: mqtt->mqtt->sensor->31->attributes.

be careful with updating to HA 2021.6 The core frontend handling on more-info has changed significantly, hiding all attributes under a fold-row.

This results in the current custom-ui not being able to catch that, thus revealing all attributes set on the entity, including the hidden attributes custom-ui sets using hide_attributes:

for now, this doesn't work in HA 2021.6:

  customize_glob:
    '*.*':
      hide_attributes:
        - icon_color
        - templates

result:

not even sure we can bring it back.

while we see

listed correctly in a Yaml configured instance, the Ui list isnt displayed in a UI configured instance

also tested it with:

frontend:
  extra_module_url:
    - /local/lovelace/resources/custom-ui/custom-ui.js

which loads the resource fine, but still no list listed.

seems odd, and Frontend devs state there is no change in the panel at all.

we should check if this is something we can fix.

as title, see:

homeassistant:

  customize_glob:

    sensor.*_sensor*temperature:
      <<: &hide
        hide_attributes:
          - templates
      templates:
        icon_color: >
          if (state < -20) return 'black';
          if (state < -15) return 'navy';
          if (state < -10) return 'darkblue';
          if (state < -5) return 'mediumblue';
          if (state < 0) return 'blue';
          if (state < 5) return 'dodgerblue';
          if (state < 10) return 'lightblue';
          if (state < 15) return 'turquoise';
          if (state < 20) return 'green';
          if (state < 25) return 'darkgreen';
          if (state < 30) return 'orange';
          if (state < 35) return 'crimson';
          return 'firebrick';

After upgrading to 0.111.1 i get tons of these errors.

2020-06-12 14:41:45 ERROR (MainThread) [frontend.js.latest.202006032] https://192.168.1.24:8123/local/custom-ui/custom-ui.js?v=20200528:31:16122 Uncaught TypeError: Cannot read property 'state' of undefined

And they stop just after the UI frontend loads completely.
I noticed you updated custom-ui.js 3 days ago and installed latest release…

If you confirm this will work on Home Assistant then I'll document the steps I've taken and how no matter what is tried it just won't install.

Otherwise if it's only meant for Home Assistant Core, I'll try another way to get an icon to change colour based on state.

With the last update custom-ui.js was deleted and custom-ui-beta.js updated.
The documentation still references custom-ui.js.

Should a setup be done with custom-ui-beta.js instead now or was the custom-ui.js deleted by mistake?

Checklist

• I'm running the latest version of CustomUI (Update guide) or using a specific release that is not marked as "Broken".
• I tried to force-refresh (Ctrl+Shift+R / Ctrl+F5) the browser
• (Optional, but recommended) I'm using Chrome or tried to reproduce the feature on Chrome.

Browser + Version:
Chrome Version 83.0.4103.61 (Official Build) (64-bit)

CustomUI version:
CustomUI: 20200520-adapted-for-HA110+

Home Assistant release (hass --version):
0.110.2

Problem-relevant configuration.yaml entries:

frontend:
  extra_module_url:
  - /local/custom_ui/state-card-custom-ui.js

homeassistant:
  customize_domain:
    climate:
      templates:
        icon_color: >
          if (state == 'heat_cool') return '#99AC18';
          if (state == 'heat') return '#F58019';
          if (state == 'cool') return '#268AD2';
          if (state == 'dry') return '#FFC100';
        icon: >
          if (state == 'heat_cool') return 'mdi:sync';
          if (state == 'heat') return 'mdi:fire';
          if (state == 'cool') return 'mdi:snowflake';
          if (state == 'dry') return 'mdi:water-percent';
          if (state == 'fan_only') return 'mdi:fan';
          return 'mdi:air-conditioner';

  customize:
    switch.all_climate_heat_cool:
      templates:
        icon_color: if (state == 'on') return '#99AC18';  # 'rgb(154, 171, 33)';  # Solarized Green
    switch.all_climate_heat:
      templates:
        icon_color: if (state == 'on') return '#F58019';  # 'rgb(245, 128, 25)';  # Orange
    switch.all_climate_cool:
      templates:
        icon_color: if (state == 'on') return '#268AD2';  # 'rgb(76, 154, 218)';  # Solarized Blue
    switch.all_climate_dry:
      templates:
        icon_color: if (state == 'on') return '#FFC100';  # 'rgb(248, 192, 30)';  # Solarized Yellow

ui-lovelace.yaml - comparison: entities card vs paper-buttons-row (within auto-entities card)

...
  - type: entities
    title: Climate
    entities:
    - climate.kitchen_ac
    - climate.bedroom_ac
    footer:
      type: buttons
      entities:
      - switch.all_climate_heat_cool
      - switch.all_climate_heat
      - switch.all_climate_cool
      - switch.all_climate_dry
      - switch.all_climate_power_off

  - type: custom:auto-entities
    card:
      type: entities
      title: Climate
      show_header_toggle: false
    entities:
    - climate.kitchen_ac
    - climate.bedroom_ac
    - type: custom:paper-buttons-row
      buttons:
      - entity: switch.all_climate_heat_cool
        name: false
      - entity: switch.all_climate_heat
        name: false
      - entity: switch.all_climate_cool
        name: false
      - entity: switch.all_climate_dry
        name: false
      - entity: switch.all_climate_power_off
        name: false
...

Result:

• Entities card (the above) colorizes switches in accordance with the customization (snowflake is blue).
• Auto-entities (the below) colorizes climate entities in accordance with the customization (snowflake is blue).
• paper-buttons-row (the below row) seems to ignore the customization (snowflake is yellow).

Problem-relevant Home Assistant log entries:

Any errors from browser Javascript console:

I've seen this is a known error mentioned in the readme

I'm not sure how this version was built, but think a fix for the e.push error is to remove this block from the original project
https://github.com/andrey-git/home-assistant-custom-ui/blob/master/src/utils/hooks.js#L321

Hi,
Is there a way to grab a variable from the current theme and use it in an icon_color template instead of hardcoding the color code?

and sometimes even the templates again:

seems to be different between browsers (quickly checked Chrome and Safari on the Mac) though all seem to show at least the attributes, including custom-ui 's on hide_attributes setting.

Need some further investigating.

homeassistant:
customize:
person.david:
templates:
state: >
{% if is_state("sensor.david_iphone11", "home") and is_state("device_tracker.david_iphone11", "home") %}
home
{% else %}
not_home
{% endif %};

i want change person.david state by sensor.david_iphone11 and device_tracker.david_iphone11 .but dosent work.

it is works well in developer-tools/template

Am I only person experiencing this?

Describe the issue

After upgrade to HA 2023.02, this error flooded my log and won't stop.

http://xxxx:8123/hacsfiles/custom-ui/custom-ui.js?hacstag=26755814820221115:206:14 TypeError: undefined is not an object (evaluating 'entities['sensor.crypto_btc_24hours_change'].state')

I tried :

• disable this particular entity
• remove custom-ui

But still no lucky. Then I opened an issue on HACS repo, but they said it's not their prob.

Hi,

Just realized these days that there are a couple of errors in my logs related to custom_ui:

Source: components/system_log/__init__.py:193 
First occurred: 12:14:42 PM (4 occurrences) 
Last logged: 12:34:35 PM

http://192.168.xxx.xxx:8123/local/custom_ui/custom-ui.js?v=20201024:2088:26 TypeError: 691 is not a function (near '...i...')
http://192.168.xxx.xxx:8123/local/custom_ui/custom-ui.js?v=20201024:2088:26 TypeError: 824 is not a function (near '...i...')
http://192.168.xxx.xxx:8123/local/custom_ui/custom-ui.js?v=20201024:2088:26 TypeError: 834 is not a function (near '...i...')
http://192.168.xxx.xxx:8123/local/custom_ui/custom-ui.js?v=20201024:2088:26 TypeError: 992 is not a function (near '...i...') 

I already downloaded the newest version (20201024) today, but still getting this error.

referencing #21 and please allow the tag @CAB426 , I now notice the more-info on groups still show all attributes, even when hidden in the custom-ui.

Note sure if this is new, but could you check if this is happening in your setup too? If so, we have a new challenge ;-)

Logger: frontend.js.latest.202309080
Source: components/system_log/__init__.py:269 
First occurred: 10 september 2023 om 16:54:29 (30 occurrences) 
Last logged: 07:48:52

Uncaught error from Safari 16.6 on Mac OS 10.15.7 Script error. null @:0:0
Uncaught error from Safari 16.6 on Mac OS 10.15.7 TypeError: null is not an object (near '...elector("ha-dialog")...') updateMoreInfo (/local/resources/custom-ui/custom-more-info.js:19:43) dispatchEvent ([native code]::) event (src/common/dom/fire_event.ts:76:21) nextRender (src/components/ha-expansion-panel.ts:131:14)

happening after updating to the 2023.9 version.
need to explore what.why.when

quick check shows the error to occur when clicking an entity, to reveal the more-indo panel itself, and not, as I expected, to occur when opening the attributes box in a more-info panel, which causes the script triggering expanded-changed event

also, it does not happen on all entities. which makes it a bit difficult to debug quickly
nor does it seems to happen in Chrome at all, only seeing it in Safari /Mac for now.

Seems to be a repeating issue with the last few HA updates, but all hidden attributes are back again...

@CAB426 please if you find a spare moment, could you again have a look? release 1.0 is due for dec 13th, and it would be so cool if this would be fixed before the holidays ;-)

thanks in advance!

Hi.

I noticed today (and probably even in few past weeks) that custom-ui is not handling icon colors.
As far as I can consider the other params are working - eg. icons themselves or brightness.

I checked the steps from similar past ticket and more or less the config looks well except one thing.
I can see in inspector the custom-ui loaded but cannot see it at /config/info page

I do not nderstand what's wrong. Accordgin the documentation the icon_color shall work.
I am attaching all relevant screen shots.

Plus the section from customize_glob.yaml (I tried simple color even and the icon_color2 is jsut a storage for values before elaborating with other ways):

    binary_sensor.*_contact*:
      templates:
        color: if (state == "off") return 'green'; return 'red';
        icon_color: if (state == "off") return 'green'; return 'red';
        icon_color2: if (state == "off") return 'rgb(53, 130, 181)'; return 'rgb(234, 175, 37)';
        brightness:  if (state == "off") return 71; return 92;
        icon: >
          if (state == "off") return "mdi:door-closed";
          return "mdi:door-open";