Widget température HTML

Aspro95 · Octobre 30, 2018, 8:40

Bonsoir,
Merci à vous de partager le code ainsi que les améliorations apportées. Le widget Chaudière est super intéressant mais… je n’en suis pas encore là
Il faut que je peaufine le widget température qui me donne bien du mal (la valeur de température affichée au 1/10 : comme sur vos exemples et les valeurs min, moy, max à supprimer)
Widget%20temp%C3%A9rature

Cordialement

Agezeram · Octobre 31, 2018, 2:58

Bonjour,

Je te propose ce code pour afficher au 10eme :

var celsius = ((datasources["V4"]["response"]["enoA1"])*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%,	/* 10°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'> Intérieur (EnOcean)</span></td>
	<td align=right valign=middle colspan=3 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;'>0</span><meter class='temp_ext' min="0" max="40" value="${celsius}"></meter><span style='padding-left: 2px; font-size:12px;'>40</span></td>
<td align=center valign=top><div style='font-size:12px;line-height: 1.1;'>min<br>0</div></td>
	<td align=center valign=top><div style='font-size:12px;line-height: 1.1;'>moy<br>8.0</div></td>
	<td align=center valign=top><div style='font-size:12px;line-height: 1.1;'>max<br>50</div></td>
  </tr>
</table>
`;

Pour les valeurs min max … soit tu supprimes le texte dans le code, soit tu manipules le tableau tr / td , sur le web tu trouveras beaucoup d’infos sur les tableaux en html .

@+

Aspro95 · Octobre 31, 2018, 9:53

Bonsoir @Agezeram ,
Merci infiniment, j’ai appliqué les modifs et ça marche super !
Pour les valeurs superflues indiquées en bas à droite, j’ai supprimé les lignes dans le code
Widget%20temp%C3%A9ratures_HTML
J’en ai profité pour modifier aussi les minis/maxis des afficheurs linéaires.
Je suis super
Bien cordialement

Docben62 · Novembre 1, 2018, 5:58

Je vois que mon WIDGET de départ sollicite des améliorations merci !!
Capture%20d%E2%80%99%C3%A9cran%20(11)
de mon côté , j’en suis arrivé là !!

Cordialement

micht · Novembre 1, 2018, 3:12

Tres bien; pouvez vous mettre le fichier java en ligne, de celui ci, merci, MI. Avec seulement les deux temperature et le bruleur.

Aspro95 · Novembre 1, 2018, 3:18

Bonjour,
Suis intéressé également par le code du widget de @Docben62 concernant la chaudière.
Cordialement.

Docben62 · Novembre 1, 2018, 4:29

Voila !!

var valeur = datasources["V4"]["response"]["analog0"];
var tps_chd = datasources["V4"]["response"]["cpt0"];
var ischd_OFF = datasources["V4"]["response"]["btn0"] == 0;
var btcolor = `color: #${ ischd_OFF ? '111111' : 'ff0000' };`;
var temp_chd = (((valeur * 0.000050354) - 0.25) / 0.028).toFixed(1);
let blue = "#0000ff", green = "#00ff00", red = "#ff0000";
var cssColor = "hsl(120, 100%, 50%)";

cssColor = "hsl("+ (240 - (temp_chd * 240 / 90)) + ", 100%, 50%)";

return `
<style>
.temp_chd {
   		/* On réinitialise l'apparence par défaut */
  	appearance: none;
  	-webkit-appearance: none;
  	-moz-appearance: meterbar;
	background-image: linear-gradient(
    90deg, 
    #0000ff 20%,	/* 18°C */
    #00ff00 40%,	/* 36°C */
    #ff0000 90%		/* 81°C */
  	);
  	background-size: 100% 100%;
	width: 90px;
	height: 18px;
	border: 1px solid #ccc;
	border-radius: 3px;
}
.temp_chd::-moz-meter-bar  {
    background: transparent;
	border-style: solid;
	border-color: black;
	border-width: 0px 3px 0px 0px;
}
.bt_chd {
	width: 26px;
	height: 16px;
	background-color: #cccccc;
	border: 3px outset #ccc;
	border-radius: 5px;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	padding: 2px 0 0 0;
}
</style>

<table width='100%'>
  <tr>
	<td align=right rowspan=2 style='padding-top: 5px;' width='10%'><span style='margin-right:-8px;' class="glyphicons glyphicons-temperature x2"></span></td>
	<td align=left valign=middle width='50%'><span style='color: #E0CDA9'>Température Eau</span></td>
	<td>
		<table width='100%'>
			<tr>
				<td align=right valign=middle width='70%'><div style='height:24px;margin-top:-6px;color: ${cssColor};font-size: 28px;'>${temp_chd}</span></td>
				<td align=left valign=top><div style='color: ${cssColor};'<sup>°C</sup></div></td>
			</tr>
		</table>
	</td>
  </tr>
  <tr>
	<td valign=top>
		<table width='100%'>
			<tr>
				<td align=right valign=middle width=20><span style='padding-right: 2px; font-size:12px;'>0</span></td>
				<td align=center valign=middle width=90><meter class='temp_chd' min="0" max="90" value="${temp_chd}"></meter></td>
				<td align=left valign=middle width=20><span style='padding-left: 2px; font-size:12px;'>90</span></td>
			</tr>
		</table>
	</td>
	<td valign=top>
	</td>
  </tr>
</table>
`

Et le bruleur !!

var analog = datasources["V4"]["response"]["analog0"]; 
var celsius = (((analog * 0.000050354) - 0.25) / 0.028).toFixed(1);
var ischd_OFF = datasources["V4"]["response"]["btn0"] == 0;
var btcolor = `color: #${ ischd_OFF ? 'cccccc' : 'ff0000' };`;
let blue = "#0000ff", green = "#00ff00", red = "#ff0000";
var cssColor = "hsl(120, 100%, 50%)";
var tps_chd = datasources["V4"]["response"]["cpt0"];
var minute = tps_chd % 60;
var heure = (tps_chd - (minute))/60;
cssColor = "hsl("+ (240 - (celsius * 240 / 90)) + ", 100%, 50%)";

return `
<style>
.temp_chd {
   		/* On réinitialise l'apparence par défaut */
  	appearance: none;
  	-webkit-appearance: none;
  	-moz-appearance: meterbar;
	background-image: linear-gradient(
    90deg, 
    #0000ff 20%,	/* 18°C */
    #00ff00 40%,	/* 36°C */
    #ff0000 90%		/* 81°C */
  	);
  	background-size: 100% 100%;
	width: 90px;
	height: 18px;
	border: 1px solid #ccc;
	border-radius: 3px;
}
.temp_chd::-moz-meter-bar  {
    background: transparent;
	border-style: solid;
	border-color: black;
	border-width: 0px 3px 0px 0px;
}
.bt_chd {
	width: 26px;
	height: 16px;
	background-color: #cccccc;
	border: 3px outset #ccc;
	border-radius: 5px;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	padding: 2px 0 0 0;
}
</style>

<table width='100%'>
  <tr>
	<td align=right rowspan=2 style='padding-top: 5px;' width='10%'><span style='${btcolor}; margin-right:-8px;' class="glyphicons glyphicons-fire x2"></span></td>
	<td align=left valign=middle width='50%'><span style='color: #E0CDA9'>Brûleur</span></td>
	<td>
		<table width='100%'>
			<tr>
				<td align=right valign=middle width='75%'><div style='height:24px;margin-top:-6px;color: #ffffff;font-size: 28px;'>${tps_chd}</divn></td>
				<td align=center valign=top><div style='color: #ffffff;'<sup>min</sup></div></td>
			</tr>
		</table>
	</td>
  </tr>
  <tr>
	<td valign=top>
		<table width='100%'>
			<tr>
				<td valign=middle><span style='padding-right: 2px; font-size:12px;'>Durée totale</span></td>
				<td valign=middle><span style='padding-left: 2px; font-size:12px;'>${heure}h${minute}mn</span></td>
			</tr>
		</table>
		</td>
		<td valign=top>
		</td>
  </tr>
  <tr>
	<td colspan=3>
		<div id='scope' style='margin-left:20px;width:180px;height:80px;border: 1px solid;'>
		</div>
	</td>
  </tr>
</table>
`

micht · Novembre 1, 2018, 4:51

Super merci…je viens d’appliquer et je n’ai pas le trait noir qui indique la température, et pourquoi la formule de la sonde est différente? MI

micht · Novembre 1, 2018, 4:53

Moi j’ai, pris sur le forum et modifier avec mon gendre ceci;

var source = datasources[« V4 »] || datasources[« ICI »];

var temperature = (((source[« response »][« analog0 »])*0.0050354)-50).toFixed(1);

var color = « #43A047 »;

if (temperature < 10) {
color = « #1E88E5 »; // Bleu
} else if (temperature < 25) {
color = « #43A047 »; // Vert
} else if (temperature < 50) {
color = « #b71c1c »; // Rouge
}

return `

.temperature { margin-left: 8px; font-size: 22px; font-weight: 600; }

Temperature...extérieur : ${temperature} °C

`;

c’est beaucoup plus simple; juste la température change de couleur.
MI

micht · Novembre 1, 2018, 4:54

Ha ! comment faut faire pour copier le java dans un tableau comme vous ?

Docben62 · Novembre 1, 2018, 4:55

il faut mettre ce sigle `` 2 fois avant le code , tu appuis sur alt graph et touche 7

pour la pression d’eau j’ai as encore installer la sonde

micht · Novembre 1, 2018, 4:55

Qu’avez vous comme sonde pour la pression de l 'eau? merci, MI.

Docben62 · Novembre 1, 2018, 5:03

La formule pour changer la couleur de la temperature varie progressivement je trouve ca plus cool

micht · Novembre 1, 2018, 8:47

Et je n’ai pas le trait noir vertical qui indique la température…Ok, merci, je suis sur Chrome…

Docben62 · Novembre 2, 2018, 4:42

Ca dépend du navigateur, le programme est fait pour Mozilla ! cdt

Aspro95 · Novembre 2, 2018, 11:15

Bonjour,
Super résultat ! Merci à vous. Je vais essayer d’appliquer tout ça dans ma chaudière…
Bonne journée,
Cordialement

Francis · Novembre 11, 2019, 6:25

Bonjour,

j’utilise le barre graph pour la température Enocean.
Je n’arrive pas a afficher la barre sur le barre graph

Merci et cdlt

barre

Agezeram · Décembre 22, 2019, 8:23

Bonjour Francis,
Le bar graph et sa barre est defini au début du script dans la partie style",
verifie que tout est correct sinon poste ton code .
Cdt
Agez

Francis · Décembre 22, 2019, 1:53

Bonjour,

ci joint les codes . Cdlt

var analog = datasources["IPXMINI"]["response"]["xths01"];
var celsius = (((analog * 175.72) /65536) - 46.85).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'> Extérieur (XTHL)</span></td>
	<td align=right valign=middle colspan=3 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;'>-10</span><meter class='temp_ext' min="-10" max="50" value="${celsius}"></meter><span style='padding-left: 2px; font-size:12px;'>50</span></td>
<td align=center valign=top><div style='font-size:12px;line-height: 1.1;'>min<br>0</div></td>
	<td align=center valign=top><div style='font-size:12px;line-height: 1.1;'>moy<br>8.0</div></td>
	<td align=center valign=top><div style='font-size:12px;line-height: 1.1;'>max<br>50</div></td>
  </tr>
</table>
`;

AlexFisho · Décembre 8, 2022, 3:24

Bonjour Francis, avez vous résolu votre pb de barre verticale ?
Je rencontre le même pb.
Cordialement
Alexis