[SALVIALF] Widget GaugeIMG (Info/Numérique)

Tags: #<Tag:0x00007f283ae52018>

Peut tu faire une copie d’écran des options de ton widget ?
ton code est il identique a celui-ci ?

CODE
<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#">
<!-- ################ gaugeIMG ################ -->
<!-- ********** Paramètres Optionnels ********* -->
<!-- mini = borne minimum (valeur mini de la commande par défaut)   -->
<!-- maxi = borne maximum (valeur maxi de la commande par défaut)   -->
<!-- colJauge = couleur de la jauge (bleue par défaut)   -->
<!-- colAiguille = couleur de l'aiguille (bleue par défaut)   -->
<!--** 9 couleurs: bleue, verte, jaune, orange, rouge, rose, mauve, turquoise, blanche **-->
<!-- change = change la couleur de la jauge selon la valeur (exemple: 0-25:verte,25-75:orange,75-100:rouge)   -->
<!-- petit = taille 80px*80px (1 | 120px*120px par défaut)   -->
<!-- time = affiche la durée (duree | date | heure | désactivé par défaut)   -->
<!-- ########### by @SALVIALF ;) ############# -->
  <div class="title #hide_name#">
    <div class="cmdName">#name_display#</div>
  </div>
  <div id="gaugeIMGdisplay" class="content-lg">
	<img id="IMGgauge"/>
    <span id="minvalue"></span>
    <span id="quartvalue"></span>
    <span id="midvalue"></span>
    <span id="troisquartvalue"></span>
  	<span id="maxvalue"></span>
    <div id="state_gauge"></div> 
    <div id="unite_gauge">#unite#</div>
	<div id="indicator"></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){
    var cmd = $('.cmd[data-cmd_id=#id#]');
  	var valMin = is_numeric('#mini#') ? parseFloat('#mini#'):parseFloat('#minValue#');
  	var valMax = is_numeric('#maxi#') ? parseFloat('#maxi#'):parseFloat('#maxValue#');
    var midvalue = Math.round((valMax + valMin)*50)/100;
    var quartvalue = Math.round((valMin + midvalue)*50)/100;
    var troisquartvalue = Math.round((midvalue + valMax)*50)/100;
    var val = is_float(parseFloat(_options.display_value)) ? parseFloat(_options.display_value).toFixed(1) : parseInt(_options.display_value);
    var plage = valMax - valMin;
    var angle = '';
  	var colJauge = ('#jauge#' !='#'+'jauge#') ? "#jauge#":"bleue";
  	var colAiguille = ('#aiguille#' !='#'+'aiguille#') ? "#aiguille#":"bleue";
    var changeColor = ('#change#' !='#'+'change#') ? '#change#':false;
       
   if (changeColor != false) {
   	var arrChange = changeColor.split(',');
     for (var i=0; i < arrChange.length; i++) {
      var level = arrChange[i].split(':');
      var palier = level[0].split('_');
      var palierMin = palier[0];
      var palierMax = palier[1];
      var palierColor = level[1];
    	if (val >= palierMin && val < palierMax) {
       	colJauge = palierColor;
		} 
     }
    }

    if (plage == 0) angle = -70;
    else if (valMin < valMax)  {
      if (val < valMin) angle = -10;
      else if (val > valMax) angle = 232;
      else angle = (val - valMin) * 224 / plage;
    } else {
      if (val < valMax) angle = 232;
      else if (val > valMin) angle = -10;
      else angle = (val - valMin) * 224 / plage;
    }
      
    cmd.find('#minvalue').text(valMin);
    cmd.find('#midvalue').text(midvalue);
    cmd.find('#quartvalue').text(quartvalue);
    cmd.find('#troisquartvalue').text(troisquartvalue);
    cmd.find('#maxvalue').text(valMax); 
    cmd.find('#IMGgauge').attr('src','data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG/fond'+colJauge+'.png');  
    cmd.find('#indicator').css({'background':'url(data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG/center'+colAiguille+'.png) center','-webkit-transform':'rotate('+angle+'deg)','-moz-transform':'rotate('+angle+'deg)','-ms-transform':'rotate('+angle+'deg)','-o-transform':'rotate('+angle+'deg)','transform':'rotate('+angle+'deg)'});
    cmd.find('#state_gauge').text(val);
    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') {
      var week = ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'];
   	  var date = new Date(_options.valueDate.replace(' ', 'T'));
      var t = _options.valueDate.split(/[- :]/);
	  var format = week[date.getDay()]+" "+t[2]+"/"+t[1];
      var time = "à "+t[3]+":"+t[4];
      cmd.find('.timeCmd').html(format+'<br>'+time);
      }
    else if ('#time#' == 'heure') {
      var date = new Date(_options.valueDate.replace(' ', 'T'));
      var t = _options.valueDate.split(/[- :]/);
      var 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#'});
	
  	if ('#petit#' == 1) {
      var cmd = $('.cmd[data-cmd_id=#id#]');
      cmd.find('#IMGgauge').css({'height':'80px','width':'80px'});
      cmd.find('#indicator').css({'height':'48px','width':'48px','left':'16px','top':'15px'});
      cmd.find('#minvalue').css({'font-size':'0.5em','left':'15px','top':'43px'});
      cmd.find('#quartvalue').css({'font-size':'0.5em','left':'17px','top':'24px'});
      cmd.find('#midvalue').css({'font-size':'0.5em','top':'10px'});
      cmd.find('#troisquartvalue').css({'font-size':'0.5em','right':'17px','top':'24px'});
      cmd.find('#maxvalue').css({'font-size':'0.5em','right':'15px','top':'43px'});
      cmd.find('#state_gauge').css({'font-size':'17px','top':'54px'});
      cmd.find('#unite_gauge').css({'font-size':'6px','top':'44px'});
    }
</script>
<style>
@font-face {
    font-family: "Digital7";
  	src: url("data/customTemplates/dashboard/cmd.info.numeric.gaugeIMG/font/digital-7.ttf") format("truetype");
}
#state_gauge {
    font-family:"Digital7"; 
    font-size:26px;
  	position:absolute;
  	top:84px;
    width:100%;
  	text-align:center;
    font-weight:normal;
  }
#unite_gauge {
    font-size:10px;
    width:100%;
  	top:67px;
    position:absolute;
  	text-align:center;
    font-weight:normal;
  }
#minvalue {
    font-size:0.75em;
  	font-weight:bold;
  	position:absolute;
  	top:65px;
  	left:22px;
  }
#quartvalue {
    font-size:0.75em;
  	font-weight:bold;
  	position:absolute;
  	top:35px;
  	left:26px;
  }  
#midvalue {
  	display:block;
 	width:100%;
    font-size:0.75em;
  	font-weight:bold;
  	position:absolute;
  	top:18px;
  	text-align:center;
  }
#troisquartvalue {
    font-size:0.75em;
  	font-weight:bold;
  	position:absolute;
  	top:35px;
  	right:26px;
  }
#maxvalue {
    font-size:0.75em;
  	font-weight:bold;
  	position:absolute;
  	top:65px;
  	right:22px;
  }
#gaugeIMGdisplay {
  	position:relative;
  	color:#F0F0F0;
}
#indicator {
    position:absolute;
    width:75px;
    height:75px;
  	left:22px;
    top:20px;
  	transition:transform .8s;
    -webkit-transform:rotate(0deg);
}
</style>
</div>

Salut @olive,
On voit que tu as suivi le tutoriel avancé. :wink:
C’est la première fois que je vois cette option utilisée
Bon dimanche

je l’avait trouvé bien avant d’avoir trouvé le tuto

Pas moi.
La roue crantée il fallait la voir.
Faut dire que je n’avais pas cherché non plus.

Salut,
Sois certain de la syntaxe
Exemple :10_18:bleue,18_25:orange,25_40:rouge

J’ai cherché un bout de temps car je mettais des - au lieu de _

C’est pour ça que j’ai demandé la copie écran !

Bonjour
Merci pour votre temps.
Le code est a priori le même, je vérifierai ce soir, car sur le téléphone c’est pas évident. Mais j’avais copié celui de cette page le jour où j’ai mis ma première demande.
Voici une copie d’écran. J’ai bien mis des _ et pas des -
Screenshot_20200519-143443__01

bon, j’ai copié collé le code cité plus haut, c’est le même, sauf que il y a var à la place de let.
Cela ne change rien , change n’est toujours pas pris en charge…
par contre, si j’arrondi ma valeur à 0 chiffre après la virgule, cela fonctionne…

bon j’ai trouvé le problème, je pense que c’est un problème de type de variables et du coup de comparaison :
il faut changer dans le code les lignes
var palierMin = palier[0];
var palierMax = palier[1];
par:

  var palierMin = parseFloat(palier[0]);
  var palierMax = parseFloat(palier[1]);

et là, ca roule.
Je ne sais pas si ça marchait chez vous comme ça, c’est étrange.
palier[] est un string, et on compare ensuite avec un float.
Dans le cas où palier[] est un entier, il doit y avoir un transtypage transparent, ce qui fait que ca marche sur des entiers, mais le transtypage ne doit plus fonctionner avec des floats.
Je maitrise plus le C++, mais s’il y a un pro de javascript, les explications sont les bienvenues!

1 J'aime

Merci et bravo :pray:t2: SALVIAF pour cette gauge.
Elle correspond précisément à ce que je recherchais. Manifestement, je ne suis pas le seul.
Je vois que les autres Widget sont également de haut vol.
Une référence pour moi. :clap:t2:

Bonsoir,

J’ai peut etre loupé un truc mais l’affichage n’est pas correct sur mon test
image

j’ai mis cela en option

image

ai je loupé un truc?

Salut,

Non tu n’as rien loupé ça vient de tests que j’ai fait dans le cadre du développement du plugin qui va gérer l’installation, la mise à jour et le paramétrage de mes widgets.

Je viens de corriger, tu peux supprimer les fichiers que tu as copiés et télécharger à nouveau le *.zip pour réinstaller le widget corrigé.

1 J'aime

Merci beaucoup @Salvialf pour tout ce travail et ce suivi, je viens de l’installer et c’est du plus bel effet sans compter que tes explications me permettent de progresser dans ma comprehension !

1 J'aime

Bonjour

Merci de ton retour,

Effectivement avec le nouveau Zip ca fonctionne beaucoup mieux.

merci a toi de ton aide et pour tes beaux widgets :slight_smile:

Mince aprés 80 posts personne n’a rien vu …

rose

image

1 J'aime

Je suis daltonien donc je pouvais pas voir :nerd_face:

:shushing_face:

y’a la même sur SliderButton:

J’ai pas tout relu le post et vérifier si il y a eu des corrections …
je donne l’exemple par des images ça parle très vite …
Capture d’écran du 2020-06-06 12-43-30 Capture d’écran du 2020-06-06 12-42-26 Capture d’écran du 2020-06-06 12-40-59

Bonjour,

Pourrions-nous envisager de voir ce widget (…et d’autre) en version mobile ?

Merci.

Ludis

Salut @ludis

Oui je bosse sur mes widgets en ce moment et il est bien prévu de fournir une version mobile au maximum d’entre eux

2 J'aimes