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

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

Set explicit div width for images div

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