V5 - Widget HTML - Image 3 états

[Mistoukwak]

Bonjour,

Pour le liveview de la piscine, je voudrai faire un widget qui m’affiche 3 images selon 3 états : volet ouvert, volet fermé, volet en fonctionnement.

J’ai :

• une entrée IPX NO relié au contact Volet fermé du volet : id65554
• une entrée IPX NC relié au contact Volet en fonctionnement du volet : id65553
• les 3 images sur le serveur web du NAS

Je voudrais faire un widget html du type :

IF #id655533# = "On" THEN
    IF #id65554# = "On" THEN Img.src = volet_fermé.jpg
    ELSE Img.src = volet_ouvert.jpg
ELSE img.src = volet_fonctionnement.jpg

Pour récupérer les valeurs des ID, j’ai vu plusieurs options :

• une avec l’API du type :

/* Get data from API */
      function getAna(cb) {
        fetch("/api/core/ana?ApiKey=ulmWrsx0QvdoWvH", {method: "GET"}).then((ret) => { // Get ANA group
          ret.json().then((ana) => {
            cb(ana); // Return ANA group from API
          });
        });
      }

• celle qu’utilise @fgtoul pour le capteur de turbidité :

<script>
window.GCE_Refresh.push(function(data) {
    switch (data['_id'])
    {
        case 262144:
            turbidity(data.value); 
            break;
    }
  })
  
  
function init() {
    GCE_API.getANA(262144).then((ret) => {
    turbidity(ret.value);
    })
  }

Quelle serait la commande pour avoir l’état d’une entrée à la place de getANA ?

Merci d’avance et bonne journée.

[fgtoul]

Bonjour,
en téléchargement sur le site boutique, tu as la doc complète de l’API pour widget HTML.
Je la remets ici.
IPX800V5_Widget_HTML_Api(1).pdf (98,5 Ko)
Cette API fonctionne pour les dashboards classiques, pas pour les liveviews.

Je te conseille d’utiliser l’ancienne méthode sur Liveview avec la commande fetch.

Le plus simple serait de mettre des IO virtuelles à ON ou OFF par une règle en fonction de l’état de ton rideau.

• IO1 : rideau fermé
• IO2 : ouverture complète.
• IO3 : Mouvement

Ensuite, tu superposes 3 widgets de type image ON/OFF, chacun avec son image et IO correspondante , seule l’URL ON serait renseignée.
Le tour est joué, pas de dév à faire

bonne journée

[Mistoukwak]

Bonjour,

Et merci pour ta réponse.
Je ne connaissais pas la nuance entre les 2 méthodes selon Dashboard ou Liveview.
Je n’avais pas non plus vu la doc spécifique html sur la boutique, uniquement l’API classique.
On en apprend tous les jours !

La solution que tu proposes par superposition de widget ON/OFF est effectivement la plus simple et donc la meilleure !
Je n’y aurai jamais pensé. Merci.
Comme quoi j’ai bien fait de demander de l’aide !

Merci encore.
Jon

[fgtoul]

@Mistoukwak

Je ne connaissais pas la nuance entre les 2 méthodes selon Dashboard ou Liveview.

l’uniformisation devrait être faite par évolution du firmware.
Lors de la création d’un widget HTML sur dashboard classique, un code est généré comme template de base. Après évolution du Firmware, je pense qu’il en sera de même pour les widgets HTML sur Liveview.

Pas de date annoncée.

[fgtoul]

juste pour complément d’info,
concernant l’API HTML sur dashboard classique, j’avais mis le code d’un widget perso dans le sujet concernant mon install piscine.
Les commandes getAna et getIO y sont utilisées.

@fgtoul

Le widget est de type « HTML » :

<script>
  window.GCE_Refresh.push(function(data) {
    switch (data['_id'])
    {
        case 65776:
            changeIcon(data.on); 
            break;
        case 262198:
            countdown(data.value); 
            break;
    }
  })
  
  function init() {
    GCE_API.getIO(65776).then((ret) => {
    changeIcon(ret.on);
    })
    
    GCE_API.getANA(262198).then((ret) => {
    countdown(ret.value);
    })
  }
  
  function changeIcon(state){
      var imgOn="https://zupimages.net/up/23/14/gf2n.png";
      var imgOff="https://zupimages.net/up/23/14/3sqs.png";
      monImage=document.getElementById("baignade");
      monImage.src = state ? imgOn : imgOff;
  }
  function countdown(value){
      var txt= document.getElementById("cnt");
      
      var reste=value;
				var result='';
				
				var nbHeures=Math.floor(reste/3600);
				reste -= nbHeures*3600;
 
				var nbMinutes=Math.floor(reste/60);
				reste -= nbMinutes*60;
 
				var nbSecondes=reste;

				if (nbHeures>0)
					result=result+nbHeures+'h ';
 
				if (nbMinutes>0)
					result=result+nbMinutes+'min ';
 
				if (nbSecondes>0)
					result=result+nbSecondes+'s ';

                txt.innerHTML=result;
  }

  init()
</script>
<center>
    <img id="baignade" width=96px/>
    <p id="cnt"/>
</center>

[Mistoukwak]

Merci pour le code, je le mets de côté.

La solution des 3 widgets ON/OFF superposés marche à merveille !

Merci