Consolidate ESPHome Dashboard

[holdestmade]

Describe the problem you have/What new integration you would like
Add dual / multiple columns in dashboard for nodes. I have quite a few now and need to scroll a lot to get to the last one

Please describe your use case for this integration and alternatives you've tried:

Additional context

Current

Proposed Mock up

[danibjor]

It would have been nice if you could have the dashboard mirror the directory structure in your config folder. Would do wonders for organizing your stuff.

- config
  - living_room
    - lights.yaml
    - heater.yaml
  - down_stairs
    - heater.yaml
  - garage
    - lights.yaml
    - garage_door.yaml
  - outside
    - back
      - pool.yaml
      - lights.yaml
    - front
      - lights.yaml

This would also be logically grouped in the dashboard, in the same way as your folder structure.

[Fusseldieb]

Almost created a new feature request, but I think this is similar enough.

My request would be the ability to group ESPs into a folder.

Dividing the view in 3 for large screens would also help a lot, like OP proposed.

---

Messing around with the CSS, I made sort of a Mockup of both features:

[rradar]

I like the new device page from home assistant very much as gives a good, clutter view over all devices.

(slightly edited, battery percentages are not reported if I'm right)

This with the esphome actions added would serve nicely in my view. And some more custom columns would the hit 🏅

[Fusseldieb]

This with the esphome actions added would serve nicely in my view. And some more custom columns would the hit 🏅

Agreed! That searchbar on top and ability to sort by Area is also perfect.

[OttoWinter]

I'm ok with the general idea here - though I would prefer if someone with actual knowledge in HTML/CSS works on this, I know it would just take me ages.

I've got some thoughts on the things any design should include:

• The advanced feature should not get into the way of a new user starting out. For example with folders, by default the user should not be concerned with it. Only if they manually go and create those.
• Same goes for interface. A list like @rradar posted might be nice if you've got a lot of devices, but the big fat buttons in the current dashboard are better for most users.
• Ideally, the new design would also follow the material design guidelines. I believe there are guidelines for cards on wide screens.

I would also recommend starting this out small - adding folders would be a lot of work. Simple tweaks like multiple columns would get done easier.

[holdestmade]

@OttoWinter, agreed, I would prefer just more of the existing cards for ease of use

[Misiu]

@Fusseldieb I think that if you will rename SHOW LOGS to LOGS then the options would will into one row (now VALIDATE is on new line). This would make the view even more compact.

@OttoWinter do You agree on 1 to max 3 columns layout? According to spec there should be max 12 columns (4 columns per card), so this gives one to 3 cards per row.
I'll set up a dev instance and try to tweak this.

@Fusseldieb do You have your CSS somewhere?

[Fusseldieb]

@Fusseldieb do You have your CSS somewhere?

I just made a quick mockup messing around with inspect element. I actually understand CSS and made some neat things in the past (and still do), but I don't have a lot of time for those things, so it'll better for someone to make this :)

I also personally liked @rradar 's design better.

[Misiu]

@Fusseldieb at first I thought the same.
But with the grid, you lose quick action buttons (UPLOAD, EDIT, etc). You can add them as 4 columns, but that won't look nice, you can add a quick action button (3 dots) that will show those options after you click on that button, but I don't think it will work nicely (you must click on dots to get those options - one extra click).
What columns should the grid have?
-Name
-Status (online, offline)
-Quick actions (upload, edit, show log, validate)

[randybb]

• have a option to update all online, or all production devices based on tag.

[Misiu]

@randybb that's a global option (and I think it would be very useful), but I was thinking about grid options (columns) - per device option and info.

[holdestmade]

Any progress on this ?
Thanks

[jonathanadams]

I am currently working on some dashboard improvements which I hope to submit a pull request for in the next week or so.