Widget température HTML

Docben62 · Octobre 7, 2018, 1:41

Bonjour à tous !
Petit WIDGET sans prétention après avoir visité quelques sujets.
Capture%20d%E2%80%99%C3%A9cran%20(4)

Photo du widget

et programme qui l’accompagne

var analog = datasources["V4"]["response"]["xths01"];
var celsius = (((analog * 175.72) /65536) - 46.85).toFixed(1);
let cssColor3 = "#E0CDA9";

return `
<style>
meter {
   		/* On réinitialise l'apparence par défaut */
  	-webkit-appearance: none;
  	-moz-appearance: none;
  	appearance: none;
	width: 90px;
	height: 18px;
	border: 1px solid #ccc;
	border-radius: 3px;
}
meter::-webkit-meter-bar  {
	background: none;
	border-radius: 3px;
	background-image: linear-gradient(
    90deg, 
    #0000ff 25%,	/* 0°C */
    #00ff00 75%,	/* 20°C */
    #ff0000 100%,	/* 30°C */
  );
  background-size: 100% 100%;
}
meter::-webkit-meter-optimum-value {
	background: transparent;
	border-style: solid;
	border-color: #000;
	border-width: 0px 2px 0px 0px;
}
</style>

<table width='100%'>
  <tr>
    <td align=right rowspan=2 style='padding-top: 5px;'><span class="glyphicons glyphicons-temperature x2"></span></td>
	<td align=center valign=bottom width='50%'><span style='color: #E0CDA9'> Extérieur (XTHL)</span></td>
	<td align=right valign=middle rowspan=2><span style='color: #FFFFFF;font-size: 28px;'>${([((datasources["V4"]["response"]["xths01"])*175.72)/65535]-46.85).toFixed(1)} <sup>°C</sup></span></td>
  </tr>
  <tr>
	<td align=left valign=middle><span style='padding-right: 2px;'>-10</span><meter min="-10" max="30" value="${celsius}"></meter><span style='padding-left: 2px;'>30</span></td>
  </tr>
</table>
`;

Merci pour vos commentaire A plus

Docben62 · Octobre 7, 2018, 10:19

Merci fgtoul pour la mise en page ! cdl
Capture%20d%E2%80%99%C3%A9cran%20(5)

Et voila une évolution !

Feuxs · Octobre 8, 2018, 9:27

Super, je chercher justement à gagner de la place, les jauges classiques de l’ipx étant gourmande en espace d’affichage.

Docben62 · Octobre 8, 2018, 10:30

Merci, la derniere photo est une amélioration du programme affiché cdl

micou211187 · Octobre 10, 2018, 6:51

Bonjour messieurs.

J ai récupéré le code que vous avez fournis pour l intégrer dans un de mes dashboard. Tout fonctionne, sauf que je n ai aucune couleur dans l encadré.

Merci à vous.

fgtoul · Octobre 10, 2018, 7:34

Bonjour,
Les couleurs sont codées avec des fonctions dépendantes du navigateur.
Vous pouvez essayer un autre navigateur internet ?
Cdt

Docben62 · Octobre 10, 2018, 1:32

Salut micou211187, j’utilise Microsoft edge ! cdl

micou211187 · Octobre 10, 2018, 7:00

Effectivement c est mieux. J utilisais chrome

Merci

Docben62 · Octobre 11, 2018, 2:38

Capture%20d%E2%80%99%C3%A9cran%20(8)%20-%20Copie
dernière évolution pour Mozilla

var analog = datasources["V4"]["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>
`

NeoNavy · Octobre 11, 2018, 7:30

Bonjour,
Effectivement, ce Widget a l’air super sympa et je vous remercie de nous en fournir le programme… Mais au risque de passer pour le Noob de service (ce que j’assume!.. il faut bien commencer un jour), pourriez vous me/nous dire ce qu’il faut faire du programme? Car je ne vois pas où on peut rentrer de lignes de programme sur l’automate
Merci d’avance.

fgtoul · Octobre 11, 2018, 9:06

Bonjour,
sur votre Dashboard IPX7800 V4, vous devez créer un widget type HTML.
Dans le widget, cliquez sur le bouton JAVASCRIPT et collez le code complet.
Cdt

NeoNavy · Octobre 11, 2018, 9:51

J’ai suivis la méthode que vous avez indiqué mais apparemment ça ne marche pas (le widget reste vide), de plus je ne sais pas comment/où mettre l’adresse de l’entrée analogique (je vous l’ai dit, je débute réellement et SURTOUT dans ce langage de programmation).

Docben62 · Octobre 12, 2018, 5:17

Salut, tu as oublié de créer une source de données, c’est en haut à gauche « AJOUTER UNE SOURCE DE DONNEES » apres apparait un formulaire , « selectionner un type » tu choisis « XML » aprés tu as « NOM » , moi c’est « V4 » et « URL » tu mets "http://IP local avec port/admin/status.xml. et tu sauvegardes , ne pas oublier de faire "sauvegarde de IHM. cdl
Capture%20d%E2%80%99%C3%A9cran%20(7)
dernière évolution de l’affichage, les nombres en bas à droit sont fixes.
A propos , le programme est adapté pour le navigateur Mozilla, donc si c’est pas le même , l’affichage ne sera pas correct.

Aspro95 · Octobre 25, 2018, 8:58

Bonjour,
Superbe widget, merci pour votre travail ! Effectivement c’est un réel gain de place.
N’y connaissant rien, j’ai recopié le code, changé la base de données et ça marche nickel !
Seulement voilà, à la place du X-THL, j’ai une sonde de température Enocean et je ne sais pas comment récupérer sa valeur
J’ai modifié la 1e ligne par :
var analog = datasources[« XML_V4 »][« response »][« eno »];
La 2e ligne doit être modifiée, mais je ne sais pas comment.
Peut-être pourriez-vous m’aider ?
Cordialement.
PS : à quoi servent les indications en bas à droite ?

Agezeram · Octobre 25, 2018, 10:04

Bonsoir,

Merci pour ce widget qui donne de la couleur et un gain de place notable !

@Aspro95
Vas jeter un oeil dans le fichier status.xml depuis ton navigateur et tu comprendras
http://IP-IPX800/admin/status.xml ou http://IP-IPX800:PORT/admin/status.xml
Pour ma part j’ai changé « xths01 » par « enoA1 » et si comme moi les valeurs sont déjà en celcius n’oublies pas de modifier soit la variable var celsius = … en conséquence ou de remplacer ${celcius} par ${analog} dans le code
De mon côté j’ai préféré commenter la ligne var celcius et changer ${celcius} par ${analog}

Aspro95 · Octobre 26, 2018, 9:46

Bonjour,
Grand merci pour ta réponse. Je n’y connais tellement rien que je n’avais même pas pensé à jeter un oeil sur status.xml. Effectivement, on y voit les 2 valeurs de mes sondes en enoA0 et enoA1.
Jusque-là tout va bien, c’est après que je n’ai pas réussi à avoir les bonnes valeurs dans le widget parce que je n’ai pas bien compris où il fallait intervenir.
Pourrais-tu m’envoyer un bout de ton code ?
Les valeurs en bas à droite, à quoi servent-elles ?
Bonne journée.
Cordialement.

Agezeram · Octobre 26, 2018, 1:37

@Aspro95
Voici le code de Docben62 modifié pour sonde EnOcean

var analog = datasources["V4"]["response"]["enoA1"];
//var celsius = (((analog * 175.72) /65536) - 46.85).toFixed(1);
var celsius = analog

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'> 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;'>-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>
`

Dans mons cas pour une sonde EnOcean NodOn STPH-2-1-05 qui a une plage de mesure entre 0°C et 40°C le code est celui-ci :

var analog = datasources["V4"]["response"]["enoA1"];
//var celsius = (((analog * 175.72) /65536) - 46.85).toFixed(1);
var celsius = analog

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>
`

Les valeurs en bas à droite ne servent à rien…ce sont des valeurs en dur dans le code qui sont propre à Docben62, tu peux les virer ou remplacer

Bonne chance !

Docben62 · Octobre 26, 2018, 2:40

bonjour effectivement se sont des valeurs arbitraires , pour ma mise en page
sinon voila une variante ou j’en suis arrivé Capture%20d%E2%80%99%C3%A9cran%20(9)

Agezeram · Octobre 26, 2018, 4:05

@Docben62
Sympa l’ensemble et c’est clairement plus économique en espace de travail
Tien voila ce que ça donne après quelques bidouillages de ton code
ipx800_terras

J’oubliais , Merci pour avoir fait tout le travail !

Docben62 · Octobre 26, 2018, 7:23

Merci a vous de vous y interesser !