Pour bien commencer, lis le premier post du créateur :
Ensuite, son github :
Merci,
Le souci c’est que je débute et que mon anglais est très scolaire.
j’ai parcouru un peut le forum et le GitHub, mais néanmoins je ne vois pas par ou commencer.
c’est top mais je suis trop nul pour comprendre le début:
Le code template se trouvant dans le fichier button_card_template.yaml
ca se met ou? dans mon dossier * /config/www/community/button-card ?
merci en tout cas
button_card_template.yaml est à la racine du /config/ mais rien t’empêche de le mettre ailleurs
Pour t’explique très brièvement ce que fait le code que tu as cité.
Service('media_player', 'play_media', {entity_id: 'media_player.tablet', media_content_id: '/local/sound/on.m4a', media_content_type: 'music'}); }
else if (entity.state === 'on' && states['switch.fullykiosk_screensaver'].state === 'off') {
hass.callService('media_player', 'play_media', {entity_id: 'media_player.tablet', media_content_id: '/local/sound/off.m4a', media_content_type: 'music'}); } ]]]
ça joue un son on/off sur la tablette quand tu on/off une lumière ou autre.
styles:
custom_fields:
icon:
[top: 11.5%, left: 11.5%, width: 2.9vw, position: absolute, ]
circle:
[top: 8.5%, left: 56.2%, width: 3.5vw, position: absolute, letter-spacing: 0.03vw, fill: '#9da0a2']
name:
[top: 57.7%, left: 11%, line-height: 2vw, position: absolute]
state:
[top: 74%, left: 11%, line-height: 2vw, position: absolute]
card:
[font-family: Sf
Ici, c’est juste la description esthétique du template du bouton
Concrètement, le fichier button_card_template.yaml décrit le design de bouton pour en faire des templates, comme l’indique son nom. Dans l’ui lovelace, ce fichier est include une fois vers le début et ensuite pour adresser le template à un bouton-card, tu utilise l’attribut template et tu lui adresse une clé en lien avec ton bouton_card_template.yaml
Exemple concret :
#################################################
# #
# GROUP CHAMBRE #
# #
#################################################
- type: custom:button-card
entity: light.chambre
name: GROUP
style:
top: 76.2%
left: 23.8%
width: 47.7%
custom_fields:
icon_hue: >
[[[ const state = entity.state === 'on' ? 'animate' : null;
return `<svg viewBox="0 0 50 50"><style>@keyframes animate{0%{transform: scale(0.85);}20%{transform: scale(1.1);}40%{transform: scale(0.95);}60%{transform: scale(1.03);}80%{transform: scale(0.97);}100%{transform: scale(1);}}.animate{animation: animate 0.8s; transform-origin: center;}</style>
<path fill="#9da0a2" d="M27.4 47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0 .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8 0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0 1.7 0 .1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18 3.2-18.8.1-.4.1-.5.1-.7"/>
<path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M14.1 15.3c3.4-.3 7-.4 10.9-.4 3.8 0 7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5 38.9 6.5 38.9 6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0 .5-.1 2.5 2.1 8.2 0 .3.3.8.7 1.1z"/></svg>`; ]]]
styles:
custom_fields:
icon_hue:
[top: 11%, left: 4.5%, width: 3.05vw, position: absolute]
template: light
Comment tu peux le voir à la fin du code, il y a le template: light qui est utilisé
Tu glisses tout tes fichiers du repo github dans ton /config/ (je te conseille de travailler sur un home assistant propre et frais) .
Tu commentes toutes les lignes du fichier ui-lovelace après la ligne 47. Tu décommente les sections que tu veux travailler et tu fais ça de manière progressive. Comme ça, tu vas commencer à comprendre les interactions entre les automations, les switchs etc…
1 « J'aime »
ok merci beaucoup pour ta gentillesse. je vais regarder ça.
Exactement,
D’ailleurs mon repo de ma config basée sur la sienne devrait arrivée d’ici peu de temps
Merci pour l’info j’ai hate de voir ton repo également.
Bonjour, est-ce que vous auriez le code pour les thermomètres svp ?
Je rencontre un problème avec par ex mes ampoules hue color quand je clique sur ma card elle ne se tourne pas, je suppose que c’est le popup qui ne marche pas et je n’ai pas non plus le sensor avec le slider qui permet d’augmenter/diminuer l’intensité.
il n’y a que le statut, la mise sous tension et le pourcentage actuel de l’intensité de l’ampoule.
J’ai pourtant installé/réinstallé via HACS : le mod_card, browser_mod et le button_card, est-ce que vous auriez une idée de mon souci ?
Merci pour votre aide
Bonjour, merci pour les conseils j’ai fait de même (en créant une autre VM à côté et bosser tranquillement ) mais je n’ai pas le comportement des popup cards qui se retournent ou intéragissent avec mon HA, je n’arrive pas non plus à avoir la présentation via la « slider bar » à gauche qui permet d’avoir les remontées des statut des lumière par ex, j’ai dû me louper quelque part si vous avez une idée ?
j’ai également gardé la rubrique crisis information « covid » dans la side bar mais c’est un custom component pour les suedois (je cherche l’équivalent en français)
Le code thermomètre à mettre à la fin du button_card_template.yaml :
thermometre:
template:
aspect_ratio: 1/1
show_state: true
show_icon: false
state:
- value: 'on'
styles:
card: [background-color: 'rgba(255, 255, 255, 0.8)']
name: [color: 'rgba(0, 0, 0, 0.6)']
state: [color: 'rgba(0, 0, 0, 0.6)']
tap_action:
ui_sound: |
[[[ if (entity.state === 'off' && states['switch.fullykiosk_screensaver'].state === 'off') {
hass.callService('media_player', 'play_media', {entity_id: 'media_player.tablet', media_content_id: '/local/sound/on.m4a', media_content_type: 'music'}); }
else if (entity.state === 'on' && states['switch.fullykiosk_screensaver'].state === 'off') {
hass.callService('media_player', 'play_media', {entity_id: 'media_player.tablet', media_content_id: '/local/sound/off.m4a', media_content_type: 'music'}); } ]]]
styles:
custom_fields:
icon:
[top: 11.5%, left: 11.5%, width: 2.9vw, position: absolute, ]
circle:
[top: 8.5%, left: 56.2%, width: 3.5vw, position: absolute, letter-spacing: 0.03vw, fill: '#9da0a2']
name:
[top: 57.7%, left: 11%, line-height: 2vw, position: absolute]
state:
[top: 74%, left: 11%, line-height: 2vw, position: absolute]
card:
[font-family: Sf Display, letter-spacing: 0.05vw, font-weight: 400, color: 'rgba(255, 255, 255, 0.3)', font-size: 1.34vw,
background-color: 'rgba(115, 115, 115, 0.2)', border-radius: 0.8vw, box-shadow: none, transition: none]
Le code pour l’ui-lovelace.yaml
#################################################
# #
# temperature William #
# #
#################################################
- type: custom:mini-graph-card
entities:
- color: '#0066ff'
entity: sensor.temperature_chambre_william
style:
top: 23.9%
left: 23.8%
width: 47.7%
height: 47.7%
height: 325
line_width: 12
align_state: left
group: false
lower_bound: 18
points_per_hour: 2
hour24: true
hours_to_show: 12
show:
{fill: fade, icon: false, name: false, state: false,
name_adaptive_color: true, legend: false, points: false, labels: false}
- type: custom:button-card
entity: sensor.temperature_chambre_william
name: William
style:
top: 23.9%
left: 23.8%
width: 47.7%
hold_action: !include popup/temperature_chambre_william.yaml
tap_action: !include popup/temperature_chambre_william.yaml
custom_fields:
icon_lamp: >
<svg viewBox="10 5 50 50"><style>@keyframes animate{0%{transform: scale(0.85);}20%{transform: scale(1.1);}40%{transform: scale(0.95);}60%{transform: scale(1.03);}80%{transform: scale(0.97);}100%{transform: scale(1);}}.animate{animation: animate 0.8s; transform-origin: center;}</style>
<path fill="#9da0a2" d="M41.74 10.852v2h-7.75v-2zm-3.25 4.36h-4.5v2h4.5zm-4.5 6.36h7.75v-2h-7.75zm4.5 2.36h-4.5v2h4.5zm-4.5 6.36h7.75v-2h-7.75zM35.2 41.685A10.14 10.14 0 0 1 25.074 51.81a10.14 10.14 0 0 1-10.125-10.125c0-3.618 1.9-6.906 5-8.725V10.006c0-2.826 2.3-5.125 5.125-5.125s5.125 2.3 5.125 5.125V32.96c3.1 1.817 5 5.106 5 8.725zm-2 0c0-3.07-1.706-5.845-4.453-7.24l-.547-.278v-24.16a3.13 3.13 0 0 0-3.125-3.125 3.13 3.13 0 0 0-3.125 3.125v24.16l-.547.278a8.09 8.09 0 0 0-4.453 7.24c0 4.48 3.645 8.125 8.125 8.125s8.125-3.645 8.125-8.125zm-1.666 0a6.47 6.47 0 0 1-6.459 6.458 6.47 6.47 0 0 1-6.458-6.458 6.46 6.46 0 0 1 4.796-6.233l.37-.1v-22.23h2.583v22.23l.37.1a6.46 6.46 0 0 1 4.796 6.233zm-6.14-4.305c-.154-.684-.842-1.134-1.543-.974a5.31 5.31 0 0 0-4.158 5.207 1.29 1.29 0 0 0 2.58 0c0-1.277.902-2.41 2.147-2.7.692-.16 1.13-.85.974-1.543z"/>
</svg>
styles:
custom_fields:
icon_lamp:
[top: 11%, left: 4.5%, width: 3.05vw, position: absolute]
template: thermometre
Pour ton problème, envoie tes fichiers sources que j’y jette un oeil.
Pour le covid, regarde si tu as pas une api REST dispo et partagée par le ministère de la santé. Sinon, tu peux complètement mettre autre chose. Personnellement, c’est ce que j’ai fait
Le voici enfin, le repo de ma config : GitHub - KaoruKanon/homeassistant-config: Ma configuration home assistant
4 « J'aime »
Salut,
Pour IOTLink, je vais te décrire les étapes
- Tout d’abord sur ton PC Windows, tu as bien installé et configuré le fichier de config.
- Est-ce que tu as bien installé un serveur MQTT ? Par exemple Mosquitto broker, installé via le supervisor.
- Tu dois renseigner les logs du broker MQTT dans le home assistant
- Tu dois ensuite créer les capteurs et les scripts que tu as besoin. Je te laisse consulter le wiki à ce sujet. Tu peux aussi t’inspirer de ce que j’ai fait en regardant le fichier sensor et script de ma config
- Intégrer des capteurs et script dans ton ui-lovelace.
Petite astuce : Tu peux vérifier le contenu de ton broker MQTT avec un client windows. ça peut être utilise avec le wiki a côté pour regarder les valeurs envoyé par ton PC avec IOTLINK. C’est une interface graphique super simple d’utilisation.
Pour partager ton code, tu peux faire un pastebin
Pour la sidebar, j’avais chercher très longtemps le problème au début. Pour corriger ce problème de décalage, c’est très simple : Dans ton profil utilisateur en bas à gauche, il faut que tu actives le theme appelé « tablet ». Par contre, il faut que ton fichier themes.yaml soit présent dans le dossier include
Pour les fonts d’apple, tu peux trouver ça ici. Tu créer un dossier appelé fonts avec toutes les polices, que tu places dans le dossier www.
Pour ton dernier problème, il faut que j’y réfléchisse parce que d’après ton code, ça m’a l’air bon.
Salut, merci pour tes précieuses informations, finalement entre mon dernier post et celui pas mal de choses sont rentrés dans l’ordre pour la partie MQTT, mon pc communique bien j’ai bien les commandes de reboot, shutdown, les infos cpu, disque … c’est niquel, je suppose qu’il y’avait un temps de synchro.
Pour la partie logs à renseigner dans le data broker, je vois pas trop ou ça se fait …après je ne sais pas si c’est grave ou non de ne pas le mettre
Finalement j’ai donc un bouton SAM PC comme ci-dessous :
Mais quand je clique dessus, mon pc s’arrête, je ne sais pas si c’est le comportement attendu mais c’est un peu brutal, je sais que derrière cette card je fais appel à ton popup « computer_papa.yaml »
du coup j’ai toujours ce problème de popup qui n’apparait pas … j’ai même copié ton sources « custom_component » en écrasant celle d’origine, je me disais que ça se trouve c’était un problème avec la card, à noter que je suis en version HA 2020-12-7 je ne sais pas si ça afflue…
ci-dessous mes codes :
ci-joint mon code pour le « computer_papa.yaml » :
action: call-service
service: browser_mod.popup
service_data:
title: Sam ordinateur
deviceID: this
card:
type: entities
state_color: true
show_header_toggle: false
entities:
- entity: switch.computer_sam_book
name: Papa
secondary_info: last-changed
- type: custom:bar-card
width: 55%
height: 2em
decimal: 0
unit_of_measurement: '%'
positions: &pos
icon: outside
indicator: 'off'
name: outside
severity: &sev
- color: '#303435'
from: 0
to: 89
- color: '#6d2525'
from: 90
to: 100
entity_row: true
entities:
- entity: sensor.computer_sam_book_cpu_usage
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.computer_sam_book_cpu_usage
- entity: sensor.computer_sam_book_ram_usage
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.computer_sam_book_ram_usage
- entity: automation.macos_notification_motion_hall
- entity: sensor.computer_sam_book_uptime
name: Uptime
- entity: input_boolean.computer_sam_book_lock
- type: custom:bar-card
width: 55%
height: 2em
decimal: 0
unit_of_measurement: '%'
positions: *pos
severity: *sev
entity_row: true
entities:
- entity: sensor.computer_sam_book_disk_c_usage
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.computer_sam_book_disk_c_usage
- entity: sensor.computer_sam_book_disk_d_usage
tap_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.computer_sam_book_disk_d_usage
- type: custom:hui-element
card_type: horizontal-stack
style: |
#root {
justify-content: space-evenly;
margin: 1.4em -0.7em 0.7em 0;
}
cards:
- type: custom:button-card
name: >
<ha-icon icon="mdi:power-sleep"></ha-icon> Mettre en veille
tap_action:
action: call-service
service: script.computer_sam_book_suspend
template: name_action
- type: custom:button-card
name: >
<ha-icon icon="mdi:restart"></ha-icon> Redémarrer
tap_action:
action: call-service
service: script.computer_sam_book_reboot
template: name_action
une partie de mon ui-lovelace.yaml pour sam-pc :
#################################################
# #
# Computer SURFACE BOOK #
# #
#################################################
- type: custom:button-card
entity: switch.computer_sam_book
triggers_update:
['switch.computer_sam_book', 'input_boolean.sam_book',
'input_boolean.computer_sam_book_lock', 'script.home_leave']
style:
top: 37.9%
left: 31.31%
width: 10%
tap_action:
action: toggle
animate_locked: |
[[[ if (states['input_boolean.computer_sam_book_lock'].state === 'on' && states['input_boolean.sam_book'].state === 'off') {
this.shadowRoot.getElementById('lock').classList.add('locked');
window.setTimeout(() => { this.shadowRoot.getElementById('lock').classList.remove('locked'); }, 1100) } ]]]
hold_action: !include popup/computer_papa.yaml
custom_fields:
icon_imac: >
[[[ const state = entity.state === 'on' ? 'animate' : null;
return `<svg viewBox="0 0 50 50"><style>@keyframes animate{from{opacity: 0.5; transform: scale(0.6);}100%{opacity: 1;}}.animate{animation: animate 0.8s cubic-bezier(0.25, 1, 0.5, 1); transform-origin: center;}</style>
<path class="${state}" d="M31.9 44.5c-1-.3-1.9.4-1.9-3.7h-9.9c0 4.2-.9 3.4-1.9 3.7s-.2.7-.2.7h14.1s.8-.3-.2-.7zM47.6 4.8H2.5c-1.1 0-2 .9-2 2v30.1c0 1.1.9 2 2 2h45c1.1 0 2-.9 2-2v-30a1.95 1.95 0 0 0-1.9-2.1zm-.7 26.4H3.2V7.6H47v23.6z"/></svg>`; ]]]
icon_lock: >
[[[ const state = states['script.home_leave'].state === 'on' ? 'locked' : null;
if (states['input_boolean.computer_sam_book_lock'].state === 'on' && states['input_boolean.sam_book'].state === 'off') {
return `<svg viewBox="0 0 50 50"><style>@keyframes locked{from, to{transform: translateX(0);}10%, 30%, 50%, 70%, 90%{transform: translateX(-8%);}20%, 40%, 60%, 80%{transform: translateX(8%);}}.locked{animation: locked 1.1s;}</style>
<path id="lock" class="${state}" d="M8.2 22.6h2.4v-7.2C10.6 7.5 17.1 1 25 1s14.4 6.4 14.4 14.4v7.2h2.4V49H8.2m26.4-26.4v-7.2c0-5.3-4.3-9.6-9.6-9.6s-9.6 4.3-9.6 9.6v7.2"/></svg>`; } ]]]
styles:
custom_fields:
icon_imac:
[fill: "[[[ return entity.state === 'on' ? '#72757c' : '#9da0a2'; ]]]",
top: 8.5%, left: 11%, width: 3.3vw, position: absolute]
icon_lock:
[top: 11%, left: 73%, width: 1.7vw, position: absolute, fill: '#b0b3b6']
template: [‹ base ›, ‹ loader ›]
j’ai du mettre en commentaire " template: [‹ base ›, ‹ loader ›] " car sinon j’ai une erreur dans mon dashboard, je ne sais pas trop à quoi ça sert …
Merci pour le thème « tablet » je n’aurais pas trouvé sans toi !
Merci pour ton aide désolé pas pu répondre avant limité à 3 réponses en tant que nouveaux membres
Le data broker, il me semble que c’est utile que pour des commandes qui ont besoin comme la commande qui te permet d’envoyer des notifs au PC.
Comme pour les lampes, quand tu cliques simplement dessus ça éteint ou allume l’équipement.
Je pense que c’était pas précisé mais pour accéder à la couleur des lampes ou aux données du pc, tu dois faire un clique long sur la button-card.
Attention ! si ta button-card se trouve dans une swipe-card, le clique long ne marche pas bien sur PC, mais il marche bien sur tablette et téléphone. C’est pour cela que j’ai des double tap pour accéder au popup dans les button-card des swipe-card
Tu dois mettre le template: ['base', 'loader']. ça te fait comme quoi comme erreur précisément ?
Le base c’est vraiment la button-card toute simple, le carré blanc avec l’icone à gauche et le texte en bas, etc, comme son l’indique bien, c’est la base du design de la button-card. Le template loader, c’est une animation qui s’ajoute quand l’équipement s’allume, donc utile pour des choses qui mette du temps à démarrer (PC, TV, PS4).
A savoir que ce template loader fonctionne avec un fichier svg appelé loader.svg et doit se trouver dans le /config/www. Ce template fonctionne également avec deux automations. Dans le fichier automation tu as une section appelé LOADING. Tu as juste a modifier le switch.computer_kaoru par ton PC.
Merci je suis bête c’est effectivement un appui long qui permet de faire fonctionner la button card !
ça fonctionne !
Pour la partie : template: ['base', 'loader'] je viens de nouveau de tester avec les automations et loader.svg, j’ai une erreur en rouge :
et ci joint le code que j’ai en erreur dans mon ui-lovelace.yaml :
- type: custom:button-card
entity: switch.computer_sam_book
triggers_update:
['switch.computer_sam_book', 'input_boolean.sam_book',
'input_boolean.computer_sam_book_lock', 'script.home_leave']
style:
top: 37.9%
left: 31.31%
width: 10%
tap_action:
action: toggle
animate_locked: |
[[[ if (states['input_boolean.computer_sam_book_lock'].state === 'on' && states['input_boolean.sam_book'].state === 'off') {
this.shadowRoot.getElementById('lock').classList.add('locked');
window.setTimeout(() => { this.shadowRoot.getElementById('lock').classList.remove('locked'); }, 1100) } ]]]
hold_action: !include popup/computer_papa.yaml
custom_fields:
icon_imac: >
[[[ const state = entity.state === 'on' ? 'animate' : null;
return `<svg viewBox="0 0 50 50"><style>@keyframes animate{from{opacity: 0.5; transform: scale(0.6);}100%{opacity: 1;}}.animate{animation: animate 0.8s cubic-bezier(0.25, 1, 0.5, 1); transform-origin: center;}</style>
<path class="${state}" d="M31.9 44.5c-1-.3-1.9.4-1.9-3.7h-9.9c0 4.2-.9 3.4-1.9 3.7s-.2.7-.2.7h14.1s.8-.3-.2-.7zM47.6 4.8H2.5c-1.1 0-2 .9-2 2v30.1c0 1.1.9 2 2 2h45c1.1 0 2-.9 2-2v-30a1.95 1.95 0 0 0-1.9-2.1zm-.7 26.4H3.2V7.6H47v23.6z"/></svg>`; ]]]
icon_lock: >
[[[ const state = states['script.home_leave'].state === 'on' ? 'locked' : null;
if (states['input_boolean.computer_sam_book_lock'].state === 'on' && states['input_boolean.sam_book'].state === 'off') {
return `<svg viewBox="0 0 50 50"><style>@keyframes locked{from, to{transform: translateX(0);}10%, 30%, 50%, 70%, 90%{transform: translateX(-8%);}20%, 40%, 60%, 80%{transform: translateX(8%);}}.locked{animation: locked 1.1s;}</style>
<path id="lock" class="${state}" d="M8.2 22.6h2.4v-7.2C10.6 7.5 17.1 1 25 1s14.4 6.4 14.4 14.4v7.2h2.4V49H8.2m26.4-26.4v-7.2c0-5.3-4.3-9.6-9.6-9.6s-9.6 4.3-9.6 9.6v7.2"/></svg>`; } ]]]
styles:
custom_fields:
icon_imac:
[fill: "[[[ return entity.state === 'on' ? '#72757c' : '#9da0a2'; ]]]",
top: 8.5%, left: 11%, width: 3.3vw, position: absolute]
icon_lock:
[top: 11%, left: 73%, width: 1.7vw, position: absolute, fill: '#b0b3b6']
template: ['base', 'loader']
Merci
il se passe quoi quand tu fais un template: ['base'] ?
Sympa ta configuriton elle mérite d’être dans l’awesome list. Tu devrais ajouter les mots clés qui vont bien pour faciliter la visibilité dans GitHub.
1 « J'aime »