Widget Html et Javascript

Bonjour @Aspro95,
voici le widget en 1 bloc, avec la goutte d’eau

var celsius = ((datasources["STATUS"]["response"]["enoA8"])*1).toFixed(1);
var humidity = ((datasources["STATUS"]["response"]["enoA7"])*1).toFixed(1);
return `
<style>
.temp_ext {
   	/* On réinitialise l'apparence par défaut */
  	appearance: none;
  	-webkit-appearance: none;
  	-moz-appearance: meterbar;
	background-image: linear-gradient(
    90deg, 
    #0000ff,		/* 0°C */
    #00ff00 25%,	/* 20°C */
    #ff0000 75%		/* 30°C */
  	);
  	background-size: 100% 100%;
	width: 90px;
	height: 18px;
	border: 1px solid #ccc;
	border-radius: 3px;
}
.temp_ext::-moz-meter-bar  {
    background: transparent;
	border-style: solid;
	border-color: black;
	border-width: 0px 3px 0px 0px;
}
</style>

<table width='100%'>
  <tr>
	<td align=right rowspan=2 style='padding-top: 5px;'><span style='margin-right:-8px;' class="glyphicons glyphicons-temperature x2"></span></td>
	<td align=left valign=middle width='50%'><span style='color: #E0CDA9'> Cellier (EnoA8)</span></td>
	<td align=right valign=middle width='35%' style='padding:2px 2px 0 0;'><span style='color: #FFFFFF;font-size: 28px;'>${celsius}<sup>°C</sup></span></td>
  </tr>
  <tr>
	<td align=left valign=middle><span style='padding-right: 2px; font-size:12px;'>5</span><meter class='temp_ext' min="5" max="30" value="${celsius}"></meter><span style='padding-left: 2px; font-size:12px;'>30</span></td>
    <td align=right valign=top width='10%' style='padding:0 4px 0 0;'><span class="glyphicons glyphicons-tint"></span><span style='color: #FFFFFF;font-size: large;'>${humidity}<sup> %HR</sup></span></td>
  </tr>

</table>
`;

image

bonne journée

3 « J'aime »

Bonsoir @fgtoul,

Merci beaucoup, ça marche nickel !
J’avais essayé en jouant sur tous les paramètres du tableau (sans trop savoir le pourquoi du comment) mais le résultat obtenu n’était pas du tout celui attendu… Je commençais à me décourager.
Merci encore :clap: :+1:
Bonne soirée,
Cdlt.

1 « J'aime »