Mettre une image perso dans une carte

[Alexof]

Mon. problème

Bonjour,
comme mon titre le dit, j’aimerai intégrer des images perso sur mes cartes comme une photo du salon en tête de page sur ma carte de commande.
J’ai bien essayé de mettre une image dans le répertoire www mais je dois pas mettre le bon chemin d’accès car ca ne fonctionne pas ?
Je crois que j’ai besoin d’un bon tuto pour y arriver,
merci d’avance

Ma configuration

---

Texte à remplacer par votre configuration

Comment récupérer ma configuration :
Dans votre HA, Menu latéral Paramètres > Système > Corrections puis les trois petits points en haut a droite > Informations Système puis une fois en bas Copier

---

[anon41081891]

Avec button-card :

• background-image: url(/local/images/entree.png)

Image placée dans le répertoire « www » et un sous-répertoire « images »

[WarC0zes]

Bonjour @Alexof,
suivant la carte que tu va utiliser , il y aura plusieur facon.
Le principe est que ton dossier /www/, doit être nommer /local/ pour le chemin dans HA.
exemple: /www/images/ sera /local/images/ dans le code d’un carte.

[Alexof]

Merci,
ca fonctionne, par contre je n’arrive pas à mettre mon image en background comme tu me le montre yalec38.

[Alexof]

Voici le message que j’ai:
L’éditeur visuel n’est pas pris en charge pour cette configuration:

• La clé « header.background-image » n’est pas attendue ou non prise en charge par l’éditeur visuel.
  Vous pouvez toujours modifier votre configuration en YAML.

[anon41081891]

Il faudrait que tu mettes le code de ta carte parce que là, je ne vois pas à quoi correspond ton header

[Alexof]

Voila:

entities:
  - entity: cover.shellyswitch25_3494547a7ad6
  - entity: switch.shelly1_98cdac0c2e05
title: Salon
state_color: true
header:
  type: picture
  image: /local/images/salon.png
  tap_action:
    action: none
  hold_action:
    action: none

[anon41081891]

Mets /local/images/salon.png entre guillemets :

entities:
  - entity: cover.shellyswitch25_3494547a7ad6
  - entity: switch.shelly1_98cdac0c2e05
title: Salon
state_color: true
header:
  type: picture
  image: "/local/images/salon.png"
  tap_action:
    action: none
  hold_action:
    action: none

[Alexof]

C’est ok pour l’image qui apparait bien en en tête mais je n’arrive pas a la mettre en arrière plan comme sur ton exemple de ton premier message…

[anon41081891]

Je passe par des cartes button-card :

GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant

Avec cette carte custom, tu pourras faire ce que tu veux. Ca parait un peu complexe au départ mais une fois prise en main, cette carte est super intéressante.

Tu trouveras ici une exemple pas-à-pas. Si ça t’interêsse, prend le temps de faire ta carte à partir de cet exemple et je te dirai comment y mettre ton image de fond.

Besoin d'aide sur une carte

On va maintenant ajouter les entités devant être commandées par les boutons, des icônes et le comportement lors du clic sur ces boutons… [image] D’ores et déjà en sélectionnant définissant les entités, on va constater qu’en cliquant dessus les icônes vont devenir jaunes. type: custom:button-card aspect_ratio: 2/1 custom_fields: couloir: card: type: custom:button-card name: COULOIR styles: card: - background-color: rgba(255,255,255,1.0) - bo…

[Alexof]

c’est genial, je vais tester le truc dés que possible et je te tiens au jus pour le resultat…

[Alexof]

au risque de paraitre un boulet, je ne sais pas comment generer la carte button-card de GitHub

[Krull56]

Hello

Il faut dans un premier temps installé Hacs. Ce sera plus facile pour installer les custom-components.

Installer HACS sur Home Assistant et profiter d’un magasin alternatif. (hacf.fr)

Puis t’as plus qu’à suivre la procédure :
custom-cards/button-card: Lovelace button-card for home assistant (github.com)

@+

[Alexof]

Salut,
voila, j’ai bien installé HACF qui apparait desormé dans mon bandeau lateral mais lorsque je clique dessus je n’accede pas a l’interface HACS, je ne comprend pas pourquoi?

[WarC0zes]

Bonjour,
un peut de lecture Menu non disponible dans HACS

[Alexof]

ok j’ai compris le principe et j’ai bien trouvé le moyen de telecharger « button-card » que je voulais mais maintenant je n’arrive pas a le trouver pour l’inserer dans un tableau de bord

[WarC0zes]

Tu as bien actualiser le navigateur ?
Après ca s’utilise comme n’importe quelle carte.

[Alexof]

redemarrage de HA effectué

[Alexof]

je ne le retrouve pas dans la liste des cartes lorsque je veux la rajouter…

[Krull56]

@Alexof

mais maintenant je n’arrive pas a le trouver pour l’inserer dans un tableau de bord

Y a rien à trouver
Comme expliqué par @WarC0zes , ça s’utilise avec presque toutes les cartes. Il faut passer une carte de base en édition yaml et saisir les lignes de code nécessaires

Exemple