Salut,
Il ressemble à quoi ton ui-lovelace.yaml sur cette card ? et aussi les template thermometre et icon_thermometre se trouvant button_card_templates.yaml dans template
ui-lovelace.yaml:
- type: custom:button-card
entity: sensor.temperature_salon
name: Salon
hold_action: !include popup/temperature_salon.yaml
tap_action: !include popup/temperature_salon.yaml
custom_fields:
graph:
card:
entities:
- entity: sensor.temperature_salon
color: '#0066ff'
template:
- thermometre
- icon_thermometre
thermometre:
thermometre:
template:
- base
aspect_ratio: 1/1
show_state: true
custom_fields:
graph:
card:
type: "custom:mini-graph-card"
height: 800
upper_bound: 38
lower_bound: 18
line_width: 12
align_state: left
group: false
points_per_hour: 2
hour24: true
hours_to_show: 12
show:
name: false
icon: false
state: false
legend: false
labels: false
style: |
ha-card {
box-shadow: none;
background: transparent;
border-radius: 0;
}type: ''
styles:
name:
- z-index: 1
state:
- z-index: 1
custom_fields:
graph: [bottom: 0%, left: 0%, width: 100%, position: absolute, z-index: -1]
icon:
- width: 100%
- fill: "#9da0a2"
icon_thermometre:
icon_thermometre:
custom_fields:
icon: >
<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>
1 « J'aime »
Hello,
Merci @kaoru pour ces desgin.
@hugoKs3,
As-tu réussi à trouver le problème? Depuis la dernière maj, la problème a été amplifié avec la taille qui sort du « carré »?
Merci
Bonsoir,
J’ai un soucis d’affichage sur les cartes « température », j’ai beau chercher dans tout les sens je ne trouve pas mon erreur, surement un truc tout bête… j’ai volontairement mis une seule colonne pour le moment pour voir tout ce qui est écrit dans le cadre rouge, et j’ai essayé de vider le cache de mon navigateur.
Et merci pour ce dashboard, il est top 
Ci-joint mes codes:
ui.lovelace.yaml:
- type: grid
title: Temperature
view_layout:
grid-area: temperature
columns: 1
cards:
- type: custom:swipe-card
start_card: 1
parameters:
roundLengths: true
effect: coverflow
speed: 650
spaceBetween: 20
threshold: 7
coverflowEffect:
rotate: 80
depth: 300
cards:
- type: grid
columns: 1
cards:
- type: custom:button-card
entity: sensor.salon_temperature
name: salon
hold_action: !include popup/temperature_salon.yaml
tap_action: !include popup/temperature_salon.yaml
custom-field:
graph:
card:
entities:
- entity: sensor.salon_temperature
color: "#0066ff"
template:
- thermometre
- icon_thermometre
base.yaml:
base:
variables:
state: >
[[[ return entity === undefined || entity.state; ]]]
timeout: >
[[[ return entity === undefined || Date.now() - Date.parse(entity.last_changed); ]]]
light_color: >
[[[ return entity === undefined || entity.state === 'unavailable' ? 'var(--state-icon-color)' : 'var(--button-card-light-color-no-temperature)'; ]]]
aspect_ratio: 1/1
show_state: true
show_icon: false
state_display: >
[[[ if (variables.state === true) return 'Inactif'; ]]]
tap_action:
ui_sound_tablet: |
[[[
const screensaver = states['switch.lenovotab_screensaver'] === undefined ||
states['switch.lenovotab_screensaver'].state;
if (variables.state === 'off' && screensaver === 'off') {
hass.callService('media_player', 'play_media', {
entity_id: 'media_player.c2080cea_6627150a',
media_content_id: '/local/sound/on.m4a',
media_content_type: 'music'
});
}
if (variables.state === 'on' && screensaver === 'off') {
hass.callService('media_player', 'play_media', {
entity_id: 'media_player.c2080cea_6627150a',
media_content_id: '/local/sound/off.m4a',
media_content_type: 'music'
});
}
]]]
animation_card: |
[[[
const animation_speed_ms = 900;
const animation = `card_bounce ${animation_speed_ms}ms cubic-bezier(0.22, 1, 0.36, 1)`;
this.shadowRoot.getElementById("card").style.animation = animation;
window.setTimeout(() => {
this.shadowRoot.getElementById("card").style.animation = "none";
}, animation_speed_ms)
]]]
action: toggle
haptic: medium
styles:
grid:
- grid-template-areas: |
"icon circle"
"n n"
"s s"
- grid-template-columns: repeat(2, 1fr)
- grid-template-rows: auto repeat(2, min-content)
- gap: 2%
- align-items: start
name:
- justify-self: start
- line-height: 115%
state:
- justify-self: start
- line-height: 115%
card:
- font-family: Sf Display
- border-radius: 5%
- -webkit-tap-highlight-color: rgba(0,0,0,0)
- transition: none
- padding: 10%
- --mdc-ripple-color: >
[[[
return (variables.state === 'on' || variables.state === 'home' || variables.state === 'cool' || variables.state === 'fan_only') ?
'rgb(0, 0, 0)' :
'rgba(255, 255, 255, 0.3)';
]]]
- color: >
[[[
return (variables.state === 'on' || variables.state === 'home' || variables.state === 'cool' || variables.state === 'fan_only') ?
'rgba(0, 0, 0, 0.6)' :
'rgba(255, 255, 255, 0.3)';
]]]
- background-color: >
[[[
return (variables.state === 'on' || variables.state === 'home' || variables.state === 'cool' || variables.state === 'fan_only') ?
'rgba(255, 255, 255, 0.8)' :
'rgba(115, 115, 115, 0.2)';
]]]
extra_styles: |
#name, #state {
font-size: 1.34vw;
letter-spacing: 0.05vw;
}
/* portrait */
@media screen and (max-width: 1200px) {
#name, #state {
font-size: 2vw;
letter-spacing: 0.05vw;
}
}
/* phone */
@media screen and (max-width: 800px) {
#name, #state {
font-size: 3.1vw;
letter-spacing: 0.12vw;
}
}
@keyframes card_bounce {
0% {
transform: scale(1);
}
15% {
transform: scale(0.9);
}
25% {
transform: scale(1);
}
30% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
icons.yaml:
thermometre:
template:
- base
aspect_ratio: 1/1
show_state: true
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'}); } ]]]
custom_fields:
graph:
card:
type: custom:mini-graph-card
height: 800
upper_bound: 38
lower_bound: 18
line_width: 12
align_state: left
group: false
points_per_hour: 2
hour24: true
hours_to_show: 24
show:
name: false
icon: false
state: false
legend: false
labels: false
style: |
ha-card {
box-shadow: none;
background: transparent;
border-radius: 0;
}type: ''
styles:
name:
- z-index: 1
state:
- z-index: 1
custom_fields:
graph: [bottom: 0%, left: 0%, width: 100%, position: absolute, z-index: -1]
icon:
- width: 100%
- fill: "#9da0a2"
Bonjour, Bon je ne pense pas que sa vienne de là, mais sur ton image à la fin il y a
Type:’ ’
Je débute donc difficile, y’a t’il une erreur quand tu publie ta Card ?
1 « J'aime »
Faut supprimer le type:'' ca rien a faire la et ca doit te créer ton erreur.
Hélas ça ne règle pas le problème. le type:'' est aussi dans le code de @kaoru aoru, c’est la que je l’ai pris, je débute également donc pas facile, facile…
Quand je remplace le template « thermometre » par le template « base » dans le ui.lovelacela carte s’affiche correctement (sans le graph bien sûr) donc le soucis doit bien venir du code de mon template mais impossible de voir où. J’ai pourtant fait un copié collé du code de @kaoru.
Mystère…
@antyamok tu avais eu le même souci, comment avais-tu réglé le problème?
1 « J'aime »
Je viens de découvrir cette interface que je trouve top mais pas simple à adapter pour ma part .
Pouvez vous m’expliquer comment procéder pour changer les icones hormis ceux déjà présents . Par exemple je voudrais mettre un sapin …
Bonjour,
je voudrais aussi ajouter ce type de dashboard à ma configuration. Seulement j’ai déjà un dashboard pour nos téléphones et un autre pour mon pc.
ma question est comment faite vous pour implémenter celui-ci sans que cela modifie les autres déjà en places?
merci d’avance…
tu peux te servir de ce site pour trouver de nouvelles icones : https://materialdesignicons.com/
sur l’icone qui t’interesse tu fais « View SVG »
Tu peux créer autant de dashboard que tu veux dans les paramêtres mais il faudra peut être que tu passes ta configuration en mode « yaml » ou « storage » si ce n’est pas déjà fait.
Et pour me répondre à moi même j’ai trouvé mon erreur :
un custom-field au lieu de custom_fields dans mon ui-lovelace.yaml
j’ai bien réussi à implanter le dashboard, mais le thème « tablet » prend le dessus sur mes autres dashboard. Ce qui fait que cela ressemble plus à rien…
Qqun aurait déjà ajouter ce dashboard avec un autre qui mini du thème mushroom?
Je ne me sers pas du thème, j’ai juste rajouté une ou 2 lignes dans base.yaml (je suis parti sur une organisation comme matt8707 en séparant le button_card_templates.yaml en plusieurs fichiers, plus lisible je trouve) et comme ça je n’ai pas eu besoin de changer de thème.
Mais pour le moment comme j’ai une utilisation surtout sur téléphone je ne me sers pas de la sidebar ni du footer.
1 « J'aime »
Ok, mais tu as quand même du mettre le thème « tablet » ?
Mon problème c’est que quand j’ajoute les fichier et dossier de matt8707, dans mon profil sur l’onglet thème, je ne vois plus mes thèmes Mushroom, juste le thème tablet.
Il est visible dans mes choix de thèmes mais je ne m’en sers pas.
Pour que tes thèmes soit visible il faut que, dans configuration.yaml tu ajoutes :
frontend:
themes: !include_dir_merge_named themes
à adapter en fonction de l’endroit où sont rangé tes thèmes. Ils devraient ensuite tous être visible.
Après ça tu pourras choisir un thème par dashboard avec ce code :
theme: nomDuTheme
Bonjour à tous 
Nouvel utilisateur de HA, je découvre ce post et trouve l’interface vraiment sympa. J’ai lu pas mal de posts, mais je ne comprend strictement rien à tout ça, à comment intégrer ce genre d’interface. C’est hyper compliqué pour des gens qui ne comprennent pas car rien n’indique par quoi commencer, les étapes à suivre, etc… J’ai uploadé tous les fichiers dans mon dossier config mais évidemment ça ne lance plus HA qu’en mode sans echec car pleins d’erreurs dans les Yaml. N’y a t-il pas un tuto pas à pas en français pour ce genre de manip? HA ne compte pas simplifier la mise en place de thèmes proposés par la communauté car là c’est quand même hyper fastidieux quand on débarque je trouve. Merci par avance pour les retours
Alors non, il n’y a pas de « tuto » pas à pas.
HA est un système complexe, mais permet quand même de faire des interfaces fonctionnelles faciles à mettre en place par default (tu n’as pas connu il y a quelques années ce n’était pas possible)
Et pour ceux qui veulent des trucs plus « personnalisés », il faut mettre les mains dedans, regarder les examples, les vidéos, les sujets du forum.
Il faut comprendre comment fonctionne HA.
Et ce n’est qu’une fois fait que tu va pouvoir commencer à faire ce genre de Dashboard.
Désolé de couper tes illusions, mais un débutant ne parviendra pas immédiatement à faire ça, car un tuto pas a pas comme tu dis n’est pas faisable.
On a tous commencer par la, sans aucunes compétences, et on a appris au fur et à mesure, à force de lectures et d’essais.
Alors je t’invite à faire pareil, à prendre ton temps, à comprendre, et ça devrait bien se passer.
1 « J'aime »
Tu confonds thème et personnalisation. Un thème s’installe facilement avec hacs.
Une personnalisation si tu copies sans regarder ce qu’il y a dans les fichiers c’est normal de planter. Il faut être un peu curieux quand même.
Pat exemple si tu copie un fichier yaml et qu’il fait appel à un plugins que tu n’as pas ça ne risque pas de marcher.
1 « J'aime »
Salut à tous, je up le topic.
Merci pour le partage de ta conf.
J’essaye actuellement d’intégrer le code que tu as partagé pour la température mais rien à faire j’ai toujours le message "button-card template is missing " alors que .yaml est bien présent dans ma conf
Bonjour @kaoru
Je suis tres fan de ton dashboard et je voudrais me lancer pour tester ce board.
Mon petit soucis: je suis avec un dashboard en mode UI (je pense que c’est cela) hors, toi, ton dashboard est en mode yaml, si je ne dis pas de betise.
Peux-tu m’expliquer comment je dois configurer mon « configuration.yaml » pour acceder au deux sorte de dashboard, mais surtout sans rien perdre ou abimer de mon dashboard actuel.
Merci a toi pour toutes infos que tu pourra me fournir, j’ai hate de pouvoir tester.
Bonjour a tous, @kaoru merci pour ce super travail !
J’ai importé le dashbord, notamment ta partie sur les thermétre très sympa mais je ne comprend pas pourquoi ma case n’est pas remplit par le graph, j’ai un petit écart.
J’ai un peu tout checké et je ne trouve pas pourquoi ! Quelqu’un a t-il une idée ? A PRIOR @hugoKs3 tu as le même soucis, as tu trouvé la solution ?
UI LOVELACE :
- type: grid
title: Températures
view_layout:
grid-area: temperatures
columns: 1
cards:
- type: custom:swipe-card
start_card: 1
parameters:
roundLengths: true
effect: coverflow
speed: 650
spaceBetween: 20
threshold: 7
coverflowEffect:
rotate: 80
depth: 300
cards:
- type: grid
columns: 2
cards:
- type: custom:button-card
entity: sensor.mi_t4_temperature
name: Salon
# hold_action: !include popup/temperature_chambre_william.yaml
# tap_action: !include popup/temperature_chambre_william.yaml
custom_fields:
graph:
card:
entities:
- entity: sensor.mi_t4_temperature
color: '#0066ff'
template:
- thermometre
- icon_thermometre
thermometre :
thermometre:
template:
- base
aspect_ratio: 1/1
show_state: true
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'}); } ]]]
custom_fields:
graph:
card:
type: "custom:mini-graph-card"
height: 800
upper_bound: 38
lower_bound: 18
line_width: 12
align_state: left
group: false
points_per_hour: 1
hour24: true
hours_to_show: 24
show:
name: false
icon: false
state: false
legend: false
labels: false
style: |
ha-card {
box-shadow: none;
background: transparent;
border-radius: 0;
}type: ''
styles:
name:
- z-index: 1
state:
- z-index: 1
custom_fields:
graph: [bottom: 0%, left: 0%, width: 100%, position: absolute, z-index: -1]
icon:
- width: 70%
- fill: "#9da0a2"