🌦 Nouveau widget Météo pour V5

fgtoul · Janvier 22, 2022, 9:14

Bonsoir à tous,
le widget météo natif de la V5 présente les températures maximales sur 4 jours.

Je vous propose un autre widget présentant les prévisions sur 4 heures.

Les données et les icônes proviennent de OpenWeatherMap. Ce widget a donc besoin d’une connexion internet

Créez un widget de type HTML et collez le code suivant :

<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="43.7";
 let Longitude="1.34";
 let owApiKey="mon_api_key_openweathermap";

//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"),prevUV = document.getElementById("prevUV");
   let prevWind = document.getElementById("prevWind");
   prev1.innerHTML="";prev2.innerHTML="";prevH.innerHTML="";prevUV.innerHTML="";prevWind.innerHTML="";
   prevC1.innerHTML="<td colspan=2 >" + tempC.toFixed(1) + " °C<br>" + hpaC + "hPa</td><td colspan=2><img src=" + uIco + iconC + ".png" + "></img></td>";
   for (var k = 0; k < 4; 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(0) + "°C</td>";
    prev2.innerHTML+= "<td><img width=70% src=" + uIco + openWeather.hourly[k+1].weather[0].icon + ".png" + "></img></td>";
    prevUV.innerHTML+= "<td>UV:" + openWeather.hourly[k+1].uvi + "</td>";
    prevWind.innerHTML+= "<td>" + (parseFloat(openWeather.hourly[k+1].wind_speed)*3.6).toFixed(0) + "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="90%" 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=4>Prévisions sur 4 heures</td></tr>
 <tr id="prevH" style="font-size:10px;"></tr>
 <tr id="prevUV"  style="font-size:12px;"></tr>
 <tr id="prev1"  style="font-size:14px;"></tr>
 <tr id="prevWind"  style="font-size:10px;"></tr>
 <tr id="prev2"></tr>
</table>
</body>
'></iframe>

renseignez les paramètres

Latitude
Longitude
owApiKey

tels que vous les avez renseignés dans le plugin Météo de l’ipx800 V5

Ce widget est développé sur le thème transparent,
dont le code est disponible ici :

Have fun

artnow · Janvier 23, 2022, 6:39

Bonjour fgtoul , je viens de l’installer merci beaucoup c’est top

fgtoul · Janvier 23, 2022, 8:31

Bonjour,
cette version ne s’adapte pas trop aux thèmes de couleurs, il faut pour le moment retoucher le code pour obtenir ce que l’on veut.
C’est un exemple pour montrer comment accéder aux Json externes par API et récupérer les données pour les afficher.

L’adaptation au thème sera sans doute pour une autre version (améliorée)
J’espère aussi optimiser la taille du texte, car le widget est assez lourd en mémoire.
Pensez à compresser le code après l’avoir adapté.
Compress HTML (textfixer.com)
Personnellement j’utilise ce compresseur qui obtient de bons résultats sur le code html et javascript.
Il existe des outils plus performants spécialisés pour le javascript, mais qui nécessitent le traitement partiel du code, car ne gèrent pas le HTML.
bon dimanche

cce66 · Janvier 23, 2022, 5:43

Salut @fgtoul
Super le widget , dommage que les paramètres latitude, longitude et key ne soient pas accessibles pour l’intégrer direct dans le code en variables ! Peut être dans une mise à jour !

fgtoul · Janvier 23, 2022, 5:45

bonsoir,

franchement, il n’y a que 6 chiffres à retaper et 1 copier/coller à faire
De plus, outre la requête OpenWeather, ça génère 1 requête supplémentaire vers IPX.

En conclusion, Gain=0

CHAEUGRX · Janvier 23, 2022, 6:02

bonjour

j’ai un problémé à la création du widjet météo
Météo Bis

pouvez vous m’expliquer

cordialement

fgtoul · Janvier 23, 2022, 6:04

bonsoir
certainement une erreur de copier coller ou de correction des 3 paramètres.
Recollez le code original et recommencez

artnow · Janvier 23, 2022, 7:44

Franchement cela m’a pris 2 minutes pour la mettre en place …

cce66 · Janvier 23, 2022, 8:45

Effectivement…c’est pas faux !!! on y pense pas toujours

CHAEUGRX · Janvier 24, 2022, 10:01

bonjour

j’ai trouvé, il faut mettre à jour dans le programme entre guillemets la Lat, Longi, API KEY

il faudrait être plus explicite dans le forum

fgtoul · Janvier 24, 2022, 10:17

le code est bien assez explicite par lui-même !
les paramètres sont entre des apostrophes.

Quand on modifie un code source, il faut s’y connaître un peu, sinon, on essaie de respecter la syntaxe déjà en place

artnow · Janvier 24, 2022, 11:28

Franchement c’est du bon boulot , pas compliquer de rentrer longitude , latitude et API .
Cordialement

CHAEUGRX · Janvier 24, 2022, 1:59

bonjour,

comment voulez-vous que des débutants essayent de dialoguer avec des pédagogue aussi important
si vous voulez être entre vous ne faite pas de forum ouvert à tout le monde

cordialement

grocrabe · Janvier 24, 2022, 2:07

Bonjour CHAEUGRX,

je ne comprends vraiment pas votre question…
Il me semble que, au contraire, ce forum est très ouvert et bienveillant… et animé par des bénévoles qui prennent sur leur temps libre.
et si il y a quelqu’un qui donne des coups de main et prend le temps d’expliquer c’est bien @fgtoul.
Mais il peut devenir lassant de répondre toujours aux mêmes questions…

Bonne journée

fgtoul · Janvier 24, 2022, 2:17

pour être dans le même ton que vous :
c’est du partage, c’est du DIY.
ce développement, je l’ai fait pour des besoins personnels, je n’étais pas obligé de le partager.
A bon entendeur !

je ne suis pas lassé, je réponds toujours aux questions.
Perso quand je lis un tuto que je ne comprends pas trop bien, je pose des questions afin d’obtenir des éclaircissements, mais en aucun cas je ne rejette la faute sur celui qui a rédigé ou partagé le tuto .

Bernard61 · Janvier 24, 2022, 2:29

Bonjour,

Je suis loin d’être un spécialiste, c’est grâce à des personnes comme fgtoul qu’aujourd’hui je m’amuses avec ma V5,
merci encore
Bernard

grocrabe · Janvier 24, 2022, 2:34

m’enfin @Bernard61 la domotique c’est sérieux…!!!

patam · Janvier 24, 2022, 2:42

Bonjour,
effectivement, quand on commence à faire des widget qui ne sont pas intégrés de base dans un automate, c’est du DIY.
@CHAEUGRX , rien ne vous oblige à faire du DIY avec un automate comme l’ipxV5 qui est de base parfaitement fonctionnel. Il n’y a rien de pire que de faire des copier/coller si on ne sait pas à quoi ça correspond.
Le forum a la chance d’avoir des gens comme @fgtoul qui connaissent beaucoup de chose afin de pouvoir répondre à la plupart des questions!

CHAEUGRX · Janvier 24, 2022, 4:20

BONJOUR

désolé e vous avoir ofusqués Monsieur
Mes plus plates excuses
au revoir, bon vent
sur ce forum je voudrais remercier l’assistant CGE qui répond à toutes les questions
cordialemenr

merci encore à tous

didierm · Janvier 24, 2022, 4:42

Bonjour @fgtoul
j’ai pas réussi à identifier dans le code comment on ce retrouve à 4 prévisions
j’ai réussi à isoler les UV (pas trop utile en Normandie)
je voudrais avoir que 2 heures de prévision pour réduire la taille du widget
Merci encore pour le partage