Dashboard - Flexible layout: ability to mix 1, 2, and 3 column lines

Mixing lines with 1, 2, and 3 columns in a single Dashboard

Description

Currently, when configuring a Gladys Dashboard, you can choose the number of columns to use: 1, 2, or 3.

This functionality is very practical, especially for displaying certain widgets in full width. However, the choice of the number of columns applies to the entire Dashboard.

I would like to be able to define the number of columns line by line, in order to be able to mix different layouts within the same Dashboard.

Example

The goal would be to be able to build a Dashboard like this:

┌─────────────────────────────────────────────┐
│                                             │
│          Full-width Widget                 │
│                                             │
└─────────────────────────────────────────────┘

┌───────────────────────┬─────────────────────┐
│                       │                     │
│       Widget 1        │       Widget 2      │
│                       │                     │
└───────────────────────┴─────────────────────┘

┌───────────────┬───────────────┬─────────────┐
│               │               │             │
│   Widget 1    │   Widget 2    │   Widget 3  │
│               │               │             │
└───────────────┴───────────────┴─────────────┘

┌─────────────────────────────────────────────┐
│                                             │
│          Full-width Chart                  │
│                                             │
└─────────────────────────────────────────────┘

Thus, a line could contain:

  • 1 column → 100% width

  • 2 columns → 50% / 50%

  • 3 columns → 33% / 33% / 33%

And these different types of lines could be used successively in the same Dashboard.

Why?

This would allow building much more readable and content-adapted Dashboards.

For example, in an « Energy » Dashboard:

  • a consumption curve could occupy the entire width;

  • the different powers or consumptions could be displayed in 3 columns;

  • another chart could again take up the full width;

  • then a few commands could be displayed in 2 columns.

Today, to achieve this type of presentation, you have to choose between a Dashboard with 1, 2, or 3 columns and therefore cannot adapt the width to each type of content.

Ergonomics Proposal

When editing the Dashboard, each line could simply have a parameter to choose its number of columns:

Line 1   [ 1 column ▼ ]

Line 2   [ 2 columns ▼ ]

Line 3   [ 3 columns ▼ ]

Line 4   [ 1 column ▼ ]

Another possibility would be to allow changing the width of a block and let Gladys automatically reorganize the other widgets in the line.

The important thing, in my opinion, is to maintain a simple logic: the number of columns must be able to be defined independently for each line.

Responsive

The responsive behavior could of course continue to apply on small screens.

For example, a line configured with 3 columns on a computer could automatically switch to 1 or 2 columns on mobile/tablet depending on the available width.

Interest

This evolution would not call into question the current functioning of Dashboards.

The global choice of 1, 2, or 3 columns could simply become the default behavior, with the possibility of customizing certain lines.

This would give much more freedom to build complex Dashboards while maintaining the current simplicity for users who do not need customization.

In my opinion, this would be a fairly natural evolution of the current Dashboard system.

What do you think?

Hi @PhilippeMA! :waving_hand:

Thanks for this well-structured feedback. The use case for the energy dashboard is compelling, and it’s a request that comes up regularly: today, the number of columns applies to the entire dashboard, and it’s true that a consumption curve crammed into a column that’s only 33% wide isn’t ideal. :slightly_smiling_face:

I’m in favor of the idea in principle. Here are a few technical context points to explain why this isn’t just a matter of adding a dropdown menu:

The current dashboard is organized in columns, not rows. In the database, a dashboard is a list of columns, each containing a stack of boxes that are packed densely (no gaps, even if the boxes have different heights). Your proposal describes a row-based organization, which is a change in the data model, with migration of existing data, redesign of the drag & drop editor, etc. It’s a significant project, not a quick win.

The approach I would prioritize: „sections“. Instead of a row-by-row setting, the dashboard would become a list of stacked sections, each with its own number of columns (1, 2, or 3) and working internally like the current dashboard. Your example would therefore be: a 1-column section (the curve), a 3-column section (the metrics), a 1-column section (the chart), a 2-column section (the commands). This exactly meets your need and has two major advantages:

  • Full backward compatibility: an existing dashboard simply becomes a single section with its current columns, no visual changes for anyone.
  • Reuse of existing code for rendering and editing within a section.

On the responsive side, good news: this model would even improve mobile. Today, on small screens, columns are stacked column by column (all of column 1, then all of column 2…), which sometimes breaks the reading logic. With sections, the stacking would follow the reading order: the curve, then the metrics, then the commands. On small screens, everything would still go to 1 column as today, while keeping the order of the sections.

A compromise to keep in mind: in a multi-column section, if the boxes have different heights, the next section starts below the tallest one, so some white space may appear, whereas the current stacking is perfectly dense. This is inherent to any „row-based“ layout, and it’s the trade-off for being able to mix widths.

What does the community think? :smiley:

I had started something along those lines some time ago, I could post a preview of what it could look like. But of course, as @pierre-gilles explains, there may be gaps that we can’t fill.

Indeed, for a more effective and readable layout, that would be great

NB:
@PhilippeMA a big thank you to you because I just learned that you can delete columns!!
As I always work in dark mode, I hadn’t noticed the « trash » icon that is very visible in light mode! And I think (unless I’m mistaken) that this feature is not documented


Here’s a really quick preview because in my test Gladys that I set up quickly, I don’t have any data.

In Edit mode, the widgets are in their real state, making it easier to move them and see the result.

With a button that appears when you hover over the widget, allowing you to modify or delete it. You can imagine adding a Duplicate button (requested on the forum)

If you click Modify, then the widget settings menu opens

Thanks for testing! It’s nice, but indeed, we can clearly see this issue:

I wonder if we couldn’t dynamically adjust the widgets to fill 100%.

to test. I won’t be available for the next 4 days, but as soon as I can, I’ll run Claude on it.

I couldn’t resist starting a spec (from my phone, on the beach :joy:) with Fable 5 :grin:

I included other topics but that I find related (notably the display of a 3D house image on the dashboard).

These are topics where everything becomes possible with AI and therefore clearly have their place in Gladys now!

Interesting proposal from Fable :grin:

There are adjustments to be made, but it’s a very interesting proposal.

Well, I like the top notifications:
image

Hello everyone,

I hesitated to continue this topic or create another one, but it fits perfectly here.

Would it be possible to put multiple actions or buttons in a single widget or box?

Let me explain, on HA there are vertical and horizontal stacks where you could choose the number of actions per box. I just installed my 12 Profalux Zigbee shutters, and as I have 3 floors, I would have liked to put on a single box, 3 actions or buttons to raise only my shutters by floor; same for lowering them.

I find that a single action on a large box takes up a lot of space on the dashboard. Same for my temperatures, I would have liked to be able to put several on a single box.

I just finished my Gladys installation today and I subscribed. I am very satisfied with the result so far :slight_smile: - everything worked very quickly.

Here is my first dashboard, hoping to be able to improve it over time

Here are some Fable proposals from last night!

  1. Better with alignment:

  1. A custom view widget:

  1. A new “Horizon” theme

Do you have a screenshot of this feature on HA? :slight_smile:

Thanks for your feedback and support :raising_hands:

Just goes to show, when work becomes a game, you just can’t stop! :sweat_smile:


It’s pretty well done, I love the result.

Hello!

Beyond the aesthetic layout aspect, which indeed requires real work, it’s also the flexibility and composition of the widgets themselves!

Ha is extremely good at this, we can compose our own widgets, which is really very pleasant. While still having pre-configured widgets so you don’t have to bother, of course.

But in the composition, you can add interactive elements, choose what happens when clicking on the widget itself, have multiple devices and multiple pieces of information displayed at the same time, in short, the possibilities are really huge. And for someone who wants something custom, it’s super cool and above all it’s super simple (no more complicated YAML configuration).

I think that even if all the comments are justified, one thing that sets Gladys apart from HA is the deliberate choice of a simple and lightweight interface.
I’ve always found that HA dashboards and widgets quickly become too cluttered, unreadable.

Making widgets too customizable might not be the right approach? I say that but I don’t have a solution to propose either :sweat_smile:

We’ll have to talk to @pierre-gilles when he gets his feet out of the sand! :grinning_face:

I agree with you on the substance: widgets need to become richer and more composable. However, we won’t take the same path as HA, and I’ve answered you in detail in the other topic to avoid duplicating the discussion :slightly_smiling_face:

In summary: yes to composition, but declarative and framed by the core, so that the dashboard remains coherent and simple for everyone. This topic (sections) is actually the first building block in this direction!

Yes, I also replied to you on the other topic.

As for this first building block, there are plenty of libraries capable of doing that!

No need to bother with something hyper-custom and complicated, with the right library the user will already be much more free. dnd-kit, Gridstack, the one from Trello/Atlassian (I don’t remember the name), or even SortableJS.

At the time, I think I played with this one which offers a lot of possibilities, I would have to see if I can find the POC I made :thinking:

I see that there are nice images of Fable, if the goal is also to go through a small restyling, maybe we should update Tabler, right? I don’t know when the version integrated into the project is from, but it seems to me that they now have more rounded and softer graphical elements to the eye.

Depending on what you plan to do, I might be able to lend a hand! It’s a bit complicated now with my company, but well I can allocate a few hours here and there for a good cause (old school) :smiley: