Help with a Template for Custom UI

Configuration
1

I’m not sure I’d this is actually possible. What I’d like to do is use Custom UI to show the specified light’s brightness underneath the light switch entity, but formatted a specific way.

With Custom UI you can use Extra Data Templates, and I already have some template sensors to format it how I’d like

landing_light_brightness:
  value_template: '{{ "%2d" | format(states.light.stairs.attributes.brightness | int / 2.55 ) }}'
  friendly_name: "Brightness"
  unit_of_measurement: "%"

landing_light_brightness_custom:
  value_template:
    '{% if is_state("sensor.landing_light_brightness", "unknown") %}
      Off
    {%-elif is_state("sensor.landing_light_brightness", "99") %}
      100%
    {%-elif is_state("sensor.landing_light_brightness", "0") %}
      1%
    {% else %}
      {{ states("sensor.landing_light_brightness") }}%
    {% endif %}'

I'm not sure if I could one of use these template sensors within Custom UI's state card, or if I'd have to 'do it all' in Custom UI's Extra Data Template?

So instead of like I currently have it with the brightness as a separate entity underneath




It would look something like this

2

It is possible. If you only use the template brightness sensor for UI, you can implement it as extra_data_template instead.

If you want it anyway you can just pull the value with extra_data_template

3

Thanks, do you mean I could use an extra_data_template and make it formatted in the same way as my existing template sensor (showing brightness as a percentage rather than from 0 to 255 etc.), or I could use an extra_data_template to display the output of my existing template sensor?

How could it be done?

4

You can use extra_data_template to do either of those.

If the documentation at https://github.com/andrey-git/home-assistant-custom-ui/blob/master/docs/templates.md is not comprehensive I should expand it.

Do note that the template syntax is Javascript, unlike Jinja2 used for backend-templates

5

I’m sure the documentation in fine. The problem is me, I don’t really know JavaScript :grin:

I’ll have a go and see if I can wrestle it into doing what I want, thanks.

6

If you always want to display brightness (even if it is 0%)

customize:
  light.landing_light:
    extra_data_template: ${Math.round(attributes.brightness || 0) / 2.55}%

To display brightness only if it exists and is non-zero:

customize:
  light.landing_light:
    extra_data_template: >
      if (attributes.brightness) return Math.round(attributes.brightness / 2.55) + '%'; else return null;
2 Likes
7

That’s great, thanks a lot! :grinning:

8

so sorry to bump this, but please allow me to ask how tho get this brightness percentage as an extra badge?

since its not a true attribute, I wouldn’t know how to set the customizing, other then maybe create an extra intermediary template sensor and reference that? Hope to be able to do it directly

9

I’m wondering if it’s possible to show extra data with Custom UI and Lovelace?

I’ve noticed that it still works to change icon colours with Lovelace, but not show extra data (unless I need to do something different for Lovelace).

10

Currently, in the native build of lovelace, extra data can only be one of the following items:

entity-id , last-changed

documented here, the attribute is secondary_info

11

If you want an extra badge, it’ll need to be it’s own separate state object in home assistant. Or you’d need to make a new badge .js file that makes a the ui element for you.

12

OK, thanks.

Hopefully this will be possible in the future.

13

I’m sure it will be. Alot of devs hang out on discord. A custom card that does this may already exist, you’d just need to find it. They usually have a good handle on what exists.

Just ask in the lovelace chat

1 Like
14

Thanks, will do :+1:t3:

15

please come back if you found it. Its one of the many things Lovelace misses that made my HA frontend shine… hope to find it soon!
I find it impossible to show single (non grouped) badges above the cards on any view-page at all, nor in cards for that matter.

this:

34

is turned into this in Lovelace:

41

16

badges can only be placed into views, they should appear at the top like you desire.

views:
  - title: Home
    badges:
      - sensor.temperature
      - sensor.location
    cards:
      - etc
17

a yes, I missed that, thank you, looking familiar fortunately even with the theming.

  - title: Home summary
    icon: mdi:home-outline
    badges:
      - sensor.status_badge
      - sensor.hubs_badge
      - sensor.home_badge
      - sensor.switch_badge
      - sensor.active_badge
      - sensor.appli_badge
      - sensor.lamps_badge
      - sensor.play_badge
      - sensor.track_badge

47
47708×181 22.7 KB

or

01

18

Nice, the badges are easy to miss because it’s different than the original UI. Everyone assumes you just plop them into cards.

19

yes, I use them frequently like this.
Must admit I am still a bit puzzled which badges do or dont show.
I have another set of (python created ) badges and they do show in a card without problem:

01

the top one isn’t showing, because it isnt created yet. This is a true issue with Lovelace for me still, maybe there’s a setting, I don’t know of.

when a script is run the sensor badge is displayed:

18

all my custom-ui extra badges and extra data are still missing, I fear that is some incompatibility thing.

so are most of my themed entities. Which is strange again since as you can see, my badges are themed correctly … :-:confused:

20

I know you like the look of your old UI, but have you thought about organizing things differently? I was able to take a page full of toggles and switches for my media player and knocked it down to 2 images with nice buttons.