-
Notifications
You must be signed in to change notification settings - Fork 1
/
read-hgt5.html
174 lines (150 loc) · 5.59 KB
/
read-hgt5.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!doctype html>
<html lang=en >
<head>
<meta name=viewport content=width=device-width,initial-scale=1 >
<meta charset=utf-8 ><title>read-hgt5</title>
</head>
<body>
<script>
var startTime = new Date();
// File obtained from http://www.viewfinderpanoramas.org/Coverage%20map%20viewfinderpanoramas_org3.htm
var fileName = 'data2/N37W123.hgt'; // '../J10/N37W123.hgt';
// File obtained from http://dds.cr.usgs.gov/srtm/version2_1/SRTM3/North_America/
// var fileName = '../N37W123.hgt/N37W123.hgt';
var xmlHttp;
init();
function init() {
document.body.style.cssText = ' font: bold 12pt monospace; ';
var info = document.body.appendChild( document.createElement( 'div' ) );
info.innerHTML = '<h1>Read HGT Files</h1>' +
'<div id=msg></div>';
requestFile( fileName );
}
function requestFile( fname ) {
xmlHttp = new XMLHttpRequest();
xmlHttp.responseType = "arraybuffer";
xmlHttp.open( 'GET', fname, true );
xmlHttp.send( null );
xmlHttp.onload = callback;
}
var elevations;
function callback() {
var canvas;
var context;
var arrayBuffer;
var byteArray;
var swappedArray;
var min = 1000000;
var max = 0;
var noData = 0;
var elev;
var littleEndian = ( new Int8Array( new Int32Array([1] ).buffer )[0] === 1) ? 0 : 1; // a test offered by Geoff
arrayBuffer = xmlHttp.response;
var load = getElapsed(startTime); // get file load time
// swapBytes( arrayBuffer ); // this 'costs' time, but works...
// byteArray = new Int16Array( arrayBuffer ); // *** THIS IS WRONG **
byteArray = new Int8Array( arrayBuffer ); // want it as a BYTE array
// len = byteArray.length / 2; // *** THIS IS WRONG ***
len = byteArray.length // we are stepping by 2, so NO divis by 2 here
// elevations = [];
// elevations = new Uint8Array( arrayBuffer ); // *** THIS IS WRONG ***
elevations = new Int16Array( arrayBuffer ); // elevation is 16-bits - 2 bytes - a short
// elevations = new Uint16Array( arrayBuffer ); // slight color change if UNSIGNED used -
// basically less shift to the red due to no sign extension...
var index = 0;
var lb,hb;
for (i = 0; i < len; i+=2 ) {
lb = byteArray[i+0]; // get low byte
hb = byteArray[i+1]; // get high byte
// deal with endianess
if (littleEndian > 0) {
elev = (hb << 8) + lb; // keep order as is - high stays high, and low stays low
} else {
elev = (lb << 8) + hb; // make low to high, and high to low - a byte SWAP
}
elevations[ index++ ] = elev; // set new elevation
if (elev < min) min = elev;
if (elev > max) max = elev;
}
// Wanted an array with positive and negative decimal integers
// console.log( elevations );
var inter = getElapsed(startTime); // after byte swap
var txt = 'Endian type: ' + (littleEndian ? 'little' : 'big') + '<br>' +
'File: ' + fileName + ' Blen: ' +len+ ' ELen: ' + elevations.length +
' max: '+max+' min: '+min;
txt += ' load '+load+' inter '+inter;
canvas = document.body.appendChild( document.createElement( 'canvas' ) );
canvas.width = canvas.height = 1201;
canvas.style.cssText = 'border: 1px solid black; ';
context = canvas.getContext( '2d' );
var imageData = context.createImageData( 1201, 1201 );
var id = imageData.data;
var height, idx = 0;
var addSpace = 1000; // setting to a higher data can help make data more 'visible'
len = id.length;
for ( var i = 0; i < len; i += 4) {
height = ( addSpace * elevations[ idx ] + 0xffffffff + 1 ).toString( 16 ).slice( -6 );
id[ i+0 ] = parseInt( height.substr( 0, 2 ), 16 );
id[ i+1 ] = parseInt( height.substr( 2, 2 ), 16 );
id[ i+2 ] = parseInt( height.substr( 4, 2 ), 16 );
id[ i+3 ] = 255;
idx += 1;
}
context.putImageData( imageData, 0, 0 );
var done = getElapsed(startTime); // get total elapased
txt += ' Dlen\4 '+(len / 4)+" fin "+done;
msg.innerHTML = txt;
}
function swapBytes( buffer ){
var bytes = new Uint8Array( buffer );
var len = bytes.length;
var i, holder;
for ( i = 0; i < len; i += 2 ){
holder = bytes[ i + 0 ]; // get first byte
bytes[ i + 0 ] = bytes[ i + 1 ]; // replace first with second byte
bytes[ i + 1 ] = holder; // set second as first byte
// bytes.splice( i, 2, bytes[ i + 1 ], bytes[ i ] ); // looks nice but can't get it to work
// But to me *** THIS IS WRONG *** - splice ADDS bytes, not replace the bytes
}
}
function getElapsed(bgn) {
var d = new Date();
var ms = d.valueOf() - bgn.valueOf();
var elap = ms2hhmmss(ms);
return elap;
}
function ms2hhmmss( ms ) {
if (ms < 1000) {
return ''+ms+' ms';
}
var secs = Math.floor( ms / 1000 );
ms -= (secs * 1000);
if (secs < 60) {
var stg = ''+((ms / 1000).toFixed(2));
stg = stg.substr(1); // drop the zero
return ''+secs+stg+' secs';
}
var mins = Math.floor(secs / 60);
secs -= (mins * 60);
if (ms > 500)
secs++;
if (secs >= 60) {
secs -= 60;
mins++;
}
if (mins < 60) {
if (secs < 10)
secs = '0'+secs;
return ''+mins+':'+secs+' mm:ss';
}
var hours = Math.floor(mins / 60);
mins -= (hours * 60);
if (mins < 10)
mins = '0'+mins;
if (secs < 10)
secs = '0'+secs;
return ''+hours+':'+mins+':'+secs+' hh:mm:ss';
}
</script>
</body>
</html>