Présentation + [Mon Dashboard] BBE

Communauté HACF Présentations
,
154

Dernières news:
Quelques semaines qu’on est en full sections sur le dashboard… un seul « menu d’accueil » qui s’adapte automatiquement en fonction du support (smartphone, tablette, PC…), à la place des deux menus précédents à choisir à la main…

Pour le reste globalement inchangé par rapport à la description initiale… Quelques bricoles qui permettent d’être plus joli que les premiers tests là: Présentation + [Mon Dashboard] BBE - #93 par BBE :

  • ligne de chips « personnes » remplacée par des badges
  • généralisations des pop-ups pour que chaque bouton aie son pop-up
  • uniformisation de la hauteur des room cards pour que ça soit joli
    mais en dehors de ça, rien qui ne mérite plus de mise à jour…

En fonction de la taille de l’écran, le setting se met à jour automatiquement en préservant un ordre a peu près constant:
Sur PC:

image
image1688×350 46.9 KB

Sur tablette:

image
image890×624 57.4 KB

Sur smartphone:

image
image482×1048 66.8 KB

C’est basé sur 2 room card par section:

image
image1912×940 106 KB

A noter, pour les room cards, le layout est le suivant:

layout_options:
  grid_columns: 2
  grid_rows: auto

Ainsi la hauteur des cartes reste celle des room cards de base, et ne suit pas la grille (elle font environ1.5 unité de haut) Si on ne met pas auto sur les grid_rows on a soit des cartes tronquées (grid_rows: 1), soit un vide entre les lignes (grid_rows: 2)…

Enfin, j’utilise le thème suivant, dans lequel:

  • on ajuste la largeur du gap entre sections (8 px, pour le rendre identique à l’espace entre cartes)
  • on ajuste la largeur minimale des sections (400px, pour éviter que la ligne de chips passe sur 2 lignes, comme dans le mode edition ci dessus…)
  • on customise les couleurs du graph energy pour le tarif tempo
day_and_night:
  primary-color: "#264269"
  modes:
    light:
      energy-grid-consumption-color-5: "#00008B"
      energy-grid-consumption-color-4: "#0000FF"
      energy-grid-consumption-color-3: "#8B8B8B"
      energy-grid-consumption-color-2: "#AAAAAA"
      energy-grid-consumption-color-1: "#8B0000"
      energy-grid-consumption-color-0: "#FF0000"
    dark:
      energy-grid-consumption-color-5: "#00008B"
      energy-grid-consumption-color-4: "#0000FF"
      energy-grid-consumption-color-3: "#D3D3D3"
      energy-grid-consumption-color-2: "#FAFAFA"
      energy-grid-consumption-color-1: "#8B0000"
      energy-grid-consumption-color-0: "#FF0000"
  ha-view-sections-column-gap: 8px
  ha-view-sections-column-min-width: 400px
3 « J'aime »