Ajout d'icone pour dashboard

Entraide Home Assistant
,
1

Bonjour,

Je débute tout juste sur home assistant et je suis maintenant à l’étape de la création d’un tableau de bord.
Après quelque recherche, j’aurais aimer importer des icones dans HA mais j’ai peur de faire des bêtises.
j’aimerais importer ces icones:
https://www.flaticon.com/authors/kiranshastry/gradient

je crois comprendre que je dois les télécharger puis les placer dans un dossier www/config.
J’ai donc téléchargé file editor mais je ne vois pas de « www/config »
SI vous avez un tuto ou si vous pouvez m’aiguiller je suis preneur.

De plus, si il y a des bonnes pratiques je suis preneur aussi :stuck_out_tongue_closed_eyes:
Merci d’avance

Ma configuration

[center]## System Information

version core-2024.5.5
installation_type Home Assistant OS
dev false
hassio true
docker true
user root
virtualenv false
python_version 3.12.2
os_name Linux
os_version 6.6.28-haos-raspi
arch aarch64
timezone Europe/Paris
config_dir /config
Home Assistant Community Store
GitHub API ok
GitHub Content ok
GitHub Web ok
GitHub API Calls Remaining 5000
Installed Version 1.34.0
Stage running
Available Repositories 1392
Downloaded Repositories 4
HACS Data ok
Home Assistant Cloud
logged_in false
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Home Assistant Supervisor
host_os Home Assistant OS 12.3
update_channel stable
supervisor_version supervisor-2024.05.1
agent_version 1.6.0
docker_version 25.0.5
disk_total 219.4 GB
disk_used 5.9 GB
healthy true
supported true
board rpi4-64
supervisor_api ok
version_api ok
installed_addons Terminal & SSH (9.14.0), Mosquitto broker (6.4.1), Zigbee2MQTT (1.38.0-1), File editor (5.8.0)
Dashboards
dashboards 4
resources 4
views 3
mode storage
Recorder
oldest_recorder_run 26 mai 2024 à 05:48
current_recorder_run 3 juin 2024 à 19:23
estimated_db_size 37.70 MiB
database_engine sqlite
database_version 3.44.2
[/center]
2

Bonjour,

le dossier www dans /config est a créer.
image

Place t’es icones dans /config/www/icones/.
Suivant les cartes utiliser, ta une option entity_picture des fois, tu renseignera le chemin.
/local/icones/icones.png ( chemin réelle /config/www/icones/, chemin a utiliser /local/icones/ )

Sinon tu peut utiliser customize. Dans ton configuration.yaml:

homeassistant:
  customize:
    thermostat.family_room:  #entité a customiser
      entity_picture: /local/icones/nest.jpg
    switch.wemo_switch_1:
      entity_picture: /local/icones/toaster.jpg

Si tu veut tuiliser des templates pour les icones, faut utiliser en plus custom-ui qui s’installe a partir de HACS.

un petit tuto:

3

Bonjour @WarC0zes ,

Il n’y a pas besoin de créer de dossier « config », le dossier « www » peut-être mis directement à la racine de « homeassistant » :

image
image336×708 9.45 KB

4

Salut,
Je parle pas de créer le dossier config.

Dans file editor homeassistant = /config.

File editor 5.7.0:

  • Use new location for accessing the Home Assistant configuration folder using /homeassistant
5

image

image
image336×708 10.1 KB

Ca prête un peu à confusion…

J’ai donc téléchargé file editor mais je ne vois pas de « www/config »

Le but était juste de préciser à @baloo53 qu’il n’y avait pas à créer de répertoire « config » avec File Editor mais juste un répertoire « www » directement à la racine.

1 « J'aime »
6

Bonjour et merci.

Vous m’avez un peu perdu hahah Donc si je comprends bien je dois juste créer un dossier nommé « www » puis dans ce dossier je peux mettre des dossiers icône image etc?

1000006601
10000066011080×2400 202 KB

7

Bonjour, oui c’est cela.

Et pour appeler tes icones ou tes images, il faudra faire comme ceci : /local/icones/monicone.png ou /local/images/monimage.png

8

D’accord merci je vais lire les tuto plus haut pour savoir exactement se que vous voulez dire par les appeler. Je suis vraiment néophyte hahha
Pour l’instant j’ai juste créé quelques scénarios et ajouter des cartes type bouton pour me faire la main

9

J’ai fais un test avec une carte bouton mais j’ai du faire une erreur. J’ai pas l’image qui apparaît :confused:

1000006607
10000066071080×2400 211 KB

1000006608
10000066081080×2400 224 KB

J’ai essayé aussi sans « www » et sa ne fonctionne pas

10

Je suis perdu même dans file editor sa m’inquiète que c’est pas bon je crois :confused:

11

Faut des images en .jpg, .png ou .svg.

image
image334×567 8.36 KB

Faut utiliser une carte qui accepte un entity_picture pour utiliser un chemin d’image ( toute ne le permette pas ). Tu ne peut pas utiliser un chemin d’image dans icones. Ta mushroom template, button-card qui le supporte.

exemple:
image

                type: custom:button-card
                entity: button.diskstation_reboot
                color_type: icon
                aspect_ratio: 4.55/1
                show_entity_picture: true
                entity_picture: /local/images/nas ds214+3.png
                name: DS214+<br/>Reboot
                color: rgb(68, 115, 158)
                layout: icon_name
                size: 55%
12

Alors je viens de mettre une image .png er j’ai créé une carte bouton
Voilà ce que sa donne

1000006624
10000066241080×2400 205 KB

1000006625
10000066251080×2400 230 KB

13

Cette fois je vous bien l’image sur fileditor mais sa reste bloquant sur les cartes :confused:

14

Tu ne peut pas utiliser un chemin d’une image, dans la case icone d’une carte.

Si tu veut un bouton avec une image, utilise la carte button-card. A installer a partir de HACS.

un exemple, avec une image.

15

Haaaaaaa d’accord excuse moi je comprenais pas. Car sur home assistant quand je vais sur mon tableau de bord puis dans ajouter une carte le premier que je vois c’est « button card » je pensais que tu parlais de celà du coup.
Je vais installer ça du coup

1 « J'aime »
16

Non, c’est buton et pas button-card

image
image640×530 17.5 KB

17

C’est bon je pense avoir trouvé. En revanche, on est obligé de passer via l’éditeur de code? (Yaml)
Je vais devoir apprendre un peu ça

18

OUi, la carte button-card ce fait quand YAML, il y a pas d’éditeur visuel. Après c’est une carte puissante, tu peut ton faire avec :wink:

Sur le github de button-card, tu as des exemples pour comprendre et toute la doc pour l’utiliser.

19

D’accord merci beaucoup de ton aide. J’ai plus cas apprendre :stuck_out_tongue:
Je vais trouver quelque tuto vidéo je pense :stuck_out_tongue:

20

Ta un tuto, avec vidéo sur le forum

1 « J'aime »