@barto_95 et les autres :
Ça arrive ce soir (tard) 
Déjà la carte :
template:
- icon_info_bg
- personnes
- popup_map
type: custom:button-card
entity: person.clemalex
show_entity_picture: true
entity_picture: /local/images/person/clemalex.png
variables:
gps: google_maps #mettre 'waze' pour redirection vers l'application Waze
#les modèles (templates)
personnes:
show_label: true
label: |
[[[
if (entity.state == 'home'){
return "Domicile";
}
else if (entity.state == 'not_home'){
return "En Balade";
}else{
return entity.state; //dans une zone
}
]]]
styles:
entity_picture:
- transform: scale(2)
custom_fields:
notification:
- transform: scale(1.3)
- border-radius: 50%
- position: absolute
- right: 8px
- top: 8px
- height: 16px
- width: 16px
- border: 2px solid var(--card-background-color)
- font-size: 12px
- line-height: 14px
- background-color: |
[[[
if (entity.state == 'home'){
return "rgba(var(--couleur-bleu),1)";
}else{
return "rgba(var(--couleur-vert),1)";
}
]]]
custom_fields:
notification: |
[[[
var icon = "" ;
if (entity.state == 'home'){
icon="mdi:home-variant"
}else{
icon="mdi:pine-tree"
}
return `<ha-icon icon="${icon}" style="width: 10px; height: 10px; color: white;"></ha-icon>`
]]]
popup_map:
variables:
gps: google_maps
tap_action:
action: fire-dom-event
browser_mod:
command: call-service
service: browser_mod.popup
service_data:
deviceID:
- this
title: '[[[ return( "Position de " + entity.attributes.friendly_name); ]]]'
style:
$: |
.mdc-dialog {
backdrop-filter: blur(5px) !important;
-webkit-backdrop-filter: blur(5px) !important;
}
.: |
mwc-icon-button ha-icon {
font-size: 0;
}
.content{padding: 0 10px 10px 10px}
card:
type: vertical-stack
cards:
- template:
- map_card
type: custom:button-card
entity: '[[[ return entity.entity_id ]]]'
- type: entities
show_header_toggle: false
entities:
- type: weblink
name: |
[[[
if (variables.gps.toUpperCase() == 'GOOGLE_MAPS'){
var gps = "(via Google Maps)"
}
else if (variables.gps.toUpperCase() == 'WAZE'){
var gps = "(via Waze)"
}
return('Itinéraire vers ' + entity.attributes.friendly_name + ' ' + gps);
]]]
icon: mdi:map-marker-path
url: |
[[[
if (variables.gps.toUpperCase() == 'GOOGLE_MAPS'){
return('https://maps.google.com/maps?q='+entity.attributes.latitude+','+entity.attributes.longitude+'&t=&z=15');
}
else if (variables.gps.toUpperCase() == 'WAZE'){
return('waze://?ll='+entity.attributes.latitude+','+entity.attributes.longitude+'&z=15&navigate=yes');
}
]]]
map_card:
show_name: false
show_icon: false
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
type: iframe
url: |-
[[[
var lat = entity.attributes.latitude
var long = entity.attributes.longitude
return `https://maps.google.com/maps?q=${lat},${long}&t=&z=13&ie=UTF8&iwloc=&output=embed`
]]]
aspect_ratio: 96%
#Présent de base
icon_info_bg:
color: var(--google-grey-500)
show_icon: true
show_name: true
show_label: true
size: 20px
custom_fields:
notification: |
[[[
if (entity.state =='unavailable'){
return `<ha-icon icon="mdi:exclamation" style="width: 12px; height: 12px; color: white;"></ha-icon>`
}
]]]
state:
- styles:
custom_fields:
notification:
- border-radius: 50%
- position: absolute
- left: 38px
- top: 8px
- height: 16px
- width: 16px
- border: 2px solid var(--card-background-color)
- font-size: 12px
- line-height: 14px
- background-color: |
[[[
return "rgba(var(--couleur-rouge),1)";
]]]
value: unavailable
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"i n" "i l"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content min-content
icon:
- color: rgba(var(--couleur-theme),0.2)
img_cell:
- background-color: rgba(var(--couleur-theme),0.05)
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
name:
- align-self: end
- justify-self: start
- font-weight: bold
- font-size: 14px
- margin-left: 12px
label:
- justify-self: start
- align-self: start
- font-weight: bolder
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
state:
- justify-self: start
- align-self: start
- font-weight: bolder
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
La popup utilise l’intégration browser-mod .
Il faut juste renseigner dans la carte une entité comprenant comme attributs latitude et longitude. L’état de l’entité est repris en libellé (home renvoie Domicile, not_home renvoie En Balade, sinon l’état (pour une entité du domaine person ça correspondra au nom d’une zone.
Le lien redirigeant vers Google Maps ou Waze se définit via la variable gps. Si elle n’est pas présente (ou contient google_maps) le lien redirigera vers Google Maps. Pour l’application Waze, il faut renseigner gps: waze.
PS: Oui, je suis en vacance dans les Landes 
