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

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

Have the last added point in a slightly different colour

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