Picture-element state-label as percent vs 1-255

Configuration Frontend
1

This is probably a total newb question, but I’m trying to display a dimmer level as a percentage to match the slider. Right now it shows a value of 1-255. How do I show the brightness attribute as a %? Thanks in advance!

  - type: state-label
    entity: light.dim_kitchen_pendants
    attribute: brightness
    tap_action:
      action: toggle
    state_color: true
    style:
      top: 60%
      left: 46%
      '--paper-item-icon-active-color': orange
2

Hey man,
I just commented on your reddit post - here is a more detailed explanation.

install custom-ui

And here’s the code to create a template attribute (in customize.yaml click for more information about customize.yaml file and customizing in general):

light.dim_kitchen_pendants:
  templates:
    brightness_pct: >
      var brightness_percent = Math.round(100/255*Number(attributes.brightness));
      return brightness_percent;

Then simply change the attribute in your card configuration from brightness to brightness_pct.

3

Thanks Mike, this is great! Do I need to create a template attribute for every device or is there a way to do for either a group or all of a particular device type, ie ‘light’? Really appreciate the help!

4

No problem at all!

Sorry, this does not work unfortunately - it should, but it didn't haha

Yes, you can do this for every entity from the light domain. There are two options:

Option 1 - Create a file called customize_domain.yaml and add this code:

light:
  templates:
    brightness_pct: >
      var brightness_percent = Math.round(100/255*Number(attributes.brightness));
      return brightness_percent;

Then add this, to your configuration.yaml

homeassistant:
  customize_domain: !include customize_domain.yaml

Option 2 - add this to your configuration.yaml

homeassistant:
  customize_domain:
    light:
      templates:
        brightness_pct: >
          var brightness_percent = Math.round(100/255*Number(attributes.brightness));
          return brightness_percent;

Make sure you have homeassistant: only once in the configuration.yaml in both cases. Mine looks like this for example:

homeassistant:
  customize_glob: !include customize_glob.yaml
  customize_domain: !include customize_domain.yaml
  customize: !include customize.yaml
  packages: !include_dir_named include #this is only to show that there are also other things under homeassistant:
5

Oh good well it’s not just me!