Sections - alignement

Bonjour,

Quelques chose m’échappe avec les sections, aussi je viens demander un coup de main.

Je désire passer au mode de vue de sections et je n’arrive pas à afficher cela correctement sur ma tablette domotique.
j’ai créé ma vue section, 3 colonnes.
Sur ordinateur, aucun problème (même si l’optimisation des largeurs n’est pas bonne :thinking:…??)
Et sur ma tablette, cela reste constamment sur 2 colonnes, alors qu’il y aurait de la place vraisemblablement.

Une notion de largeur à indiquer quelques part peut être ?
Voici la config de ma vue, la vue ordi, la vue tablette.

Une piste, une idée ?
Merci d’avance
O.

Ma configuration


[center]## System Information

version core-2024.11.1
installation_type Home Assistant OS
dev false
hassio true
docker true
user root
virtualenv false
python_version 3.12.4
os_name Linux
os_version 6.6.54-haos
arch x86_64
timezone Europe/Paris
config_dir /config
Home Assistant Community Store
GitHub API ok
GitHub Content ok
GitHub Web ok
HACS Data ok
GitHub API Calls Remaining 5000
Installed Version 2.0.1
Stage running
Available Repositories 1463
Downloaded Repositories 71
Home Assistant Cloud
logged_in true
subscription_expiration 5 juillet 2025 à 02:00
relayer_connected true
relayer_region eu-central-1
remote_enabled true
remote_connected true
alexa_enabled true
google_enabled true
cloud_ice_servers_enabled true
remote_server eu-central-1-19.ui.nabu.casa
certificate_status ready
instance_id 6454030f03784242acad96316059a20c
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Home Assistant Supervisor
host_os Home Assistant OS 13.2
update_channel stable
supervisor_version supervisor-2024.11.2
agent_version 1.6.0
docker_version 27.2.0
disk_total 30.8 GB
disk_used 22.8 GB
healthy true
supported true
host_connectivity true
supervisor_connectivity true
ntp_synchronized true
virtualization kvm
board ova
supervisor_api ok
version_api ok
installed_addons AirSonos (4.2.2), Z-Wave JS (0.9.0), File editor (5.8.0), Samba share (12.3.2), Duck DNS (1.18.0), Samba Backup (5.2.0), Mosquitto broker (6.4.1), Terminal & SSH (9.15.0), Studio Code Server (5.17.3), Music Assistant Server (2.3.2), Music Assistant Server (beta) (2.4.0b4), HA Scheduler (0.17), Matter Server (6.6.0)
Dashboards
dashboards 10
resources 43
views 42
mode storage
Recorder
oldest_recorder_run 4 novembre 2024 à 18:16
current_recorder_run 13 novembre 2024 à 08:26
estimated_db_size 866.55 MiB
database_engine sqlite
database_version 3.45.3
[/center]

Bonjour,

Je ne crois pas.
j’ai essayé sur ma tablette a la verticale, sur une colonne, ça ne prend même pas la largeur complète :frowning:
du coup je reste sur une vue verticale avec layout-card. Layout-card ne fonctionne pas sur une vue section, ça aurais permis une largeur au choix.


c’est pas encore pour demain, que je vais passer a la vue section.

1 « J'aime »

Même combat sur mon iPad.
J’ai piqué une astuce à BBE il me semble, à mettre dans le thème utilisé.

ha-view-sections-column-gap: 8px
ha-view-sections-column-min-width: 300px
3 « J'aime »

Ah, cool !
merci pour l’info.

edit:
ok, j’ai trouvé l’info

  • Max width of a section: ha-view-sections-column-max-width (default: 500px)
  • Min width of a section: ha-view-sections-column-min-width (default: 320px)
  • Horizontal gap between sections: ha-view-sections-column-gap (default: 32px)
  • Vertical gap between sections: ha-view-sections-row-gap (default: 8px)
  • Horizontal gap between cards within a section: ha-section-grid-column-gap (default: 8px)
  • Vertical gap between cards within a section: ha-section-grid-row-gap (default: 8px)
2 « J'aime »

Salut
Tu définis 3 sections donc chaque section fera 1/3 de la largeur donc non clairement il n’y a pas la place pour les 3 cote à cote sur tablette.
Ce n’est pas parce que ta 2nde section n’a qu’une petite icone qu’elle n’occupe pas un tiers de l’écran.

Pour l’instant effectivement comme la dit @WarC0zes je ne pense pas que tu puisses jouer sur les largeurs de chaque section.

Edit : A moins que la solution proposée par @EMqA via @BBE fonctionne

1 « J'aime »

Tout ce qui a été dit au dessus est juste…

Il y a des arguments un peu partout pour régler la mise en page des sections:

  • Dans le theme comme indiqué plus haut:

    • Max width of a section: ha-view-sections-column-max-width (default: 500px)
    • Min width of a section: ha-view-sections-column-min-width (default: 320px)
    • Horizontal gap between sections: ha-view-sections-column-gap (default: 32px)
    • Vertical gap between sections: ha-view-sections-row-gap (default: 8px)
    • Horizontal gap between cards within a section: ha-section-grid-column-gap (default: 8px)
    • Vertical gap between cards within a section: ha-section-grid-row-gap (default: 8px)
  • Dans la vue tu peux régler le nombre max de colonnes

  • Dans la section elle même tu peux créer des sections de largeur double, triple, etc… et même pleine largeur.

Mais pas possible de faire des sections de largeur variables « plus étroites ».
A part faire une première section « double » puis deux normales, mais si tes sections sont vides, ça fera des espaces vides… Comme sur PC d’ailleurs puisque tu as des trous « entre » tes sections

Par contre du coup moi j’ai une question.

N’utilisant pas de thème actuellement, comment et ou je crée un fichier theme pour mettre ça dedans par exemple.

ha-view-sections-column-gap: 8px
ha-view-sections-column-min-width: 300px

Je me doute bien que dans la doc y’a l’info mais puisque tu es là :joy:

1 « J'aime »

Alors je suis pas le mieux plaçé pour ça mais basiquement ça s’ajoute dans configuration . YAML ou dans un fichier à part…

Perso j’ai un include dans mon configuration.yaml:

# Theme et couleurs tempo (bleu blanc rouge).
frontend:
  themes: !include themes.yaml

puis un fichier themes.yaml:

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
  
day_and_night-sections:
  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-min-width: 200px
  ha-view-sections-column-max-width: 350px
  ha-view-sections-column-gap: 32px

Tu peux définir autant de thèmes que tu veux et les selectionner par vue ou dans ton interface utilisateur…

2 « J'aime »

Tu ajoutes ça dans configuration.yaml:

frontend:
  themes: !include_dir_merge_named themes

Tu crées un dossier themes dans /config.
Puis un dossier avec un nom du thème


et tu crées un fichier au nom du thème en yaml.

exemple du mobile.yaml

mobile:
  #energy
  energy-grid-consumption-color-0: '#FF0000'
  energy-grid-consumption-color-1: '#00b300'
  paper-item-icon-color: '#808080'
  #mushroom chip
  mush-chip-icon-size: 23px
  mush-chip-background: rgba(158,158,158,0.2)
  mush-chip-spacing: 5px
  mush-chip-font-size: 12px
  mush-chip-padding: 0 0.4em
  #mushroom icon
  mush-icon-size: 45px
  mush-icon-symbol-size: 0.8em
  mush-badge-size: 16px
  mush-badge-border-radius: 50%
  #mushrrom card
  mush-card-primary-font-size: 13px
  mush-card-secondary-font-size: 12px
  mush-card-secondary-color: '#A0A0A0'
  #media player
  mini-media-player-button-color: rgba(139,148,158,0.25)
  mini-media-player-progress-height: 12px
  mini-media-player-artwork-opacity: 0.7
  # Colors
  mush-rgb-red: 255, 0, 0
  mush-rgb-blue: 33, 150, 255
  mush-rgb-green: 0, 128, 0
  mush-rgb-yellow: 255, 240, 0
  mush-rgb-orange: 255, 128, 0
  state-binary_sensor-door-off-color: green
  state-binary_sensor-door-on-color: red
  state-binary_sensor-motion-off-color: green
  state-binary_sensor-motion-on-color: red
  state-binary_sensor-window-off-color: green
  state-binary_sensor-window-on-color: red
  #card_mod
  card-mod-theme: mobile
  card-mod-card: |
    ha-card > div > div > table > tbody > tr:nth-child(1) >
    td.mdc-data-table__cell.cell-bullet > div {
      background: #FF0000 !important;
    }
    ha-card > div > div > table > tbody > tr:nth-child(2) >
    td.mdc-data-table__cell.cell-bullet > div {
      background: #00b300 !important;
    }
    ha-card.class_padding {
      padding: 0px 8px 8px 8px;
      margin-top: -8px;
    }
  card-mod-more-info-yaml: |
    .: |
      ha-dialog > div > div {
        padding: 0% !important;
        outline: none !important;
      }
  modes:
      light: {}
      dark: {}
2 « J'aime »

Voilà…

Encore plus propre que moi…

1 « J'aime »

Merci messieurs. Je testerai ça ce soir.

Oui, Comme ça, il peut download aussi des thèmes à partir de HACS.
Il faut, c’est configuration, pour fonctionner avec HACS.

Oui mais non. Le thème de base me convient très bien pas besoin d’un thème star-wars :rofl:

Je veux juste pouvoir faire quelques ajustements du style au dessus ou encore l’histoire des padding et margin de card-mod comme tu l’avais dejà évoqué dans un des posts pour ne plus avoir à les mettre chaque fois.

Mais j’ai pigé le principe.
:clap: :pray:

Mince, j’aurais pensé qu’un thème Star trek, t’aurais plus :crazy_face:

2 « J'aime »

merci @WarC0zes @BBE @Tochy @EMqA
c’est un peu plus « complexe » que je ne me l’imaginais, mais en tous les cas j’aurai encore appris grâce à vous (créer un thème, où, les bases pour le « configurer »…).
Il ne me reste plus qu’à mettre en pratique, pas sur que cela soit dès demain mais je vais m’y atteler.
:pray: :+1:
O.

Tu as les thèmes mushroom sur hacs, qui sont il me semble identiques au thème par défaut, mais au moins tu auras un fichier de base pour bosser.

2 « J'aime »

Alors j’ai testé vite fait avec le code ci-dessous :

my_theme:
  primary-color: "#296926"

  ha-view-sections-column-min-width: 538px
  ha-view-sections-column-max-width: 538px
  ha-view-sections-column-gap: 32px

Pour les largeurs pas de soucis ça fonctionne comme convenue que je mette le thème par vue ou par l’utilisateur.
J’ai mis une primary-color pour tester voir le changement elle n’agit que si je met le thème par l’utilisateur et non par vue.
Même si ça ne me pose pas de problème car je ne compte pas l’utilisée, avez vous une idée de pourquoi cette différence ?
J’ai bien rafraichit le cache et même tenter un redémarrage.

En tous les cas merci pour les infos.

C’est pas si compliqué tu verras, ça m’a pris 3 minutes pour tester.

Peut être que ça affetcte le haut du dashboard par utilisateur, et dans la vue uniquement si tu utilise cette couleur dans les cartes genre comme ça:

1 « J'aime »

Effectivement à l’air de correspondre à ça.