forked from ericmandel/js9
-
Notifications
You must be signed in to change notification settings - Fork 1
/
js9plugins.html
executable file
·131 lines (127 loc) · 6.5 KB
/
js9plugins.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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="image/x-icon" rel="shortcut icon" href="./favicon.ico">
<link type="text/css" rel="stylesheet" href="js9support.css">
<link type="text/css" rel="stylesheet" href="js9.css">
<link type="text/css" rel="stylesheet" href="plugins/plugintest.css">
<script type="text/javascript" src="js9prefs.js"></script>
<script type="text/javascript" src="js9support.min.js"></script>
<script type="text/javascript" src="js9.min.js"></script>
<script type="text/javascript" src="js9plugins.js"></script>
<script type="text/javascript" src="plugins/plugintest.js"></script>
<title>JS9 plugins</title>
</head>
<body>
<center><font size="+1">
<b>JS9 Plugins: browser-based analysis using JS9 plugins</b>
</font></center>
<p>
You can add browser-based analysis to a JS9 Web page by writing a
JS9 Plugin module, consisting of a constructor function that gets called
for each div of the plugin class, and one or more event callbacks to
process the desired events. The <b>this</b> context of the constructor
is seeded with a few properties, the most important of which is the
<b>div</b> property specifying the DOM element of the containing div.
Add your GUI (in the form of HTML elements) to this div and use events to
control the action. A plugin is registered using the
<b>JS9.RegisterPlugin()</b> public routine.
<p>
If the Web page does not contain a div for this plugin class and if the
registration routine is passed a viewMenu property specifying a menu name,
the plugin will be added to the View menu. In the examples below, the
The first two examples define their own static divs for pluginTest.
The last instance of JS9 uses the View menu to bring up pluginTest in a
light window.
<p>
See plugins/plugintest.js for the example plugin code.
<table cellspacing="30">
<tr valign="top">
<td>
<div class="JS9Menubar" id="JS9Menubar"></div>
<div class="JS9" id="JS9"></div>
</td>
<td>
An example of a Plugin div element already defined to hold the
Plugin message divs, which will be created by the Plugin constructor.
<ul>
<li> <a href='javascript:JS9.Load("fits/casa.fits.gz", {scale:"log", parentFile:"fits/casa.fits"});'>CAS-A (Chandra)</a>
<li> <a href='javascript:JS9.Load("fits/snr.fits", {scale:"log", colormap:"heat"});'>CTB 109 (Einstein)</a>
<li> <a href='javascript:JS9.Load("fits/m13.fits", {scale:"linear", colormap:"sls"});'>m13 (via SkyView)</a>
<li> <a href='javascript:JS9.Load("fits/i1000.fits", {scale:"linear", colormap:"grey"});'>i1000 (v=x*1000+y, 4Mb)</a>
</ul>
Load an image, then move the mouse, or create and manipulate a
region, or press a key to see callbacks fire in the blue display region:
<p>
<div class="PLUGINtest" data-js9id="JS9"></div>
</td>
</tr>
<tr valign="top">
<td>
<div class="JS9Menubar" id="myJS9Menubar"></div>
<div class="JS9" id="myJS9"></div>
</td>
<td>
An example of a Plugin div element already defined to hold the
Plugin message divs, which will be created by the Plugin constructor.
<ul>
<li> <a href='javascript:JS9.Load("fits/casa.fits.gz", {scale:"log", parentFile:"fits/casa.fits"}, {display: "myJS9"});'>CAS-A (Chandra)</a>
<li> <a href='javascript:JS9.Load("fits/snr.fits", {scale:"log", colormap:"heat"}, {display: "myJS9"});'>CTB 109 (Einstein)</a>
<li> <a href='javascript:JS9.Load("fits/m13.fits", {scale:"linear", colormap:"sls"}, {display: "myJS9"});'>m13 (via SkyView)</a>
<li> <a href='javascript:JS9.Load("png/i1000.png", {scale:"linear", colormap:"grey"}, {display: "myJS9"});'>i1000 (v=x*1000+y)</a>
</ul>
Load an image, then move the mouse, or create and manipulate a
region, or press a key to see callbacks fire in the blue display region:
<p>
<div class="PLUGINtest" data-js9id="myJS9">
</div>
</td>
</tr>
<tr valign="top">
<td>
<div class="JS9Menubar" id="otherJS9Menubar"></div>
<div class="JS9" id="otherJS9"></div>
</td>
<td>
In this example, no Plugin div element has been defined on the page.
It therefore will be offered in the View menu as a light window.
<ul>
<li> <a href='javascript:JS9.Load("fits/casa.fits.gz", {scale:"log", parentFile:"fits/casa.fits"}, {display: "otherJS9"});'>CAS-A (Chandra)</a>
<li> <a href='javascript:JS9.Load("fits/snr.fits", {scale:"log", colormap:"heat"}, {display: "otherJS9"});'>CTB 109 (Einstein)</a>
<li> <a href='javascript:JS9.Load("fits/m13.fits", {scale:"linear", colormap:"sls"}, {display: "otherJS9"});'>m13 (via SkyView)</a>
<li> <a href='javascript:JS9.Load("png/i1000.png", {scale:"linear", colormap:"grey"}, {display: "otherJS9"});'>i1000 (v=x*1000+y)</a>
</ul>
Load an image and choose View->pluginTest, then move the mouse,
or create and manipulate a region, or press a key to see
callbacks fire in the light window.
</td>
</tr>
</table>
<p>
JS9 Demos:
<ul>
<li><a href='js9basics.html'>JS9 Demo: the basics</a>
<li><a href='js9bespoke.html'>JS9 Demo: web page control of JS9</a>
<li><a href='js9sizes.html'>JS9 Demo: setting the size of the JS9 display</a>
<li><a href='js9large.html'>JS9 Demo: support for large FITS files</a>
<li><a href='js9plugins.html'>JS9 Demo: adding plugins to JS9</a>
<li><a href='js9imexam.html'>JS9 Demo: the imexam plugin for JS9</a>
<li><a href='js9blend.html'>JS9 Demo: image blending</a>
<li><a href='js9cat.html'>JS9 Demo: overlaying catalogs</a>
<li><a href='js9panzoom.html'>JS9 Demo: pan and zoom</a>
<li><a href='js9rgb.html'>JS9 Demo: RGB composite images</a>
<li><a href='js9multi.html'>JS9 Demo: independent instances of JS9</a>
<li><a href='js9analysis.html'>JS9 Demo: remote data analysis</a>
<li><a href='js9onchange.html'>JS9 Demo: running tasks when a region changes</a>
<li><a href='js9create.html'>JS9 Demo: creating a JS9 instance dynamically</a>
<li><a href='js9preload.html'>JS9 Demo: preloading images into JS9</a>
<li><a href='js9bitpix.html'>JS9 Demo: displaying different FITS datatypes</a>
<li><a href='js9allinone.html'>JS9 Demo: using the all-in-one files</a>
<li><a href='js9pngvsfits.html'>JS9 Demo: PNG representation files vs FITS files</a>
</ul>
</body>
</html>