Comment modifier une partie d'url à l'aide de deux balises select en JS ?

Version imprimable

Voir 40 message(s) de cette discussion en une page

02/04/2016, 20h29
Beginner.

Je pense qu'il les remplace quand ils ont le même noms (il suffit de regarder les dates et heures).

Si tu sépares, comme je disais cela me semble possible mais il faudra suivre une certaine logique pour les noms et l'emplacement de ces dossiers.

Est-ce que ce que je t'ai proposé te convient : "Pour aider à nommer les dossiers on peut mettre à chaque fois les paramètres (région, type, intervalle) dans le titre (quand tu fais ctrl+s c'est ce titre qui t'es proposé comme nom). Par exemple on aurait : un fichier html : "Meteo Consorzio Lamma-Méditerranée-Vent-[1-7].html" "

Le dossier aura alors pour nom : "Meteo Consorzio Lamma-Méditerranée-Vent-[1-7]_files"
03/04/2016, 06h47
plefever

Jusqu'ici, je créais les dossiers à l'avance et je leurs donnais un nom simple: Corse vent, ou Cote d'azur Houle, etc.. Au moment d'enregistrer la page, je choisissais le dossier correspondant. Le classement était simple.
Je pense que ce n'est pas pénalisant de continuer comme ça...mais je teste la version 1 seul dossier et c'est assez séduisant... Chrome ne remplace que les nouvelles images. La case à cocher est pratique, il faudrait peut être juste marquer de manière très claire que l'on consulte hors connexion pour éviter de se faire piéger à lire de vieux fichiers alors qu'on est en ligne (un message d'alerte rouge gras par ex)
J'ai bien envie de tester plus à fond cette méthode dossier unique..
qu'en pense-tu ?
03/04/2016, 07h17
Beginner.

Citation:

Envoyé par plefever

Jusqu'ici, je créais les dossiers à l'avance et je leurs donnais un nom simple: Corse vent, ou Cote d'azur Houle, etc.. Au moment d'enregistrer la page, je choisissais le dossier correspondant. Le classement était simple.

C'est toujours possible d'avoir des dossiers séparés mais pas de cette manière si tu veux que ce soit simple et automatisé, en effet pour cela il faut une certaine logique pour les noms et l'emplacement de ces dossiers : Par exemple le nom du dossier serait de la forme : "region type" comme les exemples que tu donnes : "Corse vent" ou "Cote d'azur Houle". Et pour l'emplacement de ces dossiers : il faudrait qu'il soit dans le même répertoire que le fichier html.

Mais comme j'ai dis il suffit d'une différence d'un caractère dans le nom pour que cela ne fonctionne pas...

C'est pourquoi je t'ai proposé pour aider à nommer les dossiers de mettre à chaque fois (de manière automatique par programme) les paramètres région et type dans le titre (quand tu fais ctrl+s c'est ce titre qui t'es proposé comme nom). Par exemple on aurait : un fichier html : "Méditerranée Vent.html" et le dossier aura alors pour nom : "Méditerranée Vent_files"...

C'est donc facile comme ça tu auras des dossiers séparés et bien nommés et au bon emplacement...

Si la partie "_files" dans le nom du dossier te gêne tu peux la supprimer mais perso je la laisserai car c'est du travail en plus à faire à chaque fois à la main, cela me semble pénible...

Citation:

Envoyé par plefever

Je pense que ce n'est pas pénalisant de continuer comme ça...mais je teste la version 1 seul dossier et c'est assez séduisant... Chrome ne remplace que les nouvelles images. La case à cocher est pratique, il faudrait peut être juste marquer de manière très claire que l'on consulte hors connexion pour éviter de se faire piéger à lire de vieux fichiers alors qu'on est en ligne (un message d'alerte rouge gras par ex)
J'ai bien envie de tester plus à fond cette méthode dossier unique..
qu'en pense-tu ?

Les deux sont possibles donc c'est vraiment à toi de choisir ce qui tu convient le mieux, c'est toi l'utilisateur.

Ceci je comprends mieux pourquoi tu voulais des dossiers séparés car c'est vrai que c'est plus facile si tu veux supprimer de vielles images correspondant à une région et un type données mais garder les autres images correspondant aux autres régions et types...
03/04/2016, 07h55
Beginner.

Citation:

Envoyé par plefever

Jusqu'ici, je créais les dossiers à l'avance et je leurs donnais un nom simple: Corse vent, ou Cote d'azur Houle, etc.. Au moment d'enregistrer la page, je choisissais le dossier correspondant. Le classement était simple.

Finalement après réflexion tu peux faire comme ça si tu préfères, tu auras dans chaque répertoire : un fichier .html et un dossier.
03/04/2016, 08h47
plefever

Amusant nos échanges ;) Parce que finalement, en allant chercher du pain, je me suis dit que la solution avec un seul dossier et la case à cocher hors connexion me plait bien. En une seule page j'ai accès à toutes les données en connexion et hors connexion. Les données sont à 5 jours de prévisions, donc pour faire du tri de temps en temps, il me suffira de classer les images par dates dans le dossier et d'effacer par lot tout ce qui est supérieur à 5 jours.
Ne change rien de ton dernier script, il est très bien :)
Si il est possible de faire le "lecteur" d'image dans la page, c'est le paradis.

Consorzio Lamma est un site météo fiable, mais je consulte d'autres site comme météo France aussi pour faire des comparaisons. Il y en a un d'ailleurs qui nomme ses images par année, mois, jour et heure UTC. Je réfléchit aussi à un script qui reconstitue ces adresses. Mais c'est une autre histoire.
03/04/2016, 09h05
Beginner.

Hihihi... Ok donc on passe "lecteur" d'image...

Pour cela il y a une chose à noter :

Avec le code que tu as posté, les images sont chargés à chaque fois que tu utilises la roulette (l'image suivante écrasant la précédente). Ce n'est pas trop gênant hors connexion car tes images sont stockées dans le disque dur donc c'est rapide... Mais inline par contre on télécharge à chaque fois l'image, ça lance à chaque fois une requête au site, ce qui n'est trop sympa pour le site en plus d'une possibilité que l'affichage soit plus lent...

Donc le truc ce serait de continuer à injecter toutes les images dans la page mais d'en rendre visible qu'une à la fois (les images sont donc chargées qu'une fois).

J’essaie de voir...

A suivre...

Voilà ce que j'ai fait :

Code:

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
 
<!DOCTYPE html>
<html>
<head>
    <title>Meteo Consorzio Lamma</title>
    <meta charset="UTF-8">
    <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);
 
    conteneur.innerHTML = "";
    initInput();
    document.getElementById("msg").innerHTML = "Choisissez vos paramètres puis cliquez sur le bouton 'GO' pour afficher les images...";
}
 
function changementParametre(event) {
 
    document.getElementById("msg").innerHTML = "Les paramètres ont été modifiés, veuillez cliquer sur le bouton 'GO' pour rafraîchir la page...";
 
    if (event === undefined) return ;
 
    var elemBegin = document.getElementById("nbrBegin");
    var elemEnd = document.getElementById("nbrEnd"); 
    var nbrBegin = +elemBegin.value;
    var nbrEnd = +elemEnd.value;
 
    if(nbrBegin > nbrEnd) 
        if(event.target.id === "nbrBegin") elemEnd.value = nbrBegin ;
            else elemBegin.value = nbrEnd ;
}
 
function initInput() {
 
    var url = document.getElementById("affichage").value ;       
    var type = document.getElementById("type").value;
    var region = document.getElementById("region").value;    
 
    var n = url.lastIndexOf("/"); 
    url = url.slice(0,n+1) + type + "_" + region + "_web_*.png";
    document.getElementById("affichage").value = url;
 
    changementParametre();
}
 
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 nbrBegin = +document.getElementById("nbrBegin").value;
    var nbrEnd = +document.getElementById("nbrEnd").value; 
    var monImg ;  
    var conteneur = document.getElementById("conteneur");
 
    conteneur.innerHTML = "";
 
    for (var i= nbrBegin; i<= nbrEnd; i++) {
 
        monImg = document.createElement('img');     
        monImg.src = url.replace("*", i);
        monImg.style.visibility = 'hidden' ;
        monImg.style.position = "absolute";
        conteneur.appendChild(monImg);           
    }
 
    document.images[0].style.visibility = "visible";    
    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 'GO'...";
}
 
 
 
function afficheImagesHorsConnexion() {
 
    var url = document.getElementById("affichage").value;    
    var n = url.lastIndexOf("/");          
    var pathImages = "./" + document.title + "_files" + url.slice(n);    
 
    var nbrBegin = +document.getElementById("nbrBegin").value;
    var nbrEnd = +document.getElementById("nbrEnd").value; 
    var monImg ;  
    var conteneur = document.getElementById("conteneur");
 
    conteneur.innerHTML = "";
 
    for (var i= nbrBegin; i<= nbrEnd; i++) {
 
        monImg = document.createElement('img');     
        monImg.src = pathImages.replace("*", i);
        monImg.style.visibility = 'hidden' ;
        monImg.style.position = "absolute";        
        conteneur.appendChild(monImg);           
    }
 
    document.images[0].style.visibility = "visible";
    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 'GO'...";
}
 
 
var myimages = document.images;
var currentImage = 0 ;
var nextImage = 0 ;
 
function rotateimage(e) {
 
    if(myimages.length === 0) return ;
 
    var evt = window.event || e     //equalize event object
    var delta = evt.detail ? evt.detail * (-120) : evt.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
 
 
    myimages[currentImage].style.visibility = "hidden";    
    myimages[nextImage].style.visibility = "visible";
    currentImage = nextImage ;
 
    if (evt.preventDefault)
        //disable default wheel action of scrolling page
        evt.preventDefault()
    else
        return false ;
 
}
    </script>
 
</head>
 
<body onLoad="initInputonload()" style="font-family:verdana; font-size:13px">
 
    <div>Paramètres  :   
        <select size="1" id="region" onChange="initInput()">
            <option value="AA">Méditerranée</option>
            <option value="K">Baléares</option>
            <option value="R">Valencia</option>
        </select>
 
        <select size="1" id="type" onChange="initInput()">
            <option value="wind10m">Vent</option>
            <option value="mwp">Houle</option>
        </select>  
        Images de :
        <input type="number" id="nbrBegin" onChange="changementParametre(event)"  value="1" min="0" max="60">
        à :
        <input type="number" id="nbrEnd" onChange="changementParametre(event)"  value="1" min="0" max="60">
        <input type="checkbox" id="offline">Travail hors connexion 
    </div> 
 
    <div>        
        <input type="button" name="RefreshButton" value="GO" style="cursor:pointer; color:red; font-weight:bold;" onClick="afficheImages()">       
        <input type="text" id="affichage" value="http://www.lamma.rete.toscana.it/models/ventoemare/TYPE_REGION_web_*.png"; size="79">
        <p id="msg" style="color:blue">...</p>
    </div>  
    <hr>
 
    <div id="conteneur"></div>
 
</body>
</html>

05/04/2016, 09h29
plefever

Magnifique !!! :D:D:D
Il me semble que tout fonctionne bien.
Je me réjouis de tester tout ça bien à fond dès que je peux.
Merci beaucoup pour ton aide plus que précieuse !!!!
Si tu as le temps, jette un peu un œil sur ce site
Les cartes sont intéressantes et nommées comme suit : année+mois+jour+heureUTC (ex:201604050000 ou 201604050300 jusque 201604081800)
Donc une image toutes les 3 heures jusqu'a 4 jours
Le "codage" est simple et logique, on pourrait le générer dans un script proche de ce que tu as fait...
Qu'en pense-tu ?
06/04/2016, 02h16
Beginner.

Citation:

Envoyé par plefever

Si tu as le temps, jette un peu un œil sur ce site

J'ai été voir ce site et j'ai essayé de comprendre comment il fonctionne et cela m'a confirmé (sauf si j'ai mal compris) que j'avais bien fait de changer le code pour éviter de faire des requêtes (chargement (à partir du disque dur) ou téléchargement (à partir du site) selon qu'on travaille avec ou sans connexion) à chaque fois qu'on fait défiler les images... Dans le dernier code normalement toutes les images ne sont chargées qu'une fois au début après avoir cliqué sur "GO", ensuite les images sont dans la page et on peut les faire défiler...

Dans le site ils utilisent le cache du navigateur apparemment (je ne sais pas comment on fait cela), là aussi les images sont chargées au début seulement... Par contre il semble que les images ne soient pas toutes dans la même page ce qui explique que lorsque tu fais ctrl+s seule une image est copiée dans le dossier se terminant par "_files" !!! Est-ce pour cela que tu veux faire ta propre page ?

Si oui alors sache que j'ai testé et apparemment (à moins que quelque chose m'est échappée) tu peux travailler hors connexion même si les images ne sont pas dans le dossier se terminant par "_files" car elles sont stockées dans le cache du navigateur, il te suffit donc de copier la page (ctrl+s) et ne pas vider ton cache bien sûr...

Mais c'est peut-être pour une autre raison ? Je trouve que leur façon de faire défiler les images n'est pas mal du tout, avec le passage de la souris sur chaque heure ou bien de manière automatique en cliquant sur "animation" (d'ailleurs j'avais pensé à ce genre de fonctionnalité) mais c'est vrai qu’apparemment il n'y a pas le défilement avec la roulette...

Citation:

Envoyé par plefever

Les cartes sont intéressantes et nommées comme suit : année+mois+jour+heureUTC (ex:201604050000 ou 201604050300 jusque 201604081800)
Donc une image toutes les 3 heures jusqu'a 4 jours

Alors oui il faut aussi la première partie de l'url et on voit que c'est par exemple :

http://meteomaps.s3.amazonaws.com/eltiempo/datamaps/eur-pressure-rain-fr-201604070300.gif

J'ai regardé ce qu'est ce amazonaws.com et apparemment c'est un site qui offre un service de stockage et justement j'ai vu qu’apparemment chaque requête GET était payante ! Alors faire des requêtes à chaque fois qu'on fait défiler les images cela a un cout en plus d'être plus lent... D'où une des raisons d’éviter cela...

Citation:

Envoyé par plefever

Le "codage" est simple et logique, on pourrait le générer dans un script proche de ce que tu as fait...
Qu'en pense-tu ?

Oui cela me semble faisable car justement j'avais changé le code pour qu'on puisse changer la première partie de l'url, par contre il faut d'autres changements pour la dernière partie aussi car les paramètres sont différents...

Mais le site propose déjà un affichage plutôt bien et il est aussi possible de travailler hors connexion comme déjà dit...

Ce qui serait bien ce serait de charger les images à partir du cache pour éviter de faire d'autres requêtes...
06/04/2016, 07h20
plefever

Merci pour tes observations.
Je voudrai faire de la même manière avec météorama. C'est a dire faire des choix déroulants pour les "zones" et pour les "types" le bouton GO et pouvoir les lires avec le lecteur à roulette hors connexion aussi. Exactement comme le premier.
La différence est qu'il faut générer la fin de l'adresse par année (0000), mois (00), jour (00), et heure UTC (0000) L'heure UTC =heure locale - 2 H en été, et - 1 H en hiver.
Une image toute les 3H et sur 4 jours ce qui donne:
201604160000
0300
0600
0900
1200
1500
1800
2100
201604170000
0300
0600
...etc
En tout 25 images
Une autre difficulté est que la date et l'heure n'est pas indiquée sur l'image. Il faudrait donc refaire un affichage qui correspond à chaque image (en heure local et/ou UTC)
Leur lecteur à eux est intéressant pour la lecture de la date et heure, mais ils auraient du utiliser la roulette aussi. A faire monter ou descendre le pointeur sur la colonne de gauche tout en regardant les images à droite, on quitte facilement la route..
Il y a d'autres cartes qui m'intéresse aussi sur ce site par ex celle-ci : http://www.meteorama.fr/lion-provence/ L'adressage est toujours le même.
C'est surtout générer les dates/heures qui me pose difficulté.
06/04/2016, 23h02
Beginner.

J'ai compris mais il faudrait que tu présentes le problème comme pour le premier cas où tu avais posté un code avec des selects (contenant les options région et type) et le input contenant la forme générale de l'url (genre pour un des cas ce serait : http://meteomaps.s3.amazonaws.com/eltiempo/datamaps/eur-pressure-rain-fr-dateheure.gif).

Je te suggère d'ailleurs d'ouvrir un autre fil car dans celui-ci on a traité plusieurs questions et la première et les suivantes ont été résolues donc en principe dans ce cas on doit mettre "résolu"... Et aussi j'ai l'impression que lorsqu'un fil devient trop long cela dissuade les autres membres d'intervenir (ce qui est dommage quand même) je suppose parce qu'entre autres on n'a pas forcément envie de tout lire pour répondre... Enfin ce n'est qu'une suggestion...

PS : Sinon pour la date, j'ai pensé utiliser l'objet "Date" en JS : ici, j'ai déjà commencé à travailler la question et je posterai dans l'autre fil si tu l'ouvres...

Voir 40 message(s) de cette discussion en une page