🧭 V5 : Affichage de la direction des vents

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

image

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

Have FUN

4 « J'aime »

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

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 :wink:

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

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.

ok @fgtoul
je vais ouvrir un autre post
merci

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

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

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

amis lecteurs :wink:
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.

4 « J'aime »