Javascript "barre de progression" (2ème édition)

Avez-vous des erreurs dans la console JavaScript de votre navigateur ?

1 « J'aime »

Non pas d erreur et rien ne s affiche lors de l exécution

bonjour @fmmomo
la base nommée « Status.xml » et qui pointe sur le fichier status.xml est bien enregistrée sur le dashboard?
Peux-tu nous faire parvenir l’écran de définition de ta datasource « status.xml » ainsi que le code de ton widget ?
cdt

1 « J'aime »

Et oui je suis vraiment étourdi c était bien sa j avais mis « s » minuscule à Status alors il n était pas reconnu merci encore @ZogStriP et @fgtoul
Et @Cyrilz Sa fonctionne super

2 « J'aime »

pense à redéfinir les attributs Min et Max pour plus de précision de la progressBar.

2 « J'aime »

Ok merci beaucoup @fgtoul

pour information, l’élément Html <progress> est fait pour afficher des pourcentages. c’est une barre de progression. Il ne sait donc pas afficher des valeurs négatives.
Dans le cas d’une utilisation pour des températures, il vaut donc mieux utiliser l’élément <meter>
il a la même syntaxe, et le même type d’affichage. mais les valeurs admises sont différentes.
l’exemple ci-dessus pourrait donc devenir

return `
<p>
  <meter min="-30" max="40" value="${celsius}"></meter> ${celsius} °C
</p>
`;
5 « J'aime »

Bonjour,

widget très intéressant.
On en veux toujours plus !!
Serait il possible d’avoir 3 couleurs sur le barre graph, le 1° tiers en bleu, le 2° en orange, le 3° en rouge ?
De plus serait il d’afficher en plus de la température, la valeur min et la valeur max ?

Merci et cordialement.

1 « J'aime »

l’élément <meter> peut changer de couleur (vert, jaune, rouge) en fonction de seuils définis (low, high, optimum), mais tout ou rien, pas plusieurs couleurs à la fois. c’est très pratique pour afficher des plages de confort, des dépassements de seuils, qualité de l’air, température …

4 « J'aime »

deux super articles pour ceux qui veulent aller plus loin (beaucoup plus loin :smiley: ) avec les éléments Html5 <meter> et <progress>

5 « J'aime »

@fgtoul beaucoup plus loin: « vers l’infini est au delà » :+1:

1 « J'aime »

@Thierry15
un petit retour traitant de l’anémomètre serait sympa. :wink:
modèle (sans lien commercial) , scenario, widget …

le lien commercial je le veux bien en MP. :slight_smile:
merci.
:wink:

1 « J'aime »

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>  
6 « J'aime »

Bonjour,

Je bloque actuellement sur la source de donnée, malgrés de nombreux essais, je ne comprend pas d’où viens le problème. J’ai voulu tester avec la météo:

var thermo = (datasources["Météo"]["current_temp"]);

Dans la balise « meter »:
value="${thermo}"

Si quelqu’un pouvais me rectifier le problème :slight_smile:

Bonjour,
Même demande que @fgtoul, car je suis très intéressé par l’anémomètre.
Je veux bien aussi le lien commercial en MP.
Bravo pour le widget barre de progression :slight_smile:
Cdlt.

Quel est votre code complet ?
Je viens d’essayer et ça fonctionne bien :

var thermo = (datasources["Météo"]["current_temp"]);
return `
  <meter min="-10" max="40" value="${thermo}"></meter>${thermo} °C
`;
2 « J'aime »

Merci @Cyrilz,

Pouvez-vous m’envoyer par MP le code complet ?
Je dois avoir quelque chose qui cloche.

Merci

Il est dans le message précedent

1 « J'aime »

Merci mais ça n’a pas fonctionné.

J’ai redémarré l’IPX et maintenant ça marche

Cdt

Bonsoir,

Je partage le widget terminé, j’ai abandonné la balise « meter », pas assez souple a mon goût.
La barre verticale se déplace suivant la température, elle change également de couleur (bleu,verte,rouge).
Couleurs de fond calibrées de 10 à 28°c.
Le texte change également de couleur (21°c et 24°c).

J’ai pu faire exactement ce que je souhaitais :wink:

var thermo1 = (datasources["Météo"]["low_temp"]);
var thermo2 = (datasources["Météo"]["high_temp"]);

thermo1 = 19.35; /* <-- a supprimer, présent juste pour tester */
thermo2 = 22.56; /* <-- a supprimer, présent juste pour tester */


curseur1 = (thermo1 - 10) * 5.555;
if (thermo1 < 21) {couleur1 = "#1034A6";} /* Couleur bleue */
if (thermo1 > 24) {couleur1 = "#A91101";} /* Couleur rouge */
if ((thermo1 >= 21) && (thermo1 <= 24)) {couleur1 = "#22780F";} /*couleur verte */

curseur2 = (thermo2 - 10) * 5.555;
if (thermo2 < 21) {couleur2 = "#1034A6";}
if (thermo2 > 24) {couleur2 = "#A91101";}
if ((thermo2 >= 21) && (thermo2 <= 24)) {couleur2 = "#22780F";}

return `
<style>  
.thermometre1 {
  width: 100px;  
  height: 16px;  
  -webkit-appearance: none; 
  border: 1px solid #555555;  
  border-radius: 1px;  
  background-image: linear-gradient(  /* calibré pour plancher chauffant de 21 a 24°c */
        135deg,                       /* meter de min 10 a max 28°c */
        #77B5FE 52%,   
        #00FF00 55%,
        #00FF00 77%, 
        #FF4901 80%  
      );  
  opacity:0.9;
  filter:alpha(opacity=90);	
  background-size: 100% 100%;  
  -webkit-box-shadow: inset 0 0 8px 0px #555555;
  position:relative;
  top:11px;
  left:2px;
}  
.degres1 {
  color:${couleur1};
  font-size:14px;
  font-weight:bold;
  position:absolute; 
  top:11px;
  left:5px;
}
.curseur1 {
  opacity:0.85;
  filter:alpha(opacity=85);	
  color:${couleur1};
  font-size:17px;
  font-weight:bold;
  position:absolute; 
  top:7px;
  left:${curseur1}px;
}
.texte1 {
  border: 1px solid #555555;  
  border-radius: 1px;  
  opacity:0.85;
  filter:alpha(opacity=85);	
  color:${couleur1};
  font-size:12px;
  font-weight:bold;
  position:absolute; 
  top:11px;
  left:106px;
  width: 170px;
  height: 16px;
  background: antiquewhite;
}
.thermometre2 {
  width: 100px;  
  height: 16px;  
  -webkit-appearance: none; 
  border: 1px solid #555555;  
  border-radius: 1px;  
  background-image: linear-gradient(  
        135deg,                     
        #77B5FE 52%,   
        #00FF00 55%,
        #00FF00 77%, 
        #FF4901 80%  
      );  
  opacity:0.9;
  filter:alpha(opacity=90);	
  background-size: 100% 100%;  
  -webkit-box-shadow: inset 0 0 8px 0px #555555;
  position:relative;
  top:22px;
  left:2px;
}  
.degres2 {
  color:${couleur2};
  font-size:14px;
  font-weight:bold;
  position:absolute; 
  top:40px;
  left:5px;
}
.curseur2 {
  opacity:0.85;
  filter:alpha(opacity=85);	
  color:${couleur2};
  font-size:17px;
  font-weight:bold;
  position:absolute; 
  top:36px;
  left:${curseur2}px;
}
.texte2 {
  border: 1px solid #555555;  
  border-radius: 1px;  
  opacity:0.85;
  filter:alpha(opacity=85);	
  color:${couleur2};
  font-size:12px;
  font-weight:bold;
  position:absolute; 
  top:40px;
  left:106px;
  width: 170px;
  height: 16px;
  background: antiquewhite;
}
</style>     


<div class="thermometre1"></div>
<div class="degres1">${thermo1}°c</div>
<div class="curseur1">|</div>
<div class="texte1">Température chambre</div>

<div class="thermometre2"></div>
<div class="degres2">${thermo2}°c</div>
<div class="curseur2">|</div>
<div class="texte2">Température salon</div>

`;

Bon week end :slight_smile:

2 « J'aime »