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

Making the top section for badges horizontally scrollable would be very useful on mobile devices.

RPReplay_Final1723181682-ezgif.com-video-to-gif-converter

10 Likes

I was responding to this point:

Of course things may break, especially if you have devices or services relying on third parties. But it’s not Home Assistant that automatically updates your instance and breaks things suddenly “on some random tuesday”. It’s also not the lack of updating HA that breaks things. It’s other things randomly breaking and you may be lucky to have HA fix it.

I can’t be bothered to check all the examples you linked, but the first one is about an issue reported in December 2023 (and from the comment in there, likely much older) fixed now.

So it’s something that seemed to be broken for half a year. If this affected you, do you really think you would have to update your instance on the day the update came or you could wait a few more days until you have time to deal with the badges?

sorry I missed your key part… but you’re welcome anyways

and yes, you might have to do some rewriting. seems a one-liner edit replace though

is that screen vid of swiper card in action, or is it mockup?

It’s the Apple Home app.

I quite like how it group things too in there. If you tap on lights e.g. it will filter the entities below (cut off in my gif). Those badges aren’t actually explicitly defined.

1 Like

arghh, of course !
I now see that… I dont really use it, as having 3 systems doing the same and having to configure them all is a bit much, but yes, those designs are very very nice, and so eloquent.

These badges seem very familiar too :wink:

checking the difference between HA an Apple here I do love the way Apple handles the Light sliders.

When off there is the bulb-off icon on the slider, which makes it clearer then the HA slider. I also love the fact we can slide to off, and not just to the 1% (who needs that minimum anyways.?) and require the off button we see I HA at all times, even when off…

might be a nice redesign aspect for HA

3 Likes

Same, but in cases where I need to use an app, the Home app is by far the fastest and most convenient. I don’t have dashboards around the home though.

For me it is somehow a pity why every system is (or whyever has to) currently looking more or less exactly the same.

I try and judge every idea on its own merit. If it happens to be duplicated because it’s good (or the best), I don’t mind. There’s always a danger by not being innovative. Others are playing catch-up, which is a different situation.

1 Like

The thing I hate most about this is that a lot of use are running out of windows because the UI Changes MS keeps doing and screwing things up and we all are supporting Open Source because of this.

we had the same issue when Microsoft changed the start menu and we hated it… now is happening in home assistant with the badges, it was changed because the new is modern not matter what… Nit happy with this :frowning:

1 Like

Was not against you or related to your scroll request.

It was only my overall doubt/feeling, why HA in general need to look exactly as 90% of other solutions.

Late on here,
I’ve played with all sorts of home automation ideas from early 1992. Remember mosaic??
Anyway - after all those years and many “great new things” ideas, about 7 years ago I took a plunge with HA.
I don’t regret my decision. Sure some of the scripts, yaml, syntax etc just does my head in.
BUT - for a bit of software that responds to users - these guys rock.
You pick your forum topics and after a while you recognise the worthwhile contributors.
Time for another beer!!!

1 Like

We already do scrolling for the toolbar in data tables.

With that said, the implementation in Apple Home is unintuitive for a different reason. Theirs aren’t “badges” even though they look visually similar. They are actually filters for the list below.

but that is not what Pieter meant I believe.
Data tables is after all a bit special, being the backend of the frontend… and not main focus of our Dashboard design

It would be a great addition if we could scroll horizontally either inside a view, or within cards.

for the view example par excellence would be the new badges indeed.
for scrolling within a card, my main target would be the container cards like horizontal-stack, and grid

It’s one of the few interactions HA doesnt have, and which would offer a great new world of options.

Compare custom:swipe-card, but than fully functional :wink:

(not mentioning sections, as I dont have experience enough there, but I would think above 2 suggestions would also fit )

And they do that so well, people couldn’t tell the difference…
it doenst matter though, as it really is about the scrolling experience. not so much what is being scrolled.

I can confirm that the new badges are wider than the old ones, regardless of the fact that the name appears above the value.

It would help if we had control over the icon’s visibility. Eliminating the icon would help to minimize the badge’s width.

If I want to display 6 room temperatures (top of my phone’s screen), I don’t need 6 thermometer icons taking up space. The value’s purpose is inferred from its unit of measurement (C or F).

3 Likes

That’s easy to answer: Because Steve Jobs was a genius and a pedant, when it came to design questions. And everybody else is trying to catch up with them. You can see that on Universities around the globe, Apple still is the design, that you’ll be compared with. :slight_smile:

The desing choices of Jobs/Apple were good, that’s out of question. And trying something different will be a task, that is likely to blow up in your face. :laughing:

I’m not a design guy, so I can’t say that this should be this way or not, I’m just saying, that’s what experts tell me about designs and why they look similar in some cases… I for one can only say I like it or not, but that’s my personal choice, not based on anything. :laughing:

see FR Add name, state option to new Badges · home-assistant/frontend · Discussion #21523 · GitHub

1 Like

Thank for replying, Madalena.

I’ll clarify a bit.

If you have the scrolling foundation, are you saying you consider adding that to the section for badges? That would be awesome.

My reference to Apple was just to show the scrolling. I know those aren’t badges. They’re more like filters, like I mentioned in another post as well. While I like that functionality, my intention wasn’t to say that specifically should be duplicated. It was just a quick demo to show the scrolling.

And, I’d very much like to see a vertical layout for fields per badge to make it more compact. :slight_smile:

With an iPad on the wall where I want to read the information from a greater distance, it is desirable to reduce the gutter space between the columns or set it to the same value as between the columns in a section. This leaves more room for the contents of the cards. For example, with 4 cards in 1 row, the space between all columns is the same.

I have seen some reply with “There are some gaps that you can adjust in a theme.yaml”. I have changed the values from 8px to 2px in the slate.yaml, but it did not change on the sections dashboard which I have set to the slate theme. To me it seems the gutter space is fixed and cannot be changed in 2024.08.0

When I change the badge layout to the old style with “custom:hui-state-badge-element”, Is it possible to change the text displayed with the badge if I don’t want it to match the entity name somehow?