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

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

Setting up

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