<!-- LMQT (forum Jeedom) - Jauge HighChart type compteur, ronde et entière. Version dédiée Jeedom v4.
	VOIR CETTE JAUGE : https://www.highcharts.com/demo/gauge-speedometer
	Plus d'infos sur les paramètres ici : https://api.highcharts.com/highcharts/plotOptions.gauge

	Valeurs à passer en paramètres de l'équipements (onglet affichage) (sans les guillemets) :
		"decimales"			= "0" (nombre de décimales, de 0 à x)
		"intervalle"		= l'intervalle entre deux graduations principales, sinon c'est en automatique
		"min_max"			= "minimum,maximum" (début et fin des graduations du compteur)
								Electricité: "0,6000" (exemple kW ou VA)
								Hygromètre : "0,100" 
								Thermomètre: "-10,50" si extérieur, ou "0,40" pour intérieur (exemple pour avoir 20° au sommet)
		"gradient_couleurs" = "#1E90FF,#00BFFF,#00FF00,#FFFF00,#FF8C00,#FF0000" (dodgerblue,deepskyblue,lime,yellow,darkorange,red)
		"gradient_plages"	= "980,1000,1020,1040,1040" (exemple pour baromètre. Nota : plage n°6 = maxi du graphe, donc pas à préciser !)
		"diametre"			= "200" (125 est le min conseillé, ou alors rendre invisible la couleur de l'échelle. En-dessous de 200, on perd le cadre avec la valeur.)
		"angle_deb_fin"		= "-140,140" (angle de début et de fin du graphique)
		"echelle_couleur"	= "#000000" (couleur du texte de l'échelle)? Nota : en v4, #00AAFF permet de s'afficher sur le thème clair comme le foncé.
		"echelle_position"	= "int" ou "ext" (affichage à l'intérieur ou l'extérieur de la jauge)
		"echelle_type"		= "numerique" ou "barometrique" (soit des graduations classiques, soit du texte "beau temps", "tempête", etc.)
		"affichage_unite"	= "1" (pour oui), ou "0" (pour non) (affichage de l'unité à l'intérieur du graphe)

  	NOTA : si on ne veut que 5 zones au lieu de 6, on répète tout simplement la 5ème dans "gradient_plages" et "gradient_couleurs" (exemple : baromètre).

	Informations barométriques :
		- Echelle = 950 à 1070 mB
		- Moyenne = 1013mB
		- Cadran : 
			 950- 980 = Tempête
			 980-1000 = Pluie ou vent
			1000-1020 = Variable
			1020-1040 = Beau temps
			1040-1070 = Sec

    Voici un tableau avec les principaux paramètres à ajouter dans chaque type d'équipement de Jeedom pour que le widget l'affiche correctement.
    Par exemple pour un thermomètre, ajoutez chaque ligne de la colonne "PARAMÈTRES" et assignez-lui la valeur de la colonne "Température".
    Nota : le paramètres "gradient_couleur" figure dans un second tableau en-dessous à cause de sa taille, c'est plus clair à l'affichage.

    PARAMÈTRES           Température              Hygrométrie              Baromètre                Électricité VA           Électricité A            
    --------------------------------------------------------------------------------------------------------------------------------------------------
    decimales            0                        0                        0                        0                        0
    intervalle           10                       10                       10                       1000                     5
    min_max              -10,50                   0,100                    950,1070                 0,10000                  0,45
    gradient_plages      0,10,20,30,40            20,40,60,80,90           980,1000,1020,1040,1040  1666,3333,5000,6666,8333 7.5,15,22.5,30,37.5
    angle_deb_fin                                                                                   -140,140                 -140,140
    echelle_couleur      #00AAFF                  #00AAFF                  #00AAFF                  #00AAFF                  #00AAFF
    echelle_position                                                       ext                      ext                      ext
    echelle_type         numerique                numerique                barometrique             numerique                numerique
    affichage_unite      1                        1                        1                        1                        1

    gradient_couleurs :
        - température = #1E90FF,#00BFFF,#00FF00,#FFFF00,#FF8C00,#FF0000
        - hygrométrie = #E3F2FD,#BBDEFB,#90CAF9,#64B5F6,#2196F3,#1E88E5
        - baromètre   = #1E90FF,#00BFFF,#00FF00,#FFFF00,#FF8C00,#FF8C00
        - électricité = #1E90FF,#00BFFF,#00FF00,#FFFF00,#FF8C00,#FF0000
        - 

 	Reste à faire :
		- Ajouter option "pointeur_type" sur "fleche" et "curseur"

-->

<div class="container-fluid cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
    <span class='cmdName #hide_name#' style="font-weight: bold;font-size : 11px">#name_display#</span>
  	<div id="JaugeHighcharts#id#"></div>	<!-- 'top: -5px' = On remonte un peu la jauge dans le cadre -->
  	<div style="font-size: 9px;top:-20px" class="cmdStats #hide_history# col-xs-12 center-block">
    	<span title="Min" class="tooltips">#minHistoryValue#</span> | <span title="Moyenne" class="tooltips" >#averageHistoryValue#</span> | <span title="Max" class="tooltips">#maxHistoryValue#</span> <i class="#tendance#"></i>
	</div>

<script>

testdecimales = ("#decimales#" == '#'+'decimales#');
	if (testdecimales == true) {	// pas de paramètres passés, on prends des valeurs par défaut
		var dec#id# = parseFloat(1);
	} else {	// On a des paramètres en option, on les prends
		var dec#id# = parseFloat('#decimales#');
    }

min_max = ("#min_max#" == '#'+'min_max#');
	if (min_max == true) {	// pas de paramètres passés, on prends des valeurs par défaut
		var v_GraphMin = #minValue#;
		var v_GraphMax = #maxValue#;
	} else { 	// On a des paramètres en option, on les prends
  		var min_max = '#min_max#' ;
        var min_max_liste = min_max.split(",");
		var v_GraphMin = parseFloat(min_max_liste[0]);
		var v_GraphMax = parseFloat(min_max_liste[1]);
	}

testdiametre = ("#diametre#" == '#'+'diametre#');
	if (testdiametre == true) {	// pas de paramètres passés, on prends des valeurs par défaut
		var v_Diametre = 125;
	} else {	// On a des paramètres en option, on les prends
		var v_Diametre = parseFloat('#diametre#');
    }
  	var v_Cadre = v_Diametre + 5;

testangle = ("#angle_deb_fin#" == '#'+'angle_deb_fin#');
	if (testangle == true) {	// pas de paramètres passés, on prends des valeurs par défaut
		var v_AngleDebut = -140;
		var v_AngleFin = 140;
	} else { 	// On a des paramètres en option, on les prends
  		var v_temp = '#angle_deb_fin#' ;
        var v_temp_liste = v_temp.split(",");
		var v_AngleDebut = parseFloat(v_temp_liste[0]);
		var v_AngleFin = parseFloat(v_temp_liste[1]);
	}

testplages = ("#gradient_plages#" == '#'+'gradient_plages#');
	if (testplages == true) {	// pas de paramètres passés, on prends des valeurs par défaut
		var v_GradientPlageA = (v_GraphMax-v_GraphMin)/6;
		var v_GradientPlageB = (v_GraphMax-v_GraphMin)/6*2;
		var v_GradientPlageC = (v_GraphMax-v_GraphMin)/6*3;
		var v_GradientPlageD = (v_GraphMax-v_GraphMin)/6*4;
      	var v_GradientPlageE = (v_GraphMax-v_GraphMin)/6*5;
    } else { 	// On a des paramètres en option, on les prends
  		var v_temp = '#gradient_plages#' ;
        var v_temp_liste = v_temp.split(",");
		var v_GradientPlageA = parseFloat(v_temp_liste[0]);
		var v_GradientPlageB = parseFloat(v_temp_liste[1]);
		var v_GradientPlageC = parseFloat(v_temp_liste[2]);
		var v_GradientPlageD = parseFloat(v_temp_liste[3]);
      	var v_GradientPlageE = parseFloat(v_temp_liste[4]);
	}

testgradientcol = ("#gradient_couleurs#" == '#'+'gradient_couleurs#');
	if (testgradientcol == true) {	// pas de paramètres passés, on prends des valeurs par défaut
		var v_GradientCouleurA = '#1E90FF';	// dodgerblue
      	var v_GradientCouleurB = '#00BFFF';	// deepskyblue
		var v_GradientCouleurC = '#00FF00';	// lime
		var v_GradientCouleurD = '#FFFF00';	// yellow
		var v_GradientCouleurE = '#FF8C00';	// darkorange
      	var v_GradientCouleurF = '#FF0000';	// red
    } else { 	// On a des paramètres en option, on les prends
  		var v_temp = '#gradient_couleurs#' ;
        var v_temp_liste = v_temp.split(",");
		var v_GradientCouleurA = v_temp_liste[0];
		var v_GradientCouleurB = v_temp_liste[1];
		var v_GradientCouleurC = v_temp_liste[2];
		var v_GradientCouleurD = v_temp_liste[3];
		var v_GradientCouleurE = v_temp_liste[4];
      	var v_GradientCouleurF = v_temp_liste[5];
	}

testechellecol = ("#echelle_couleur#" == '#'+'echelle_couleur#');
	if (testechellecol == true) {	// pas de paramètres passés, on prends des valeurs par défaut
		var v_EchelleCouleur = "#888888 !important";
	} else {	// On a des paramètres en option, on les prends
		var v_EchelleCouleur = '#echelle_couleur#' + " !important";
    }

testflechecol = ("#fleche_couleur#" == '#'+'fleche_couleur#');
	if (testflechecol == true) {	// pas de paramètres passés, on prends des valeurs par défaut
		var v_FlecheCouleur = '#00FF00';
	} else {	// On a des paramètres en option, on les prends
		var v_FlecheCouleur = '#fleche_couleur#';	//+ " !important";	// Ne pas ajouter le !important car cela semble bloquer la coloration via "root.style.setProperty"
    }

testaffichageunite = ("#affichage_unite#" == '#'+'affichage_unite#');
	if (testaffichageunite == true) {	// pas de paramètres passés, on prends des valeurs par défaut
		var v_AffichageUnite = 1;	// rien de précisé, on affiche les unités
	} else {	// On a des paramètres en option, on les prends
		var v_AffichageUnite = parseFloat('#affichage_unite#');
    }
    if (v_AffichageUnite == 1) {	// Gestion de l'affichage d'un titre DANS le graphe
        var v_TitreUnite = '#unite#';
    } else {
        var v_TitreUnite = null;
    }

testechellepos = ("#echelle_position#" == '#'+'echelle_position#');
	if (testechellepos == true) {	// pas de paramètres passés, on prends des valeurs par défaut
		var v_EchellePosition = -20;	// -20 = intérieur
	} else {	// On a des paramètres en option, on les prends
		if ('#echelle_position#' == 'int') {
      		var v_EchellePosition = -20;	// intérieur
        } else {
            var v_EchellePosition = 7;		// extérieur
        }
    }

testechelletype = ("#echelle_type#" == '#'+'echelle_type#');
	if (testechelletype == true) {	// pas de paramètres passés, on prends des valeurs par défaut
      var v_EchelleBarometrique = false;	// On n'affiche pas l'échelle barométrique
      var v_EchelleNumerique = true;		// On affiche l'échelle barométrique
	} else {	// On a des paramètres en option, on les prends
		if ('#echelle_type#' == 'barometrique') {
          var v_EchelleBarometrique = true;
          var v_EchelleNumerique = false;
        } else { // Implicitement type = "numerique" :
          var v_EchelleBarometrique = false;
          var v_EchelleNumerique = true;
        }
    }


testintervalle = ("#intervalle#" == '#'+'intervalle#');
	if (testintervalle == true) {	// pas de paramètres passés, on prends des valeurs par défaut
		var tick_Interval#id# = Math.abs(Math.round(((#minValue# - #maxValue# )+1)/3)) ;
	} else { 	// On a des paramètres en option, on les prends
  		var tick_Interval#id# = '#intervalle#';
	}

// Réglages du widget :
$('#JaugeHighcharts#id#').css('width',v_Cadre);
$('#JaugeHighcharts#id#').css('height',v_Cadre);

// DEBUT GRAPHIQUE HIGHCHARTS
/*
**********************************************
DIFFERENTES METHODES DE CREATION DE LA JAUGE :
OK en v3, mais ne fonctionne pas idéalement en v4 car impossible de modifier les couleurs de fond (les 'pane') :
  $('.cmd[data-cmd_uid=#uid#] .gauge').empty().highcharts({

OK en v4 :
  - soit directement appeler la fonction "new Highcharts.Chart()",
  - soit la lancer via une variable pour appliquer facilement d'éventuelles modif par la suite :
      var v_Jauge#id#;
	  v_Jauge#id# = new Highcharts.Chart({
**********************************************
*/

var v_Jauge#id#;
v_Jauge#id# = new Highcharts.Chart({
    credits: {enabled: false},		// Affichage ou non de la marque "HighCharts"
	exporting : {enabled: false},	// Affichage ou non du bouton d'exportation
    tooltip: {enabled: true},		// Affichage ou non du tooltip
	title: {text: null},			// Titre positionné au-dessus du graphe et pas à l'intérieur
    chart: {
		events: {
			click: function (event) {
				if (!$.mobile && '#history#' == 'history cursor') {
					$('#md_modal2').dialog({title: "Historique"});
					$("#md_modal2").load('index.php?v=d&modal=cmd.history&id=#id#').dialog('open');
				}
			}
		},
        renderTo: 'JaugeHighcharts#id#',
        type: 'gauge',
		width: v_Diametre,
      	height: v_Diametre,
      	backgroundColor: null,
      	//backgroundColor: 'transparent',
      	//size: '1000%',
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        //borderColor: '#FE8E13',	// Dessine un cadre autour de la jauge
		//borderWidth: 1,			// Épaisseur du cadre
      	plotBorderWidth: 0,
        plotShadow: false,
        //spacingTop: 0,
        //spacingLeft: 0,
        //spacingRight: 0,
        //spacingBottom: 0
    },
    pane: {
        startAngle: v_AngleDebut,
        endAngle: v_AngleFin,
        // size: '100%',	// Taille de la jauge dans le cadre maximal prévu
        // innerSize: '50%',	// Taille du vide au milieu de la jauge. Inutile pour une circulaire, valable pour une en arc de cercle.
        background: [{		// On peut dessiner plusieurs cercles, ils seront supperposés dans l'ordre de création, donc le dernier au-dessus.
            backgroundColor: {	// Cerclage extérieur
                linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
                stops: [[0, '#FFFFFF'],[1, '#BBBBBB']]
            },
            borderWidth: 1,
          	borderColor: '#444444',
            innerRadius: '100%',
          	outerRadius: '106%',
          	shape: 'circle'	// Si 'circle', alors le cercle sera complet. Si 'arc', alors il ira seulement du min au max de la jauge.
        }, {
          	backgroundColor: {	// Cerclage inférieur, pour couvrir le fond du dégradé (les "plotBands")
                linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
                stops: [[0, '#999999'],[1, '#DDDDDD']]
            },
          	borderWidth: 0,
          	borderColor: '#444444',
          	innerRadius: '0%',
            outerRadius: '100%',
          	shape: 'circle'
        }, {
          	backgroundColor: {	// Cerclage intérieur, mais dessine un grand V à cause de "shape: 'arc'".
                linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
                stops: [[0, '#999999'],[1, '#DDDDDD']]
            },
            borderWidth: 1,
          	borderColor: '#000000',
            innerRadius: '0%',
            outerRadius: '89%',
          	shape: 'arc'
        }, {
          	backgroundColor: {	// Cerclage intérieur supérieur, venant couvrir le "V" du précédent.
                linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
                stops: [[0, '#999999'],[1, '#DDDDDD']]
            },
            borderWidth: 0,
          	borderColor: '#000000',
            innerRadius: '0%',
            outerRadius: '88%',
          	shape: 'circle'
        }]
    },
    plotOptions: {
      series: {
        dataLabels: {	// Le petit cadre inférieur avec la valeur actuelle
        	enabled: true,
          	crop: false,
          	overflow: 'allow',
          	allowOverlap: true,
          	rotation: 0,
          	shadow: false,
			borderRadius: 5,	// Si 'square' n'est pas défini pour 'shape', alors arrondi des coins.
			borderWidth: 1,
          	backgroundColor: 'white',
          	padding: 3,	// When either the borderWidth or the backgroundColor is set, this is the padding within the box.
          	//shape: 'square', // Formes dispo = arc, callout, circle, diamond, square, triangle, triangle-down. Un carré fixe par défaut.
          	x: 0,
          	y: 8,
            style:{
              color: 'contrast',	// par défaut : 'contrast',
              fontSize:'12px',
              fontWeight:'bold',
              textOutline: '1px contrast'
			}
      	}
      },
      gauge: {
        dial:{		// L'aiguille (qui pointe vers la donnée)
          backgroundColor: v_FlecheCouleur,	//'#ff0000',	// Marche en v4, contrairement à la dial dans 'series.data.dial'. Sinon à mettre dans une balise STYLE.
          baseLength:'75%',	// Pourcentage de la partie avant la pointe
          baseWidth:4,		// Épaisseur de la partie avant la pointe
          borderColor:'#555555',
          borderWidth:1,
          radius:'80%',		// Longueur totale de l'aiguille par rapport au diamètre de la jauge
          rearLength:'35%',	// Partie ajoutée de l'autre côté du pivot
          topWidth:1,		// Épaisseur de la pointe (bout pointu ou bout carré)
        },
        pivot: { 	// Le pivot (axe de l'aiguille)
          backgroundColor: 'transparent',
          borderColor:'#000000',
          borderWidth: 2,
          radius: 6,
        }
      }
    },
    // the value axis
	yAxis: [
		{	// Graduation via échelle numérique classique :
			visible: v_EchelleNumerique,	// S'affiche ou pas, suivant le paramètre
			min: v_GraphMin,
			max: v_GraphMax,
			minorTickInterval: 'auto',
			minorTickWidth: 1,
			minorTickLength: 6,
			minorTickPosition: 'inside',
			minorTickColor: '#888888 !important',		// #666 = valeur HighCharts // Ne marche pas en v4 : à mettre dans une balise STYLE
			tickPixelInterval: 60,	// 60 = valeur HighCharts
			tickWidth: 1,
			tickPosition: 'inside',
			tickLength: 10,
			tickColor: '#000000 !important',	// '#666'= Valeur HighCharts // Ne marche pas en v4 : à mettre dans une balise STYLE
			// Étiquettes d'échelle :
			labels: {
				style: {color: v_EchelleCouleur,fontSize:'7px'},
				distance: v_EchellePosition,	//7 = extérieur, -20 = intérieur
				// step: 2,
				rotation: 'auto'
			},
			//lineWidth: 4,
			title: {	// Affichage d'un titre DANS le graphe
				text: v_TitreUnite,	// On affiche ou on masque l'unité via la variable définie plus haut
				y: 5				// On baisse un peu l'affichage, sinon il est colé au dégradé.
			},
			tickInterval: [tick_Interval#id#], //3
			// Dégradé de couleur sur la graduation
            plotBands: [
              {from: v_GraphMin,      to: v_GradientPlageA,color: v_GradientCouleurA,id: 'GradColA'},
              {from: v_GradientPlageA,to: v_GradientPlageB,color: v_GradientCouleurB,id: 'GradColB'},
              {from: v_GradientPlageB,to: v_GradientPlageC,color: v_GradientCouleurC,id: 'GradColC'},
              {from: v_GradientPlageC,to: v_GradientPlageD,color: v_GradientCouleurD,id: 'GradColD'},
              {from: v_GradientPlageD,to: v_GradientPlageE,color: v_GradientCouleurE,id: 'GradColE'},
              {from: v_GradientPlageE,to: v_GraphMax,      color: v_GradientCouleurF,id: 'GradColF'}
            ]
		},
		{	// Graduation via échelle barométrique, sans chiffres :
			visible: v_EchelleBarometrique,	// S'affiche ou pas, suivant le paramètre
			min: v_GraphMin,
			max: v_GraphMax,
			minorTickInterval: 'auto',
			minorTickWidth: 1,
			minorTickLength: 6,
			minorTickPosition: 'inside',
			minorTickColor: '#888888 !important',		// #666 = valeur HighCharts // Ne marche pas en v4 : à mettre dans une balise STYLE
			tickPixelInterval: 60,	// 60 = valeur HighCharts
			tickWidth: 1,
			tickPosition: 'inside',
			tickLength: 10,
			tickColor: '#000000 !important',	// '#666'= Valeur HighCharts // Ne marche pas en v4 : à mettre dans une balise STYLE
			// Etiquettes d'échelle :
			labels: {
			  style: {color: v_EchelleCouleur,fontSize:'7px',fontWeight:100},
			  distance: v_EchellePosition,	//7 = extérieur, -20 = intérieur
			  rotation: 'auto',
			  formatter: function () {	// Ajoute une échelle personnalisé pour le baromètre
				if (this.value == 1010) {return 'Variable';}
				else if (this.value == 1030) {return 'Beau';}
				else if (this.value == 990) {return 'Pluie';}
				else if (this.value == 960) {return 'Tempête';}
				else if (this.value == 1060) {return 'Sec';}
			  }
			},
			//lineWidth: 4,
			title: {	// Affichage d'un titre DANS le graphe
				text: v_TitreUnite,	// On affiche ou on masque l'unité via la variable définie plus haut
				y: 5				// On baisse un peu l'affichage, sinon il est colé au dégradé.
			},
			tickInterval: [tick_Interval#id#], //3
			// Dégradé de couleur sur la graduation
            plotBands: [
              {from: v_GraphMin,      to: v_GradientPlageA,color: v_GradientCouleurA,id: 'GradColA'},
              {from: v_GradientPlageA,to: v_GradientPlageB,color: v_GradientCouleurB,id: 'GradColB'},
              {from: v_GradientPlageB,to: v_GradientPlageC,color: v_GradientCouleurC,id: 'GradColC'},
              {from: v_GradientPlageC,to: v_GradientPlageD,color: v_GradientCouleurD,id: 'GradColD'},
              {from: v_GradientPlageD,to: v_GradientPlageE,color: v_GradientCouleurE,id: 'GradColE'},
              {from: v_GradientPlageE,to: v_GraphMax,      color: v_GradientCouleurF,id: 'GradColF'}
            ]
		}
	],

    series: [
		// ##### DEBUT - AFFICHAGE DE LA VALEUR AVEC UNE AIGUILLE
		{
		  name: '#name#',
          //data: [Math.round(parseFloat('#state#') * 10) / 10],
          data: [parseFloat(parseFloat('#state#').toFixed(dec#id#))],
          tooltip: {valueSuffix: '#unite#'},
          wrap: false	// Soit l'aiguille continue de tourner au-delà/en-deça des min/max, soit elle se bloque dessus.
    	},
      	// ##### FIN - AFFICHAGE DE LA VALEUR AVEC UNE AIGUILLE
      	/*
        // ##### DEBUT - AJOUT D'UN CURSEUR A LA PLACE DE L'AIGUILLE
        // NOTA : le pivot ne peut pas être définit ici, mais uniquement de manière globale dans "plotOptions/gauge"
  		{
			name: '#name#',
            data: [
            	{
                  id: 'curseur',
                  y: #state#,
                  dial: {	// Le curseur (qui vient de la valeur et pointe vers le centre)
                    radius: '80%',
                    baseWidth: 1,
                    topWidth: 10,
                    baseLength: '50%',	// Augmenter le chiffre réduit la taille de la pointe (qui est inversée)
                    rearLength: '-50%',	// Augmenter le chiffre augmente la taille du culot (qui est en fait la partie arrière inversée)
                    //backgroundColor: v_FlecheCouleur, //Ne marche pas en v4, on force via 'root.style.setProperty' et des instructions css dans balise style
                    borderColor: '#555555 !important'
                  }
				}
            ],
            tooltip: { valueSuffix: '#unite#'},
            wrap: false	// Soit l'aiguille continue de tourner au-delà/en-deça des min/max, soit elle se bloque dessus.
          }
		  // ##### FIN - AJOUT D'UN CURSEUR A LA PLACE DE L'AIGUILLE	*/
  	]
});
// FIN GRAPHIQUE HIGHCHARTS

// actualisation
jeedom.cmd.update['#id#'] = function(_options){
  jeedom.cmd.displayDuration(_options.valueDate,  $('.cmd[data-cmd_id=#id#] .timeCmd#uid#'));

  //$('.cmd[data-cmd_uid=#uid#] .gauge').highcharts().series[0].points[0].update(_options.display_value);
  var v_Valeur#id# = parseFloat(parseFloat(_options.display_value).toFixed('dec#id#'));	// On arrondi la valeur suivant le paramètre du virtuel
  v_Jauge#id#.series[0].data[0].update(v_Valeur#id#);
}
// jeedom.cmd.displayDuration('#valueDate#', $('.timeCmd#uid#'));
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#'});


// ##### Procédure 1 de contournement du forçage de couleur fait par Jeedom en v4.0x - DEBUT #####
/*	// ##### METHODE 1 - DEBUT #####
    var v_root1 = document.querySelector(':root') ;
    v_root1.style.setProperty('--vcss-FlecheCouleur#id#', v_FlecheCouleur);
*/	// ##### METHODE 1 - FIN #####

	// ##### METHODE 2 - DEBUT #####
      var v_root2 = document.documentElement;
      v_root2.style.setProperty('--vcss-FlecheCouleur#id#', v_FlecheCouleur);
	// ##### METHODE 2 - FIN #####
// ##### Procédure 1 de contournement du forçage de couleur fait par Jeedom en v4.0x - FIN #####

</script>
</div>

<style>
/* ##### Procédure 2 de contournement du forçage de couleur fait par Jeedom en v4.0x - DEBUT #####	*/
  /* Modifications forcées pour contrer la non-prise en compte de certaines couleurs avec les v4.0x */
  :root {
    --vcss-FlecheCouleur#id#: #FF0000;	/* On définit sur rouge par défaut et pour initialiser la variable CSS */
  }
  /* On va modifier directement les propriétés voulues, soit en dur, soit via une variable CSS.
     Instructions sur ce qu'on peut modifier ici : https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/css/gauge/ */
/*  #JaugeHighcharts#id# .highcharts-dial { stroke: #555555 !important;}			/* Permet de colorer le contour de la flèche ou du curseur */
/*  #JaugeHighcharts#id# .highcharts-dial { fill: var(--vcss-FlecheCouleur#id#);}		/* Permet de colorer le centre de la flèche ou du curseur. MARCHE BIEN. */
/*  #JaugeHighcharts#id# .highcharts-color-0 { fill: var(--vcss-FlecheCouleur#id#);}	/* Permet de colorer le centre de la flèche ou du curseur. MARCHOUILLE */
  #JaugeHighcharts#id# .highcharts-tick { stroke: #000000 !important;}			/* Permet de colorer les graduations principales */
  #JaugeHighcharts#id# .highcharts-minor-tick { stroke: #888888 !important;}	/* Permet de colorer les graduations secondaires */
  #JaugeHighcharts#id# .highcharts-grid-line { stroke: none !important;}		/* Permet de cacher les lignes d'échelles principales partant du centre */
  #JaugeHighcharts#id# .highcharts-minor-grid-line { stroke: none !important;}	/* Permet de cacher les lignes d'échelles secondaires partant du centre */
/* ##### Procédure 2 de contournement du forçage de couleur fait par Jeedom en v4.0x - FIN #####	*/
</style>