Picture element et placement dynamique d'objet, possible ou pas?

freetronic · Décembre 29, 2024, 12:29

Hello,

J’ai cherché sans trouver, je ne sais même pas si c’est possible et pour le test j’ai pris un truc simple, sun

Pour le test j’ai tenté plusieurs approches sans succès, je ne sais pas si c’est la syntaxe ou juste que ce n’est pas possible dans picture element

  - type: image
    entity: sun.sun
    image: /local/plan3D/sun.png
    style:
      width: 50px
      height: 50px
      left: |
        [[[
          (states['sun.sun'].attributes.azimuth / 360 * 100) + '%'
        ]]]
      top: |
        [[[
          (100 - states['sun.sun'].attributes.elevation) + '%'
        ]]]

si vous avez un avis, merci
cdt

Pulpy-Luke · Décembre 29, 2024, 12:35

Salut

J’ai un truc similaire et qui marche à partager qui tient compte de l’azimut, luminosité et élévation … Mais pas chez moi en ce moment.

freetronic · Décembre 29, 2024, 2:01

Hello,

ça c’est une bonne nouvelle, du coup je vais attendre merci, en fait j’ai pensé à un truc encore plus tordu, mais il me faut la base avec un truc qui fonctionne

cdt

Pulpy-Luke · Décembre 29, 2024, 5:44

Ici ça gère, le soleil et lune (avec phases)

Pulpy-Luke · Janvier 2, 2025, 5:37

Bon voilà ce que j’ai :

Il faut installer les élément suivants

HTML Jinja2 Template card - GitHub - PiotrMachowski/Home-Assistant-Lovelace-HTML-Jinja2-Template-card: This card displays provided Jinja2 template as an HTML content of a card. It uses exactly the same engine as Home Assistant in Developer tools.

Créer un compte sur Créer un compte sur Login to ipgeolocation.io pour avoir les options de la lune.

Ajouter les secrets suivants :

ipgeolocation_api: xxxxx
entitie_zone_home_latitude: 47.8xxxxxxx
entitie_zone_home_longitude: 1.9xxxxxx

a partir de là, on créer les sensors :

sensor:
  - platform: rest
    resource: https://api.ipgeolocation.io/astronomy
    name: Moon API
    scan_interval: 1200
    params:
      apiKey: !secret ipgeolocation_api
      latitude: !secret entitie_zone_home_latitude
      longitude: !secret entitie_zone_home_longitude
    json_attributes:
      - date
      - current_time
      - moonrise
      - moon_status
      - moon_altitude
      - moon_distance
      - moon_azimuth
      - moon_parallactic_angle
    value_template: >
      {% if value_json.moon_altitude > 0 %}
        up
      {% else %}
        down
      {% endif %}
    icon: >
      {{ state_attr('sensor.moon', 'icon') }}
template:
  - sensor:
      - name: "period_of_day"
        state: >-
          {% set elevation = state_attr('sun.sun', 'elevation') %}
          {% set rising = state_attr('sun.sun', 'rising') %}
          {%- if elevation <= -12 -%}
            night
          {%- elif -12 < elevation <= -6 -%}
            {{ 'dawn' if rising else 'dusk' }}
          {%- else -%}
            day
          {%- endif -%}
      - name: "Sun Top"
        state: >-
          {% from 'rotation.jinja' import deg2rad_top %}
          {{ deg2rad_top(state_attr('sun.sun', 'azimuth'), state_attr('sun.sun', 'elevation')) }}
      - name: "Sun Left"
        state: >-
          {% from 'rotation.jinja' import deg2rad_left %}
          {{ deg2rad_left(state_attr('sun.sun', 'azimuth'), state_attr('sun.sun', 'elevation')) }}
      - name: "Sun Top inverse"
        state: >
          {% from 'rotation.jinja' import deg2rad_top %}
          {{ deg2rad_top(state_attr('sun.sun', 'azimuth'), state_attr('sun.sun', 'elevation'), 180) }}
      - name: "Sun Left inverse"
        state: >-
          {% from 'rotation.jinja' import deg2rad_left %}
          {{ deg2rad_left(state_attr('sun.sun', 'azimuth'), state_attr('sun.sun', 'elevation'), 180) }}
      - name: "Sun opacity"
        state: |
          {%- if states('sun.sun') == 'above_horizon' -%}
          1
          {%- else -%}
          0
          {%- endif -%}
      - name: "moon Top"
        state: >-
          {% from 'rotation.jinja' import deg2rad_top %}
          {{ deg2rad_top(state_attr('sensor.moon_api', 'moon_azimuth'), state_attr('sensor.moon_api', 'moon_altitude')) }}
      - name: "moon Left"
        state: >-
          {% from 'rotation.jinja' import deg2rad_left %}
          {{ deg2rad_left(state_attr('sensor.moon_api', 'moon_azimuth'), state_attr('sensor.moon_api', 'moon_altitude')) }}
      - name: "moon Top inverse"
        state: >-
          {% from 'rotation.jinja' import deg2rad_top %}
          {{ deg2rad_top(state_attr('sensor.moon_api', 'moon_azimuth'), state_attr('sensor.moon_api', 'moon_altitude'), 180) }}
      - name: "moon Left inverse"
        state: >-
          {% from 'rotation.jinja' import deg2rad_left %}
          {{ deg2rad_left(state_attr('sensor.moon_api', 'moon_azimuth'), state_attr('sensor.moon_api', 'moon_altitude'), 180) }}
      - name: "moon opacity"
        state: |
          {%- if states('sensor.moon_api') == 'up' -%}
          1
          {%- else -%}
          0
          {%- endif -%}

Ajouter les images dans www

Et enfin on ajoute la carte

type: picture-elements
image: /local/images/empty.png
elements:
  - type: custom:html-template-card
    title: ""
    ignore_line_breaks: true
    picture_elements_mode: true
    content: >
      <img src="/local/images/sun/sun-48190.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/{{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%

En gros, lune et soleil vont suivre la parabole

S’afficher quand ils sont levés ou pas, phase de la lune comprise. Chez moi, ça fait donc le tour de la maison en fonction de la position réelle.
Il faut aussi adapter l’angle de la maison (chez moi 25°) dans le fichier /config/custom_templates/rotation.jinja

{# Définition de l'angle de la maison (house) en degrés par rapport au nord. Cet angle sera utilisé pour ajuster les calculs des angles d'azimut soleil/lune #}
{%- set house_angle_deg = 25 -%}

{# Définition de la constante PI pour convertir des degrés en radians #}
{%- set PI = 3.14159265359 -%}

{# Macro privée pour calculer la coordonnée "top" en fonction des angles d'azimut et d'élévation #}
{%- macro _deg2rad_top(azimuth_deg, elevation_deg, house) -%}
    {# Conversion de l'azimut de degrés en radians, en prenant en compte l'angle de la maison #}
    {%- set azimuth_rad = (azimuth_deg - house) * PI / 180 -%}
    {# Conversion de l'élévation de degrés en radians #}
    {%- set elevation_rad = elevation_deg * PI / 180 -%}
    {# Calcul du cosinus de l'azimut en radians #}
    {%- set cos_azimuth = cos(azimuth_rad) -%}
    {# Calcul du cosinus de l'élévation en radians #}
    {%- set cos_elevation = cos(elevation_rad) -%}
    {# Calcul de la coordonnée "top" en fonction des cosinus, résultat converti en entier (50% - 49% facteur de l'élevation pour avoir une valeur entre 1 et 99) #}
    {{- (50 - 49 * cos_azimuth * cos_elevation) | int(0) -}}

{%- endmacro -%}

{# Macro privée pour calculer la coordonnée "left" en fonction des angles d'azimut et d'élévation #}
{%- macro _deg2rad_left(azimuth_deg, elevation_deg, house) -%}
    {# Conversion de l'azimut de degrés en radians, en prenant en compte l'angle de la maison #}
    {%- set azimuth_rad = (azimuth_deg - house) * PI / 180 -%}
    {# Conversion de l'élévation de degrés en radians #}
    {%- set elevation_rad = elevation_deg * PI / 180 -%}
    {# Calcul du sinus de l'azimut en radians #}
    {%- set sin_azimuth = sin(azimuth_rad) -%}
    {# Calcul du cosinus de l'élévation en radians #}
    {%- set cos_elevation = cos(elevation_rad) -%}
    {# Calcul de la coordonnée "left" en fonction du sinus et du cosinus, résultat converti en entier (50% - 49% facteur de l'élevation pour avoir une valeur entre 1 et 99) #}
    {{- (50 + 49 * sin_azimuth * cos_elevation) | int(0) -}}
{%- endmacro -%}

{# Macro pour calculer la coordonnée "top" avec l'angle de la maison défini #}
{%- macro deg2rad_top(azimuth_deg, elevation_deg, correction_deg = 0 ) -%}
    {{- _deg2rad_top(azimuth_deg, elevation_deg, house_angle_deg + correction_deg) -}}
{%- endmacro -%}

{# Macro pour calculer la coordonnée "left" avec l'angle de la maison défini #}
{%- macro deg2rad_left(azimuth_deg, elevation_deg, correction_deg = 0 ) -%}
    {{- _deg2rad_left(azimuth_deg, elevation_deg, house_angle_deg + correction_deg) -}}
{%- endmacro -%}

Evidement, redémarrage & co pour la prise en compte

Pulpy-Luke · Janvier 2, 2025, 5:38

et l’image vide

Pulpy-Luke · Janvier 2, 2025, 5:38

freetronic · Janvier 2, 2025, 7:32

re,

super merci, je regarde à tout ça dès que je peux, je ferai un retour

cdt

freetronic · Janvier 3, 2025, 3:49

En fait je voulais placer le soleil de façon dynamique parce que j’avais dans l’idée encore plus tordue d’avoir la bonne syntaxe pour faire un brightness dynamique (mais pas que) de la picture element en fonction de la position du soleil, et … je crois que j’ai enfin trouvé la bonne syntaxe, d’autres tests vont venir mais du coup je vais tout mettre ici, il faut encore que je teste plus avant avec le soleil demain, là il va faire nuit…

je garde quand même le code de la carte au dessus, ça risque de me servir quand même du coup

cdt

Pulpy-Luke · Janvier 3, 2025, 4:12

OK.
A voir si tu arrives qui est compatible avec les éclairages aussi.
Perso j’ai pas obtenu un truc concluant, donc j’ai juste une distinction jour/nuit avec un calque en plus pour foncer le fond. (Peut-être que l’opacité est une autre option)

freetronic · Janvier 3, 2025, 4:17

re,

oui j’ai ajouté un calque transparent cette aprem, et dans le doute j’ai fait 2 découpages ( tant qu’à faire )

pour pouvoir jouer …

freetronic · Janvier 3, 2025, 7:17

re,

pas certain que ça se voit bcp sur le gif, mais ça semble en tout cas fonctionnel

cdt

freetronic · Janvier 6, 2025, 2:30

Re,

Tu aurais le new_moon et le sun-48190 en png sous le coude ? merci

cdt

Pulpy-Luke · Janvier 6, 2025, 2:51

çachés là Picture element et placement dynamique d'objet, possible ou pas? - #7 par Pulpy-Luke

freetronic · Janvier 6, 2025, 3:02

Re,

mince j’avais raté l’image vide… par contre le soleil c’est un jpg (histoire de garder les proportions je voudrais le même dans la mesure du possible)

ça ça fonctionne c’est déjà ça

merci

Pulpy-Luke · Janvier 6, 2025, 3:10

hummm, pas compris l’histoire des proportions

Je t’ai donné toutes les vraies images de ma prod (sans mes effets metéo)
Donc la taille affichée est assurée par les heigh/width de card-mod du code, ça doit marcher de base