🌡 Collection de Widgets analogiques (CANVAS-GAUGES)

Cartes Ethernet IPX800 Tutoriels
,
33

Bonjour,

Bien voila ça fonctionne.

Je vous joint le code complet adapté pour une utilisation sur la V5

Bonne journée

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

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



<script type="text/javascript">
 let IPX_apiKey="votre APIKEY  systeme APIKEY"; //renseignez votre apikey IPX 

 var gauge7;
 
 function initb() {
       getStateb((ipxb) => {
       gauge7 = document.gauges.get("fgtoul7"); 
       gauge7.value=(ipxb.anaRealValue) ;
        
       });
   }   
function getStateb(cb) {
        fetch( "/api/object/function/1048576?ApiKey=" + IPX_apiKey, {method: "GET"}).then((ret) => { 
            ret.json().then((ipxb) => {
            cb(ipxb);
          });
        });
        }
      /* Auto refresh (optional) */
function autoRefreshb() {
        setInterval(() => {
          initb();
        }, 6000); // 6 sec
        }
        
initb();
autoRefreshb();
</script>
1 « J'aime »