Générer une série d'URL à partir de la date et de l'heure

**Beginner.** · 01/06/2016, 13h31

Je pense que ce sont eux qui ajoutent cela sur leur site de présentation mais je ne pense pas que cela concerne le site qui héberge les images... J'ai essayé et j'obtiens la même image avec ou sans ce chiffre, regarde par exemple cette url :

http://meteomaps.s3.amazonaws.com/el...06010000.gif?9

Tu obtiens la même image si tu remplaces le chiffre "9" par n'importe quel autre chiffre et tu peux même ne rien mettre ni le ? ni le chiffre qui vient après...

Enfin vérifie de ton coté mais moi ça semble être la même image...

**plefever** · 01/06/2016, 17h59

Dans l'exemple que tu donne , remplace le 9 par 3 L'image n'est pas la même.
C'est plus évident avec http://www.meteorama.fr/pression-atmospherique/
Aujourd'hui 02:00 donne http://meteomaps.s3.amazonaws.com/el...06010000.gif?7 Alors que si je prend la même adresse sans "?7" et que je l'introduit dans le naviguateur, cela donne : http://meteomaps.s3.amazonaws.com/el...1606010000.gif
Ce n'est pas la même image. Du coup toutes les données fournies par la page que nous avons développée ne sont pas utilisables

Il semble qu'il n'y ai pas vraiment de logique dans ce dernier chiffre... Il faudrait pouvoir le récupérer sur chaque adresse....

**Beginner.** · 01/06/2016, 18h18

J'ai regardé tes exemples et j'ai toujours les mêmes images quelque soit le chiffre, c'est étrange que ce ne soit pas ton cas... Il faudrait que tu postes les images que tu vois pour en avoir le coeur net... Ou peut-être que la différence est si faible que je ne la vois pas...

Il faudrait que d'autres essayaient aussi...

**plefever** · 01/06/2016, 19h05

Dans les trois liens que je donne dans mon message précédent, les deux derniers sont des images avec la même adresse a la petite différence près "?7" Ouvre les dans deux onglets séparés, et passe de l'un à l'autre. Sur une image il y a a deux Basse pressions (B) sur l'autre il n'y en a qu'une.

**Beginner.** · 01/06/2016, 20h02

J'ai fait mieux que ça, j'ai ouvert deux fenêtres pour avoir les deux images l'une à droite et l'autre à gauche et je ne vois pas de différence : il n'y a qu'une seule basse pression (B) comme tu dis (en bas au milieux).

Demande à d'autres de vérifier pour savoir si ça vient de toi ou de moi...

PS : Essaye de vider le cache de ton navigateur au cas où... Ou bien essaye avec Firefox...

**plefever** · 01/06/2016, 21h11

c'est dingue cette histoire.
Si tu prend cette url : http://meteomaps.s3.amazonaws.com/el...06010000.gif?7
remplace le 7 par un 3
Que vois-tu ?

**Beginner.** · 01/06/2016, 22h13

Toujours pareil, il n'y a qu'une seule basse pression (B) (en bas au milieux). J'ai essayé sur Chrome et FF. Je vais essayer sur un autre navigateur...

EDIT : Pareil avec IE et un autre...

Demande à d'autres membres dans un autre fil...

As-tu vidé le cache ou pas ? Essaye avec un proxy aussi juste pour voir si ce n'est pas lié à l'adresse ip...

**plefever** · 02/06/2016, 06h06

Je viens de vider le cache et.... j'ai maintenant la même image avec les deux adresses une seule basse pression.....
J'en déduit (peut être un peu vite) que ce ?et ce chiffre se réfère a différentes versions et qui restent en cache.
Suivant l'évolution des prévisions, ils adaptent leurs cartes et pour la même heure du même jour, ils donnent une nouvelle version de la carte.
Par contre dans notre système, le navigateur va rechercher ce qu'il a dans son cache ?!?! ou plutôt ne rafraîchit pas si il considère qu'il n'y a pas de changement...
Il faut que je creuse un peu là....
Une piste : http://www.webrankinfo.com/dossiers/gwt/parametres-url

**NoSmoking** · 02/06/2016, 21h34

Bonjour,
une piste : Comment contourner le cache afin de réactualiser une image ou une page ?

**plefever** · 05/06/2016, 09h29

Et si dans ma fonction initInput() je rajoute à la fin de l'url +"?"+ Math.random(), je génère un nombre compris entre 0 et 1 avec 16 décimales autrement dit un nombre aléatoire. Le navigateur sera obligé de recharger l'image non ?
En pratique, ça marche la première fois. Un nombre "0,.........." est générer, mais il reste le même à chaque fois que je clique sur affichage.

**Beginner.** · 05/06/2016, 16h11

Envoyé par plefever

Suivant l'évolution des prévisions, ils adaptent leurs cartes et pour la même heure du même jour, ils donnent une nouvelle version de la carte.

Es-tu sûr de cela ? Sur quoi tu te bases ? As-tu un exemple concret ? C'est-à-dire as-tu deux images différentes pour une même url ?

Envoyé par plefever

Par contre dans notre système, le navigateur va rechercher ce qu'il a dans son cache ?!?! ou plutôt ne rafraîchit pas si il considère qu'il n'y a pas de changement...

Au début je ne pense pas puisque les url sont uniques et même si il allait chercher l'image dans le cache cela ne serait problématique que si il était possible qu'on ait deux images différentes pour une même url, ce qui reste à vérifier.

Je doute qu'ils se soient pris la tête comme cela mais c'est à vérifier concrètement au moins avec un exemple...

**plefever** · 05/06/2016, 16h51

Oui, il y a bien des différence d'image pour une même URL suivant le moment de la prévision, ils corrigent les images mais elles gardent la même adresse puisque la date et l'heure sont les mêmes.
J'avais l'exemple lorsque j'ai fait mon message du 01/06/2016, 17h59 (plus haut). Mais maintenant que j'ai rafraîchis le cache de mon navigateur, je n'ai plus qu'une seule image.
Je viens de vérifier avec les images que j'ai chargées ce matin, mais il n'y a pas encore de changement. J'ai des prévisions jusque mercredi 20H au niveau des pressions atmosphérique. Dès qu'ils feront une mise à jour j'aurai des prévisions différentes, et là je pourrai comparer une image d'un jour précis à une heure précise et de la comparer a ce que m'affiche ma propre page. Je ferai une copie d'écran pour illustrer.

**plefever** · 05/06/2016, 21h51

Voilà ce soir je fais une copie d'écran de deux images de même adresse : 201606060900.gif et l'autre 201606060900.gif?4
Nom : 1.jpg
Affichages : 133
Taille : 239,3 Ko

Nom : 1.jpg
Affichages : 133
Taille : 239,3 Ko

Nom : 2.jpg
Affichages : 148
Taille : 256,6 Ko

La différence n'est pas flagrante en regardant les images l'une au dessus de l'autre,, mais en ouvrant les deux images dans deux onglets séparés, c'est évident.

**plefever** · 06/06/2016, 18h46

Confirmation aujourd'hui fin de journée, il y a bien des images différentes avec la même adresse.
Par contre j'ai testé deux versions de notre page.
La première qui génère les adresses sans rien ajouter a l'URL après .gif. Celle-ci affiche l'image qui est dans le cache de Chrome et qui n'est plus celle que l'on peut voir aujourd'hui sur leur site avec la même adresse.
La seconde version avec l'ajoute +"?"+ Math.random() en fin d'URL. Et là, effectivement la page ne reprend plus le cache, mais cherche et trouve la nouvelle image.

Le hic, c'est que ce nombre n'est généré qu'une seule fois. Et lorsque je clique à nouveau sur afficher... il reste le même.
J'ai ajouté à la fonction function initInput() (ligne 215) url = url.slice(0,n+1) +"*.gif"+"?"+ Math.random(); et c'est tout...c'est là qu'il doit me manquer quelque chose...
Voici le code de la page:
Ne faite pas attention à la mise en page, elle n'est pas correcte parce que j'ai laissé la div "affichage" apparente (sans style="display:none") pour voir ce qui se passe dans l'URL.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
<!DOCTYPE html>
 
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Meteorama pression atmosphérique</title>
<link rel="shortcut icon" type="image/x-icon" href="file:///C:/Users/Philippe/Desktop/METEO/images/favicon.ico"> 
    <style type="text/css">
 
body{
    font-family: verdana ;
    font-size:13px
}        
div#titre {
    float: left;
    margin-left: 130px;
    margin-top: -2px;
}
div#selection {
    float: left;
    margin-left: 60px;
    margin-top: 3px;
}
div#bouton-afficher {
    float: left;
    margin-left: 100px;
    margin-top: 1px;
}
div#CtrlS {
    float: left;
    margin-left: 84px;
    margin-top: 3px;
}
div#imagescharge {
    float: right;
    margin-right: 20px;
    margin-top: 3px;
}
div#loader {
    float: left;
    width: 100%;
    margin-top: -4px;
}
#progressBarb{	
    height: 2px;	
	background-color: #2300FF;	
	text-align: right;	
}
#progressBar{
	height: 2px;
	background-color: #CACACA;
	width: 100%;	
}
div#colDate {
    float: left;
    width: 220px;
    height: 544px;
    background: white;
    padding-right: 1px;
    padding-top: 6px;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;    
}
div#conteneur {
    float: left;
    margin-left: 3px;
    margin-top : 6px;
    width: 680px;
    height: 536px;
    background-image:url(images/fond2.gif);      
}
div#liens {
    float: left;
    padding-top : 6px;
    padding-left: 16px;
}
p#info {
	float: left;
	padding-left: 3px;
}     
 
div#legende {
	float: left;
    padding-left: 16px;
    padding-top: 6px;
}    
 
div#msgDateCode {            
    position: absolute;
    left: 6px;
    bottom: 0px;
}
.heures{
    text-align: right ;
    color: blue;
}
 
.heures span {    
    color: white;
    font-weight: bold;
}
 
.selected{
    color: red;
    font-weight: bold;
}
 
div#indic {
float : right;
padding-right: 3px;
 
}
.onoffswitch {
    float: left; width: 120px; margin-top: -5px; margin-bottom: 0
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border-radius: 2px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 24px; padding: 0; line-height: 26px;
    font-family:'Helvetica Neue',Arial,sans-serif;
	font-size:16px;
 
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "HORS LIGNE";
text-align: center;
    background-color: #FF0000; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "EN LIGNE";
 
    background-color: #4285F4; color: #FFFFFF;
    text-align: center;
}
.onoffswitch-switch {
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}
 
</style>
 
    <script type="text/javascript" language="Javascript">
 
function initInputonload() {
 
    var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel"
 
    if (document.body.attachEvent)
          document.body.attachEvent("on" + mousewheelevt, rotateimage);
        else if (document.body.addEventListener)
                 document.body.addEventListener(mousewheelevt, rotateimage, false);   
 
    if (document.getElementById("colDate").attachEvent)
          document.getElementById("colDate").attachEvent("onmouseover", selectHourOnMouseOver);
        else if (document.getElementById("colDate").addEventListener)
                 document.getElementById("colDate").addEventListener("mouseover", selectHourOnMouseOver, false);  
 document.body.addEventListener('keydown', selectImagesWithArrow);   
    var dateTitle = document.title.split("-") ;
 
    if (dateTitle.length === 1) {
        var date = dateToString(new Date());  
        document.getElementById("thedate").value = date[5] ;
        document.getElementById("msgI").innerHTML = "Travail inline ! (vous pouvez modifier la date)";
    }
       else {
          var tabDate = dateTitle[1].split("_") ;
 
          datePageOffLine = tabDate[2] + "-" + tabDate[1] + "-" + tabDate[0] ;
          document.getElementById("thedate").value = datePageOffLine ;
          document.getElementById("thedate").disabled = true;
 
          document.getElementById("offline").checked = true ;
          document.getElementById("msgI").innerHTML = "Travail hors connexion ! La date est celle à laquelle la page a été sauvegardée...";          
       }    
 
    document.getElementById("conteneur").innerHTML = "";
 
    document.getElementById("msgDateCode").innerHTML =  "" ;
    deSelecHour();
    initInput();
    document.getElementById("msg").innerHTML = "Choisissez vos paramètres puis cliquez sur le bouton 'Afficher'";
}
function raz() {
 	document.getElementById("pourcentage").innerHTML = "" ;
	document.getElementById("progressBarb").style.width = 0 + "%";
	document.getElementById("progressBarb").innerHTML = "";
	document.getElementById("nombre").innerHTML = "" ;
} 
var tabDateHoursImagesCode = [];
 
function initInput() {
 
    var url = document.getElementById("affichage").value ;       
 
 
    //http://meteomaps.s3.amazonaws.com/eltiempo/datamaps/eur-pressure-rain-fr-*.gif
 
    var n = url.lastIndexOf("-"); 
    url = url.slice(0,n+1) +"*.gif"+"?"+ Math.random();
    document.getElementById("affichage").value = url;
 
    //dates & heures...
 
    var date = new Date();
    var tabDate = document.getElementById("thedate").value.split("-") ;    
 
    date.setDate(tabDate[2]); date.setMonth(tabDate[1]-1); date.setFullYear(tabDate[0]);     
    tabDateStr = dateToString(date);
    document.getElementById("d1").innerHTML = tabDateStr[0] + " " + tabDateStr[1] ; 
 
 
 
    date.setDate(date.getDate()+1);    
    tabDateStr = dateToString(date); 
    document.getElementById("d2").innerHTML = tabDateStr[0] + " " + tabDateStr[1] ;
 
    date.setDate(date.getDate()+1);    
    tabDateStr = dateToString(date); 
    document.getElementById("d3").innerHTML = tabDateStr[0] + " " + tabDateStr[1] ;
 
	date.setDate(date.getDate()+1);    
    tabDateStr = dateToString(date); 
    document.getElementById("d4").innerHTML = tabDateStr[0] + " " + tabDateStr[1] ;    
 
    date.setDate(tabDate[2]); date.setMonth(tabDate[1]-1); date.setFullYear(tabDate[0]);           
    date.setHours(2); date.setMinutes(0); date.setSeconds(0);
 
    for(var i = 0; i< 31 ; i++) {
        tabDateStr = dateToString(date);
        tabDateHoursImagesCode[i] = tabDateStr[4] ;
        date.setHours(date.getHours()+3);       
    }    
 
    document.getElementById("msg").innerHTML = "Les paramètres ont été modifiés, veuillez cliquer sur le bouton 'Afficher' pour rafraîchir la page...";
}
 
function afficheImages() { 
 
    if(document.getElementById("offline").checked) {
 
        afficheImagesHorsConnexion();
        return;        
    }
 
    var url = document.getElementById("affichage").value;
 
    if (url.indexOf("*") === -1) {
 
      document.getElementById("msg").innerHTML = "L'url doit contenir le caractère '*' ! ";
      return;
    } 
 
    var monImg ;  
    var conteneur = document.getElementById("conteneur");
 
    conteneur.innerHTML = "";    
    nbrImagesLoaded = 0 ;
 
	document.getElementById("pourcentage").innerHTML = "" ;
	document.getElementById("progressBarb").style.width = 0 + "%";
	document.getElementById("nombre").innerHTML = "/31 images";    
    for(var i = 0; i< 31 ; i++) {
 
        monImg = document.createElement('img');     
        monImg.src = url.replace("*", tabDateHoursImagesCode[i]);
        monImg.style.visibility = 'hidden' ;
        monImg.style.position = "absolute";
		monImg.id = "image " + i ;		
		monImg.onload = funcLoadImage ;
        conteneur.appendChild(monImg);
        myimages[i] = monImg ;                   
     }    
 
    selectHourAndImage(currentImage, 0);
 
 
 
    document.getElementById("msg").innerHTML = "La page a été mise à jour(rafraichie). Pour afficher d'autres images choisissez vos paramètres puis cliquez sur le bouton 'Afficher'...";
} 
var nbrImagesLoaded = 0 ;
 
 
function funcLoadImage() {
 
	var pourcentage = 100 * (nbrImagesLoaded+1)/31 ;
 
 
 
	document.getElementById("pourcentage").innerHTML = " " + (nbrImagesLoaded+1);	
	document.getElementById("progressBarb").style.width = pourcentage + "%";
	document.getElementById("nombre").innerHTML = "/31 images";	
 
 
	nbrImagesLoaded++;
} 
function afficheImagesHorsConnexion() {
 
    var url = document.getElementById("affichage").value;    
    var n = url.lastIndexOf("/");          
    var pathImages = "./" + document.title + "_files" + url.slice(n);    
 
    var monImg ;  
    var conteneur = document.getElementById("conteneur");
 
    conteneur.innerHTML = "";
 
    for(var i = 0; i< 31 ; i++) {
 
        monImg = document.createElement('img');     
        monImg.src = pathImages.replace("*", tabDateHoursImagesCode[i]);
        monImg.style.visibility = 'hidden' ;
        monImg.style.position = "absolute";        
        conteneur.appendChild(monImg);
        myimages[i] = monImg ;           
    }
 
    selectHourAndImage(currentImage, 0);
 
 
 
    document.getElementById("msg").innerHTML = "La page a été mise à jour(rafraichie). Pour afficher d'autres images choisissez vos paramètres puis cliquez sur le bouton 'Afficher'";
}
 
var myimages = [];
var currentImage = 0 ;
var nextImage = 0 ;
 
function rotateimage(event) {
 
    if(myimages.length === 0) return ; 
 
    var delta = event.detail ? event.detail * (-120) : event.wheelDelta     //delta returns +120 when wheel is scrolled up, -120 when scrolled down
    nextImage = (delta <= -120) ? nextImage + 1 : nextImage - 1 //move image index forward or back, depending on whether wheel is scrolled down or up    
 
    nextImage = (nextImage < 0) ? 0 : (nextImage > myimages.length - 1) ? myimages.length - 1 : nextImage
 
    selectHourAndImage(currentImage, nextImage);
 
    if (event.preventDefault)
        //disable default wheel action of scrolling page
        event.preventDefault()
    else
        return false ;
}
 
function selectHourOnMouseOver(event){
 
    if(myimages.length === 0) return ;
 
    var idOver = event.target.id ;       
 
    if(idOver.charAt(0)=== "h" || idOver.charAt(0)=== "f") {       
 
        nextImage = +idOver.slice(1);          
        selectHourAndImage(currentImage, nextImage);
  }    
}
        function selectImagesWithArrow(event) {
 
            if (myimages.length === 0) return;
            var touche_Fleche = (event.keyCode === 38) || (event.keyCode === 40);
            if(!touche_Fleche) return;        
            if (event.keyCode === 38) nextImage--;
            else if (event.keyCode === 40) nextImage++;
 
            nextImage = (nextImage < 0) ? 0 : (nextImage > myimages.length - 1) ? myimages.length - 1 : nextImage;
 
            selectHourAndImage(currentImage, nextImage);
 
            if (event.preventDefault)
            //disable default wheel action of scrolling page
                event.preventDefault();
            else
                return false;
 
        }         
function selectHourAndImage(current, next) {
 
    document.getElementById("h" + current).className = "";
    document.getElementById("f" + current).style.color = "";
    myimages[current].style.visibility = "hidden"; 
 
    document.getElementById("h" + next).className = "selected";
    document.getElementById("f" + next).style.color = "red";
    myimages[next].style.visibility = "visible";  
 
    //document.getElementById("msgDateCode").innerHTML = tabDateHoursImagesCode[+strNbrOver];
    document.getElementById("msgDateCode").innerHTML =  "URL : " + myimages[next].src ;
 
    nextImage = next ;     
    currentImage = nextImage ;     
}
 
function deSelecHour(){
 
    for(var i = 0; i< 31 ; i++) {
 
        document.getElementById("h" + i).className = "";
        document.getElementById("f" + i).style.color = "";        
    }    
}
 
function dateToString(date) {
 
    var tab_jour = new Array("Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi");
    var day = date.getDay();
    var ladate = date.getDate(); if (ladate<10) ladate = "0" + ladate ;
    var month = date.getMonth() + 1; if (month<10) month = "0" + month ;
    var year = date.getFullYear();
    var h = date.getHours(); if (h<10) h = "0" + h ;
    var m = date.getMinutes(); if (m<10) m = "0" + m ;
    var s = date.getSeconds(); if (s<10) s = "0" + s ;    
    var h2 = date.getUTCHours() ; if (h2<10) h2 = "0" + h2 ;
 
    var tabResultat = [];    
 
    tabResultat[0] = tab_jour[day]; 
    tabResultat[1] = ladate + "." + month + "." + year ;
    tabResultat[2] = h + ":" + m ;    
    tabResultat[3] = ":" + s ;
    tabResultat[4] = year + month + ladate + h2 + m ;
    tabResultat[5] = year + "-" + month + "-" + ladate ;
    tabResultat[6] = ladate + "_" + month + "_"+ year ;
 
    return tabResultat ;    
}    
 
var datePageOffLine = "" ;
 
function checkOnOffLine() {
 
    if(datePageOffLine === "") {
        if(document.getElementById("offline").checked)        
            document.getElementById("msgI").innerHTML = "Travail hors connexion ! Note : pour afficher la page souhaitée, entrez sa date de sauvegarde puis cliquez sur 'Afficher'..."
                else document.getElementById("msgI").innerHTML = "Travail inline ! (vous pouvez modifier la date)"
 
        initInput();
        return ;
    }
 
    if(document.getElementById("offline").checked) {
 
        document.getElementById("thedate").value = datePageOffLine ;
        document.getElementById("thedate").disabled = true;
        document.getElementById("msgI").innerHTML = "Travail hors connexion ! La date est celle à laquelle la page a été sauvegardée...";
        initInput();
    }
        else {
            var date = dateToString(new Date());  
 
            document.getElementById("thedate").value = date[5] ;
            document.getElementById("thedate").disabled = false ; 
            document.getElementById("msgI").innerHTML = "Travail inline ! (vous pouvez modifier la date)"
            initInput();
        }
}
    </script> 
</head>
 
<body onload="initInputonload();raz()">
 
 
		<div class="onoffswitch">
			<p style="margin-top: 4px">
    		<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="offline" checked="">
    		<label class="onoffswitch-label" for="offline">
        	<span class="onoffswitch-inner"></span>
        	<span class="onoffswitch-switch"></span></label></p>
			<p style="margin-top: 0; margin-bottom:0"></p>
		</div>
		<div id="titre">
			<font face="Arial" size="5">
			<a target="_blank" style="text-decoration: none; color: #0000FF; font-weight:600" href="http://www.meteorama.fr/pression-atmospherique/">Météorama </a>&nbsp;</font><a target="_blank" style="text-decoration: none; vertical-align: middle; color: #0000FF; font-weight:700" href="http://www.meteorama.fr/pression-atmospherique/"><font face="Arial" size="3" color="#707070">Pression-atmosphérique</font></a><b><font face="Arial" size="5" color="#333333">&nbsp; </font></b>   
		</div>
			<input type="date" id="thedate" style="display:none" onchange="initInput(event)">
		<div id="bouton-afficher">
        	<input type="button" name="RefreshButton" style="cursor: pointer" value="Chargement des cartes" onclick="afficheImages();raz()">
        </div>  
        	<input type="text" id="affichage"  value="http://meteomaps.s3.amazonaws.com/eltiempo/datamaps/eur-pressure-rain-fr-*.gif" size="90"><b>
        </b><div id="CtrlS"><b>
			<font color="#707070">Ctrl + S</font></b><font face="Verdana" color="#707070"> pour enregistrer les données.
		</font></div><font face="Verdana" color="#707070">
		<div id="imagescharge">	
			<label id="pourcentage" style="color: red"> 28</label><label id="nombre" style="color: #707070">/31 images</label><p></p>
		</div>
 
				<p id="msg" style="color:blue; font-size:10px; display:none">La page a été mise à jour(rafraichie). Pour afficher d'autres images choisissez vos paramètres puis cliquez sur le bouton 'Afficher'...</p> 
				<p id="msgI" style="color:red; font-weight: bold; display:none">Travail inline ! (vous pouvez modifier la date)</p>
 
    	<div id="loader">
			<div id="progressBar">
			<div id="progressBarb" style="width: 90.3226%;"></div></div>
		</div>
 
 
 
 
 
        <div id="colDate">
            <div style="float:left">
            <b><font face="Verdana" color="#707070"><label id="d1">Dimanche 05.06.2016</label></font></b>
            </div>
            <div class="heures">        
                <label id="h0" class="">02:00<span id="f0" style="font-family: Arial;">►</span></label><br>
                <label id="h1" class="">05:00<span id="f1" style="font-family: Arial;">►</span></label><br>
                <label id="h2" class="">08:00<span id="f2" style="font-family: Arial;">►</span></label><br>
                <label id="h3" class="">11:00<span id="f3" style="font-family: Arial;">►</span></label><br>
                <label id="h4" class="">14:00<span id="f4" style="font-family: Arial;">►</span></label><br>
                <label id="h5" class="">17:00<span id="f5" style="font-family: Arial;">►</span></label><br>
                <label id="h6" class="">20:00<span id="f6" style="font-family: Arial;">►</span></label><br>
                <label id="h7" class="">23:00<span id="f7" style="font-family: Arial;">►</span></label><br>
                &nbsp;
            </div>
            <div style="float:left">
            <b><font face="Verdana" color="#707070"><label id="d2">Lundi 06.06.2016</label></font></b>
            </div>
            <div class="heures">        
                <label id="h8" class="">02:00<span id="f8" style="font-family: Arial;">►</span></label><br>
                <label id="h9" class="">05:00<span id="f9" style="font-family: Arial;">►</span></label><br>
                <label id="h10" class="">08:00<span id="f10" style="font-family: Arial;">►</span></label><br>
                <label id="h11" class="">11:00<span id="f11" style="font-family: Arial;">►</span></label><br>
                <label id="h12" class="">14:00<span id="f12" style="font-family: Arial;">►</span></label><br>
                <label id="h13" class="">17:00<span id="f13" style="font-family: Arial;">►</span></label><br>
                <label id="h14" class="">20:00<span id="f14" style="font-family: Arial;">►</span></label><br>
                <label id="h15" class="">23:00<span id="f15" style="font-family: Arial;">►</span></label><br>
                &nbsp;
            </div>
            <div style="float:left">
            <b><font face="Verdana" color="#707070"><label id="d3">Mardi 07.06.2016</label></font></b>
            </div>
            <div class="heures">        
                <label id="h16" class="">02:00<span id="f16" style="font-family: Arial;">►</span></label><br>
                <label id="h17" class="">05:00<span id="f17" style="font-family: Arial;">►</span></label><br>
                <label id="h18" class="">08:00<span id="f18" style="font-family: Arial;">►</span></label><br>
                <label id="h19" class="">11:00<span id="f19" style="font-family: Arial;">►</span></label><br>
                <label id="h20" class="">14:00<span id="f20" style="font-family: Arial;">►</span></label><br>
                <label id="h21" class="">17:00<span id="f21" style="font-family: Arial;">►</span></label><br>
                <label id="h22" class="">20:00<span id="f22" style="font-family: Arial;">►</span></label><br>
                <label id="h23" class="">23:00<span id="f23" style="font-family: Arial;">►</span></label><br>
                &nbsp;
            </div>
            <div style="float:left">
            <b><font face="Verdana" color="#707070"><label id="d4">Mercredi 08.06.2016</label></font></b>
            </div>
            <div class="heures">        
                <label id="h24" class="">02:00<span id="f24" style="font-family: Arial;">►</span></label><br>
                <label id="h25" class="">05:00<span id="f25" style="font-family: Arial;">►</span></label><br>
                <label id="h26" class="">08:00<span id="f26" style="font-family: Arial;">►</span></label><br>
                <label id="h27" class="">11:00<span id="f27" style="font-family: Arial;">►</span></label><br>
                <label id="h28" class="">14:00<span id="f28" style="font-family: Arial;">►</span></label><br>
                <label id="h29" class="">17:00<span id="f29" style="font-family: Arial;">►</span></label><br>
                <label id="h30" class="selected">20:00<span id="f30" style="font-family: Arial; color: red;">►</span></label><br>
 
			</div>
        </div>
 
<div id="conteneur"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606050000.gif" id="image 0" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606050300.gif" id="image 1" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606050600.gif" id="image 2" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606050900.gif" id="image 3" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606051200.gif" id="image 4" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606051500.gif" id="image 5" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606051800.gif" id="image 6" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606052100.gif" id="image 7" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606060000.gif" id="image 8" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606060300.gif" id="image 9" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606060600.gif" id="image 10" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606060900.gif" id="image 11" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606061200.gif" id="image 12" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606061500.gif" id="image 13" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606061800.gif" id="image 14" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606062100.gif" id="image 15" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606070000.gif" id="image 16" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606070300.gif" id="image 17" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606070600.gif" id="image 18" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606070900.gif" id="image 19" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606071200.gif" id="image 20" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606071500.gif" id="image 21" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606071800.gif" id="image 22" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606072100.gif" id="image 23" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606080000.gif" id="image 24" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606080300.gif" id="image 25" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606080600.gif" id="image 26" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606080900.gif" id="image 27" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606081200.gif" id="image 28" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606081500.gif" id="image 29" style="visibility: hidden; position: absolute;"><img src="./Meteorama pression atmosphérique_files/eur-pressure-rain-fr-201606081800.gif" id="image 30" style="visibility: visible; position: absolute;"></div>
<div id="legende"><img src="./Meteorama pression atmosphérique_files/VP.gif" width="120" height="536">
</div>
<div id="liens" style="width: 189px; height: 237px">
	Autres sources:
	<p><a href="file:///C:/Users/Philippe/Desktop/METEO/Meteorama%20m%C3%A9t%C3%A9o%20marine.html">Météorama météo marine</a></p>
	<p><a href="file:///C:/Users/Philippe/Desktop/METEO/Meteo%20Consorzio%20Lamma.html">Consorsio Lamma</a></p>
	<p><a href="file:///C:/Users/Philippe/Desktop/METEO/Meteo%20Consorzio%20Lamma%20HR.html">Consorsio Lamma HR</a></p>
</div>
 
<div id="msgDateCode" style="color:#C0C0C0;">URL : http://meteomaps.s3.amazonaws.com/eltiempo/datamaps/eur-pressure-rain-fr-201606081800.gif</div>
 
 
</font></body></html>

**plefever** · 07/06/2016, 08h00

J'ai trouvé un petit utilitaire bien intéressant pour visualiser le cache de chrome : ChromeCacheView 1.67
Le cache enregistre bien les données avec le point d’interrogation et la valeur qui suit.
Il faut donc générer à chaque fois une nouvelle valeur pour obliger chrome a recharger une nouvelle image.
Quelqu'un pour m'aider ? (voir mon message précédent)
Merci

**plefever** · 07/06/2016, 09h05

J'ai rajouté initInput() (ligne 493) dans le "onclick" du bouton "chargement des cartes"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

493        	<input type="button" name="RefreshButton" style="cursor: pointer" value="Chargement des cartes" onclick="afficheImages();raz();initInput()">

Est-ce correct comme ça ?

**Beginner.** · 07/06/2016, 23h05

Envoyé par plefever

La seconde version avec l'ajoute +"?"+ Math.random() en fin d'URL. Et là, effectivement la page ne reprend plus le cache, mais cherche et trouve la nouvelle image.

Le hic, c'est que ce nombre n'est généré qu'une seule fois. Et lorsque je clique à nouveau sur afficher... il reste le même.

Envoyé par plefever

Il faut donc générer à chaque fois une nouvelle valeur pour obliger chrome a recharger une nouvelle image.
Quelqu'un pour m'aider ? (voir mon message précédent)

Pour générer un nombre différent on peut aussi utiliser la fonction getTime(); comme ceci : var n = new Date().getTime(); où n est un nombre entier qui change chaque milliseconde (c'est le nombre de millisecondes écoulé depuis le 01/01/1970).

Mais est-ce que cela ne serait pas plus simple de vider le cache à chaque fois ? Je dis ça car je me demande comment ça va se passer pour l'affichage hors connexion, faudra-t-il rajouter le "?" + le nombre aux url ? Ce qui supposerait de sauvegarder ce nombre à chaque fois d'où quelques complications...

**Beginner.** · 07/06/2016, 23h41

Envoyé par plefever

J'ai ajouté à la fonction function initInput() (ligne 215) url = url.slice(0,n+1) +"*.gif"+"?"+ Math.random(); et c'est tout...c'est là qu'il doit me manquer quelque chose...

On peut aussi l'ajouter dans la fonction afficheImages()en remplacant ceci :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
for (var i = 0; i < 24; i++) {
 
                monImg = document.createElement('img');
                monImg.style.visibility = 'hidden';
                monImg.style.position = "absolute";
 
                monImg.id = "image " + i;
                monImg.onload = funcLoadImage;
                monImg.src = url.replace("*", tabDateHoursImagesCode[i]) ;
 
                conteneur.appendChild(monImg);
                myimages[i] = monImg;
            }

par cela :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var n = new Date().getTime();
 
            for (var i = 0; i < 24; i++) {
 
                monImg = document.createElement('img');
                monImg.style.visibility = 'hidden';
                monImg.style.position = "absolute";
 
                monImg.id = "image " + i;
                monImg.onload = funcLoadImage;
                monImg.src = url.replace("*", tabDateHoursImagesCode[i]) + "?" + n ;
 
                conteneur.appendChild(monImg);
                myimages[i] = monImg;
            }

Les changements sont à la ligne 1 et 11...

Le nombre n (var n = new Date().getTime();) devrait être différent à chaque fois que tu cliques sur le bouton "GO" et donc le "src" des images devrait être différent à chaque fois : monImg.src = url.replace("*", tabDateHoursImagesCode[i]) + "?" + n ;

**plefever** · 08/06/2016, 06h12

Exact ça marche aussi comme ça.
J'ai remplacé Math.random() par new Date().getTime() dans la fonction initInput() et ça marche tout aussi bien. La le nombre généré sera toujours différent.
Ça ne semble poser aucun problème pour l'affichage hors connexion.
Merci !

Voilà le sujet à nouveau résolu (si cette fois il n'y a plus de nouveau grain de sable dans la machine)

Générer une série d'URL à partir de la date et de l'heure

JavaScript

Discussions similaires

Partager

Partager