Button card d'après un Github

Bonjour,

Etant en vacances je me suis mis sur mon dashboard !
En farfouillant j’ai trouvé des cards qui me plaisent sur ce github suivant:

Etant un peu novice, j’avais en tête de recopier le code qui se trouve dans www/custom-lovelace/button_card_templates.yaml pour avoir ce bouton :
monitoring

Je me suis donc dirigé vers mon dasboard pour coller ce code dans un bouton de façon manuel et là il me dit « No card type configured »
Je pense que je n’ai pas copié assez d’éléments dans HA !
J’ai regardé il n’y a pas d’image à coller, il y a un script que je n’arrive pas aussi à trouver dans sa configuration.
Pouvez vous me donner quelques conseils pour me permettre de le faire svp ? (j’ai bien toutes les intégrations pour les cards et autres…)

De plus j’avais l’idée aussi (mais je pense que cela sera dur à faire :stuck_out_tongue: ) de brancher mon diffuseur sur un eprise NOUS en zigbee et d’avoir un bouton avec un le popup de la minuterie pour dire xx min puis on coupe la prise donc le diffuseur…un peu comme ceci :
controle-ventilateur-et-diffuseur

Et dans la même idée avoir une autre prise NOUS pour permettre de recharger mon téléphone et dès que celui ci est à 100% on coupe la prise. ainsi avoir un bouton pour allumer la prise et faire une automatisation pour couper dès que c’est à 100%. Est ce réalisable et faisable ?

Je sais beaucoup de questions…mais bon j’essaie de faire une bonne fois pour toute ce dasboard et d’implémenter les choses…

En tout cas merci de votre patience et de votre aide!
Bonne soirée.


[center]## System Information

version core-2024.8.2
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.33-haos
arch x86_64
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 1389
Downloaded Repositories 21
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.4
update_channel stable
supervisor_version supervisor-2024.08.0
agent_version 1.6.0
docker_version 26.1.4
disk_total 30.8 GB
disk_used 8.2 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 Matter Server (6.4.1), Samba share (12.3.2), Studio Code Server (5.15.0), Terminal & SSH (9.14.0), Cloudflared (5.1.18), Samba Backup (5.2.0), go2rtc (1.9.4), Mosquitto broker (6.4.1), Zigbee2MQTT (1.39.1-1), Node-RED (18.0.5)
Dashboards
dashboards 4
resources 15
views 12
mode storage
Recorder
oldest_recorder_run 18 août 2024 à 09:02
current_recorder_run 20 août 2024 à 15:28
estimated_db_size 40.35 MiB
database_engine sqlite
database_version 3.45.3
[/center]

Bonjour,
il faut installer button-card à partir de HACS.
Pour les button_card_template, il se place dans ton fichier du tableau de bord. Pour y accéder, il faut cliquer sur le crayon dans le dashboard, puis les 3 points et editeur la configuration.
image

Il faut mettre le code au tout en haut du fichier, avant view:
exemple ( title est un template ):

button_card_templates:
  title:
    color: rgba(32,32,32,0.8)
    color_type: label-card
    show_icon: false
    styles:
      card:
        - padding: 0
        - box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5)
        - border: 1px rgba(0,0,0,1.0) outset
      name:
        - border-radius: 0.4em 0.4em 0 0
        - padding: 0.5em
        - width: 100%
        - color: darkgrey
        - font-weight: bold
      grid:
        - grid-template-areas: '"i" "n" "buttons"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
      custom_fields:
        buttons:
          - background-color: rgba(0,0,0,0.3)
          - margin: 0
          - padding: 0.5em

Après comme tu débutes, ce n’est pas la carte la plus simple à utiliser.

Tout ce que tu montres peut se faire sans souci avec custom:button-card mais tu cherches à recopier du code sans chercher à en comprendre le fonctionnement et là, tu vas droit dans le mur.
Déjà, pour les deux ou trois boutons que tu cherches à faire, il n’y a pas d’intérêt à utiliser de template. A mon sens, il faut commencer par lire la documentation fournie avec custom:button-card car elle est très riche. Tu trouveras dedans un exemple complet de code pour le monitorage du RPI qui te permettra d’aborder plus sereinement les custom_fields (partie gauche du premier bouton que tu souhaiterais reproduire). Une fois que tu auras compris le fonctionnement des custom_fields tu pourras t’attaquer à ton diffuseur et tu verras que ce n’est pas compliqué à faire une fois les entrées nécessaires créées.
Pour ton téléphone, tu fais un mix entre affichage et automatisation : tu peux faire un bouton pour allumer et éteindre ta prise NOUS, afficher le pourcentage de charge de manière dynamique, afficher la consommation liée à la charge, etc. mais il te faudra une automatisation pour couper la prise une fois ton téléphone entierement chargé.
Une fois que tu te seras familiarisé avec custom:button-card, tu trouveras pas mal d’exemples sur le forum et si tu as besoin d’aller plus loin, il y aura du monde en capacité à t’aider.

1 « J'aime »

Hello Cleya et WarC0zes,

Merci pour vos réponses…il est vraiq ue je me suis dit que ce serait plus rapide de faire un copier-coller…mais voilà comme dis le dicton, ne pas aller plus vite que la musique!
Je vais donc m’attarder à faire des card simple pour ensuite les enrichir…
Je vais y aller par étapes, bouton de base, puis mettre les différents popup ou autres autour du bouton puis finaliser par la customisation !

Merci encore !

Tu peux attaquer avec custom:button-card, cette carte te permettra de faire probablement tout ce que tu veux et même plus, mais effectivement, commence par une utilisation plus basique de la carte et sers toi de la documentation qui est riche.

1 « J'aime »