Salut tout le monde !
Je vous partage une carte que j’ai trouvée ici, mais traduite et adaptée pour mon usage.
Je pense qu’elle pourrait être utile à d’autres, alors voici le code.
Les prérequis dans HACS :
- paper-buttons-row
- Lovelace Météo France (pour la météo)
- Atmos (pour le pollen)
Le code :
type: custom:paper-buttons-row
styles:
justify-content: flex-start
flex-wrap: wrap
font-size: 1em
line-height: 1.2em
margin: 6px 0 12px 0
width: 100%
buttons:
- layout: name
name: Il fait actuellement
styles:
button:
flex-basis: 1
flex-shrink: 0
name:
color: var(--primary-text-color)
- layout: name
entity: weather.ville
name: >-
{% set etat = states('weather.ville') %} {% set traduction = {
'clear': 'Dégagé',
'cloudy': 'Nuageux',
'partlycloudy': 'Partiellement nuageux',
'rainy': 'Pluvieux',
'pouring': 'Averses',
'snowy': 'Neigeux',
'snowy-rainy': 'Neige fondue',
'sunny': 'Ensoleillé',
'fog': 'Brouillard',
'windy': 'Venteux',
'windy-variant': 'Venteux variable',
'exceptional': 'Exceptionnel'
} %} {{ state_attr('weather.ville', 'temperature') | round(1) }}°, {{
traduction[etat] if etat in traduction else etat }}
tap_action:
action: more-info
styles:
name:
color: rgba(255, 152, 0, 1)
font-weight: bold
button:
padding: 2px 8px
background-color: rgba(255, 152, 0, 0.1)
border-radius: 24px
flex-basis: 1
flex-shrink: 0
display: flex
- layout: name
name: dehors, avec un vent qui soufle à
styles:
button:
flex-basis: 1
flex-shrink: 0
name:
color: var(--primary-text-color)
- layout: name
entity: weather.ville
name: "{{ state_attr('weather.ville', 'wind_speed') }} km/h"
tap_action:
action: navigate
navigation_path: /dashboard-mobile/meteo
styles:
name:
color: rgba(139, 195, 74, 1)
font-weight: bold
button:
padding: 2px 8px
background-color: rgba(139, 195, 74, 0.1)
border-radius: 24px
flex-basis: 1
flex-shrink: 0
display: flex
- layout: name
name: Il fera maximum
styles:
button:
flex-basis: 1
flex-shrink: 0
name:
color: var(--primary-text-color)
- layout: name
entity: weather.ville
name: >-
{% set temp = states('sensor.temperature_ville_j0') %} {% if temp not
in ['unknown', 'unavailable', '', None] %}
{{ temp }} °🔺
{% else %}
N/A °🔺
{% endif %}
tap_action:
action: navigate
navigation_path: /dashboard-mobile/meteo
styles:
name:
color: rgba(233, 30, 99, 1)
font-weight: bold
button:
padding: 2px 8px
background-color: rgba(233, 30, 99, 0.1)
border-radius: 24px
flex-basis: 1
flex-shrink: 0
display: flex
- layout: name
name: et minimum
styles:
button:
flex-basis: 1
flex-shrink: 0
name:
color: var(--primary-text-color)
- layout: name
entity: weather.ville
name: >-
{% set temp = states('sensor.temp_mini_ville_j0') %} {% if temp not in
['unknown', 'unavailable', '', None] %}
{{ temp }} °🔻
{% else %}
N/A °🔻
{% endif %}
tap_action:
action: navigate
navigation_path: /dashboard-mobile/meteo
styles:
name:
color: rgba(3, 169, 244, 1)
font-weight: bold
button:
padding: 2px 8px
background-color: rgba(3, 169, 244, 0.1)
border-radius: 24px
flex-basis: 1
flex-shrink: 0
display: flex
- layout: name
name: avec un pollen à
styles:
button:
flex-basis: 1
flex-shrink: 0
name:
color: var(--primary-text-color)
- layout: name
entity: weather.ville
name: "{{states('sensor.qualite_globale_pollen_ville')}}/6"
tap_action:
action: navigate
navigation_path: /dashboard-mobile/meteo
styles:
name:
color: rgba(63, 81, 181, 1)
font-weight: bold
button:
padding: 2px 8px
background-color: rgba(63, 81, 181, 0.1)
border-radius: 24px
flex-basis: 1
flex-shrink: 0
display: flex
Petite précision, j’exporte la température mini de la journée pour mon écran e-paper, donc je réutilise le sensor. Voici le code dans template.yaml :
- sensor:
- name: Temp mini ville J0
unique_id: templow_ville_j0
state: "{{ state_attr('sensor.weather_forecast_jour_ville','forecast')[0].templow | float(0) }}"
availability: "{{ states('sensor.weather_forecast_jour_ville') not in ['unknown', 'unavailable', 'none'] }}"