source: trunk/gpx.npemap.org.uk/tracer.html @ 473

Last change on this file since 473 was 473, checked in by Nick Burch, 13 years ago

More access keys

File size: 11.9 KB
Line 
1<html>
2<head>
3        <title>New Popular Edition - GPX Tracer</title>
4        <style type="text/css">
5                body {
6                        background-color: #dddddd;
7                }
8                div#images {
9                        border: 0;
10                        margin: 0;
11                        padding: 0;
12                        width: 760px;
13                        float: left;
14                }
15                div.tilerow {
16                        border: 0;
17                        margin: 0;
18                        padding: 0;
19                }
20                img.tile {
21                        width: 250px;
22                        height: 250px;
23                        border: 0;
24                        margin: 0;
25                }
26                td {
27                        text-align: center;
28                }
29                #calibration {
30                        color: #990000;
31                }
32        </style>
33
34        <!-- Include the Yahoo libraries -->
35        <script src="js/yahoo.js"></script> 
36        <script src="js/dom.js"></script> 
37        <script src="js/connection.js"></script>
38        <script src="js/event.js"></script> 
39</head>
40<body id="body">
41
42<div id="images">
43        <div id="row1" class="tilerow"><img src="empty-tile.png" class="tile" id="row1-img1" /><img src="empty-tile.png" class="tile" id="row1-img2" /><img src="empty-tile.png" class="tile" id="row1-img3" /></div>
44        <div id="row2" class="tilerow"><img src="empty-tile.png" class="tile" id="row2-img1" /><img src="empty-tile.png" class="tile" id="row2-img2" /><img src="empty-tile.png" class="tile" id="row2-img3" /></div>
45        <div id="row3" class="tilerow"><img src="empty-tile.png" class="tile" id="row3-img1" /><img src="empty-tile.png" class="tile" id="row3-img2" /><img src="empty-tile.png" class="tile" id="row3-img3" /></div>
46</div>
47
48<div style="float: right">
49        <div style="height: 100px">&nbsp;</div>
50        <div id="controls">
51                <table>
52                        <tr><td colspan="3" style="align: center">
53                                <a href="" id="north" accesskey="n">north</a>
54                        </td></tr>
55                        <tr><td>
56                                <a href="" id="west" accesskey="w">west</a>
57                        </td><td /><td>
58                                <a href="" id="east" accesskey="e">east</a>
59                        </td></tr>
60                        <tr><td colspan="3" style="align: center">
61                                <a href="" id="south" accesskey="s">south</a>
62                        </td></tr>
63                        <tr><td colspan="3" style="align: center">
64                                <br /><br />
65                                <a href="" id="browse">browse map</a>
66                        </td></tr>
67                </table>
68        </div>
69        <div id="actions">
70                <br /><br />
71                <a href="javascript:request_calibrate()" accesskey="c">calibrate</a>
72                <br />
73                <a href="#help">(calibration help)</a>
74                <br /><br />
75                <a href="javascript:request_gpx()" accesskey="g">generate GPX</a>
76                <br />
77                <a href="javascript:request_track()" accesskey="t">generate Track</a>
78                <br /><br />
79                <a href="/">home</a>
80        </div>
81        <div id="calibration">
82                <br /><br />
83                <span id="calibrateE"></span>
84                <br />
85                <span id="calibrateN"></span>
86        </div>
87</div>
88
89<br style="clear: both" />
90<br /><br />
91
92<div id="help">
93        To correct orthorectification issues, select calibrate above, then
94        click on a 4-way grid square tile join (where 4 grid squares meet).
95        Repeat for each of the 4 of these joins on the map.
96        <img src="good-join.jpg" alt="example of a 4 way join between grid squares" />
97        <br /><br />
98        When in calibration mode, the screen background will go green to alert
99        you. After you click, the calibration error will be (re)calculated and
100        shown, and the background will return to grey. You will need to click
101        the calibration button again before entering the next tile join.
102        <br />
103        It is not advisable to try to calibrate across map sheet joins, as
104        different sheets tend to have different errors.
105        <img src="bad-join.jpg" alt="example of a cross-sheet join between grid squares" />
106</div>
107
108<br /><br />
109
110<div id="gpxdiv" style="width: 100%">
111        <a name="gpx"></a>
112        <textarea name="gpxbox" id="gpxbox" style="width: 100%; height: 250"></textarea>
113        <input type="button" value="Generate GPX" onclick="do_gpx()" />
114        <input type="button" value="Generate Track" onclick="do_track()" />
115</div>
116
117
118<script type="text/javascript" src="js/jscoord-1.1.1.js"></script>
119<script type="text/javascript">
120var ia = document.getElementById("images");
121
122// Calculation stuff
123var eastings = new Array();
124var northings = new Array();
125var pointPosX = new Array();
126var pointPosY = new Array();
127
128// Our calibration
129var errorEasting = 0;
130var errorNorthing = 0;
131var errorsEasting = new Array();
132var errorsNorthing = new Array();
133var clickIsCalibration = false;
134
135// The last image we added
136// (So we can swap colours)
137var lastPointImg = null;
138
139// Calibration functions
140function request_calibrate() {
141        clickIsCalibration = true;
142        document.getElementById("body").style.backgroundColor = "#77ff77";
143}
144function do_calibrate(x, y, clickX, clickY) {
145        clickIsCalibration = false;
146        document.getElementById("body").style.backgroundColor = "";
147
148        // What corner are we near?
149        if(x > 0.5) { x = x - 1.0; }
150        if(y > 0.5) { y = y - 1.0; }
151
152        // We have calculated where the corner is on the map
153        // We need to apply the same value to all edits
154        var errNum = errorsEasting.length;
155        errorsEasting[errNum] = x;
156        errorsNorthing[errNum] = y;
157
158        // Compute new average
159        errorEasting = 0;
160        errorNorthing = 0;
161        for(var i=0; i<errorsEasting.length; i=i+1) {
162                errorEasting = errorEasting + errorsEasting[i];
163                errorNorthing = errorNorthing + errorsNorthing[i];
164        }
165        errorEasting = Math.round(errorEasting / errorsEasting.length * 1000);
166        errorNorthing = Math.round(errorNorthing / errorsNorthing.length * 1000);
167
168        // Draw other cross
169        var cross = new Image();
170        cross.src = "7x7-red-cross.png";
171        ia.appendChild(cross);
172        cross.style.position = "absolute";
173        cross.style.top = clickY - 3; 
174        cross.style.left = clickX - 3;
175
176        // Tell them about it
177        var csE = document.getElementById("calibrateE");
178        while(csE.hasChildNodes()) {
179                csE.removeChild( csE.firstChild );
180        }
181        csE.appendChild( document.createTextNode("Easting is out by " + errorEasting + "m" ) );
182
183        var csN = document.getElementById("calibrateN");
184        while(csN.hasChildNodes()) {
185                csN.removeChild( csN.firstChild );
186        }
187        csN.appendChild( document.createTextNode("Northing is out by " + errorNorthing + "m" ) );
188}
189
190function request_gpx() {
191        // Zoom to the box
192        document.location.href="#gpx";
193
194        // Do the build
195        do_gpx();
196}
197
198function request_track() {
199        // Zoom to the box
200        document.location.href="#gpx";
201
202        // Do the build
203        do_track();
204}
205
206function do_gpx() { points_to_gpx(true); }
207function do_track() { points_to_gpx(false); }
208
209function points_to_gpx(full_gpx) {
210        var gpxArea = document.getElementById("gpxbox");
211
212        var now = new Date();
213        function pad(val) {
214                if(val < 10) { return "0" + val; }
215                return val;
216        }
217        var nowDate = now.getFullYear() + "-" + pad(now.getMonth()+1) + "-" + 
218                                        pad(now.getDate()) + "T" + pad(now.getHours()) + ":" +
219                                        pad(now.getMinutes()) + ":" + pad(now.getSeconds()) + "Z";
220
221        var gpx =
222                        '<?xml version="1.0"?>\n' +
223                        '<gpx\n' +
224                        'version="1.0"\n' +
225                        'creator="NPE to GPX Converter - http://gpx.npemap.org.uk/"\n' +
226                        'xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"\n' +
227                        'xmlns="http://www.topografix.com/GPX/1/0"\n' +
228                        'xsi:schemaLocation="http://www.topografix.com/GPX/1/0 http://www.topografix.com/\n' +
229                        'GPX/1/0/gpx.xsd">\n' +
230                        '<time>' + nowDate + '</time>\n';
231        if(!full_gpx) { gpx = ""; }
232
233        gpx += '<trk><trkseg>\n';
234        var gpxEnd = '</trkseg></trk>\n';
235        if(full_gpx) { gpxEnd += '</gpx>\n'; }
236
237        var gpxData = '';
238        for(var i=0; i<eastings.length; i++) {
239                easting = eastings[i];
240                northing = northings[i];
241
242                if(easting == -1 && northing == -1) {
243                        // Deleted point, skip
244                        continue;
245                }
246
247                // Apply calibration
248                easting = easting - errorEasting;
249                northing = northing - errorNorthing;
250                //alert(easting + " " + northing);
251
252                // Convert
253                var en = new OSRef(easting,northing);
254                var latlong = en.toLatLng();
255                latlong.OSGB36ToWGS84();
256
257                lat = latlong.lat;
258                lng = latlong.lng;
259
260                gpxData = gpxData + 
261                        '<trkpt lat="' + lat + '" lon="' + lng + '">\n' +
262                        ' <time>1950-01-01T00:00:00Z</time>\n' +
263                        ' <fix>3d</fix>\n' +
264                        ' <sat>0</sat>\n' +
265                        ' <hdop>0.00</hdop>\n' +
266                        '</trkpt>';
267        }
268       
269
270        gpxArea.value = gpx + gpxData + gpxEnd;
271        return true;
272}
273
274function removePoint(pointNum) {
275        var img = document.getElementById("point_" + pointNum);
276        var pNode = img.parentNode;
277        pNode.removeChild(img);
278
279        eastings[pointNum] = -1;
280        northings[pointNum] = -1;
281        pointPosX[pointNum] = -1;
282        pointPosY[pointNum] = -1;
283
284        return false;
285}
286
287function click(e) {
288        // Ask the yahoo library to avoid browser nastyness for us
289        e = YAHOO.util.Event.getEvent(e);
290
291        var img = img = YAHOO.util.Event.getTarget(e);
292        var link = img.parentNode;
293        var page = link.parentNode;
294
295        // Note - this won't work in things like IE
296        //  Oh well, like we care...
297        var drawX = YAHOO.util.Event.getPageX(e);
298        var drawY = YAHOO.util.Event.getPageY(e);
299
300        var imgPos = YAHOO.util.Dom.getXY(img);
301        var x = drawX - imgPos[0];
302        var y = drawY - imgPos[1];
303        //alert(x + " " + y);
304
305        // OK, compute and add the point
306        //  x is from left hand edge, which is what we want
307        var facX = x / img.offsetWidth;
308        //  y is from top edge, which isn't what we want
309        var facY = 1 - y / img.offsetHeight;
310
311        if(clickIsCalibration) {
312                do_calibrate(facX, facY, drawX, drawY);
313                return false;
314        }
315
316        // Tiles are eee/nnn.jpg
317        var tile = img.src.substring( img.src.lastIndexOf("/") - 3 );
318        var baseEasting = tile.substring(0, tile.indexOf("/"));
319        var baseNorthing = tile.substring(tile.indexOf("/") + 1, tile.indexOf("."));
320
321        var easting = Math.round( (baseEasting * 1000) + (facX * 1000) );
322        var northing = Math.round( (baseNorthing * 1000) + (facY * 1000) );
323        //alert(easting + " " + northing);
324
325        // Save where it is
326        var pointNum = eastings.length;
327        eastings[pointNum] = easting;
328        northings[pointNum] = northing;
329        pointPosX[pointNum] = drawX;
330        pointPosY[pointNum] = drawY;
331
332        // Swap the colour of the last point, if there is one
333        if(lastPointImg != null) {
334                lastPointImg.src = "5x5-cross.png";
335        }
336
337        // Draw the X
338        var cross = new Image();
339        cross.src = "5x5-cross-alt.png";
340        cross.id = "point_" + pointNum;
341        cross.onclick = function(e) { removePoint(pointNum) };
342        ia.appendChild(cross);
343        lastPointImg = cross;
344
345        cross.style.position = "absolute";
346        cross.style.top = drawY - 2; 
347        cross.style.left = drawX - 2;
348
349        // Don't do anything else
350        return false;
351}
352
353function setup(map_easting,map_northing,zoom) {
354        // Pre-load the cross images
355        var cross = new Image();
356        cross.src = "5x5-cross.png";
357        cross.style.display = "none";
358        document.getElementById("body").appendChild(cross);
359
360        var cross2 = new Image();
361        cross2.src = "5x5-cross-alt.png";
362        cross2.style.display = "none";
363        document.getElementById("body").appendChild(cross2);
364
365        var cross3 = new Image();
366        cross3.src = "7x7-red-cross.png";
367        cross3.style.display = "none";
368        document.getElementById("body").appendChild(cross3);
369
370        var tile_base = "http://tile.npemap.org.uk/scaled1/";
371
372        // Set the images
373        for(var i=-1; i<=1; i=i+1) {
374                for(var j=-1; j<=1; j=j+1) {
375                        var img_id = "row" + (2-i) + "-img" + (j+2);
376                        var img = document.getElementById(img_id);
377
378                        var img_easting = map_easting + j;
379                        var img_northing = map_northing + i;
380
381                        // Get to nnn format
382                        if(img_easting < 100) {
383                                if(img_easting < 10) {
384                                        img_easting = "00" + img_easting;
385                                } else {
386                                        img_easting = "0" + img_easting;
387                                }
388                        }
389                        if(img_northing < 100) {
390                                if(img_northing < 10) {
391                                        img_northing = "00" + img_northing;
392                                } else {
393                                        img_northing = "0" + img_northing;
394                                }
395                        }
396
397                        img.src = tile_base + img_easting + "/" + img_northing + ".jpg";
398
399                        // Attach click handler
400                        img.onclick = click;
401                }
402        }
403
404
405        // Setup our nsew links
406        function navLink(dir,e,n) {
407                var a = document.getElementById(dir);
408                a.href = "?" + e + "," + n;
409        }
410        navLink("north", map_easting, (map_northing+1));
411        navLink("south", map_easting, (map_northing-1));
412        navLink("east",  (map_easting+1), map_northing);
413        navLink("west",  (map_easting-1), map_northing);
414
415        document.getElementById("browse").href = "map.html#" + map_easting + "," + map_northing + ",1";
416}
417
418// What url did they request?
419var map_easting = 449;
420var map_northing = 210;
421if(location.href.indexOf("?") > 0) {
422        var coords = location.href.substring( location.href.indexOf("?") + 1 );
423        if(coords.indexOf("#") > 0) {
424                coords = coords.substring( 0, coords.indexOf("#") );
425        }
426
427        map_easting = coords.substring( 0, coords.indexOf(",") );
428        map_northing = coords.substring( coords.indexOf(",") + 1 );
429
430        // handle zoom in url
431        if(map_northing.indexOf(",") > 0) {
432                map_northing = map_northing.substring( 0, map_northing.indexOf(",") );
433        }
434
435        // make into numbers
436        map_easting = map_easting / 1;
437        map_northing = map_northing / 1;
438}
439
440setup(map_easting,map_northing,1);
441</script>
442
443</body>
444</html>
Note: See TracBrowser for help on using the repository browser.