Dashboard chapter 2: Let’s redesign the cards together!

[123 (Taras)]

As a long-time user of badges, I like all the flexibility the new badges will have with the exception of the fact they will be significantly wider.

I use badges because they’re narrow and several can be placed on a single line that easily fits within the bounds of a phone’s screen (without wrapping).

The new badges don’t appear to offer the ability to strip them down to a narrow format (certainly not as narrow as existing badges). It seems like the icon is mandatory and text can only appear beside the value.

It would be appreciated if the new badge’s options offered a means of replicating an old badge’s compactness (with no or minimal loss of information).

[Mariusthvdb (Marius)]

since I have no hopes this design choice will be reverted (and probably cant expect the new design to mimic the old) I guess we could make an effort displaying that identical info, in an even better way using a custom:button-card.

You could easily setup a grid of lets say 8 and have them show that info, and what’s more, template anything you see, from state, name, unit, to action and color etc etc

you would need the custom card , not sure if you’re open to that?
a very quick mockup:

and

    - type: grid
      columns: 8
      cards:
        - <<: &test
            type: custom:button-card
            entity: sensor.voorkamer_temperatuur
            template: round_button
            show_state: true
            show_icon: false
            show_name: false
            show_label: true
            label: Voor
            styles:
              card:
                - font-size: 14px
        - <<: *test
        - <<: *test
        - <<: *test
        - <<: *test
        - <<: *test
        - <<: *test
        - <<: *test

is all that it takes

and it would be even more compact if we ditch the round, and set grid to non square:

    - type: grid
      columns: 8
      square: false
      cards:
        - <<: &test
            type: custom:button-card
            entity: sensor.voorkamer_temperatuur
            ?template: round_button
            show_state: true
            show_icon: false
            show_name: false
            show_label: true
            label: Voor
            styles:
              card:
                - font-size: 14px
        - <<: *test
        - <<: *test
        - <<: *test
        - <<: *test
        - <<: *test
        - <<: *test
        - <<: *test

ofc, still ugly and would need some better styling, but we got to admit the current badge isnt that easy to style either…

[madelena]

@Mariusthvdb You can build custom badges to match the old design. It is documented in the blog post.

[Meelobee (Martijn)]

The new Badges should really be named Pills, suits much better and allows for the old Badges to still be available for those who favor them.

Also please make the new ‘Pills’ usable everywhere on the dash and not only in the header. Would be nice to be able to include these in/on other cards or make them dividing ‘rows’ between other cards.

[madelena]

@Meelobee They will be available in section headers.

While badges won’t be available in the default UI as cards, there’s nothing to stop a card developer to create a card that looks like that.

[madelena]

@123 The new badges are much shorter, so it will occupy about the same amount of space, if not less.

[madelena]

@parautenbach

The team just need to be sure they consider what was good about the existing badges and how it’s been used.

Yes, we did. You can watch the live stream about it. We went through 100+ case studies to observe how it’s been used.

Then I wonder what the purpose of this topic is: decision taken, so the feedback seems futile.

This topic is about recruiting card designers and developers.

I think this could’ve been another mitigation strategy followed by the team: release the old cards as part of this release.

It’s part of the plan. That’s why there’s the ability to create custom badges.

[Mariusthvdb (Marius)]

@madelena

It is documented in the blog post.

Must have completely missed that… will reread and hope to find how we can do that

Thx!

If this is what you mean Custom badge | Home Assistant Developer Docs that isn’t exactly what we’re looking for I fear.

At least not the average badge user like I am…

[majorsl (Steve Major)]

I’m either the only one or a lot of people have this issue with the grid: I have a lot of dashboard items that are an odd number of items across when using mushroom. I’m kinda forced into 2x2 for these situations. I hate how it can’t deal with resizing 3 items. I get it: grid. I don’t think that can be solved.

[123 (Taras)]

@madelena

much shorter

“Shorter” as in not as tall or not as wide?

The width of the new badges that appears to be at least twice as wide as the old ones (because the icon seems to be mandatory according to the beta docs) and even wider if a title is included (because it appears beside the value).

I will tinker with it this weekend and see what I can do.

[123 (Taras)]

I appreciate the suggestion and the detailed example.

I think we can agree that using that particular custom card requires at least three times the work just to get half the appearance.

I’ll see what I can do with the new badges.

[madelena]

The name of the badge appears above the state of the badge. It will only get wider if you want to show attributes next to the state.

[stefan1982 (Stefan)]

@madelena Tip: Screenshots says more than a 1000 words…

But from my opinion: I’m happy to see that decisions are made and HA is moving forward. I would love to see the old version of the “redesigned” cards move to HACS rather than being in core.
HA core should provide all the functionality and flexibility which is needed to make your own cards, override the existing cards in design/style and perhaps structure.

Without having the guts to break things (although it should be documented properly, and moved to HACS) HA core card-design and user experience will not be better in the future.
Personally, I hate it that I have to rely on 3rd party cards provided by HACS… But perhaps that was a design decision made in the past. Although, I think that the tile-card could be the Swiss army knife of cards, when all features are available to use, and - perhaps more importantly - the presentation (design => CSS) and structure (HTML/JS) of any card could easily be overridden and adjusted without the need of 3rd party integrations like mod_card, or anything else. This should be basic functionality provided in core, where the UI needs to make a place to be able to change things directly…

[Mariusthvdb (Marius)]

@stefan1982

Screenshots says more than a 1000 words

which is today!

not sure if the above would be called badges, chips or pills, but lets all join #beta on Discord today and experiment with the new feature.

Join the Home Assistant Discord Server!

[teskanoo]

Mariusthvdb’s right - beta has started - spoilers being dropped - come on over and join the fun

[nickrout]

It’s been 31 July for 19 hours now, and no beta. Comes of being 12 hours ahead of UTC I guess…

[Mariusthvdb (Marius)]

yeah, it’s been 10 hours here, and all we’ve seen are spoilers

[Mariusthvdb (Marius)]

btw Ive put together the instructions in Custom badge | Home Assistant Developer Docs to make this js script. However, because of the fact the js file for the editor does not exist the card wont get created.
Ive commented the import line and that makes the bare metal card appear, albeit not in an editor/card-picker ofc.

if anyone cares to join me on this, please do, maybe we can create something of it in this beta cycle
I’ve opened a repo here which is terrible as of yet, but probably easiest to cooperate on this

reading the discussion in Add new badges design with UI editor by piitaya · Pull Request #21401 · home-assistant/frontend · GitHub I see Paul mentioning this:

The old badges will always work as before. Badges are just a smaller card. You can mix them if you want

Does that mean the old badges are not deprecated at all in 2024.8?

[teskanoo]

@Mariusthvdb

Does that mean the old badges are not deprecated at all in 2024.8?

To me it implies that they will not vanish but will adopt the new look

[CChris (Christoph)]

I think, this approach would have been possible, if they would have gone for a “grid based” dashboard - and not a section based one.

i don’t see, how this should work with the sections…