🌤️ MeteoCss Card — La Nouvelle Génération!

Pulpy-Luke · Janvier 9, 2026, 4:26

Je suis heureux de vous présenter une version entièrement repensée qui remplace l’ancien Générateur automatique d’effets météorologiques dynamiques 100% CSS . C’est pareil, mais en mieux.

Configuration Ultra-Simplifiée

Fini la complexité ! Plus besoin de se prendre la tête dans des configurations , la nouvelle version propose une approche épurée et intuitive qui vous permet de vous lancer en quelques secondes.

Adieu Templates et Jinja

Vous pouviez compliquer les choses avec des templates supplémentaires et du code Jinja ? C’est révolu. Tout ce dont vous aviez besoin se trouve maintenant intégré nativement. Plus fluide, plus direct, plus efficace.

Quelques effets visuels améliorés

Soleil en SVG : Un rendu lumineux et fluide, enfin digne de ce nom
Lune en SVG : Des phases lunaires gracieuses et précises
Nuages réalistes : Un nouveau générateur de nuages

Chaque élément a été peaufiné pour offrir une expérience visuelle immersive.

Personnalisation Complète

Bien sûr, on ne perd rien en route ! Vous gardez une liberté quasi-totale de personnalisation. Couleurs, animations, tailles, opacités…

Mode Démo Intégré

Un mode démo complet est maintenant embarqué dans la carte. Visualisez tous les effets en temps réel, jouez avec les conditions météorologiques et explorez la personnalisation sans quitter votre interface. Parfait pour tester les rendus et faciliter la configuration. La meilleure façon de découvrir tout ce que MeteoCss peut faire.

Où la trouver ?

github.com/Pulpyyyy/meteocss-card

Thomas_Fav28 · Janvier 9, 2026, 4:30

Bonsoir Pulpy,

J’ai toujours l’ancienne version qui tourne avec ce code carte

type: picture-elements
image: /local/meteo/fond_meteo.png
elements:
  - type: custom:html-template-card
    title: ""
    ignore_line_breaks: true
    picture_elements_mode: true
    content: |-
      {%- from 'meteo.jinja' import generate_content -%}
        {{ generate_content('background','html')|replace('"','') }}
    card_mod:
      style: |-
        {%- from 'meteo.jinja' import generate_content -%}
          {{ generate_content('background','css')|replace('"','') }}
    style:
      top: 50%
      left: 50%
      width: 100%
      height: 100%
  - type: custom:html-template-card
    title: ""
    ignore_line_breaks: true
    picture_elements_mode: true
    content: >-
      <img src="/local/meteo/sun.png" style="width:30%; left:{{
      states('sensor.sun_left') }}%; top:10%; opacity:{{
      states('sensor.sun_opacity') }};
      padding:0;margin:0;position:absolute;transform:translate(-50%,-50%);" />
    style:
      top: 50%
      left: 50%
      width: 100%
      height: 100%
  - type: conditional
    condition: and
    conditions:
      - entity: sun.sun
        state: below_horizon
    elements:
      - type: state-icon
        style:
          left: 10%
          top: 15%
          transform: scale(0.7)
        entity: sensor.lune
  - type: custom:html-template-card
    title: ""
    ignore_line_breaks: true
    picture_elements_mode: true
    content: |-
      {%- from 'meteo.jinja' import generate_content -%}
        {{ generate_content('foreground','html')|replace('"','') }}
    card_mod:
      style: |-
        {%- from 'meteo.jinja' import generate_content -%}
          {{ generate_content('foreground','css')|replace('"','') }}
    style:
      top: 50%
      left: 50%
      width: 100%
      height: 100%
  - type: custom:digital-clock
    dateFormat:
      weekday: long
      day: 2-digit
      month: long
    timeFormat:
      hour: 2-digit
      minute: 2-digit
    style:
      top: 65%
      left: 50%
      width: 100%
      height: 100%
    card_mod:
      style: |
        ha-card {
          background: transparent;
          text-shadow: 0px 5px 2px rgba(0,0,0,0.8);
          border: 0rem;
          pointer-events: none;
          font-size: 14px;
          --primary-text-color: white;                  
        } 
  - type: custom:mushroom-legacy-template-card
    icon: ""
    entity: sensor.luce_temperature
    badge_icon: ""
    icon_color: ""
    badge_color: ""
    tap_action:
      action: none
    hold_action:
      action: none
    primary: "{{states(entity)}} °C"
    style:
      top: 112%
      left: 50%
      width: 100%
      height: 100%
    card_mod:
      style:
        .: |
          ha-card {
            text-align: center;
            background: none;
            border: none;
            pointer-events: none;
            font-variant: small-caps;
            --card-primary-font-size: 20px;
            --card-primary-font-weight: bold; 
            --card-primary-color: white;           
          }                 
  - type: custom:mushroom-legacy-template-card
    primary: |
      {% if is_state(entity, 'Orange') %}
        ⚠️ Attention, vigilance orange ⚠️
      {% endif %}
      {% if is_state(entity, 'Rouge') %}
        ⚠️ Attention, vigilance rouge ⚠️
      {% endif %}  
    secondary: ""
    icon: ""
    tap_action:
      action: none
    hold_action:
      action: none
    layout: vertical
    entity: sensor.28_weather_alert
    style:
      top: 102%
      left: 50%
      width: 100%
      height: 100%
    card_mod:
      style: |
        ha-card {
          background: transparent;
          box-shadow: none;
          border: 0rem; 
          pointer-events: none;  
          --card-primary-font-size: 16px;  
          --card-primary-font-weight: bold;
          --card-primary-color: white;           
card_mod:
  style: |-
    :host {
      display: block;
      height: 190px !important;
      overflow: hidden;
    }   
    {%- from 'meteo.jinja' import sky -%}
    {{' '.join( sky().split())|replace('"',"")}}

J’aimerais passer sur cette nouvelle version prometteuse, mais lorsque je met un code de base, et que demo_mode=false, rien ne s’affiche. En mode true, j’ai le défilement en auto de différentes conditions meteo. Merci de m’eclaircir pour la migration

Pulpy-Luke · Janvier 9, 2026, 4:34

Hello,

Tu as forcé ma mise à jour en v1.0.5 ? J’ai fais quelques corrections

Thomas_Fav28 · Janvier 9, 2026, 4:37

La dernière release est la 1.0.4

Pulpy-Luke · Janvier 9, 2026, 5:04

Presque

freetronic · Janvier 9, 2026, 5:06

Re,

Pareil pour moi, et je viens de vérifier, ça rame c’est déjà sous surveillance

Pulpy-Luke · Janvier 9, 2026, 5:07

Dans HACs, via les 3 points en haut à droite => actualiser les informations. puis ensuite retélécharger

freetronic · Janvier 9, 2026, 5:10

En effet, merci

Pas vu de bug ou de différence notable en picture element ou pas en v1.0.5

Pulpy-Luke · Janvier 9, 2026, 5:11

Et une version minimale

type: custom:meteo-card
demo_mode: false
weather: weather.forecast_maison
layers:
  - sky
  - sun
  - moon
  - background
  - foreground

Evidement il faut adapter weather.forecast_maison

freetronic · Janvier 9, 2026, 5:13

Re,

Elle est vraiment magnifique cette météo, bravo, même si j’aime bien le côté un peu « rustique » de l’autre

et merci du partage

cdt

Thomas_Fav28 · Janvier 9, 2026, 5:16

Cela fonctionne avec -foreground.

Maintenant, comment peux t-on ajuster la hauteur de la carte ?

Et comment avoir un placement fixe du soleil/lune ? par exemple à gauche

Pulpy-Luke · Janvier 9, 2026, 5:16

Je me pose la question de rajouter des rayons sur le soleil et l’effet de halo
weather.forecast_maison
Le souci après c’est que ça bouffe des ressources

freetronic · Janvier 9, 2026, 5:19

Tout est relatif, les 2 tournent et je n’ai pas encore viré le rendu 3D qui tourne sur le moteur google

Bon tout ne charge pas en même temps

mais bon j’aime déjà bien comme ça perso, c’est une jolie upgrade vs la version précédente

Pulpy-Luke · Janvier 9, 2026, 5:24

Il faut que je modifie 2 ou 3 trucs

Thomas_Fav28 · Janvier 9, 2026, 5:26

D’accord, j’aimerais bien garder le même affichage que mon ancienne carte. Et je pense qu’en présentation dashboard mobile, c’est assez sympa. La mise en picture element d’une carte horloge par dessus ta carte meteo

Pour avoir ce style en en-tête de dashboard

freetronic · Janvier 9, 2026, 5:26

Tiens oui pas pensé de regarder si le soleil est fixe ou pas, en même temps il a plu toute la journée ou presque

Pulpy-Luke · Janvier 9, 2026, 5:34

essaye ça

type: picture-elements
image: /local/meteo/fond_meteo.png
elements:
  - type: custom:meteo-card
    weather: weather.forecast_maison
    layers:
      - sky
      - sun
  - type: conditional
    condition: and
    conditions:
      - entity: sun.sun
        state: below_horizon
    elements:
      - type: state-icon
        style:
          left: 10%
          top: 15%
          transform: scale(0.7)
        entity: sensor.lune
  - type: custom:meteo-card
    weather: weather.forecast_maison
    layers:
      - foreground
  - type: custom:digital-clock
    dateFormat:
      weekday: long
      day: 2-digit
      month: long
    timeFormat:
      hour: 2-digit
      minute: 2-digit
    style:
      top: 65%
      left: 50%
      width: 100%
      height: 100%
    card_mod:
      style: |
        ha-card {
          background: transparent;
          text-shadow: 0px 5px 2px rgba(0,0,0,0.8);
          border: 0rem;
          pointer-events: none;
          font-size: 14px;
          --primary-text-color: white;                  
        } 
  - type: custom:mushroom-legacy-template-card
    icon: ""
    entity: sensor.luce_temperature
    badge_icon: ""
    icon_color: ""
    badge_color: ""
    tap_action:
      action: none
    hold_action:
      action: none
    primary: "{{states(entity)}} °C"
    style:
      top: 112%
      left: 50%
      width: 100%
      height: 100%
    card_mod:
      style:
        .: |
          ha-card {
            text-align: center;
            background: none;
            border: none;
            pointer-events: none;
            font-variant: small-caps;
            --card-primary-font-size: 20px;
            --card-primary-font-weight: bold; 
            --card-primary-color: white;           
          }                 
  - type: custom:mushroom-legacy-template-card
    primary: |
      {% if is_state(entity, 'Orange') %}
        ⚠️ Attention, vigilance orange ⚠️
      {% endif %}
      {% if is_state(entity, 'Rouge') %}
        ⚠️ Attention, vigilance rouge ⚠️
      {% endif %}  
    secondary: ""
    icon: ""
    tap_action:
      action: none
    hold_action:
      action: none
    layout: vertical
    entity: sensor.28_weather_alert
    style:
      top: 102%
      left: 50%
      width: 100%
      height: 100%
    card_mod:
      style: |
        ha-card {
          background: transparent;
          box-shadow: none;
          border: 0rem; 
          pointer-events: none;  
          --card-primary-font-size: 16px;  
          --card-primary-font-weight: bold;
          --card-primary-color: white;           
card_mod:
  style: |-
    :host {
      display: block;
      height: 190px !important;
      overflow: hidden;
    }

Pulpy-Luke · Janvier 9, 2026, 5:35

merci

oui c’est normalement de base. Dans la nouvelle version tu peux adapter l’elipse h/v avec les options rx/ry c’est pas juste un cercle comme avant

freetronic · Janvier 9, 2026, 5:36

Je continuerais ça demain, j’ai déjà installé luna pour la suite

Thomas_Fav28 · Janvier 9, 2026, 5:38

Je viens d’essayer en remplaçant weather.forecast_maison par mon sensor. J’obtiens ça :