Themes for badges

[andrey-git]

Themes for badges

[andrey-git]

return Seit (entities['sensor.climate_livingroom_windowshutter_openingtime'].state) Minuten offen; => return 'Seit ' + (entities['sensor.climate_livingroom_windowshutter_openingtime'].state) + ' Minuten offen';

[tringler]

Applied that, but unfortunately no change in the behaviour.

[andrey-git]

In both group and binary sensor?
It should have eliminated at lest one of the javascript errors.

[tringler]

Yes, I have only that left:

state-card-custom-ui.html:1 Uncaught TypeError: Cannot read property 'customizer.customizer' of null
    at Object.useCustomizer (state-card-custom-ui.html:1)
    at Object.init (state-card-custom-ui.html:1)
    at state-card-custom-ui.html:1

Yep, it's the same for group and for binary_sensor directly:

[andrey-git]

I pushed a new version were the template error prints a more helpful message and the "Cannot read property 'customizer.customizer' of null" is fixed.

[tringler]

I updated to the last version and can confirm all javascript errors are gone.

[andrey-git]

What happens if you apply the 'yellow' theme to everything via ConfigurationPanel->General menu?

[tringler]

That is working.

[andrey-git]

Just making sure: Is the state of binary_sensor.climate_livingroom_windowshutter indeed 'on' in the dev-state panel?

[andrey-git]

Also try to replace theme_template with a plain template: yellow to check if the template calculation is to blame or the theming code.

[tringler]

theme: yellow and template: yellow is working for sensor group and for binary_sensor.

[andrey-git]

What platform is that binary sensor?

[tringler]

binary_sensor - In my case binary_sensor.climate_livingroom_windowshutter - Which is defined as:

climate_livingroom_windowshutter:
  friendly_name: Fenster
  value_template: >-
    {%- if is_state("binary_sensor.jmd4015744_state", "off") -%}
        Zu
    {%- else -%}
        Offen
    {%- endif %}

I use it just for localization.

[andrey-git]

That explains it: The states of climate_livingroom_windowshutter are Zu and Offen, not on and off.

Either change theme_template to compare with those values or look at binary_sensor.jmd4015744_state's state

[tringler]

I'm sorry! - My configuration is a chaos. This is the right definition of the binary_sensor:

climate_livingroom_windowshutter:
  friendly_name: Fenster
  value_template: >-
    {%- if is_state("binary_sensor.jmd4015744_state", "off") -%}
        False
    {%- else -%}
        True
    {%- endif %}
  device_class: opening

But now it's working. Strange, but thanks a lot of for your help! Great work!

[tringler]

Unfortunately this seems to stop working - I have seen that the syntax changed a bit and I changed to that, but it's not working:

sensor.dashboard_livingroom_windowshutter:
  icon: mdi:glassdoor
  friendly_name: Wohnzimmer
  templates:
   theme: return 'yellow';

This is also not working anymore:
extra_data_template: if (entities['sensor.dashboard_livingroom_windowshutter'].state === 'Offen') return null; else 'Seit ' + (entities['sensor.climate_wc_windowshutter_openingtime'].state) + ' Minuten offen';

Only badges seems to be affected. In example this custom ui of a group is working:

group.windowshutter_kitchen:
  extra_data_template: return 'Erinnerung nach '  + (entities['sensor.climate_kitchen_windowshutter_remindertime'].state) + ' Minuten';

I don't see any error regarding custom ui on the js console. Any help is really appreciated.

[tringler]

@andrey-git Do you have a hint how I can get rid of that problem?

[andrey-git]

Could you provide a screenshot of what you get and a fuller config (i.e.. everything related to the non-working entity)

[tringler]

Frontend:

frontend:
#  javascript_version: latest
  extra_html_url:
    - /local/custom_ui/state-card-media_player.html
    - /local/custom_ui/state-card-custom-ui.html
    - /local/custom_ui/state-card-custom_alarm.html
    
  themes:
    yellow:
      label-badge-text-color: '#ffcc00'
    standard:
      ha-label-badge-title-width: 5em
    wide_badges:
      ha-label-badge-title-width: 7em

Group & Customization:

windowshutter_state:
  name: Fenster
  icon: mdi:glassdoor
  entities:
    - binary_sensor.dashboard_livingroom_windowshutter
    - binary_sensor.dashboard_bedroom_windowshutter
    - binary_sensor.dashboard_childrenroom_windowshutter
    - binary_sensor.dashboard_kitchen_windowshutter
    - binary_sensor.dashboard_wc_windowshutter


binary_sensor.dashboard_livingroom_windowshutter:
  icon: mdi:glassdoor
  friendly_name: Wohnzimmer
  templates:
   theme: return 'yellow';
  #extra_data_template: if (entities['sensor.dashboard_livingroom_windowshutter'].state === 'Offen') return null; else 'Seit ' + (entities['sensor.climate_wc_windowshutter_openingtime'].state) + ' Minuten offen';
  #state_card_mode: badges
binary_sensor.dashboard_bedroom_windowshutter:
  icon: mdi:glassdoor
  friendly_name: Schlafzimmer
  theme_template: if (entities['binary_sensor.climate_wc_windowshutter'].state === 'on') return 'yellow'; else return 'wide-badges';
  state_card_mode: badges
binary_sensor.dashboard_childrenroom_windowshutter:
  icon: mdi:glassdoor
  friendly_name: Kinderzimmer
  theme_template: if (entities['binary_sensor.climate_wc_windowshutter'].state === 'on') return 'yellow'; else return 'wide-badges';
  state_card_mode: badges
binary_sensor.dashboard_kitchen_windowshutter:
  icon: mdi:glassdoor
  friendly_name: Küche
  theme_template: if (entities['binary_sensor.climate_wc_windowshutter'].state === 'on') return 'yellow'; else return 'wide-badges';
  state_card_mode: badges
binary_sensor.dashboard_wc_windowshutter:
  icon: mdi:glassdoor
  friendly_name: WC
  theme_template: if (entities['binary_sensor.climate_wc_windowshutter'].state === 'on') return 'yellow'; else return 'wide-badges';
  state_card_mode: badges

Binary Sensor:

climate_livingroom_windowshutter:
  value_template: >-
    {%- if is_state("binary_sensor.jmd4015744_state", "off") -%}
        False
    {%- else -%}
        True
    {%- endif %}
  device_class: opening

This is what I get:

If I apply the theme manually it works:

I'm running HASS 0.58.1 + Custom UI 20171117 and I have no JS console errors.

[andrey-git]

You still have a few

theme_template:

which you need to replace with

templates:
   theme:

[tringler]

Thanks. Solved! Sorry - It was not clear to me, that a wrong syntax somewhere in the configuration kills all other configuration items.

[fanaticDavid]

@tringler Sorry for posting an unrelated question here but what are the state-card-media_player.html and state-card-custom_alarm.html files you're using? I'm mainly wondering if the first brings back the old visual representation of media players, as shown below.

[tringler]

@fanaticDavid I added these months ago just to test some custom state cards like these.