Carte Météo - KeithBolton/Home-Assistant GitHub Wiki
Si vous aimez ce tutoriel, cliquez sur ⭐️ en haut à droite de l'écran pour dire que vous avez appréciez. Plus j'aurai d'⭐️ et plus je serai heureux de partager mes autres codes avec vous 😉
- Correctif de l'icone de la météo (emplacement)
- Ajout de toutes les conditions météo disponibles sur OpenWeatherMap
- Ajout de deux sensors pour le levé et le couché du soleil
- Ajout des icones météo pour la nuit en prenant en compte le couché et le levé du soleil
Suite à la demande de tutoriel depuis la publication de ma carte météo sur le groupe FaceBook Home Assistant - groupe francophone je vais vous expliquer le principe de la structure de cette carte afin que vous puissiez la reproduire de votre coté.
En plus du langage YAML, vous devez avoir des bases en HTML et CSS
Cette carte est optimisée pour une taille de carte de 402px x 280px, libre à vous de modifier les dimensions pour adapter cette carte à votre HA
Dans un premier temps, vous aurez besoin de différentes intégrations listés ci-dessous. Je vous laisse le plaisir de les installer, je ne vais pas faire de tuto pour cela, vous trouverez facilement les explications sur internet.
- Hacs
- OpenWeatherMap
- Météo France
- Button-Card
Une fois les intégrations ajoutées à votre HA, vous aurez besoin des sensors suivants :
- Date
- Heure
- Température mini
- Température maxi
- Météo_fr (Pour la traduction des états du ciel, fait maison)
- Météo Indice UV (Aussi fait maison)
- Vent (Fait maison également)
Passons maintenant aux choses sérieuses, ajoutons les sensors indispensables au bon fonctionnement de cette carte météo. Ouvrez votre fichier 'configuration.yaml' et ajoutez le premiers sensor de la liste.
J'ai trouvé le code sur le net, en vrai sur le GitHub de Aurel RV il me semble
- platform: template
sensors:
date_v2:
entity_id: sensor.date
friendly_name: "Date du jour"
icon_template: mdi:calendar-today
value_template: >
{% set months = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"] %}
{{ now().day | string + ' ' + months[now().month-1] | string + ' ' + as_timestamp(now()) | timestamp_custom("%Y", True) }}
# Température max prévue du jour
- platform: template
sensors:
weather_temperature:
friendly_name: Weather Température Max
value_template: "{{ states.weather.XXX.attributes.forecast[0].temperature|float|round(2) }}"
# Température mini prévue du jour
- platform: template
sensors:
weather_temperature_mini:
friendly_name: Weather Température Mini
value_template: "{{ states.weather.XXX.attributes.forecast[0].templow|float|round(2) }}"
Soyez sympa, il y a surement des oublis que vous pourrez facilement ajouté
# Traduction fr des conditions du ciel # openweathermap
- platform: template
sensors:
meteo_fr:
friendly_name: meteo fr
value_template: >-
{%if is_state("sensor.openweathermap_condition", "clear") %}
Ciel dégagé
{% elif is_state("sensor.openweathermap_condition", "clear-night") %}
Nuit claire
{% elif is_state("sensor.openweathermap_condition", "cloudy") %}
Nuageux
{% elif is_state("sensor.openweathermap_condition", "fog") %}
Brouillard
{% elif is_state("sensor.openweathermap_condition", "hail") %}
Risque de grèle
{% elif is_state("sensor.openweathermap_condition", "lightning") %}
Orages
{% elif is_state("sensor.openweathermap_condition", "lightning-rainy") %}
Pluies orageuses
{% elif is_state("sensor.openweathermap_condition", "partlycloudy") %}
Partiellement nuageux
{% elif is_state("sensor.openweathermap_condition", "pouring") %}
Pluie forte
{% elif is_state("sensor.openweathermap_condition", "rainy") %}
Pluvieux
{% elif is_state("sensor.openweathermap_condition", "snow") %}
Neige
{% elif is_state("sensor.openweathermap_condition", "snowy") %}
Pluie verglaçante
{% elif is_state("sensor.openweathermap_condition", "cloudy") %}
Nuageux
{% elif is_state("sensor.openweathermap_condition", "sunny") %}
Ensoleillé
{% elif is_state("sensor.openweathermap_condition", "windy") %}
Venteux
{% elif is_state("sensor.openweathermap_condition", "windy-variant") %}
Venteux variable
{% elif is_state("sensor.openweathermap_condition", "execptional") %}
Exceptionnel
{%- else -%}
Condition non définie
{%- endif %}
Remplacez XXX à la ligne "{% set indice_uv = states.sensor.xxx_uv.state|float|round(0) %}" par le nom de votre commune
# Indice UV
- platform: template
sensors:
meteo_indice_uv:
friendly_name: "Météo indice UV"
value_template: >-
{% set indice_uv = states.sensor.xxx_uv.state|float|round(0) %}
Indice UV
{%if indice_uv <= 2 %}
{{indice_uv}} : Faible
{% elif indice_uv >= 3 and indice_uv <= 5 %}
{{indice_uv}} : Moyen
{% elif indice_uv >= 6 and indice_uv <= 7 %}
{{indice_uv}} : Elevé
{% elif indice_uv >= 8 and indice_uv <= 10 %}
{{indice_uv}} : Très élevé
{% elif indice_uv >= 11 %}
{{indice_uv}} : Extrême
{%- else -%}
ERROR
{%- endif %}
# Force du vent
- platform: template
sensors:
meteo_force_du_vent:
friendly_name: "Force du vent"
value_template: >-
{% set ventVitesse = states.sensor.openweathermap_wind_speed.state|float|round(2) %}
{% if ventVitesse < 0.3 %}
Air calme
{% elif ventVitesse >= 0.3 and ventVitesse <= 1.5 %}
Air léger
{% elif ventVitesse >= 1.6 and ventVitesse <= 3.3 %}
Légère brise
{% elif ventVitesse >= 3.4 and ventVitesse <= 5.4 %}
Brise légère
{% elif ventVitesse >= 5.5 and ventVitesse <= 7.9 %}
Vent modéré
{% elif ventVitesse >= 8 and ventVitesse <= 10.7 %}
Brise fraîche
{% elif ventVitesse >= 10.8 and ventVitesse <= 13.8 %}
Forte brise
{% elif ventVitesse >= 13.9 and ventVitesse <= 17.1 %}
Vent fort
{% elif ventVitesse >= 17.2 and ventVitesse <= 20.7 %}
Coup de vent
{% elif ventVitesse >= 20.8 and ventVitesse <= 24.4 %}
Coup de vent de ficelle
{% elif ventVitesse >= 24.5 and ventVitesse <= 28.4 %}
Tempête
{% elif ventVitesse >= 28.5 and ventVitesse <= 32.6 %}
Tempête violente
{% elif ventVitesse >= 32.7 %}
Ouragan
{% else %}
Pas de vent
{%- endif %}
# Levé du soleil
- platform: template
sensors:
weather_leve_soleil:
friendly_name: Soleil levé
value_template: >-
{{as_timestamp(states.sun.sun.attributes.next_rising) | timestamp_custom("%-Hh%M") }}
# Couché de soleil
- platform: template
sensors:
weather_couche_soleil:
friendly_name: Soleil couché
value_template: >-
{{as_timestamp(states.sun.sun.attributes.next_setting) | timestamp_custom("%-Hh%M") }}
Voilà, nous en avons fini pour les sensors je vous invite à redémarrer HA afin de passer à la carte en elle même.
Rendez-vous sur votre tableau de bord et cliquez "Ajouter une carte" (bouton en bas à droite) ensuite sélectionnez la carte "Manuel" tout en bas de la liste des cartes disponibles. Dans le code suivant remplacez "VOTRE_COMMUNE" par le nom de votre commune. Dans "temperature_label" j'utilise mon capteur de température externe pour plus de précision mais si vous n'en avez pas, vous pouvez utiliser OpenWeatherMap ou Météo France pour la température ressentie. Pour touver vos codes couleurs RGB vous pouvez utiliser le site suivant : https://www.rapidtables.com/web/color/RGB_Color.html
custom_fields:
name: |
[[[
return `
<span style="font-weight:bold;">
Météo VOTRE_COMMUNE - ${states['sensor.date_v2'].state} à ${states['sensor.date_heure'].state}
</span>`
]]]
temperature_label: |
[[[
return `
<span style="margin-top: -10px">
<span style="font-size:17px ; padding: 0px 0px 0px 0px; color:rgba(24, 142, 196,50%)">
_____________
</span><br/>
<span style="font-weight:bold; letter-spacing: -2px; margin: px 0px 0px 0px ">
${states['sensor.capteur_temp_ext_temperature'].state}</span>
<sup style="font-size:12px; letter-spacing: -2px;">°C</sup>
</span>`
]]]
temperature_Min_Max: |
[[[
return states["sensor.weather_temperature_mini"].state + ' / '
+ states["sensor.weather_temperature"].state
]]]
temperature_ressentie: |
[[[
return `
<div style="display:block;; margin: 20px 0px 0px 0px; text-align:left">
<div style="display:inline-block; float-left;">
<ha-icon
icon="mdi:thermometer"
style="width: 25px; height: 25px; margin:0px 0px 0px 0px; color: rgba(209,234,245,1);">
</ha-icon>
</div>
<div style="display:inline-block; float-left; margin:-20px 0px 0px 0px">
<span style=" font-size:13px;">
Ressenti
</span>
</div>
<div style="font-size:20px; font-weight:bold; display:inline-gird; float-left; margin:0px 0px 0px 29px">
${states['sensor.openweathermap_feels_like_temperature'].state} °C
</div>
</div>
<div style="display:block;; margin: 0px 0px 0px 0px; text-align:left">
<div style="display:inline-block; float-left; margin: 20px 0px 0px 0px">
<ha-icon
icon="mdi:water-percent"
style="width: 25px; height: 25px; margin:0px 0px 0px 0px; color: rgba(209,234,245,1);">
</ha-icon>
</div>
<div style="display:inline-block; float-left; margin:0px 0px 0px 0px">
<span style=" font-size:13px;">
Risque de pluie
</span>
</div>
<div style="font-size:20px; font-weight:bold; display:inline-gird; float-left; margin:0px 0px 0px 29px">
${states['sensor.VOTRE_COMMUNE_rain_chance'].state} %
</div>
</div>
<div style="display:block;; margin: 20px 0px 0px 0px; text-align:left">
<div style="display:inline-block; float-left; margin: 0px 0px 0px 0px">
<ha-icon
icon="mdi:weather-windy"
style="width: 25px; height: 25px; margin:0px 0px 0px 0px; color: rgba(209,234,245,1);">
</ha-icon>
</div>
<div style="display:inline-block; float-left; margin:-20px 0px 0px 0px">
<span style=" font-size:13px;">
Vent
</span>
</div>
<div style="font-size:20px; font-weight:bold; display:inline-gird; float-left; margin:0px 0px 0px 29px">
${states['sensor.meteo_force_du_vent'].state}
</div>
</div>
`
]]]
ciel: >
[[[
if (states["sensor.meteo_fr"].state == 'Ciel dégagé') return `<ha-icon
icon="mdi:weather-sunny" style="color:#FFFF00;"></ha-icon>`
if (states["sensor.meteo_fr"].state == 'Nuit claire') return `<ha-icon
icon="mdi:weather-night" style="color:#FFFFFF; margin: 0% 0% 0%
3%"></ha-icon>`
if (states["sensor.meteo_fr"].state == 'Nuageux') return `<ha-icon
icon="mdi:weather-partly-cloudy" style="color:#FFFFFF" ></ha-icon>`
if (states["sensor.meteo_fr"].state == 'Bruillard') return `<ha-icon
icon="mdi:weather-fog" style="color:#C0C0C0" ></ha-icon>`
if (states["sensor.meteo_fr"].state == 'Risque de grèle') return `<ha-icon
icon="mdi:weather-hail" style="color:#C0C0C0" ></ha-icon>`
if (states["sensor.meteo_fr"].state == 'Orages') return `<ha-icon
icon="mdi:weather-lightning" style="color:#C0C0C0" ></ha-icon>`
if (states["sensor.meteo_fr"].state == 'Pluies orageuses') return `<ha-icon
icon="mdi:weather-lightning-rainy" style="color:#C0C0C0" ></ha-icon>`
if (states["sensor.meteo_fr"].state == 'Partiellement nuageux') return
`<ha-icon icon="mdi:weather-partly-cloudy" style="color:#FFFFFF"
></ha-icon>`
if (states["sensor.meteo_fr"].state == 'Pluie forte') return `<ha-icon
icon="mdi:weather-pouring" style="color:#FFFFFF" ></ha-icon>`
if (states["sensor.meteo_fr"].state == 'Pluvieux') return `<ha-icon
icon="mdi:weather-rainy" style="color:#FFFFFF" ></ha-icon>`
if (states["sensor.meteo_fr"].state == 'Neige') return `<ha-icon
icon="mdi:weather-snowy" style="color:#CACACA" ></ha-icon>`
if (states["sensor.meteo_fr"].state == 'Pluie verglaçante') return `<ha-icon
icon="mdi:weather-snowy-rainy" style="color:#CACACA" ></ha-icon>`
if (states["sensor.meteo_fr"].state == 'Ensoleillé') return `<ha-icon
icon="mdi:weather-sunny" style="color:#FFFF00"></ha-icon>`
if (states["sensor.meteo_fr"].state == 'Venteux') return `<ha-icon
icon="mdi:weather-windy" style="color:#FFFFFF"></ha-icon>`
if (states["sensor.meteo_fr"].state == 'Venteux variable') return `<ha-icon
icon="mdi:weather-windy-variant" style="color:#FFFFFF"></ha-icon>`
if (states["sensor.meteo_fr"].state == 'Exeptionnel') return `<ha-icon
icon="mdi:weather-sunny" style="color:#FFFF00"></ha-icon>`
]]]
indice_uv: |
[[[
return `
<div style="font-size:12px; font-weight:normal; margin:0px 0px 0px 0px">
${states['sensor.meteo_indice_uv'].state}
</div>
`
]]]
soleil_leve: |
[[[
return `
<div style="display:inline-block; float-left;">
<ha-icon
icon="mdi:weather-sunset-up"
style="width: 20px; height: 20px; margin:0px 0px 0px 0px; color: rgba(209,234,245,1);">
</ha-icon>
</div>
<div style="display:inline-block; float-left; margin:-20px 0px 0px 0px">
<span style=" font-size:13px;">
${states['sensor.weather_leve_soleil'].state}
</span>
</div>
`
]]]
soleil_couche: |
[[[
return `
<div style="display:inline-block; float-left;">
<ha-icon
icon="mdi:weather-sunset-down"
style="width: 20px; height: 20px; margin:0px 0px 0px 0px; color: rgba(209,234,245,1);">
</ha-icon>
</div>
<div style="display:inline-block; float-left; margin:-20px 0px 0px 0px">
<span style=" font-size:13px;">
${states['sensor.weather_couche_soleil'].state}
</span>
</div>
`
]]]
styles:
card:
- background: linear-gradient(45deg,rgba(24, 142, 196,100%), rgba(24, 125, 173,50%))
- height: 280px
- width: 402px
- color: rgba(209,234,245,1)
custom_fields:
name:
- align-self: middle
- justify-self: start
- position: absolute
- top: 2%
- left: 2%
- font-size: 12px
- color: rgba(209,234,245,1)
temperature_label:
- background-color: rgba(16,84,146,1)
- box-shadow: 0px 0px 5px 0px rgb(255,255,255,20%)
- border-radius: 100px
- padding: 35px
- align-self: middle
- justify-self: start
- position: absolute
- top: 15%
- left: 2%
- font-size: 40px
- color: rgba(209,234,245,1)
temperature_Min_Max:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- position: absolute
- top: 63%
- left: 17%
- font-size: 12px
- color: rgba(116,228,239,1)
soleil_leve:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- position: absolute
- top: 78%
- left: 5%
- font-size: 12px
- color: rgba(209,234,245,1)
soleil_couche:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- position: absolute
- top: 78%
- left: 27%
- font-size: 12px
- color: rgba(209,234,245,1)
temperature_ressentie:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- position: absolute
- top: 5%
- left: 55%
- color: rgba(209,234,245,1)
ciel:
- align-self: middle
- justify-self: start
- position: absolute
- top: 20%
- left: 16%
- width: 15%
- color: rgba(209,234,245,1)
indice_uv:
- padding-bottom: 0px
- align-self: middle
- justify-self: start
- position: absolute
- top: 89%
- left: 5%
- color: rgba(209,234,245,1)
grid:
- grid-template-areas: >-
"i name" "temperature_label" "temperature_Min_Max" "soleil_leve_couche"
"temperature_ressentie" "ciel" "indice_uv"
- grid-template-columns: 1fr
- grid-template-rows: >-
1fr min-content min-content min-content min-content min-content
min-content min-content
type: custom:button-card
Informations
A l'ajout du code sur GitHub, je me suis rendu compte que la mise à jour de l'heure n'était pas automatique, je cherche à remédier à ce problème. En vous remerciant pour votre indulgence sur mon code qui n'est pas forcement optimisé, je ne suis pas codeur pro 😉 Certains des codes (sensors) de ce tutoriel peuvent être écrits de manières plus propre (pro) mais s'ils sont codés de cette manière c'est pour des raisons simple d'implémentation dans d'autres codes/sensors.