Voici un lâexemple de mon Dashboard avec widgets revisitĂ©s, suivant les tutos de @fgtoul
, pilotage avec ecodevice et entree analogique
javascript correspondant pour les 4 linéaires
<canvas style="margin-top:15px;" id=daniel10 data-type="linear-gauge"
data-width="290"
data-height="100"
data-min-value="0"
data-max-value="15"
data-border-radius="0"
data-borders="0"
data-bar-begin-circle="false"
data-title="Intensité PH 1"
data-units="Amperes"
data-tick-side="left"
data-bar-stroke-width="3"
data-color-bar-stroke="transparent"
data-highlights='[
{ "from": 0, "to": 5, "color": "green" },
{ "from":5, "to": 10, "color": "rgba(255,255,0,1)" },
{ "from": 10, "to": 15, "color": "rgba(255,30,0,1)" }
]'
data-major-ticks="0,5,10,15"
data-color-minor-ticks="blue"
data-minor-ticks="5"
data-color-plate="transparent"
data-color-numbers="#ccc"
data-color-major-ticks="green"
data-color-bar-stroke="#444"
data-number-side="left"
data-needle-side="right"
data-animate-on-init=""
data-animated-value="true"
data-stroke-ticks="true"
data-color-title="#fff"
data-color-units="#fff"
data-color-numbers="#eee"
data-color-needle-start="rgba(240, 128, 128, 1)"
data-color-needle-end=""
data-value-box="true"
data-color-value-text="#fff"
data-color-value-box-background="red"
data-animation-rule="bounce"
data-animation-duration="500"
data-font-value="Led"
data-font-numbers-size="40"
data-font-title-size="40"
data-font-units-size="80"
data-font-numbers="Led"
data-font-units="mistral"
data-color-bar-progress = "rgba(245,125,125,1)" //bar de progression debut
data-color-needle="yellow" //aiguille
// data-color-bar-end="transparent"
data-color-bar-progress-end="red" //bar de progression fin
data-bar-progress="true"
></canvas>;
<script async src="//cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.5/all/gauge.min.js""/>
et celui pour widget les circulaires
<center>
<canvas id=daniel14 style="margin-top:15px;" data-type="radial-gauge"
data-width="240"
data-height="240"
data-units="°C"
data-title="false"
data-value="true"
data-min-value="0"
data-max-value="40"
data-major-ticks="0,10,20,30,40""
data-minor-ticks="2"
data-stroke-ticks="false"
data-highlights='[
{ "from": 0, "to": 10, "color": "rgba(0,255,0,.15)" },
{ "from":10, "to": 20, "color": "rgba(255,30,0,.25)" },
{ "from": 20, "to": 30, "color": "rgba(255,255,0,1) " },
{ "from": 30, "to": 40, "color": "rgba(255,0,225,.25)" }
]'
data-color-plate="#222"
data-color-major-ticks="#f5f5f5"
data-color-minor-ticks="#ddd"
data-color-title="#fff"
data-color-units="#ccc"
data-color-numbers="#eee"
data-color-needle-start="rgba(240, 128, 128, 1)"
data-color-needle-end="rgba(255, 160, 122, .9)"
data-value-box="true"
data-font-value="Led"
data-font-numbers="Led"
data-animation="false"
data-value-int="2"
data-value-dec="1"
data-font-numbers-size="30"
data-font-units-size="30"
data-font-value-size="35"
></canvas>
</center>
Script source de données
a=datasources["linky"]["response"]["T1_IINST1"];
b=datasources["linky"]["response"]["T1_IINST2"];
c=datasources["linky"]["response"]["T1_IINST3"];
d=((datasources["STATUS"]["response"]["analog0"] * 0.000050354) - 0.25) / 0.028;
e=((datasources["STATUS"]["response"]["analog1"] * 0.000050354) - 0.25) / 0.028;
f=datasources["linky"]["response"]["T1_PAPP"] /1000;
var gauge1 = document.gauges.get('daniel10');
gauge1.value=a;
var gauge2 = document.gauges.get('daniel11');
gauge2.value=b;
var gauge3 = document.gauges.get('daniel12');
gauge3.value=c;
var gauge4 = document.gauges.get('daniel13');
gauge4.value=d;
var gauge5 = document.gauges.get('daniel14');
gauge5.value=e;
var gauge6 = document.gauges.get('daniel15');
gauge6.value=f;
return `
<div>Javascript pour mise Ă jour des jauges</div>
`;
Cordialement, Daniel
