Widget Température compatible V4?

Tags: #<Tag:0x00007f2834e6eea8>

Bonjour

Je chercher depuis plusieurs jours des erreurs sur mon jeedom (cf ce post Erreur JavaScript sur Dashboard)
et est-ce que ce code de widget est compatible V4 ?
Si non est- ce compliqué pour le rendre compatible ?
Si oui est-ce qu’il y a ce type de widget en V4 ? Celui de JAG je ne trouve pas le visuel top (désolé JAG c’est bien le seul que je n’aime pas trop :))

<div style="min-width:120px;min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
    <center><span class="cmdName" style="font-weight: bold;font-size : 0.8em;width: 65px;height: 17px;overflow: hidden;position: relative;#hideCmdName#;" title="#name#">#name_display#</span></center>
    <div style="text-align:center;">
  	<div id="thermometreDivIMG#id#" class="thermometre_div_img">
        <span class="thermometre_img" id="thermometreIMG#id#"></span>
        <span class="thermometre_state" id="thermometreState#id#">#state#</span>
      	<span class="thermometre_unite" id="thermometreUnite#id#">#unite#</span>
    </div>
  	<div>
    	
      	<!-- A activer si vous voulez avoir les statistiques -->
       	<div>
          <span style="line-height:10px;font-size: 0.7em;font-weight: bold;display: inline-block;text-align: justify;#displayHistory#">
            <span title="Min" class="tooltips left">Min : </span><span style="float:right;">#minHistoryValue# #unite#</span><br/>
            <span title="Moyenne" class="tooltips">Moy: </span><span style="float:right;">#averageHistoryValue# #unite#</span><br/>
            <span title="Max" class="tooltips">Max: </span><span style="float:right;">#maxHistoryValue# #unite#</span><br/> <i class="#tendance#"></i>
          </span>
      	</div>
  	</div>
  </div>
  
  <!-- Début du script -->
   <script>
     
     /* Attributs list :
     		- position : 	position of the icon you want : left or right, by default : left
			- heightImage : 	height in pixel of image to show default is 90
            - widthImage : 	width in pixel of image to show default is 90
            - fontsizeState : state font size in px or em, default : 2em
            - fontsizeUnite : unite font size in px or em, default : 1em
			- displayState : display type allow to hide the state with none by example, by default : block
            - oneLine : display State and Unite on the same line
     */
        	var imgHeight;
     		var imgWidth;
			
			<!-- La taille réelle de votre image n'est pas importante mais doit respecter un ratio de 2.4 entre la hauteur et la largeur -->
			
            if (!isNaN(parseFloat("#heightImage#"))) {
              imgHeight = "#heightImage#";
            } else {
              imgHeight = "72"; <!-- Peut importe la taille de votre image originale, elle sera ramenée à la taille de 72Px de hauteur -->
            }
            if (!isNaN(parseFloat("#widthImage#"))) {
              imgWidth = "#widthImage#";
            } else {
              imgWidth = "30"; <!-- Peut importe la taille de votre image originale, elle sera ramenée à la taille de 30Px de Largeur -->
            }
        
			/* C'est ici que vous définissez les plages de température qui vont permettre d'afficher une image différente à chaque fois
			Vous pouvez les modifier suivant vos besoins. Pensez également à modifier le chemin du répertoire des images.
			*/
		
            if ("#state#" <= 0) {
            	$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='plugins/widget/core/template/dashboard/cmd.info.numeric.T° Widget/Thermo10.png' class='thermometre_img' id='thermometre#id#'/>");
            }
            else if ("#state#" > 0 && "#state#" <= 6) {
                $("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='plugins/widget/core/template/dashboard/cmd.info.numeric.T° Widget/Thermo20.png' class='thermometre_img' id='thermometre#id#'/>");
            }
			else if ("#state#" > 6 && "#state#" <= 12) {
                $("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='plugins/widget/core/template/dashboard/cmd.info.numeric.T° Widget/Thermo30.png' class='thermometre_img' id='thermometre#id#'/>");
            }
			else if ("#state#" > 12 && "#state#" <= 18) {
                $("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='plugins/widget/core/template/dashboard/cmd.info.numeric.T° Widget/Thermo40.png' class='thermometre_img' id='thermometre#id#'/>");
            }
			else if ("#state#" > 18 && "#state#" <= 25) {
                $("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='plugins/widget/core/template/dashboard/cmd.info.numeric.T° Widget/Thermo50.png' class='thermometre_img' id='thermometre#id#'/>");
            }
			else if ("#state#" > 25 && "#state#" <= 30) {
                $("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='plugins/widget/core/template/dashboard/cmd.info.numeric.T° Widget/Thermo80.png' class='thermometre_img' id='thermometre#id#'/>");
            }
			else if ("#state#" > 30 && "#state#" <= 40) {
                $("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='plugins/widget/core/template/dashboard/cmd.info.numeric.T° Widget/Thermo90.png' class='thermometre_img' id='thermometre#id#'/>");
            }
          	else {
            	$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='plugins/widget/core/template/dashboard/cmd.info.numeric.T° Widget/Thermo100.png' class='thermometre_img' id='thermometre#id#'/>");
        	}
          
		  
		  /* Cette partie du script ne doit pas être modifiée, 
		     sauf si vous êtes un/une spécialiste
		     Le style est géré plus bas dans le code
		  */
          if ("#position#" == "right") {
            $("#thermometreDivIMG#id#.thermometre_div_img").css("float","right"); 
             $("#thermometreIMG#id#.thermometre_img").css("margin-right","15px");
          } else {
    	  	$("#thermometreDivIMG#id#.thermometre_div_img").css("float","left");
            $("#thermometreIMG#id#.thermometre_img").css("margin-left","15px");
          }
          if (typeof "#fontsizeState#" != "undefined" && "#fontsizeState#" != "2em") {
            $("#thermometreState#id#.thermometre_state").css("height","#fontsizeState#"); 
          }
          if (typeof "#fontsizeUnite#" != "undefined" && "#fontsizeUnite#" != "1em") {
            $("thermometreUnite#id#.thermometre_unite").css("height","#fontsizeUnite#"); 
          }
          if (typeof "#displayState#" != "undefined" && "#displayState#" != "block") {
            $("#thermometreState#id#.thermometre_state").css("display","#displayState#"); 
          }
           if (typeof "#oneLine#" != "undefined" && "#oneLine#" == "on") {
             if ("#position#" == "right") {
                //$("#thermometreState#id#.thermometre_state").css("margin-left","20px"); 
             	$("#thermometreUnite#id#.thermometre_unite").css("display","block");
             	$("#thermometreUnite#id#.thermometre_unite").css("margin-top","-25px");
             	$("#thermometreUnite#id#.thermometre_unite").css("margin-right","85px");
             } else {
                $("#thermometreState#id#.thermometre_state").css("margin-right","20px"); 
             	$("#thermometreUnite#id#.thermometre_unite").css("display","block");
             	$("#thermometreUnite#id#.thermometre_unite").css("margin-top","-25px");
             	$("#thermometreUnite#id#.thermometre_unite").css("margin-left","85px");
             }
           }
    </script>
	 <!-- Fin du script -->
	
</div>

  <!-- Le code suivant gère le style et l'affichage des données, vous pouvez le modifier et faire des tests-->
<style>
 
span.thermometre_img {
  	height: 90px;
  float: left;
  }

   <!-- Gestion de l'affichage de l'image du thermomètre -->
span.thermometre_div_img {
    margin-left: 5px;
	position:relative;
    margin-top: 10px;
  	height: 64px;
  	width: 62px;
	float: left;
    display: block;
  }
  
 <!-- Gestion de l'affichage de la température -->  
span.thermometre_state {
  	font-weight: bold;
  	font-size: 2em;
  	margin-top: 10px;
    margin-left: 5px;
    float: left;
    display: block;
  }

   <!-- Gestion de l'affichage de l'unité "C°" (ou autre chose) -->
span.thermometre_unite {
  	font-size: 0.7em;
    font-weight: bold;
  	margin-top: 14px;
    margin-left: 2px;
  	top: 30px;
    float: right;
    display: block;
  }

</style>

Hello

Base toi au moins sur le code que j’ai fait cela devrait t aider car il est compatible V4

Je vais tenter JAG encore une fois mais c’est vraiment du chinois pour moi car j’avais regarder pour changer le visuel et je n’avais pas réussi :cry:
Mon visuel actuel ne me plait pas trop non plus mais je n’arrive pas à trouver mon bonheur sur les températures.
Difficile peut être mais c’est ce que l’on regarde le plus tous les jours.
Ma lecture de code et mes connaissances date du lycée donc du siècle dernier même si cela n’a pas changé c’est pas comme le vélo :stuck_out_tongue_winking_eye:
Comme j’adore le reste de ta production @JAG je garderais ton visuel si je n’y arrive pas

D’ailleurs suite à ma migration V3 vers V4 il vaut mieux supprimer mes widget compatible V4 installé depuis la V3 et faire les manip de copier/coller les fichiers les dossiers via Jeexplorer ? Ou laisser comme ça ce qui marche ?

Hello @JAG

Ma migration sous Jeedom v4 étant achevée, je me penche sur les petits détails. Le widget thermomètre a une police un peu trop juste, pas assez lisible sur la tablette. Cela donne ça :

Sais-tu me dire à quel endroit du code modifier la taille de la police ?

Si cela se trouve, le code que j’utilise n’est pas le dernier et ce n’est pas le bon. N’hésite pas à me le dire.

J’utilise celui-ci :

Merci.

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="tile" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <!--
    Jeedom Compatibility: v4
    Version: Dashboard/Mobile
    Type: Info
    SubType: Numeric
    Name: cmd.info.numeric.thermometer.html
    Comment: A thermometer image with a current value (+stats).
    Parameters: 
    - largeurDashboardPx - Resize the dashboard widget image to the real width - default 20px - [range 20-29px]
    - largeurMobilePx - Resize the mobile widget image to the real width - default 20px - [range 20-29px]
    Date: 2020-05-01
    Source: https://github.com/Heliospeed/jeedom_widget_v4/
    Remarks: The template and the images have been modified and come from these repositories:
    Template : https://github.com/jeedom/core/blob/V4-stable/core/template/dashboard/cmd.info.numeric.tile.html
    Images : https://github.com/ajja17/thermometreIMG/tree/master/cmd.info.numeric.thermometreIMG2
-->
  <div class="title #hide_name#">
    <div  class="cmdName">#name_display#</div>
  </div>
  <div class="content-sm">
    <div class="pull-left">
    	<span id="thermo#id#"></span>
    </div>
    <div class="pull-right">
      <div>
        <span class="pull-right unitValue">#unite#</span>
        <span class="pull-right state currentValue"></span>
      </div>
      <div class="statsPart1 #hide_history#">
        <div class="stats"><span title='Min' class='tooltips'>Min : #minHistoryValue#</span></div>
        <div class="stats"><span title='Max' class='tooltips'>Max : #maxHistoryValue#</span></div>
        <div class="stats"><span title='Moyenne' class='tooltips'>Moy : #averageHistoryValue#</span></div>
      </div>
    </div>
  </div>
  <div class="#hide_history#">
      <div class="stats"><span title='Tendance' class='tooltips'>Tendance : <i class="#tendance#"></i></span></div>
  </div>

  <script>
    jeedom.cmd.update['#id#'] = function(_options){
      
      var cmd = $('.cmd[data-cmd_id=#id#]');
      var imgNumber = '';
      var temperature = parseFloat(_options.display_value).toFixed(1);
      var hideHistory 	= ('#hide_history#'!='#'+'hide_history#') ? "#hide_history#" : "off";
      var version = ('#version#'!='#'+'version#') ? "#version#" : "";
      var largeurPx = "20";
      if (version === 'dashboard'){
        largeurPx = ('#largeurDashboardPx#'!='#'+'largeurDashboardPx#') ? "#largeurDashboardPx#" : "20";
      }else{
        largeurPx = ('#largeurMobilePx#'!='#'+'largeurMobilePx#') ? "#largeurMobilePx#" : "20";
      }
      
      // borne Min et max largeur
      if (largeurPx<20){
        largeurPx = 20;
      }else if (largeurPx>29){
        largeurPx = 29;
      }
      
      var largeurWidget = 65 + parseInt(largeurPx);
      largeurPx = largeurPx + 'px';
      
      var hasCommandIcon = cmd.find('.title div.cmdName i').is('i');
      var hasCommandName = cmd.find('.title div.cmdName').text().length > 0;
      var pos =10;
      if (hasCommandName || hasCommandIcon){
        cmd.find('.title').css('cssText', 'padding-bottom: ' + pos + 'px !important;');
        pos=0;
      }
      
      if (temperature <=0){
        imgNumber = '00';
      }else if (temperature > 0 && temperature <= 5) {
        imgNumber = '01';
      }else if (temperature > 5 && temperature <= 10) {
        imgNumber = '02';
      }else if (temperature > 10 && temperature <= 13) {
        imgNumber = '03';
      }else if (temperature > 13 && temperature <= 16) {
        imgNumber = '04';
      }else if (temperature > 16 && temperature <= 18) {
        imgNumber = '05';
      }else if (temperature > 18 && temperature <= 20) {
        imgNumber = '06';
      }else if (temperature > 20 && temperature <= 22) {
        imgNumber = '07';
      }else if (temperature > 22 && temperature <= 24) {
        imgNumber = '08';
      }else if (temperature > 24 && temperature <= 26) {
        imgNumber = '09';
      }else if (temperature > 26 && temperature <= 28) {
        imgNumber = '10';
      }else if (temperature > 28 && temperature <= 34) {
        imgNumber = '11';
      }else{
        imgNumber = '12';
      }
      
      cmd.find('#thermo#id#').empty().append('<img class="thermoImg" src="data/img/thermometer/thermometer' + imgNumber + '.png"></img>');
      cmd.find('.thermoImg').css('cssText', 'width:' + largeurPx + ' !important;');
      
      var imgHeight = document.querySelector(".thermoImg").clientHeight;
      
      var imgMaxHeight = 93;
      var imgMinHeight = 70;
      
      cmd.find('div.content-sm').css('cssText','height: ' + imgMinHeight +'px !important;min-height: ' + imgMinHeight +'px !important; max-height: ' + imgMaxHeight + 'px !important;')
   	  if (imgHeight>imgMinHeight){
        pos = (imgHeight - imgMinHeight)/2;
      }
      
      cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
      cmd.find('.state').empty().append(temperature);
		
      var positionTop = 0;
      if (hideHistory == 'hidden'){
        var positionTop = 25 + pos;
      }
      else{
        cmd.find('div.statsPart1').css('cssText', 'padding-top: ' + (20 + pos) + 'px !important;text-align: left !important');
        var positionTop = pos;
      }
      
      cmd.find('.stats').css('line-height', '10px');
      
      var cssCurrentValue = 'position: relative !important;top: ' + positionTop + 'px !important;';
      cmd.find('.unitValue').css('cssText', cssCurrentValue );
      cmd.find('.state').css('cssText', cssCurrentValue + 'font-size: 15px !important;');
      cmd.find('div span.tooltips').css('cssText', 'font-size: 10px !important;font-weight: normal !important;');
      cmd.css("padding-bottom", "15px");
      cmd.css("width", largeurWidget + "px");
    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
  </script>
</div>

Regarde si à cette positon


      cmd.find('.stats').css('line-height', '10px');

Je teste ça ce soir, et je te dirai => thanks !

@JAG,

J"ai testé jusque 16, 20 et même 24. Pas de changement.

@+

PS : je fais :

  • je modifie & sauvegarde la police.
  • je rafraichis le design

[EDIT] J’ai trouvé, c’est là :

cmd.find(’.state’).css(‹ cssText ›, cssCurrentValue + ‹ font-size: 15px !important; ›);

Il reste à trouver comment faire remonter la température à droite du thermomètre :

Bonsoir @JAG,
J’utilise le widget thermomètre mais quand je l’importe en « commande » dans mon desgin voici comment il apparaît…
image
Il y a un double problème de température en bas et d’image tronquée… Je n’arrive pas à comprendre d’où vient le problème …
Il marche très bien dans le dashboard :
image
Merci

Hello
Tu as bien le dernier code ?

Par contre sur ton design on dirait que tu l as mis dans un tableau ? Si oui ton tableau est peut être un peu petit car la température ne doit pas être dessous

Par contre il serait bien d ouvrir un autre sujet car là on mélange tout

1 J'aime

Bonjour @Jag,

Autant pour moi, je pensais que c’était à propos car pbl aussi d’affichage sur un thermo …
J’ouvre un autre sujet car oui c’est à jour …
Merci

pas de souci mais un message qui date de 6 mois c’est pas trop lié je pense

fait moi le retour quand même, après on demandera de clore le sujet