Bonjour à tous,
J’ai reçu mes nouveaux mijia température (avec écran) géré par BLEA.
J’en suis super content.
Je suis en train de mettre en place mon affichage sur le dashboard avec l’outil Widget.
J’aimerais obtenir quelque chose comme ça :
Mais malheureusement, je suis bloqué là !
Je n’arrive pas à mettre l’affichage de la température (20.56°C ici) en gros et gras.
Le truc c’est que je ne suis débutant en CSS et je n’arrive pas à comprendre où est l’erreur…
Voici le code en entier :
<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>
<!-- 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#" <= 15) {
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermo20.png' class='thermometre_img' id='thermometre#id#'/>");
}
else if ("#state#" > 15 && "#state#" <= 18) {
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermo70.png' class='thermometre_img' id='thermometre#id#'/>");
}
else if ("#state#" > 18 && "#state#" <= 20) {
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/thermo80.png' class='thermometre_img' id='thermometre#id#'/>");
}
else if ("#state#" >= 20) {
$("#thermometreIMG#id#").append("<img style='height:" + imgHeight + "px;width:" + imgWidth + "px;' src='data/img/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: right;
display: block;
}
<!-- Gestion de l'affichage de la température -->
span.thermometre_state {
font-weight: bold;
font-size: 10em;
margin-top: 10px;
margin-left: 5px;
float: right;
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>
Merci d’avance pour votre aide 
.
