-
Notifications
You must be signed in to change notification settings - Fork 4
/
example.html
81 lines (71 loc) · 2.52 KB
/
example.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
<html>
<head>
<title>FITS with Javascript</title>
<script src="binaryajax.js"></script>
<script src="fits.js"></script>
<script src="excanvas.js"></script>
<script type="text/javascript">
// Define the FITS object
var fits = new FITS();
// Define the stretch function to apply e.g. linear, sqrt, cuberoot, log, loglog, sqrtlog
fits.stretch = "log";
// Bind some events
fits.bind("click",function(e){
e.y = this.height - e.y
var value =this.image[e.y*this.width+e.x];
document.getElementById('status').innerHTML ='click=('+ e.x+','+e.y+')='+value;
}).bind("mousemove",function(e){
e.y = this.height - e.y
var value =this.image[e.y*this.width+e.x];
document.getElementById('status').innerHTML ='move=('+ e.x+','+e.y+')='+value;
}).bind("load",function(){
document.getElementById('bitpix').innerHTML = this.header.BITPIX;
document.getElementById('depth').innerHTML = this.depth;
document.getElementById('z').value = 0;
this.draw("FITSimage")
})
// Load an initial FITS file
fits.load("WFPC2u5780205r_c0fx.fits");
</script>
<style>
body {
margin: 10px;
font-family: Arial, sans-serif;
background-color: white;
color: black;
}
a { color: #5555aa; }
canvas { border: 1px solid #ff0000; }
code { color: #5555aa; }
pre { color: #5555aa; }
</style>
</head>
<body>
<h1>FITS extraction with Javascript</h1>
File: <select name="FITS" onChange="fits.load(this.value)">
<option selected>WFPC2u5780205r_c0fx.fits</option>
<option>l_e_20110215_205_1_1_1.fits</option>
<option>l_e_20110215_203_1_1_1.fits</option>
</select><!-- or <input type="file" name="localfile" onSubmit="return false" onChange="fits.load(this.value)">-->
Scaling function: <select name="scale" onChange="fits.update(this.value)">
<option>linear</option>
<option>sqrt</option>
<option>cuberoot</option>
<option selected="selected">log</option>
<option>sqrtlog</option>
<option>loglog</option>
</select>
Color: <select name="scale" onChange="fits.update({color:this.value})">
<option selected="selected">gray</option>
<option>heat</option>
<option>A</option>
<option>B</option>
</select>
Frame <button onClick="fits.update({index:--(document.getElementById('z').value)})"><</button>
<input id="z" name="z" value="0" size=3 onChange="fits.update({index:this.value})">
<button onClick="fits.update({index:++(document.getElementById('z').value)})">></button> of <span id=depth></span>. Format: <span id=bitpix></span>.
<span id="status"></span>
<br>
<canvas id="FITSimage"></canvas>
</body>
</html>