Widget "round" : cherche version pour Jeedom v4

Salut à tous,

Sous Jeedom v3, j’utilisais le widget round :

Très pratique pour afficher température de consigne, et statut du chauffage (rouge quand actif par exemple).

Je cherche le code actualisé pour Jeedom v4, savez-vous où le trouver ?

Merci.

Bonsoir,

Un petit « up » en passant…

Salut @dvb,

Signetté pour mon retour de vacances si personne n’est venu à ta rescousse avant :wink:

Bonjour

Est ce de ce widget mobile.info.numeric.Round dont tu parles ?

@iPapy,
Oui c’est ça ainsi que cmd.info.numeric.Round.html pour le Dashboard
J’avais déjà eu de l’aide suite évolution Jeedom V3 ici :
https://forum.jeedom.com/viewtopic.php?t=41597&start=40

@Salvialf
Merci avec vous deux je suis rassuré !

Pour info c’est un widget crucial pour moi, je l’utilise avec l’excellent plugin chauffage de DavZero.

En plus d’afficher la température de consigne, le fond change de couleur :

  • fond noir : manager chauffage éteint.
  • fond gris : thermostat off
  • fond rouge : thermostat on.

@+

Hello @Salvialf @iPapy
Un petit up, si l’un d’entre vous peut m’aider.
J’ai essayé de regarder le code mais trop compliqué pour moi à date…

Merci.

Salut,

J’ai oublié de te tenir au courant, j’ai bien commencé à le retravailler dès mon retour de vacances.

C’est un widget qui offre énormément de possibilité de personnalisation et existe en rond ou en carré. Du coup je suis en train d’en faire un widget incluant beaucoup plus de personnalisation.

Coming very soon :wink:

1 J'aime

Génial, j’ai hâte.
OK, je « stay tuned » alors :yum:

A++

@salvialf,
Est-ce que tu es sur le code ?
Cela avance comme tu veux ?
:wink:

@+

Bonjour,

J’ai tenté de modifier le code (cf ci-dessous) avec mes maigres connaissances et surtout le code de Salviaf sur jauge (merci ;-)).

Ça fonctionne pour moi et ce que j’en fait, il y a un soucis d’adaptation de la police en fonction de l’option taille mais de 0.8 à 1.2 ça fonctionne bien.

Si un programmeur chevronné peut regarder et corriger ce qui doit l’être merci d’avance.

<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 * 80px*80px (1 | 80px*80px 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':''+(18+(1-tailleRound)*10)+'px','top':''+(29+(1-tailleRound)*2)+'px','right':''+(38+(1-tailleRound)*5)+'px'});
      cmd.find('#dec_round').css({'font-size':''+(13+(1-tailleRound)*10)+'px','top':''+(30+(1-tailleRound)*2)+'px','right':''+(29+(1-tailleRound)*5)+'px'});
      cmd.find('#unite_round').css({'font-size':''+(11+(1-tailleRound)*10)+'px','top':''+(50+(1-tailleRound)*5)+'px'});
      if ( tailleRound < 1.0 ) {
        cmd.find('#IMGround').css('left','-'+(ecart-5)+'px');
        cmd.find('#int_round').css({'font-size':'15px','top':'25px','right':'31px'});
        cmd.find('#dec_round').css({'font-size':'10px','top':'27px','right':'21px'});
        cmd.find('#unite_round').css({'font-size':'7px','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: stateFont;
    src:url("data/customTemplates/dashboard/cmd.info.numeric.round_V4/fonts/appleberry.eot?") format("eot"),
      	url("data/customTemplates/dashboard/cmd.info.numeric.round_V4/fonts/appleberry.woff") format("woff"),
      	url("data/customTemplates/dashboard/cmd.info.numeric.round_V4/fonts/appleberry.ttf") format("truetype"),
      	url("data/customTemplates/dashboard/cmd.info.numeric.round_V4/fonts/appleberry.svg#appleberry") format("svg");
    font-weight:normal;font-style:normal;
  }

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


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

</style>
</div>

A ajouter dans le core :slight_smile:

@Morzini,
Merci pour le partage. Je viens d’essayer mais l’icône ne s’affiche pas.
Sans doute un souci côté image.

Sais-tu partager le(s) image(s) utilisée(s) et préciser ou il faut les stocker ?

@salvialf,
J’espère que ta solution va arriver, ce sera sympa d’avoir un clé en main…

@+

Salut,

Je me cale un moment à mon retour pour le finir. Début septembre

@Salvialf
Super ! Merci et bonnes fin de vacances.

Salut à tous,

En attendant que @salvialf finalise, j’essaie quand même d’avancer (je vais devoir tester mon chauffage, et ces widgets sont vitaux…).

J’ai réglé le souci d’image qui venait simplement du path à ajuster.C’est fonctionnel, mais je me rends compte que j’ai des erreurs au chargement du Dashboard. F12 m’affiche ceci :

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

Est-ce que l’un de vous me préciser comment fixer svp ?

Merci.

Bonjour DVB,

Désolé pour ce retour tardif je suis rarement sur le forum.

J’ai pris les images de l’ancien plugin en utilisant jeexplorer.

Elles sont dans le répertoire : html/plugins/widget/core/template/dashboard/cmd.info.numeric.round

Tu copie tout le répertoire dans : html/data/customtemplates/dashboard/cmd.info.numeric.round

Tu sauvegarde également le code ci-dessus sous cmd.info.numeric.round.html dans le répertoire html/data/customtemplates/dashboard/ et ça devrait fonctionner.

Tiens moi au courant.

A+

@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: