Dashboard - Mise en page flexible : pouvoir mélanger les lignes à 1, 2 et 3 colonnes

Pouvoir mixer des lignes à 1, 2 et 3 colonnes dans un même Dashboard

Description

Actuellement, lors de la configuration d’un Dashboard Gladys, il est possible de choisir le nombre de colonnes utilisées : 1, 2 ou 3.

Ce fonctionnement est très pratique, notamment pour afficher certains widgets en pleine largeur. En revanche, le choix du nombre de colonnes s’applique à l’ensemble du Dashboard.

Je souhaiterais pouvoir définir le nombre de colonnes ligne par ligne, afin de pouvoir mélanger différentes mises en page au sein d’un même Dashboard.

Exemple

L’objectif serait de pouvoir construire un Dashboard comme celui-ci :

┌─────────────────────────────────────────────┐
│                                             │
│          Widget pleine largeur              │
│                                             │
└─────────────────────────────────────────────┘

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

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

┌─────────────────────────────────────────────┐
│                                             │
│          Graphique pleine largeur           │
│                                             │
└─────────────────────────────────────────────┘

Ainsi, une ligne pourrait contenir :

  • 1 colonne → largeur 100 %

  • 2 colonnes → 50 % / 50 %

  • 3 colonnes → 33 % / 33 % / 33 %

Et ces différents types de lignes pourraient être utilisés successivement dans le même Dashboard.

Pourquoi ?

Cela permettrait de construire des Dashboards beaucoup plus lisibles et adaptés au contenu.

Par exemple, dans un Dashboard « Énergie » :

  • une courbe de consommation pourrait occuper toute la largeur ;

  • les différentes puissances ou consommations pourraient être affichées sur 3 colonnes ;

  • un autre graphique pourrait de nouveau prendre toute la largeur ;

  • puis quelques commandes pourraient être affichées sur 2 colonnes.

Aujourd’hui, pour obtenir ce type de présentation, il faut choisir entre un Dashboard en 1, 2 ou 3 colonnes et on ne peut donc pas adapter la largeur à chaque type de contenu.

Proposition d’ergonomie

Lors de l’édition du Dashboard, chaque ligne pourrait simplement avoir un paramètre permettant de choisir son nombre de colonnes :

Ligne 1   [ 1 colonne ▼ ]

Ligne 2   [ 2 colonnes ▼ ]

Ligne 3   [ 3 colonnes ▼ ]

Ligne 4   [ 1 colonne ▼ ]

Une autre possibilité serait de permettre de changer la largeur d’un bloc et de laisser Gladys réorganiser automatiquement les autres widgets de la ligne.

L’important à mon sens est surtout de conserver une logique simple : le nombre de colonnes doit pouvoir être défini indépendamment pour chaque ligne.

Responsive

Le comportement responsive pourrait évidemment continuer à s’appliquer sur les petits écrans.

Par exemple, une ligne configurée en 3 colonnes sur ordinateur pourrait automatiquement passer à 1 ou 2 colonnes sur mobile/tablette selon la largeur disponible.

Intérêt

Cette évolution ne remettrait pas en cause le fonctionnement actuel des Dashboards.

Le choix global de 1, 2 ou 3 colonnes pourrait simplement devenir le comportement par défaut, avec la possibilité de personnaliser certaines lignes.

Cela donnerait beaucoup plus de liberté pour construire des Dashboards complexes tout en conservant la simplicité actuelle pour les utilisateurs qui n’ont pas besoin de personnalisation.

À mon avis, ce serait une évolution assez naturelle du système actuel de Dashboard.

Qu’en pensez-vous ?

Salut @PhilippeMA ! :waving_hand:

Merci pour ce retour très bien construit, le cas d’usage du dashboard énergie est parlant, et c’est une demande qui revient régulièrement : aujourd’hui le nombre de colonnes s’applique à tout le dashboard, et c’est vrai qu’une courbe de consommation coincée dans une colonne à 33 % de largeur, ce n’est pas idéal. :slightly_smiling_face:

Je suis favorable à l’idée sur le fond. Quelques éléments de contexte technique pour expliquer pourquoi ce n’est pas juste un menu déroulant à ajouter :

Le dashboard actuel est organisé en colonnes, pas en lignes. En base de données, un dashboard c’est une liste de colonnes, chacune contenant une pile de boxes qui s’empilent de façon dense (sans trous, même si les boxes ont des hauteurs différentes). Ta proposition décrit une organisation en lignes, ce qui est un changement de modèle de données, avec migration de l’existant, refonte de l’éditeur drag & drop, etc. C’est un chantier conséquent, pas un quick win.

La piste que je privilégierais : des « sections ». Plutôt qu’un réglage ligne par ligne, le dashboard deviendrait une liste de sections empilées, chaque section ayant son propre nombre de colonnes (1, 2 ou 3) et fonctionnant en interne comme le dashboard actuel. Ton exemple serait donc : une section 1 colonne (la courbe), une section 3 colonnes (les métriques), une section 1 colonne (le graphique), une section 2 colonnes (les commandes). Ça couvre exactement ton besoin, et ça a deux gros avantages :

  • Rétrocompatibilité totale : un dashboard existant devient simplement une section unique avec ses colonnes actuelles, aucun changement visuel pour personne.
  • Réutilisation du code existant pour le rendu et l’édition à l’intérieur d’une section.

Côté responsive, bonne nouvelle : ce modèle améliorerait même le mobile. Aujourd’hui, sur petit écran, les colonnes s’empilent colonne par colonne (toute la colonne 1, puis toute la colonne 2…), ce qui casse parfois la logique de lecture. Avec des sections, l’empilement suivrait l’ordre de lecture : la courbe, puis les métriques, puis les commandes. Sur petit écran tout passerait en 1 colonne comme aujourd’hui, en gardant l’ordre des sections.

Un compromis à avoir en tête quand même : dans une section à plusieurs colonnes, si les boxes ont des hauteurs différentes, la section suivante démarre sous la plus haute, donc un peu d’espace blanc peut apparaître, là où l’empilement actuel est parfaitement dense. C’est inhérent à toute mise en page « en lignes », et c’est le prix à payer pour pouvoir mélanger les largeurs.

Qu’en pensez-vous la communauté ? :smiley:

J’avais commencé quelque chose la dessus il y a quelque temps, je pourrais poster un apercu de ce que cela pourrait donner. Mais forcement comme @pierre-gilles l’explique il peut y avoir des espaces qu’on ne peux pas combler.

Effectivement pour une mise en page plus efficace et lisible, ce serait très bien

NB :
@PhilippeMA un grand merci à toi car je viens d’apprendre que l’on pouvait supprimer des colonnes !!
Comme je travaille toujours en mode sombre, je n’avais pas remarqué l’icone « poubelle » que l’on voit très bien en mode clair ! Et je pense (sauf erreur de ma part) que cette possibilité n’est pas documentée


Voila un apercu vraiment très rapide car dans mon gladys de test que j’ai monté vite fait j’ai pas de datas.

En mode Edition, les widget sont dans leur état réel, plus facile quand on veut les déplacer et se rendre compte du rendu.

Avec un bouton qui apparait quand on survole le widget, qui permet de le modifier, supprimer. On peut imaginer ajouter un bouton Dupliquer (demande sur le forum)

Si on fait modifier, alors le menu de paramètrage du widget s’ouvre

Merci d’avoir testé ! C’est sympa mais effectivement on voit bien ce problème :

Je me demande si on ne pourrait pas adapter dynamiquement les widgets pour que ça remplisse à 100%

à tester. Je serais pas dispo ces 4 prochains jours mais dès que je peux je lancerais Claude dessus.

J’ai pas résisté à commencer une spec (depuis mon téléphone, sur la plage :joy:) avec Fable 5 :grin:

J’ai inclus d’autres sujets mais que je trouve lié (notamment l’affichage d’une image 3D de maison sur le tableau de bord).

Ce sont des sujets où avec l’IA tout devient possible et donc qui ont clairement leur place dans Gladys désormais !

Proposition intéressante de Fable :grin:

Il y a des ajustements à faire mais c’est super intéressant comme proposition

Alors moi j’aime bien les notifs supérieures :
image

Bonjour à tous,

J’ai hésité à poursuivre ce topic ou à créer un autre mais cela se rejoint parfaitement.

Serait il possible de mettre dans un seul widget ou box plusieurs actions ?

Je m’explique, sur HA il existe des piles verticales et des piles horizontales où l’on pouvait choisir le nombre d’action par box. Je viens d’installer mes 12 volets profalux zigbee, et comme j’ai 3 étages, j’aurai souhaité mettre sur une seule box, 3 actions ou boutons pour monter seulement mes volets par étages; idem pour les descendre.

Je trouve que une seule action sur une box qui est grande fait perdre beaucoup de place au dashboard. Idem pour mes températures, j’aurai aimé pouvoir en mettre plusieurs sur une seule box.

Je viens de finir mon installation Gladys aujourd’hui et je me suis abonné. Je suis très satisfait du résultat pour l’instant :slight_smile: - tout a fonctionné très rapidement.

Voici pour premier dashboard en espérant pouvoir l’améliorer dans le temps

Voilà quelques propositions de Fable de cette nuit !

  1. Avec l’alignement c’est mieux :

  1. Un widget vue maison :

  1. un nouveau thème « Horizon »

Tu as une capture d’écran de cette possibilité sur HA ? :slight_smile:

Merci de ton retour et de ton soutien :raising_hands:

Comme quoi, quand bosser devient un jeu, on ne sait plus s’arrêter ! :sweat_smile:


C’est plutôt assez réussi j’adore le rendu

Hello !

Au-delà de l’aspect de mise en page esthétique, qui mérite effectivement un vrai travail, c’est aussi la flexibilité et la composition des widgets en eux-mêmes !

Ha est extrêmement bon pour ça, on peut composer nos propres widgets ce qui est vraiment très agréable. En ayant tout de même des widgets préconfigurés pour ne pas avoir à s’embêter évidemment.

Mais dans la composition, on peut ajouter des éléments d’interaction, choisir ce qui se passe au clic sur le widget en lui-même, avoir plusieurs appareils et plusieurs infos affichées en même temps, bref les possibilités sont vraiment énormes. Et pour quelqu’un qui veut un truc aux petits oignions, c’est hyper cool et surtout c’est hyper simple (plus besoin de configuration YAML compliquée).

Je pense que même si toutes les remarques sont fondées, une chose qui différencie Gladys de HA c’est le parti pris assumé d’une interface simple et légère.
J’ai toujours trouvé que les dashboards et widget HA devenaient vite trop fouillis, peu lisibles.

Rendre les widgets trop personnalisables n’est peut être pas la bonne approche ? Je dis ça mais j’ai pas de solution à proposer hein :sweat_smile:

Faudra en causer à @pierre-gilles quand il aura sorti les pieds du sable ! :grinning_face:

Je te rejoins sur le fond : les widgets doivent devenir plus riches et plus composables. Par contre, on ne prendra pas le même chemin que HA, et je t’ai répondu en détail sur l’autre sujet pour ne pas dupliquer la discussion :slightly_smiling_face:

En résumé : de la composition oui, mais déclarative et encadrée par le core, pour que le dashboard reste cohérent et simple pour tout le monde. Ce sujet-ci (les sections) est d’ailleurs la première brique dans cette direction !

Yes je t’ai répondu aussi sur l’autre sujet aussi.

Pour ce qui est de cette première brique, il y a plein de bibliothèques capables de faire ça !

Inutile de s’embêter sur un truc hyper custom et compliqué, avec la bonne lib l’utilisateur sera déjà bien plus libre. dnd-kit, Gridstack, celle de Trello/Atlassian (dont je ne me souviens plus du nom) ou encore SortableJS.

A l’époque, il me semble avoir joué avec celle-ci qui offre énormément de possibilités, il faudrait que je vois si je retrouve le POC que j’ai fait :thinking:

Je vois qu’il y a de belles images de Fable, si le but est aussi de passer par un petit restyling, il faudrait éventuellement mettre à jour Tabler, non ? Je ne sais pas de quand date la version intégrée au projet, mais il me semble qu’ils ont des éléments graphiques plus arrondis et plus doux à l’oeil maintenant.

En fonction de ce que tu comptes faire, je peux peut-être donner un coup de main ! C’est un peu compliqué maintenant avec ma boîte, mais bon je peux allouer quelques heures par ci par là pour la bonne cause (à l’ancienne) :smiley: