Panel - Diseño flexible: poder mezclar líneas de 1, 2 y 3 columnas

Poder mezclar líneas de 1, 2 y 3 columnas en un mismo Dashboard

Descripción

Actualmente, al configurar un Dashboard de Gladys, es posible elegir el número de columnas utilizadas: 1, 2 o 3.

Este funcionamiento es muy práctico, especialmente para mostrar ciertos widgets a pantalla completa. Sin embargo, la elección del número de columnas se aplica a todo el Dashboard.

Me gustaría poder definir el número de columnas línea por línea, para poder mezclar diferentes diseños dentro de un mismo Dashboard.

Ejemplo

El objetivo sería poder construir un Dashboard como este:

┌─────────────────────────────────────────────┐
│                                             │
│          Widget de ancho completo          │
│                                             │
└─────────────────────────────────────────────┘

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

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

┌─────────────────────────────────────────────┐
│                                             │
│          Gráfico de ancho completo          │
│                                             │
└─────────────────────────────────────────────┘

Así, una línea podría contener:

  • 1 columna → ancho 100 %

  • 2 columnas → 50 % / 50 %

  • 3 columnas → 33 % / 33 % / 33 %

Y estos diferentes tipos de líneas podrían usarse sucesivamente en el mismo Dashboard.

¿Por qué?

Esto permitiría construir Dashboards mucho más legibles y adaptados al contenido.

Por ejemplo, en un Dashboard « Energía »:

  • una curva de consumo podría ocupar todo el ancho;

  • las diferentes potencias o consumos podrían mostrarse en 3 columnas;

  • otro gráfico podría volver a ocupar todo el ancho;

  • luego algunas órdenes podrían mostrarse en 2 columnas.

Hoy, para obtener este tipo de presentación, hay que elegir entre un Dashboard de 1, 2 o 3 columnas y, por lo tanto, no se puede adaptar el ancho a cada tipo de contenido.

Propuesta de ergonomía

Al editar el Dashboard, cada línea podría tener simplemente un parámetro que permita elegir su número de columnas:

Línea 1   [ 1 columna ▼ ]

Línea 2   [ 2 columnas ▼ ]

Línea 3   [ 3 columnas ▼ ]

Línea 4   [ 1 columna ▼ ]

Otra posibilidad sería permitir cambiar el ancho de un bloque y dejar que Gladys reorganice automáticamente los demás widgets de la línea.

Lo importante, en mi opinión, es conservar una lógica simple: el número de columnas debe poder definirse independientemente para cada línea.

Responsive

El comportamiento responsive podría seguir aplicándose en pantallas pequeñas.

Por ejemplo, una línea configurada en 3 columnas en ordenador podría pasar automáticamente a 1 o 2 columnas en móvil/tableta según el ancho disponible.

Interés

Esta evolución no pondría en peligro el funcionamiento actual de los Dashboards.

La elección global de 1, 2 o 3 columnas podría convertirse simplemente en el comportamiento por defecto, con la posibilidad de personalizar ciertas líneas.

Esto daría mucha más libertad para construir Dashboards complejos, manteniendo la simplicidad actual para los usuarios que no necesitan personalización.

En mi opinión, sería una evolución bastante natural del sistema actual de Dashboard.

¿Qué opinan?

¡Hola @PhilippeMA! :waving_hand:

Gracias por este feedback tan bien estructurado, el caso de uso del panel de energía es convincente, y es una solicitud que se repite con frecuencia: hoy en día, el número de columnas se aplica a todo el panel, y es cierto que una curva de consumo encajada en una columna del 33% de ancho, no es ideal. :slightly_smiling_face:

Estoy a favor de la idea en principio. Algunos elementos de contexto técnico para explicar por qué no es solo un menú desplegable que agregar:

El panel actual está organizado en columnas, no en filas. En la base de datos, un panel es una lista de columnas, cada una conteniendo una pila de cajas que se apilan de manera densa (sin huecos, incluso si las cajas tienen alturas diferentes). Tu propuesta describe una organización en filas, lo que es un cambio de modelo de datos, con migración de lo existente, rediseño del editor arrastrar y soltar, etc. Es un proyecto considerable, no un quick win.

La opción que priorizaría: las « secciones ». En lugar de un ajuste fila por fila, el panel se convertiría en una lista de secciones apiladas, cada sección con su propio número de columnas (1, 2 o 3) y funcionando internamente como el panel actual. Tu ejemplo sería, por lo tanto: una sección de 1 columna (la curva), una sección de 3 columnas (las métricas), una sección de 1 columna (el gráfico), una sección de 2 columnas (los comandos). Esto cubre exactamente tu necesidad, y tiene dos grandes ventajas:

  • Totalmente retrocompatible: un panel existente se convierte simplemente en una sección única con sus columnas actuales, sin cambios visuales para nadie.
  • Reutilización del código existente para el renderizado y la edición dentro de una sección.

En cuanto a la adaptabilidad, buena noticia: este modelo mejoraría incluso la experiencia móvil. Hoy en día, en pantalla pequeña, las columnas se apilan columna por columna (toda la columna 1, luego toda la columna 2…), lo que a veces rompe la lógica de lectura. Con secciones, el apilamiento seguiría el orden de lectura: la curva, luego las métricas, luego los comandos. En pantalla pequeña, todo pasaría a 1 columna como hoy, manteniendo el orden de las secciones.

Un compromiso a tener en cuenta de todos modos: en una sección con varias columnas, si las cajas tienen alturas diferentes, la siguiente sección comienza debajo de la más alta, por lo que puede aparecer algo de espacio en blanco, donde el apilamiento actual es perfectamente denso. Es inherente a cualquier diseño « en filas », y es el precio a pagar para poder mezclar los anchos.

¿Qué opina la comunidad? :smiley:

Hace algún tiempo empecé algo sobre esto, podría publicar un avance de cómo podría quedar. Pero, como explica @pierre-gilles, puede haber espacios que no podemos cubrir.

Efectivamente, para una disposición más eficaz y legible, sería muy bueno

NB :
@PhilippeMA ¡Muchas gracias a ti, porque acabo de enterarme de que se pueden eliminar columnas!
Como siempre trabajo en modo oscuro, no me había dado cuenta del icono de « papelera » que se ve muy bien en modo claro. ¡Y creo (a menos que me equivoque) que esta posibilidad no está documentada!


Aquí tienes un vistazo muy rápido, ya que en mi Gladys de prueba, que monté rápido, no tengo datos.

En modo Edición, los widgets están en su estado real, más fácil cuando quieres moverlos y ver el resultado.

Con un botón que aparece al pasar el ratón sobre el widget, que permite modificarlo, eliminarlo. Se puede imaginar añadir un botón Duplicar (solicitud en el foro)

Si haces clic en Modificar, entonces se abre el menú de configuración del widget

¡Gracias por probarlo! Es genial, pero efectivamente se ve bien ese problema:

Me pregunto si no podríamos adaptar dinámicamente los widgets para que ocupen el 100%

para probar. No estaré disponible estos próximos 4 días, pero en cuanto pueda lanzaré a Claude.

No he podido resistirme a empezar una especificación (desde mi teléfono, en la playa :joy:) con Fable 5 :grin:

He incluido otros temas, pero que considero relacionados (especialmente la visualización de una imagen 3D de una casa en el panel de control).

Estos son temas en los que con la IA todo es posible y que claramente tienen su lugar en Gladys ahora.

Interesante propuesta de Fable :grin:

Hay ajustes que hacer, pero es una propuesta muy interesante

A mí me gustan las notificaciones superiores:
image

Hola a todos,

He dudado si continuar con este tema o crear otro, pero encaja perfectamente.

¿Sería posible poner varias acciones en un solo widget o caja?

Me explico, en HA existen pilas verticales y horizontales donde se podía elegir el número de acciones por caja. Acabo de instalar mis 12 persianas profalux zigbee, y como tengo 3 pisos, me gustaría poner en una sola caja, 3 acciones o botones para subir solo mis persianas por piso; lo mismo para bajarlas.

Creo que una sola acción en una caja grande ocupa mucho espacio en el panel. Lo mismo para mis temperaturas, me gustaría poder poner varias en una sola caja.

Acabo de terminar mi instalación de Gladys hoy y me he suscrito. Estoy muy satisfecho con el resultado hasta ahora :slight_smile: - todo ha funcionado muy rápido.

Aquí está mi primer panel de control esperando poder mejorarlo con el tiempo

¡Aquí tienes algunas propuestas de Fable de esta noche!

  1. Con el alineamiento queda mejor:

  1. Un widget de vista personalizado:

  1. Un nuevo tema «Horizonte»

¿Tienes una captura de pantalla de esta posibilidad en HA? :slight_smile:

Gracias por tu comentario y tu apoyo :raising_hands:

¡Así que cuando trabajar se convierte en un juego, ya no sabes cuándo parar! :sweat_smile:


Queda bastante bien, me encanta el resultado

¡Hola!

Más allá del aspecto de diseño estético, que realmente merece un trabajo serio, también es la flexibilidad y la composición de los widgets en sí mismos.

Ha es extremadamente bueno para eso, podemos componer nuestros propios widgets, lo cual es realmente muy agradable. Tenemos widgets preconfigurados para no tener que preocuparnos, obviamente.

Pero en la composición, podemos añadir elementos de interacción, elegir qué ocurre al hacer clic en el widget en sí, tener varios dispositivos y varias informaciones mostradas al mismo tiempo, en resumen, las posibilidades son realmente enormes. Y para alguien que quiere algo a su medida, es genial y sobre todo es muy sencillo (ya no se necesita una configuración YAML complicada).

Creo que, aunque todos los comentarios sean fundados, una cosa que diferencia a Gladys de HA es la decisión asumida de tener una interfaz simple y ligera.
Siempre he encontrado que los dashboards y widgets de HA se vuelven rápidamente demasiado desordenados, poco legibles.

¿Quizás hacer los widgets demasiado personalizables no es el enfoque correcto? Lo digo, pero no tengo ninguna solución que proponer, eh :sweat_smile:

Habrá que hablarlo con @pierre-gilles cuando saque los pies de la arena. :grinning_face:

Estoy de acuerdo contigo en el fondo: los widgets deben volverse más ricos y más composables. Sin embargo, no tomaremos el mismo camino que HA, y te respondí en detalle en el otro tema para no duplicar la discusión :slightly_smiling_face:

En resumen: sí a la composición, pero declarativa y enmarcada por el núcleo, para que el panel de control siga siendo coherente y sencillo para todos. ¡Este tema (las secciones) es, de hecho, el primer paso en esta dirección!

Sí, también te respondí en el otro tema.

Para este primer bloque, ¡hay muchas bibliotecas capaces de hacer eso!

No es necesario complicarse con algo hiper personalizado y complicado, con la buena lib el usuario ya será mucho más libre. dnd-kit, Gridstack, la de Trello/Atlassian (de la que no me acuerdo del nombre) o incluso SortableJS.

En ese momento, creo que jugué con esta que ofrece muchas posibilidades, habría que ver si encuentro el POC que hice :thinking:

Veo que hay hermosas imágenes de Fable, si el objetivo también es pasar por un pequeño restyling, habría que actualizar Tabler, ¿no? No sé de cuándo es la versión integrada en el proyecto, pero me parece que ahora tienen elementos gráficos más redondeados y más suaves a la vista.

Dependiendo de lo que planees hacer, ¡tal vez pueda echar una mano! Es un poco complicado ahora con mi trabajo, pero bueno, puedo dedicar algunas horas aquí y allá por la buena causa (a la antigua) :smiley: