@fgtoul beaucoup plus loin: « vers l’infini est au delà » 
1 « J'aime »
@Thierry15
un petit retour traitant de l’anémomètre serait sympa. 
modèle (sans lien commercial) , scenario, widget …
le lien commercial je le veux bien en MP. 
merci.
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
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
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
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
2 « J'aime »