2024.8: Beautiful badges!

Seconding (thirding?) this. Being able to add a “badges” card to a dashboard so that badges weren’t only confined to the top would be welcome flexibility.

What do you mean?

The picture elements card can now be fully managed in the UI using a brand-new visual editor.

Is this a real thing?? Can we manage elements directly from the UI? No need to write a tone of yaml to place an icon over the image? Drag&Drop?

:star_struck:

No drag and drop.

Having the same problem - I want to remain with old badges, but the styling is broken, as I use conditional styling

type: custom:hui-state-badge-element
entity: sensor.temperatura_rokova
card_mod:
  style: |
    :host {
      --label-badge-red:
        {% if as_timestamp(now()) - as_timestamp(strptime(states('sensor.datum_rokova'), "%d.%m.%Y",default='01.01.2000').strftime("%Y-%m-%d ") + states('sensor.cas_rokova')) | float(default=0) > 240 %}
        purple
        {% elif states('sensor.temperatura_rokova') | float(default=0) > 17.99 and states('sensor.temperatura_rokova') | float(default=0) < 28 %}
        #80C884
        {% elif states('sensor.temperatura_rokova') | float(default=0) > 27.99 and states('sensor.temperatura_rokova') | float(default=0) < 30 %}
        orange
        {% elif states('sensor.temperatura_rokova') | float(default=0) > 15.99 and states('sensor.temperatura_rokova') | float(default=0) < 18 %}
        orange              
        {% else %}
        red
        {% endif %}
       ;
     }
hold_action:
  action: call-service
  service: script.refresh_esp3

Obviously the color property is no longer called “–label-badge-red”, but something else. Does anyone have an idea how to alter the custom styling so the badge colour will change based on conditions?

2 Likes

we havent gotten around to checking the stylings (or the name option indeed), but you can use these theme variables:

# Legacy Badges loaded as custom
    label-badge-background-color: brown
    label-badge-text-color: green
    ha-label-badge-font-size: 15px
    label-badge-red: '#03a9f4'
    ha-label-badge-size: 30px
    ha-label-badge-border-radius: 0


    ha-label-badge-label-color: red
    ha-label-badge-label-background-color: red

    ha-label-badge-title-font-size: 8px
    ha-label-badge-title-font-weight: 400
    ha-label-badge-title-width: 50px

nevermind the actual values here, I only used these to test if they work

Scherm­afbeelding 2024-08-07 om 23.10.12

1 Like

your using type: entity here, so that is not the old/legacy badge

Card-mod may be definitely broken since a “new badge” is a DIFFERENT element.
Not an issue, just a matter of adapting a user’s config to the new reality.

1 Like

I know, I posted the original code, the changed code already includes
type: custom:hui-state-badge-element
Changed the original post also :).

2 Likes

well its as Ildar says, move to card-mod thread, and let’s find the correct Dom path to the property you want to modify. Its a new (legacy) kid on the block, we need some new examples in the Main thread probably

or start experimenting with the new badges, as that is the real new shiny kid on the block, you might even start liking it :wink:

3 Likes

So, is there any solution for styling?
Can you post code of one of yours custom:hui-state-badge-element badge?

About this:
Sort data tables by created or last modified
I find this feature very very useful.
My old WTH.
Since I have not installed .8 yet - I wonder are these new fields “created” & “modified” became accessible as attributes? (for entities & devices)

I’m experiencing issues with the Reolink integration where my doorbell and camera’s have de-authenticated.
The issue seems to be the lacking support for special characters in the passwords for specific device logins. (specifically ^, % and & characters as far as I can tell) All special characters are supported on the devices themselves.

1 Like

Just updated to 2024.8.0 and it broke my Alexa Media Player integration. Does anyone else have problems with this?

2 Likes

I like the new badges very much, but from functional point of view I really need the colors of them to be customised based on conditions. If the new badges would offer this functionality out of the box, I would gladly use them :slight_smile: .

1 Like

Someone wrote that in the livechat of the releaseparty too. I haven’t upgraded yet because of this.

No dragons, uh? :weary:

I am afraid this has worsened the existing issues on the Entities and Helper pages.

They have become so feature rich, and all of these details are stored in the browser. And reevaluated upon state changes.
It’s no longer as lightweight as it was before, and in my case, I cant even load Entities anymore.
Adding the Yaml template entities to the Helpers seems great.
Whether the constant state changes of these templates dont hurt the /config/helpers, I am not yet convinced…

But the idea is great indeed, very useful.

2 Likes

No dragons :frowning:

1 Like

I posted the code (which is not working) above in my question, as I’m also looking for a solution - none found one yet, unfortunately.