Widgets information Round et Square

[morzini]

Bonjour Renaud,

La fonction couleur ne fonctionne pas sur mobile.

J'ai par exemple : couleur -20:purple&0:lightblue&19:green&24:red, celà fonctionne à merveille sur le dashboard mais pas sur mobile!

As tu connaissance de ce problème, quelle est la solution??

Merci d'avance.

[cadavor]

Bonjour,

J'utilise IE 11 et il ne semble pas connaitre la fonction Math.sign()

J'ai donc modifier le code ainsi :
//Récupération des décimales
var valeur = "#state#";
//console.log('valeur : '+valeur);
var signNum = (valeur>0)?"1":"-1";
var intNum = parseInt(valeur);
var decNum = Math.abs(Math.round((valeur - intNum) * 10));
if (signNum == "-1" && intNum == "0"){
var intNum = "-0";
}
//console.log('intNum : '+intNum);

Maintenant ca marche

@++;

Merci IE pour l'incompatibilité... Mais ton patch est incomplet en effet si la valeur est 0 cela va afficher "-0.0"
Il faut donc remplacer la ligne par :

Code : Tout sélectionner

  	var signNum = (valeur>=0)?1:-1;

(à noter également le retrait des ").

En plus de cela, il y a une erreur de calcul pour l'arrondi.
En effet si la valeur est comprise entre x.95 et x.99, la partie décimale arrondie calculée vaut 100 et cela affiche donc x.10 au lieu d'arrondir à l'entier supérieur.
Voici la correction à apporter :
Après

Code : Tout sélectionner

   	var decNum = Math.abs(Math.round((valeur - intNum) * 10));

Ajouter

Code : Tout sélectionner

if (decNum >= 10) {
      	decNum = 0;
      	intNum += (1 * signNum);
    }

[diving91]

Je vous propose quelques simplifications et améliorations:
- Possibilité de fixer le nombre de décimales en ajoutant le Paramètre optionnel: nbDec (0 pour les entiers, 1 pour une décimale,...)
- Gestion du #hideCmdName#
- Un peu de nettoyage de code en utilisant des fonctions un peu plus éprouvées

Code : Tout sélectionner

<div class="cmd #history# tooltips cmd-widget roundWidget#id#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#" >
  <span class='cmdName' style="font-weight: bold;font-size : 12px; #hideCmdName#">#name_display#</span>
    <div class="DisplayRound#id#">
   		<div class="DisplayRoundIMG#id#" id="iconRound#id#"></div>
		<div class="roundState#id#">
        	<span class="roundValue#id#" id="valRoundValue#id#"></span>
      	</div>
        <div class="roundUnite#id#">#unite#</div>      
  	</div>
  	
<style>

  @font-face {
    font-family: stateFont;
    src:url("plugins/widget/core/template/dashboard/cmd.info.numeric.Round/fonts/appleberry.eot?") format("eot"),
      	url("plugins/widget/core/template/dashboard/cmd.info.numeric.Round/fonts/appleberry.woff") format("woff"),
      	url("plugins/widget/core/template/dashboard/cmd.info.numeric.Round/fonts/appleberry.ttf") format("truetype"),
      	url("plugins/widget/core/template/dashboard/cmd.info.numeric.Round/fonts/appleberry.svg#appleberry") format("svg");
    font-weight:normal;font-style:normal;
  }

  @font-face {
    font-family: stateFont2;
    src: url('plugins/widget/core/template/dashboard/cmd.info.numeric.Round/fonts/jennifer.ttf');
  }
 
  @font-face {
    font-family: uniteFont;
    src: url('plugins/widget/core/template/dashboard/cmd.info.numeric.Round/fonts/erasdust.ttf');
  }
  
  div.roundWidget#id# {
       width: 90px;
       min-height: 90px;
  }
  
  div.DisplayRound#id# {
    position: relative;
  	}
  
  div.DisplayRoundIMG#id# {
    position:absolute;
    width: 100%;
    z-index:1;

  }
  
  span.roundValue#id# {
    font-family: stateFont; 
    font-size:20px;
  	color: white;
  }
    
  div.roundState#id# {
    position:absolute;
    width: 100%;
    text-align: center;
    top: 25px;
    z-index:2;
  }
  
  div.roundUnite#id# {
    font-family: uniteFont; 
    font-size:12px;
    color: white;
    position:absolute;
    width: 100%;
    text-align: center;
    top: 47px;
    z-index:2;
  }
  
  img.roundImg#id# {
    width: 80px;
    height: 80px;
  }

</style>
  
<script>
 	// From http://locutus.io/php/strings/number_format/
  	function number_format (number, decimals, decPoint, thousandsSep) {
  		number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
  		var n = !isFinite(+number) ? 0 : +number;
  		var prec = !isFinite(+decimals) ? 0 : Math.abs(decimals);
		var sep = (typeof thousandsSep === 'undefined') ? ',' : thousandsSep;
  		var dec = (typeof decPoint === 'undefined') ? '.' : decPoint;
  		var s = '';
  		var toFixedFix = function (n, prec) {
    		var k = Math.pow(10, prec);
    		return '' + (Math.round(n * k) / k).toFixed(prec);
  		}
  		// @todo: for IE parseFloat(0.55).toFixed(0) = 0;
  		s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
  		if (s[0].length > 3) {
    		s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
  		}
  		if ((s[1] || '').length < prec) {
    		s[1] = s[1] || '';
    		s[1] += new Array(prec - s[1].length + 1).join('0');
  		}
  		return s.join(dec);
	}

  	function in_array(needle, haystack, argStrict) {
  		var key = '';
  		var strict = !!argStrict;
  		// we prevent the double check (strict && arr[key] === ndl) || (!strict && arr[key] === ndl)
  		// in just one for, in order to improve the performance
  		// deciding wich type of comparation will do before walk array
  		if (strict) {
    		for (key in haystack) {
      			if (haystack[key] === needle) {
        			return true;
      			}
    		}
  		} else {
    		for (key in haystack) {
      			if (haystack[key] == needle) {
        			return true;
      			}
    		}
  		}
  		return false;
	}

  	if (/[-+]?\d+:.+\&?/i.test("#couleur#")) {
      	var arrayVal = ("#couleur#").split('&'), cleVal;
    	para = new Object();
    	for (var cle in arrayVal) {
    		cleVal = arrayVal[cle].split(':');
        	para[cleVal[0]] = cleVal[1];
        	if (parseFloat("#state#") >= parseFloat(cleVal[0])) {
            	couleur = para[cleVal[0]];
        	}
    	}
    } else if (/^[a-zA-Z]{3,}$/i.test("#couleur#")) {
        couleur = "#couleur#";

    } else {
      	couleur = "grey";
    }

	var valeur = number_format("#state#","#nbDec#",'.');
    if (valeur.length > 5) {
    	$('span.roundValue#id#').css('font-size','15px');
      	$('div.roundState#id#').css('top','28px');
     }
  	
  	testfontcolor = ("#fontcolor#" == '#'+'fontcolor#');
  	fontcolor2 = "#fontcolor#";
    if (testfontcolor == false) {
      	$('span.roundValue#id#').css('color',fontcolor2);
      	$('div.roundUnite#id#').css('color',fontcolor2);
       	//console.log('Font color2 : '+ fontcolor2);
    }
  
   	$('#valRoundValue#id#').text(valeur);

  	var colorsArray = ['black','blue','brown','green','grey','lightblue','orange','pink','purple','red','sand','slategrey','yellow'];
  	var wr = '';
  	if( '#reflet#'  == 'yes' ) { wr = '_wr'; }
    if (in_array(couleur,colorsArray)) {
    	$('#iconRound#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Round/'+couleur+wr+'.png" class="roundImg#id#">');
    }
    else {
    	$('#iconRound#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.Round/grey'+wr+'.png" class="roundImg#id#">');
    }

  	tailleRound = (is_numeric('#taille#')) ? parseFloat('#taille#') : 1.0;
	widthRound = Math.round ( 90*tailleRound );
  	heightRound = Math.round ( 90*tailleRound );
    if ('#hideCmdName#' == '') { heightRound = heightRound+15; }
  	ecart = Math.abs(Math.round((90 - widthRound)/2));
  	if ( '#textshadow#'  == 'yes' ) {
  		$('span.roundValue#id#').css('text-shadow','1px 1px 1px #000000');
  		$('div.roundUnite#id#').css('text-shadow','1px 1px 1px #000000');
    }
 	$('div.roundWidget#id#').css('width',''+widthRound+'px');
  	$('div.roundWidget#id#').css('min-height',''+heightRound+'px');
  	$('div.DisplayRound#id#').css({'transform':'scale('+tailleRound+')','-webkit-transform':'scale('+tailleRound+')','-moz-transform':'scale('+tailleRound+')','-ms-transform':'scale('+tailleRound+')','-o-transform':'scale('+tailleRound+')'});
  	if ( tailleRound < 1.0 ) {
          $('div.DisplayRoundIMG#id#').css('left','-'+(ecart-5)+'px');
   	}
          
  </script> 
</div>

Pour la version mobile, au lieu d'avoir un code différent comme c'est actuellement le cas, le mieux est de copier le même code avec les modifications suivantes:
- Remplacer à la fin du fichier:

Code : Tout sélectionner

  	if ( tailleRound < 1.0 ) {
          $('div.DisplayRoundIMG#id#').css('left','-'+(ecart-5)+'px');
   	}

par

Code : Tout sélectionner

  	if ( tailleRound < 1.0 ) {
    	$('div.DisplayRoundIMG#id#').css('left','-'+(ecart-1)+'px');
   	}

Idéalement il faudrait republier le widget sur le market, mais seul l'auteur peux le faire
Note: Testé sous IE11 (partiellement) et Firefox 51.0.1 (mon browser par défaut)

diving91

[diving91]

Bonjour Renaud,

La fonction couleur ne fonctionne pas sur mobile.

J'ai par exemple : couleur -20:purple&0:lightblue&19:green&24:red, celà fonctionne à merveille sur le dashboard mais pas sur mobile!

As tu connaissance de ce problème, quelle est la solution??

Merci d'avance.

@morzini,
si tu fais ce qui est indiqué dans le psot juste avant, tu auras les couleurs aussi en mobile

diving91

[morzini]

Merci Diving91 je vais tester de ce pas

[morzini]

Ca ne fonctionne pas, les mise en pages des tuiles sont détruites et les nombres affichés sont les mêmes sur les virtuels!

[diving91]

pas normal.
as tu installé le widget pour le dashboard aussi? Si oui, je vois pas ce qui ne va aps. Si non, alors soit tu l'installes, soit tu remplace dashboard par mobile dans toutes les url présentes dans le widget .

Sinon pour voir ce qui ne va pas il faut faire un F12 dans ton browser, pour voir ce qui cloche (mais il faut comprendre un peu les messages ...)

Au cas, ou ! as tu bien copié tout le code du widget ?

[morzini]

Voici ce que ça donne avant et après mise à jour.

On perd les chiffres après la virgule, les historiques.

Sur la version mobile les round se retrouvent empilés les uns au dessus des autres au lieu de conserver la configuration du dashboard!

[diving91]

Pour les historiques tu peux les remettre dans le code du widget - je les ai effectivement retirés
Pour les décimales, as tu pensé a ajouter le paramètre optionnel: nbDec (0 pour les entiers, 1 pour une décimale,...), sinon par défaut c'est sans décimales.

Pour le Mobile, j'ai testé sur mon mobile Android V6 - Chrome version 55 et çà fonctionne nickel.
sous quoi testes tu?

[Grzywa]

Après mise à jour 3.1.3 Jeedom tous les widgets ronds ne sont pas affichés. Est-il question jeedom ou ce widget doit mettre à jour?
Merci.

[renaud]

Après mise à jour 3.1.3 Jeedom tous les widgets ronds ne sont pas affichés. Est-il question jeedom ou ce widget doit mettre à jour?
Merci.

J'ai la même chose alors que le square marche bien (même code pourtant).

En fait il marche au bout d'un "long" moment :

Capture d’écran 2017-09-26 à 10.43.05.png (539.42 Kio) Consulté 1825 fois

Je pense que ça vient de la MAJ sinon je ne vois pas pourquoi il s'afficherai au bout d'un moment...

[freddye]

Même problème pour moi...
Ils apparaissent de façon aléatoire, et parfois jamais.

[Dams]

Même problème pour moi
L'apparition est aléatoire

[renaud]

Je n'ai pas encore eu le temps de comparer mes codes (où de regarder si quelqu'un les avaient modifié à ma place) avec le Square qui marche parfaitement.

Si quelqu'un a du temps pour comparer qu'il n'hésite pas.

Sinon j'essaye de regarde au plus tard ce WE

[Dams]

ils ne sont pas tout à fait pareil, il y a des fonctions en plus sur le round
les ombres
les historiques
un calcul sur les decimales
J'ai essayé de comparer les deux code avec notepad++ mais n'ayant pas trop de compétence en codage je suis très limité

[DuplO]

Hello j'ai le même souci sur le widget Round.

[Dapolux]

Hello,
Idem, même problème chez moi

[domomat]

ce problème semble commun à plusieurs Widgets disposant d'option de personnalisation (non apparition ou ils sont en verts : skycolortuile ou FlatDesign)...
Si quelqu'un trouve le soucis, ce serait vraiment bien...
En attendant, le dashboard est en triste état.

[renaud]

ce problème semble commun à plusieurs Widgets disposant d'option de personnalisation (non apparition ou ils sont en verts : skycolortuile ou FlatDesign)...
Si quelqu'un trouve le soucis, ce serait vraiment bien...
En attendant, le dashboard est en triste état.

Etonnant car mon Square a également des options de personnalisation...

Je regrade ce WE mais je pense que si plusieurs widgets ont le problème c'est plus au niveau du core de Jeedom ou du plugin widget

[domomat]

Loic à corrigé le pb avec la sortie de la MAJ en 3.1.5

Merci Loic