# Dashboard météo all inclusive V2 (maj 02/08/23)

**URL:** <https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804>\
**Category:** Interface / Lovelace / Thème / Custom Card\
**Created:** [Juin 14, 2023, 3:21 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804 "2023-06-14T15:21:28Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\
**Post date:** [Juin 14, 2023, 3:21 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/1 "2023-06-14T15:21:28Z")

</div>

Bonjour a tous,  
Voici le code complet de ma page Météo ( j'ai renommer quelques entité en sensor.xxxx, a remplacer par les vôtres).

 ![onglet météo maj](https://forum.hacf.fr/uploads/default/original/3X/1/7/175677837d0e5f1b64d67829cce01a48fdcc1a8f.jpeg)

Popup Lune ( quand on clique sur l'icone Lune ):

 ![popup lune](https://forum.hacf.fr/uploads/default/original/3X/f/0/f0a95e28db869abce3765005d9c9877851811987.png)  
Normalement, il a pas de bordure, la dernière maj de Browser\_mod ( 2.3.0 ) casse le style.

> **Code page complète**
>
> ```auto
> - theme: Backend-selected
> title: Météo
> path: meteo
> icon: mdi:weather-partly-cloudy
> background: center / cover no-repeat url("/local/images/wallpaper-meteo.jpg") fixed
> type: custom:horizontal-layout
> badges: []
> cards:
> - type: custom:stack-in-card
> mode: vertical
> keep:
> box_shadow: true
> margin: true
> border_radius: true
> background: true
> outer_padding: false
> cards:
> - type: custom:mod-card
> card_mod:
> style:
> tabbed-card:
> $: |
> mwc-tab {
> background: var(--ha-card-background, var(--card-background-color, gray) );
> border-color: gray;
> border-width: 1px;
> border-top-left-radius: 12px;
> border-top-right-radius: 12px;
> border-style: solid;
> overflow: hidden;
> }
> section article > * {
> --ha-card-border-radius: 0px 0px 12px 12px;
> }
> card:
> type: custom:tabbed-card
> styles:
> '--mdc-theme-primary': '#44739e'
> '--mdc-tab-text-label-color-default': gray
> tabs:
> - card:
> type: custom:meteofrance-weather-card
> entity: weather.xxxx
> name: xxxx
> alertEntity: sensor.11_weather_alert
> detailEntity: sensor.xxxx_rain_chance
> cloudCoverEntity: sensor.xxxx_cloud_cover
> rainChanceEntity: sensor.xxxx_rain_chance
> freezeChanceEntity: sensor.xxxx_freeze_chance
> snowChanceEntity: sensor.xxxx_snow_chance
> uvEntity: sensor.xxxx_uv
> number_of_daily_forecasts: '0'
> number_of_hourly_forecasts: '7'
> card_mod:
> style: |
> :host {
> --card-mod-icon-color: #44739e;
> }
> ha-card {
> top: -15px;
> background: none;
> }
> attributes:
> label: xxxx
> icon: mdi:weather-partly-cloudy
> minWidth: true
> isMinWidthIndicator: true
> - card:
> type: custom:meteofrance-weather-card
> entity: weather.pas_de_la_case
> name: Pas de la Case
> alertEntity: sensor.66_weather_alert
> detailEntity: sensor.pas_de_la_case_humidity
> cloudCoverEntity: sensor.pas_de_la_case_cloud_cover
> rainChanceEntity: sensor.pas_de_la_case_rain_chance
> freezeChanceEntity: sensor.pas_de_la_case_freeze_chance
> snowChanceEntity: sensor.pas_de_la_case_snow_chance
> uvEntity: sensor.pas_de_la_case_uv
> number_of_hourly_forecasts: '7'
> number_of_daily_forecasts: '0'
> card_mod:
> style: |
> :host {
> --card-mod-icon-color: #44739e;
> }
> ha-card {
> top: -15px;
> background: none;
> }                
> attributes:
> label: Pas de la Case
> icon: mdi:weather-partly-cloudy
> minWidth: true
> isMinWidthIndicator: true
> - type: custom:mod-card
> card_mod:
> style:
> .: |
> :host {
> --text-divider-color: rgb(68, 115, 158);
> --text-divider-line-size: 1px;
> }
> ha-card {
> margin-top: -32px;
> background: transparent;
> }
> card:
> type: custom:text-divider-row
> text: Prévisions Jours
> align: left
> - type: custom:meteofrance-weather-card
> number_of_forecasts: '7'
> entity: weather.xxxx
> alert_forecast: false
> details: false
> current: false
> forecast: true
> one_hour_forecast: true
> static_icons: false
> card_mod:
> style: |
> ha-card {
> top: -20px;
> height: 135px;
> background: transparent;
> }
> - type: custom:mod-card
> card_mod:
> style:
> .: |
> :host {
> --text-divider-color: rgb(68, 115, 158);
> --text-divider-line-size: 1px;
> }
> ha-card {
> margin-top: -30px;
> background: transparent;
> }
> card:
> type: custom:text-divider-row
> text: Prévisions xxxx Jours
> align: left
> - type: custom:meteofrance-weather-card
> number_of_forecasts: '7'
> entity: weather.xxxx
> alert_forecast: false
> details: false
> current: false
> forecast: true
> one_hour_forecast: true
> static_icons: false
> card_mod:
> style: |
> ha-card {
> top: -20px;
> height: 135px;
> background: transparent;
> }       
> card_mod:
> style: |
> ha-card {
> box-shadow: 0 0 0 1px gray;
> } 
> - type: custom:stack-in-card
> mode: vertical
> keep:
> box_shadow: false
> margin: false
> border_radius: false
> background: false
> outer_padding: false
> cards:
> - type: custom:stack-in-card
> mode: horizontal
> cards:
> - type: vertical-stack
> cards:
> - type: custom:gap-card
> height: 25
> - type: custom:tempometer-gauge-card
> entity: sensor.xxxx_pressure
> title: Baromètre xxxx
> icon_color: '#44739e'
> min: 960
> max: 1060
> decimals: 0
> severity:
> red: 980
> yellow: 1000
> green: 1020
> card_mod:
> style: |
> :host {
> --paper-card-background-color: transparent;
> --ha-card-border-radius: 0px;
> }
> .gauge-data #percent{
> font-size: 1.8rem !important;
> }
> .gauge-footer{
> font-size: 1.4rem !important;
> }
> .gauge-data #title {
> font-size: 1rem !important;
> }
> - type: vertical-stack
> cards:
> - type: custom:compass-card
> indicator_sensors:
> - sensor: weather.xxxx
> attribute: wind_bearing
> indicator:
> type: arrow_inward
> header:
> title:
> value: VENT
> color: '#44739e'
> value_sensors:
> - sensor: sensor.xxxx_wind_speed
> compass:
> circle:
> background_image: \local\images\maison2.png
> background_opacity: 0.6
> east:
> show: true
> west:
> show: true
> south:
> show: true
> north:
> show: true
> language: fr
> card_mod:
> style: |
> ha-card > div.header > div.name > span {
> font-size: 14px;
> font-weight: bold;
> }
> ha-card {
> margin-top: -13px;
> }
> - type: horizontal-stack
> cards:
> - type: markdown
> content: >
> <center>Arrière <ha-icon
> icon="mdi:home-thermometer-outline"></ha-icon> {{
> states("sensor.lywsd03mmc_c948_temperature") |
> round(1)}}°C</center> <center>Avant <ha-icon
> icon="mdi:home-thermometer"></ha-icon> {{
> states("sensor.temperature_humidity_sensor_exterieur_av_temperature")
> | round(1)}}°C</center>
> card_mod:
> style: |
> ha-card {
> --card-mod-icon-color: #44739e;
> --mdc-icon-size: 28px;
> font-size: 1.4rem !important;
> margin-top: -20px;
> margin-left: -3px;
> background: transparent;
> }
> - type: markdown
> content: >
> <center><ha-icon icon="mdi:water-percent"></ha-icon> {{
> states("sensor.lywsd03mmc_c948_humidity") | round(0)
> }}%</center> <center><ha-icon
> icon="mdi:water-percent"></ha-icon> {{
> states("sensor.temperature_humidity_sensor_exterieur_av_humidity")
> | round(0) }}%</center>
> card_mod:
> style: |
> ha-card {
> --card-mod-icon-color: #44739e;
> --mdc-icon-size: 28px;
> font-size: 1.4rem !important;
> margin-top: -20px;
> margin-left: -18px;
> background: transparent;
> }              
> - type: horizontal-stack
> cards:
> - type: custom:rain-gauge-card
> name: ' '
> language: fr
> entity: sensor.xxxx_daily_precipitation
> is_imperial: false
> border_colour: '#44739e'
> max_level: 30
> show_warning: false
> show_error: false
> card_mod:
> style: |
> #logo {
> width: 70%;
> }
> ha-card {
> margin: -35px 0px -5px 0px;
> background: transparent;
> }
> - type: custom:uv-index-card
> entity: sensor.xxxx_uv
> language: fr
> show_warning: false
> show_error: false
> name: ' '
> card_mod:
> style: |
> ha-card {
> margin: -55px 0px -5px 0px;
> background: transparent;
> }
> ha-card > div > div:nth-child(1) > svg {
> width: 80%;
> margin-top: 21px;
> }
> - type: iframe
> url: >-
> https://embed.windy.com/embed2.html?lat=43.225&lon=2.666&detailLat=43.227&detailLon=2.596&width=650&height=450&zoom=8&level=surface&overlay=wind&product=ecmwf&menu=&message=true&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=km%2Fh&metricTemp=%C2%B0C&radarRange=-1
> aspect_ratio: 80%
> card_mod:
> style: |
> ha-card {
> border-radius: 0px;
> }
> card_mod:
> style: |
> ha-card {
> box-shadow: 0 0 0 1px gray;
> } 
> - type: custom:stack-in-card
> mode: vertical
> keep:
> box_shadow: true
> margin: false
> border_radius: true
> background: false
> outer_padding: false
> cards:
> - type: vertical-stack
> cards:
> - type: horizontal-stack
> cards:
> - type: vertical-stack
> cards:
> - type: custom:compass-card
> language: fr
> header:
> title:
> value: SOLEIL
> color: '#44739e'
> indicator_sensors:
> - sensor: sun.sun
> attribute: azimuth
> state_abbreviation:
> show: false
> indicator:
> type: circle
> color: orange
> dynamic_style:
> sensor: sun.sun
> attribute: elevation
> bands:
> - from_value: 0
> show: true
> value_sensors:
> - sensor: sun.sun
> attribute: elevation
> units: °
> decimals: 1
> compass:
> circle:
> background_image: \local\images\maison2.png
> background_opacity: 0.6
> north:
> show: true
> offset: 0
> east:
> show: true
> west:
> show: true
> south:
> show: true
> card_mod:
> style: |
> ha-card > div.header > div.name > span {
> font-size: 14px;
> font-weight: bold;
> }
> ha-card {
> margin-top: -13px;
> }
> - type: vertical-stack
> cards:
> - type: custom:sun-card
> showAzimuth: true
> showElevation: true
> card_mod:
> style: >
> .sun-card-footer .sun-card-text-subtitle {
> font-size: 0.91rem !important;
> color: var(--primary-text-color) !important;
> }
> 
> .sun-card-header .sun-card-text-subtitle {
> font-size: 0.91rem !important;
> color: var(--primary-text-color) !important;
> }
> 
> .sun-card-header .sun-card-text-time {
> font-size: 0.8rem !important;
> color: var(--primary-text-color) !important;
> }
> 
> .sun-card-footer .sun-card-text-time {
> font-size: 0.8rem !important;
> color: var(--primary-text-color) !important;
> }
> 
> ha-card > div > div.sun-card-body {
> padding-top: 0;
> }
> 
> ha-card > div > div.sun-card-footer >
> div:nth-child(1) {
> padding-top: 0;
> }
> 
> ha-card > div > div.sun-card-footer >
> div:nth-child(2) {
> padding-top: 0.5rem;
> }
> 
> ha-card {
> margin-top: -13px;
> }
> - type: custom:mod-card
> card_mod:
> style:
> .: |
> :host {
> --text-divider-color: rgb(68, 115, 158);
> --text-divider-line-size: 1px;
> }
> ha-card {
> top: -20px;
> }
> card:
> type: custom:text-divider-row
> text: CYCLES
> align: left
> - type: glance
> entities:
> - entity: sensor.lune
> card_mod:
> style: |
> div:not(.name) {
> text-overflow: unset !important;
> white-space: unset !important;
> }
> state-badge {
> height: 35px !important;
> width: 35px !important;
> }
> - entity: sun.sun
> name: Soleil
> card_mod:
> style: |
> div:not(.name) {
> text-overflow: unset !important;
> white-space: unset !important;
> }
> state-badge {
> height: 55px !important;
> width: 55px !important;
> margin: -1%;
> }
> - entity: sensor.season
> name: Saison
> card_mod:
> style: |
> div:not(.name) {
> text-overflow: unset !important;
> white-space: unset !important;
> }
> state-badge {
> height: 37px !important;
> width: 37px !important;
> 
> }
> state_color: false
> show_name: true
> show_state: true
> card_mod:
> style: |
> ha-card {
> --paper-item-icon-color: #44739e;
> --ha-card-header-color: #44739e;
> --ha-card-header-font-size: 17px;
> --mdc-icon-size: 39px;
> font-size: 14px;
> height: 90px !important;
> top: -35px
> }
> - type: custom:mod-card
> card_mod:
> style:
> .: |
> :host {
> --text-divider-color: rgb(68, 115, 158);
> --text-divider-line-size: 1px;
> }
> card:
> type: custom:text-divider-row
> text: POLLENS
> align: left
> - type: custom:mod-card
> card_mod:
> style: |
> ha-card {
> margin: -15px -5px 0px -5px;
> }  
> card:
> type: horizontal-stack
> cards:
> - type: custom:button-card
> entity: sensor.pollens_11
> name: 'Pollens Aude:'
> icon: mdi:alert-decagram-outline
> layout: icon_name_state2nd
> color_type: icon
> show_name: true
> show_state: true
> state:
> - value: faible
> operator: '=='
> color: green
> styles:
> state:
> - color: green
> - value: moyen
> operator: '=='
> color: orange
> styles:
> state:
> - color: orange
> - value: élevé
> operator: '=='
> color: red
> styles:
> state:
> - color: red
> size: 55%
> styles:
> card:
> - '--mdc-ripple-color': rgb(68, 115, 158)
> - '--mdc-ripple-press-opacity': 0.5
> name:
> - font-size: 16px
> state:
> - font-weight: bold
> - font-size: 16px
> - type: custom:bar-card
> entities:
> - entity: sensor.pollens_11_risklevel
> name: Risque Pollen
> icon: mdi:alert-circle
> height: 47px
> color: red
> min: 0
> max: 3
> positions:
> indicator: 'off'
> icon: 'off'
> severity:
> - color: Red
> from: 2
> to: 3
> - color: Orange
> from: 1
> to: 2
> - color: Green
> from: 0
> to: 1
> card_mod:
> style: >
> bar-card-currentbar, bar-card-backgroundbar {
> border-radius: 25px;
> }
> 
> #states > bar-card-row > bar-card-card >
> bar-card-background > bar-card-contentbar > bar-card-name
> {
> font-size: 16px;
> font-weight: bold;
> } ha-card {
> margin-top: -2px;
> background: none;
> }
> - type: custom:mod-card
> card_mod:
> style: |
> ha-card {
> margin: -5px 5px 7px 5px;
> }
> card:
> type: custom:auto-entities
> card:
> type: grid
> columns: 5
> square: true
> card_param: cards
> filter:
> include:
> - entity_id: sensor.pollens_11_*
> options:
> type: custom:button-card
> color_type: icon
> aspect_ratio: 1/1
> show_name: true
> show_state: true
> name: |
> [[[
> return entity.attributes.pollen_name + ":"
> ]]]
> styles:
> card:
> - '--mdc-ripple-color': rgb(68, 115, 158)
> - '--mdc-ripple-press-opacity': 0.5
> - border-radius: 8px
> name:
> - font-size: 14px
> state:
> - font-weight: bold
> - font-size: 12px
> state:
> - value: faible
> operator: '=='
> color: green
> styles:
> card:
> - box-shadow: 0px 0px 0px 2px green
> state:
> - color: green
> - value: moyen
> operator: '=='
> color: orange
> styles:
> card:
> - box-shadow: 0px 0px 0px 2px orange
> state:
> - color: orange
> - value: élevé
> operator: '=='
> color: red
> styles:
> card:
> - box-shadow: 0px 0px 0px 2px red
> state:
> - color: red
> size: 50%
> exclude:
> - entity_id: sensor.pollens_11_*
> state: nul
> - entity_id: sensor.pollens_11
> - entity_id: sensor.pollens_11_risklevel
> sort:
> method: name
> reverse: false
> - type: custom:popup-card
> entity: sensor.lune
> style: |-
> --popup-border-radius: 15px;
> --popup-background-color: transparent;
> --popup-border-width: 0px;
> card:
> type: picture-elements
> image: /local/images/phases-lunaires.jpg
> elements:
> - type: conditional
> conditions:
> - entity: sensor.moon
> state: new_moon
> elements:
> - type: image
> image: /local/images/circle.png
> style:
> top: 50%
> left: 54%
> width: 11%
> border: 2px solid yellow
> border-radius: 50%
> - type: conditional
> conditions:
> - entity: sensor.moon
> state: waxing_crescent
> elements:
> - type: image
> image: /local/images/circle.png
> style:
> top: 30%
> left: 50%
> width: 11%
> border: 2px solid yellow
> border-radius: 50%
> - type: conditional
> conditions:
> - entity: sensor.moon
> state: first_quarter
> elements:
> - type: image
> image: /local/images/circle.png
> style:
> top: 24%
> left: 36%
> width: 11%
> border: 2px solid yellow
> border-radius: 50%
> - type: conditional
> conditions:
> - entity: sensor.moon
> state: waxing_gibbous
> elements:
> - type: image
> image: /local/images/circle.png
> style:
> top: 31%
> left: 23.3%
> width: 12%
> border: 2px solid yellow
> border-radius: 50%
> - type: conditional
> conditions:
> - entity: sensor.moon
> state: full_moon
> elements:
> - type: image
> image: /local/images/circle.png
> style:
> top: 50%
> left: 17.7%
> width: 11.5%
> border: 2px solid yellow
> border-radius: 50%
> - type: conditional
> conditions:
> - entity: sensor.moon
> state: waning_gibbous
> elements:
> - type: image
> image: /local/images/circle.png
> style:
> top: 70%
> left: 23.5%
> width: 11.5%
> border: 2px solid yellow
> border-radius: 50%
> - type: conditional
> conditions:
> - entity: sensor.moon
> state: last_quarter
> elements:
> - type: image
> image: /local/images/circle.png
> style:
> top: 77%
> left: 36%
> width: 11.5%
> border: 2px solid yellow
> border-radius: 50%
> - type: conditional
> conditions:
> - entity: sensor.moon
> state: waning_crescent
> elements:
> - type: image
> image: /local/images/circle.png
> style:
> top: 70%
> left: 50%
> width: 11.5%
> border: 2px solid yellow
> border-radius: 50%
> card_mod:
> style: |
> ha-card {
> box-shadow: 0 0 0 1px gray;
> }
> 
> ```

**Attention:** Faut installer la version beta 1.9.2-beta-2 ( ou plus pour le futur ) de la carte météo france. Les forcasts on été supprimer en avril 2024. Si vous utiliser pas la carte en version 1.9.2-beta-2, vous aurez plus les previsions météo.

Les cartes utilisées :

- [GitHub - hacf-fr/lovelace-meteofrance-weather-card: ⛅ Carte dédiée à l'intégration Météo-France pour Home Assistant. · GitHub](https://github.com/hacf-fr/lovelace-meteofrance-weather-card)
- [GitHub - custom-cards/stack-in-card: 🛠 group multiple cards into one card without the borders · GitHub](https://github.com/custom-cards/stack-in-card)
- [GitHub - kinghat/tabbed-card: a custom card for home assistant that utilizes tabs to segregate individual cards. · GitHub](https://github.com/kinghat/tabbed-card)
- [GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card · GitHub](https://github.com/thomasloven/lovelace-card-mod)
- [GitHub - SNoof85/lovelace-tempometer-gauge-card-deprecated: Home Assistant Lovelace custom card with Barometer, Thermomer themes and customs themes as well ! · GitHub](https://github.com/SNoof85/lovelace-tempometer-gauge-card-deprecated)
- [GitHub - tomvanswam/compass-card: A Lovelace card that shows a directional indicator on a compass for Home Assistant · GitHub](https://github.com/tomvanswam/compass-card)
- [GitHub - t1gr0u/rain-gauge-card: A Lovelace card that shows the rain gauge for Home Assistant · GitHub](https://github.com/t1gr0u/rain-gauge-card)
- [GitHub - t1gr0u/uv-index-card: A Lovelace card that shows a the UV index and risk level for Home Assistant · GitHub](https://github.com/t1gr0u/uv-index-card)
- [GitHub - trollix/home-assistant-sun-card: Home assistant lovelace sun card based on Google weather design · GitHub](https://github.com/trollix/home-assistant-sun-card)
- [GitHub - rejuvenate/lovelace-horizon-card: Sun Card successor: Visualize the position of the Sun over the horizon. · GitHub](https://github.com/rejuvenate/lovelace-horizon-card)
- [GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant · GitHub](https://github.com/custom-cards/button-card)
- [GitHub - custom-cards/bar-card: Customizable Animated Bar card for Home Assistant Lovelace · GitHub](https://github.com/custom-cards/bar-card)
- [GitHub - thomasloven/lovelace-auto-entities: 🔹Automatically populate the entities-list of lovelace cards · GitHub](https://github.com/thomasloven/lovelace-auto-entities)
- [GitHub - iantrich/text-divider-row: 🗂 Text Divider Row · GitHub](https://github.com/iantrich/text-divider-row)
- [GitHub - thomasloven/hass-browser\_mod: 🔹 A Home Assistant integration to turn your browser into a controllable entity and media player · GitHub](https://github.com/thomasloven/hass-browser_mod)
- [GitHub - thomasloven/lovelace-layout-card: 🔹 Get more control over the placement of lovelace cards. · GitHub](https://github.com/thomasloven/lovelace-layout-card)
- [GitHub - bramkragten/swipe-card: Card that allows you to swipe throught multiple cards for Home Assistant Lovelace · GitHub](https://github.com/bramkragten/swipe-card)
- [GitHub - chris60600/pollens-home-assistant: Retrieve French Pollens risks in HomeAssistant · GitHub](https://github.com/chris60600/pollens-home-assistant)

Images :

 ![phases-lunaires](https://forum.hacf.fr/uploads/default/original/3X/f/e/fe5fa7e6beefe164d0ad4f732f30ee9f2f3118b8.jpeg)  
 ![circle](https://forum.hacf.fr/uploads/default/original/3X/e/2/e22c0b6a7fb437461530006f59ddc45671d4cc69.png)  
 ![wallpaper-meteo](https://forum.hacf.fr/uploads/default/original/3X/9/3/932af076de58a0b90fb133ae823fd2e03f1a5a94.jpeg)

Il manque l'image de la maison ( vue satélitte ) a faire pas vos soin.

Pour l'entité lune, il faut installer l'intégration Lune et suivre ce post pour appliquer des images [[CARTE] Les phases de la lune en image](https://forum.hacf.fr/t/carte-les-phases-de-la-lune-en-image/9768)

Pour l'entité Soleil et Saison ( il faut installer l'intégration ) avec les icones colorées voir ce post [Dashboard météo all inclusive V2 (maj 02/08/23) - #13 par WarC0zes](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive/25804/13)

**MAJ 20/07/23 :**

J'ai changer la carte sun-card, par la carte horizon-card qui ajoute le support de la lune.

 ![horizon-card](https://forum.hacf.fr/uploads/default/original/3X/0/d/0db993801e7157401059e5438147033a7f8dd64c.png)

> **Code**
>
> ```auto
> - type: vertical-stack
> cards:
> - type: horizontal-stack
> cards:
> - type: vertical-stack
> cards:
> - type: custom:compass-card
> language: fr
> header:
> title:
> value: SOLEIL
> color: '#44739e'
> indicator_sensors:
> - sensor: sun.sun
> attribute: azimuth
> state_abbreviation:
> show: false
> indicator:
> type: circle
> color: orange
> dynamic_style:
> sensor: sun.sun
> attribute: elevation
> bands:
> - from_value: 0
> show: true
> value_sensors:
> - sensor: sun.sun
> attribute: elevation
> units: °
> decimals: 1
> compass:
> circle:
> background_image: \local\images\maison2.png
> background_opacity: 0.6
> north:
> show: true
> offset: 0
> east:
> show: true
> west:
> show: true
> south:
> show: true
> card_mod:
> style: |
> ha-card > div.header > div.name > span {
> font-size: 14px;
> font-weight: bold;
> }
> ha-card {
> margin-top: -13px;
> }
> - type: vertical-stack
> cards:
> - type: custom:horizon-card
> moon: true
> fields:
> azimuth: true
> elevation: true
> moonrise: true
> moonset: true
> moon_phase: false
> time_format: 24
> card_mod:
> style: |
> :host {
> --hc-lines: grey !important;
> --hc-sun-color: orange !important;
> }
> .horizon-card {
> padding: 0.1em !important;
> }
> .horizon-card-header {
> margin-top: 3px !important;
> }
> .horizon-card-graph {
> margin: 0.5em 0.1em -1em 0.1em !important;
> }
> .horizon-card-footer {
> margin-bottom: 15px !important;
> }
> .horizon-card-footer > * {
> margin-top: 5px !important;
> }
> .horizon-card-field-name {
> font-size: 1rem !important;
> color: rgb(68, 115, 158) !important;
> }
> .horizon-card-field-value {
> font-size: 0.9rem !important;
> }
> 
> ```

=====================================================================================

**MAJ 02/08/2023 :**

Page météo V2

- Ajout menu sidebar ( le code est pas inclus ), voir ce post [[CARTE] sidebar-card](https://forum.hacf.fr/t/carte-sidebar-card/26052)

- Modification de la carte météo avec swipe-card au lieu de tabbed-card ( défiler a gauche pour changer de carte). Swipe-card, est fournie ci-dessus avec les autres lien de carte.

- Ajout des cartes Météo France alerte aujourd'hui et demain ( cliquer dessus, affiche la carte en grand).  
Pour créer les sensors, voir ce post [Alerte météo ( archive ) - #512 par starworld](https://forum.hacf.fr/t/alerte-meteo/23930/512)

- Ajout carte des éclairs sur une map. ( avec swipe-card, carte windy + carte map éclair. Flèche pour changer de carte)

- Ajout d'une carte éclair, avec compass-card et indique le sens et la distance ou est tomber l'éclair. Deux bar avec nombre d'éclair actuelle ou mensuel.  
Pour le mensuel `sensor.compteur_eclair_mensuel`, dans Entrées créer un compteur de service public, avec la source `sensor.blitzortung_lightning_counter` et un reset mensuel.  
pour installer Blitzortung allez voir ce post [Intégration pour surveillance des orages (mondial)](https://forum.hacf.fr/t/integration-pour-surveillance-des-orages-mondial/243)

- Ajout carte sécheresse.

- Quelques modifications diverses. (je pense que j'ai annoncer le principal )

 ![page météo v2](https://forum.hacf.fr/uploads/default/original/3X/1/a/1a4a3f9b2d3a04c2e99e073bbedd86c083ef7bd2.jpeg)

> **Code page complète**
>
> ```auto
> - theme: Backend-selected
> title: Météo
> path: meteo
> icon: mdi:weather-partly-cloudy
> background: center / cover no-repeat url("/local/images/wallpaper-meteo.jpg") fixed
> layout:
> height: auto
> margin: 0px 4px 0px 0px
> type: custom:horizontal-layout
> badges: []
> cards:
> - type: custom:stack-in-card
> mode: vertical
> keep:
> box_shadow: true
> margin: true
> border_radius: true
> background: true
> outer_padding: false
> cards:
> - type: custom:swipe-card
> start_card: 1
> reset_after: 20
> parameters:
> pagination:
> type: bullets
> cards:
> - type: vertical-stack
> cards:
> - type: custom:meteofrance-weather-card
> entity: weather.xxxx
> name: xxxx
> alertEntity: sensor.11_weather_alert
> detailEntity: sensor.xxxx_rain_chance
> cloudCoverEntity: sensor.xxxx_cloud_cover
> rainChanceEntity: sensor.xxxx_rain_chance
> freezeChanceEntity: sensor.xxxx_freeze_chance
> snowChanceEntity: sensor.xxxx_snow_chance
> uvEntity: sensor.xxxx_uv
> number_of_daily_forecasts: '0'
> number_of_hourly_forecasts: '7'
> card_mod:
> style: |
> :host {
> --card-mod-icon-color: #44739e;
> }
> ha-card {
> top: -15px;
> background: none;
> }
> - type: vertical-stack
> cards:
> - type: custom:meteofrance-weather-card
> entity: weather.pas_de_la_case
> name: Pas de la Case
> alertEntity: sensor.66_weather_alert
> detailEntity: sensor.pas_de_la_case_humidity
> cloudCoverEntity: sensor.pas_de_la_case_cloud_cover
> rainChanceEntity: sensor.pas_de_la_case_rain_chance
> freezeChanceEntity: sensor.pas_de_la_case_freeze_chance
> snowChanceEntity: sensor.pas_de_la_case_snow_chance
> uvEntity: sensor.pas_de_la_case_uv
> number_of_hourly_forecasts: '7'
> number_of_daily_forecasts: '0'
> card_mod:
> style: |
> :host {
> --card-mod-icon-color: #44739e;
> }
> ha-card {
> top: -15px;
> background: none;
> }
> - type: custom:mod-card
> card_mod:
> style:
> .: |
> :host {
> --text-divider-color: rgb(68, 115, 158);
> --text-divider-line-size: 1px;
> }
> ha-card {
> margin-top: -25px;
> background: transparent;
> }
> card:
> type: custom:text-divider-row
> text: Prévisions Jours
> align: left
> - type: custom:meteofrance-weather-card
> number_of_forecasts: '7'
> entity: weather.xxxx
> alert_forecast: false
> details: false
> current: false
> forecast: true
> one_hour_forecast: true
> static_icons: false
> card_mod:
> style: |
> ha-card {
> top: -20px;
> height: 135px;
> background: transparent;
> }
> - type: custom:mod-card
> card_mod:
> style:
> .: |
> :host {
> --text-divider-color: rgb(68, 115, 158);
> --text-divider-line-size: 1px;
> }
> ha-card {
> margin-top: -22px;
> background: transparent;
> }
> card:
> type: custom:text-divider-row
> text: Prévisions Malataverne Jours
> align: left
> - type: custom:meteofrance-weather-card
> number_of_forecasts: '7'
> entity: weather.xxxx
> alert_forecast: false
> details: false
> current: false
> forecast: true
> one_hour_forecast: true
> static_icons: false
> card_mod:
> style: |
> ha-card {
> top: -20px;
> height: 135px;
> background: transparent;
> }       
> card_mod:
> style: |
> ha-card {
> box-shadow: 0 0 0 1px gray;
> } 
> - type: custom:stack-in-card
> mode: vertical
> keep:
> box_shadow: false
> margin: false
> border_radius: false
> background: false
> outer_padding: false
> cards:
> - type: custom:stack-in-card
> mode: horizontal
> cards:
> - type: vertical-stack
> cards:
> - type: custom:gap-card
> height: 25
> - type: custom:tempometer-gauge-card
> entity: weather.xxxx
> attribute: pressure
> title: Baromètre xxxx
> icon_color: '#44739e'
> min: 960
> max: 1060
> decimals: 0
> severity:
> red: 980
> yellow: 1000
> green: 1020
> card_mod:
> style: |
> :host {
> --paper-card-background-color: transparent;
> --ha-card-border-radius: 0px;
> }
> .gauge-data #percent{
> font-size: 1.8rem !important;
> }
> .gauge-footer{
> font-size: 1.4rem !important;
> }
> .gauge-data #title {
> font-size: 1rem !important;
> }
> - type: vertical-stack
> cards:
> - type: custom:compass-card
> indicator_sensors:
> - sensor: weather.xxxx
> attribute: wind_bearing
> indicator:
> type: arrow_inward
> show: false
> dynamic_style:
> sensor: weather.xxxx
> attribute: wind_bearing
> bands:
> - from_value: 3
> show: true
> header:
> title:
> value: VENT
> color: '#44739e'
> icon:
> color: rgb(3, 169, 244)
> dynamic_style:
> sensor: sensor.xxxx_wind_speed
> bands:
> - from_value: 25
> color: yellow
> - from_value: 45
> color: orange
> - from_value: 65
> color: red
> value_sensors:
> - sensor: weather.xxxx
> attribute: wind_speed
> units: Km
> compass:
> circle:
> background_image: \local\images\maison2.png
> background_opacity: 0.6
> east:
> show: true
> west:
> show: true
> south:
> show: true
> north:
> show: true
> language: fr
> card_mod:
> style: |
> ha-card > div.header > div.name > span {
> font-size: 14px;
> font-weight: bold;
> }
> ha-card {
> margin-top: -13px;
> }
> - type: horizontal-stack
> cards:
> - type: custom:rain-gauge-card
> name: ' '
> language: fr
> entity: sensor.xxxx_daily_precipitation
> is_imperial: false
> border_colour: '#44739e'
> max_level: 30
> show_warning: false
> show_error: false
> card_mod:
> style: |
> #logo {
> width: 70%;
> }
> ha-card {
> margin: -30px 0px -5px 0px;
> background: transparent;
> }
> - type: custom:uv-index-card
> entity: sensor.xxxx_uv
> language: fr
> show_warning: false
> show_error: false
> name: ' '
> card_mod:
> style: |
> ha-card {
> margin: -50px 0px -5px 0px;
> background: transparent;
> }
> ha-card > div > div:nth-child(1) > svg {
> width: 80%;
> margin-top: 21px;
> }
> - type: horizontal-stack
> cards:
> - type: markdown
> content: >
> <center>Avant <ha-icon icon="mdi:home-thermometer"></ha-icon>
> {{
> states("sensor.temperature_humidity_sensor_exterieur_av_temperature")
> | round(1)}}°C</center> <center>Arrière <ha-icon
> icon="mdi:home-thermometer-outline"></ha-icon> {{
> states("sensor.lywsd03mmc_c948_temperature") |
> round(1)}}°C</center>
> card_mod:
> style: |
> ha-card {
> --card-mod-icon-color: #44739e;
> --mdc-icon-size: 28px;
> font-size: 1.4rem !important;
> margin-top: -20px;
> margin-left: -3px;
> background: transparent;
> }
> - type: markdown
> content: >
> <center><ha-icon icon="mdi:water-percent"></ha-icon> {{
> states("sensor.temperature_humidity_sensor_exterieur_av_humidity")
> | round(0) }}%</center> <center><ha-icon
> icon="mdi:water-percent"></ha-icon> {{
> states("sensor.lywsd03mmc_c948_humidity") | round(0)
> }}%</center>          
> card_mod:
> style: |
> ha-card {
> --card-mod-icon-color: #44739e;
> --mdc-icon-size: 28px;
> font-size: 1.4rem !important;
> margin-top: -20px;
> margin-left: -18px;
> background: transparent;
> }
> - type: custom:mod-card
> card_mod:
> style:
> .: |
> :host {
> --text-divider-color: rgb(68, 115, 158);
> --text-divider-line-size: 1px;
> }
> ha-card {
> top: -20px;
> }
> card:
> type: custom:text-divider-row
> text: CARTES
> align: left
> - type: custom:mod-card
> card_mod:
> style: |
> ha-card {
> margin: -70px 5px -23px 5px;
> }
> card:
> type: horizontal-stack
> cards:
> - type: custom:button-card
> entity: camera.mf_alerte_today
> name: Alerte météo <br/>Aujourd'hui
> show_icon: false
> show_entity_picture: true
> aspect_ratio: 1/1
> size: 100%
> styles:
> card:
> - '--mdc-ripple-color': none
> - padding: 15%
> card_mod:
> style: |
> ha-card {
> border: none;
> background: transparent;
> }             
> - type: custom:button-card
> entity: camera.mf_alerte_tomorrow
> name: Alerte météo <br/>Demain
> aspect_ratio: 1/1
> show_icon: false
> show_entity_picture: true
> size: 100%
> styles:
> card:
> - '--mdc-ripple-color': none
> - padding: 15%
> card_mod:
> style: |
> ha-card {
> border: none;
> background: transparent;
> }
> - type: custom:swipe-card
> start_card: 1
> reset_after: 20
> parameters:
> pagination:
> type: bullets
> navigation:
> keyboard:
> enabled: true
> onlyInViewport: true
> cards:
> - type: iframe
> url: >-
> https://embed.windy.com/embed2.html?lat=43.225&lon=2.666&detailLat=43.227&detailLon=2.596&width=650&height=450&zoom=8&level=surface&overlay=wind&product=ecmwf&menu=&message=true&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=km%2Fh&metricTemp=%C2%B0C&radarRange=-1
> aspect_ratio: 69%
> card_mod:
> style: |
> ha-card {
> border-radius: 0px;
> }
> - type: map
> entities:
> - entity: zone.home
> geo_location_sources:
> - blitzortung
> default_zoom: 9
> dark_mode: true
> aspect_ratio: '4:2.76'
> hours_to_show: 24
> card_mod:
> style: |
> ha-card {
> border-radius: 0px;
> }
> card_mod:
> style: |
> ha-card {
> box-shadow: 0 0 0 1px gray;
> } 
> - type: custom:stack-in-card
> mode: vertical
> keep:
> box_shadow: true
> margin: false
> border_radius: true
> background: false
> outer_padding: false
> cards:
> - type: horizontal-stack
> cards:
> - type: custom:compass-card
> language: fr
> header:
> title:
> value: SOLEIL
> color: '#44739e'
> icon:
> color: green
> dynamic_style:
> sensor: sensor.xxxx_uv
> bands:
> - from_value: 1
> color: green
> - from_value: 4
> color: yellow
> - from_value: 7
> color: orange
> - from_value: 9
> color: red
> - from_value: 12
> color: purple
> indicator_sensors:
> - sensor: sun.sun
> attribute: azimuth
> state_abbreviation:
> show: true
> indicator:
> type: circle
> color: orange
> dynamic_style:
> sensor: sun.sun
> attribute: elevation
> bands:
> - from_value: 0
> show: true
> value_sensors:
> - sensor: sun.sun
> attribute: elevation
> units: °
> decimals: 1
> compass:
> circle:
> background_image: \local\images\maison2.png
> background_opacity: 0.6
> north:
> show: true
> offset: 0
> east:
> show: true
> west:
> show: true
> south:
> show: true
> card_mod:
> style: |
> ha-card > div.header > div.name > span {
> font-size: 14px;
> font-weight: bold;
> }
> ha-card {
> margin-top: -13px;
> }
> - type: vertical-stack
> cards:
> - type: custom:horizon-card
> moon: true
> fields:
> azimuth: true
> elevation: true
> moonrise: true
> moonset: true
> moon_phase: false
> time_format: 24
> card_mod:
> style: |
> :host {
> --hc-lines: grey !important;
> --hc-sun-color: orange !important;
> }
> .horizon-card {
> padding: 0.1em !important;
> }
> .horizon-card-header {
> margin-top: 3px !important;
> }
> .horizon-card-graph {
> margin: 0.5em 0.1em -1em 0.1em !important;
> }
> .horizon-card-footer {
> margin-bottom: 15px !important;
> }
> .horizon-card-footer > * {
> margin-top: 5px !important;
> }
> .horizon-card-field-name {
> font-size: 1rem !important;
> color: rgb(68, 115, 158) !important;
> }
> .horizon-card-field-value {
> font-size: 0.9rem !important;
> }
> - type: horizontal-stack
> cards:
> - type: custom:compass-card
> indicator_sensors:
> - sensor: sensor.blitzortung_lightning_azimuth
> indicator:
> type: arrow_outward
> color: orange
> show: false
> dynamic_style:
> sensor: sensor.blitzortung_lightning_distance
> bands:
> - from_value: 1
> show: true
> value_sensors:
> - sensor: sensor.blitzortung_lightning_distance
> - sensor: sensor.blitzortung_lightning_counter
> header:
> title:
> value: Éclair
> color: '#44739e'
> icon:
> color: green
> dynamic_style:
> sensor: sensor.blitzortung_lightning_counter
> bands:
> - from_value: 30
> color: yellow
> - from_value: 100
> color: orange
> - from_value: 200
> color: red
> - from_value: 400
> color: purple
> compass:
> circle:
> background_image: \local\images\maison2.png
> background_opacity: 0.6
> north:
> show: true
> east:
> show: true
> west:
> show: true
> south:
> show: true
> language: fr
> card_mod:
> style: |
> .sensor-1 {
> line-height: 18px;
> }    
> .sensor-1 .value {
> font-size: 18px !important; 
> }
> .sensor-0 .value {
> {% if is_state('sensor.blitzortung_lightning_distance', 'unknown') %}
> font-size: 20px !important;
> {% else %}
> font-size: 26px !important;
> {% endif %}
> }
> ha-card {
> margin-top: -16px;
> }
> - type: custom:bar-card
> entities:
> - entity: sensor.blitzortung_lightning_counter
> name: Compteur d'éclair
> - entity: sensor.compteur_eclair_mensuel
> name: Compteur d'éclair Mensuelle
> icon: mdi:flash-alert
> direction: up
> height: 188px
> width: 71px
> columns: 2
> stack: horizontal
> positions:
> indicator: 'off'
> icon: 'off'
> severity:
> - color: Green
> from: 0
> to: 30
> - color: yellow
> from: 31
> to: 99
> - color: Orange
> from: 100
> to: 199
> - color: Red
> from: 200
> to: 400
> card_mod:
> style: >
> bar-card-currentbar, bar-card-backgroundbar {
> border-radius: 50px;
> } #states > bar-card-row > bar-card-card >
> bar-card-background > bar-card-contentbar > bar-card-name {
> font-size: 12px;
> } bar-card-name {
> margin-top: 13px;
> margin-left: 8px;
> } ha-card {
> margin: -16px 16px 16px 16px;              
> } bar-card-value {
> color: black;
> font-weight: bold;
> }                
> - type: custom:mod-card
> card_mod:
> style:
> .: |
> :host {
> --text-divider-color: rgb(68, 115, 158);
> --text-divider-line-size: 1px;
> }
> ha-card {
> top: -30px;
> }
> card:
> type: custom:text-divider-row
> text: CYCLES
> align: left
> - type: grid
> columns: 3
> square: false
> cards:
> - type: custom:button-card
> entity: sensor.lune
> show_state: true
> show_icon: false
> show_entity_picture: true
> aspect_ratio: 1.5/1
> size: 23%
> styles:
> card:
> - '--mdc-ripple-color': rgb(68, 115, 158)
> - '--mdc-ripple-press-opacity': 0.5
> - border-radius: 8px
> state:
> - font-size: 13px
> card_mod:
> style: |
> ha-card {
> margin-top: -45px
> } 
> - type: custom:button-card
> entity: sun.sun
> name: Soleil
> show_state: true
> show_icon: false
> show_entity_picture: true
> aspect_ratio: 1.5/1
> size: 36%
> state_display: |
> [[[ 
> if (entity.state === 'below_horizon') return "Sous l'horizon";
> else return "Au-dessus de l'horizon";
> ]]]
> styles:
> card:
> - '--mdc-ripple-color': rgb(68, 115, 158)
> - '--mdc-ripple-press-opacity': 0.5
> - border-radius: 8px
> state:
> - font-size: 13px
> card_mod:
> style: |
> ha-card {
> margin-top: -45px
> }             
> - type: custom:button-card
> entity: sensor.season
> name: Saison
> show_state: true
> show_icon: false
> show_entity_picture: true
> aspect_ratio: 1.5/1
> size: 28%
> state_display: |
> [[[ 
> if (entity.state === 'summer') return 'été';
> if (entity.state === 'winter') return 'Hiver';
> if (entity.state === 'autumn') return 'Automne';
> else return 'Printemps';
> ]]]
> styles:
> card:
> - '--mdc-ripple-color': rgb(68, 115, 158)
> - '--mdc-ripple-press-opacity': 0.5
> - border-radius: 8px
> state:
> - font-size: 13px
> card_mod:
> style: |
> ha-card {
> margin-top: -45px
> }             
> - type: custom:mod-card
> card_mod:
> style:
> .: |
> :host {
> --text-divider-color: rgb(68, 115, 158);
> --text-divider-line-size: 1px;
> }
> ha-card {
> margin-top: -50px;
> }
> card:
> type: custom:text-divider-row
> text: POLLENS
> align: left
> - type: custom:mod-card
> card_mod:
> style: |
> ha-card {
> margin: -30px -5px 0px -5px;
> }  
> card:
> type: horizontal-stack
> cards:
> - type: custom:button-card
> entity: sensor.pollens_11
> name: 'Pollens Aude:'
> icon: mdi:alert-decagram-outline
> layout: icon_name_state2nd
> color_type: icon
> show_name: true
> show_state: true
> state:
> - value: nul
> operator: '=='
> color: black
> icon: mdi:decagram-outline
> styles:
> state:
> - color: black
> - value: faible
> operator: '=='
> color: green
> icon: mdi:check-decagram-outline
> styles:
> state:
> - color: green
> - value: moyen
> operator: '=='
> color: rgb(242,234,26)
> icon: mdi:alert-decagram-outline
> styles:
> state:
> - color: rgb(242,234,26)
> - value: élevé
> operator: '=='
> color: red
> icon: mdi:alert-decagram
> styles:
> state:
> - color: red
> size: 50%
> styles:
> card:
> - '--mdc-ripple-color': rgb(68, 115, 158)
> - '--mdc-ripple-press-opacity': 0.5
> name:
> - font-size: 16px
> state:
> - font-weight: bold
> - font-size: 16px
> card_mod:
> style: |
> ha-card {
> background: none;
> border: none;
> }              
> - type: custom:bar-card
> entities:
> - entity: sensor.pollens_11_risklevel
> name: Risque Pollen
> icon: mdi:alert-circle
> height: 47px
> color: red
> min: 0
> max: 3
> positions:
> indicator: 'off'
> icon: 'off'
> severity:
> - color: Red
> from: 2
> to: 3
> - color: rgb(242,234,26)
> from: 1
> to: 2
> - color: Green
> from: 0
> to: 1
> card_mod:
> style: >
> bar-card-currentbar, bar-card-backgroundbar {
> border-radius: 25px;
> }
> 
> #states > bar-card-row > bar-card-card >
> bar-card-background > bar-card-contentbar > bar-card-name
> {
> font-size: 16px;
> color: white;
> } ha-card {
> margin-top: -2px;
> background: none;
> border: none;
> } bar-card-value {
> color: black;
> font-weight: bold;
> }
> - type: conditional
> conditions:
> - entity: sensor.pollens_11
> state_not: nul
> card:
> type: custom:mod-card
> card_mod:
> style: |
> ha-card {
> margin: 5px 5px 5px 5px;
> }
> card:
> type: custom:auto-entities
> card:
> type: grid
> columns: 5
> square: false
> card_param: cards
> filter:
> include:
> - entity_id: sensor.pollens_11_*
> options:
> type: custom:button-card
> color_type: icon
> aspect_ratio: 1/1
> show_name: true
> show_state: true
> name: |
> [[[
> return entity.attributes.pollen_name + ":"
> ]]]
> styles:
> card:
> - '--mdc-ripple-color': rgb(68, 115, 158)
> - '--mdc-ripple-press-opacity': 0.5
> - border-radius: 8px
> name:
> - font-size: 14px
> state:
> - font-weight: bold
> - font-size: 12px
> state:
> - value: faible
> operator: '=='
> color: green
> styles:
> card:
> - box-shadow: 0px 0px 0px 2px green
> state:
> - color: green
> - value: moyen
> operator: '=='
> color: rgb(242,234,26)
> styles:
> card:
> - box-shadow: 0px 0px 0px 2px rgb(242,234,26)
> state:
> - color: rgb(242,234,26)
> - value: élevé
> operator: '=='
> color: red
> styles:
> card:
> - box-shadow: 0px 0px 0px 2px red
> state:
> - color: red
> size: 50%
> exclude:
> - entity_id: sensor.pollens_11_*
> state: nul
> - entity_id: sensor.pollens_11
> - entity_id: sensor.pollens_11_risklevel
> sort:
> method: name
> reverse: false
> - type: custom:mod-card
> card_mod:
> style:
> .: |
> :host {
> --text-divider-color: rgb(68, 115, 158);
> --text-divider-line-size: 1px;
> }
> card:
> type: custom:text-divider-row
> text: SÉCHERESSE
> align: left
> - type: custom:mod-card
> card_mod:
> style: |
> ha-card {
> margin: -17px -5px 0px -5px;
> }  
> card:
> type: horizontal-stack
> cards:
> - type: custom:button-card
> entity: sensor.alert_level
> name: 'Vigieau xxxx:'
> layout: icon_name_state2nd
> color_type: icon
> show_name: true
> show_state: true
> state:
> - value: Vigilance
> operator: '=='
> color: green
> icon: mdi:water-check
> styles:
> state:
> - color: green
> - value: Alerte
> operator: '=='
> color: yellow
> icon: mdi:water-alert
> styles:
> state:
> - color: yellow
> - value: Alerte renforcée
> operator: '=='
> color: orange
> icon: mdi:water-remove
> styles:
> state:
> - color: orange
> - value: Crise
> operator: '=='
> color: red
> icon: mdi:water-off
> styles:
> state:
> - color: red
> size: 60%
> styles:
> card:
> - '--mdc-ripple-color': rgb(68, 115, 158)
> - '--mdc-ripple-press-opacity': 0.5
> name:
> - font-size: 15px
> state:
> - font-weight: bold
> - font-size: 15px
> card_mod:
> style: |
> ha-card {
> background: none;
> border: none;
> }              
> - type: custom:bar-card
> entities:
> - entity: sensor.alert_level
> name: Niveau
> icon: mdi:alert-circle
> height: 47px
> color: red
> positions:
> indicator: 'off'
> icon: 'off'
> severity:
> - text: Vigilance
> color: green
> - text: Alerte
> color: yellow
> - text: Alerte renforcée
> color: orange
> - text: Crise
> color: red
> card_mod:
> style: >
> bar-card-currentbar, bar-card-backgroundbar {
> border-radius: 25px;
> }
> 
> #states > bar-card-row > bar-card-card >
> bar-card-background > bar-card-contentbar > bar-card-name
> {
> font-size: 16px;
> color: white;
> } ha-card {
> margin-top: -2px;
> background: none;
> border: none;
> } bar-card-value {
> color: black;
> font-weight: bold;
> }
> - type: conditional
> conditions:
> - entity: sensor.alert_level
> state_not: Vigilance
> card:
> type: custom:mod-card
> card_mod:
> style: |
> ha-card {
> margin: 5px 5px 5px 5px;
> }
> card:
> type: custom:auto-entities
> card:
> type: grid
> columns: 5
> square: false
> card_param: cards
> filter:
> include:
> - entity_id: sensor.*_restrictions
> options:
> type: custom:button-card
> color_type: icon
> aspect_ratio: 1/1
> show_name: true
> show_state: true
> name: |
> [[[
> return entity.attributes.friendly_name
> ]]]
> styles:
> card:
> - '--mdc-ripple-color': rgb(68, 115, 158)
> - '--mdc-ripple-press-opacity': 0.5
> - border-radius: 8px
> name:
> - font-size: 11px
> - white-space: normal
> state:
> - font-weight: bold
> - font-size: 10px
> - white-space: normal
> state:
> - value: Aucune restriction
> operator: '=='
> color: green
> styles:
> card:
> - box-shadow: 0px 0px 0px 2px green
> state:
> - color: green
> - value: Interdiction sauf exception
> operator: '=='
> color: orange
> styles:
> card:
> - box-shadow: 0px 0px 0px 2px orange
> state:
> - color: orange
> - value: Interdiction
> operator: '=='
> color: red
> styles:
> card:
> - box-shadow: 0px 0px 0px 2px red
> state:
> - color: red
> - value: Interdiction sur plage horaire
> operator: '=='
> color: orange
> styles:
> card:
> - box-shadow: 0px 0px 0px 2px orange
> state:
> - color: orange
> size: 50%
> exclude:
> - entity_id: sensor.*_restrictions
> state: Aucune restriction
> sort:
> method: name
> reverse: false
> - type: custom:popup-card
> entity: sensor.lune
> style: |-
> --popup-border-radius: 15px;
> --popup-background-color: transparent;
> --popup-border-width: 0px;
> card:
> type: picture-elements
> image: /local/images/phases-lunaires.jpg
> elements:
> - type: conditional
> conditions:
> - entity: sensor.moon
> state: new_moon
> elements:
> - type: image
> image: /local/images/circle.png
> style:
> top: 50%
> left: 54%
> width: 11%
> border: 2px solid yellow
> border-radius: 50%
> - type: conditional
> conditions:
> - entity: sensor.moon
> state: waxing_crescent
> elements:
> - type: image
> image: /local/images/circle.png
> style:
> top: 30%
> left: 50%
> width: 11%
> border: 2px solid yellow
> border-radius: 50%
> - type: conditional
> conditions:
> - entity: sensor.moon
> state: first_quarter
> elements:
> - type: image
> image: /local/images/circle.png
> style:
> top: 24%
> left: 36%
> width: 11%
> border: 2px solid yellow
> border-radius: 50%
> - type: conditional
> conditions:
> - entity: sensor.moon
> state: waxing_gibbous
> elements:
> - type: image
> image: /local/images/circle.png
> style:
> top: 31%
> left: 23.3%
> width: 12%
> border: 2px solid yellow
> border-radius: 50%
> - type: conditional
> conditions:
> - entity: sensor.moon
> state: full_moon
> elements:
> - type: image
> image: /local/images/circle.png
> style:
> top: 50%
> left: 17.7%
> width: 11.5%
> border: 2px solid yellow
> border-radius: 50%
> - type: conditional
> conditions:
> - entity: sensor.moon
> state: waning_gibbous
> elements:
> - type: image
> image: /local/images/circle.png
> style:
> top: 70%
> left: 23.5%
> width: 11.5%
> border: 2px solid yellow
> border-radius: 50%
> - type: conditional
> conditions:
> - entity: sensor.moon
> state: last_quarter
> elements:
> - type: image
> image: /local/images/circle.png
> style:
> top: 77%
> left: 36%
> width: 11.5%
> border: 2px solid yellow
> border-radius: 50%
> - type: conditional
> conditions:
> - entity: sensor.moon
> state: waning_crescent
> elements:
> - type: image
> image: /local/images/circle.png
> style:
> top: 70%
> left: 50%
> width: 11.5%
> border: 2px solid yellow
> border-radius: 50%
> card_mod:
> style: |
> ha-card {
> box-shadow: 0 0 0 1px gray;
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![vingerha](https://forum.hacf.fr/user_avatar/forum.hacf.fr/vingerha/32/30749_2.png) [@vingerha](https://forum.hacf.fr/u/vingerha)\
**Post date:** [Juin 14, 2023, 4:10 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/2 "2023-06-14T16:10:19Z")

</div>

Comme souvent, ça semble facile de l’extérieur 🙂  
C’est top 👍

---

<div class="post-metadata">

**Author:** ![Gilles2](https://forum.hacf.fr/user_avatar/forum.hacf.fr/gilles2/32/52382_2.png) [@Gilles2](https://forum.hacf.fr/u/Gilles2)\
**Post date:** [Juin 17, 2023, 11:32 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/3 "2023-06-17T11:32:30Z")

</div>

@WarC0zes , le type: custom:horizontal-layout provient de quelle carte custom s’il te plaît ?

---

<div class="post-metadata">

**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\
**Post date:** [Juin 17, 2023, 1:31 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/4 "2023-06-17T13:31:01Z")

</div>

Salut,  
c’est layout-card [GitHub - thomasloven/lovelace-layout-card: 🔹 Get more control over the placement of lovelace cards.](https://github.com/thomasloven/lovelace-layout-card)  
Pas vraiment utile pour le bon fonctionnement. Je les installer car j’avais des soucis d’alignement des cartes.

---

<div class="post-metadata">

**Author:** ![Gilles2](https://forum.hacf.fr/user_avatar/forum.hacf.fr/gilles2/32/52382_2.png) [@Gilles2](https://forum.hacf.fr/u/Gilles2)\
**Post date:** [Juin 23, 2023, 2:17 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/5 "2023-06-23T14:17:53Z")

</div>

Merci… je progresse sur mon dashboard, et je vois que tu utilises une carte custom:popup-card.  
Je ne la trouve pas dans HACS. Peux-tu me pointer vers la bonne carte s’il te plait?

---

<div class="post-metadata">

**Author:** ![anon21985933](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/a/ecb155/32.png) [@anon21985933](https://forum.hacf.fr/u/anon21985933)\
**Post date:** [Juin 23, 2023, 2:22 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/6 "2023-06-23T14:22:46Z")

</div>

> [@Gilles2](#):
>
> custom:popup-card

Il faut installer le HACS browser-mod

[thomasloven/hass-browser\_mod: 🔹 A Home Assistant integration to turn your browser into a controllable entity and media player (github.com)](https://github.com/thomasloven/hass-browser_mod)

---

<div class="post-metadata">

**Author:** ![Gilles2](https://forum.hacf.fr/user_avatar/forum.hacf.fr/gilles2/32/52382_2.png) [@Gilles2](https://forum.hacf.fr/u/Gilles2)\
**Post date:** [Juin 23, 2023, 2:31 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/7 "2023-06-23T14:31:40Z")

</div>

Merci. J’avais bien installé browser mod, mais je ne l’avais pas lancé… quel boulet

---

<div class="post-metadata">

**Author:** ![Sami\_Tatsu](https://forum.hacf.fr/user_avatar/forum.hacf.fr/sami_tatsu/32/25456_2.png) [@Sami\_Tatsu](https://forum.hacf.fr/u/Sami_Tatsu)\
**Post date:** [Juillet 5, 2023, 8:14 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/8 "2023-07-05T08:14:52Z")

</div>

Bonjour,  
comment as tu fais pour avoir ce logo ?  
 ![image](https://forum.hacf.fr/uploads/default/original/3X/5/a/5a3c61c12c0f2442787c7ba01de28195dd8ffcdd.png)

---

<div class="post-metadata">

**Author:** ![LeLapinFou](https://forum.hacf.fr/user_avatar/forum.hacf.fr/lelapinfou/32/14913_2.png) [@LeLapinFou](https://forum.hacf.fr/u/LeLapinFou)\
**Post date:** [Juillet 5, 2023, 8:31 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/9 "2023-07-05T08:31:05Z")

</div>

bonjour, en chargeant l'intégration

 ![image](https://forum.hacf.fr/uploads/default/original/3X/e/d/eddd306c8fd182aed6e32976a36726f9d5167b9b.png)

---

<div class="post-metadata">

**Author:** ![Sami\_Tatsu](https://forum.hacf.fr/user_avatar/forum.hacf.fr/sami_tatsu/32/25456_2.png) [@Sami\_Tatsu](https://forum.hacf.fr/u/Sami_Tatsu)\
**Post date:** [Juillet 5, 2023, 8:40 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/10 "2023-07-05T08:40:15Z")

</div>

Bonjour,  
comment dois je faire ?

---

<div class="post-metadata">

**Author:** ![LeLapinFou](https://forum.hacf.fr/user_avatar/forum.hacf.fr/lelapinfou/32/14913_2.png) [@LeLapinFou](https://forum.hacf.fr/u/LeLapinFou)\
**Post date:** [Juillet 5, 2023, 8:51 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/11 "2023-07-05T08:51:17Z")

</div>

menu paramètre, menu appareil et services, ajouter intégration, rechercher saison si tu es en FR ou season si tu es en US

---

<div class="post-metadata">

**Author:** ![Sami\_Tatsu](https://forum.hacf.fr/user_avatar/forum.hacf.fr/sami_tatsu/32/25456_2.png) [@Sami\_Tatsu](https://forum.hacf.fr/u/Sami_Tatsu)\
**Post date:** [Juillet 5, 2023, 9:16 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/12 "2023-07-05T09:16:49Z")

</div>

J'ai déjà l'intégration d'installée:

 ![image](https://forum.hacf.fr/uploads/default/original/3X/f/5/f514c8754b45ddff2ac292b6e8b1a4ea892f1b57.png)  
Mais j'ai ce logo:  
 ![image](https://forum.hacf.fr/uploads/default/original/3X/9/6/968f1884027b816013bb38c6ae73f6ae24e3f862.png)  
or je souhaiterais avoir des logos couleurs en fonction de la saison:  
 ![image](https://forum.hacf.fr/uploads/default/original/3X/5/a/5a3c61c12c0f2442787c7ba01de28195dd8ffcdd.png)

---

<div class="post-metadata">

**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\
**Post date:** [Juillet 5, 2023, 10:24 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/13 "2023-07-05T10:24:21Z")

</div>

J'ai modifier l'icone, avec custom-ui [GitHub - Mariusthvdb/custom-ui: Add templates and icon\_color to Home Assistant UI · GitHub](https://github.com/Mariusthvdb/custom-ui).

j'ai ajouter ces lignes dans le configuration.yaml:

```auto
homeassistant:
  customize: !include customize.yaml

```

j'ai créer un fichier customize.yaml dans /config/.  
dans le customize.yaml, rajoute ces lignes:

```auto
sensor.season:
  templates:
    entity_picture: >
      if (state === 'winter') return '/local/images/hiver.png';
      if (state === 'spring') return '/local/images/printemps.png';
      if (state === 'summer') return '/local/images/été.png';
      return '/local/images/automne.png';

```

Mettre les .png dans /config/www/images/.  
 ![printemps](https://forum.hacf.fr/uploads/default/original/3X/d/2/d2e4395bfc5c0a3c5bf06f2c2ecf493b106e7bf5.png)  
 ![été](https://forum.hacf.fr/uploads/default/original/3X/5/5/553109d73fc809eb36673aac9117d5d468b0b360.png)  
 ![automne](https://forum.hacf.fr/uploads/default/original/3X/5/a/5a6d4aa756aa22e1d1cbb68051c971cf36cd04b4.png)  
 ![hiver](https://forum.hacf.fr/uploads/default/original/3X/1/b/1b764a8bf1623cbbf214c03bf75dfeff971d8d0d.png)

Pour le soleil:

```auto
sun.sun:
  templates:
    entity_picture: >
      if (state === 'above_horizon') return '/local/weather/day.svg';
      return '/local/weather/night.svg';

```

> <https://github.com/hacf-fr/lovelace-meteofrance-weather-card/blob/Meteo-France/icons/animated/day.svg>

> <https://github.com/hacf-fr/lovelace-meteofrance-weather-card/blob/Meteo-France/icons/animated/night.svg>

---

<div class="post-metadata">

**Author:** ![Sami\_Tatsu](https://forum.hacf.fr/user_avatar/forum.hacf.fr/sami_tatsu/32/25456_2.png) [@Sami\_Tatsu](https://forum.hacf.fr/u/Sami_Tatsu)\
**Post date:** [Juillet 5, 2023, 10:47 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/14 "2023-07-05T10:47:27Z")

</div>

C'est parfait merci.

 ![image](https://forum.hacf.fr/uploads/default/original/3X/4/f/4f04b84dd6f502d63fdf71c2bab2fe420a19e44e.png)

---

<div class="post-metadata">

**Author:** ![Lesuperlolo](https://forum.hacf.fr/user_avatar/forum.hacf.fr/lesuperlolo/32/21946_2.png) [@Lesuperlolo](https://forum.hacf.fr/u/Lesuperlolo)\
**Post date:** [Juillet 5, 2023, 11:41 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/15 "2023-07-05T11:41:42Z")

</div>

C’est étonnant, ce fonctionnement.  
J’ai essayé d’ajouter la ligne `customize: !include customize.yaml` sans indentation, comme mes autres !include - et bien ça ne fonctionne pas !

---

<div class="post-metadata">

**Author:** ![Sami\_Tatsu](https://forum.hacf.fr/user_avatar/forum.hacf.fr/sami_tatsu/32/25456_2.png) [@Sami\_Tatsu](https://forum.hacf.fr/u/Sami_Tatsu)\
**Post date:** [Juillet 5, 2023, 11:53 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/16 "2023-07-05T11:53:18Z")

</div>

chez moi ça fonctionne.  
fais attention, il dois être sous  
`homeassistant:`  
comme l’a écrit @WarC0zes

---

<div class="post-metadata">

**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\
**Post date:** [Juillet 5, 2023, 1:19 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/17 "2023-07-05T13:19:57Z")

</div>

Comme j'ai écrit c'est sous `homeassistant:` et pas où il y a les autres !include.

> **[Customizing entities](https://www.home-assistant.io/docs/configuration/customizing-devices/)**
>
> Override the name, icon, or other properties of an entity, and hide entities you don't need to see.

---

<div class="post-metadata">

**Author:** ![LeLapinFou](https://forum.hacf.fr/user_avatar/forum.hacf.fr/lelapinfou/32/14913_2.png) [@LeLapinFou](https://forum.hacf.fr/u/LeLapinFou)\
**Post date:** [Juillet 16, 2023, 8:22 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/18 "2023-07-16T08:22:32Z")

</div>

cela ne sert a rien, juste a faire beau, voici mon popup des saisons :

 ![image](https://forum.hacf.fr/uploads/default/original/3X/1/4/14d34f01d80cc2fd8a823088ff52f4ad1de77c7c.png)

le code :

> ```
> action: fire-dom-event
> browser_mod:
> service: browser_mod.popup
> deviceID:
> - this
> - dashboard
> data:
> content:
> type: grid
> columns: 1
> square: false
> cards:
> - type: grid
> columns: 1
> square: false
> cards:
> - type: custom:button-card
> entity: sensor.name_saison
> show_entity_picture: true
> show_icon: false
> show_label: false
> show_state: false
> show_name: false
> state:
> - value: printemps
> entity_picture: /local/images/saison/01/01.png
> - value: été
> entity_picture: /local/images/saison/01/02.png
> - value: automne
> entity_picture: /local/images/saison/01/03.png
> - value: hiver
> entity_picture: /local/images/saison/01/04.png
> hold_action:
> action: none
> tap_action:
> action: none
> 
> ```

et les images :

 ![01](https://forum.hacf.fr/uploads/default/original/3X/e/8/e89da9914c0fd082bb4e70eb7468efffa7063343.png)  
 ![02](https://forum.hacf.fr/uploads/default/original/3X/d/5/d57059ffc6c2ddbce15646635b68eb6fe61e1cfe.png)  
 ![03](https://forum.hacf.fr/uploads/default/original/3X/9/a/9a0bc4a8e80e8653a1eb52f1824b92b843f2c49d.png)  
 ![04](https://forum.hacf.fr/uploads/default/original/3X/3/e/3edffde8ca25b639e70b968a583e2e49c527cd64.png)

---

<div class="post-metadata">

**Author:** ![bernard\_CASAGRANDE](https://forum.hacf.fr/user_avatar/forum.hacf.fr/bernard_casagrande/32/19282_2.png) [@bernard\_CASAGRANDE](https://forum.hacf.fr/u/bernard_CASAGRANDE)\
**Post date:** [Juillet 19, 2023, 2:56 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/19 "2023-07-19T14:56:25Z")

</div>

bonjour,  
Je ne parviens pas à installer tempometer-gauge

sur le ghihub il est inscrit :  
Usage

Add this card via HACS (recommended) cependant je ne le trouve pas…

avez-vous des solutions ?

---

<div class="post-metadata">

**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\
**Post date:** [Juillet 19, 2023, 3:02 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/20 "2023-07-19T15:02:52Z")

</div>

Bonjour,  
faut l’ajouter manuellement dans HACS car il est «&nbsp;deprecated&nbsp;» ( obsolète, plus mis a jour ) et a été retirer de la boutique HACS.

Dans HACS, les 3 petit points en haut, dépôt personnalisé et ajouter dépot: `https://github.com/SNoof85/lovelace-tempometer-gauge-card-deprecated` et catégorie: Lovelace.  
Vous le verrai dans la liste maintenant.

[Page suivante](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804.md?page=2)