# 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:** 14

<div class="post-metadata">

**Author:** ![bertrand\_34160](https://forum.hacf.fr/user_avatar/forum.hacf.fr/bertrand_34160/32/56931_2.png) [@bertrand\_34160](https://forum.hacf.fr/u/bertrand_34160)\
**Post date:** [Mai 4, 2024, 6:57 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/271 "2024-05-04T06:57:27Z")

</div>

Avec mon thème, l’option était affichée en gris foncé sur fond noir… Du coup, mais maintenant que j’ai appuyé sur le bouton et qu’il a changé de couleur, c’est plus clair 🤣  
Merci

---

<div class="post-metadata">

**Author:** ![Caillema](https://forum.hacf.fr/user_avatar/forum.hacf.fr/caillema/32/2964_2.png) [@Caillema](https://forum.hacf.fr/u/Caillema)\
**Post date:** [Mai 16, 2024, 10:21 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/272 "2024-05-16T10:21:19Z")

</div>

Bonjour,

Merci @WarC0zes pour tes superbes cartes !  
J'ai un problème dont je n'ai pas trouvé de solution ou abordé dans ce long fil et ni ailleurs sur d'autres posts.  
Cela concerne la carte iframe : comment fais-tu pour définir la position de la zoom box : dans ta carte c'est le sud-ouest de la France mais si je souhaite une autre zone de France, comment faire ?

 ![image](https://forum.hacf.fr/uploads/default/original/3X/4/1/41940814dde38eb1a31f645f303b3b15d93971ce.jpeg)

Merci pour votre aide.

---

<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:** [Mai 16, 2024, 10:25 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/273 "2024-05-16T10:25:39Z")

</div>

Bonjour @Caillema,  
faut aller sur ce lien [Map](https://embed.windy.com/config/map)  
Tu créer la carte que tu veut, et tu récupèrer le lien source fournie par le site. Que tu uilise dans la carte iframe.

 ![image](https://forum.hacf.fr/uploads/default/original/3X/a/8/a826e56a723b928205e0fd2f6660e0c3f88c034c.jpeg)

---

<div class="post-metadata">

**Author:** ![dalton5](https://forum.hacf.fr/user_avatar/forum.hacf.fr/dalton5/32/49515_2.png) [@dalton5](https://forum.hacf.fr/u/dalton5)\
**Post date:** [Mai 17, 2024, 3:54 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/274 "2024-05-17T15:54:52Z")

</div>

Bonjour,

J'essaye d'intégrer la carte dans mon dashboard minimalist ca ne fonctionne pas.

J'arrive bien dans un dashboard lovelace standard

J'ai l'erreur suivante:

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

Une idée?

Merci

---

<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:** [Mai 17, 2024, 4:00 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/275 "2024-05-17T16:00:50Z")

</div>

> [@dalton5](#):
>
> J’ai l’erreur suivante:

Bonjour,  
quel erreur, je vois rien ?  
Quel version utilisez vous pour la carte météo france ?

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

EDIT:  
Faut installer la version beta 1.9.2-beta-2.  
J'ai mis a jour le code pour la carte météo france, qui été pour une ancienne version de la carte.

---

<div class="post-metadata">

**Author:** ![dalton5](https://forum.hacf.fr/user_avatar/forum.hacf.fr/dalton5/32/49515_2.png) [@dalton5](https://forum.hacf.fr/u/dalton5)\
**Post date:** [Mai 17, 2024, 7:54 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/276 "2024-05-17T19:54:27Z")

</div>

Merci. Comment je fais pour sélectionner la bonne version svp dans HACS?

Merci

---

<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:** [Mai 17, 2024, 7:55 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/277 "2024-05-17T19:55:55Z")

</div>

tu va dans la carte météo france dans HACS. Tu clique sur les 3 points en haut a droite et retélécharger.  
Tu coche la case beta et selectionne la bonne version et télécharger.

---

<div class="post-metadata">

**Author:** ![dalton5](https://forum.hacf.fr/user_avatar/forum.hacf.fr/dalton5/32/49515_2.png) [@dalton5](https://forum.hacf.fr/u/dalton5)\
**Post date:** [Mai 17, 2024, 8:06 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/278 "2024-05-17T20:06:44Z")

</div>

J'ai pris la 1.15 et ca fonctionne. merci

 ![image](https://forum.hacf.fr/uploads/default/original/3X/a/a/aa05b2b69ea120e1737e5dcee9531e3da89558df.png)

---

<div class="post-metadata">

**Author:** ![dalton5](https://forum.hacf.fr/user_avatar/forum.hacf.fr/dalton5/32/49515_2.png) [@dalton5](https://forum.hacf.fr/u/dalton5)\
**Post date:** [Mai 17, 2024, 8:16 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/279 "2024-05-17T20:16:20Z")

</div>

Dernière question comment je peux afficher l’heure et la date actuelle?

---

<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:** [Mai 17, 2024, 10:42 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/280 "2024-05-17T22:42:37Z")

</div>

Tu utilise pas la bonne carte. Faut installer la carte météo france développer par hacf-fr. Le lien est fourni dans le tuto.  
Regarde ma capture a coté de la version , il y a le dev.

La carte que ta installer est obsolète, les prévisions fonctionne pas.

la bonne carte:

> **[GitHub - hacf-fr/lovelace-meteofrance-weather-card: ⛅ Carte dédiée à l'intégration Météo-France pour...](https://github.com/hacf-fr/lovelace-meteofrance-weather-card)**
>
> ⛅ Carte dédiée à l'intégration Météo-France pour Home Assistant.

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

la carte que ta installer ( obsolète ):

 ![image](https://forum.hacf.fr/uploads/default/original/3X/d/0/d067b338c5c6ef101c981046f5551007025a07c0.png)  
 ![image](https://forum.hacf.fr/uploads/default/original/3X/6/0/60286c433bae391d08654e325e142f5858e73da0.png)

---

<div class="post-metadata">

**Author:** ![Ludoc](https://forum.hacf.fr/user_avatar/forum.hacf.fr/ludoc/32/79819_2.png) [@Ludoc](https://forum.hacf.fr/u/Ludoc)\
**Post date:** [Juin 6, 2024, 6:48 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/281 "2024-06-06T18:48:52Z")

</div>

Bonjour,

j'ai un souci avec la popup lune (de mémoire ça a fonctionné)

Donc actuellement j'ai ça : pas d'icone de lune qui s'affiche, mais le nom est bien traduit.

 ![Capture d'écran 2024-06-06 204123](https://forum.hacf.fr/uploads/default/original/3X/f/b/fb07a5e3cbb9c09b684d1e4cdea5139028f149af.png)

Le code de cette page :

```auto
card_mod:
  style: |
    ha-card {--ha-card-border-width: 0}'
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.bresser_station_meteo_bresser_index_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\maison.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: Éclairs
            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\maison.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'éclairs
          - entity: sensor.compteur_mensuel_eclairs
            name: Compteur d'éclair mensuel
        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.moon_phase
        name: 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
            }             

```

et la partie lune en question :

```auto
      - type: custom:button-card
        entity: sensor.moon_phase
        name: 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
            } 

```

J'ai modifié la config en mode package donc la traduction des phases de la lune se trouve dans le fichier sun\_moon , ça fonctionne avec les traductions sur l'image du début de post, par contre, il ne n'affiche pas les images. :

```auto
template:

  ###############################################################
  # Calcul élévation soleil & azimuth
  ###############################################################
  - sensor:
      name: sun_elevation
      state: >
        {{ state_attr('sun.sun', 'elevation') }}

  - sensor:
      name: sun_azimuth
      state: >
        {{ state_attr('sun.sun', 'azimuth') }}

sensor:

  #########################################################
  # traduction des noms des phases de la lune
  #########################################################
  - platform: template
    sensors:
      lune:
        value_template: >-
          {% set phases = {'first_quarter': 'Premier quartier', 'full_moon': 'Pleine lune',
                          'last_quarter': 'Dernier quartier', 'new_moon': 'Nouvelle lune',
                          'waning_crescent': 'Dernier croissant', 'waning_gibbous': 'Gibbeuse décroissante',
                          'waxing_crescent': 'Premier croissant', 'waxing_gibbous': 'Gibbeuse croissante'} %}
          {% set phase = states('sensor.moon_phase') %}
          {{ phases[phase] if phase in phases.keys() else 'Error' }}
        entity_picture_template: /local/images/moon_phases/{{ states('sensor.moon_phase') }}.png

```

Le répertoire avec les images :

 ![Capture d'écran 2024-06-06 204735](https://forum.hacf.fr/uploads/default/original/3X/6/b/6b078f82c5b3fc04af3200e3d15b7a724a0b9e48.png)

et le sensor moon\_phase

 ![Capture d'écran 2024-06-06 204959](https://forum.hacf.fr/uploads/default/original/3X/b/0/b0788573e3d2fb211b20dfdfc5937bec5fa0ad5f.png)

Est e que vous voyez ce qui pourrait foirer ?

Merci.

---

<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 6, 2024, 7:05 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/282 "2024-06-06T19:05:44Z")

</div>

Salut,  
tu mélange du ancien et nouveau format de template. Autant rester sur le nouveau.  
Puis ta syntaxe du template qui est pas bonne.

> [@Ludoc](#):
>
> ```auto
> template:
> 
> ###############################################################
> # Calcul élévation soleil & azimuth
> ###############################################################
> - sensor:
> name: sun_elevation
> state: >
> {{ state_attr('sun.sun', 'elevation') }}
> 
> - sensor:
> name: sun_azimuth
> state: >
> {{ state_attr('sun.sun', 'azimuth') }}
> 
> ```

correction + template nouveau format pour la lune.

```auto
template:
  - sensor:
      - name: sun_elevation
        state: >
        {{ state_attr('sun.sun', 'elevation') }}

      - name: sun_azimuth
        state: >
          {{ state_attr('sun.sun', 'azimuth') }}

      - name: Lune
        state: >-
          {% set phases = {'first_quarter': 'Premier quartier', 'full_moon': 'Pleine lune',
                           'last_quarter': 'Dernier quartier', 'new_moon': 'Nouvelle lune',
                           'waning_crescent': 'Dernier croissant', 'waning_gibbous': 'Gibbeuse décroissante',
                           'waxing_crescent': 'Premier croissant', 'waxing_gibbous': 'Gibbeuse croissante'} %}
          {% set phase = states('sensor.moon_phase') %}
          {{ phases[phase] if phase in phases.keys() else 'Error' }}
        picture: /local/images/moon_phases/{{ states('sensor.moon_phase') }}.png

```

T'es sur du chemin des images de la lune `/local/images/moon_phases/` ?

dans mon tuto, c'est sur `/local/moon_phases/`

> [@\[CARTE\] Les phases de la lune en image](https://forum.hacf.fr/t/carte-les-phases-de-la-lune-en-image/9768):
>
> Bonjour a tous, je vous propose un tutorial pour voir les phases de la lune en image au lieu d’icone. Il vous faut installer l’intégration Lune dans Paramètres / appareils et services / et ajouter le template suivant dans le fichier configuration.yaml: Ancien format Template, l’entité s’appellera sensor.moon\_phase: sensor: - platform: template sensors: moon\_phases: friendly\_name: 'Lune' value\_template: \>- {% set phases = {'first\_quarter': 'Pre…

---

<div class="post-metadata">

**Author:** ![Ludoc](https://forum.hacf.fr/user_avatar/forum.hacf.fr/ludoc/32/79819_2.png) [@Ludoc](https://forum.hacf.fr/u/Ludoc)\
**Post date:** [Juin 7, 2024, 8:24 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/283 "2024-06-07T08:24:58Z")

</div>

Bonjour @WarC0zes ,

effectivement je suis en retard sur la syntaxe, et j'ai fait un micmac entre nouveau et ancien, plus qu'à tout refaire.  
J'avais pas vu le sujet spécifique pour la lune, et du coup j'ai testé les exemples qui fonctionnent.  
Donc la logique veut que ce soit le code de la carte qui est foireux et effectivement, je n'ai pas utilisé le bon sensor : sensor.moon\_phases au lieu de sensor.lune

```auto
- type: custom:button-card
        entity: sensor.moon_phase
        name: 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
            }

```

du coup =\>  
 ![Capture d'écran 2024-06-07 102416](https://forum.hacf.fr/uploads/default/original/3X/e/0/e0e0507601f9226f9630e7347342edbe4634dea6.png)

et la popup fonctionne

 ![Capture d'écran 2024-06-07 102428](https://forum.hacf.fr/uploads/default/original/3X/2/6/265e930b0e5909b2556203d0f279ebf3f8cd2fa0.png)

Merci 😉

---

<div class="post-metadata">

**Author:** ![Ludoc](https://forum.hacf.fr/user_avatar/forum.hacf.fr/ludoc/32/79819_2.png) [@Ludoc](https://forum.hacf.fr/u/Ludoc)\
**Post date:** [Juillet 3, 2024, 9:13 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/284 "2024-07-03T09:13:04Z")

</div>

Bonjour,

Comment vérifier l'appel à la popup quand on clique sur la lune ?  
J'ai du faire quelque chose (ou pas), car quand je clique sur l'icone de la lune, je n'ai plus que cet affichage

 ![Capture d'écran 2024-07-03 110436](https://forum.hacf.fr/uploads/default/original/3X/f/4/f496c60a44bfd5d94f5c6cea53fc284d0742ba51.png)

J'ai vérifié le template lune : pas changé., le code de la popup, pas changé

```auto
template:
  - sensor:
      #########################################################
      # traduction des noms des phases de la lune
      #########################################################
      - name: lune
        state: >-
          {% set phases = {'first_quarter': 'Premier quartier', 'full_moon': 'Pleine lune',
                          'last_quarter': 'Dernier quartier', 'new_moon': 'Nouvelle lune',
                          'waning_crescent': 'Dernier croissant', 'waning_gibbous': 'Gibbeuse décroissante',
                          'waxing_crescent': 'Premier croissant', 'waxing_gibbous': 'Gibbeuse croissante'} %}
          {% set phase = states('sensor.moon_phase') %}
          {{ phases[phase] if phase in phases.keys() else 'Error' }}
        picture: /local/images/moon_phases/{{ states('sensor.moon_phase') }}.png

```

La popup

```auto
      - 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/popup_lune/phases-lunaires.jpg
          elements:
            - type: conditional
              conditions:
                - entity: sensor.lune
                  state: Nouvelle lune
              elements:
                - type: image
                  image: /local/images/popup_lune/circle.png
                  style:
                    top: 50%
                    left: 54%
                    width: 11%
                    border: 5px solid yellow
                    border-radius: 50%
            - type: conditional
              conditions:
                - entity: sensor.lune
                  state: Premier croissant
              elements:
                - type: image
                  image: /local/images/popup_lune/circle.png
                  style:
                    top: 30%
                    left: 50%
                    width: 11%
                    border: 2px solid yellow
                    border-radius: 50%
            - type: conditional
              conditions:
                - entity: sensor.lune
                  state: Premier quartier
              elements:
                - type: image
                  image: /local/images/popup_lune/circle.png
                  style:
                    top: 24%
                    left: 36%
                    width: 11%
                    border: 5px solid yellow
                    border-radius: 50%
            - type: conditional
              conditions:
                - entity: sensor.lune
                  state: Gibbeuse croissante
              elements:
                - type: image
                  image: /local/images/popup_lune/circle.png
                  style:
                    top: 31%
                    left: 23.3%
                    width: 12%
                    border: 5px solid yellow
                    border-radius: 50%
            - type: conditional
              conditions:
                - entity: sensor.lune
                  state: Pleine lune
              elements:
                - type: image
                  image: /local/images/popup_lune/circle.png
                  style:
                    top: 50%
                    left: 17.7%
                    width: 11.5%
                    border: 5px solid yellow
                    border-radius: 50%
            - type: conditional
              conditions:
                - entity: sensor.lune
                  state: Gibbeuse décroissante
              elements:
                - type: image
                  image: /local/images/popup_lune/circle.png
                  style:
                    top: 70%
                    left: 23.5%
                    width: 11.5%
                    border: 5px solid yellow
                    border-radius: 50%
            - type: conditional
              conditions:
                - entity: sensor.lune
                  state: Dernier quartier
              elements:
                - type: image
                  image: /local/images/popup_lune/circle.png
                  style:
                    top: 77%
                    left: 36%
                    width: 11.5%
                    border: 5px solid yellow
                    border-radius: 50%
            - type: conditional
              conditions:
                - entity: sensor.lune
                  state: Dernier croissant
              elements:
                - type: image
                  image: /local/images/popup_lune/circle.png
                  style:
                    top: 70%
                    left: 50%
                    width: 11.5%
                    border: 5px solid yellow
                    border-radius: 50%
        card_mod:
          style: |
            ha-card {
              box-shadow: 0 0 0 1px gray;
            }

```

Les images n'ont pas bougé, à savoir dans www/images/popup\_lune/

 ![Capture d'écran 2024-07-03 110944](https://forum.hacf.fr/uploads/default/original/3X/a/8/a827d59abb300f2b44c1f7f341b3b00dc8425b67.png)

Ca n'a rien à voir avec ça ?

 ![Capture d'écran 2024-07-03 111128](https://forum.hacf.fr/uploads/default/original/3X/9/3/931640507c36a005dd167b250ac4859fc594ff2c.png)

Et du coup des modifs de code à fair, ou je vais dans la mauvaise direction ?

Merci.

---

<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 3, 2024, 9:21 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/285 "2024-07-03T09:21:01Z")

</div>

> [@Ludoc](#):
>
> Ca n’a rien à voir avec ça ?
> 
> ![Capture d'écran 2024-07-03 111128](https://forum.hacf.fr/uploads/default/original/3X/9/3/931640507c36a005dd167b250ac4859fc594ff2c.png)

Salut,  
non rien avoir, car j'utilise la carte popup de browser mod depuis toujours.

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

Je ne vois pas pourquoi ça ne fonctionne pas chez toi.  
l'entité lune doit s'appeler `sensor.lune` pour que la carte popup fonctionne. La carte popup doit être dans le même onglet que ta carte lune.

```auto
      - type: custom:popup-card
        entity: sensor.lune

```

Ça fonctionne toujours chez moi :

 ![image](https://forum.hacf.fr/uploads/default/original/3X/5/9/5907c0701dcf7c334b67d804c18026f3de4a8024.jpeg)

---

<div class="post-metadata">

**Author:** ![Ludoc](https://forum.hacf.fr/user_avatar/forum.hacf.fr/ludoc/32/79819_2.png) [@Ludoc](https://forum.hacf.fr/u/Ludoc)\
**Post date:** [Juillet 3, 2024, 9:41 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/286 "2024-07-03T09:41:11Z")

</div>

Merci pour la réponse.

Une carte que j'utilise :

```auto
type: custom:button-card
entity: sensor.lune
name: 'Lune :'
aspect_ratio: 4.2/1
layout: icon_name_state2nd
show_state: true
show_name: true
show_entity_picture: true
size: 48%
styles:
  card:
    - padding: 0.3em
    - '--mdc-ripple-color': rgb(31, 111, 235)
    - '--mdc-ripple-press-opacity': 0.5
  icon:
    - opacity: 1
  name:
    - font-size: 0.85em
    - white-space: normal
  state:
    - font-size: 0.85em
    - white-space: normal

```

 ![Capture d'écran 2024-07-03 113153](https://forum.hacf.fr/uploads/default/original/3X/6/1/6157249b39cf9879a34a90ef4ba2451b03ab02dd.png)

Et au cas où, je viens d'ajouter une carte manuelle de la popup, même si elle est déjà visible dans l'éditeur de configuration.

```auto
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/popup_lune/phases-lunaires.jpg
  elements:
    - type: conditional
      conditions:
        - entity: sensor.lune
          state: Nouvelle lune
      elements:
        - type: image
          image: /local/images/popup_lune/circle.png
          style:
            top: 50%
            left: 54%
            width: 11%
            border: 5px solid yellow
            border-radius: 50%
    - type: conditional
      conditions:
        - entity: sensor.lune
          state: Premier croissant
      elements:
        - type: image
          image: /local/images/popup_lune/circle.png
          style:
            top: 30%
            left: 50%
            width: 11%
            border: 2px solid yellow
            border-radius: 50%
    - type: conditional
      conditions:
        - entity: sensor.lune
          state: Premier quartier
      elements:
        - type: image
          image: /local/images/popup_lune/circle.png
          style:
            top: 24%
            left: 36%
            width: 11%
            border: 5px solid yellow
            border-radius: 50%
    - type: conditional
      conditions:
        - entity: sensor.lune
          state: Gibbeuse croissante
      elements:
        - type: image
          image: /local/images/popup_lune/circle.png
          style:
            top: 31%
            left: 23.3%
            width: 12%
            border: 5px solid yellow
            border-radius: 50%
    - type: conditional
      conditions:
        - entity: sensor.lune
          state: Pleine lune
      elements:
        - type: image
          image: /local/images/popup_lune/circle.png
          style:
            top: 50%
            left: 17.7%
            width: 11.5%
            border: 5px solid yellow
            border-radius: 50%
    - type: conditional
      conditions:
        - entity: sensor.lune
          state: Gibbeuse décroissante
      elements:
        - type: image
          image: /local/images/popup_lune/circle.png
          style:
            top: 70%
            left: 23.5%
            width: 11.5%
            border: 5px solid yellow
            border-radius: 50%
    - type: conditional
      conditions:
        - entity: sensor.lune
          state: Dernier quartier
      elements:
        - type: image
          image: /local/images/popup_lune/circle.png
          style:
            top: 77%
            left: 36%
            width: 11.5%
            border: 5px solid yellow
            border-radius: 50%
    - type: conditional
      conditions:
        - entity: sensor.lune
          state: Dernier croissant
      elements:
        - type: image
          image: /local/images/popup_lune/circle.png
          style:
            top: 70%
            left: 50%
            width: 11.5%
            border: 5px solid yellow
            border-radius: 50%
card_mod:
  style: |
    ha-card {
      box-shadow: 0 0 0 1px gray;
    }

```

Mais j'ai toujours le même affichage que précédement.

---

<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 3, 2024, 9:45 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/287 "2024-07-03T09:45:26Z")

</div>

Ta pas installer browser\_mod , et configurer ton navigateur alors ?  
Ou ton navigateur a plus le même ID et browser\_mod s'active pas.

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

Faut cliquer sur l'icone en bas a droite pour activer browser\_mod  
 ![image](https://forum.hacf.fr/uploads/default/original/3X/0/7/074a0512b4e68086c798ca37bdf3b04ce850aaaa.png)

---

<div class="post-metadata">

**Author:** ![Ludoc](https://forum.hacf.fr/user_avatar/forum.hacf.fr/ludoc/32/79819_2.png) [@Ludoc](https://forum.hacf.fr/u/Ludoc)\
**Post date:** [Juillet 3, 2024, 10:58 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/288 "2024-07-03T10:58:57Z")

</div>

Avec un peu de retard

 ![Capture d'écran 2024-07-03 125953](https://forum.hacf.fr/uploads/default/original/3X/8/3/839a840fcd4d62c2f0101e74b0f85d18cc790abe.png)

C'est que ce j'ai.

---

<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 3, 2024, 11:03 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/289 "2024-07-03T11:03:48Z")

</div>

Ce n'est pas cocher toi, c'est grisé.

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

---

<div class="post-metadata">

**Author:** ![Ludoc](https://forum.hacf.fr/user_avatar/forum.hacf.fr/ludoc/32/79819_2.png) [@Ludoc](https://forum.hacf.fr/u/Ludoc)\
**Post date:** [Juillet 3, 2024, 3:04 UTC](https://forum.hacf.fr/t/dashboard-meteo-all-inclusive-v2-maj-02-08-23/25804/290 "2024-07-03T15:04:57Z")

</div>

Mon erreur,

 ![Capture d'écran 2024-07-03 170344](https://forum.hacf.fr/uploads/default/original/3X/c/e/ce6f0e5d33804675d4c3d68c059958491d10983b.png)

Case cochée, icone en forme de main cliquée, relance complête, mais pas mieux.

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

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