Générateur automatique d’effets météorologiques dynamiques 100% CSS

Pulpy-Luke · Janvier 17, 2025, 6:28

Salut

Les deux sont indépendants, c’est juste plus facile d’utiliser la demo, pour vérifier que tout fonctionne et voir ce que ça donne.

Ludoc · Janvier 17, 2025, 7:53

Rebonjour,

Est ce que les state-icon fonctionnent ?
Avant j’avais une icone en forme de main me permettant d’agir sur des entités, plus maintenant.

  - type: state-icon
    entity: input_boolean.virtuel_eclairage_garage
    style:
      top: 30%
      left: 83%
      width: 100%
    tap_action:
      action: toggle

type: picture-elements
view_layout:
  grid-area: main
card_mod:
  style: |-
    {%- from 'meteo.jinja' import sky -%}
    {{' '.join( sky().split())|replace('"',"")}}
image: /local/floorplan-2/fond transparent.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: image
    image: /local/floorplan-2/fond-3.png
    entity: weather.forecast_maison
    style:
      top: 46%
      left: 50%
      width: 97%
  - type: image
    entity: input_boolean.virtuel_eclairage_garage
    style:
      top: 46%
      left: 50%
      width: 97%
    state_image:
      "on": /local/floorplan-2/input_boolean.virtuel_eclairage_garage.png
      "off": /local/floorplan-2/fond transparent.png
  - type: image
    entity: input_boolean.virtuel_eclairage_escalier_rdc
    style:
      top: 46%
      left: 50%
      width: 97%
    state_image:
      "on": /local/floorplan-2/input_boolean.virtuel_eclairage_escalier_rdc.png
      "off": /local/floorplan-2/fond transparent.png
  - type: image
    entity: switch.bp_relais_eclairage_salon
    style:
      top: 46%
      left: 50%
      width: 97%
    state_image:
      "on": /local/floorplan-2/switch.bp_relais_eclairage_salon.png
      "off": /local/floorplan-2/fond transparent.png
  - type: image
    entity: switch.bp_relais_eclairage_sam
    style:
      top: 46%
      left: 50%
      width: 97%
    state_image:
      "on": /local/floorplan-2/switch.bp_relais_eclairage_sam.png
      "off": /local/floorplan-2/fond transparent.png
  - type: image
    entity: switch.bp_relais_eclairage_couloir_escalier
    style:
      top: 46%
      left: 50%
      width: 97%
    state_image:
      "on": /local/floorplan-2/switch.bp_relais_eclairage_couloir_escalier.png
      "off": /local/floorplan-2/fond transparent.png
  - type: image
    entity: input_boolean.virtuel_eclairage_cuisine
    style:
      top: 46%
      left: 50%
      width: 97%
    state_image:
      "on": /local/floorplan-2/input_boolean.virtuel_eclairage_cuisine.png
      "off": /local/floorplan-2/fond transparent.png
  - type: image
    entity: switch.prise_4_tv_co_zb
    style:
      top: 46%
      left: 50%
      width: 97%
    state_image:
      "on": /local/floorplan-2/switch.prise_4_tv_co_zb.png
      "off": /local/floorplan-2/fond transparent.png
    tap_action:
      action: toggle
  - type: image
    entity: light.lumiere_couloir_wc
    style:
      top: 46%
      left: 50%
      width: 97%
    state_image:
      "on": /local/floorplan-2/switch.bp_3_boutons_salle_de_bain_left.png
      "off": /local/floorplan-2/fond transparent.png
  - type: image
    entity: switch.bp_3_boutons_salle_de_bain_center
    style:
      top: 46%
      left: 50%
      width: 97%
    state_image:
      "on": /local/floorplan-2/switch.bp_3_boutons_salle_de_bain_center.png
      "off": /local/floorplan-2/fond transparent.png
  - type: image
    entity: switch.bp_3_boutons_salle_de_bain_right
    style:
      top: 46%
      left: 50%
      width: 97%
    state_image:
      "on": /local/floorplan-2/switch.bp_3_boutons_salle_de_bain_right.png
      "off": /local/floorplan-2/fond transparent.png
  - type: image
    entity: switch.relais_eclairage_exterieur_tableau
    style:
      top: 46%
      left: 50%
      width: 97%
    state_image:
      "on": /local/floorplan-2/switch.relais_eclairage_exterieur_tableau.png
      "off": /local/floorplan-2/fond transparent.png
  - type: image
    entity: light.bp_relais_eclairage_buanderie
    style:
      top: 46%
      left: 50%
      width: 97%
    state_image:
      "on": /local/floorplan-2/input_boolean.virtuel_eclairage_buanderie.png
      "off": /local/floorplan-2/fond transparent.png
  - type: image
    entity: input_boolean.virtuel_eclairage_wc
    style:
      top: 46%
      left: 50%
      width: 97%
    state_image:
      "on": /local/floorplan-2/input_boolean.virtuel_eclairage_wc.png
      "off": /local/floorplan-2/fond transparent.png
  - type: image
    entity: light.prise_20_salon_spot
    style:
      top: 46%
      left: 50%
      width: 97%
    state_image:
      "on": /local/floorplan-2/input_boolean.virtuel_eclairage_salon_spot.png
      "off": /local/floorplan-2/fond transparent.png
  - type: image
    entity: input_boolean.virtuel_eclairage_salon_flipper
    style:
      top: 46%
      left: 50%
      width: 97%
    state_image:
      "on": /local/floorplan-2/input_boolean.virtuel_eclairage_salon_flipper.png
      "off": /local/floorplan-2/fond transparent.png
  - type: state-icon
    entity: input_boolean.virtuel_eclairage_garage
    style:
      top: 30%
      left: 83%
      width: 100%
    tap_action:
      action: toggle
  - type: state-icon
    entity: input_boolean.virtuel_eclairage_escalier_rdc
    style:
      top: 32%
      left: 109%
      width: 100%
    tap_action:
      action: toggle
  - type: state-icon
    entity: switch.bp_relais_eclairage_salon
    style:
      top: 55%
      left: 121%
      width: 100%
    tap_action:
      action: toggle
  - type: state-icon
    entity: switch.bp_relais_eclairage_sam
    style:
      top: 30%
      left: 118%
      width: 100%
    tap_action:
      action: toggle
  - type: state-icon
    entity: switch.bp_relais_eclairage_couloir_escalier
    style:
      top: 14%
      left: 108%
      width: 100%
    tap_action:
      action: toggle
  - type: state-icon
    entity: input_boolean.virtuel_eclairage_cuisine
    style:
      top: 26%
      left: 96%
      width: 100%
    tap_action:
      action: toggle
  - type: state-icon
    entity: switch.prise_4_tv_co_zb
    style:
      top: 62%
      left: 119%
      width: 100%
    tap_action:
      action: toggle
  - type: state-icon
    entity: light.lumiere_couloir_wc
    style:
      top: 69%
      left: 131%
      width: 100%
    tap_action:
      action: toggle
    double_tap_action:
      action: more-info
  - type: state-icon
    entity: switch.bp_3_boutons_salle_de_bain_center
    style:
      top: 71%
      left: 118%
      width: 100%
    tap_action:
      action: toggle
  - type: state-icon
    entity: switch.bp_3_boutons_salle_de_bain_right
    style:
      top: 79%
      left: 121%
      width: 100%
    tap_action:
      action: toggle
  - type: state-icon
    entity: switch.relais_eclairage_exterieur_tableau
    style:
      top: 40%
      left: 90%
      width: 100%
    tap_action:
      action: toggle
  - type: state-icon
    entity: light.bp_relais_eclairage_buanderie
    style:
      top: 91%
      left: 125%
      width: 100%
    tap_action:
      action: toggle
  - type: state-icon
    entity: input_boolean.virtuel_eclairage_wc
    style:
      top: 77%
      left: 131%
      width: 100%
    tap_action:
      action: toggle
  - type: state-icon
    entity: light.prise_20_salon_spot
    style:
      top: 42%
      left: 120%
      width: 100%
    tap_action:
      action: toggle
  - type: state-icon
    entity: input_boolean.virtuel_eclairage_salon_flipper
    style:
      top: 61%
      left: 115%
      width: 100%
    tap_action:
      action: toggle
  - type: state-label
    entity: sensor.bresser_station_meteo_bresser_temperature_ressentie
    style:
      left: 48%
      top: 47%
      color: yellow
  - type: state-label
    entity: sensor.tdegc_h_jardin_humidity
    style:
      left: 48%
      top: 49%
      color: yellow
  - type: state-label
    entity: sensor.prise_13_frigo_zb_power
    style:
      left: 50%
      top: 40%
      color: red
  - type: state-label
    entity: sensor.prise_5_congelateur_zb_power
    style:
      left: 46.5%
      top: 40%
      color: red
  - type: state-label
    entity: sensor.prise_6_lave_vaisselle_zb_power
    style:
      left: 52.5%
      top: 16%
      color: red
  - type: state-label
    entity: sensor.tdegc_h_cuisine_temperature
    style:
      left: 55%
      top: 24%
      color: yellow
  - type: state-label
    style:
      left: 55%
      top: 26%
      color: yellow
    entity: sensor.tdegc_h_cuisine_humidity
  - type: state-label
    entity: sensor.bresser_vent_direction_fr
    style:
      left: 48%
      top: 51%
      color: yellow
  - type: state-label
    entity: sensor.bresser_station_meteo_bresser_precipitations_journalieres
    style:
      left: 49%
      top: 53%
      color: yellow
  - type: state-icon
    entity: sensor.bresser_station_meteo_bresser_precipitations_journalieres
    tap_action:
      action: more-info
    style:
      left: 47%
      top: 53%
      color: yellow
  - type: state-label
    entity: sensor.prise_7_micro_onde_zb_power
    style:
      left: 40%
      top: 30%
      color: red
  - type: state-label
    entity: sensor.prise_1_hotte_aspirante_zb_power
    style:
      left: 43%
      top: 12%
      color: red
  - type: state-label
    entity: sensor.tdegc_h_salle_a_manger_temperature
    style:
      left: 70%
      top: 20%
      color: yellow
  - type: state-label
    entity: sensor.tdegc_h_salle_a_manger_humidity
    style:
      left: 70%
      top: 22%
      color: yellow
  - type: state-label
    style:
      left: 66%
      top: 50%
      color: yellow
    entity: sensor.tdegc_h_salon_temperature
  - type: state-label
    entity: sensor.tdegc_h_salon_humidity
    style:
      left: 66%
      top: 52%
      color: yellow
  - type: state-label
    entity: sensor.netatmo_temperature_consigne
    style:
      left: 70%
      top: 18%
      color: orange
  - type: state-label
    entity: sensor.prise_10_box_co_power
    style:
      left: 78%
      top: 45%
      color: red
  - type: state-label
    entity: sensor.prise_4_tv_co_zb_power
    style:
      left: 72%
      top: 62%
      color: red
  - type: state-label
    entity: sensor.tore_chauffe_eau_power_a
    style:
      left: 83%
      top: 89%
      color: red
  - type: state-label
    entity: sensor.tore_four_power_a
    style:
      left: 41%
      top: 20%
      color: red
  - type: state-label
    entity: sensor.prise_11_seche_serviette_zb_power
    style:
      left: 66%
      top: 71%
      color: red
  - type: state-label
    entity: sensor.tdegc_h_salle_de_bain_temperature
    style:
      left: 67%
      top: 76%
      color: yellow
  - type: state-label
    entity: sensor.planning_du_jour
    style:
      left: 83%
      top: 91%
      color: orange
  - type: state-icon
    entity: camera.cuisine
    icon: mdi:cctv
    style:
      left: 41%
      top: 10%
  - type: state-icon
    entity: camera.jardin
    camera_view: live
    fit_mode: fill
    aspect_ratio: 200%
    icon: mdi:cctv
    style:
      left: 61%
      top: 39%
      width: 14%
      heigth: 14%
  - type: state-icon
    entity: camera.salle_a_manger
    icon: mdi:cctv
    style:
      left: 76%
      top: 12%
  - type: state-icon
    entity: camera.salon
    icon: mdi:cctv
    style:
      left: 78%
      top: 42%
  - type: state-icon
    entity: switch.prise_7_micro_onde_zb
    style:
      left: 40%
      top: 28%
    icon: mdi:power-plug-outline
    tap_action:
      action: toggle
  - type: state-icon
    entity: switch.prise_6_lave_vaisselle_zb
    icon: mdi:power-plug-outline
    style:
      left: 52.5%
      top: 14%
    tap_action:
      action: toggle
  - type: action-button
    action: homeassistant.toggle
    title: Lave linge
    data: {}
    target:
      entity_id: switch.prise_14_lave_linge_zb
    style:
      left: 68%
      top: 89%
  - type: action-button
    action: homeassistant.toggle
    title: Séche linge
    style:
      left: 68%
      top: 91%
    data: {}
    target:
      entity_id: switch.prise_15_seche_linge_zb
  - type: state-label
    entity: sensor.prise_14_lave_linge_zb_power
    style:
      left: 71%
      top: 89%
      color: red
  - type: state-label
    entity: sensor.prise_15_seche_linge_zb_power
    style:
      left: 71%
      top: 91%
      color: red
  - type: icon
    style:
      left: 64%
      top: 12%
    icon: phu:reolink-doorbell
    entity: camera.reolink_video_doorbell_wifi_fluent
    title: Reolink
  - type: custom:html-template-card
    title: ""
    ignore_line_breaks: true
    picture_elements_mode: true
    content: >-
      <img src="/local/images/moon_phases_2/sun.png" style="width:10%; left:{{
      states('sensor.sun_left') }}%; top:{{  states('sensor.sun_top') }}%;
      opacity:{{ states('sensor.sun_opacity') }};
      padding:0;margin:0;position:absolute;transform:translate(-50%,-50%);" />
      <img src="/local/images/moon_phases_2/{{states('sensor.moon_phase')}}.png"
      style="width:1.5%; left:{{ states('sensor.moon_left') }}%; top:{{
      states('sensor.moon_top') }}%; opacity:{{ states('sensor.moon_opacity')
      }}; padding:0;margin:0;position:absolute; rotate:
      {{state_attr('sensor.moon_api','moon_parallactic_angle')}}deg;transform:translate(-50%,-50%);"
      /> 
    style:
      top: 50%
      left: 50%
      width: 100%
      height: 100%
  - 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%

Merci

Pulpy-Luke · Janvier 17, 2025, 7:56

Tous les elements d’une picture-elements fonctionnent.
Par contre, attention à son niveau de placement : les éléments qui sont cliquables doivent être mis au premier plan… Sinon ils sont cachés par les autres.
Donc typiquement APRES le foreground

Ludoc · Janvier 17, 2025, 8:05

Bien vu, je ne connaissais pas le concept foreground & Co.

Merci

Thomas_Fav28 · Janvier 17, 2025, 10:22

J’ai essayé également de mon coté, mais j’ai un soucis. La hauteur de la carte est très grande, alors que mon image base ne prend que la maison.

Ici c’est avec la démo mais c’est également le cas sur un autre dashboard panneau avec les vrais entités.
J’ai également des problèmes de rafraichissement intempestifs lors d’un changement de page par exemple, lorsque je reviens sur l’affichage de la meteo dynamique, la page met un certain temps à s’afficher correctement, le temps de chargement des éléments des autres cartes est long. L’affichage saute et je perds mes autres cartes tres souvent

Ludoc · Janvier 18, 2025, 8:40

Bonjour,

Est ce qu’il y aurait un moyen de définir un offset pour les positions du soleil et de la lune en fonction de l’angle de la maison à l’écran ?
Ce matin le soleil s’est levé à l’ouest

Merci.

freetronic · Janvier 18, 2025, 8:46

Hello,

Je me permet de répondre, ce que tu cherches doit se trouver là dans le rotation.jinja

cdt

Ludoc · Janvier 18, 2025, 8:48

Hello,

impecccable, tout est déjà prévu

Merci

Pulpy-Luke · Janvier 18, 2025, 8:59

Oui, c’est prévu, sur la première ligne de rotation.yaml :

{%- set house_angle_deg = 25 -%}

Bon, ben @freetronic est déjà sur la brêche ^^

Pulpy-Luke · Janvier 18, 2025, 9:07

Salut,

Pour l’affichage, je pense que c’est normal, l’idée c’est de mettre ça pleine page. Donc là il reste de la place en dessous donc prends toute la place dispo.

Pour le perf, tu utilises quoi ? On dirait une tablette donc surement WIFI ?
Plusieurs pistes:

les images trop grosses en taille (pas la résolution), perso je passe tout à l’optimiseur genre https://tinypng.com/ ça permet de réduire considérablement le temps de chargement.
Pour le temps de chargements des élements, il faut éventuellement aller chercher dans les outils dev du navigateurs (F12) et regarder les délais réseaux
les CSS utilisent les ressources du client (donc de la tablette). Si c’est ça il faut mettre moins de détails (moins de gouttes, moins de nuages etc) afin d’alléger un peu le CPU.
Pour la bascule de page à page, normalement ça n’as pas d’impact, on peut imaginer que la page météo est plus longue à charger (cf les point ci-dessus) mais le reste ne doit pas être touché.

Thomas_Fav28 · Janvier 18, 2025, 9:20

Le problème se passent sur n’importe quel support, pc, smartphone, tablette en wifi sur rpi5 en ethernet. En fait même lors de l’édition de la carte, je perds l’affichage qui se reinitialise. Je pense à un conflit avec quelque chose plutot mais je vois pas. Jai essayé en mettant la carte de base en empty, meme chose

Ajout de l’heure avec ici meteo en brouillard

Exemple hier soir : Watch unnamed | Streamable

Pulpy-Luke · Janvier 18, 2025, 9:28

L’éditeur, c’est ultra limité. ça ca pour avoir une vague idée, mais c’est un tel empilement de fenêtres que c’est pas là dessus qu’il faut se baser pour le rendu définitif.
Le pi5 n’est pas le point sensible. Il se contente d’envoyer les infos.
Ce qui compte c’est :

le reséau
les ressources images optimsées
le wifi
le cpu/mémoire de client (donc tablette/pc)

Sur ta vidéo, il faut passer par le F12, pour voir ce qui mets du temps à arriver…

De ce que je devine (puisque sans code), tu as mis la météo dans une carte et dans un ‹ bloc › qui commencer juste au dessus de l’heure. Et blanc sur blanc c’est pas facile à distinguer.
A noter que le brouillard, c’est le plus consommateur. Tu peux essayer d’alléger un peu en ne gardant que quelques lignes ‹ span › de la fonction _fog_html() par ex:

{# Macro pour générer le brouillard #}
{# https://codepen.io/BlogFire/pen/RwBdjvp #}
{%- macro _fog_html() -%}
    "
    <div class='mist'>
        <span style='--i: 1'></span>
        <span style='--i: 3'></span>
        <span style='--i: 16'></span>
        <span style='--i: 5'></span>
        <span style='--i: 13'></span>
    </div>
    "
{%- endmacro -%}```

Thomas_Fav28 · Janvier 18, 2025, 9:39

Daccord je vais essayer, sinon voici le code de la carte heure :

type: picture-elements
image: /local/images/empty.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: image
    image: /local/images/empty.png
    entity: weather.weather
    style:
      top: 50%
      left: 50%
      width: 100%
  - 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: 60%
      left: 50%
      width: 100%
      height: 100%
    card_mod:
      style: |
        ha-card {
          background: transparent;
          text-shadow: 0px 5px 5px rgba(0,0,0,0.3);
          border: 0rem;
          pointer-events: none;
          font-variant: small-caps;
          font-size: 18px;
        } 
  - type: custom:mushroom-template-card
    primary: |2-
        {% 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: 110%
      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;      
        } 
view_layout:
  grid-area: main

Et en ressource, jai 32go de ram sur le pc, avec 1go de debit internet donc c’est assez large je pense

freetronic · Janvier 18, 2025, 9:46

Re,

Je pense pas que ça soit la machine ou le réseau ( pour le tel j’en ai pas la moindre idée et je suis loin de connaitre tout ton code) mais mon pi5 n’a même pas vu passer l’ajout du code, ni en cpu ni en ram (moins de 3Go) et je lui en met plein la tronche pour être poli

et vu que j’ai tjs des tas d’onglets ouverts, ça doit pourtant charger pas mal

pour ma modeste contribution
cdt

Pulpy-Luke · Janvier 18, 2025, 11:23

Essaye ça

type: picture-elements
image: /local/images/empty.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',demo=true)|replace('"','') }}
    card_mod:
      style: |-
        {%- from 'meteo.jinja' import generate_content -%}
          {{ generate_content('background','css',demo=true)|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: |-
      {%- from 'meteo.jinja' import generate_content -%}
        {{ generate_content('foreground','html',demo=true)|replace('"','') }}
    card_mod:
      style: |-
        {%- from 'meteo.jinja' import generate_content -%}
          {{ generate_content('foreground','css',demo=true)|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: 60%
      left: 50%
      width: 100%
      height: 100%
    card_mod:
      style: |
        ha-card {
          background: transparent;
          text-shadow: 0px 5px 5px rgba(0,0,0,0.3);
          border: 0rem;
          pointer-events: none;
          font-variant: small-caps;
          font-size: 18px;
        } 
  - type: custom:mushroom-template-card
    primary: |2-
        {% 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: 110%
      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;

Avec juste cette carte, j’ai tout qui fonctionne (sauf les alertes que j’ai pas configuré) et sans artefact à la bascule

Pulpy-Luke · Janvier 18, 2025, 12:10

Pour info, je viens de pousser une petite amélioration pour rendre le brouillard configurable.

{# Configuration de l'intensité du brouillard #}
{# Définit différents niveaux de chutes de neige [nombre de flocons] #}
{%- set normal_fog = 12 -%}               {# - normal_fog : Brouillard standard avec une intensité moyenne #}

Il suffit de replacer meteo.jinja et de redémarrer.
Evidemem

Thomas_Fav28 · Janvier 18, 2025, 1:15

Merci ça à l’air de bien fonctionner effectivement, j’ai juste enlevé le démo=true pour que cela prenne ma valeur d’entité

Voici ce que ca donne, j’ai un peu détourné la manière dont ça été créé

Thomas_Fav28 · Janvier 18, 2025, 8:50

Savez vous comment accentuer l’effet brouillard ? Notamment sa couleur ? Je trouve quon ne le voit pas assez
Merci

Pulpy-Luke · Janvier 18, 2025, 9:04

Prends la dernière version

github.com/Pulpyyyy/meteocss

config/custom_templates/meteo.jinja

main

{# Définit l'entité météo spécifique à utiliser pour récupérer les données météo #}
{%- set _location = 'weather.paris_1er_arrondissement' -%}

{# Ces variables définissent des dégradés de couleurs pour représenter différentes intensités de la nuit #}
{%- set clear_night='#25259c, #2a2a60, #0f0344' -%}      {# - clear_night : Palette pour une nuit claire avec des tons bleus profonds #}
{%- set normal_night='#272762, #302c2c' -%}              {# - normal_night : Palette pour une nuit standard avec des nuances sombres #}
{%- set dark_night ='#0e0e54, #000000' -%}               {# - dark_night : Palette pour une nuit très sombre avec des tons très foncés #}

{# Ces variables définissent des dégradés de couleurs pour un type de journée spécifique #}
{%- set normal_day='#B9DFFF, #4BA0DB, #004390' -%}      {# - normal_day : Journée standard avec des tons bleus clairs #}
{%- set rainy_day='#B9DFFF, #C1CBD0 , #91A6B0' -%}      {# - rainy_day : Journée pluvieuse avec des couleurs grises et bleutées #}
{%- set dark_day='#B9DFFF , #2F4F4F , #708090' -%}      {# - dark_day : Journée sombre avec des tons plus foncés #}
{%- set snowy_day='#B0E2FF , #AAAAAA , #D3D3D3' -%}     {# - snowy_day : Journée enneigée avec des tons blancs et gris #}
{%- set grey_day='#B4C4CB, #A4A6A8, #94A9c7' -%}        {# - grey_day : Journée grise avec des nuances de gris et de bleu #}

{# Dégradés de couleurs pour le lever et le coucher du soleil #}
{# Définit des transitions de couleurs pour simuler les moments de transition du jour #}
{%- set sunrise_day='#FFF5C3 5%, #FFD966 20%, #FFA64D 40%, #FF7F50 60%, #FF4D4D 80%, #5D0000 100%' -%}     {# - sunrise_day : Palette de couleurs du lever du soleil #}
{%- set sunset_day='#FEFEFFCC 5%, #ECFF00 10%, #FD3229 20%, #F30000 30%, #5D0000 45%, #004390 100%' -%}    {# - sunset_day : Palette de couleurs du coucher du soleil #}

Ce fichier a été tronqué. afficher l'original

Augmente un peu la valeur de

{%- set normal_fog = 12 -%}               {# - normal_fog : Brouillard standard avec une intensité moyenne #}

Attention, ça surcharge vite l’affichage et sur les mobiles, c’est saccadé

Remplace

{%- set color_fog = "#C0C0C0" -%}

Et évidement, redémarrage pour la prise en compte

Thomas_Fav28 · Janvier 18, 2025, 9:12

Oui jai remarqué que avec l’etat en brouillard ca fait sauté mon affichage, j’ai essayé ce code sans succès

{# Macro pour générer le brouillard #}
{# https://codepen.io/BlogFire/pen/RwBdjvp #}
{%- macro _fog_html() -%}
    "
    <div class='mist'>
        <span style='--i: 1'></span>
        <span style='--i: 3'></span>
        <span style='--i: 16'></span>
        <span style='--i: 5'></span>
        <span style='--i: 13'></span>
    </div>
    "
{%- endmacro -%}```