18008 sujets

Questions générales et questions de débutants

Récupérer des données pages web

Pages :
Bonjour à tous,
Je viens vous demander de l'aide.
Je ne connais presque rien a l'html et je veux créer une page sur un site internet du club (via e-monsite)
J'ai récupéré des lignes de code en cherchant sur le net, pour avoir des informations actualisées de balises FFVL (balises météo parapente)
Sur la page que j'ai créée, apparait bien le logo de la balise actualisé mais je ne sais comment faire apparaître les valeurs qui sont données sur le site de la FFVL.
Je vous copie le code que j'ai mis: 
<div align="center" style=" float:center; position: relative; margin: 5px;"> 
<h2><span style="color:#0000CD;"><span style="font-family:times new roman,times,serif;"><em><span style="font-size:24px;">Poët-Laval</span></em></span></span><span style="color:#0000CD;"><span style="font-size:24px;"></span></span><br /> 
<a href="http://www.balisemeteo.com/balise.php?idBalise=2089" target="_blank"><img alt="" src="http://www.balisemeteo.com/graphs/graph_vent.php?idBalise=2089" width="200" /></a></h2> 
</div>

avec le résultat en image:
upload/1585917122-79385-poetlavalvisuel.png

je souhaite voir apparaitre aussi les valeurs de cette balise N°2089 que l'on peut retrouver sur cette page:
http://www.balisemeteo.com/balise.php?idBalise=2089

Les valeurs que je souhaite récupérer sont: orientation du vent et vitesse du vent et les placer comme indiquées sur l'image, qui provient du site de la FFVL:
upload/1585917186-79385-poetlaval.png

Vous pouvez peut-être trouver les valeurs sur cette page aussi:
https://balisemeteo.com/balise_json.php?idBalise=2089

J'espère avoir été assez clair dans mes explications et que quelqu'un pourra m'aider
Dans l'attente d'une réponse, bien cordialement
Yvan
Salut,

Je t'ai bricolé un scrapper avec ton lien qui va récupérer tes valeurs !
Il te reste juste à placer les éléments html comme tu veux Smiley biggrin
N'hésites pas si tu as des questions.


<!DOCTYPE html>
<html>
 
	<head>
   
		<script>
			
			document.addEventListener('DOMContentLoaded', function () {

				baliseValues.init();

			});

			const baliseValues = ( function () {

				const modifyCors = function () {

					( function () {

						const cors_api_host = 'cors-anywhere.herokuapp.com';
						const cors_api_url = 'https://' + cors_api_host + '/';
						const slice = [].slice;
						const origin = window.location.protocol + '//' + window.location.host;
						const open = XMLHttpRequest.prototype.open;

						XMLHttpRequest.prototype.open = function () {

							const args = slice.call(arguments);
							const targetOrigin = /^https?:\/\/([^\/]+)/i.exec(args[1]);

							if ( targetOrigin && targetOrigin[0].toLowerCase() !== origin && targetOrigin[1] !== cors_api_host ) {

								args[1] = cors_api_url + args[1];

							}

							return open.apply(this, args);

						};

					}) ();

				};

				const getHtmlSource = function () {

					modifyCors();

					let xhr = new XMLHttpRequest();
					xhr.open('GET', 'http://www.balisemeteo.com/balise.php?idBalise=2089');
					xhr.addEventListener('readystatechange', function() {

						if ( xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200 ) {

							const htmlSource =  xhr.responseText.split('">');
							const moyenDirection = htmlSource[20].split('<')[0];
							const moyenVitesse = htmlSource[23].split('<')[0];
							const maxiDirection = htmlSource[27].split('<')[0];
							const maxiVitesse = htmlSource[30].split('<')[0];
							
							displayValues(moyenDirection,moyenVitesse,maxiDirection,maxiVitesse);

						}

					});

					xhr.send(null); 

				};
				
				const displayValues = function (moyenDirection,moyenVitesse,maxiDirection,maxiVitesse) {
				
					divLoading.innerHTML = "";
					
					divMoyenDirection.innerHTML += moyenDirection;
					divMoyenVitesse.innerHTML += moyenVitesse;
					divMaxiDirection.innerHTML += maxiDirection;
					divMaxiVitesse.innerHTML += maxiVitesse;
				
				};

				return { init : getHtmlSource };

			})();

		</script>
     
	</head>

	<body>

		<div id="divLoading" style="color:red">Patientez, chargement en cours ...</div>
		
		<div>VENT MOYEN</div>
		<div id="divMoyenDirection">Direction: </div>
		<div id="divMoyenVitesse">Vitesse: </div>
		<br>
		<div>VENT MAXI</div>
		<div id="divMaxiDirection">Direction: </div>
		<div id="divMaxiVitesse">Vitesse: </div>

	</body>
   
</html>
Bonsoir,
Tout d'abord un grand merci Stryck pour ton aide et ta réponse aussi rapide.
J'ai commencé à bidouiller ton code pour l'ajuster a ma sauce.
J'y arrive à peu près, cependant pour cette balise 2089 ca fonctionne bien (20s environ d'attente...) et je récupère les valeurs, par contre si je rentre un autre numéro de balise par ex le N°28 ca ne fonctionne pas ca me donne des infos qui ne sont pas les bonnes.
Je suppose que la mise en page de la source n'est peut-être pas agencée de la même façon et du coup tes lignes (si j'ai bien analysé): 
const moyenDirection = htmlSource[20].split('<')[0];
							const moyenVitesse = htmlSource[23].split('<')[0];
							const maxiDirection = htmlSource[27].split('<')[0];
							const maxiVitesse = htmlSource[30].split('<')[0];

n'affichent pas les même champs.
N'y aurait-il pas un moyen de récupérer les données depuis cette page,dont la mise en page est identique pour toutes les balises?
https://balisemeteo.com/balise_json.php?idBalise=28
Je vais continuer à bosser dessus pour me faire la main et si tu trouves quelque chose tiens moi au courant.
Encore merci
Yvan
Ahhhh je n'avais pas vu le lien avec le json Smiley lol Smiley lol
Du coup je vais te refaire un js beaaaaaaucoup plus simple Smiley biggrin et ça ne bougera pas quelque soit la balise.
Re, bon ce n'était pas si simple, souci de json ou de cors avec une url + argument.
J'ai donc trouvé un lien qui renvoi toutes les balises Smiley lol
Ensuite on va chercher la bonne balise dans le json stocké !

Voici ce que tu cherche Smiley cligne 

<!DOCTYPE html>
<html>
 
	<head>
   
		<script>
			
			document.addEventListener('DOMContentLoaded', function () {

				// ICI LE N° DE BALISE
				const baliseNumber = "2089";
				getHtmlSource(baliseNumber);

			});


				const getHtmlSource = function (thisBalise) {

					let xhr = new XMLHttpRequest();
					xhr.open('GET', 'http://data.ffvl.fr/json/relevesmeteo.json',true);
					xhr.addEventListener('readystatechange', function() {

						if ( xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200 ) {

							const baliseList = JSON.parse(this.response);

							for ( let i = 0; i < baliseList.length; i++ ) {
							
								if ( baliseList[i].idbalise == thisBalise ) {
									
									const moyenDirection = baliseList[i].directVentMoy;
									const moyenVitesse = baliseList[i].vitesseVentMoy;
									const maxiDirection = baliseList[i].directVentInst;
									const maxiVitesse = baliseList[i].vitesseVentMax;
									
									displayValues(moyenDirection,moyenVitesse,maxiDirection,maxiVitesse);
								
								}
							
							}
							
						}

					});

					xhr.send(null); 

				};
				
				const displayValues = function (moyenDirection,moyenVitesse,maxiDirection,maxiVitesse) {
				
					divLoading.innerHTML = "";
					
					divMoyenDirection.innerHTML += moyenDirection;
					divMoyenVitesse.innerHTML += moyenVitesse;
					divMaxiDirection.innerHTML += maxiDirection;
					divMaxiVitesse.innerHTML += maxiVitesse;
				
				};

		</script>
     
	</head>

	<body>

		<div id="divLoading" style="color:red">Patientez, chargement en cours ...</div>
		
		<div>VENT MOYEN</div>
		<div id="divMoyenDirection">Direction: </div>
		<div id="divMoyenVitesse">Vitesse: </div>
		<br>
		<div>VENT MAXI</div>
		<div id="divMaxiDirection">Direction: </div>
		<div id="divMaxiVitesse">Vitesse: </div>

	</body>
   
</html>
Bonjour Stryk

Tu es vraiment au top et j'aimerais en savoir bien plus et ne pas bidouiller comme je le fais.
Cette nouvelle version est bien aussi mais visuellement une information a disparu de part le fait qu'elle n'est pas donnée dans le fichier Json, c'est la direction du vent, style NNE ou S....
Nous n'avons dans ce fichier que des valeurs en °.
Pour les utilisateurs de mon club c'est moins parlant.
J'ai travaillé un peu sur ton premier fichier et j'ai réussi à faire ça.
J'ai rajouté la température et la luminosité.
seulement je galère à faire la mise en page comme indiqué sur l'image jointe.
je te renvoie le code que j'ai modifié et malgré mes recherches sur le net, je n'ai pas trouvé pour aligner la div des valeurs recueillies avec l'image FFVL.
Je souhaite aussi centrer le bulletin météo sous l'image FFVL et que le nom du site soit centré juste au dessus de l'image FFVL.
Peut-etre j'abuse un peu de ton temps mais en tout cas ton aide à été précieuse et le fait d'avoir ton code m'a permis d'y bidouiller dedans et ça m'a appris beaucoup de choses.
Tout ceci m'était réellement inconnu une semaine auparavant.
upload/1585992311-79385-stjeanmiseenpage.png

Le code bidouillé par moi Smiley sweatdrop 
<!DOCTYPE html>
<html>
 
	<head>
    
       
   
		<script>
			
			document.addEventListener('DOMContentLoaded', function () {

				baliseValues.init();

			});

			const baliseValues = ( function () {

				const modifyCors = function () {

					( function () {

						const cors_api_host = 'cors-anywhere.herokuapp.com';
						const cors_api_url = 'https://' + cors_api_host + '/';
						const slice = [].slice;
						const origin = window.location.protocol + '//' + window.location.host;
						const open = XMLHttpRequest.prototype.open;

						XMLHttpRequest.prototype.open = function () {

							const args = slice.call(arguments);
							const targetOrigin = /^https?:\/\/([^\/]+)/i.exec(args[1]);

							if ( targetOrigin && targetOrigin[0].toLowerCase() !== origin && targetOrigin[1] !== cors_api_host ) {

								args[1] = cors_api_url + args[1];

							}

							return open.apply(this, args);

						};

					}) ();

				};

				const getHtmlSource = function () {

					modifyCors();

					let xhr = new XMLHttpRequest();
					xhr.open('GET', 'http://www.balisemeteo.com/balise.php?idBalise=28');
					xhr.addEventListener('readystatechange', function() {

						if ( xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200 ) {

							const htmlSource =  xhr.responseText.split('">');
							const moyenDirection = htmlSource[19].split('<')[0];
							const moyenVitesse = htmlSource[22].split('<')[0];
							const maxiDirection = htmlSource[26].split('<')[0];
							const maxiVitesse = htmlSource[29].split('<')[0];
							const temperature = htmlSource[35].split('<')[0];
							const luminosite = htmlSource[37].split('<')[0];
							
							displayValues(moyenDirection,moyenVitesse,maxiDirection,maxiVitesse,temperature,luminosite);

						}

					});

					xhr.send(null); 

				};
				
				const displayValues = function (moyenDirection,moyenVitesse,maxiDirection,maxiVitesse,temperature,luminosite) {
				
					divLoading.innerHTML = "";
					
					divMoyenDirection.innerHTML += moyenDirection;
					divMoyenVitesse.innerHTML += moyenVitesse;
					divMaxiDirection.innerHTML += maxiDirection;
					divMaxiVitesse.innerHTML += maxiVitesse;
					divTemperature.innerHTML += temperature;
					divLuminosite.innerHTML += luminosite;
				
				};

				return { init : getHtmlSource };

			})();

		</script>
     
	</head>

	<body>
        <h1>
        <div id="divLoading" style="color:red">...</div>
        </h1>
		<h2>
      <div align="center" style="font-size:22px;color:blue";><em>St-Jean-en-Royans</em></div>
      
        </h2>
        <h3>
    
            <div style=" border-color: #849460; border-style:solid;
            border-width: 2px; border-radius: 10px; width:110px; margin:auto; text-align:center; padding:5px;">

        <div align="float" style="color:blue" id="divMoyenDirection"></div>
        <div align="float" style="color:blue" id="divMoyenVitesse" ></div>
       
		<div align="float" style="color:red" id="divMaxiDirection" ></div>
		<div align="float" style="color:red" id="divMaxiVitesse" ></div>
		<div align="float" style="color:black" id="divTemperature"></div>
		<div align="left" style="color:black" id="divLuminosite">Lum: </div>
		
         </h3>

        <h4><div 
            align="center"
            <a href="http://www.balisemeteo.com/balise.php?idBalise=28" target="_blank"><img alt="" src="http://www.balisemeteo.com/graphs/graph_vent.php?idBalise=28" width="200" /></a>
			</div></h4>

			<iframe src='http://www.vigimeteo.com/widget_vigi_dep_s.html?a=263070&b='  width='425' height='268' frameborder='0' > 
				<p>Votre navigateur est incompatible avec les iframes.</p></iframe>
			
            

        
    
    </body>
    
   
</html>


Il y a certainement des <h> qui ne servent à rien...
Un grand merci pour ta patience aussi,
Yvan
Je peux insérer nord sud etc avec la valeur en degré ( on ajoute juste une fonction )
Pour les autres infos que tu veux elles sont aussi dans le lien qui récupère toutes les balises.
Si tu veux je te fais une page avec un sélecteur de balise:
Au démarrage tu choisis ta balise dans la liste et ça affiche les infos que tu veux avec le graph Smiley biggrin
Enfin si c'est ce que tu veux
Pour les infos je suis d'accord avec le deuxième code, mais il faut simplement que les valeurs de directions correspondent a celles de la FFVL et soient non pas extrapolées.
Si sur le site de la FFVL la balise indique par ex NNE il ne faut pas que les valeurs transcrites soient NE...
sur ce lien tu dois pouvoir trouver pleins de relevés mis à la dispo par la FFVL
https://data.ffvl.fr/pmwiki/
sinon oui je suis d'accord pour rajouter un sélecteur mais il faut voir comment l'intégrer, peut être avec un menu déroulant et les noms des balises, plutôt que leur ID car c'est par le nom qu'on les connait.
Pour notre club jai fait une page avec nos balises favorites et cela j'y tiens, mais oui on peut rajouter pour tester un sélecteur de balises.
je ne sais pas exactement combien de balises en france...
le lien vers notre page web des balises:
http://www.tichodromes.com/pages/balises/
merci...
Je voulais dire qu'un angle correspond à une direction ^
Donc il suffit de faire un petit switch pour donner une valeur directionnelle.
Par exemple
180 = S
0 = N
...
Entre 180 et 225 = SSE
Etc
C'est pas extrapolé c'est des maths Smiley cligne
Bien sur je voulais dire, par extrapolé que notre système de calcul mathématique doit être le me que celui de la FFVL pour que les indications correspondent exactement à celles de la FFVL.
Je te laisse le soin de gérer ca bien sur! Smiley cligne
les maths ca me plait... Smiley merci
Bon, déjà pour compléter les données, dis-moi si un truc ne te conviens pas.
Ensuite on va mettre en forme tout ça ^


<!DOCTYPE html>
<html>
 
	<head>
   
		<script>
			
			document.addEventListener('DOMContentLoaded', function () {

				// ICI LE N° DE BALISE
				const baliseNumber = "28";
				getHtmlSource(baliseNumber);

			});


				const getHtmlSource = function (thisBalise) {

					let xhr = new XMLHttpRequest();
					xhr.open('GET', 'http://data.ffvl.fr/json/relevesmeteo.json',true);
					xhr.addEventListener('readystatechange', function() {

						if ( xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200 ) {

							const baliseList = JSON.parse(this.response);

							for ( let i = 0; i < baliseList.length; i++ ) {

								if ( baliseList[i].idbalise == thisBalise ) {
									
									const moyenDirection = getCardinalDirection(baliseList[i].directVentMoy) + ' - ' + baliseList[i].directVentMoy + '°';
									const moyenVitesse = baliseList[i].vitesseVentMoy + ' Km/h';
									const maxiDirection = getCardinalDirection(baliseList[i].directVentInst) + ' - ' + baliseList[i].directVentInst + '°';
									const maxiVitesse = baliseList[i].vitesseVentMax + ' Km/h';
									const luminosite = baliseList[i].LUM == null ? "NC" : baliseList[i].LUM + ' %';
									const temperature = baliseList[i].temperature == null ? "NC" : baliseList[i].temperature + ' °C';
									
									displayValues(moyenDirection,moyenVitesse,maxiDirection,maxiVitesse,luminosite,temperature);
								
								}
							
							}
							
						}

					});

					xhr.send(null); 

				};
				
				const getCardinalDirection = function (degreeValue) {
				
					let cardinal = "null";
					const degree = parseInt(degreeValue);
					
					if ( degree > 348.5 && degree < 11.5 || degree == 0 ) cardinal = 'N';
					if ( degree > 11 && degree < 34 ) cardinal = 'NNE';
					if ( degree > 33.5 && degree < 56.5 ) cardinal = 'NE';
					if ( degree > 56 && degree < 79 ) cardinal = 'ENE';
					if ( degree > 78.5 && degree < 101.5 ) cardinal = 'E';
					if ( degree > 101 && degree < 124 ) cardinal = 'ESE';
					if ( degree > 123.5 && degree < 146.5 ) cardinal = 'SE';
					if ( degree > 146 && degree < 169 ) cardinal = 'SSE';
					if ( degree > 168.5 && degree < 191.5 ) cardinal = 'S';
					if ( degree > 191 && degree < 214 ) cardinal = 'SSO';
					if ( degree > 213.5 && degree < 236.5 ) cardinal = 'SO';
					if ( degree > 236 && degree < 259 ) cardinal = 'OSO';
					if ( degree > 258.5 && degree < 281.5 ) cardinal = 'O';
					if ( degree > 280 && degree < 304 ) cardinal = 'ONO';
					if ( degree > 303.5 && degree < 326.5 ) cardinal = 'NO';
					if ( degree > 326 && degree < 349 ) cardinal = 'NNO';
					
					return cardinal;
				
				};
				
				const displayValues = function (moyenDirection,moyenVitesse,maxiDirection,maxiVitesse,luminosite,temperature) {
				
					divLoading.innerHTML = "";
					
					divMoyenDirection.innerHTML += moyenDirection;
					divMoyenVitesse.innerHTML += moyenVitesse;
					divMaxiDirection.innerHTML += maxiDirection;
					divMaxiVitesse.innerHTML += maxiVitesse;
					divLum.innerHTML += luminosite;
					divTemp.innerHTML += temperature;
				
				};

		</script>
     
	</head>

	<body>

		<div id="divLoading" style="color:red">Patientez, chargement en cours ...</div>
		
		<div>VENT MOYEN</div>
		<div id="divMoyenDirection">Direction: </div>
		<div id="divMoyenVitesse">Vitesse: </div>
		<br>
		<div>VENT MAXI</div>
		<div id="divMaxiDirection">Direction: </div>
		<div id="divMaxiVitesse">Vitesse: </div>
		<br>
		<div id="divTemp">Température: </div>
		<div id="divLum">Luminosité: </div>

	</body>
   
</html>
C'est bien ça ,avec le nom de la balise que je rajouterai en tête du graph FFVL
J'ai oublié de te dire que quelquefois la balise ne communique pas ou elle est en maintenance.
La date et l'heure peuvent être bien pour valider que les données soient celles du jour et les dernières.
Si anomalies la FFVL présente le problème comme ceci:

upload/1586013336-79385-relevnplusde30mn.png

ou comme ceci:
upload/1586013365-79385-relevnnondisponible.png

sinon c'est bon pour les infos.
il y a un défaut d'affichage quand ouvre une page html:

merci pour ta rapidité!!! Smiley smile
Ah c'est l'encodage du fichier Smiley cligne
essaye en ajoutant ça dans le <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


Je ne t'oublie hein, je bosse sur ton html Smiley cligne
Bonjour du soir ^
Petites modifs tardives pour coller avec tes remarques, rien fait encore sur la mise en forme Smiley decu 


<!DOCTYPE html>
<html>
 
	<head>
	
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   
		<script>
			
			document.addEventListener('DOMContentLoaded', function () {

				// ICI LE N° DE BALISE
				const baliseNumber = "2089";
				getHtmlSource(baliseNumber);

			});


				const getHtmlSource = function (thisBalise) {

					let xhr = new XMLHttpRequest();
					xhr.open('GET', 'http://data.ffvl.fr/json/relevesmeteo.json',true);
					xhr.addEventListener('readystatechange', function() {

						if ( xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200 ) {

							const baliseList = JSON.parse(this.response);

							for ( let i = 0; i < baliseList.length; i++ ) {

								if ( baliseList[i].idbalise == thisBalise ) {
									console.log(baliseList[i].date);
									const dateInfo = getDifferenceDate(baliseList[i].date) > 1800 ? '<img src="https://i.ya-webdesign.com/images/warning-png-27.png" style="width:24px;"></img><span style="color:red;"> Le relevé date de plus de 30mn</span>' : '';
									const moyenDirection = baliseList[i].directVentMoy == null ? "NC" : getCardinalDirection(baliseList[i].directVentMoy) + ' - ' + baliseList[i].directVentMoy + '°';
									const moyenVitesse = baliseList[i].vitesseVentMoy == null ? "NC" : baliseList[i].vitesseVentMoy + ' Km/h';
									const maxiDirection = baliseList[i].directVentInst == null ? "NC" : getCardinalDirection(baliseList[i].directVentInst) + ' - ' + baliseList[i].directVentInst + '°';
									const maxiVitesse = baliseList[i].vitesseVentMax == null ? "NC" : baliseList[i].vitesseVentMax + ' Km/h';
									const luminosite = baliseList[i].LUM == null ? "NC" : baliseList[i].LUM + ' %';
									const temperature = baliseList[i].temperature == null ? "NC" : baliseList[i].temperature + ' °C';
									
									displayValues(dateInfo,moyenDirection,moyenVitesse,maxiDirection,maxiVitesse,luminosite,temperature);
								
								}
							
							}
							
						}

					});

					xhr.send(null); 

				};
				
				const getCardinalDirection = function (degreeValue) {
				
					let cardinal = "null";
					const degree = parseInt(degreeValue);
					
					if ( degree > 348.5 && degree < 11.5 || degree == 0 ) cardinal = 'N';
					if ( degree > 11 && degree < 34 ) cardinal = 'NNE';
					if ( degree > 33.5 && degree < 56.5 ) cardinal = 'NE';
					if ( degree > 56 && degree < 79 ) cardinal = 'ENE';
					if ( degree > 78.5 && degree < 101.5 ) cardinal = 'E';
					if ( degree > 101 && degree < 124 ) cardinal = 'ESE';
					if ( degree > 123.5 && degree < 146.5 ) cardinal = 'SE';
					if ( degree > 146 && degree < 169 ) cardinal = 'SSE';
					if ( degree > 168.5 && degree < 191.5 ) cardinal = 'S';
					if ( degree > 191 && degree < 214 ) cardinal = 'SSO';
					if ( degree > 213.5 && degree < 236.5 ) cardinal = 'SO';
					if ( degree > 236 && degree < 259 ) cardinal = 'OSO';
					if ( degree > 258.5 && degree < 281.5 ) cardinal = 'O';
					if ( degree > 280 && degree < 304 ) cardinal = 'ONO';
					if ( degree > 303.5 && degree < 326.5 ) cardinal = 'NO';
					if ( degree > 326 && degree < 349 ) cardinal = 'NNO';
					
					return cardinal;
				
				};
				
				const getDifferenceDate = function (thisDate) {
				
					const actualDate = Date.now();
					const baliseDate = Date.parse(thisDate);
					const differenceDate = ( actualDate - baliseDate ) / 1000;
					
					return differenceDate; // en secondes
				
				};
				
				const displayValues = function (dateInfo,moyenDirection,moyenVitesse,maxiDirection,maxiVitesse,luminosite,temperature) {
				
					const checkMaintenance = moyenDirection + moyenVitesse + maxiDirection + maxiVitesse + luminosite + temperature;
					divError.innerHTML = checkMaintenance == "NCNCNCNCNCNC" ? "!!! BALISE EN MAINTENANCE !!!" : dateInfo;
				
					divMoyenDirection.innerHTML += moyenDirection;
					divMoyenVitesse.innerHTML += moyenVitesse;
					divMaxiDirection.innerHTML += maxiDirection;
					divMaxiVitesse.innerHTML += maxiVitesse;
					divLum.innerHTML += luminosite;
					divTemp.innerHTML += temperature;
				
				};

		</script>
     
	</head>

	<body>

		<div id="divError"></div>
		<br>
		<div>VENT MOYEN</div>
		<div id="divMoyenDirection">Direction: </div>
		<div id="divMoyenVitesse">Vitesse: </div>
		<br>
		<div>VENT MAXI</div>
		<div id="divMaxiDirection">Direction: </div>
		<div id="divMaxiVitesse">Vitesse: </div>
		<br>
		<div id="divTemp">Température: </div>
		<div id="divLum">Luminosité: </div>

	</body>
   
</html>
Bonjour Stryk,

J'ai testé le dernier code:
--Peut-on faire apparaitre la date et l'heure du relevé pour que l'utilisateur puisse vérifier que c'est bien la dernière balise.
Généralement les balises sont mises à jour toutes les 10mn sauf erreur (siteFFVL)

--j'ai testé avec la balise 168 Nyons: problème, pas d'affichage d'erreur de balise en maintenance.
--J'ai testé la balise 2089 Poët-laval: problème, pas d'affichage du message "le relevé date de plus de 30mn"

sinon les problèmes d'affichage relevant de l'utf 8 sont bien corrigés Smiley clapclap
Merci
Ps: et moi aussi j'admire ce travail!!!
et ce qui est d'autant plus intéressant, c'est que j'ai les fichiers qui suivent l'évolution et c'est très formateur, merci...
Hello,

Test ce code avec Firefox ou Chrome (petit souci sous IE effectivement je regarde pourquoi )
J'ai rectifié pour la partie "en maintenance" !

Si date + 30mn:
upload/1586078388-79129-11.jpg

Si balise introuvable:
upload/1586078432-79129-12.jpg

Et si tout va bien:
upload/1586078449-79129-13.jpg 



<!DOCTYPE html>
<html>
 
	<head>
	
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   
		<script>
			
			document.addEventListener('DOMContentLoaded', function () {

				// ICI LE N° DE BALISE
				const baliseNumber = "2089";
				getHtmlSource(baliseNumber);

			});


				const getHtmlSource = function (thisBalise) {

					let xhr = new XMLHttpRequest();
					xhr.open('GET', 'http://data.ffvl.fr/json/relevesmeteo.json',true);
					xhr.addEventListener('readystatechange', function() {

						if ( xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200 ) {

							const baliseList = JSON.parse(this.response);
							var baliseFound = false;

							for ( let i = 0; i < baliseList.length; i++ ) {

								if ( baliseList[i].idbalise == thisBalise ) {
									
									var dateInfo = getDifferenceDate(baliseList[i].date) > 1800 ? '<img src="https://i.ya-webdesign.com/images/warning-png-27.png" style="width:24px;"></img><span style="color:red;"> Le relevé date de plus de 30mn</span>' : '';
									var baliseInfo = 'ID Balise: ' + baliseList[i].idbalise;
									var baliseDate = baliseList[i].date == null ? "NC" : baliseList[i].date;
									var moyenDirection = baliseList[i].directVentMoy == null ? "NC" : getCardinalDirection(baliseList[i].directVentMoy) + ' - ' + baliseList[i].directVentMoy + '°';
									var moyenVitesse = baliseList[i].vitesseVentMoy == null ? "NC" : baliseList[i].vitesseVentMoy + ' Km/h';
									var maxiDirection = baliseList[i].directVentInst == null ? "NC" : getCardinalDirection(baliseList[i].directVentInst) + ' - ' + baliseList[i].directVentInst + '°';
									var maxiVitesse = baliseList[i].vitesseVentMax == null ? "NC" : baliseList[i].vitesseVentMax + ' Km/h';
									var luminosite = baliseList[i].LUM == null ? "NC" : baliseList[i].LUM + ' %';
									var temperature = baliseList[i].temperature == null ? "NC" : baliseList[i].temperature + ' °C';
									baliseFound = true;
								
								}
							
							}
							
							if ( baliseFound ) {
							
								displayValues(dateInfo,baliseInfo,baliseDate,moyenDirection,moyenVitesse,maxiDirection,maxiVitesse,luminosite,temperature);
								
							} else {
							
								divError.innerHTML = '<span style="color:red">!!! BALISE ' + thisBalise + ' EN MAINTENANCE !!!</span>';
							
							}
							
						}

					});

					xhr.send(null); 

				};
				
				const getCardinalDirection = function (degreeValue) {
				
					var cardinal = "null";
					const degree = parseInt(degreeValue);
					
					if ( degree > 348.5 && degree < 11.5 || degree == 0 ) cardinal = 'N';
					if ( degree > 11 && degree < 34 ) cardinal = 'NNE';
					if ( degree > 33.5 && degree < 56.5 ) cardinal = 'NE';
					if ( degree > 56 && degree < 79 ) cardinal = 'ENE';
					if ( degree > 78.5 && degree < 101.5 ) cardinal = 'E';
					if ( degree > 101 && degree < 124 ) cardinal = 'ESE';
					if ( degree > 123.5 && degree < 146.5 ) cardinal = 'SE';
					if ( degree > 146 && degree < 169 ) cardinal = 'SSE';
					if ( degree > 168.5 && degree < 191.5 ) cardinal = 'S';
					if ( degree > 191 && degree < 214 ) cardinal = 'SSO';
					if ( degree > 213.5 && degree < 236.5 ) cardinal = 'SO';
					if ( degree > 236 && degree < 259 ) cardinal = 'OSO';
					if ( degree > 258.5 && degree < 281.5 ) cardinal = 'O';
					if ( degree > 280 && degree < 304 ) cardinal = 'ONO';
					if ( degree > 303.5 && degree < 326.5 ) cardinal = 'NO';
					if ( degree > 326 && degree < 349 ) cardinal = 'NNO';
					
					return cardinal;
				
				};
				
				const getDifferenceDate = function (thisDate) {
				
					const actualDate = Date.now();
					const baliseDate = Date.parse(thisDate);
					const differenceDate = ( actualDate - baliseDate ) / 1000;
					
					return differenceDate; // en secondes
				
				};
				
				const displayValues = function (dateInfo,baliseInfo,baliseDate,moyenDirection,moyenVitesse,maxiDirection,maxiVitesse,luminosite,temperature) {
				
					divError.innerHTML = dateInfo;
					divID.innerHTML = baliseInfo;
					divTime.innerHTML += baliseDate;
					divMoyenDirection.innerHTML += moyenDirection;
					divMoyenVitesse.innerHTML += moyenVitesse;
					divMaxiDirection.innerHTML += maxiDirection;
					divMaxiVitesse.innerHTML += maxiVitesse;
					divLum.innerHTML += luminosite;
					divTemp.innerHTML += temperature;
				
				};

		</script>
     
	</head>

	<body>

		<div id="divError"></div>
		<div id="divID"></div>
		<div id="divTime">Heure du relevé: </div>
		<br>
		<div>VENT MOYEN</div>
		<div id="divMoyenDirection">Direction: </div>
		<div id="divMoyenVitesse">Vitesse: </div>
		<br>
		<div>VENT MAXI</div>
		<div id="divMaxiDirection">Direction: </div>
		<div id="divMaxiVitesse">Vitesse: </div>
		<br>
		<div id="divTemp">Température: </div>
		<div id="divLum">Luminosité: </div>

	</body>
   
</html>
Ok ça fonctionne sous firefox mais j'utilise safari c'est pour ca que ca ne devait pas s'afficher.
Sous Safari c'est ok pour "Balise en maintenance" ex:balise 168
mais ça ne marche pas pour " le relevé date de plus de 30mn" ex:balise 2089
...
je te mets la pression, hein? Smiley cligne
Ah ... et je n'ai pas safari pour tester ...
Tu peux essayer de placer un alert juste après la déclaration de dateInfo et voir avec la balise 2089 ce que ça donne !


var dateInfo = getDifferenceDate(baliseList[i].date) > 1800 ? '<img src="https://i.ya-webdesign.com/images/warning-png-27.png" style="width:24px;"></img><span style="color:red;"> Le relevé date de plus de 30mn</span>' : '';
// A AJOUTER
alert(dateInfo);
var baliseInfo = 'ID Balise: ' + baliseList[i].idbalise;
Pages :
Sujet clos
Aller à