Affichage de la tendance des températures

Un article vaut mieux qu’une longue réponse dans un commentaire, alors je vais détailler ici comment j’affiche la tendance de mes températures. Inspiré d’un code de Widget existant, je l’ai modifié pour y afficher des images de flèches.

Pour cet article, il vous faudra installer le plugin Widget.

Commande pour afficher la tendance :

Je passe par un virtuel avec une info virtuelle de type numérique  :

#[Chambre Elea][Température Éléa][Température]#-lastBetween(#[Chambre Elea][Température Éléa][Température]#, today, -30 min)

Ce qui calcul donc la différence entre la température actuelle et celle d’il y a 30 minutes.

 Afficher les flèches bleues et orange :

Pour cela nous allons dans le plugin Widget et on crée un nouveau widget que j’ai nommé « temperature-difference » avec le code ci-dessous :

A savoir que ce code à été modifié depuis le widget « dashboard.info.numeric.thermometreIMG » crée par Slobberbone

J’ai donc modifié les images pour avoir les flèches que je souhaitais.

<—————– code à copier coller —————–>

<div style="min-width:40px;min-height:20px;" 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="tempdifDivIMG#id#" class="tempdif_div_img">
        <span class="tempdif_img" id="tempdifIMG#id#"></span>
    	<span class="tempdif_state" id="tempdifState#id#">#state#</span>
      	<span class="tempdif_unite" id="tempdifUnite#id#">#unite#</span>
      	<!-- A activer si vous voulez avoir les statistiques -->
  	</div>
  </div>
   <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;
            if (!isNaN(parseFloat("#heightImage#"))) {
              imgHeight = "#heightImage#";
            } else {
              imgHeight = "25";
            }
            if (!isNaN(parseFloat("#widthImage#"))) {
              imgWidth = "#widthImage#";
            } else {
              imgWidth = "25";
            }
        
            if ("#state#" > 0) {
            	$("#tempdifIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='plugins/widget/core/template/dashboard/cmd.info.numeric.temperature-difference/Tempplus.png' class='tempdif_img' id='tempdif#id#'/>");
              
            }
            else if ("#state#" <0) {
                $("#tempdifIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='plugins/widget/core/template/dashboard/cmd.info.numeric.temperature-difference/Tempmoins.png' class='tempdif_img' id='tempdif#id#'/>");
            }
          	else {
            	$("#tempdifIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='plugins/widget/core/template/dashboard/cmd.info.numeric.temperature-difference/Tempegale.png' class='tempdif_img' id='tempdif#id#'/>");
        	}
          
          if ("#position#" == "right") {
            $("#tempdifDivIMG#id#.tempdif_div_img").css("float","right"); 
             $("#tempdifIMG#id#.tempdif_img").css("margin-right","15px");
          } else {
    	  	$("#tempdifDivIMG#id#.tempdif_div_img").css("float","left");
            $("#tempdifIMG#id#.tempdif_img").css("margin-left","15px");
          }
          if (typeof "#fontsizeState#" != "undefined" && "#fontsizeState#" != "2em") {
            $("#tempdifState#id#.tempdif_state").css("height","#fontsizeState#"); 
          }
          if (typeof "#fontsizeUnite#" != "undefined" && "#fontsizeUnite#" != "1em") {
            $("tempdifUnite#id#.tempdif_unite").css("height","#fontsizeUnite#"); 
          }
          if (typeof "#displayState#" != "undefined" && "#displayState#" != "block") {
            $("#tempdifState#id#.tempdif_state").css("display","#displayState#"); 
          }
           if (typeof "#oneLine#" != "undefined" && "#oneLine#" == "on") {
             if ("#position#" == "right") {
                //$("#tempdifState#id#.tempdif_state").css("margin-left","20px"); 
             	$("#tempdifUnite#id#.tempdif_unite").css("display","block");
             	$("#tempdifUnite#id#.tempdif_unite").css("margin-top","-25px");
             	$("#tempdifUnite#id#.tempdif_unite").css("margin-right","85px");
             } else {
                $("#tempdifState#id#.tempdif_state").css("margin-right","20px"); 
             	$("#tempdifUnite#id#.tempdif_unite").css("display","block");
             	$("#tempdifUnite#id#.tempdif_unite").css("margin-top","-25px");
             	$("#tempdifUnite#id#.tempdif_unite").css("margin-left","85px");
             }
           }
    </script>
</div>
<style>
 
span.tempdif_img {
  	height: 40px;
  }

span.tempdif_div_img {
	position:relative;
  	height: 40px;
  	width: 40px;
  }
   
span.tempdif_state {
  	margin-left: 5px;
  	font-weight: bold;
  	font-size: 0.8em;
  	margin-top: 0px;
  }

span.tempdif_unite {
  	font-size: 1em;
    font-weight: bold;
  	margin-top: 5px;
  	top: 22px;
  }

</style>

<—————– fin du code à copier coller —————–>

Il faut y ajouter les fichiers Tempegale.png, Tempmoins.png et Tempplus.png en cliquant sur le bouton « Fichiers » en haut de la configuration du Widget.

https://www.monjeedom.fr/wp-content/uploads/2018/12/Tempegale.png
https://www.monjeedom.fr/wp-content/uploads/2018/12/Tempplus.png
https://www.monjeedom.fr/wp-content/uploads/2018/12/Tempmoins.png

Il reste plus qu’à appliqué ce Widget « temperature-difference » sur les commandes où vous faites le calcul de la différence de température.

N’hésitez pas à commenter

Auteur de l’article : Vivien

2 commentaires sur “Affichage de la tendance des températures

    Stéf

    (4 janvier 2019 - 12 h 50 min)

    Bonjour et bonne année,

    Super merci !

      Vivien

      (4 janvier 2019 - 12 h 58 min)

      Bonjour,

      Merci et bonne année également.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.