Widget VMC en APNG

Bonsoir,

A la recherche d’un icon de VMC sur internet, je suis tombée sur un fichier type « apng» compatible avec les explorateurs Safari et Chrome. Ceux sont des fichiers animés dans le même type que GIF mais sous le format PNG. J’ai eu la curiosité de les appliquer dans mon IPX V4. Après quelques recherches sur l’HTML, j’ai réussi à faire une petite animation pour ma VMC.

Voici la procédure que j’ai employée :

  • créer deux fichiers VMC:
    • ventilpv_0.png : fichier png VMC arrêt
    • ventilpv_1.png : fichier apng VMC en service

Je les ai stocké sur le disque de ma freebox.

J’ai créé un petit widget HTML sur l’IPX, voici le code :

led20 = marche vmc petite vitesse
led21 = marche vmc grande vitesse

let p = datasources["V4"]["response"]["led20"];
let g = datasources["V4"]["response"]["led21"];

return `
<center>
  <table width="90%" border=0>
    <tr>
      <td align=left valign=middle width="25%"><img src="http://ip-serveur-web/repertoire web/ventilpv_${p}.png" width=60 height=60></td>
      <td align=left valign=middle width="25%">VMC PV</td>
      <td align=right valign=middle width="25%"><img src="http://ip-serveur-web/repertoire web/ventilpv_${g}.png" width=60 height=60></td>
      <td align=right valign=middle width="25%">VMC GV</td>
    </tr>
  </table>
</center>
`;

Je vous fais suivre aussi les deux fichiers PNG que j’ai créer avec APNGb pour les curieux.

ventilpv_1
ventilpv_0

Capture d’écran 2020-04-28 à 01.09.04

8 « J'aime »

Bonjour Dome,

joli travail

une remarque qui s’applique en général à la création de widgets : attention, pour des raisons parfois cosmétiques, à ne pas être trop gourmand en ressources, ce qui risquerait de ralentir l’IPX.

Pour vérifier : à la fin du fichier status.xml, regardez la valeur lps0. Supérieure à 10 000 = parfait.

Encore bravo, vous m’avez fait découvrir le format APNG qui semble très intéressant.

Bonne journée

4 « J'aime »

Bonjour,

Merci. Oui j’ai vérifiée la valeur Ips0 dans le status.xml il a descendu légèrement malgré une configuration bien chargée. Mais je pense que l’on peut optimiser le code et la taille du fichier « PNG ». mais je laisse cela au pro du HTML.

2 « J'aime »

Excellent !
Je ne connaissais pas non plus, c’est chouette ! :slight_smile:

1 « J'aime »

Bonjour Grocrabe,

A quoi correspond cette info lps0 SVP ? Chez moi elle n’est que de 9226 ! C’est grave.

Merci de votre réponse.

Bonjour,

La variable Lps0 ce situe en fin de fichier status.xml. Elle sert a vérifier le fonctionnement de la carte IPX800 V4.

2 « J'aime »

Bonjour PatLeHibou,

9226 n’est pas grave… en dessous de 6 à 7000 ça va devenir pénalisant, au dessus de 10 000 on est sûr de la réactivité.

Bonne journée

3 « J'aime »

@Dome, je me suis permis de remettre en forme le code du widget. Côté performance, il est très bien ce widget :+1:

Pour info, ce widget est on ne peut plus simple et ne consomme rien sur l’IPX autre que la datasource qui est rafraîchit régulièrement (mais qui est obligatoire dès que l’on écrit un widget).

3 « J'aime »

Sympa comme widget, si en plus il est léger …
il me semble qu’il y a un poste de @fgtoul qui regroupe des widget possible à implanter.
Peut-être intéressant de le mettre en avant sur le forum pour avoir d’autre création avec se type de format à l’avenir.

1 « J'aime »

Bonjour Lapier12,

C’est une bonne idée… si il y a des forumeurs qui veulent partager leurs widgets, postez les ici ou sur un post spécifique. Avec votre accord nous les regrouperons dans un Wiki.

Il y a effectivement une rubrique Widgets dans le wiki, richement alimentée par @fgtoul.

Bonne journée

3 « J'aime »

Je suis curieux, j’ai donc voulu tester.

frame01
Vanne oFF

Le résultat est pas trop mal je trouve.

@Dome Je pense que tu peux vraiment diminuer le poids de ton icon en restant sur 3 ou 4 images. La il me semble que tu en à 23.

Pour le code Html c’est pas encore pour moi mais je vais m’y mettre un jour…

4 « J'aime »

Bonjour,
je vous envoie un petit gyrophare.Gyrophare_off Gyrophare_on

3 « J'aime »

frame01 Arosage off

4 « J'aime »

Bonjour,
Je suis ce post avec beaucoup d’intérêt mais j’avoue être bloqué. J’ai réussi a créer la source de données, et crée un widget HTML avec le code donné plus haut. Sauf qu’a chaque rafraichissement, a la place des icones, j’ai un carré vide. Je pense que le lien vers les fichiers n’est pas correct.
J’ai stocké les fichiers PNG sur mon NAS Synology. Quelle est la syntaxe a mettre dans le widget pour pouvoir accéder aux fichiers? Merci pour votre aide… je sèche… :roll_eyes:

désolé de déterrer ce sujet, la question ne porte pas réellement sur l’IPX mais plutot sur l’interraction avec le syno, une ame charitable pourrait-elle expliquer comment on accède a un fichier stocké dans le synology?

img src="://repertoire disque/ventilpv_${p}.png"

Quelle est la syntaxe à utiliser pour que l’IPX puisse chercher le fichier sur le NAS. Je m’emèle les pinceaux entre syntaxe d’accès par « explorateur » et syntaxe dans navigateur web…

bonjour
l’interface de l’ipx800 est lue par votre navigateur internet.
En toute logique, l’image devra être positionnée dans un dossier Web de votre NAS, il sera accédé par son URL http://ip-syno/dossierWeb/ventilpv_${p}.png

bonne journée

Merci pour ces infos. J’avance a petits pas… j’ai compris qu’il fallait installer web station pour que soit créé le dossier web dans le syno pour être accessible via le navigateur. chose faite, j’y ai copié les fichiers image png, mais en tapant l’adresse http://IP_SYNO/web/ventilpv0.png , j’ai err 404 la page que vous cherchez est introuvable… je ne cherche pas une page, juste une image… :rofl: j’ai zappé quelque chose?

Web est la racine de votre serveur web.
Vous devez donc y creer un sous dossier, par exemple gce et y mettre vos images.
Du coup l’url sera http://IP_SYNO/gce/ventilpv0.png

Merci @fgtoul pour ce complément d’information. Heureusement qu’il y a des gens comme vous sur le forum qui expliquent des choses banales pour les uns à ceux pour qui c’est du chinois.
J’arrive maintenant a accéder a mes icones par le navigateur (encore merci pour cette info). Toutefois, dans le widget, ça reste encore vide. y-a-t-il un problème de syntaxe ou est-ce la source de données qui pose problème? (la source de données a l’air de fonctionner, j’ai bien l’heure de mise à jour).
copie d’écran de mon widget:

let p = datasources["V4"]["response"]["btn10"];
let g = datasources["V4"]["response"]["btn11"];

return `
<center>
  <table width="90%" border=0>
    <tr>
	  <td align=left valign=middle width="25%"><img src="http://ADR-IP/gce/ventilpv_${p}.png" width=60 height=60></td>
      <td align=left valign=middle width="25%">VMC PV</td>
      <td align=right valign=middle width="25%"><img src="http://ADR-IP/gce/ventilpv_${g}.png" width=60 height=60></td>
      <td align=right valign=middle width="25%">VMC GV</td>
    </tr>
  </table>
</center>
`;

Déja merci pour votre aide… il y a ceux qui maitrisent l’éléctronique, ceux qui maitrisent la programmation, certains les deux… (d’autres aucun des deux… :rofl:)

j’ai oublié de préciser que lorsque je remplace cette syntaxe par le nom exact du fichier, l’icone s’affiche sur le dashboard.