Je n’arrive pas à le faire fonctionner comme cela (Unknown error).
J’avais bien vu ce passage dans le doc, cependant de ce que je comprends, c’est plutot une utilisation d’un include au quel on passerais des paramètres (en l’occurence dans les exemples de la doc, on vois bien qu’il passe le yaml inclu, puis en suite les arguments), dans mon cas, l’idée est plus d’insérer un bout de code d’un autre fichier, peu importe ce code (là pour le moment ça ce limite aux « sous items »).
Bonjour,
J’ai commencé à travailler sur mon floorplan.
Dans le template cover_map, il renvoit à un template base_force_on. pourrais tu nous le montrer? merci
Hello,
Oui biensur, voici mon fichier complet avec tous mes templates, en date d’aujourd’hui:
################################################################
################################################################
# Templates for cards
################################################################
################################################################
##### Base for all the cards (normal by default) ###########
# Ratio, generic colours, name, format, font
base:
show_state: false
show_icon: false
aspect_ratio: 1/1
state:
## Specific style when state is "On"
- value: 'on'
styles:
card:
- background-color: 'rgba(255, 255, 255, 0.8)'
- border: 1px rgba(80, 80, 80) solid
name:
- color: 'rgba(0, 0, 0, 0.6)'
custom_fields:
temperature:
- color: "#8d8e90"
double_tap_action:
action: more-info
styles:
name:
- top: 74%
- left: 11%
- position: absolute
card:
- font-family: Passion One
- letter-spacing: 0px
- color: 'rgba(255, 255, 255, 0.3)'
- font-size: 100%
- background-color: 'rgba(80, 80, 80, 0.7)'
- border-radius: 15%
- box-shadow: none
- transition: none
- border: 1px rgba(255, 255, 255) solid
base_forced_on: #Always on
template:
- base
styles:
card: [background-color: 'rgba(255, 255, 255, 0.8)', border: '1px rgba(80, 80, 80) solid']
name: [color: 'rgba(0, 0, 0, 0.6)']
state: [color: 'rgba(0, 0, 0, 0.6)']
custom_fields:
temperature:
- color: "#8d8e90"
############### Specific for map tiles ################
base_map:
template: base
show_name: false
styles:
custom_fields:
temperature:
- top: 73%
- width: 100%
- justify-self: center
- align-self: center
- font-size: >
[[[
var window_width = window.screen.width;
if (window_width > 600) {return '17px';}
else {return '13px';}
]]]
- color: white
- font-weight: black
- position: absolute
base_map_forced_on:
template:
- base_map
- base_forced_on
light_map:
template:
- base_map
- light_icon
styles:
custom_fields:
icon_hue:
[top: 20%, left: 27%, width: 46%, position: absolute]
cover_map:
template:
- base_map
- base_forced_on
- cover_icon
show_name: false
styles:
custom_fields:
icon_cover:
[top: 20%, left: 20%, width: 120%, position: absolute]
############### Specific for normal tiles ################
light:
template:
- base
- light_circle
- light_icon
styles:
custom_fields:
icon_hue:
[top: 18%, left: 6%, width: 40%, position: absolute]
circle_light:
[top: 10%, left: 50%, width: 45%, position: absolute, letter-spacing: 0px]
cover:
template:
- base
- cover_circle
- cover_icon
styles:
custom_fields:
cover_icon:
[top: 18%, left: 6%, width: 40%, position: absolute]
circle_cover:
[top: 10%, left: 50%, width: 45%, position: absolute, letter-spacing: 0px]
################################################################
# Lights
################################################################
################## Global light ################
light_circle:
custom_fields:
circle_light: >
[[[ if (entity.state === 'on' && entity.attributes.brightness) { const
brightness = Math.round(entity.attributes.brightness / 2.54); const
radius = 20.5; const circumference = radius * 2 * Math.PI; return `<svg
viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}"
stroke="#b2b2b2" stroke-width="1.5" fill="none" style=" transform:
rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray:
${circumference}; stroke-dashoffset: ${circumference - brightness / 100
* circumference};" /> <text x="50%" y="54%" fill="#8d8e90"
font-size="14" text-anchor="middle"
alignment-baseline="middle">${brightness}<tspan
font-size="10">%</tspan></text></svg>`; } ]]]
light_icon:
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="rgba(180, 180, 180)" d="M 29.147 48.105 L 21.281 48.105 C 21.281 48.105 20.157 48.173 20.157 48.629 C 20.157 49.087 20.801 49.218 21.281 49.218 L 29.147 49.218 C 29.629 49.218 30.271 49.152 30.271 48.629 C 30.271 48.105 29.147 48.105 29.147 48.105 Z M 34.446 46.209 L 16.144 46.209 C 16.144 46.209 14.857 46.209 14.857 46.733 C 14.857 47.256 15.822 47.319 16.144 47.319 L 34.606 47.319 C 34.927 47.319 35.89 47.256 35.89 46.733 C 35.729 46.209 34.446 46.209 34.446 46.209 Z M 34.446 44.248 L 16.144 44.248 C 16.144 44.248 14.857 44.248 14.857 44.771 C 14.857 45.295 15.822 45.359 16.144 45.359 L 34.606 45.359 C 34.927 45.359 35.89 45.295 35.89 44.771 C 35.729 44.248 34.446 44.248 34.446 44.248 Z M 34.446 42.351 L 25.295 42.351 L 16.144 42.351 C 16.144 42.351 14.857 42.351 14.857 42.874 C 14.857 43.397 15.822 43.463 16.144 43.463 L 34.606 43.463 C 34.927 43.463 35.89 43.397 35.89 42.874 C 35.89 42.351 34.446 42.351 34.446 42.351 Z M 42.794 27.181 C 37.494 23.714 31.556 23.519 25.294 23.519 C 19.194 23.519 11.809 23.781 7.796 27.181 C 7.635 27.246 7.635 27.379 7.956 27.639 C 8.597 28.161 13.252 32.346 13.094 39.932 C 13.094 40.651 12.932 40.978 13.094 41.044 C 13.094 41.109 13.094 41.5 14.857 41.5 L 35.729 41.5 C 37.334 41.5 37.334 41.174 37.494 41.044 L 37.494 39.932 C 37.334 32.346 41.99 28.161 42.633 27.639 C 42.794 27.379 42.794 27.31 42.794 27.181" style=""/>
<path fill="rgba(150, 150, 150)" d="M 6.828 35.24 C 14.261 41.681 38.81 39.96 43.204 35.24 C 43.872 34.362 44.375 33.484 44.707 32.825 C 48.372 20.309 48.215 15.922 48.215 14.824 C 47.874 5.16 34.192 3.846 28.021 3.846 L 22.347 3.846 C 16.172 3.846 2.321 4.943 2.152 14.824 C 2.152 15.922 1.983 20.309 5.66 32.825 C 5.66 33.484 6.158 34.582 6.828 35.24 Z" style=""/>
<path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M 7.783 34.174 C 14.751 40.14 37.764 38.546 41.882 34.174 C 42.509 33.361 42.981 32.547 43.292 31.937 C 46.727 20.344 46.58 16.28 46.58 15.265 C 46.26 6.312 33.433 5.093 27.65 5.093 L 22.332 5.093 C 16.543 5.093 3.559 6.11 3.4 15.265 C 3.4 16.28 3.241 20.344 6.688 31.937 C 6.688 32.547 7.156 33.564 7.783 34.174 Z" style=""/>
</svg>
`; ]]]
icon_hue_old2: >
[[[
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="rgba(180, 180, 180)" d="M 29.616 48.105 L 20.805 48.105 C 20.805 48.105 19.546 48.173 19.546 48.629 C 19.546 49.087 20.267 49.218 20.805 49.218 L 29.616 49.218 C 30.156 49.218 30.875 49.152 30.875 48.629 C 30.875 48.105 29.616 48.105 29.616 48.105 Z M 35.552 46.209 L 15.051 46.209 C 15.051 46.209 13.61 46.209 13.61 46.733 C 13.61 47.256 14.69 47.319 15.051 47.319 L 35.731 47.319 C 36.091 47.319 37.169 47.256 37.169 46.733 C 36.989 46.209 35.552 46.209 35.552 46.209 Z M 35.552 44.248 L 15.051 44.248 C 15.051 44.248 13.61 44.248 13.61 44.771 C 13.61 45.295 14.69 45.359 15.051 45.359 L 35.731 45.359 C 36.091 45.359 37.169 45.295 37.169 44.771 C 36.989 44.248 35.552 44.248 35.552 44.248 Z M 35.552 42.351 L 25.301 42.351 L 15.051 42.351 C 15.051 42.351 13.61 42.351 13.61 42.874 C 13.61 43.397 14.69 43.463 15.051 43.463 L 35.731 43.463 C 36.091 43.463 37.169 43.397 37.169 42.874 C 37.169 42.351 35.552 42.351 35.552 42.351 Z M 44.902 27.181 C 38.966 23.714 32.314 23.519 25.3 23.519 C 18.467 23.519 10.195 23.781 5.7 27.181 C 5.52 27.246 5.52 27.379 5.879 27.639 C 6.598 28.161 11.812 32.346 11.635 39.932 C 11.635 40.651 11.453 40.978 11.635 41.044 C 11.635 41.109 11.635 41.5 13.61 41.5 L 36.989 41.5 C 38.787 41.5 38.787 41.174 38.966 41.044 L 38.966 39.932 C 38.787 32.346 44.002 28.161 44.722 27.639 C 44.902 27.379 44.902 27.31 44.902 27.181" style=""/>
<path fill="rgba(150, 150, 150)" d="M 6.451 28.691 C 14.107 34.485 39.389 32.937 43.915 28.691 C 44.603 27.901 45.121 27.111 45.463 26.518 C 49.237 15.258 49.075 11.311 49.075 10.323 C 48.724 1.629 34.633 0.446 28.278 0.446 L 22.434 0.446 C 16.075 0.446 1.81 1.433 1.636 10.323 C 1.636 11.311 1.462 15.258 5.248 26.518 C 5.248 27.111 5.761 28.099 6.451 28.691 Z" style=""/>
<path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M 7.476 27.969 C 14.707 33.421 38.591 31.964 42.866 27.969 C 43.516 27.226 44.006 26.482 44.329 25.925 C 47.894 15.33 47.741 11.616 47.741 10.688 C 47.41 2.506 34.097 1.392 28.095 1.392 L 22.575 1.392 C 16.567 1.392 3.091 2.321 2.927 10.688 C 2.927 11.616 2.762 15.33 6.339 25.925 C 6.339 26.482 6.824 27.411 7.476 27.969 Z" style=""/>
</svg>
`; ]]]
icon_hue_old: >
[[[ 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>`; ]]]
################################################################
# Covers
################################################################
################## Global Cover ################
cover_circle:
custom_fields:
circle_cover: >
[[[
const position = Math.round(entity.attributes.current_position);
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" style=" transform:rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - position / 100 * circumference};" /> <text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${position}<tspan font-size="10">%</tspan></text></svg>`;
]]]
cover_icon:
styles:
custom_fields:
icon_cover:
[top: 20%, left: 10%, width: 50px, position: absolute]
custom_fields:
icon_cover: >
[[[
const position = Math.round(entity.attributes.current_position);
if (position < 5) {return `<svg viewBox="0 0 50 50"><path d="M3 4H21V8H19V20H17V8H7V20H5V8H3V4M8 9H16V11H8V9M8 12H16V14H8V12M8 15H16V17H8V15M8 18H16V20H8V18Z" fill="#8d8e90"/></svg>`;}
else if ((position > 5) && (position < 35)) {return `<svg viewBox="0 0 50 50"><path d="M 3 4 L 21 4 L 21 8 L 19 8 L 19 20 L 17 20 L 17 8 L 7 8 L 7 20 L 5 20 L 5 8 L 3 8 L 3 4 M 8 9 L 16 9 L 16 11 L 8 11 L 8 9 M 8 12 L 16 12 L 16 14 L 8 14 L 8 12 M 8 15 L 16 15 L 16 17 L 8 17 L 8 15" fill="#8d8e90"/></svg>`;}
else if ((position >= 35) && (position < 65)) {return `<svg viewBox="0 0 50 50"><path d="M 3 4 L 21 4 L 21 8 L 19 8 L 19 20 L 17 20 L 17 8 L 7 8 L 7 20 L 5 20 L 5 8 L 3 8 L 3 4 M 8 9 L 16 9 L 16 11 L 8 11 L 8 9 M 8 12 L 16 12 L 16 14 L 8 14 L 8 12" fill="#8d8e90"/></svg>`;}
else if ((position >= 65) && (position < 95)) {return `<svg viewBox="0 0 50 50"><path d="M 3 4 L 21 4 L 21 8 L 19 8 L 19 20 L 17 20 L 17 8 L 7 8 L 7 20 L 5 20 L 5 8 L 3 8 L 3 4 M 8 9 L 16 9 L 16 11 L 8 11 L 8 9" fill="#8d8e90"/></svg>`;}
else {return `<svg viewBox="0 0 50 50"><path d="M 3 4 L 21 4 L 21 8 L 19 8 L 19 20 L 17 20 L 17 8 L 7 8 L 7 20 L 5 20 L 5 8 L 3 8 L 3 4" fill="#8d8e90"/></svg>`;}
]]]
grand merci je vais regarder.
@Dapolux Bonjour désolé de te déranger, tout de doucement j’avance sur mon floorplan. Actuellement je bloque sur la carte media. Je n’arrive pas à trouver comme lire les fichiers MP3 qui sont dans mon fichier media. merci
J’ai supprimer du coté de HA
Ok je regarde à cela et je te tiens au courant.
Voilà, la visu du plan d’aspiration est intégrée:
Et le monitoring commence à bien prendre forme!
1er post mis à jour avec les infos correspondantes.
sympas les evolutions 
félicitation !
j’utilise cette carte pour l’aspi également, elle top, mais j’ai préféré utiliser le plan de la maison :
tu peux aussi faire une automatisation (ou sous node red) pour allez à la poubelle à fin du nettoyage et à un horaire dans la journée, en rentrant du travail y juste à la vider
calibration_points:
- map:
x: 100
'y': 215
vacuum:
x: 25350
'y': 24450
- map:
x: 250
'y': 215
vacuum:
x: 28100
'y': 24550
- map:
x: 100
'y': 64
vacuum:
x: 25800
'y': 29100
entity: vacuum.xiaomi_vacuum_cleaner
map_image: /local/custom_lovelace/xiaomi_vacuum_map_card/map3.png
type: 'custom:xiaomi-vacuum-map-card'
zones:
- - - 28536
- 23313
- 29886
- 25663
- - - 23859
- 24540
- 25009
- 26390
- - - 23016
- 14950
- 29716
- 20157
- - - 23600
- 20020
- 30500
- 30999
- - - 29690
- 27741
- 32352
- 31291
Belle intégration!
Pas une mauvaise idée le plan de la maison, je vais y penser :).
J’ai également utilisé browser_mod pour redefinir le more-info et c’est fonctionnel depuis mon navigateur. Par contre ca ne marche pas sur mon mobile android depuis l’application officielle. As-tu testé sur mobile et est-ce fonctionnel ?
Merci pour ton retour.
J’ai redémarré le téléphone et ca a marché … peut-être un problème de cache … à suivre 
Merci pour le partage 
J’aime beaucoup ton monitoring surtout l’effet glisse pour afficher plusieurs élément dans un espace réduit.
Pourrais tu partager ton astuce si je souhaite la reproduire.
Bonjour !
Sympa ton dashboard @Dapolux . Concernant la musique, tu pourrais partager s’il te plait ton template qui affiche les playlist deezer (Musique du moment…) ? (notamment comment tu affiches l’image avec)
Merci beaucoup !
Bonjour,
Je vois que tu as un control assez complet de ta VMC double flux.
Quel est son modèle et comment t-y es tu pris? Perso, j’ai une VMC DF Aldes, mais je ne peux agir dessus qu’avec un module radio que je n’ai pas réussi à intégrer sur HA (PS j’ai un RFX DYI 433Mhz, mais la DF semble etre en 868MHz.
En tout cas, super dashboard.
Merci de tes partages !
Bonjour @anoeta,
Alors ce n’est pas deezer, mais spotify.
En l’occurrence, j’affiche les playlists de mon LMS (à l’intérieur du quel j’accède à mes playlists spotify), tu trouveras plus d’infos ici:
Bonjour @vdelab,
Alors j’ai une Zehnder WHR 930 (qui existe aussi sous le nom comfoair 350).
Pour son intégration, voici ce que j’ai fait:
Mais cela ne sera très certainement pas adaptable aux VMC Aldes.
Dans tous les cas, tu as une solution beaucoup plus DIY, qui consisterais à mettre des capteurs de température reliés à un RPI, ou à un arduino, puis piloter les vitesses de ta VMC avec des relais (si elle est pilotable par contacts secs). Par contre cela nécessite de mettre un peu plus la main à la pate :).
Hello,
Petite mise à jour du post avec ma vue de monitoring général.
Reste à peaufiner quelques détails visuels, puis à revoir pour des popups sur les tuiles (vue un peu plus détaillée de chaque appareil, avec les fonctions associées (ex: reboot, switchs, …), ne voulant pas trop surcharger la vue générale).
Puis à revoir/optimiser les entités pour pas exploser ma base de données (ouai, pour avoir les sensors souhaités, j’ai du installer/tester plusieurs intégrations, et récupérer un max d’infos, trop d’infos parfois (Unifi me génère 80 appareils et 280 entités…), il faut maintenant réduire à ce dont j’ai réellement besoin.
Woaw !!!
Quelle intégration WAF !
Je crois que je vais te solliciter !!!
