Widget V3 à adapter pour rafraîchissement automatique

[squateur44690]

Bonjour,
j’essaye d’avoir un widget cmd.info.numeric pour afficher une valeur sur un fond coloré qui change de couleur en fonction de la valeur, le tout avec un effet « ombre ». Je me suis inspiré d’un ancien Widget en V3 dont j’adore le design. Je crois que c’est WinHex / @ajja17orange qui avait bossé dessus à l’époque ([Help] Création widget température - Forum Communauté Jeedom)

Le widget s’affiche correctement sur mes designs mais il ne se rafraîchit pas. J’imagine qu’il y a des modifications à faire pour le rendre compatible « V4 ». Cela fait plusieurs jours que j’essaye mais comme je n’ai aucune compétence je n’y arrive pas et suis en train de m’arracher les cheveux . Pourriez-vous me donner un coup de main svp ? Voici le code. Merci d’avance pour votre aide.

<div onClick="#lien#;" style="width:390px;min-height:65px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# container-fluid tooltips cmd-widget FD#id# temp" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="Valeur du #valueDate#, collectée le #collectDate#">
    <center>
        <span class='cmdName' style="font-weight: bold;font-size : 6px;#hideCmdName#">#name_display#</span>
        <div class='displayDF#id#'></div>
        <div class='boxFD#id#'>
        	<div class="ValueFD#id# #Ombre#">
        		<span class="intFD#id#" id="intFDValue#id#"></span>
        		<span class="decFD#id#" id="decFDValue#id#"></span>
      		</div>
        	<div class='UniteFD#id#'>#unite#</div>
        </div>
        <div style="#displayHistory# font-size: 14px;" class="col-xs-16 center-block">
        	<span title='Min' class='tooltips'>#minHistoryValue# </span> | <span title='Max' class='tooltips'> #maxHistoryValue#</span> <i class="#tendance#"></i>
        	<span class="timeCmd#uid#" style="padding : 3px;border-radius: 4px;"></span>
		</div>
    </center>

<style>
	@font-face {
  		font-family: 'Audiowide';
  		font-style: normal;
  		font-weight: 400;
  		src: local('Audiowide Regular'), local('Audiowide-Regular'), url(https://fonts.gstatic.com/s/audiowide/v7/l7gdbjpo0cum0ckerWCdmA_OIxo.woff2) format('woff2');
  		unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
	}
	@font-face {
  		font-family: 'Audiowide';
  		font-style: normal;
  		font-weight: 400;
  		src: local('Audiowide Regular'), local('Audiowide-Regular'), url(https://fonts.gstatic.com/s/audiowide/v7/l7gdbjpo0cum0ckerWCdlg_O.woff2) format('woff2');
  		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}
  
	div.displayFD#id# {
	    position: relative;
	}

	.boxFD#id# {
	    height: 60px;
	    width: 80px;
		border-radius : 10px;
	  	//top: 5px;
  		//left: 5px;
  		//position: absolute;
		text-align: center;
	}
  
	.ValueFD#id# {
	    position: relative;
	    text-align: center;
	    top: 5px;
	    z-index:1;
	    border-radius : 10px;
	  	display: block;
	    overflow: hidden;
	  	width: 80px;
		height : 55px;
	    border-radius : 10px;
	}
  
	.intFD#id# {  
	  	font-family: "Audiowide", helvetica, arial, sans-serif;
	  	font-weight: bold;
	    color: #fff;
	    font-size: 24px;
	}
  
	.decFD#id# {
	    font-family: "Audiowide", helvetica, arial, sans-serif;
	    font-weight: bold;
	    color: #fff;
	    font-size: 18px;
	}
  
	.UniteFD#id# {
	    font-family: "Helvetica Neue", helvetica, arial, sans-serif;
	    font-weight: bold;
	    color: #fff;
	    height: 30px;
	    width: 80px;
	    font-size: 15px;
	    top: -25px;
	    text-align: center;
	    display: block;
	    overflow: hidden;
	    position:relative;
	    z-index:2;
	    border-radius : 10px;
	}
</style>

<script>
	jeedom.cmd.displayDuration('#valueDate#', $('.timeCmd#uid#'));
  
    jeedom.cmd.update['#id#'] = function(_options){
      	// Récupération des valeurs des paramètres
		var chxcolor = ('#color#' !='#'+'color#') ? "#color#":"d715ee";
// var chxcolor = '#state#' ;
// var chxcolor = "#color#":"d715ee';
//#color#":"ee1549" 
// var chxcolor = "#color#":"d715ee";
// test couleur ee1549   "#color#":"0099ff"
        var chxbord = ('#bord#' !='#'+'bord#') ? "#bord#":"oui";
        var chxombre = ('#ombre#' !='#'+'ombre#') ? "#ombre#":"oui";
      
		var valeur = "#state#";
		var intNum = parseInt(valeur);
		var decNum = Math.abs(Math.round((valeur - intNum) * 10));
		$('#intFDValue#id#').text(intNum);
		if (decNum != 0) {
		   	$('#decFDValue#id#').text('.'+decNum);
		}
      
		$('.boxFD#id#').css('background-color', '#'+chxcolor);
      
	    var LightenColor = function(color, percent) {
	  		var num = parseInt(color,16),
				amt = Math.round(2.55 * percent),
				R = (num >> 16) + amt,
				B = (num >> 8 & 0x00FF) + amt,
				G = (num & 0x0000FF) + amt;
			return (0x1000000 + (R<255?R<1?0:R:255)*0x10000 + (B<255?B<1?0:B:255)*0x100 + (G<255?G<1?0:G:255)).toString(16).slice(1);
		};  
  

	  	couleur = LightenColor(chxcolor, -30);
		boxColor = LightenColor(chxcolor, -60);
		valeur = '';

		for (var iter = 1; iter < 99; iter++) {
		    couleur = LightenColor(couleur, 0.5);
		    valeur = valeur + '#' + couleur + ' ' + iter + 'px' + ' ' + iter + 'px, ';
		}
		valeur = valeur + '#' + couleur +' 100px 100px';

    	if (chxbord != "non") {
			$('.boxFD#id#').css('box-shadow', '#' +boxColor+' 4px 4px');
		}
  
		if (chxombre != "non") {
			$('.ValueFD#id#').css('text-shadow', valeur);
	  		$('.UniteFD#id#').css('text-shadow', valeur);
		}
    
    }
	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});

</script>
</div>

[Salvialf]

Salut,

J’ai survolé le code mais tu peux déjà essayer en remplaçant :

var valeur = "#state#";

par :

var valeur = _options.display_value;

[squateur44690]

Hello @Salvialf , merciiiiiiiiiiiiii . Trop fort. ça fonctionne parfaitement. Dire que j’ai essayé durant des jours car je n’osais pas déranger. Encore un grand merci à toi.