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

Last change on this file since 194 was 194, checked in by Nick Burch, 14 years ago

Tweak layout of menu

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