Cherche plugging d'intégration des informations de balise metéo

[Parapente Samoens]

Bonjour,

Je suis sur d'avoir vu sur le site un post qui proposait un plugging de présentation des balises FFVL à insérer dans nos pages web. Le résultat était un élégant graphique dans les teintes grises.

Malgré une recherche approfondie, je ne le retrouve pas. Je vous appelle donc à mon secours. 

[mike57]

 
Sous la webcam(quand elle fonctionne) sur ce site il y a un tableau mais pas de graphique.

http://murblanc.org/prevol/#

[Parapente Samoens]

Merci, mais ce n'est pas ce que je recherche. 

[Hub]

Un ptit coup de mon nami gougueule:
http://www.parapark.fr/integration.php

[Parapente Samoens]

Et c'est l'ami Hub qui gagne une tringle à rideau ! 

Merci, c'est exactement ça.

[JC - MARSEILLE PARAPENTE]

Un ptit coup de mon nami gougueule:
http://www.parapark.fr/integration.php

Ca marche plus......

[Hub]

Argl.

Un petit coup de wayback machine (mais la page integration.php n'est pas archivée), je trouve:
http://web.archive.org/web/20130315084201/http://www.parapark.fr/balises/widget_90.php
En regardant le code html renvoyé par ce widget_90, on voit entre autres que ça référence:
http://www.balisemeteo.com/graphs/graph_vent.php?idBalise=90
qui donne l'image suivante:


En fait, il semble bien que le widget en question accèdait la page fédérale, genre (pour Jeufosse) :
http://www.balisemeteo.com/balise.php?idBalise=126
parsait son output pour extraire les données numériques, et repassait directement le graphique ci-dessus.
Ca doit pas être le bout du monde à refaire.

[Gilles Silberzahn]

Je sais pas ce que tu cherches a obtenir, mais si c'est un widget avec le relevé balise instantané, c'est pas très compliqué, vu que la Fédé met à disposition un fichier XML du dernier relevé de l'ensemble des balises. Il suffit de demander l'adresse du fichier à Jérôme, le responsable info. Si tu manies un peu le php, c'est pas très compliqué à faire.

Un exemple ici : http://www.parapente-guyane.com/?page=balise

Par contre, si tu veux afficher l'historique de la balise, c'est plus compliqué vu que la Fédé ne fournit pas d'accès à sa base de données. Personnellement, je passe par une tâche Cron et une base mysql perso.

http://www.parapente-guyane.com/?page=balisehistorique

À ton service si tu veux des bouts de code.

[JC - MARSEILLE PARAPENTE]

Ben j'avais sur ma page météo les balises de signes e de la sainte victoire via parapark mais je n'ai pas les bout de code pour réintégrer ça

bises

jc

ps : Gilles, j'ai eu Micha, un legos ukrainien en stage   

[Parapente Samoens]

J'ai le même problème suite à la mise hors ligne de parapark.

http://www.parapente-samoens.com/fr/meteo-5.html

Dommage, c'était vraiment bien.

[lepiafvolant]

si qq'un trouve une soluce , qu'il partage , car c'était utile à bcp

www.provencedelta.com

comme quoi ,il suffit parfois que ça marche plus pour se rendre compte que c'était hyper pratique ,et que le boulot de certains rendaient bcp service. 
Et bon vols à tous par ces temps de misère météo    

[Gilles Silberzahn]

ps : Gilles, j'ai eu Micha, un legos ukrainien en stage   

Oui, je lui avais donné tes coordonnées. Un petit malingre de 2m et 100kg, ça le fait, non ?

Mais sinon,pour revenir au sujet qui nous intéresse, c'est pas bien difficile à développer. Je peux vous faire un petit widget, mais faut me dire ce que vous aviez au départ... C'était simplement le relevé instantané d'une balise choisie, c'est ça ? Avec la charte graphique de balisemeteo.fr ?

[lepiafvolant]

ca serait hyper cool   
on avait 3 balises ste victoire 134
oraison 90
Lagarde Rustrel  112

ça donnait une tendance dans 3 départements
éventuellement signes 106
peut etre le code et on integre le n° de la balise que l'on veut , un simple widget petit , pas du pleine page

merci d'avance   

[Parapente Samoens]

Mais sinon,pour revenir au sujet qui nous intéresse, c'est pas bien difficile à développer. Je peux vous faire un petit widget, mais faut me dire ce que vous aviez au départ... C'était simplement le relevé instantané d'une balise choisie, c'est ça ? Avec la charte graphique de balisemeteo.fr ?

Un lien au dessus donne un aperçu du truc. Il suffisait de changer le n° code pour sa balise et hop ! L'auteur avait même changé la couleur de fond pour que l'intégration sur ma page soit parfaite.

http://web.archive.org/web/20130315084201/http://www.parapark.fr/balises/widget_90.php

[Gilles Silberzahn]

Graphiquement et en taille, ça vous irait, ce qu'on trouve sur ma page ?
http://www.parapente-guyane.com/index.php?page=balisehistorique

Quand vous passez la souris dessus, ça donne toutes les infos.

[lepiafvolant]

Pour ma part , sur le coté droit du site , on avait 3 widgets qui représentait en temps réel les 3 balises des départements locaux et voisins , et on trouvait tous cela pratique
un widget simple , pas un lien , un aperçu en temps réel , je sais , suis exigeant , mais j ai un plein camion de  

le resultat du lien était nickel
http://web.archive.org/web/20130315084201/http://www.parapark.fr/balises/widget_90.php

mais parapark marche plus

[Gilles Silberzahn]

C'est vite fait entre une charrette et les cartons de déménagement, mais dites-moi si ça pourrait vous aller, comme widget à intégrer...

http://www.parapente-guyane.com/widgetbalise/

[Gilles Silberzahn]

Petites précisions :
Si vous passez la souris sur le widget, ça vous donne le détail du relevé.
Si vous cliquez sur le nom de la balise, ça ouvre le site balisemeteo sur la balise en question dans une nouvelle fenêtre.

J'ai fait une page avec plusieurs couleurs de fond, histoire que vous voyiez comment ça peut s'adapter à votre site.

Côté technique, il y a 4 lignes (par balise, autant de balises que vous voulez) à copier-coller dans le code de votre page, et un fichier et un dossier de pictogrammes et css à déposer sur votre site au même niveau que la page qui fait appel au widget.

Ça va ou bien ?

[lepiafvolant]

super cool
c'est compliqué d'avoir directement le widget des balises comme sur le site , à integrer , j'sais , j'suis 

en tout cas ,  de t'em.... à nous trouver un soluce. 

[Gilles Silberzahn]

super cool
c'est compliqué d'avoir directement le widget des balises comme sur le site , à integrer , j'sais , j'suis  

Ça doit pas être bien compliqué, mais plus compliqué quand même que de faire ce que j'ai fait, à savoir récupérer mon code et mes graphismes existants et les adapter en quelques heures à vos besoins.

Je rajoute que si j'ai fait à la base mon propre graphisme, c'est que je trouvais celui de balisemeteo particulièrement illisible. Après, chacun ses goûts, bien sûr.

Redemande moi ça début novembre parce que là, entre la charrette au boulot et les cartons a boucler à la maison...

Si il y en a que ça intéresse, je ferai un petit zip a télécharger de la version actuelle.

[lepiafvolant]

y a pas de soucis , comme je dis souvent , on est des bénévoles , faut pas nous mettre la pression sauf celle du bar 

je te mets un modèle du site
et ce que j avais trouvé sympa avec parapark.fr , c'est le modèle à intégrer mais surtout qu'il se dimensionnait automatiquement et que l'on pouvait aussi cliquer dessus pour l'avoir plus grand et plus d'info.

Voila , y a pas le feu , rien d'urgent , rien d'obligatoire mais souvent les visiteurs du site me disait , put'1 , c'est cool tes balises ( moi j'y étais pour rien ) mais depuis qu'elles y sont plus , put'1 , c'est le borde... , y a rien qui marche , non j'plaisante .

[Gilles Silberzahn]

C'était plus simple que je croyais, mais je sais toujours pas ce que tu cherches...

Voilà les 3 formes de widget. Le dernier est le widget type balisemeteo.fr .
Ils ont les mêmes fonctionnalités :
- Si tu passes la souris dessus sans cliquer, ils t'affichent les détails du relevé,
- Si tu cliques dessus, ils t'ouvrent une nouvelle fenêtre avec la page balisemeteo de ta balise.

La page de démo est là :
http://www.parapente-guyane.com/widgetbalise/
avec 2 tailles différentes pour le widget fédéral (juste pour montrer qu'on peut lui donner la taille qu'on veut).

Côté technique, c'est toujours 4 à 6 lignes à renseigner (id balise, nom de la balise, type de widget, largeur widget, rafraichissement auto et fuseau horaire, Guyanais oblige...) et insérer dans le code de vos pages. Le fichier widget et le répertoire des pictos et css sont à déposer sur votre site (un peu moins de 100 Ko, pictos compris).

[lepiafvolant]

perso , c'est le  widget fédéral le plus petit qui m'irait bien donc suis intéressé par le code   

merci pour la rapidité

[Gilles Silberzahn]

Euh, c'est les mêmes fichiers pour tous les widgets. C'est toi qui configures comme tu veux. Je fais un fichier avec les instructions, je pose une archive zip sur le site et je te tiens au courant.

[Gilles Silberzahn]

Les fichiers sont là :
http://www.parapente-guyane.com/widgetbalise/widgetbalise.zip

Mettez un petit mot ici si vous l'installez sur votre site.

[Gilles Silberzahn]

Bon, je vois que personne n'a utilisé le widget.

Donc, je suis allé voir vos pages et je m'aperçois qu'elles sont en html. Or, pour que le widget fonctionne, il faut que les pages soient en php. C'est à peu près la même chose, mais pas tout à fait.
Dans une page "meteo.html", le code html sera interprété mais pas le code php.
Dans une page "meteo.php", les codes html et php seront interprétés (vous pouvez mixer les 2 codes)

J'ai un peu modifié les choses pour que vous puissiez vous en sortir.
Allez voir sur http://www.parapente-guyane.com/widgetbalise/instructions.php au chapitre des questions/réponses pour voir si vous trouvez une solution acceptable.

[lepiafvolant]

merci pour les explications mais pour moi , je dois foiré qq part et ça me saoule , autant j'peux passer des heures à monter des images vidéos etc etc , là j ai pas de patience , mais en tout cas , merci à toi de prendre le temps de t'être pencher sur le pb et d'essayer de nous trouver des soluces   

[Gilles Silberzahn]

Allez, un dernier essai, y'a pas plus simple que du copier-coller.

Tu copies-colles ça dans ta page sous "Un super site de meteo Rasp"  à la place de tes balises :

------------------------------------------------------------------------------------------------------------
<a href="http://www.balisemeteo.com/balise.php?idBalise=134" target="_blank"><img src="http://www.balisemeteo.com/graphs/graph_vent.php?idBalise=134" width="200" /></a><br />
Balise Ste victoire<br />
<a href="http://www.balisemeteo.com/balise.php?idBalise=90" target="_blank"><img src="http://www.balisemeteo.com/graphs/graph_vent.php?idBalise=90" width="200" /></a><br />
Balise Oraison<br />
<a href="http://www.balisemeteo.com/balise.php?idBalise=106" target="_blank"><img src="http://www.balisemeteo.com/graphs/graph_vent.php?idBalise=106" width="200" /></a><br />
Balise Signes<br />
<a href="http://www.balisemeteo.com/balise.php?idBalise=112" target="_blank"><img src="http://www.balisemeteo.com/graphs/graph_vent.php?idBalise=112" width="200" /></a><br />
Balise de Rustrel<br />
------------------------------------------------------------------------------------------------------------

Ça te donnera des images des 4 balises, qui renverront vers balisemeteo.com sur une nouvelle page si tu cliques dessus. La différence avec le widget, c'est que ça n'affiche pas les infos détaillées quand tu passes dessus avec la souris. un exemple de ce que tu retrouveras dans ta colonne de droite : http://www.parapente-guyane.com/widgetbalise/wb2.php

Si c'est trop étroit ou trop large, tu changes width="200" et tu mets ta valeur préférée en pixels.

Pour ajouter d'autres balises, tu suis le modèle :

------------------------------------------------------------------------------------------------------------
<a href="http://www.balisemeteo.com/balise.php?idBalise=XXX" target="_blank"><img src="http://www.balisemeteo.com/graphs/graph_vent.php?idBalise=XXX" width="YYY" /></a><br />
Nom de la balise<br />
------------------------------------------------------------------------------------------------------------

Avec
XXX : numéro de balise selon balisemeteo.com
YYY : largeur de l'image en pixels
Nom de la balise : Nom de la balise... mouarf

[lepiafvolant]

le top ;exactement ce que je cherchais   
t'es un champion , alors je te suis mega redevable avec tous ceux qui viennent checker les balises  sur notre site
donc    et  sans oublier 

le resultat mi colonne de droite
http://www.provencedelta.com/

un merci de la part des bâches à tube 

[Gilles Silberzahn]

le top ;exactement ce que je cherchais   
t'es un champion , alors je te suis mega redevable avec tous ceux qui viennent checker les balises  sur notre site
donc    et  sans oublier 

le resultat mi colonne de droite
http://www.provencedelta.com/

un merci de la part des bâches à tube 

Ravi que ça te plaise.

J'avais oublié qu'il n'y avait pas non plus de rafraichissement automatique en utilisant ce code. Si tu veux que les balises se mettent à jour automatiquement, repère la balise <head> qui doit être tout en haut de ta page html. Et entre cette balise et </head>, tu colles :
<meta http-equiv="Refresh" content="1200">

Le chiffre de 1200 est un temps en secondes. Ta page se rafraichira ainsi toute seule toutes les 1200/60=20 minutes, mais tu peux réduire ou augmenter ce chiffre comme tu veux. En phase de test, je le mets sur 10 secondes !!!

[lepiafvolant]

ça suffit amplement , si le lecteur veut plus d'info et de lisibilité , il suffit qu'il clique dessus
la fonction était de donner ou confirmer une tendance rapidement et c'est fait exactement comme on voulait 

encore merci pour le boulot car je sais que le résultat demande bcp de test, d'essai etc etc   
Si tu passes vers le coin de Salon de Provence , fais moi signe , on te doit une    meme une mega   
et crois moi , on a des ressources




Encore un grand merci 

[JC - MARSEILLE PARAPENTE]

le top ;exactement ce que je cherchais   
t'es un champion , alors je te suis mega redevable avec tous ceux qui viennent checker les balises  sur notre site
donc    et  sans oublier 

le resultat mi colonne de droite
http://www.provencedelta.com/

un merci de la part des bâches à tube 

Ravi que ça te plaise.

J'avais oublié qu'il n'y avait pas non plus de rafraichissement automatique en utilisant ce code. Si tu veux que les balises se mettent à jour automatiquement, repère la balise <head> qui doit être tout en haut de ta page html. Et entre cette balise et </head>, tu colles :
<meta http-equiv="Refresh" content="1200">

Le chiffre de 1200 est un temps en secondes. Ta page se rafraichira ainsi toute seule toutes les 1200/60=20 minutes, mais tu peux réduire ou augmenter ce chiffre comme tu veux. En phase de test, je le mets sur 10 secondes !!!

Salut Gilou, peux tu me dire comment les aligner au lieu de les avoir les un par dessus les autres ??

http://marseille-parapente.fr/meteo/

Bises

Jc

[Gilles Silberzahn]

Au dessus de chaque balise tu ajoutes :

Code:

<div align="center" style="float:left; position:relative">

et à la fin de chaque balise

Code:

</div>

[Gilles Silberzahn]

Ce qui donne au final pour chaque balise :
------------------------------------------------------------------------------------------------------------
<div align="center" style="float:left; position:relative; margin:5px">
<a href="http://www.balisemeteo.com/balise.php?idBalise=XXX" target="_blank">
<img src="http://www.balisemeteo.com/graphs/graph_vent.php?idBalise=XXX" width="YYY" /></a><br />
Nom de la balise<br />
</div>
------------------------------------------------------------------------------------------------------------

Avec
XXX : numéro de balise selon balisemeteo.com
YYY : largeur de l'image en pixels
Nom de la balise : Nom de la balise... mouarf

Et si tu veux le nom de la balise au-dessus du graphique, tu mets la ligne 4 entre la ligne 1 & 2.

[JC - MARSEILLE PARAPENTE]

Donc....

http://marseille-parapente.fr/meteo/

Super !!

et si je veux centrer le tout dans la page ??

Bises

[Gilles Silberzahn]

Pour obtenir ça ? http://www.parapente-guyane.com/widgetbalise/mp.html

Tu as juste une ligne à ajouter au dessus et en dessous des lignes qui commandent les balises. Et ça donne ça :


<div style="width:820px;">
    <div style=" float:left; position: relative; margin: 5px;" align="center">
    <h2><span style="color: #888888;">Balise Signes</span></h2>
    <p><a href="http://www.balisemeteo.com/balise.php?idBalise=106" target="_blank"><br />
    <img alt="" src="http://www.balisemeteo.com/graphs/graph_vent.php?idBalise=106" width="400" /></a></p>
    </div>
    <div style="float: left; position: relative; margin: 5px;" align="center">
    <h2><span style="color: #888888;">Balise Ste Victoire</span></h2>
    <p><a href="http://www.balisemeteo.com/balise.php?idBalise=134" target="_blank"><br />
    <img alt="" src="http://www.balisemeteo.com/graphs/graph_vent.php?idBalise=134" width="400" /></a></p>
    </div>
</div>

[Gilles Silberzahn]

Et si tu veux mettre les images en 350 pixels (c'est la taille originale de balisemeteo.com)

<div style="width:720px;">
    <div style=" float:left; position: relative; margin: 5px;" align="center">
    <h2><span style="color: #888888;">Balise Signes</span></h2>
    <p><a href="http://www.balisemeteo.com/balise.php?idBalise=106" target="_blank"><br />
    <img alt="" src="http://www.balisemeteo.com/graphs/graph_vent.php?idBalise=106" width="350" /></a></p>
    </div>
    <div style="float: left; position: relative; margin: 5px;" align="center">
    <h2><span style="color: #888888;">Balise Ste Victoire</span></h2>
    <p><a href="http://www.balisemeteo.com/balise.php?idBalise=134" target="_blank"><br />
    <img alt="" src="http://www.balisemeteo.com/graphs/graph_vent.php?idBalise=134" width="350" /></a></p>
    </div>
</div>

[JC - MARSEILLE PARAPENTE]

Trop fort....

VOLEUR !!!!!

Nan je déconne.

En revanche, j'ai ça qui n'apparait plus sur la page alors que c'est toujours présent dans l'éditeur :

</div>
<script type="text/javascript" src="http://widget.windguru.cz/js/wg_widget.php"></script><script type="text/javascript" language="JavaScript">// <![CDATA[
//              WgWidget({       s : 277240,       odh : 0,       doh : 24,       wj : 'kmh',       tj : 'c',       waj : 'm',       fhours : 72,       lng : 'fr',       params : [ 'WINDSPD', 'GUST', 'SMER', 'TMPE', 'CDC', 'APCPs' ],       first_row : true,       spotname : true,       first_row_minfo : true,       last_row : true,       lat_lon : true,       tz : true,       sun : true,       link_archive : false    }, 'wg_target_div_277240_42941746');
// ]]></script>
<div class="modif_meteo_box_wg"></div>

Tu vois la faute ??

[Gilles Silberzahn]

Non, pas vraiment, mais si tu fais tout bien comme sur le site windguru, tu remplaces ce que tu as écrit par :


</div>

<p>&nbsp;</p>
<div class="modif_meteo_box_wg">
    <p><script type="text/javascript" src="http://widget.windguru.cz/js/wg_widget.php"></script>
    <script type="text/javascript" language="JavaScript">
    //<![CDATA[
    WgWidget({
    s: 277240, odh: 0, doh: 24, wj: 'kmh', tj: 'c', waj: 'm', fhours: 72, lng: 'fr',
    params : [ 'WINDSPD', 'GUST', 'SMER', 'TMPE', 'CDC', 'APCPs' ],
    first_row : true,
    spotname : true,
    first_row_minfo : true,
    last_row : true,
    lat_lon : true,
    tz : true,
    sun : true,
    link_archive : false
    },
    'wg_target_div_277240_42941746'
    );
    //]]>
    </script></p>
    <div id="wg_target_div_277240_42941746"></div>
</div>

Et miracle, ça fonctionne... http://www.parapente-guyane.com/widgetbalise/mp.html

[Prismatique]

Bonjour Gilles !

Je souhaiterais pouvoir utiliser tes widgets balises dans mon site. Celui-ci est sur base Wordpress...

J'ai trouvé un plugin me permettant d'insérer un bout de code PHP, cependant cela ne semble pas fonctionner en copiant juste le code. I
il faut que les fichiers soient présents dans le dossier de la page comme expliqué, je suppose. Cependant, wordpress fonctionnant avec SQL, je n'ai pas de page html pour chaque contenu...

Saurai tu comment je peux m'en sortir dans ce cas ?

Sachant que je suis loin d'être programmeur. Juste bidouilleur averti avec Wordpress...

Merci d'avance !

[Gilles Silberzahn]

Dis-moi d'abord ce que tu veux faire : une page météo ou avoir un widget présent sur toutes tes pages (dans une sidebar ?)

Donne-moi l'adresse de ton site, éventuellement l'adresse de la page si tu as déjà testé le truc.

[Prismatique]

Merci de ton soutien !

Voici le lien vers une page d'exemple :  http://ride-and-cow.fr/ou-voler/basse-normandie.

Lorsque l'on approche le curseur sur une des balises, un pop-up apparait, avec les infos concernées. Pour le moment, Commes & Houlgate sont configurés avec un simple lien html vers l'image de la balise.

Je souhaiterais utiliser ton code pour avoir les "infos de survol", ainsi que les look différents...

Le contenu de ce pop-up se défini en html, en interne à Wordpress (à la manière d'une page ou d'un article). J'ai installé un plugin me permettant d'insérer du code PHP dans ces pages.

Cependant je ne sais ou placer les fichier du dossier "Widgetbalise" de ton pack dans mon install wordpress (Plugins ? ou autres ?) ni même lequel de mes fichiers "index.php" modifier. L'arborescence des répertoires n'étant pas basé sur un principe de dossiers par page...

Merci d'avance !


Off-Topic:

Merci encore de ton Acceuil en Guyane ! j'étais de passage sur 2 jours il y a 1 ans 1/2 au Rorota, j'y ai effectué parmi mes tous premiers plouf autonomes en ta compagnie et tu avais fait un biplace pour mon collègue ! Dédicace t'as été rendue dans une vidéo souvenir >>    
https://vimeo.com/66558880

[cypher]

Salut,

Je ressuscite ce fil de discussion
Il est devenu très facile (enfin pas très compliqué) de récupérer les infos d'une balise, maintenant que la FFVL et les Pioupious se mettent à l'openData.

En gros il faut faire une requête en geojson sur le flux proposé par le fournisseur, lui même en "JSON" (format de données).

    urlFFVL = "https://data.ffvl.fr/json/relevesmeteo.json";
    urlPioupiou = "https://api.pioupiou.fr/v1/live/all";
 
Puis de faire une requête sur le flux en question :
$.getJSON(urlFFVL) // appel en jQuery.

Si ça te parait trop compliqué, tu peux intégrer directement cette page en changeant les paramètres dans l'url (zoom/lat/lon).
via une iframe comme dans le code ci-dessous

<!-- exemple de code HTML affichant les balises rhône-alpes sur votre site -->
<iframe src="https://parapente-mexico.com/balise-ffvl/#8/45.300/3.194" width="100%" height="600"></iframe>

J'ai fait ça en quelques jours. N'hésite pas à farfouiller dans le code pour plus d'infos