🌦 Nouveau widget Météo pour V5

fgtoul · Janvier 24, 2022, 5:03

Bonsoir Didier
pour les 4 prévisions, c’est la boucle for

for (var k = 0; k < 4; k++) {

tu peux remplacer 4 par 2.
Mais du coup, il faut ajuster le HTML avec les attributs Colspan :
tu peux supprimer les attributs « Colspan=2 » sur la ligne de Prev1C du javascript
et remplacer « Colspan=4 » par « colspan=2 » dans le HTML

didierm · Janvier 24, 2022, 5:05

Merci
j’analyse cela

voila reprit j’analyse hygro

merci François avec hygro @fgtoul

bonne soirée

fgtoul · Janvier 24, 2022, 5:21

effectivement
pour la Normandie, openWeatherMaps fournit le taux d’humidité dans l’air
que tu peux récupérer en intégrant cette valeur dans la boucle

for (var k = 0; k < 2; k++) {
...
prevHUM.innerHTML+= "<td>H:" + openWeather.hourly[k+1].humidity + " %</td>";
...

Il faudra alors remplacer <TD id=prevUV...par <TD id=prevHUM ...

Malheureusement la pluviométrie n’est pas dans les stats Hourly

fgtoul · Janvier 24, 2022, 5:34

Un message a été fusionné à un sujet existant : Collection de Widgets analogiques (CANVAS-GAUGES)

grocrabe · Janvier 24, 2022, 5:45

ben pas utile, il y pleut tout le temps…

Bonne soirée

fgtoul · Janvier 24, 2022, 6:16

@didierm je pense qu’il reste des attributs Colspan non modifiés comme vu au dessus, ce qui provoque le tassement à gauche de tes prévisions.

Remarque Annexe : un meilleur centrage du widget est obtenu en fixant la largeur à 90% au lieu de 100% dans la ligne ci-dessous

<table width="90%"   style="color:#fff;margin:0;padding:0px;position:absolute;top:-10px;font-size:12px;text-align:center">

je corrige le code initial pour les futurs utilisateurs

didierm · Janvier 24, 2022, 6:26

je te passe le code

<iframe width=100% height=100% allowtransparency="true" scrolling=no frameBorder="0" srcdoc='
<link rel="stylesheet" href="assets/lib/gce-glyph/gce-glyph.min.css">
<body style="background-color:transparent">
<script type="text/javascript">
 let Latitude="xxxxx";
 let Longitude="xxxxxx";
 let owApiKey="xxxxxxxxxx";

//ne rien modifier ci-dessous      
 let iconC,tempC,hpaC,myURL;
 let uIco="http://openweathermap.org/img/wn/";
 
 function init() {
  myURL="https://api.openweathermap.org/data/2.5/onecall?lat=" + Latitude;
  myURL+="&lon="+Longitude;
  myURL+="&units=metric&exclude=minutely,dayly";
  myURL+="&appid=" + owApiKey;
  getState((openWeather) => {
   tempC=openWeather.current.temp;
   iconC=openWeather.current.weather[0].icon;
   hpaC=openWeather.current.pressure;
   let prevC1 = document.getElementById("prevC1");
   let prevH=document.getElementById("prevH"), prev1 = document.getElementById("prev1");  
   let prev2 = document.getElementById("prev2"),prevHUM = document.getElementById("prevHUM");
   let prevWind = document.getElementById("prevWind");
   prev1.innerHTML="";prev2.innerHTML="";prevH.innerHTML="";prevHUM.innerHTML="";prevWind.innerHTML="";
   prevC1.innerHTML="<td colspan=2 >" + tempC.toFixed(2) + " °C<br>" + hpaC + "hPa</td><td colspan=2><img src=" + uIco + iconC + ".png" + "></img></td>";
   for (var k = 0; k < 2; k++) {
    var fg=new Date(); //;
    var fg1=parseInt(openWeather.hourly[k+1].dt)*1000;
    fg.setTime(fg1);
    prevH.innerHTML+= "<td>" + (fg.getHours() < 10 ? "0" + fg.getHours() : fg.getHours()) + ":00" + "</td>";
    prev1.innerHTML+= "<td>" + openWeather.hourly[k+1].temp.toFixed(2) + "°C</td>";
    prev2.innerHTML+= "<td><img width=70% src=" + uIco + openWeather.hourly[k+1].weather[0].icon + ".png" + "></img></td>";
    prevHUM.innerHTML+= "<td>H:" + openWeather.hourly[k+1].humidity + " %</td>";
    prevWind.innerHTML+= "<td>" + (parseFloat(openWeather.hourly[k+1].wind_speed)*3.6).toFixed(1) + "km/h</td>";
    }
   });
 }

function getState(cb) {
fetch(myURL, {method: "GET"}).then((ret) => { // Get openWeather object
  ret.json().then((openWeather) => {
    cb(openWeather); // Return openWeather from API
  });
});
}
function autoRefresh() {
setInterval(() => {
  init();
}, 3600000); // 1 hour
}
init();
autoRefresh();
</script>
<table width="100%" style="margin:0;padding:0px;position:absolute;top:-10px;color:#fff;font-size:12px;text-align:center">
 <tr id="prevC1" style="font-size:18px"></tr>
 <tr><td style="color:#ff0" colspan=2>Prévisions sur 2 heures</td></tr>
 <tr id="prevH" style="font-size:10px;"></tr>
 <tr id="prevHUM"  style="font-size:12px;"></tr>
 <tr id="prev1"  style="font-size:14px;"></tr>
 <tr id="prevWind"  style="font-size:12px;"></tr>
 <tr id="prev2"></tr>
</table>
</body>
'></iframe>

fgtoul · Janvier 24, 2022, 6:29

voilà :

<iframe width=100% height=100% allowtransparency="true" scrolling=no frameBorder="0" srcdoc='
<link rel="stylesheet" href="assets/lib/gce-glyph/gce-glyph.min.css">
<body style="background-color:transparent">
<script type="text/javascript">
 let Latitude="xxxxx";
 let Longitude="xxxxxx";
 let owApiKey="xxxxxxxxxx";

//ne rien modifier ci-dessous      
 let iconC,tempC,hpaC,myURL;
 let uIco="http://openweathermap.org/img/wn/";
 
 function init() {
  myURL="https://api.openweathermap.org/data/2.5/onecall?lat=" + Latitude;
  myURL+="&lon="+Longitude;
  myURL+="&units=metric&exclude=minutely,dayly";
  myURL+="&appid=" + owApiKey;
  getState((openWeather) => {
   tempC=openWeather.current.temp;
   iconC=openWeather.current.weather[0].icon;
   hpaC=openWeather.current.pressure;
   let prevC1 = document.getElementById("prevC1");
   let prevH=document.getElementById("prevH"), prev1 = document.getElementById("prev1");  
   let prev2 = document.getElementById("prev2"),prevHUM = document.getElementById("prevHUM");
   let prevWind = document.getElementById("prevWind");
   prev1.innerHTML="";prev2.innerHTML="";prevH.innerHTML="";prevHUM.innerHTML="";prevWind.innerHTML="";
   prevC1.innerHTML="<td>" + tempC.toFixed(2) + " °C<br>" + hpaC + "hPa</td><td ><img src=" + uIco + iconC + ".png" + "></img></td>";
   for (var k = 0; k < 2; k++) {
    var fg=new Date(); //;
    var fg1=parseInt(openWeather.hourly[k+1].dt)*1000;
    fg.setTime(fg1);
    prevH.innerHTML+= "<td>" + (fg.getHours() < 10 ? "0" + fg.getHours() : fg.getHours()) + ":00" + "</td>";
    prev1.innerHTML+= "<td>" + openWeather.hourly[k+1].temp.toFixed(2) + "°C</td>";
    prev2.innerHTML+= "<td><img width=70% src=" + uIco + openWeather.hourly[k+1].weather[0].icon + ".png" + "></img></td>";
    prevHUM.innerHTML+= "<td>H:" + openWeather.hourly[k+1].humidity + " %</td>";
    prevWind.innerHTML+= "<td>" + (parseFloat(openWeather.hourly[k+1].wind_speed)*3.6).toFixed(1) + "km/h</td>";
    }
   });
 }

function getState(cb) {
fetch(myURL, {method: "GET"}).then((ret) => { // Get openWeather object
  ret.json().then((openWeather) => {
    cb(openWeather); // Return openWeather from API
  });
});
}
function autoRefresh() {
setInterval(() => {
  init();
}, 3600000); // 1 hour
}
init();
autoRefresh();
</script>
<table width="100%" style="margin:0;padding:0px;position:absolute;top:-10px;color:#fff;font-size:12px;text-align:center">
 <tr id="prevC1" style="font-size:18px"></tr>
 <tr><td style="color:#ff0" colspan=2>Prévisions sur 2 heures</td></tr>
 <tr id="prevH" style="font-size:10px;"></tr>
 <tr id="prevHUM"  style="font-size:12px;"></tr>
 <tr id="prev1"  style="font-size:14px;"></tr>
 <tr id="prevWind"  style="font-size:12px;"></tr>
 <tr id="prev2"></tr>
</table>
</body>
'></iframe>

didierm · Janvier 24, 2022, 6:35

Effectivement c’est mieux

bonne soirée

hello · Janvier 31, 2022, 5:48

Bonjour, Ok widget de l’affichage mais avons nous une possibilité d’exploitation les données météo dans un scenario avec le V5 pour des action X Y Z ?

grocrabe · Janvier 31, 2022, 7:03

Bonjour hello et bienvenue sur le forum,

vous pouvez accéder à toutes les variables et les intégrer dans un Lien ou une Scène.

Liens → Variables - Variables analogiques → voir collection → Système → rechercher Weather

Bonne journée

hello · Janvier 31, 2022, 6:10

je regarde cela et merci pour la bienvenue

jnseie · Février 4, 2022, 12:27

Je ressens un peu la même chose que vous aussi parfois, les informaticiens ont leurs langages entre eux qui est difficile à comprendre… surtout que l ipx est une véritable machine sophistiquée, moi je me contente de ce que je sais faire avec, notamment de l’automatisme pour des professionnels ou particuliers…
Mais il est vrai que ce forum est plus une cour de récréation qu’une assistance technique

grocrabe · Février 4, 2022, 8:00

Bonjour jnseie,

ce qui est intéressant avec ce forum, est qu’il s’adresse à tous les niveaux d’utilisateur, de celui qui ne fera que de l’automatisation en utilisant seulement les briques de l’IHM à celui capable de pousser la V5 au maximum de ses capacités et ça demande un certain niveau et la maitrise d’un langage et de principes de programmation.

Alors vous avez raison, le forum n’est pas l’assistance technique de GCE, mais un lieu d’échanges de solutions et astuces entre passionnés.
Le traiter de cour de récréation est bien méprisant pour tous ceux qui s’y « amusent ».

Bonne journée

fgtoul · Février 4, 2022, 8:22

Bonjour,

et pour tous ceux qui passent leur temps à répondre aux questions techniques, faire des schémas techniques, ou encore à écrire des articles techniques.

Ce que je trouve amusant (pour rester dans le thème) @jnseie, c’est que nous avons l’impression que vous aviez tout de même l’envie de jouer un peu lorsque vous êtes entré dans ce fil de conversation dédié à un développement spécifique

Personnellement lorsque j’ouvre ce type de conversation, ce n’est pas pour jouer mais bien pour partager afin de vous donner envie d’aller plus loin avec votre automate.

bonne journée

cce66 · Février 4, 2022, 3:09

Bonjour @jnseie,
Je dirais que c’est une cour de récré quand on veut jouer, explorer, partager et un forum d’assistance technique quand on est bloqué sur un concept, un développement ou l’on trouves des réponses quand elles sont connues en cherchant sur le forum ou des réponses quand d’autres vous cherchent et vous trouvent des solutions ou vous apportent des éléments de réponses qui vous permettent d’avancer. Après on peut être frustré de pas arriver à faire ce que l’on voudrait parce que c’est pas possible tout bonnement dans l’état actuel ou qu’il n’y a pas encore quelqu’un qui s’est penché sur le même problème, mais on peut rester courtois et surtout ne pas fermer les portes ! Moi j’ai bien galéré au début avec la partie mqtt, il y avait peu de doc, pas d’exemples mais à travers le forum j’ai réussi à me dépatouiller puis proposer des tutos pour interfacer l’ipx800 via mqtt et node-red vers home-assistant, cela m’a pris du temps mais c’est toujours plaisant de partager ! En en même temps, si j’oublie comment j’ai fait je sais ou retrouver les infos !

jnseie · Février 4, 2022, 3:39

Non, je me mettais simplement à la place du monsieur voilà tout…

fgtoul · Février 4, 2022, 3:53

@jnseie
alors je confirme, ce forum s’adresse à tout le monde, chacun prend ce qui l’intéresse ou du moins ce qu’il est capable de prendre, mais franchement, le dénigrement n’a pas sa place .
Merci de votre compréhension
De plus, je ne vois pas pourquoi vous dites qu’il n’y a pas d’assistance sur ce forum, votre activité sur le forum démontre que certains utilisateurs vous ont déjà aidé, et si j’ai bonne mémoire, vous m’avez contacté en MP du 27/12/2021 au 29/12/2021 pour que je dépanne vos IPX en vue d’une mise en place chez un client.