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

[Pulpy-Luke]

et en version minimale avec juste l’entité weather adaptée ça donne quoi ?
ton entité weather contient les infos de ce genre ?

[Thomas_Fav28]

Oui mon sensor provient de meteo france

et en mode minimal, j’ai bien l’affichage correspondant

[freetronic]

Tu ne t’es pas fais avoir comme moi?

type: custom:meteo-card
location: weather.home
sun_entity: sun.sun
demo_mode: true

weather: weather.forecast_maison

edit j’ai rien dit

[Pulpy-Luke]

@Thomas_Fav28

et en mode minimal, j’ai bien l’affichage correspondant

Tu peux virer la ligne de demo (elle est false par défaut)
Si ça marche là, c’est une erreur de syntaxe dans le picture element

[Thomas_Fav28]

J’ai tout viré de la picture et j’ai mis ce code :

type: picture-elements
image: /local/meteo/fond_meteo.png
elements:
  - type: custom:meteo-card
    demo_mode: false
    weather: weather.luce
    layers:
      - sky
      - sun
      - moon
      - background
      - foreground

et aucun affichage. Il semble qu’il y ait un probleme avec la picture-element

[Pulpy-Luke]

@Thomas_Fav28

image: /local/meteo/fond_meteo.png

tu as une image transparente à la place ?

[Thomas_Fav28]

Oui, c’est ça, aucun affichage (juste image transparente)

[Pulpy-Luke]

mets un

    style:
      top: 50%
      left: 50%
      width: 100%
      height: 100%

tout en bas

[Thomas_Fav28]

J’ai appliqué le style à la picture element, pas mieux

[Pulpy-Luke]

Non justement, à la carte méteo

type: picture-elements
image: /local/meteo/fond_meteo.png
elements:
  - type: custom:meteo-card
    weather: weather.luce
    layers:
      - sky
      - sun
      - moon
      - background
      - foreground
    style:
      top: 50%
      left: 50%
      width: 100%
      height: 100%

[Thomas_Fav28]

Parfait ! Ca fonctionne, merci

[Pulpy-Luke]

Donc ajoute ça à la version précédent, ça donne quoi ?

type: picture-elements
image: /local/meteo/fond_meteo.png
elements:
  - type: custom:meteo-card
    weather: weather.luce
    layers:
      - sky
      - sun
    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:meteo-card
    weather: weather.luce
    layers:
      - foreground
    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;
    }

[freetronic]

Je reproduis uniquement si je ne met pas le style avec ou sans entity

type: picture-elements
image: /local/plan3D/Transparent 1920x1080.png
elements:
  - type: custom:meteo-card
    demo_mode: false
    weather: weather.forecast_maison
    entity: sun.sun
    layers:
      - sky
      - sun
      - moon
      - background
      - foreground
    style:
      top: 50%
      left: 50%
      width: 100%
      height: 100%

[Thomas_Fav28]

J’avais fait la modification directement sur ce code, ca fonctionne comme l’ancienne ! Avec un meilleure visuelle sur la pluie par exemple maintenant. Concernant les performances, tu penses que c’est plus fluide que l’ancienne ?

[Pulpy-Luke]

Par défaut picture element place tout en 0/0 je crois

[freetronic]

oui c’est ça, enfin c’est au moins tout à gauche, à force je regarde même plus…

[Pulpy-Luke]

@Thomas_Fav28

J’avais fait la modification directement sur ce code, ca fonctionne comme l’ancienne ! Avec un meilleure visuelle sur la pluie par exemple maintenant. Concernant les performances, tu penses que c’est plus fluide que l’ancienne ?

En perf, coté client (celui qui fait l’affichage) je pense que la nouvelle version est meilleure, même si comme les effets sont plus nombreux pour essayer de ça joli, ça compense.
Ce qui est sur c’est que coté HA c’est plus rapide à traiter, plus leger à manipuler.
Mais je compte sur vous pour confirmer.
D’ailleurs au passage, l’effet de ciseau au chargement doit avoir disparu

@freetronic

à force je regarde même plus…

pareil j’ai tout codé en streamline donc je manipule la version allégée

[Thomas_Fav28]

Oui, il n’y a plus ce bug au chargement ou au changement de page. A voir maintenant notamment le brouillard qui causait des problèmes d’affichage des autres cartes si la densité était trop élevé. (j’étais passé à la valeur 4). Mais visuellement, la nouvelle version : TOP

[freetronic]

Re,

@Pulpy-Luke

pareil j’ai tout codé en streamline donc je manipule la version allégée

Pareil, plus ou moins pas le choix, j’avais atteint la limite possible à priori…

Y a t'il une limite théorique en nombre de caractères, lignes de code ... à un dashboard HA?

Hello, J’ai un petit soucis avec mon code du coup je me pose la question de la limite théorique soit en nombre de caractères, soit en nombre de lignes, ou d’autres choses auxquelles je n’ai pas pensé, bon mon dashboard est un peu copieux, mais si je supprime une partie au début du code, je peux ajouter la suite, sinon, même si je sauvegarde, ça ne sauve pas, et je dois passer par annuler parce que je reste sur la fenêtre d’édition. Je l’ai dit c’est un peu copieux, mais je migre de mon ancien …

pour ça que je peux faire un dash de test complet en 10 secondes

[Pulpy-Luke]

tout pareil et puis les adaptations, prennent 15sec, c’est corrigé partout