[Example] Radial brightness indicator for dimmable RGB and non-RGB lights

[Tobboss]

Based on the hype of the radial gradient indicator in this reddit post I created a variant for dimmable RGB and non-RGB lights.

It indicates the percental brightness and uses the actual color of the light. For non-RGB lights like my ShellyDimmer2 it uses a fallback color.
This is how I did it in the styling options.

.bubble-icon-container {
  background: radial-gradient(var(--card-background-color) 60%, transparent 0%), 
              conic-gradient(
                rgb(${hass.states['light.test_light'].attributes.rgb_color ? 
                     hass.states['light.test_light'].attributes.rgb_color : '255,255,255'})
                ${hass.states['light.test_light'].attributes.brightness / 255 * 100}% 0%, 
                var(--card-background-color) 0% 100%
              ) !important;
}

I am absolutely no JS expert. If you know a more elegant way to achieve this I am happy to know. For example accessing the actual button / icon color instead of the entities attributes and hard coded fallback values. Also the border of the gradient seems pixelated. Any idea how to smooth it?

edit: simplifaction of the rgb part

[Menelao147]

Hi, thanks for sharing your variant.

I made a few adjustments:

1. I made the code more flexible by configuring it to read the entity variable directly.
2. I revised the brightness-related section because, for light entities that don't support this feature, the radial indicator wasn't displayed.

 .bubble-icon-container {
        background:
          radial-gradient(var(--card-background-color) 57%, transparent 0%), 
          conic-gradient(
            rgb(${hass.states[entity].attributes.rgb_color ? 
                 hass.states[entity].attributes.rgb_color : '255, 255, 255'})
            ${hass.states[entity].attributes.supported_features !== 0 ?
              hass.states[entity].attributes.brightness / 255 * 100 :
              state === 'on' ? '100' :  '0' }% 0%,
            var(--card-background-color) 0% 100%
          ) !important;
      }