Widget "round" : cherche version pour Jeedom v4

@Morzini

Bon j’ai tout vérifié mais pas de changement :

  • Le widget fonctionne.
  • Mais j’ai encore ce message d’erreur en faisant F12

GET http://192.168.200.100/data/customTemplates/dashboard/cmd.info.numeric.round/fonts/appleberry.woff net::ERR_ABORTED 403 (Forbidden)

Peux-tu me repousser ton dernier code pour être certain de repartir sur la bonne base ?

Hello @salvialf,

Je voulais savoir si ton développement était toujours d’actualité ?

Bonne soirée à toi !

@+

Hello,

Oui bien sûr… je fais en sorte de faire ça au plus vite dès que je trouve un moment dans les prochains jours promis

Super ! Je craignais que tu n’aies été préempté par autre chose.

Cela me rassure, je vais donc m’armer de patience.
Vivement les tests… :slight_smile:

un petit aperçu de l’avancement ?

J’imagine que le problème vient de là : Ajouter des icones

J’ai pour ma part appliqué ces modifications et tout fonctionne

Bonjour,
Un peu d’aide pour un nul.
Comment agir pour modifier comme indiqué dans le début du programme.
Merci pour vos indications
Cordialement

@Morzini,
Merci pour l’info, je regarde ce week-end.
(Désolé pour mon délai de réponse)

@+

Bonjour Salviaf,

as tu pu avancer sur le code car j’avoue que de mon côté ce n’est pas parfait, j’aimerai l’avoir sur mobile est là je sèche…

@Salvialf @Morzini ,
J’avoue que j’ai laissé tombé de mon côté. N’étant pas assez à l’aise, je tourne un peu en rond…
J’espère que Salvialf pourra nous dépanner (y compris sur la version Dashboard).

@++

Bonsoir,

J’ai avancé ci-joint version desktop et en dessous la mobile. Les options :
taille fonctionne mal cela marche avec 1 ou 0.9
reflet:yes/no
textshadow:yes ou no
couleur:ex -20:purple&0:lightblue&19:green&24:red
fontcolor: ex white

<div class="cmd cmd-widget tooltips #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<!-- ################ Round V4 ################ 
 ********** Paramètres Optionnels *********** 
 12 couleurs: red, blue, lightblue, orange, black, green, purple, brown, pink, sand, slategrey, yellow **
 Couleur = couleur fixe ou bien change la couleur selon la valeur (exemple: -20:purple&0:lightblue&19:green&24:red)
 taille = taille * 90px*90px (1 | 90px*90px par défaut)
 reflet = a&ffiche un reflet sur le widget
 textshadow = Police Ombrée
 fontcolor = Change la couleur de la police 

 ########### by @SALVIALF &Renaud adapté par Morzini ;) ############# -->
  
 <div class="title #hide_name#">
    <div class="cmdName">#name_display#</div>
  </div>
  <div id="round_V4display" class="content-lg">
	<img id="IMGround"/>
    <div id="int_round"></div> 
     <div id="dec_round"></div> 
     <div id="unite_round">#unite#</div>

  </div>
  <div class="cmdStats #hide_history#">
	<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>
  <span class="timeCmd label label-default" data-type="info"></span>
<script>   
    jeedom.cmd.update['#id#'] = function(_options){
    let cmd = $('.cmd[data-cmd_id=#id#]');
    let val = is_float(parseFloat(_options.display_value)) ? parseFloat(_options.display_value).toFixed(1) : parseInt(_options.display_value);

  //Récupération des décimales
  	var signNum = Math.sign(val);
    var intNum = parseInt(val);
   	var decNum = Math.abs(Math.round((val - intNum) * 10));
  	if (signNum == "-1" && intNum == "0"){
		var intNum = "-0";
	}
	//console.log('intNum : '+intNum);
  
  	//Calcul du nombre de chiffres
  	var valeurChaineInt = intNum + "";
  	longueurint = valeurChaineInt.length;	
  	
  	if (longueurint > 3) {
      	if (decNum != 0) {
      		cmd.find('#int_round').css('font-size','15px');
      		cmd.find('#dec_round').css('font-size','10px');
        }
      	else if (longueurint > 5) {
          	cmd.find('#int_round').css('font-size','15px');
      		cmd.find('#dec_round').css('font-size','10px');
        }
    }       
  
  function TypeCouleur(valeur){
        var typeCouleur;
      	//console.log('Valeur : '+valeur);
        if(/true|false/.test(valeur)){
          typeCouleur = 'bool';
        }else if(/^#[a-zA-Z0-9]{3,6}$/.test(valeur)){
          typeCouleur = 'html';
        }else if(/^rgb\(?[012]?\d\d,?[012]?\d\d,?[012]?\d\d\)$/i.test(valeur)){
          typeCouleur = 'rgb';
        }else if(/^[a-zA-Z]{3,}$/i.test(valeur)){
          typeCouleur = 'nom';
        }else if(/[-+]?\d+:.+\&?/i.test(valeur)){
          typeCouleur = 'objet';
        }else if(/^[a-zA-Z0-9#\(\),\-]+\&/i.test(valeur)){
          typeCouleur = 'array';
        }else{
          typeCouleur = 'inconnu';
        }
        return typeCouleur;
    }
  
   	let valeur2 = '#couleur#';
  	var test = TypeCouleur(valeur2);
  	//console.log('Test : '+test);
	if(test == 'objet'){
      	var arrayVal = valeur2.split('&'), cleVal;
    	para = new Object();
    	for(var cle in arrayVal){
    		cleVal = arrayVal[cle].split(':');
        	para[cleVal[0]] = cleVal[1];
        	if(parseFloat(_options.display_value) >= parseFloat(cleVal[0])){
            	couleur2 = para[cleVal[0]];
        	}
    	}
    } else if (test == 'nom'){
        couleur2 = "#couleur#";

    } else {
      	couleur2 = "grey";
    }
   
 	testfontcolor = ("#fontcolor#" == '#'+'fontcolor#');
  	fontcolor2 = "#fontcolor#";
    if (testfontcolor == false) {
      	cmd.find('#int_round').css('color',fontcolor2);
      	cmd.find('#dec_round').css('color',fontcolor2);
      	cmd.find('#unite_round').css('color',fontcolor2);
       	//console.log('Font color2 : '+ fontcolor2);
    }    
      
      if( '#reflet#'  == 'yes' ) {
        if ( couleur2  == 'red' || couleur2  == 'blue' || couleur2  == 'lightblue' || couleur2  == 'orange' || couleur2  == 'black' || couleur2  == 'green' || couleur2  == 'purple' || couleur2  == 'brown' || couleur2  == 'pink' || couleur2  == 'sand' || couleur2  == 'slategrey' || couleur2  == 'yellow' ) {
           cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/'+couleur2+'_wr.png');
        }
        else {
            cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/grey_wr.png');
        }
    }
  	else {
        if( couleur2  == 'red' || couleur2  == 'blue' || couleur2  == 'lightblue' || couleur2  == 'orange' || couleur2  == 'black' || couleur2  == 'green' || couleur2  == 'purple' || couleur2  == 'brown' || couleur2  == 'pink' || couleur2  == 'sand' || couleur2  == 'slategrey' || couleur2  == 'yellow') {
           cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/'+couleur2+'.png');
        }
        else {
           cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/grey.png');
        } 
    }

    tailleRound = '#taille#';
	widthRound = Math.round ( 80*tailleRound );
	heightRound = Math.round ( 80*tailleRound );
  	ecart = Math.abs(Math.round((80 - widthRound)/2));
  	
           if ( '#textshadow#'  == 'yes' ) {
  		
  		cmd.find('#int_round').css('text-shadow','1px 1px 1px #000000');        
        cmd.find('#dec_round').css('text-shadow','1px 1px 1px #000000');        
  		cmd.find('#unite_round').css('text-shadow','1px 1px 1px #000000');        
    }
 	
      cmd.find('#IMGround').css('width',''+widthRound+'px');
  	  cmd.find('#IMGround').css('min-height',''+heightRound+'px');
  	  cmd.find('#IMGround').css({'transform':'scale('+tailleRound+')','-webkit-transform':'scale('+tailleRound+')','-moz-transform':'scale('+tailleRound+')','-ms-transform':'scale('+tailleRound+')','-o-transform':'scale('+tailleRound+')'});
  	  cmd.find('#int_round').css({'font-size':''+(19+(tailleRound-1)*25)+'px','top':''+(29+(tailleRound-1)*2)+'px','right':''+(38+(tailleRound-1)*3)+'px'});
      cmd.find('#dec_round').css({'font-size':''+(14+(tailleRound-1)*25)+'px','top':''+(30+(tailleRound-1)*2)+'px','right':''+(20+(tailleRound-1)*5)+'px'});
      cmd.find('#unite_round').css({'font-size':''+(11+(tailleRound-1)*25)+'px','top':''+(47+(tailleRound-1)*20)+'px'});
      if ( tailleRound < 1.0 ) {
        cmd.find('#IMGround').css('left','-'+(ecart-5)+'px');
        cmd.find('#int_round').css({'font-size':'14px','top':'27px','right':'28px'});
        cmd.find('#dec_round').css({'font-size':'10px','top':'28px','right':'14px'});
        cmd.find('#unite_round').css({'font-size':'10px','top':'40px'});
  }      
        
      
    cmd.find('#int_round').text(intNum);
    cmd.find('#dec_round').text('. '+decNum);
    cmd.attr('title','{{Date de valeur}} : '+_options.valueDate+'<br/>{{Date de collecte}} : '+_options.collectDate+'<br/>{{Valeur}} : '+_options.display_value+'#unite#');
          
    if ('#time#' == 'duree') {  
      jeedom.cmd.displayDuration(_options.valueDate,cmd.find('.timeCmd'));
      }
    else if ('#time#' == 'date') {
      let week = ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'];
   	  let date = new Date(_options.valueDate.replace(' ', 'T'));
      let t = _options.valueDate.split(/[- :]/);
	  let format = week[date.getDay()]+" "+t[2]+"/"+t[1];
      let time = "à "+t[3]+":"+t[4];
      cmd.find('.timeCmd').html(format+'<br>'+time);
      }
    else if ('#time#' == 'heure') {
      let date = new Date(_options.valueDate.replace(' ', 'T'));
      let t = _options.valueDate.split(/[- :]/);
      let time = "à "+t[3]+":"+t[4]+":"+t[5];  
      cmd.find('.timeCmd').html(time);
      }  
	}
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	
 
</script>
<style>
   @font-face {font-family: "appleberry";
    font-family: stateFont;
  src: url("data/fonts/17225af039f892713875c75d5b6023cf.eot"); /* IE9*/
  src: url("data/fonts/17225af039f892713875c75d5b6023cf.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("data/fonts/17225af039f892713875c75d5b6023cf.woff2") format("woff2"), /* chrome、firefox */
  url("data/fonts/17225af039f892713875c75d5b6023cf.woff") format("woff"), /* chrome、firefox */
  url("data/fonts/17225af039f892713875c75d5b6023cf.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("data/fonts/17225af039f892713875c75d5b6023cf.svg#appleberry") format("svg"); /* iOS 4.1- */
}
    font-weight:normal;font-style:normal;
  }

  @font-face {
    font-family: stateFont2;
    src: url('data/fonts/jennifer.ttf');
  }
 
  @font-face {
    font-family: uniteFont;
    src: url('data/fonts/erasdust.ttf');
  }
 
#int_round {
    font-family: stateFont; 
  	color: white;
    font-weight:bold;
    position:absolute;
  }
 
#dec_round {
    font-family: stateFont; 
  	color: white;
    font-weight:bold;
    position:absolute;
  }
 
 #unite_round {
    font-family: uniteFont; 
    color: white;
    position:absolute;
    width: 100%;
    text-align: center;
    font-weight:bold;
    z-index:2;
  } 


#round_V4display {
  	position:relative;
  	color:#F0F0F0;
}

</style>
</div>saisir ou coller le code ici

Puis version mobile :wink: :

<div class="cmd cmd-widget tooltips #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">

<!-- ################ Round V4 ################ 
 ********** Paramètres Optionnels *********** 
 12 couleurs: red, blue, lightblue, orange, black, green, purple, brown, pink, sand, slategrey, yellow **
 Couleur = couleur fixe ou bien change la couleur selon la valeur (exemple: -20:purple&0:lightblue&19:green&24:red)
 taille = taille * 90px*90px (1 | 90px*90px par défaut)
 reflet = a&ffiche un reflet sur le widget
 textshadow = Police Ombrée
 fontcolor = Change la couleur de la police 

 ########### by @SALVIALF &Renaud adapté par Morzini ;) ############# -->
  
 <div class="title #hide_name#">
    <div class="cmdName">#name_display#</div>
  </div>
  <div id="round_V4display" class="d-flex justify-content-between">
	<img id="IMGround"/>
    <div id="int_round"></div> 
    <div  id="dec_round"></div>
     <div id="unite_round">#unite#</div>

  </div>
  <div class="cmdStats #hide_history#">
	<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>
  <div class="timeCmd label label-default" data-type="info"></div>
<script>   
    jeedom.cmd.update['#id#'] = function(_options){
    let cmd = $('.cmd[data-cmd_id=#id#]');
    let val = is_float(parseFloat(_options.display_value)) ? parseFloat(_options.display_value).toFixed(1) : parseInt(_options.display_value);

  //Récupération des décimales
  	var signNum = Math.sign(val);
    var intNum = parseInt(val);
   	var decNum = Math.abs(Math.round((val - intNum) * 10));
  	if (signNum == "-1" && intNum == "0"){
		var intNum = "-0";
	}
	//console.log('intNum : '+intNum);
  
  	//Calcul du nombre de chiffres
  	var valeurChaineInt = intNum + "";
  	longueurint = valeurChaineInt.length;	
  	
  	if (longueurint > 3) {
      	if (decNum != 0) {
      		cmd.find('#int_round').css('font-size','15px');
      		cmd.find('#dec_round').css('font-size','10px');
        }
      	else if (longueurint > 5) {
          	cmd.find('#int_round').css('font-size','15px');
      		cmd.find('#dec_round').css('font-size','10px');
        }
    }       
  
  function TypeCouleur(valeur){
        var typeCouleur;
      	//console.log('Valeur : '+valeur);
        if(/true|false/.test(valeur)){
          typeCouleur = 'bool';
        }else if(/^#[a-zA-Z0-9]{3,6}$/.test(valeur)){
          typeCouleur = 'html';
        }else if(/^rgb\(?[012]?\d\d,?[012]?\d\d,?[012]?\d\d\)$/i.test(valeur)){
          typeCouleur = 'rgb';
        }else if(/^[a-zA-Z]{3,}$/i.test(valeur)){
          typeCouleur = 'nom';
        }else if(/[-+]?\d+:.+\&?/i.test(valeur)){
          typeCouleur = 'objet';
        }else if(/^[a-zA-Z0-9#\(\),\-]+\&/i.test(valeur)){
          typeCouleur = 'array';
        }else{
          typeCouleur = 'inconnu';
        }
        return typeCouleur;
    }
  
   	let valeur2 = '#couleur#';
  	var test = TypeCouleur(valeur2);
  	//console.log('Test : '+test);
	if(test == 'objet'){
      	var arrayVal = valeur2.split('&'), cleVal;
    	para = new Object();
    	for(var cle in arrayVal){
    		cleVal = arrayVal[cle].split(':');
        	para[cleVal[0]] = cleVal[1];
        	if(parseFloat(_options.display_value) >= parseFloat(cleVal[0])){
            	couleur2 = para[cleVal[0]];
        	}
    	}
    } else if (test == 'nom'){
        couleur2 = "#couleur#";

    } else {
      	couleur2 = "grey";
    }
   
 	testfontcolor = ("#fontcolor#" == '#'+'fontcolor#');
  	fontcolor2 = "#fontcolor#";
    if (testfontcolor == false) {
      	cmd.find('#int_round').css('color',fontcolor2);
      	cmd.find('#dec_round').css('color',fontcolor2);
      	cmd.find('#unite_round').css('color',fontcolor2);
       	//console.log('Font color2 : '+ fontcolor2);
    }    
      
      if( '#reflet#'  == 'yes' ) {
        if ( couleur2  == 'red' || couleur2  == 'blue' || couleur2  == 'lightblue' || couleur2  == 'orange' || couleur2  == 'black' || couleur2  == 'green' || couleur2  == 'purple' || couleur2  == 'brown' || couleur2  == 'pink' || couleur2  == 'sand' || couleur2  == 'slategrey' || couleur2  == 'yellow' ) {
           cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/'+couleur2+'_wr.png');
        }
        else {
            cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/grey_wr.png');
        }
    }
  	else {
        if( couleur2  == 'red' || couleur2  == 'blue' || couleur2  == 'lightblue' || couleur2  == 'orange' || couleur2  == 'black' || couleur2  == 'green' || couleur2  == 'purple' || couleur2  == 'brown' || couleur2  == 'pink' || couleur2  == 'sand' || couleur2  == 'slategrey' || couleur2  == 'yellow') {
           cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/'+couleur2+'.png');
        }
        else {
           cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/grey.png');
        } 
    }

    tailleRound = '#taille#';  
	widthRound = Math.round ( 80*tailleRound );
	heightRound = Math.round ( 80*tailleRound );
  	ecart = Math.abs(Math.round((80 - widthRound)/2));
  	
      if ( '#textshadow#'  == 'yes' ) {
  		
  		cmd.find('#int_round').css('text-shadow','1px 1px 1px #000000');        
        cmd.find('#dec_round').css('text-shadow','1px 1px 1px #000000');        
  		cmd.find('#unite_round').css('text-shadow','1px 1px 1px #000000');        
    }
 	
      cmd.find('#IMGround').css('width',''+widthRound+'px');
  	  cmd.find('#IMGround').css('min-height',''+heightRound+'px');
  	  cmd.find('#IMGround').css({'transform':'scale('+tailleRound+')','-webkit-transform':'scale('+tailleRound+')','-moz-transform':'scale('+tailleRound+')','-ms-transform':'scale('+tailleRound+')','-o-transform':'scale('+tailleRound+')'});
  	  cmd.find('#int_round').css({'font-size':''+(19+(tailleRound-1)*25)+'px','top':''+(24+(tailleRound-1)*2)+'px','right':''+(38+(tailleRound-1)*3)+'px'});
      cmd.find('#dec_round').css({'font-size':''+(14+(tailleRound-1)*25)+'px','top':''+(28+(tailleRound-1)*2)+'px','right':''+(24+(tailleRound-1)*5)+'px'});
      cmd.find('#unite_round').css({'font-size':''+(11+(tailleRound-1)*25)+'px','top':''+(47+(tailleRound-1)*20)+'px'});
      if ( tailleRound < 1.0 ) {
        cmd.find('#IMGround').css('left','-'+(ecart-5)+'px');
        cmd.find('#int_round').css({'font-size':'14px','top':'25px','right':'28px'});
        cmd.find('#dec_round').css({'font-size':'10px','top':'28px','right':'15px'});
        cmd.find('#unite_round').css({'font-size':'10px','top':'40px'});
  	}
      
    cmd.find('#int_round').text(intNum);
    cmd.find('#dec_round').text('.'+decNum);
    cmd.attr('title','{{Date de valeur}} : '+_options.valueDate+'<br/>{{Date de collecte}} : '+_options.collectDate+'<br/>{{Valeur}} : '+_options.display_value+'#unite#');
          
    if ('#time#' == 'duree') {  
      jeedom.cmd.displayDuration(_options.valueDate,cmd.find('.timeCmd'));
      }
    else if ('#time#' == 'date') {
      let week = ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'];
   	  let date = new Date(_options.valueDate.replace(' ', 'T'));
      let t = _options.valueDate.split(/[- :]/);
	  let format = week[date.getDay()]+" "+t[2]+"/"+t[1];
      let time = "à "+t[3]+":"+t[4];
      cmd.find('.timeCmd').html(format+'<br>'+time);
      }
    else if ('#time#' == 'heure') {
      let date = new Date(_options.valueDate.replace(' ', 'T'));
      let t = _options.valueDate.split(/[- :]/);
      let time = "à "+t[3]+":"+t[4]+":"+t[5];  
      cmd.find('.timeCmd').html(time);
      }  
	}
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	
 
</script>
<style>
   @font-face {font-family: "appleberry";
    font-family: stateFont;
  src: url("data/fonts/17225af039f892713875c75d5b6023cf.eot"); /* IE9*/
  src: url("data/fonts/17225af039f892713875c75d5b6023cf.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("data/fonts/17225af039f892713875c75d5b6023cf.woff2") format("woff2"), /* chrome、firefox */
  url("data/fonts/17225af039f892713875c75d5b6023cf.woff") format("woff"), /* chrome、firefox */
  url("data/fonts/17225af039f892713875c75d5b6023cf.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("data/fonts/17225af039f892713875c75d5b6023cf.svg#appleberry") format("svg"); /* iOS 4.1- */
}
    font-weight:normal;font-style:normal;
  }

  @font-face {
    font-family: stateFont2;
    src: url('data/fonts/jennifer.ttf');
  }
 
  @font-face {
    font-family: uniteFont;
    src: url('data/fonts/erasdust.ttf');
  }
 
#int_round {
    font-family: stateFont; 
  	color: white;
    font-size:30px;
    font-weight:bold;
    position:absolute;
    top:25px;
  }
 
#dec_round {
    font-family: stateFont; 
  	color: white;
    font-size:10px;
    font-weight:bold;
    position:absolute;
  }
 
 #unite_round {
    font-family: uniteFont; 
    color: white;
    position:absolute;
    width: 100%;
    text-align: center;
    font-weight:bold;
    z-index:2;
  } 


#round_V4display {
  	display:inline-block;
    position:relative;
  	color:#F0F0F0;
}
  
  
  
</style>
</div>

@Morzini

Merci pour cet update :grinning:

Je viens de tester la partie Dashboard.
Tout est OK (plus d’erreur !) après deux manips :

1) Suppression de cette ligne
url("data/fonts/17225af039f892713875c75d5b6023cf.woff2") format("woff2"), /* chrome、firefox */
=> Je n’ai pas cette police. Est-ce un problème ?
=> A quel moment cette police est-elle utilisée ?a

2) Renommage de ma police
data/fonts/appleberry.woff" => data/fonts/17225af039f892713875c75d5b6023cf.woff"
=> Pourquoi un nom aussi complexe ?

Question subsidiaire.
Je vois que tu es passé en « bold ».
Pour revenir au normal, j’efface juste ces lignes ?
font-weight:bold;
=> As-tu prévu un paramétre supplémentaire (normal/bold) à terme ?

Encore merci pour le boulot, je me suis ENFIN débarrassé des messages d’erreurs !
@++

Bonsoir DVB,

1/ je ne pense pas, les différentes polices étaient présentes dans le code d’origine je les ai laissé. celà doit dépendre des navigateur utilisés

2/ Mes polices étaient corrompues j’en ai téléchargé d’autres avec ce nom bizarre, tu peux modifier les noms

3/ Voici le code avec l’option fontweight : normal ou bold, j’en ai profité pour retirer plusieurs lignes inutiles.

Si tu veux l’adapter pour le widget square il suffit de remplacer tous les round par square (sauf les Math.round) et de rapatrier les images square de l’ancien widget de Renaud.

A+

<div class="cmd cmd-widget tooltips #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<!-- ################ Round V4 ################ 
 ********** Paramètres Optionnels *********** 
 12 couleurs: red, blue, lightblue, orange, black, green, purple, brown, pink, sand, slategrey, yellow **
 Couleur = couleur fixe ou bien change la couleur selon la valeur (exemple: -20:purple&0:lightblue&19:green&24:red)
 taille = taille * 90px*90px (1 | 90px*90px par défaut)
 reflet = a&ffiche un reflet sur le widget
 textshadow = Police Ombrée
 fontcolor = Change la couleur de la police 

 ########### by @SALVIALF &Renaud adapté par Morzini ;) ############# -->
  
 <div class="title #hide_name#">
    <div class="cmdName">#name_display#</div>
  </div>
  <div id="round_V4display" class="content-lg">
	<img id="IMGround"/>
    <div id="int_round"></div> 
     <div id="dec_round"></div> 
     <div id="unite_round">#unite#</div>

  </div>
  <div class="cmdStats #hide_history#">
	<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>
  <span class="timeCmd label label-default" data-type="info"></span>
<script>   
    jeedom.cmd.update['#id#'] = function(_options){
    let cmd = $('.cmd[data-cmd_id=#id#]');
    let val = is_float(parseFloat(_options.display_value)) ? parseFloat(_options.display_value).toFixed(1) : parseInt(_options.display_value);

  //Récupération des décimales
  	var signNum = Math.sign(val);
    var intNum = parseInt(val);
   	var decNum = Math.abs(Math.round((val - intNum) * 10));
  	if (signNum == "-1" && intNum == "0"){
		var intNum = "-0";
	}
	//console.log('intNum : '+intNum);
  
  	//Calcul du nombre de chiffres
  	var valeurChaineInt = intNum + "";
  	longueurint = valeurChaineInt.length;	
  	
  	if (longueurint > 3) {
      	if (decNum != 0) {
      		cmd.find('#int_round').css('font-size','15px');
      		cmd.find('#dec_round').css('font-size','10px');
        }
      	else if (longueurint > 5) {
          	cmd.find('#int_round').css('font-size','15px');
      		cmd.find('#dec_round').css('font-size','10px');
        }
    }       
  
  function TypeCouleur(valeur){
        var typeCouleur;
      	//console.log('Valeur : '+valeur);
        if(/true|false/.test(valeur)){
          typeCouleur = 'bool';
        }else if(/^#[a-zA-Z0-9]{3,6}$/.test(valeur)){
          typeCouleur = 'html';
        }else if(/^rgb\(?[012]?\d\d,?[012]?\d\d,?[012]?\d\d\)$/i.test(valeur)){
          typeCouleur = 'rgb';
        }else if(/^[a-zA-Z]{3,}$/i.test(valeur)){
          typeCouleur = 'nom';
        }else if(/[-+]?\d+:.+\&?/i.test(valeur)){
          typeCouleur = 'objet';
        }else if(/^[a-zA-Z0-9#\(\),\-]+\&/i.test(valeur)){
          typeCouleur = 'array';
        }else{
          typeCouleur = 'inconnu';
        }
        return typeCouleur;
    }
  
   	let valeur2 = '#couleur#';
  	var test = TypeCouleur(valeur2);
  	//console.log('Test : '+test);
	if(test == 'objet'){
      	var arrayVal = valeur2.split('&'), cleVal;
    	para = new Object();
    	for(var cle in arrayVal){
    		cleVal = arrayVal[cle].split(':');
        	para[cleVal[0]] = cleVal[1];
        	if(parseFloat(_options.display_value) >= parseFloat(cleVal[0])){
            	couleur2 = para[cleVal[0]];
        	}
    	}
    } else if (test == 'nom'){
        couleur2 = "#couleur#";

    } else {
      	couleur2 = "grey";
    }
   
 	testfontcolor = ("#fontcolor#" == '#'+'fontcolor#');
  	fontcolor2 = "#fontcolor#";
    if (testfontcolor == false) {
      	cmd.find('#int_round').css('color',fontcolor2);
      	cmd.find('#dec_round').css('color',fontcolor2);
      	cmd.find('#unite_round').css('color',fontcolor2);
       	//console.log('Font color2 : '+ fontcolor2);
    }    
      
    testfontweight = ("#fontweight#" == '#'+'fontweight#');
  	fontweight2 = "#fontweight#";
    if (testfontweight == false) {
      	cmd.find('#int_round').css('font-weight',fontweight2);
      	cmd.find('#dec_round').css('font-weight',fontweight2);
      	cmd.find('#unite_round').css('font-weight',fontweight2);
       	//console.log('Font color2 : '+ fontcolor2);
    }    
 
      
      if( '#reflet#'  == 'yes' ) {
        if ( couleur2  == 'red' || couleur2  == 'blue' || couleur2  == 'lightblue' || couleur2  == 'orange' || couleur2  == 'black' || couleur2  == 'green' || couleur2  == 'purple' || couleur2  == 'brown' || couleur2  == 'pink' || couleur2  == 'sand' || couleur2  == 'slategrey' || couleur2  == 'yellow' ) {
           cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/'+couleur2+'_wr.png');
        }
        else {
            cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/grey_wr.png');
        }
    }
  	else {
        if( couleur2  == 'red' || couleur2  == 'blue' || couleur2  == 'lightblue' || couleur2  == 'orange' || couleur2  == 'black' || couleur2  == 'green' || couleur2  == 'purple' || couleur2  == 'brown' || couleur2  == 'pink' || couleur2  == 'sand' || couleur2  == 'slategrey' || couleur2  == 'yellow') {
           cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/'+couleur2+'.png');
        }
        else {
           cmd.find('#IMGround').attr('src','data/customTemplates/dashboard/cmd.info.numeric.Round_V4/grey.png');
        } 
    }

    tailleRound = '#taille#';
	widthRound = Math.round ( 80*tailleRound );
	heightRound = Math.round ( 80*tailleRound );
  	ecart = Math.abs(Math.round((80 - widthRound)/2));
  	
           if ( '#textshadow#'  == 'yes' ) {
  		
  		cmd.find('#int_round').css('text-shadow','1px 1px 1px #000000');        
        cmd.find('#dec_round').css('text-shadow','1px 1px 1px #000000');        
  		cmd.find('#unite_round').css('text-shadow','1px 1px 1px #000000');        
    }
 	
      cmd.find('#IMGround').css('width',''+widthRound+'px');
  	  cmd.find('#IMGround').css('min-height',''+heightRound+'px');
  	  cmd.find('#IMGround').css({'transform':'scale('+tailleRound+')','-webkit-transform':'scale('+tailleRound+')','-moz-transform':'scale('+tailleRound+')','-ms-transform':'scale('+tailleRound+')','-o-transform':'scale('+tailleRound+')'});
  	  cmd.find('#int_round').css({'font-size':''+(19+(tailleRound-1)*25)+'px','top':''+(29+(tailleRound-1)*2)+'px','right':''+(38+(tailleRound-1)*3)+'px'});
      cmd.find('#dec_round').css({'font-size':''+(14+(tailleRound-1)*25)+'px','top':''+(30+(tailleRound-1)*2)+'px','right':''+(20+(tailleRound-1)*5)+'px'});
      cmd.find('#unite_round').css({'font-size':''+(11+(tailleRound-1)*25)+'px','top':''+(47+(tailleRound-1)*20)+'px'});
      if ( tailleRound < 1.0 ) {
        cmd.find('#IMGround').css('left','-'+(ecart-5)+'px');
        cmd.find('#int_round').css({'font-size':'14px','top':'27px','right':'28px'});
        cmd.find('#dec_round').css({'font-size':'10px','top':'28px','right':'14px'});
        cmd.find('#unite_round').css({'font-size':'10px','top':'40px'});
  }      
        
      
    cmd.find('#int_round').text(intNum);
    cmd.find('#dec_round').text('. '+decNum);
    cmd.attr('title','{{Date de valeur}} : '+_options.valueDate+'<br/>{{Date de collecte}} : '+_options.collectDate+'<br/>{{Valeur}} : '+_options.display_value+'#unite#');
          
    if ('#time#' == 'duree') {  
      jeedom.cmd.displayDuration(_options.valueDate,cmd.find('.timeCmd'));
      }
    else if ('#time#' == 'date') {
      let week = ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'];
   	  let date = new Date(_options.valueDate.replace(' ', 'T'));
      let t = _options.valueDate.split(/[- :]/);
	  let format = week[date.getDay()]+" "+t[2]+"/"+t[1];
      let time = "à "+t[3]+":"+t[4];
      cmd.find('.timeCmd').html(format+'<br>'+time);
      }
    else if ('#time#' == 'heure') {
      let date = new Date(_options.valueDate.replace(' ', 'T'));
      let t = _options.valueDate.split(/[- :]/);
      let time = "à "+t[3]+":"+t[4]+":"+t[5];  
      cmd.find('.timeCmd').html(time);
      }  
	}
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	
 
</script>
<style>
   @font-face {font-family: "appleberry";
    font-family: stateFont;
  src: url("data/fonts/17225af039f892713875c75d5b6023cf.eot"); /* IE9*/
  src: url("data/fonts/17225af039f892713875c75d5b6023cf.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("data/fonts/17225af039f892713875c75d5b6023cf.woff2") format("woff2"), /* chrome、firefox */
  url("data/fonts/17225af039f892713875c75d5b6023cf.woff") format("woff"), /* chrome、firefox */
  url("data/fonts/17225af039f892713875c75d5b6023cf.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("data/fonts/17225af039f892713875c75d5b6023cf.svg#appleberry") format("svg"); /* iOS 4.1- */
}
    font-weight:normal;font-style:normal;
  }

  @font-face {
    font-family: stateFont2;
    src: url('data/fonts/jennifer.ttf');
  }
 
  @font-face {
    font-family: uniteFont;
    src: url('data/fonts/erasdust.ttf');
  }
 
#int_round {
    font-family: stateFont; 
    position:absolute;
  }
 
#dec_round {
    font-family: stateFont; 
    position:absolute;
  }
 
 #unite_round {
    font-family: uniteFont; 
    position:absolute;
    width: 100%;
    text-align: center;
    z-index:2;
  } 


#round_V4display {
  	position:relative;
  	color:#F0F0F0;
}

</style>
</div>

Hi,

Testé et approuvé :grinning:
(C’est bien noté pour « square »).

Seul le paramètre fontcolor ne fonctionne pas (mais je n’avais jamais testé avant). J’ai mis red, blue, green,… la police reste en blanc.

Cela ne me gêne pas, c’est un détail.
@+

hello,

Bizarre ça fonctionne parfaitement chez moi??
Es tu sur d’avoir bien orthographié fontcolor?

Bonjour,
Pour moi fontcolor fonctionne parfaitement aussi.
N’étant pas très à l’aise dans ce domaine, pouvez vous m’indiquer comment je peux faire varier la couleur avec la température ou plage de température.
Très beau travail
Cordialement

Je viens de réessayer, j’ai bien mis « fontcolor » mais cela ne fonctionne pas.
Ce n’est pas grave.

@+

La couleur de la police ne peut pas varier en fonction de la température c’est la couleur du widget qui change.

Oui c’est la couleur du widget que je souhaite faire changer en fonction de la température

Bonjour
Pouvez vous m’aider pour la syntaxe pour changer la couleur du widget, lorsque je mets
#value#<36 couleur yellow (par exemple) cela ne fonctionne pas!!!
Merci pour votre aide