Bonsoir,
voici ce que j’ai pu me faire comme widget.
C’est pas parfait (ni terminé), mais il me plaît.
Il a été fait pour un plancher chauffant (entre 21 et 24°c), mais c’est facilement adaptable
a autre chose. La barre de température est un peu transparente, elle laisse apparaitre
le fond. Elle est bleu en dessous de 21°c, puis passe au vert, puis après 24°c passe au rouge.
A vous de préciser votre source de donnée (a la place de « value »).
Je n’ai pas encore trouvé de solution pour y intégrer du texte, si quelqu’un y arrive je suis preneur.
@fgtoul, je n’ai pas encore fait de scénario ou autre, je voulais simplement arriver a faire un widget facile a adapter a plusieurs situations (anémomètre, plancher chauffant…)
<style>
.thermometre {
width: 278px;
height: 25px;
-webkit-appearance: none;
border: 1px solid #444444;
border-radius: 10px;
background-image: linear-gradient( /* calibré pour plancher chauffant de 21 a 24°c */
135deg, /* meter de min 10 a max 28°c */
mediumslateblue 52%,
lime 55%,
lime 77%,
red 80%
);
opacity:0.9;
filter:alpha(opacity=90);
background-size: 100% 100%;
-webkit-box-shadow: inset 0 0 4px 0px #444444;
}
.thermometre:-moz-meter-optimum::-moz-meter-bar {
background:blue;
opacity:0.7;
filter:alpha(opacity=70);
border-radius: 10px;
-webkit-box-shadow: inset 0 0 10px 3px #444444;
border: 0px solid #444444;
}
.thermometre:-moz-meter-sub-optimum::-moz-meter-bar {
background:lime;
opacity:0.75;
filter:alpha(opacity=75);
border-radius: 10px;
-webkit-box-shadow: inset 0 0 10px 3px #444444;
border: 0px solid #444444;
}
.thermometre:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background:red;
opacity:0.85;
filter:alpha(opacity=85);
border-radius: 10px;
-webkit-box-shadow: inset 0 0 10px 3px #444444;
border: 0px solid #444444;
}
</style>
</head>
<body>
<meter class="thermometre" low="21" high="24" min="10" max="28" value="18" optimum="2"></meter>
</body>
</html>