New Custom UI features: Context-aware names, Context-aware hiding, Badges!

[andrey]

New release of Custom UI

##New feature: Badges in state cards.

##New feature: Context-aware names:

The same device can get different names in different groups.

Feedback is welcome

[christianwaite]

Awesome!
Naming in different groups is good because as you say, if you’re in a bedroom tab, you don’t want your sensor to be called ‘Bedroom Sensor’, just ‘Sensor’ would do. but in another view (history seems to be a problem), the ‘Sensor’ just wouldn’t do.

I’ll try it out *I’m already using the light slider.

[andrey]

I just pushed an update that supports context-aware names in views too (not just in groups).

[oakbrad]

This is great thanks, I have it working with my lights and some context aware names. Very useful!

I am having trouble getting a badge to show. I’d like to show the moisture level on my plants. I have:

  customize_glob:
    plant.*:
      custom_ui_state_card: custom-ui
      extra_badge:
        attribute: moisture
        unit: "%"

I tried it using the sensor entity_id but that didn’t work either, I don’t get a badge. Your example seems straight forward, what am I missing?

[andrey]

Any errors in Chrome dev console?
Does the the moisture attribute have a value?

[oakbrad]

Here’s one of the plant.entities

They do take a minute or so to get a value after reboot, but they typically all come online pretty quick.

The only error I see in the Chrome dev console is:

Uncaught (in promise) DOMException: Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).

[andrey]

Oh, I just remembered that extra_badge is only supported for light and cover domains.

[oakbrad]

Ah, it would be great if that feature (and the last changed subtext!) could be extended to other domains. Especially knowing last changed on a sensor would be super useful

[andrey]

Added support for Hide Control, Show Last Changed, Extra Data Attribute, and Extra Badge to any toggle card (like switch or lock) or plain card (like sensor, or group).

Note that “special” cards, like Binary Sensor, Climate, Weather are still not supported.

[kylerw]

Context aware names doesn’t seem to be working on Android…

[kylerw]

Also, any chance we can get your golden touch on the custom fan I started, @andrey? Doesn’t work with all the new features and I’m a bit out of my league!

[andrey]

@kylerw Does this work when you open it from desktop? Is this Chrome or Android App? The UI doesn’t look familiar.

As for Fan UI - I have plenty of feature planed, and I don’t own a Fan, so I don’t want invest in this.

[kylerw]

Yes, I clicked the light and brought up the more info pane. It does work on chrome desktop. This is chrome on Android.

[akajester (Dale)]

So, I saw this in oakbrads code and I love it! I used exactly the same code he’s using to get a “pibadges” group to show up in a “pi” card but I can’t get it to work. I created the www folder and put the necessary files in place. If I use the *.* in the custom-ui it applies the custom UI to all my cards and they all disappear. If I use *.pi* it applies custom UI to just the two cards with “pi” in the name and I can see them listed as “custom_ui_state_card: custom-ui” but I don’t see any badges. Any suggestions?

Here’s the configuration.yaml section:

customize_glob: !include config/custom-ui.yaml    

pi:
  name: Home Assistant Pi
  control: hidden
  entities:
    - group.pibadges
    - sensor.since_last_boot
pibadges:
  entities:
    - sensor.ram_use
    - sensor.cpu_use
    - sensor.disk_use_
    - sensor.disk_free_

and the custom-ui.yaml

"*.pi*":
  custom_ui_state_card: custom-ui
group.pibadges:
  state_card_mode: badges
  badges_list:
    - sensor.ram_use
    - sensor.cpu_use
    - sensor.disk_use_
    - sensor.disk_free_

Any ideas? Thanks!

[andrey]

Did you install custom-ui-state-card.html and custom-ui-state-card.html.gz into <config_dir>/www/custom_ui ?

[akajester (Dale)]

They’re both in here: /home/homeassistant/.homeassistant/www/custom_ui. Is that correct?

[andrey]

Yes.

Open you browser’s Dev Tools (Ctrl+Shift+C / F12 on Chrome) any errors in console?

[akajester (Dale)]

I’m using the AIO installation of HA. It looks like it can’t find the custom-ui files.

[andrey]

You probably downloaded the wrong file, i.e. state-card-custom-ui.html.gz is not really a .gz

[akajester (Dale)]

You nailed it! I right clicked the links and did “save as” assuming they were file links. Doh! Oh, the time I spent futzing with config…

Thanks for your help!