Super dashboard félicitations
Effectivement tu nous donnes l’eau à la bouche. Mais il faut partager. GitHub est parfait pour ca.
1 « J'aime »
Le code template se trouvant dans le fichier 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 d’un bouton à ajouter dans le ui-lovelace:
- 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
Commentaire : bien modifié le sensor et le include. Pour chaque thermomètre, je crée spécialement un popup appelé temperature_quelquechose.yaml
Le dernier, c’est le code complet qui sert a faire le popup de la température et humidité du capteur a mettre dans le dossier popup. Ne pas oublier d’adapter les sensors présent dans ce code. Il ne faut pas bouger l’indentation.
action: call-service
service: browser_mod.popup
service_data:
title: Thermomètre Chambre William
deviceID: this
card:
type: custom:stack-in-card
cards:
- type: entities
state_color: true
entities:
- entity: sensor.temperature_chambre_william
- entity: sensor.humidity_chambre_william
- entity: sensor.battery_chambre_william
- type: custom:mini-graph-card
entities:
- color: '#385581'
entity: sensor.temperature_chambre_william
- color: green
entity: sensor.humidity_chambre_william
y_axis: secondary
align_state: left
line_width: 3
height: 200
group: false
points_per_hour: 10
hour24: true
hours_to_show: 24
show:
{fill: fade, icon: false, name: false, state: true,
name_adaptive_color: true, labels: true, legend: true, average: true, extrema: true, points: false}
tap_action:
action: none
Je ferai un repo github de ma config quand je serai un peu plus avancé
1 « J'aime »
J’ai vu la même chose. Il faut que je me renseigne sur ce framework
@Clemalex a répondu, mais oui ! C’est possible et j’utilise ça. J’ai un compte tablet qui est utilisé par la tablette avec un theme assigné et le dashboad
J’ai pas fait grand chose par rapport à matt8707, le créateur
Bonjour ! Je vous montre l’avancement à l’heure actuel mon projet.
Mon Dashboard :
Je vais décrire ce que j’ai fait, ajouté et avec quoi mais je vais pas expliquer vraiment le comment. Je vais procéder par chaque catégorie et celles les plus intéressantes.
Media :
J’avais eu un problème sur la fonction du dernier élément ajouté sur plex et j’ai trouvé comment le faire le voici.
Il y a une ligne de code :
"[[[ return 'url(' + states[entity.entity_id].attributes.data[1].fanart+ ')'; ]]]"]
que j’ai remplacé par :
"[[[ return 'url(' + states[entity.entity_id].attributes.data[1].poster + ')'; ]]]"]
J’ai juste remplacé fanart par poster
Pour rappelle Media est une swiper card. J’ai ajouté mes googles home et également Spotify en tant que media_player [ cf Spotify Integration ]
A ce Spotify, j’ai ajouté un popup pour lancer mes playlists sur mes google homes éteints ou sur la version web de spotify quand elle est allumée. On peut contrôler le son, skip la musique, etc… avec ce popup. [ cf Spotify Lovelace Card ]
J’ai jouté également un popup sur mes google home pour affiché la commande du media_player sur le hold_action.
La fonctionnalité prévue de base, c’est de montrer la media_player en cours à la place du dernier ajout sur plex.
Les ordinateurs :
J’ai ajouté mes ordinateurs. La différence avec Mattias_Persson, c’est que lui a un imac, il fait des command ssh pour récupérer les stats et le contrôler mac. J’ai mis en place la fonctionnalité des deux PC chez moi avec IOT Link qui fonctionne avec MQTT
Je dois terminer le popup.
Il faut que je corrige le uptime qui doit être en format « humain » ex: « quelques secondes » / « quelques minutes » / « 30 minutes » / « 2 heures ».
Sidebar :
Hormis la température de la maison. C’est des fonctionnalités de base prévu le design. Je récupère les différents sensors météo grâce à l’intégration de Météo-France. Pour le température de la maison, c’est un sensor average de mes thermomètres
Sidebar information :
Hormis faire le récapitulatif de mes problèmes sur ce popup, j’ai pas grand chose à dire.
Problèmes :
- Watchtower ne fonctionne pas ? J’ai des problèmes d’update de HA avec le supervisor.
- Problème d’affichage sur le débit descendant et montant du rpi
- Problème de récupération du la mémoire ram utilisé par le docker home assistant
- Lors de mon test, j’arrive pas à récupérer la mémoire ram et le stockage de la tablette. (Tablette que je n’ai pas encore. Mon téléphone me sert de test pour fullykiosk)
Maison :
Le bouton des présences se base sur le gps des app android de HA. En cliquant dessus, ça ouvre un popup avec l’historique des présences, présence du wifi et la position GPS du téléphone et un find my phone.
Le bouton Partir, éteint juste mes lumières à cet instant. A voir, si je peux éteindre la TV connectée Samsung ou autre. La petite feature sympa en plus du bouton, c’est que la tablette joue un fichier mp3 qui est tts qui dit au revoir de manière aléatoire, quand il est cliqué : « Au revoir », « A tout à l’heure », « A plus », « Passe un bon moment »…
La boutons Maison ne fait rien d’intéressant. De base, il est prévu par Mattias_Persson d’activer une scène qui allume ces lumières. Cependant, je n’ai pas trop d’intérêt à cet instant.
Les fonctionnalités de bases qui me restent à ajouter ou à corriger avec ce design ? :
- Les notifications automatique sur le téléphone pour surveiller le home assistant. Nouvelle version de HASS, problèmes, etc…
- Le find my phone qui fonctionne a moitié. Je reçois une notif mais pas de son sur le téléphone pour le retrouver dans la maison.
- Suivi consommation électrique
(quasi fini)
Idée de nouvelles fonctionnalités :
- Ajouter un curseur de volume sonore des ordinateurs sur le popup
- Ajouter bouton pour accéder aux appareils connectés et les batteries des sensors, donc des menus ?
- Stats simplifiées de mon serveur principal ?
- Prise en charge des caméras notamment celle de tablette qui sera positionnée à l’entrée.
- Ajout de points indicateurs sur les swiper card pour connaitre la position de la swipe card.
- Tracker les timers de Google Home.
- Suivi consommation chauffage
- Automation de backup et création avec un bouton quelque part dans le dashboard
Je publierai ma config sur github dans pas longtemps !
3 « J'aime »
Très sympa ton dashboard ! J’en suis pas encore au choix du dashboard mais je sens que je vais y passer des heures 
2 « J'aime »
Merci ! J’y passe des jours entiers personnellement
J’espere que tu fera un tuto, du debut, car ce serait super d’avoir les infos de ce qu’il faut installer comme plug-in, comment les installer, etc… en partant de rien (d’un simple dashboard)
Super travail, continue… et merci a toi pour les infos a venir !
Je pourrais le faire mais ça demande énormément du temps. Peut être que le compromis ça serait de le faire en vidéo, voir un live 
Super boulot, moi je suis preneur pour avancer sur ma configuration aussi
J’adore le looking de ton dashboard. Encore bravo
1 « J'aime »
Bonjour,
Je me suis basé sur le même design, et je n’ai moi aussi changé que peu de choses.
Je créerai mon propre sujet quand j’aurai un peu de temps, mais en attendant, si jamais ça donne quelques inspirations sur les détails :
- en bas, temps de trajet travail, temps tv allumée sur la semaine, temps pc allumé sur la semaine, et dernier capteur de mouvement activé.
- à gauche (Poub. Recycl), diverses informations en live grâce à une carte entity filter dans une carte button-card. (fenêtre ouverte, fuites, jours de poubelles, infos aspirateur roomba, douche en cours…
- les 4 minis cases avec volume et power sont affichées quand la tv samsung est allumée. Si éteinte, ça m’affiche « Samsung Tv » sur un seul bouton de taille normale.
- Si la tablette n’est plus alimentée, un gros carré rouge est visible en haut, histoire de ne pas oublier de rebrancher.
Si besoin d’info, n’hésitez pas 
2 « J'aime »
Très joli, j’aime beaucoup le bouton avec les 4 mini cases avec volume et power.
C’est pratique à utiliser en tactile ?
@Pozzi @stban1983
Bonjour, pour les 4 boutons je passe par l’intégration Samsung tv, ça me permet de contrôler via un media player le son et on off. Pour le son c’est quasi instantané, pour le power je l’ai mis sur un appui long pour éviter les extinctions intempestives.
Pour le temps passé sur la TV et le pc, voici un exemple du sensor tv :
- platform: history_stats
name: Hours TV has been on last 7 days
entity_id: media_player.samsung_tv
state: "on"
type: time
duration:
days: 7
end: "{{ now() }}"
1 « J'aime »
Bonjour,
Je suis nouveau dans le mode de HA et je suis vraiment fan du design HomeKit.
Est-il possible de connaître la marche à suivre pour mettre en place un tel design ?
Merci et félicitations
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é