J’ai un soucis que je n’arrive pas à résoudre avec plusieurs approches différentes dans un epicture element, je détaille le truc le plus simple les autres sont alambiqués donc un esp dans la voiture diffuse un ibeacon, qui est recherché par les BL proxy de la maison, pour faire simple j’en prend 1 seul ici. quelque soit l’approche j’ai toujours le soucis sur un gif non bouclé
ibeacon detecté > esp passe à on gif montée / ibeacon non detecté > esp passe à off gif descente, là ou ça se corse c’est que si je repase à on , le gif ne se charge pas, idem pour off, donc si vous avez des idées … ( j’ai tenté un horodatage en intercalant 1 png en début et en fin sans succès), idem avec un template de sens de montée/ descente ( qui à le même effet sur le gif)
donc si vous avez des idées je prend merci
j’ai testé plusieurs navigateurs dans le doute, donc ça ne vient pas de mon firefox.
Je ne comprends peut-être pas bien mais un binary_sensor n’étant QUE on/off et puisque ce binary_sensor est géré par ton ESP.
Le fait qu’il soit unknow montre :
soit ton binary est mal géré,
soit ta communication esp - ha ne marche pas bien
En tout cas, le fait que ça s’affiche ou pas avec un gif, c’est une état supplémentaire qui n’a de lien avec l’erreur précédente QUE parce que tu te sers de ça pour afficher la voiture dans un picture element.
Et que vue la copie d’écran, les bonnes valeurs dans le binary_sensor, provoque les bonnes actions dans ta carte
ce n’est pas un soucis d’entité ou d’état unknow. je le met volontairement en unavailable au début pour ne rien afficher.
Pour faire simple, je change l’état de l’entité dans les outils dev pour que ça soit plus facile
cache et historique du navigateur vide.
je passe l’esp à on, il charge le gif de montée, ça affiche le gif de montée.
je passe l’esp à off, il charge le gif de descente, ça affiche le gif de descente.
je repasse l’esp à on, il ne charge pas le gif, il bascule de la position en bas à la position haute sans charger le gif
je repasse l’esp à off, il ne charge pas le gif, il bascule de la position en haut à la position basse sans charger le gif
je ferme et rouvre le navigateur, je retrouve un fonctionnement normal, 1fois on, 1 fois off, ensuite il ne charge pas le gif… on voit les 4 étapes visuellement sur le gif du 1er post
L’esp ne charge pas de gif… L’esp te donne une entité binary_sensor qui vaut on ou off…
La carte affiche le gif en fonction de l’état du binary_sensor.
Déduire les infos de fonctionnent d’une image, c’est pas le plus facile. Si l’image complete un code (esp ou yaml) ok, mais autrement c’est moins utile.
Accesoirement, je vois un état unavailable dans ton entité…
Partage la partie de la carte concernée plutot
le code fonctionne, la carte fonctionne, c’est juste que visuellement sur la carte si l’entité passe à on j’ai le gif montée qui s’affiche, si l’entité passe à off le gif descente s’affiche, si il repasse à on, visuellement la voiture passe de position basse à position haute, sans montrer le gif, comme si c’était stocké dans le cache du navigateur.
Du coup au lieu d’afficher position1 gifgifgifgifgif position2 ( le gif donc ) ça affiche position1 … position2 ( en espérant être clair )
Et attention au cache navigateur, si a un moment tu te trompes lors de la conception de la carte (inversion d’image) ça reste un moment avec les inversions alors que le code est bon
Pour l’image vide, 1x1 pixel transparent, c’est top
J’ai testé le code de la carte, comme prévu, à part que c’est plus propre, ça ne change par grand chose mais, en supprimant la condition, j’ai l’impression, que je peux recharger le gif plus rapidement
pour autant j’ai tjs le phénomène que j’ai décomposé en 2 gifs pour qua ça soit plus clair
ibeacon est à on > esp passe à on > déclenchement de montee.gif, esp passe à off déclenchement de descente.gif, ça c’est ok
esp repasse à on, esp repasse à off, montee.gif et descente.gif ne sont pas chargés, on passe de la position de départ à la position d’arrivée. Bon dans l’absolu, qd on part on ne revient pas de suite et quand on arrive on ne repart pas tout de suite, mais je voudrais bien comprendre le phénomène, voir le contourner si c’est possible ( et je ne trouve pas )
J’avais déjà tenté cette approche sans y parvenir, mais là ça fonctionne
Ajoute un paramètre unique basé sur le timestamp du dernier changement d’état
Force le navigateur à recharger le GIF depuis le début (contourne le cache)
vu que l’url change à chaque fois /local/plan3D/montee.gif?t=1729350123 … /local/plan3D/montee.gif?t=1729350456…
Bon alors l’approche précédente est totalement fonctionnelle, mais, elle est assez lourde à charger
La soluce des soluces
on va simplifier ( testé sous firefox )
et passer sur ce code ( les style me sont propres sur ma picture element, il faudra adapter, tout comme les entités ) il n’est pas encore parfaitement positionné mais 100% fonctionnel
sur le on la voiture apparait, puis monte
sur le off la voiture recule, puis disparait
- type: image
entity: binary_sensor.esp3_veranda_clio_ibeacon_presence
image: /local/plan3D/Transparent 1920x1080.png
style:
top: 50%
left: 51%
width: 120%
height: 120%
transform: translate(-50%, -50%) scale(0.85)
pointer-events: none
z-index: 10
card_mod:
style: |
:host {
/* On force l'image en fond du composant entier */
background-image: url("/local/plan3D/{{ 'montee' if is_state('binary_sensor.esp3_veranda_clio_ibeacon_presence', 'on') else 'descente' }}.gif?t={{ as_timestamp(states.binary_sensor.esp3_veranda_clio_ibeacon_presence.last_changed) | int }}") !important;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
/* Gestion de l'opacité */
{% if is_state('binary_sensor.esp3_veranda_clio_ibeacon_presence', 'off') %}
opacity: 0;
transition: opacity 0.5s 3s;
{% else %}
opacity: 1;
transition: opacity 0.5s 0s;
{% endif %}
}
img {
/* On rend l'image source totalement invisible pour ne voir que le background */
display: block;
opacity: 0;
width: 100%;
height: 100%;
}
merci
