Resources lovelace dans ui-lovelace.yaml

Bonjour,

Pour l’instant j’ai placé mes resources Lovelace dans le fichier configuration.yaml comme ceci:

lovelace:
  mode: yaml
  resources:
    - url: /hacsfiles/button-card/button-card.js
      type: module
    - url: /local/meteofrance/meteofrance-raininhourforecast.js
      type: module
    - url: /local/meteofrance/meteofrance-vigilance.js
      type: module
    - url: /local/content-card-example.js
      type: module

Pour éviter de relancer HA à chaque ajout de nouvelles cards, j’ai voulu les déplacer dans le fichier ui-lovelace.yaml dans le même format comme j’ai cru le comprendre dans cette doc:

Mais les URL des « cards » ne sont plus trouvées.

J’ai oublié quelque chose ?

Montre nous les ressources dans le fichier de destination (ui-lovelace.yaml)…

Car en l’état, on ne peut pas t’aider car tu ne nous montres pas ce que tu as fait dans ton fichier ui-lovelace.yaml :sweat_smile:

:information_source: Mais je te conseille vivement de ne plus les gérer par YAML, mais directement par l’interface graphique :smiling_face_with_three_hearts:.

Pour pouvoir gérer tes ressources depuis l’interface graphique et continuer d’utiliser les tableaux de bord en mode YAML, il faut que tu change de configuration :

lovelace:
  mode: storage
  dashboards:
    lovelace-yaml:
      mode: yaml
      title: Mon Tableau de bord géré par YAML
      icon: mdi:script
      show_in_sidebar: true
      filename: ui-lovelace.yaml

En mode Storage, les tableaux de bord YAML profitent des ressources déclarées dans l’interface graphique.
Tu auras ton tableau de bord actuel, mais tu pourras profiter du tableau de bord automatique (pratique pour afficher toutes les entités sur une seule vue) mais surtout, tu pourras créer tes cartes depuis l’interface graphique et copier/coller le code dans YAML.

Et pour la liste des ressources utilisées, tu la retrouve dans le fichier lovelace_resources qui se trouve dans /config/.storage/lovelace_resources :+1:

Bien sûr, tu fait comme tu veux, mais je crois que je n’ai pas encore vu de commentaire (à part moi sur Discord une fois :innocent:) sur ce mode de gestion des tableaux de bord et je voulais l’introduire…:upside_down_face:

Merci @vdomos t’avoir poser la question car j’avais le même problème que toi :grin:

Et Merci à @Clemalex pour ta réponse toujours aussi claire :wave:
J’aurais juste une petite demande d’éclaircissement,

J’ai lu la même doc que @vdomos et j’ai pas compris à quoi correspondait :

  • Est-ce que lovelace-yaml est un nom que l’on peut choisir pour identifier notre dashboard ou un mot clé à respecter ?

  • Est-ce que c’est ce que l’on voit dans la barre latérale gauche, dans mon cas title serait Aperçu et icon serait l’icône à gauche d’Aperçu ?

    image

  • Et le filename serait le chemin d’accès au fichier contenant le code brute récupéré via les 3 points puis Modifier le tableau de bord ?

Je voudrais utiliser Github pour versionner aussi mon UI en plus de ma config, c’est pour ça que je passe par des fichiers YAML.

C’est plus à considérer comme un identifiant unique.
On est libre de choisir l’identifiant que l’on veut.

:warning: Il doit contenir des tirets (-) en lieu et place des espaces et des underscores.

:information_source: Par exemple, on peux mettre mon-tableau-de-bord-yaml



Oui, tout à fait.

:information_source: Le nom de l’icône de base est mdi:view-dashboard



Oui, il faut s’en servir comme point de départ.
Car ensuite, en mode YAML, l’important est l’organisation, donc autant en profiter pour diviser le code.

:information_source: Je te conseille de t’inspirer de la configuration de @frenck concernant le mode YAML.

Personnellement, lorsque je passerais en configuration YAML un jour, je partirais sur une configuration divisée ainsi (non testé !) :

#ui-lovelace.yaml
views:
  - !include /lovelace/vues/vue_accueil.yaml
  - !include /lovelace/vues/vue_cameras.yaml

#vue_accueil.yaml
title: Accueil
icon: mdi:weather-partly-cloudy
path: accueil
badges:
  - person.hacf
  - person.john
  - person.jane
cards:
  - !include /lovelace/cartes/carte_meteo_heures.yaml
  - !include /lovelace/cartes/carte_meteo_jours.yaml
#vue_cameras.yaml
title: House
path: house
icon: mdi:home
cards:
  - !include /lovelace/cartes/carte_alarme_desactivee.yaml
  - !include /lovelace/cartes/carte_alarme_activee.yaml
  - !include /lovelace/cartes/carte_camera_portail.yaml
  
#carte_meteo_heures.yaml
- type: 'custom:meteofrance-weather-card'
  name: Bordeaux
  entity: weather.bordeaux_hourly
  number_of_forecasts: '5'

#carte_meteo_jours.yaml
- type: 'custom:meteofrance-weather-card'
  name: Bordeaux
  entity: weather.bordeaux_daily
  number_of_forecasts: '5'

:information_source: A la différence de @frenck qui utilise la fonction !include_dir_list (qui inclut tous les fichiers d’un dossier), j’utiliserais plutôt la fonction !include pour chaque vues et cartes.
Pourquoi ? Car cela permet de gérer l’ordre des vues et des cartes à la différence de l’inclusion de dossier qui affichera les vues et cartes par ordre alphabétique (nom du fichier yaml)

:warning: :information_source: Je n’ai aucunement testé ce que je dis, mais c’est pour l’information :+1:

Tu peux aussi inclure dans ton github les fichiers :

  • lovelace_resources (contient les ressources)
  • lovelace_dashboards (contient la liste des tableaux de bord)
  • lovelace.nom_du_tableau_de_bord (contient le contenu du tableau de bord)

:warning: Le format n’est pas du YAML à l’intérieur… Il n’est pas impossible de faire une conversion…mais ça demande de faire un outil pour ne pas refaire tout le travail à chaque fois.

:information_source: J’ai pris l’habitude de sauvegarder lors de mes backups l’intégralité de mes tableaux de bord en faisant comme tu l’indique :

(source)

Merci pour vos retours,
Mais j’avoue que je reste encore dans le flou.

Pour l’instant mon ui-lovelace.yaml est vide et je n’ai que cela dans le configuration.yaml.

lovelace:
  mode: yaml
  resources:
    - url: /hacsfiles/button-card/button-card.js
      type: module
    - url: /local/meteofrance/meteofrance-raininhourforecast.js
      type: module
    - url: /local/meteofrance/meteofrance-vigilance.js
      type: module
    - url: /local/content-card-example.js
      type: module

@Clemalex, ta méthode de gérer tes ressources depuis l’interface graphique m’intéresse bien mais je ne vois pas ou je déclare les url ci-dessus pour les nouvelles Cards ajoutées.

Aussi, que deviennent du coup avec cette config, les dashboards que j’ai rajoutés dans l’ui ?
il n’apparaissent pas en yaml.

J’essaie d’appliquer un mixte entre la configuration de Frenck et tes idées @Clemalex.

voici l’arborescence que j’utilise :

config
│   configuration.yaml
|
└── integrations
│   │   ...
│   │   lovelace.yaml
│   │   ...
|
└── lovelace
    │   dashboards.yaml
    |
    └── default
        │   dashboard.yaml
        |
        └── cards
        |   |   meteo_france_tancarville.yaml
        |
        └── views
            |   weather.yaml

Mon configuration.yaml qui va charger tous les fichiers du répertoire integrations :

configuration.yaml
homeassistant:
  name: Maison
  latitude: !secret homeassistant_latitude
  longitude: !secret homeassistant_longitude
  elevation: !secret homeassistant_elevation
  unit_system: metric
  time_zone: !secret homeassistant_time_zone
  external_url: !secret homeassistant_url_externe
  internal_url:  !secret homeassistant_url_interne

  packages: !include_dir_named integrations

Dans le répertoire integrations, le fichier lovelace.yaml qui va définir le mode et charger tous les dashboards :

lovelace.yaml
#
# Intégrations de tous les dashboards
#
# https://www.home-assistant.io/lovelace/
# https://www.home-assistant.io/lovelace/dashboards-and-views
#
lovelace:
  mode: yaml
  dashboards: !include ../lovelace/dashboards.yaml

Pour l’instant mon seul fichier dashboards.yaml du répertoire lovelace. Il liste tous les dashboards en associant des infos et les fichiers respectifs de définition :

dashboards.yaml
#
# Liste tous les dashboards avec leurs fichiers respectifs
#
# https://www.home-assistant.io/lovelace/dashboards-and-views/#dashboards
#
default-yaml:
  mode: yaml
  title: Maison
  icon: mdi:view-dashboard
  show_in_sidebar: true
  filename: default/dashboard.yaml

Mon dashboard default avec son fichier dashboard.yaml qui va inclure les vues :

dashboard.yaml
#
# Liste les views pour le dashboard
#
views:
  - !include views/weather.yaml
  # - !include views/energies.yaml
  # - !include views/temperatures.yaml
  # - !include views/batteries.yaml

La vue weather.yaml qui définit les accès et les cartes associées à cette vue :

weather.yaml
#
# Définition de la vue avec les accès autorisés
#
path: weather
icon: 'mdi:theme-light-dark'
visible:
  - user: 971dbf8b5ae94402bbe40951236f8573
  - user: 55dddfb527e849878cce6b4559d93f66
  - user: 20ca6d655c1b4823acbcdbc9b563a9d7
badges: []
cards:
  - !include ../cards/meteo_france_tancarville.yaml

La carte meteo_france_tancarville.yaml :

meteo_france_tancarville.yaml
#
# Définition de la carte Météo France pour Tancarville
#
- type: 'custom:meteofrance-weather-card'
  entity: weather.tancarville
  number_of_forecasts: '7'
  name: Tancarville
  rainChanceEntity: sensor.tancarville_rain_chance
  uvEntity: sensor.tancarville_uv
  cloudCoverEntity: sensor.tancarville_cloud_cover
  freezeChanceEntity: sensor.tancarville_freeze_chance
  snowChanceEntity: sensor.tancarville_snow_chance
  alertEntity: sensor.76_weather_alert
  rainForecastEntity: sensor.tancarville_next_rain

Avec cette configuration, je n’arrive pas à afficher la carte Météo France. Je vois une page avec toutes les entités.
Qu’est ce que j’ai raté dans ma configuration ?

Ah, je viens seulement de découvrir que les resources apparraissent dans l’UI au niveau du menu Dasboards.

Donc si je change ma config de mode: yaml à mode: storage, ils seront sauvegardés d’office dans le répertoire « .storage » du coup.

Oui, si tu passe en configuration storage, tes tableaux de bords en YAML, profiterons de ces ressources, que tu retrouves ensuite dans le fichier lovelace_resources du dossier caché.storage.

J’ai pas remarqué d’erreur qui saute aux yeux en lisant rapidement.

Procède par étape en intégrant tout dans leui-lovelace.yaml, puis en enlevant une seule vue (mais gardes les cartes dedans), puis après avoir valider l’intégration des vues, en enlevant une carte d’une vue, etc…(Tout les fichiers dans le même dossier).
Cette méthode permet de vérifier que les inclusions sont bonne.
Ensuite, commence à changer les fichiers de dossier.

Cette méthode de permet de vérifier que les chemins que tu rentres sont les bons, car vu le symptôme :

@Clemalex, j’ai réussi à trouver un problème, le chemin d’accès d’un fichier n’était pas correct :

dashboards.yaml
#
# Liste tous les dashboards avec leurs fichiers respectifs
#
# https://www.home-assistant.io/lovelace/dashboards-and-views/#dashboards
#
default-yaml:
  mode: yaml
  title: Maison
  icon: mdi:view-dashboard
  show_in_sidebar: true
  filename: lovelace/default/dashboard.yaml

Le problème a évolué, je n’arrive pas à récupérer les ressources
image

J’ai modifié mon fichier lovelace.yaml en ajoutant le bloc ressources mais ça ne corrige pas le problème :

#
# Intégrations de tous les dashboards
#
lovelace:
  mode: storage
  resources:
    - url: /hacsfiles/lovelace-meteofrance-weather-card/meteofrance-weather-card.js
      type: module
    - url: /hacsfiles/mini-graph-card/mini-graph-card-bundle.js
      type: module
    - url: /hacsfiles/upcoming-media-card/upcoming-media-card.js
      type: module
  dashboards: !include ../lovelace/dashboards.yaml

Si tu as une idée …

Pour moi, ce n’est pas un problème de ressources (en mode storage, les ressources se gèrent par l’interface graphique normalement).

Et le message ne parle pas de ressources.

Regarde plutôt du côté de l’indentation…

Bon réveillon !

C’était bien un problème d’indentation, bravo @Clemalex :wave: :wave::
La carte meteo_france_tancarville.yaml modifiée:

meteo_france_tancarville.yaml
#
# Définition de la carte Météo France pour Tancarville
#
type: 'custom:meteofrance-weather-card'
entity: weather.tancarville
number_of_forecasts: '7'
name: Tancarville
rainChanceEntity: sensor.tancarville_rain_chance
uvEntity: sensor.tancarville_uv
cloudCoverEntity: sensor.tancarville_cloud_cover
freezeChanceEntity: sensor.tancarville_freeze_chance
snowChanceEntity: sensor.tancarville_snow_chance
alertEntity: sensor.76_weather_alert
rainForecastEntity: sensor.tancarville_next_rain

Maintenant, il faut que j’arrive à supprimer l’ancienne entrée Aperçu dans le menu :
image

Où je peux trouver cette entrée ?

Bon, j’ai trouvé comment modifier le dashboard par défaut mais je dois passer par le profil de chaque Utilisateurs et le faire sur chaque appareil
image

Il n’y aurait pas une manipulation en mode plus « administrateur » ?

edit :
A chaque déconnexion/reconnexion, je perd la configuration du tableau de bord par défaut.
=> ça sent le bug, non ?

Essaies de te connecter avec un administrateur, puis de naviguer dans les tableaux de bord, sélectionner celui que tu veux afficher sur l’appareil et cliquer sur :

Ensuite, tu te déconnecte, puis te connectes avec un utilisateur pour voir si la définition du tableau de bord par défaut est conservée.

Je suis connecté en tant qu’admin et j’ai défini le dashboard Maison (manuel) par défaut

Je me déconnecte et me reconnecte en tant qu’admin (le même compte)

le dashboard Aperçu est redevenu le dashboard par défaut.
Rien que ça, c’est pas normal ! :thinking:

Si je reconfigure le dashboard Maison (manuel) par défaut via le compte admin.
Je me déconnecte et me reconnecte avec un autre compte, je vois systématiquement default dans le tableau de bord du profil de ce compte utilisateur.

Pour info, cette manipulation est effectuée sur le même navigateur.

:sweat_smile:


Recommence ta méthode (par l’utilisateur) ou la mienne (par la configuration) et accède au moins une fois au tableau de bord.

Ça semble fonctionner ainsi…

@Clemalex, tu es sûr car chez moi, si je me déconnecte (par exemple pour changer d’utilisateur), je reperds mon dashboard par défaut.
C’est bizarre, j’ai l’impression que la sauvegarde du profil ne se fait pas. J’ai modifié le thème du profil Admin pour passer en sombre et lorsque je me reconnecte il est repassé en auto.

Je ferais plus de tests ce soir, mais ça marchotais

1 « J'aime »

En fait, j’y arrive sur l’application mobile, 1/20, puis si tu te déconnectes et te reconnectes ça perds le réglage…

@Sylvain_G : Bravo d’avoir découvert un bug !

A voir s’il existe une issue dans le github (frontend) , sinon il faut que tu l’a crée :grin:

L’issue existe peut être seulement en mode storage Ah bah non, car je suis en full graphique sur mon RPi de test…