Frontend 20240806.1 broke card

[IgorSimic]

In Frontend 20240806.1 badges are shown as rows instead as badges.

Core 2024.8.0, Frontend 20240710.0

Core 2024.8.0, Frontend 20240806.1

[ildar170975]

Suggest you to post screenshots ONLY with related data. Currently the screenshots contain lots of unrelated UI elements.

[IgorSimic]

Suggest you to post screenshots ONLY with related data. Currently the screenshots contain lots of unrelated UI elements.

You are right.

[ildar170975]

In 2024.8 a design of a badge is completely changed: https://www.home-assistant.io/blog/2024/07/26/dashboard-chapter-2/#new-badges

Guess the custom:badge-card used a standard badge UI element. So, here we see a result of this transformation.... Possibly, you may wish to layout these new badges in a row, not in a column (how it is presented on your screenshot).

[eddysteurs]

I have the same problem after upgrade to 2024.8 Instead of badges horizontal it is now presented vertical and also card-mod is no longer applied

type: custom:badge-card badges:

• entity: alarm_control_panel.verisure_alarm name: Verisure card_mod: style: > :host { --label-badge-background-color: {% if is_state('alarm_control_panel.verisure_alarm', 'disarmed') %} lightgreen {% else %} red {% endif %}; }
• entity: binary_sensor.verisure_alarm_ethernet_status name: Ver Eth card_mod: style: > :host { --label-badge-background-color: {% if is_state('binary_sensor.verisure_alarm_ethernet_status', 'on') %} lightgreen {% else %} red {% endif %}; }
• entity: person.eddy card_mod: style: > :host { --label-badge-red: {% if is_state('person.eddy', 'home') %} lightgreen {% else %} red {% endif %};
• entity: person.valerie card_mod: style: | :host { --label-badge-red: {% if is_state('person.valerie', 'Valerie home') %} lightgreen {% else %} {% if is_state('person.valerie', 'grizzly berchem')%} yellow {% else %} {% if is_state('person.valerie', 'home')%} lightgreen {% else %} red {% endif %}; } red {% endif %}; red} {% endif %}; }
• entity: sun.sun card_mod: style: > :host { --label-badge-background-color: {% if is_state('sun.sun', 'above_horizon') %} lightgreen {% else %}

[mdisabato]

This update broke the following code:

type: entity entity: sensor.mystic_dreams_status name: Mystic Dreams display_type: complete icon: mdi:radio-tower card_mod: style: | :host { {% if is_state('sensor.mystic_dreams_status', 'Online') %} --label-badge-background-color: green !important; --label-badge-red: green !important; --label-badge-text-color: white; {% else %} --label-badge-background-color: red !important; --label-badge-red: red !important; --label-badge-text-color: white; {% endif %}; }

The state changes and background colors no longer work. Is there a work-around or, preferably, a permanent fix?

[Maddin1684]

same here! is there a fix to show the new badges in a row

[arboeh]

Can confirm issue

[MiRen76]

Issue confirmed

[mdisabato]

@teskanoo , this blog post https://www.home-assistant.io/blog/2024/08/07/release-20248/#new-badges-for-your-dashboard brings this into core.

[AndyDann]

Whilst I like the new badges I do like the ability to place them anywhere on a card. Hopefully there may be a workaround/update or suggestions for anything else similar??

[eddysteurs]

Whilst I like the new badges I do like the ability to place them anywhere on a card. Hopefully there may be a workaround/update or suggestions for anything else similar??

yes, but even more the new ones don't seem to accept card-mod commands to change e.g. background based on entity-state

[ildar170975]

1. If someone asks why the new badges cannot be customized by SAME card-mod case as old badges - this is nonsense, and this is NORMAL that old card-mod code may not work for new badges. No need to complain about it here, this is NOT a BUG; go to HA community and ask how to use card-mod for the new badges (github is not a user-support forum).

2. If someone asks why the badge-card stopped showing the old badges and now shows new badges - it was already explained here. Again, this is NOT a BUG since a standard badge changed.

3. Since the old UI-element for a badge is still available in HA (for now at least - it is still used in picture-elements) - you may ask Thomas about changing the badge-card to show THESE old badges instead of new badges (if possible).

[brandondb1]

@ildar170975 I think a lot of the comments above are about the layout of the badge card being broken rather than the badges themselves - the OP had the issue that badges that were previously in a horizontal row are now in a vertical column. Since the new badges can be added in a horizontral row, this does not seem to be a limitation of the new badges.

While it is true that this has arisen due to the underlying code in Home Assistant changing, it does nonetheless create an issue whereby Thomas' badge card (and card-mod as well) no longer works as intended (i.e. a breaking change in Home Assistant). Since the users of this card don't know if Thomas intends to update the card to work with the new badges, it is reasonable to post here to a) bring the problem to his attention and b) seek a solution.

You mentioned in a post that people may want to lay out the new badges in a row rather than a column - if you know how to do this it would probably be helpful to let people know since there was no need to do this before the aforementioned breaking changes to Home Assistant, and there is therefore no information in user forums as yet.

[eddysteurs]

To bring them back in a row you need to create a horizontal stack card with then a badge card with only a single entity, so split a multi entity badge card into individual once. However this does not solve the other functionality we have with card mod but already re-establish the layout of your dashboard

Sent from my iPhone Eddy Steurs

On 12 Aug 2024, at 20:11, brandondb1 @.***> wrote:



@ildar170975https://github.com/ildar170975 I think a lot of the comments above are about the layout of the badge card being broken rather than the badges themselves - the OP had the issue that badges that were previously in a horizontal row are now in a vertical column. Since the new badges can be added in a horizontral row, this does not seem to be a limitation of the new badges.

While it is true that this has arisen due to the underlying code in Home Assistant changing, it does nonetheless create an issue whereby Thomas' badge card (and card-mod as well) no longer works as intended (i.e. a breaking change in Home Assistant). Since the users of this card don't know if Thomas intends to update the card to work with the new badges, it is reasonable to post here to a) bring the problem to his attention and b) seek a solution.

You mentioned in a post that people may want to lay out the new badges in a row rather than a column - if you know how to do this it would probably be helpful to let people know since there was no need to do this before the aforementioned breaking changes to Home Assistant, and there is therefore no information in user forums as yet.

— Reply to this email directly, view it on GitHubhttps://github.com/thomasloven/lovelace-badge-card/issues/20#issuecomment-2284630499, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ACL7WXEFX4MJ23TTUS7IXVLZRD3FPAVCNFSM6AAAAABMFBWQ2KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOBUGYZTANBZHE. You are receiving this because you commented.Message ID: @.***>

[brandondb1]

My layout uses panel view, so I can't add other types of cards without going to masonary...there is a code fix proposed by @jkmf that I have tested and that works to reestablish the (new) badges in a row.

Thanks for the help!

On Mon, Aug 12, 2024 at 4:29 PM eddysteurs @.***> wrote:

To bring them back in a row you need to create a horizontal stack card with then a badge card with only a single entity, so split a multi entity badge card into individual once. However this does not solve the other functionality we have with card mod but already re-establish the layout of your dashboard

Sent from my iPhone Eddy Steurs

On 12 Aug 2024, at 20:11, brandondb1 @.***> wrote:



@ildar170975https://github.com/ildar170975 I think a lot of the comments above are about the layout of the badge card being broken rather than the badges themselves - the OP had the issue that badges that were previously in a horizontal row are now in a vertical column. Since the new badges can be added in a horizontral row, this does not seem to be a limitation of the new badges.

While it is true that this has arisen due to the underlying code in Home Assistant changing, it does nonetheless create an issue whereby Thomas' badge card (and card-mod as well) no longer works as intended (i.e. a breaking change in Home Assistant). Since the users of this card don't know if Thomas intends to update the card to work with the new badges, it is reasonable to post here to a) bring the problem to his attention and b) seek a solution.

You mentioned in a post that people may want to lay out the new badges in a row rather than a column - if you know how to do this it would probably be helpful to let people know since there was no need to do this before the aforementioned breaking changes to Home Assistant, and there is therefore no information in user forums as yet.

— Reply to this email directly, view it on GitHub< https://github.com/thomasloven/lovelace-badge-card/issues/20#issuecomment-2284630499>, or unsubscribe< https://github.com/notifications/unsubscribe-auth/ACL7WXEFX4MJ23TTUS7IXVLZRD3FPAVCNFSM6AAAAABMFBWQ2KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOBUGYZTANBZHE>.

You are receiving this because you commented.Message ID: @.***>

— Reply to this email directly, view it on GitHub https://github.com/thomasloven/lovelace-badge-card/issues/20#issuecomment-2284850603, or unsubscribe https://github.com/notifications/unsubscribe-auth/AM7MZBZR4V33LALQY2UZNZ3ZRELKJAVCNFSM6AAAAABMFBWQ2KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOBUHA2TANRQGM . You are receiving this because you commented.Message ID: @.***>

[jkmf]

I've added a pull request (#21) with fix of this issue, it works for me.

[brandondb1]

I've added a pull request (#21) with fix of this issue, it works for me.

Thanks for solving this!

[Mithrox]

I've added a pull request (#21) with fix of this issue, it works for me.

Does this solve the horizontal presentation, or do we still need to make a horizontal stack and put one badge into each stack?

[nprez83]

I've added a pull request (#21) with fix of this issue, it works for me.

Hi @jkmf, I'm trying to download your updated code but I'm having trouble doing that. I tried adding your GitHub as a custom repository, but it keeps downloading the original code. Any tips?

I also tried editing the code directly in the www folder and refreshing the browser, but that didn't do it either.

[ildar170975]

@brandondb1

You mentioned in a post that people may want to lay out the new badges in a row rather than a column

The problem is that old badges seemed to use a fixed width. Means - you may place several badges into some flex container and allocate them nicely. But new badges have different widths; and placing them into one row should allow “wrapping” a badge to a next row. I am not using badges at all, but published tutorials in Community about customizing badges. May be I will try to prepare a new tutorial for new badges some day, but not now, sorry.

[brandondb1]

I've added a pull request (#21) with fix of this issue, it works for me.

Hi @jkmf, I'm trying to download your updated code but I'm having trouble doing that. I tried adding your GitHub as a custom repository, but it keeps downloading the original code. Any tips?

I also tried editing the code directly in the www folder and refreshing the browser, but that didn't do it either.

You may need to do a hard refresh of the browser from the f12 page. Also try uninstalling the old version as well.

[skynet01]

I found the issue why the browser not refreshing for you @nprez83 . If you add @jkmf's repo you are adding the master branch and not the patched one so you will indeed be getting the original file. If you do edit js directly in

/config/www/community/lovelace-badge-card/badge-card.js That's not actually the version that gets served to the browsers, lolz 🤷 what's served to the browsers is the gzip version of that file. So you have to zip up the js you made changes to..

Anyway.. to just apply the patch open your js file here /config/www/community/lovelace-badge-card/badge-card.js

and replace the #badge section with (if you want them justified left instead of center update last line accordingly:

      #badges {
        font-size: 85%;
        text-align: center;
        display: flex;
        flex-direction: row;
        row-gap: 3px;
        column-gap: 4px;
        flex-wrap: wrap;
        justify-content: center;
      }

Then zip up your js file .. you can use this command to say fuk to that js file... gzip -fk /config/www/community/lovelace-badge-card/badge-card.js then go to /config/lovelace/resources. find that badge-card file, hit edit and change the last number to something else ex: /hacsfiles/lovelace-badge-card/badge-card.js?hacstag=8416034665672 to /hacsfiles/lovelace-badge-card/badge-card.js?hacstag=8416034665673

this will load the updated one.

[skynet01]

...also another note the new visibility badge conditions don't work on these badges (at least I couldn't figure out how) but you can do it through auto-entities like this:

type: custom:auto-entities
unique: true
sort:
  method: none
show_empty: false
card:
  type: custom:badge-card
filter:
  exclude:
    - state: 'off'
    - state: unavailable
    - state: unknown

  include:
    - entity_id: binary_sensor.tesla_windows
      options:
        display_type: complete
        state_content:
          - state
        color: orange
    - entity_id: binary_sensor.tesla_charger
      options:
        display_type: complete
        state_content:
          - state
        color: green
    - entity_id: sensor.power_pelican_123
      state: "> 4000"
      options:
        name: Net Usage
        display_type: complete
        state_content:
          - state
        color: orange

[nprez83]

This is awesome @skynet01, I was finally able to load @jkmf's code, thanks so much.

I also was able to figure out a better way to display the full info for conditional badges by using entity-filter along with display_type. See below

  - type: entity-filter
    entities:
      - entity: switch.garage_e_stop
        display_type: complete
    state_filter:
      - "on"

[richardpeng]

Instead of manually downloading a zip or editing source code files, you can load @jkmf's code by forking their repo and setting the default branch to the patch-1 branch. I've done this on my fork, which you can use to easily load the patch as a custom repository: https://github.com/richardpeng/lovelace-badge-card

@jkmf I'm not trying to take credit for your work so feel free to update your default branch and I can remove my fork.

[skynet01]

custom:badge-card

your example for filtering doesn't work for me, I also need different conditions for each entity I have a bade for

[nprez83]

custom:badge-card

your example for filtering doesn't work for me, I also need different conditions for each entity I have a bade for

Each conditional badge needs an entry like the one I posted above. That works for me and shows the respective badge only when the condition is met, not sure why it's not working for you.

Here's the full setup of my card.

type: custom:badge-card
badges:
  - type: entity
    entity: person.person1
    display_type: complete
    show_entity_picture: true
  - type: entity-filter
    entities:
      - entity: switch.garage_e_stop
        display_type: complete
    state_filter:
      - 'on'
  - type: entity-filter
    entities:
      - entity: input_boolean.telluride_service_overdue
        display_type: complete
    state_filter:
      - 'on'
  - type: entity
    entity: person.person2
    display_type: complete
    show_entity_picture: true

The top and bottom badges appear always, while the middle two only appear when they're on.

[skynet01]

Nice, that worked! Do you still have an empty space between your cards when none of the badges are active?

[nprez83]

The card remains there empty even if no conditional badges are displayed. The way I've set it up actually is up at the top row between two gap cards, so it looks like the built-in badges.

[skynet01]

Ah nice, for me i want it between cards so I have extra space when no badges show up. Anyone got card-mod to work with badges by any chance?

[rgogada]

Wrapping it in another layout card like below worked for me.

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  place-content: center
  grid-template-columns: auto
  grid-auto-flow: column
cards:   
  - type: custom:badge-card
    badges:
      - entity: sensor.number_of_unavailable_devices
        color: red
  - type: custom:badge-card
    badges:
      - entity: sensor.number_of_low_battery_devices
        color: orange
  - type: custom:badge-card
    badges:
      - entity: cover.garage_door
  - type: custom:badge-card
    badges:
      - entity: lock.yale_no_lock_present_door_lock
  - type: custom:badge-card
    badges:
      - entity: sensor.tesse_battery
  - type: custom:badge-card
    badges:
      - entity: sensor.teslar_battery

[oerix]

What is the latest fork repo that includes all the fixes with the new design?

[ildar170975]

2024.10, latest card-mod Small fix makes this possible:

type: custom:badge-card
entities:
  - entity: sun.sun
    type: custom:hui-state-badge-element
  - entity: sensor.xiaomi_cg_1_co2
    type: custom:hui-state-badge-element
    card_mod:
      style:
        ha-state-label-badge $:
          ha-label-badge $: |
            .badge-container .label-badge .label span {
              border-style: solid;
              border-color: green;
              color: blue;
              background-color: magenta;
              }
            .badge-container .title {
              color: orange;
            }
          .: |
            ha-label-badge {
              --label-badge-background-color: yellow;
              --label-badge-text-color: red;
              --label-badge-red: cyan;
            }

[aman-sandhu]

@ildar170975 Thank you for your work. I have edited the card mod js file. Installed the custom badge card. Applied the above code however it still doesn't change the styling of my badges. I would appreciate if you could offer any help please. Is my card mod needs updating?

[ildar170975]

Try testing exactly my code above with your entities

[nprez83]

@ildar170975 Thank you for your work. I have edited the card mod js file. Installed the custom badge card. Applied the above code however it still doesn't change the styling of my badges. I would appreciate if you could offer any help please. Is my card mod needs updating?

See reply above about editing the gzip version of the js file, which is what the browser actually serves.

[aman-sandhu]

Thank you so much mate. You guys are awesome.