Tout nouveau sur Jeedom, je souhaite partager avec vous un petit widget pour l'affichage d'une image concernant la température. C'est également valable pour l'affichage de l'humidité ou toute autre info numérique, il suffira d'adapter les images et le code. Je suppose que certains post proposent déjà le même type de code, je ne voudrais pas passer pour l'inventeur de la roue, je vous propose seulement un code corrigé et testé, prêt à l'emploi avec les images qui vont avec, et que vous pourrez mettre en oeuvre en moins de 5 minutes.
Exemple de résultat :
Comme vous le voyez, les thermomètres affichés sont différents suivant la température, j'ai fixé arbitrairement des plages de températures, que vous pourrez modifier suivant vos besoins. Je joins également les images utilisées et modifiées dans Photoshop pour rendre les fonds transparents, les images au format PNG sont prêtes à l'emploi et doivent être transférées dans un répertoire, il faudra alors adapter le code avec le chemin de votre répertoire d'images.
Pour obtenir ce résultat, installez le plugin "Widget" (si ce n'est déjà fait) et créez en un nouveau, n'utilisez surtout pas le "Mode création facile", mais cliquez sur le bouton "Ajouter un widget", donnez lui un nom, choisissez le type "Info" et le sous-type "Numérique". Une fois créé, vous n'aurez qu'a copier (et adapter) le code (voir plus bas).
Je n'ai pas la paternité du code d'origine, mais simplement adapté et corrigé à partir de celui de @claude69 qui avait des soucis d'affichage et des problèmes de balises dans son code. L'original est dans ce lien : http://urlz.fr/6F8I
Le code est commenté afin de faciliter les modifs.
Voici le code final :
Code : Tout sélectionner
<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.thermometreIMG/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.thermometreIMG/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.thermometreIMG/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.thermometreIMG/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.thermometreIMG/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.thermometreIMG/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.thermometreIMG/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.thermometreIMG/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>
Dans le fichier joint se trouvent les images de chaque thermomètre utilisé dans le code Mais aussi l'image vectorielle d'origine créée dans Adobe Illustrator (peut être traitée dans Photoshop). l'image d'origine est libre de droit et vient du site https://fr.vecteezy.com/art-vectoriel/1 ... ermom-tres où vous trouverez de nombreuses autres images de thermomètres.
J'espère que vous pourrez créer vos propres widgets et serait content de voir vos propres adaptations
Amicalement
Robert
