type: tile
entity: light.buanderie
color: red
Etc...........
Il n’y a aucun besoin de style ou autre subtilité.
2 « J'aime »
pfff tu as raison, j’étais parti trop loin ^^
merci 
Si tu utilises vertical-stack-in-card a la place de ta stack-in-card, tu conserves l’interface graphique…
Ça te facilitera la vie sur la configuration des tuiles…
Bonjour et merci pour ce superbe travail de synthèse sur le dashbord. Depuis que j’ai transformé mes vues en sections, chaque fois que je démarre HA sur mon PC, la vue principale est automatiquement ouverte en mode édition (ce n’est pas la cas sur mon téléphone). Ca n’est pas très grave, mais je suis obligé de faire « terminer » pour utiliser mon dashboard. C’est probablement tout bête, mais pour l’instant je n’ai pas réussi a changer cela. Si quelqu’un a une idée, je suis preneur, merci.
Résolu: En effet, c’était tout simple, Mon URL dans Chrome était : https://salxxxxxxxxyyss.duckdns.org:8123/lovelace/0?edit=1 , il suffisait de changer edit=0
Bonjour à tous,
Je suis peut-être passé à travers et/ou je n’ai pas trouvé le subterfuge, mais comment faites vous pour faire changer l’icone en fonction de l’état (en natif bien sur ;o)
Ex: volet ouvert → mdi:window-shutter-open
volet fermé → mdi:window-shutter
Merci pour vos retours !
En natif ce n’est pas si simple. [Edit en fait si…]
Dans l’affichage, si tu changes l’icone, par exemple dans une carte tuile, tu va avoir toujours la même icone (la nouvelle) et seule sa couleur va changer suivant l’état, ce qui ne correspond pas tout à fait à ton besoin.
Une façon détournée peut être d’utiliser à la place d’une carte tuile une carte mushroom template en créant un template pour l’icone en fonction de l’état (pas vraiment indispensable dans ton cas, il y a de meilleures manière de faire qu’on aborde ensuite, mais ça peut être utile pour d’autres besoins…)
{% if is_state(entity, 'on') %}
mdi:window-shutter-open
{% else %}
mdi:window-shutter
{% endif %}
Mais dans le cas d’une entité de type cover, la meilleur manière c’est de customiser ses entités ainsi c’est vraiment l’icone par défaut que tu viens modifier, et ce pour toutes les cartes, y compris dans les autres parties de home assistant, indépendamment de l’affichage.
Par exemple pour mes volets et ma porte de garage j’utilise cet include dans mon configuration.yaml:
# Customisations
homeassistant:
customize: !include customize.yaml
et le contenu suivant dans un fichier customize.yaml:
####################################
# Customisation de l'interface #
####################################
# customisation des volets
cover.volet_du_bureau:
device_class: shutter
cover.volet_de_la_chambre_de_justine:
device_class: shutter
cover.volet_de_la_chambre_de_louise:
device_class: shutter
cover.volet_de_la_chambre_de_thibault:
device_class: shutter
cover.volet_de_la_mezzanine:
device_class: shutter
cover.volet_du_salon_apero:
device_class: shutter
cover.volet_du_salon_tv:
device_class: shutter
cover.volet_cuisine:
device_class: shutter
cover.tous_les_volets:
device_class: shutter
cover.volets_vie:
device_class: shutter
cover.salon:
device_class: shutter
# customisation du contact porte du garage
binary_sensor.0x00124b0028943f14_contact:
device_class: garage_door
[Edit - en fait c’est beaucoup plus simple désormais]
Il semble que ce soit même possible de le faire directement dans les options de l’entité:
en cliquant sur afficher en tant que:
on peut ainsi facilement changer la device class des elements suivants:
1 « J'aime »
Merci pour ton retour.
Une fois que tu as définit ton device class, comment tu l’intègre dans une tuile ? (j’aimerais toujours faire sans mushroom)
Tu ajoutes juste ton entité, l’affichage sera désormais celui de la « bonne » classe…
Il faut peut être recharger ton YAML soit en redémarrant, soit en rechargeant:
1 « J'aime »
La partie affichée en tant que fonctionne très bien
Ici un screen sur le test porte et fenêtre
Le seul point bloquant est : si tu veux afficher autre chose que les icônes standard il faut utiliser une autre méthode que cite @BBE
1 « J'aime »
C’est pour ça que j’indiquais la solution de la carte mushroom template…
Par exemple si un capteur d’ouverture est utilisé pour autre chose, et qu’on veut y associer des icones qui ne sont pas définies dans les device class, il peut être utile de passer par une carte mushroom template pour afficher par exemple une icone boite aux lettres vide/pleine…
Salut
merci pour cette article et partage
Je vais essayer d’utiliser au maximum la carte tuile
Je me suis penché sur la carte tuile météo
Météo par heure 
Code de la carte
type: tile
show_entity_picture: true
icon: mdi:account
color: green
entity: sensor.VOTRE_VILLE_heure
name: Météo
hide_state: false
state_content:
- condition
- temperature
- humidity
- precipitation
- wind_speed
vertical: false
grid_options:
columns: 12
rows: 1
section prévision
square: false
type: grid
cards:
- type: heading
icon: mdi:weather-partly-snowy-rainy
heading: Prévisions météo
heading_style: title
- type: tile
entity: sensor.meteo_VOTRE_VILLE_0
icon: mdi:account
hide_state: false
vertical: false
name: Aujourd'hui
state_content:
- datetime
- condition
- templow
- temperature
- humidity
- precipitation
show_entity_picture: true
- type: tile
show_entity_picture: true
icon: mdi:account
color: green
entity: sensor.meteo_VOTRE_VILLE_1
name: Demain
hide_state: false
vertical: false
grid_options:
columns: 12
rows: 1
state_content:
- datetime
- condition
- templow
- temperature
- humidity
- precipitation
- type: tile
show_entity_picture: true
icon: mdi:account
color: green
entity: sensor.meteo_VOTRE_VILLE_2
name: Après demain
hide_state: false
vertical: false
grid_options:
columns: 12
rows: 1
state_content:
- datetime
- condition
- templow
- temperature
- humidity
- precipitation
- type: tile
show_entity_picture: true
icon: mdi:account
color: green
entity: sensor.meteo_VOTRE_VILLE_3
name: J+3
hide_state: false
vertical: false
grid_options:
columns: 12
rows: 1
state_content:
- datetime
- condition
- templow
- temperature
- humidity
- precipitation
- type: tile
show_entity_picture: true
icon: mdi:account
color: green
entity: sensor.meteo_VOTRE_VILLE_4
name: J+4
hide_state: false
vertical: false
grid_options:
columns: 12
rows: 1
state_content:
- datetime
- condition
- templow
- temperature
- humidity
- precipitation
grid_options:
columns: full
columns: 1
Oui j’ai un temps magnifique
Configuration Pour obtenir les infos météo :
à ajouter en premier lieu les codes suivants dans le configuration.yaml ou template.yaml
Météo par heure :
Template (par heure)
- trigger:
- trigger: time_pattern
hours: /1
- trigger: homeassistant
event: start
action:
- action: weather.get_forecasts
target:
entity_id: weather.VOTRE_VILLE
data:
type: hourly
response_variable: hourly
sensor:
- name: meteo VOTRE_VILLE heure
unique_id: meteo_VOTRE_VILLE_heure
state: "Something"
picture: >
{% set weather = hourly['weather.VOTRE_VILLE'].forecast[0].condition %}
{% if is_state('sun.sun', 'above_horizon') %}
{{ '/local/icones/meteo/' + weather + '.svg' }}
{% else %}
{{ '/local/icones/meteo/' + weather + '_night.svg' }}
{% endif %}
attributes:
datetime: "{{ hourly['weather.VOTRE_VILLE'].forecast[0].datetime }}"
condition: "{{ hourly['weather.VOTRE_VILLE'].forecast[0].condition }}"
temperature: "🌡️{{hourly['weather.VOTRE_VILLE'].forecast[0].temperature }}°"
humidity: "💧{{ hourly['weather.VOTRE_VILLE'].forecast[0].humidity }}%"
precipitation: "☂️{{hourly['weather.VOTRE_VILLE'].forecast[0].precipitation }}mm"
precipitation_percent: "{{ hourly['weather.VOTRE_VILLE'].forecast[0].precipitation.probability }}"
wind_speed: "💨{{hourly['weather.VOTRE_VILLE'].forecast[0].wind_speed }}km/h"
Metéo par jour :
Template (par jour)
- trigger:
- trigger: time_pattern
hours: /1
- trigger: homeassistant
event: start
action:
- action: weather.get_forecasts
target:
entity_id: weather.VOTRE_VILLE
data:
type: daily
response_variable: daily
sensor:
- name: meteo VOTRE_VILLE jour 1
unique_id: meteo_VOTRE_VILLE_jour_1
state: "Something"
picture: >
{% set weather = daily['weather.VOTRE_VILLE'].forecast[1].condition %}
{{ '/local/icones/meteo/' + weather + '.svg' }}
attributes:
datetime: >
{{ daily['weather.VOTRE_VILLE'].forecast[1].datetime | as_timestamp | timestamp_custom('%d/%m', true) }}
condition: "{{ daily['weather.VOTRE_VILLE'].forecast[1].condition }}"
temperature: "🔺{{ daily['weather.VOTRE_VILLE'].forecast[1].temperature }}°"
humidity: "💧{{ daily['weather.VOTRE_VILLE'].forecast[1].humidity }}%"
templow: "🔻{{ daily['weather.VOTRE_VILLE'].forecast[1].templow }}°"
Code à multiplier selon le nombre de jours souhaités
forecast[0] : Jour J
forecast[1] : Jour J+1
forecast[2] : Jour J+2
etc…
Tout les attributs disponibles sont visibles dans outils de développement > Actions > Météo: Obtenir les prévisions
Icones Pour les icônes animés j’ai pris celle ci :
https://bas.dev/work/meteocons
Il faudra prendre celle qui vous interesse pour toutes les conditions visibles sur ce lien :
Vous pourrez mettre les variantes « nuit » utile pour la météo par heure
Toutes les icones seront à enregistrer en local de préférence
exemple pour moi /local/icones/meteo/
Attention il faut que les noms des icônes soit identique au nom des conditions « weather HA »
rajouter _night dans le nom des icônes pour les versions nuits
Notes suite à test avec @jerome6994
La synchronisation des sensors peuvent mettre du temps, ne vous inquiétez pas si rien apparait dans les données des sensors.
Cela met un peu de temps
Idem pour le lien avec les icônes.
L’affichage sur téléphone semblent accepter uniquement 5 états, pensez y
EDIT:
On peu forcer les noms à se mettre à jour en fonction des forecasts
voici le code à utiliser :
- name: "{{ daily['weather.VOTRE_VILLE'].forecast[2].datetime | as_timestamp | timestamp_custom('%a', true) | replace('Mon', 'Lundi') | replace('Tue', 'Mardi') | replace('Wed', 'Mercredi') | replace('Thu', 'Jeudi') | replace('Fri', 'Vendredi') | replace('Sat', 'Samedi') | replace('Sun', 'Dimanche') }}"
unique_id: meteo_VOTRE_VILLE_jour_2
state: "Something"
picture: >
{% set weather = daily['weather.VOTRE_VILLE'].forecast[2].condition %}
{{ '/local/icones/meteoV2/' + weather + '.png' }}
attributes:
datetime: >
{{ daily['weather.VOTRE_VILLE'].forecast[2].datetime | as_timestamp | timestamp_custom('%d/%m', true) }}
condition: "{{ daily['weather.VOTRE_VILLE'].forecast[2].condition | replace('clear', 'Ciel dégagé') | replace('clear-night', 'Nuit clair') | replace('cloudy', 'Nuageux') | replace('rainy', 'Pluie') | replace('hail', 'Risque de grèle') | replace('snowy', 'neige') | replace('windy', 'Venteux') | replace('fog', 'Brouillard') | replace('partlycloudy', 'Eclaircies') | replace('pouring', 'Pluie forte') | replace('lightning', 'Orages') | replace('sunny', 'Ensoleillé') | replace('windy-variant', 'Venteux variant') | replace('Exceptional', 'Exceptionnel') | replace('snowy-rainy', 'Pluie verglaçante') | replace('lightning-rainy', 'Pluie orageuse')}}"
temperature: "🔺{{ daily['weather.VOTRE_VILLE'].forecast[2].temperature }}°"
humidity: "💧{{ daily['weather.VOTRE_VILLE'].forecast[2].humidity }}%"
templow: "🔻{{ daily['weather.VOTRE_VILLE'].forecast[2].templow }}°"
precipitation: "☂️{{ daily['weather.VOTRE_VILLE'].forecast[2].precipitation }}mm"
J’ai également intégré la traduction des conditions.
ATTENTION:
bien mettre un ID_Unique
Le temps de synchronisation des jours n’est pas instantanée cela peu prendre quelque minutes.
4 « J'aime »
Pas facile de faire du template dans les tuiles…
De façon directe c’est impossible
La seule façon un peu équivalente c’est la carte mushroom template, mais pour la météo ça complique beaucoup les choses. En particulier sur la gestion des icones. C’est beaucoup de travail pour pas grand chose…
Désolé, mais je n’ai pas de solution qui convienne vraiment.
1 « J'aime »
Bonjour,
Pouvez-vous svp m’indiquer comment modifier le style du titre des tuiles ?
Dans mon exemple ci-dessous, j’aimerai mettre en gras le mot SEJOUR, et agrandir légèrement la police de caractères ?
Merci.
Cela n’est pas possible avec les cartes core.
Il faut passer par card-mod disponible dans HACS. On sort donc du cadre de cet article qui vise la mise en place simple sans Yaml sans css…
Par contre une petite recherche sur card-mod et tu trouveras probablement ta solution.
Et si tu ne trouves pas, n’hésite pas à créer un sujet spécifique.
2 « J'aime »
Sympa c’est tuile météo
C’est vrai qu’il faut que je commence ma vue météo aussi !
2 « J'aime »
Salut
je te remercie pour ta réponse je m’en doutais un peu
merci
oui au final cette petite carte est pas si limitée que ça c’est pas mal comme carte « couteau suisse »
Salut à tous,
Je me pose perso la question d’adopter l’un ou l’autre, c’est à dire custom:stack-in-card ou custom:button-card
Mais quand je vois la date de la dernière release de stack-in-card, j’ai peur qu’à un moment ou a un autre il ne soit plus compatible avec les évolutions de lovelace…
Du coup ça pencherai plus sur custom:button-card …
Utilise vertical-stack-in-card, elle est plus souvent mise à jour…
Mais button card et stack in card ne font pas vraiment la même chose…
Et c’est un peu hors sujet pour ce fil de réaction à l’article qui propose de rester simple au maximum et d’utiliser les mécaniques core plutôt que les customs…
1 « J'aime »
Tu partages ton code dans ton post précédent pour être complet 
1 « J'aime »