🧭 V5 : CANVAS-GAUGE - Affichage de la direction des vents

[fgtoul]

Bonjour à tous,

sur la V4 il était possible d’afficher la direction du vent, issue d’une source météo ou d’un capteur type Girouette grâce au widget natif nommé « Pointeur ».
Il suffisait de créer une source de données pointant status.xml ou bien vers météo et choisir l’entrée analogique.

Sur V5, le widget type « Pointeur » n’existe pas encore.
Je vous propose alors d’adapter le widget que j’avais proposé pour V4 dans ce tutoriel

Créons d’abord un Widget de type HTML et collons ce code :

<canvas id='fgtoul5' style="width:95%;height:95%;" data-type="radial-gauge" 
    data-min-value="0"
    data-max-value="360"
    data-major-ticks="N,NE,E,SE,S,SW,W,NW,N"
    data-minor-ticks="22"
    data-ticks-angle="360"
    data-start-angle="180"
    data-stroke-ticks="false"
    data-highlights="false"
    data-color-plate="#3a3"
    data-color-major-ticks="#f5f5f5"
    data-color-minor-ticks="#ddd"
    data-color-numbers="#ccc"
    data-color-needle="rgba(240, 128, 128, 1)"
    data-color-needle-end="rgba(255, 160, 122, .9)"
    data-value-box="false"
    data-value-text-shadow="false"
    data-color-circle-inner="#fff"
    data-color-needle-circle-outer="#ccc"
    data-needle-circle-size="15"
    data-needle-circle-outer="false"
    data-animation-rule="linear"
    data-needle-type="line"
    data-needle-start="75"
    data-needle-end="99"
    data-needle-width="3"
    data-borders="true"
    data-border-inner-width="0"
    data-border-middle-width="0"
    data-border-outer-width="10"
    data-color-border-outer="#ccc"
    data-color-border-outer-end="#ccc"
    data-color-needle-shadow-down="#222"
    data-border-shadow-width="0"
    data-animation-duration="900"
></canvas>
</center>

    <script async src="//cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.5/all/gauge.min.js"/>

Créez un second widget HTML et collez ce code

<script type="text/javascript">
  /* Get state and set widget */
    
    function init() {
      getState((ipx) => {
          var gauge1 = document.gauges.get('fgtoul5'); 
      gauge1.value=ipx.value; // Isolated relay state
    });
  }

     function getState(cb) { 
    let ID="monID";
    let ApiKey="monApiKey";
    let uri = "/api/core/ana/"+ID+"?ApiKey=" +ApiKey;
    fetch(uri, {method: "GET"}).then((ret) => { // Get IPX object
      ret.json().then((ipx) => {
        cb(ipx); // Return IPX state from API
      });
    });
  }

  /***/
  /* Auto refresh (optional) */
  function autoRefresh() {
    setInterval(() => {
      init();
    }, 1000); // 1 sec
  }
  /***/
  
  init();
  autoRefresh(); // Optional
  </script>

modifiez la valeur de votre ApiKey et renseignez le bon ID de la variable analogique

Pour modifier l’apparence du widget, rendez-vous sur le site du développeur

EDIT b24/12/2024 : voir plus bas une version de code utilisant l’API Widget HTML (recommandée). Cette API n’existait pas au moment de la rédaction de ce tutoriel.

Have FUN

[seraphinou]

Hello @fgtoul
Trop top je met ça en place tt à l heure
Pour allez plus loin
Est il possible d exporter via mqtt de la V5 les valeurs de direction
Là ça serais le grale

[fgtoul]

pour MQTT tu devrais trouver des exemples sur le forum, car après tout il ne s’agit que d’envoyer une valeur analogique à ton Broker, ici c’est hors sujet

[seraphinou]

Ah non c est pas la valeur analogique que je veut envoyer mais là direction du vent

[fgtoul]

Il faut créer 16 chaines de caractères (16 directions)
puis il faudra créer des règles qui enverront la bonne chaine de caractères en fonction de la valeur analogique (utilisation de comparateurs) . Mais on est hors sujet ici.

[seraphinou]

ok @fgtoul
je vais ouvrir un autre post
merci

[seraphinou]

re
pour mettre en place le widjet girouette
on prend L id de la valeur brute analogique de la girouette?

[fgtoul]

tu prends l’ID du résultat de la fonction

[seraphinou]

donc la valeur en degre de l 'objet fonction c 'est bien ce que j 'ai mis
j 'ai mis aussi l 'apikey mais elle reste tjs au Nord
pourtant les valeurs de l 'objet fonction bouge bien mais pas le widjet

[fgtoul]

amis lecteurs
le problème de Seraphinou venait de la restriction IP mise en place sur l’ApiKey de la V5.
Je tiens à attirer votre attention sur le fait que malgré la ressemblance de la valeur par défaut (255.255.255.255) avec un masque de sous-réseau, ça n’en est pas un !
Ne renseignez pas 255.255.255.0 pour limiter l’APIKEY au réseau local, mais renseignez l’adresse IP du client API qui utilisera la clé si vous souhaitez en restreindre l’accès.

[fgtoul]

Bonjour à tous,
voici le script à mettre en place dans un widget HTML afin d’utiliser l’API Widget qui apportera plus de robustesse au code et sera mieux toléré par le serveur de l’IPX800 V5.

<script>
    var analogId1=262222;
    var gaugeId1="gauge1";
    var analogId2=262223;
    var gaugeId2="gauge2";    
    

    
    
  window.GCE_Refresh.push(function(data) { //IMPORTANT: biding refresh function to the WebSocket
    // received all IO and ANA that change in the V5 as an object
    // ex for IO: { _id: 65536, on: true }
    // ex for ANA: { _id: 196608, value: 1 }
    switch (data['_id'])
    {
        case analogId1:
            updateGauge(gaugeId1,data.value); 
            break;
    
        case analogId2:
            updateGauge(gaugeId2,data.value); 
            break;
    }
  })
  
  function init() {
      GCE_API.getANA(analogId1).then((ret) => { // ask for the actual value
      updateGauge(gaugeId1,ret.value) ;
             })
    GCE_API.getANA(analogId2).then((ret) => { // ask for the actual value
      updateGauge(gaugeId2,ret.value) ;
             })
  }
  
  function updateGauge(id,d){
        document.gauges.get(id).value=d
        document.gauges.get(id).update({ value: d });
  }


  init();
</script>

Vous pourrez utiliser un seul script pour mettre toutes les jauges à jour sur le dashboard en cours d’utilisation. Le code ci-dessus est un exemple avec 2 jauges.

Au début du script, créez les variables gaugeIdx et analogIdx pour chaque jauge.
gaugeId : Renseignez la valeur de l’id du Canevas correspondant.
analogId : renseignez l’id de l’analogique rattachée

Dans la fonction Init(), ajoutez le code de chaque jauge.
Dans la fonction liée websocket, ajoutez le code correspondant à chaque valeur analogique.

Bonne journée