Frontend 20240806.1 broke card #20

IgorSimic · 2024-08-07T19:37:39Z

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 · 2024-08-07T19:43:09Z

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

IgorSimic · 2024-08-07T20:00:20Z

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

You are right.

ildar170975 · 2024-08-07T20:09:52Z

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 · 2024-08-07T20:33:22Z

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 · 2024-08-07T22:11:34Z

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 · 2024-08-07T22:43:16Z

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

arboeh · 2024-08-08T05:14:28Z

Can confirm issue

MiRen76 · 2024-08-08T07:43:29Z

Issue confirmed

mdisabato · 2024-08-08T13:10:26Z

@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 · 2024-08-08T14:22:16Z

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 · 2024-08-08T14:25:58Z

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 · 2024-08-08T14:41:06Z

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).
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.
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 · 2024-08-12T18:11:13Z

@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 · 2024-08-12T20:29:02Z

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: @ildar170975<https://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<#20 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ACL7WXEFX4MJ23TTUS7IXVLZRD3FPAVCNFSM6AAAAABMFBWQ2KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOBUGYZTANBZHE>. You are receiving this because you commented.Message ID: ***@***.***>

brandondb1 · 2024-08-12T20:34:22Z

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: @ildar170975<https://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< #20 (comment)>, 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 <#20 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AM7MZBZR4V33LALQY2UZNZ3ZRELKJAVCNFSM6AAAAABMFBWQ2KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEOBUHA2TANRQGM> . You are receiving this because you commented.Message ID: ***@***.***>

jkmf · 2024-08-12T20:42:42Z

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

brandondb1 · 2024-08-12T20:45:03Z

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

Thanks for solving this!

Mithrox · 2024-08-15T09:33:47Z

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 · 2024-08-18T22:25:51Z

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 · 2024-08-18T23:15:47Z

@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 · 2024-08-18T23:46:53Z

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 · 2024-09-02T23:01:19Z

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 · 2024-09-02T23:42:29Z

...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 · 2024-09-03T00:34:11Z

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 · 2024-09-03T02:24:15Z

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 · 2024-09-03T04:35:56Z

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 · 2024-09-04T01:02:48Z

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 · 2024-09-04T01:15:29Z

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

nprez83 · 2024-09-04T13:00:14Z

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 · 2024-09-05T17:42:59Z

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 · 2024-09-27T03:08:27Z

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 · 2024-10-06T21:06:11Z

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

ildar170975 · 2024-10-17T16:49:02Z

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 · 2024-10-20T10:54:06Z

@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 · 2024-10-20T10:57:31Z

Try testing exactly my code above with your entities

nprez83 · 2024-10-20T14:33:43Z

@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 · 2024-10-20T19:46:22Z

Thank you so much mate. You guys are awesome.

Frontend 20240806.1 broke card #20

Frontend 20240806.1 broke card #20

Comments

IgorSimic commented Aug 7, 2024 • edited Loading

ildar170975 commented Aug 7, 2024 • edited Loading

IgorSimic commented Aug 7, 2024

ildar170975 commented Aug 7, 2024

eddysteurs commented Aug 7, 2024 • edited Loading

mdisabato commented Aug 7, 2024

Maddin1684 commented Aug 7, 2024

arboeh commented Aug 8, 2024

MiRen76 commented Aug 8, 2024

mdisabato commented Aug 8, 2024

AndyDann commented Aug 8, 2024

eddysteurs commented Aug 8, 2024

ildar170975 commented Aug 8, 2024 • edited Loading

brandondb1 commented Aug 12, 2024

eddysteurs commented Aug 12, 2024 via email

brandondb1 commented Aug 12, 2024 via email • edited Loading

jkmf commented Aug 12, 2024

brandondb1 commented Aug 12, 2024

Mithrox commented Aug 15, 2024

nprez83 commented Aug 18, 2024 • edited Loading

ildar170975 commented Aug 18, 2024

brandondb1 commented Aug 18, 2024

skynet01 commented Sep 2, 2024 • edited Loading

skynet01 commented Sep 2, 2024 • edited Loading

nprez83 commented Sep 3, 2024 • edited Loading

richardpeng commented Sep 3, 2024 • edited Loading

skynet01 commented Sep 3, 2024

nprez83 commented Sep 4, 2024 • edited Loading

skynet01 commented Sep 4, 2024

nprez83 commented Sep 4, 2024

skynet01 commented Sep 5, 2024

rgogada commented Sep 27, 2024 • edited Loading

oerix commented Oct 6, 2024

ildar170975 commented Oct 17, 2024 • edited Loading

aman-sandhu commented Oct 20, 2024

ildar170975 commented Oct 20, 2024

nprez83 commented Oct 20, 2024

aman-sandhu commented Oct 20, 2024

IgorSimic commented Aug 7, 2024 •

edited

Loading

ildar170975 commented Aug 7, 2024 •

edited

Loading

eddysteurs commented Aug 7, 2024 •

edited

Loading

ildar170975 commented Aug 8, 2024 •

edited

Loading

brandondb1 commented Aug 12, 2024 via email •

edited

Loading

nprez83 commented Aug 18, 2024 •

edited

Loading

skynet01 commented Sep 2, 2024 •

edited

Loading

skynet01 commented Sep 2, 2024 •

edited

Loading

nprez83 commented Sep 3, 2024 •

edited

Loading

richardpeng commented Sep 3, 2024 •

edited

Loading

nprez83 commented Sep 4, 2024 •

edited

Loading

rgogada commented Sep 27, 2024 •

edited

Loading

ildar170975 commented Oct 17, 2024 •

edited

Loading