Lovelace Badge Not Disappearing After Turning Off Philips Hue Lights

Configuration Frontend
1

Lovelace Badge Not Disappearing After Turning Off Philips Hue Lights

Description: Hello Home Assistant community,

I’m encountering an issue with my Lovelace setup, specifically related to a custom card and automation. I’m using Home Assistant to control Philips Hue lights and have created a Lovelace card with a badge that indicates the brightness level of a Philips Hue light entity. The badge color and icon are intended to change dynamically based on the brightness level. However, I’ve noticed that the badge doesn’t disappear immediately after turning off the Philips Hue light, even though the brightness level should be 0.

Untitled
Untitled1048×158 3.75 KB

Lovelace Card Code: Here’s the code snippet for the Lovelace card, including the badge_color and badge_icon properties. I’m using the custom mushroom-template-card for this configuration:

  - type: custom:mushroom-template-card
    primary: 25%
    secondary: Eethoek
    icon: mdi:ceiling-light
    icon_color: orange
    tap_action:
      action: toggle
    entity: input_boolean.lampen_dimmen_25
    layout: vertical
    badge_color: >-
      {{ 'green' if (state_attr('light.tafel_eethoek', 'brightness') / 255 * 100) | round(0) == 25 else 'transparent' }}
    badge_icon: >-
      {{ 'mdi:check' if (state_attr('light.tafel_eethoek', 'brightness') / 255 * 100) | round(0) == 25 else 'null' }}
    hold_action:
      action: none
    double_tap_action:
      action: none

Automation Code: I have also set up an automation to update the binary sensor state based on the Philips Hue light’s brightness level:

- id: "1"
  alias: Toggle Philips Hue light
  description: ""
  trigger:
    - platform: state
      entity_id: input_boolean.lampen_dimmen_25
  condition: []
  action:
    - service: light.toggle
      target:
        entity_id: light.tafel_eethoek
      data:
        brightness_pct: 25
  mode: single

Troubleshooting Steps Taken:

  • Checked entity states and attributes for light.tafel_eethoek.
  • Verified the status of binary_sensor.light_tafel_eethoek_on_25.
  • Confirmed Lovelace card configuration.
  • Tried refreshing Lovelace UI after turning off the light.
  • Ensured compatibility of custom mushroom-template-card.
  • Reviewed automation configuration for the binary sensor.

Despite these efforts, the Lovelace badge still does not disappear immediately after turning off the Philips Hue light. The badge remains visible until I manually refresh the page.

I would greatly appreciate any insights or suggestions from the community on how to troubleshoot and resolve this issue. Your expertise and guidance would be invaluable in helping me address this problem.

Versions

  • Home Assistant v2023.8.1
  • Supervisor v2023.08.1
  • Operating System v10.4
  • Frontend v20230802.0 - latest
  • Mushroom v3.0.5

Thank you in advance for your assistance!!

2

I don’t use this card, but if you’re turning the icon transparent, there’s no need for the badge_icon template. Just make it transparent only.

3

Thank you for your suggestions regarding the Lovelace badge issue. I’ve tried the solution you mentioned, which involves setting the badge_color property to ‘transparent’ to hide the badge when the light is turned off. Despite these efforts, the Lovelace badge still does not disappear immediately after turning off the Philips Hue light. The badge still remains visible until I manually refresh the page.

4

I’m pleased to share that I’ve resolved the issue I was facing with Lovelace badges not displaying the correct brightness level for my Philips Hue lights. The badges are now working perfectly.

Problem Statement

During my troubleshooting process, I discovered that the attributes for my Philips Hue lights (specifically color_mode: brightness and brightness: 64) were disappearing when the lights were turned off. This behavior affected the Lovelace badge’s ability to accurately reflect the brightness level.

Solution

For anyone encountering a similar challenge, here’s the solution I implemented in my Lovelace card configuration:

  - type: custom:mushroom-template-card
    primary: 4%
    secondary: Eethoek
    icon: mdi:ceiling-light
    icon_color: orange
    tap_action:
      action: toggle
    entity: input_boolean.lampen_dimmen_4
    layout: vertical
    badge_color: >-
      {{ 'green' if is_state('light.tafel_eethoek', 'on') and
      state_attr('light.tafel_eethoek', 'brightness') == 10 else 'transparent'
      }}
    badge_icon: >-
      {{ 'mdi:check' if is_state('light.tafel_eethoek', 'on') and
      state_attr('light.tafel_eethoek', 'brightness') == 10 else 'null' }}
    hold_action:
      action: none
    double_tap_action:
      action: none

This approach ensures that the badge is visible only on the button corresponding to the desired brightness level when the light is turned on. Adjust the state_attr('light.tafel_eethoek', 'brightness') conditions for each button to match the appropriate brightness percentage.