Custom UI with a badge

Configuration
1

Im looking to have a custom UI card that shows a badge with the current brightness value for the light.

The problem im having is that whem the light is off, i.e. brigness is zero, the badge states ‘undefined’

the config for the card is extra_data_template: ${attributes.brightness}

SmartSelectImage_2018-02-17-10-14-42
SmartSelectImage_2018-02-17-10-14-421063×198 17.4 KB
SmartSelectImage_2018-02-17-10-14-58
SmartSelectImage_2018-02-17-10-14-581067×174 18.8 KB

2

When the light is off, does the state object have a brightness attribute? The likely answer is no. So you need to handle that case where the attribute dictionary is empty.

3

OK,
any tips on how to template this?

4

Is this in your config, .js, or .html?

5

That’s in my customize config

6

I’m confused, that would appear as a string ‘${attributes.brightness}’, not as the value inside attributes.brightness if that was inside a normal .yaml config. What component are you using this with?

Typical code inside yaml looks like this when attempting to extract info:

value_template: "{{ states.my_item.attributes.brightness }}"

or

value_template: >
  {{ states.my_item.attributes.brightness }}
7

It’s a custom ui

8

Well, I’m not sure. I’m not getting much info out of you. This is how it could work, assuming it doesn’t require ${} around your custom ui (FYI this is typically dictated by a .js or .html file, but configured in your yaml).

What it would look like if you are inside your yaml and it accepts value_templates:

extra_data_template: >
  {% if is_state('light.living_room', 'on') %}
  ${attributes.brightness}
  {% else %}
  0
  {% endif %}

I have no idea if that will work in that slot. If it doesn’t you need to modify the HTML or JS file.

9

try this:

light.bedside_table:
  extra_data_template:
    if (attributes.rgb_color) return "RGB:" + attributes.rgb_color ; return null;
  state_card_mode: break-slider
  stretch_slider: true
  hide_control: false
  show_last_changed: false
#  theme: happy
  #confirm_controls_show_lock: true
  slider_theme:
    min: 0
    max: 255
    pin: true
    off_when_min: true
    report_when_not_changed: true
  extra_badge:
    - attribute: brightness
      unit: Br
    - attribute: color_temp
      unit: Co

24

play around whit the options shown at:

Cheers,
Marius

1 Like
10

If that’s aloud in the yaml, then the code would look like this:

extra_data_template:
  if (attributes.brightness) return attributes.brightness; return 0;

or

extra_data_template:
  if (attributes.brightness) return attributes.brightness; return null;
11

Perfect thanks, i’m sure I tried this…I must have been having one of my many brain farts!

12

is there any way to confirm what attributes can be used as an extra badge?
ive tried using a few and none work except brightness

13

all should work, listed on https://github.com/andrey-git/home-assistant-custom-ui/blob/master/docs/features.md#complete-example.

I am not sure if they only show when available on your light (no color settings on non-colored lights) . I have many different lights, ambiance white, white only, ambiance color and white, Philips Hue and Ikea Tradfri, and none error out on the example i gave you, which i use for all my lights. Depending on your demands, set or comment out individual lines. this should work.
Unless, maybe your syntax is incorrect?
Cheers,
Marius

14

thanks, but I was referring to which attributes are availiable from a light, e.g. colour, temp etc

im pretty sure my syntax is correct. So I must be missing something else.
Im currently using with M-Light via the Limitless LED component.

I can call the light.turn on service with dev tools and specify the color_name and it works, but does not give me a badge in the Custom UI card…ill have a play and double check my .yaml