olqv.ejs 27.5 KB
Newer Older
1
2
<!DOCTYPE html>
<html>
3

4
<head>
5
6
7
    <title>
        <%= title %>
    </title>
8
    <link rel="stylesheet" href="../stylesheets/autoComplete.min.css">
Moreau Nicolas's avatar
Moreau Nicolas committed
9
    <script src="../javascript/libs/autoComplete.min.js"></script>
10

11
12
13
14
15
16
17
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
        integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
18
19
    <script src="https://code.highcharts.com/8.0.4/highcharts.src.js"></script>
    <script src="https://code.highcharts.com/8.0.4/modules/boost.js"></script>
Moreau Nicolas's avatar
Moreau Nicolas committed
20
    <script src="../javascript/libs/openlayers5.3.js"></script>
21
    <script src="../javascript/libs/enum-3.0.4.js"></script>
Moreau Nicolas's avatar
Moreau Nicolas committed
22
    <script src='../javascript/libs/aladin_2021_01.min.js' charset='utf-8'></script>
23

24
25

    <link rel="stylesheet" href="../stylesheets/openlayers5.3.css">
26
27
28
29
30
    <link rel="stylesheet" type="text/css" href="../stylesheets/overlay.css">
    <link rel="stylesheet" type="text/css" href="../stylesheets/olqv.css">

    <!-- Conditional code generation -->
    <%if(useSAMP){%>
Moreau Nicolas's avatar
Moreau Nicolas committed
31
        <script src="../javascript/libs/samp.js"></script>
32
33
        <%}%>
            <!-- End of conditional code generation -->
34
35
36
</head>

<body>
37
38
39
40
41
42
43
44
    <div id="loading"></div>
    <div id="fitshdr" class="overlay" style="overflow:scroll"></div>
    <div id="licences" class="overlay" style="overflow:scroll"></div>
    <div class="pos-f-t">
        <div class="collapse samp-registration" id="samp-registration"></div>
        <div class="collapse" id="navbar-toggle-external-content">
            <div class="p-4">
                <% if (renderingCapabilities) { %>
45
                    <div>
Caillat Michel's avatar
Caillat Michel committed
46
47
48
49
50
51
52
53
                        <ul class="list-group list-group-horizontal img-configuration">
                            <li class="list-group-item ">
                                Slice viewers configuration
                            </li>
                            <li class="list-group-item ">
                                <label for="LUT-selector"> LUTs</label>
                                <select class="form-control" id="LUT-selector">
                                    <% renderingCapabilities["luts"].forEach(function(lut) { %>
54
55
56
57
                                        <option>
                                            <%=lut%>
                                        </option>
                                        <% }) %>
Caillat Michel's avatar
Caillat Michel committed
58
59
60
61
62
                                </select>
                            </li>
                            <li class="list-group-item ">
                                <label for="ITT-selector">ITTs</label>
                                <select class="form-control" id="ITT-selector">
63
64
                                    <% for(let i=0; i < renderingCapabilities["itts"].length; i++){ 
                                        let selected="" ;
65
66
67
68
                                        if(i===renderingCapabilities["default_itt_index"])
                                        selected='selected="selected"' ; %>
                                        <option <%=selected %>> <%=renderingCapabilities["itts"][i]%>
                                        </option>
69
                                        <% } %>
Caillat Michel's avatar
Caillat Michel committed
70
71
72
73
74
75
                                </select>
                            </li>
                            <li class="list-group-item ">
                                <label for="video-mode-selector">Video mode</label>
                                <select class="form-control" id="video-mode-selector">
                                    <% renderingCapabilities["vmodes"].forEach(function(vmode) { %>
76
77
78
79
                                        <option>
                                            <%=vmode%>
                                        </option>
                                        <% }) %>
Caillat Michel's avatar
Caillat Michel committed
80
81
82
83
84
85
86
                                </select>
                            </li>
                            <li class="list-group-item">
                                <button id="rccap" class="btn btn-control btn-secondary">Apply</button>
                            </li>
                        </ul>
                    </div>
87
                    <%}%>
Caillat Michel's avatar
Caillat Michel committed
88
            </div>
89
        </div>
90
    </div>
Caillat Michel's avatar
Caillat Michel committed
91
92
93
94
95
96
97
    <div>
        <nav class="navbar navbar-dark bg-dark navbar-title">
            <button class="navbar-toggler" type="button" data-toggle="collapse"
                data-target="#navbar-toggle-external-content" aria-controls="navbar-toggle-external-content"
                aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
Moreau Nicolas's avatar
Moreau Nicolas committed
98
99
            <!--<div><a id="jupyter" href="#" target="_blank"><img src="../jupyter.png" style="width:30px; height:30px" title="jupyter"/></a></div>
            <a id="show-3d-model" href="#" class="btn btn-link btn-sm"> Show 3D model </a>-->
Caillat Michel's avatar
Caillat Michel committed
100
101
102
103
104
105
106
107
            <div><a href="http://artemix.obspm.fr/fits/browse" target="_blank" class="btn btn-link btn-sm">Show Fits file
                    browser</a></div>
            <div><a id='show-fits-header' href='#'>Show FITS header</a></div>
            <div><a id='show-license' href='#'>Show Licences</a></div>
            <img src="../samphub.png" id="samp-img" class="samp-img" data-toggle="collapse" data-target="#samp-registration"
                title="Transfer data to another application with SAMP protocol" aria-controls="samp-registration"
                aria-expanded="false" aria-label="Toggle navigation" />
        </nav>
108
109
110
111
    </div>
    <div>
        <div id="cube-infos" class="cube-infos"></div>
    </div>
112
    <div class="container yafits-container">
113
114
115
116
117
118
119
        <div class="row">
            <div class="col">
                <div id="external-mouse-position-1" class="external_mouse_position"></div>
            </div>
            <div class="col">
                <div id="spectrum-info-title" class="chart-title"></div>
            </div>
120
        </div>
121
122
123
124
125
126
127
128
129
130
        <div class="row">
            <div class="col chart-img">
                <div id="slice" class="map" style="background-color:darkblue"></div>
            </div>
            <div class="col chart-plot">
                <div id="spectrum"></div>
            </div>
            <div class="col">
                <div>
                    <div>
131
                        <p class="right-menu-box-title">Graph</p>
132
133
134
                        <p><button id="zoom-in" class="btn btn-control btn-secondary right-menu-box-element">Zoom in</button></p>
                        <p><button id="zoom-out" class="btn btn-control btn-secondary right-menu-box-element">Zoom out</button></p>
                        <p><button id="zoom-reset" class="btn btn-control btn-secondary right-menu-box-element">Reset</button></p>
135
                    </div>
136
                    <div class="right-menu-box">
137
138
                        <p class="right-menu-box-title"><strong>Smoothed cube</strong></p>
                        <p><input type="text" id="get-nbox" value="2" class="right-menu-box-element">
139
                        <p>
140
141
                        <p><button id="get-smooth-cube" class="btn btn-control btn-secondary right-menu-box-element">Download</button></p>
                        <p><button id="view-smooth-cube" class="btn btn-control btn-secondary right-menu-box-element">View</button></p>
142
                    </div>
143
144
                </div>
            </div>
145
        </div>
146
    </div>
147
    <div class="container yafits-container">
148
        <div class="row">
149
            <div class="col-4">
150
151
152
153
                <div id="external-mouse-position-2" class="external_mouse_position"></div>
            </div>
            <div class="col">
                <div class="chart-title">
154
                    <span id="chart-title"></span>
155
156
                </div>
            </div>
157
        </div>
158
159
160
161
162
163
164
        <div class="row">
            <div class="col chart-img">
                <div id="summed-slices" class="map"></div>
            </div>
            <div class="col chart-plot">
                <div id="summed-pixels-spectrum"></div>
            </div>
165
            <div class="col">
166
167
168
169
170
171
172
173
                <div>
                    <div>
                        <span id="reference-line"></span>
                    </div>
                    <div>                    
                        <span id="lineluminosity-value"></span>
                    </div>
                </div>
174
175
176
177
178
179
180
181
182
183
184
185
186
                <div id="lines-table-container" class="hidden">
                    <button id="goto-first-group" class="btn btn-secondary">&lt;&lt;</button>
                    <button id="goto-previous-group" class="btn btn-secondary">&lt;</button>
                    <button id="goto-next-group" class="btn btn-secondary">&gt;</button>
                    <button id="goto-last-group" class="btn btn-secondary">&gt;&gt;</button>
                    <span id="current-group"></span>/
                    <span id="last-group"></span>
                    <table id="lines-table" class="table lines-table">
                        <thead>
                            <tr>
                                <th colspan="2" id="energy-groups-infos" class="center"></th>
                            </tr>
                            <tr>
187
                                <th class="center">Possible species</th>
188
189
190
191
192
193
                                <th class="center">Observed Frequency (GHz)</th>
                            </tr>
                        </thead>
                        <tbody id="lines-table-tbody"></tbody>
                    </table>                    
                </div>
194
            </div>            
195
        </div>
196
    </div>
197

198
    <div class="container yafits-container hidden">
199
200
201
202
203
204
205
        <div class="row">
            <div class="col">
                <canvas id="hidden-slice"></canvas>
            </div>
            <div class="col">
                <canvas id="hidden-summed-slices"></canvas>
            </div>
206
        </div>
Caillat Michel's avatar
Caillat Michel committed
207
208
    </div>

209
210
    <div class="container yafits-container">
        <div class="row last-row">
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
            <div class="col chart-img">
                <p>
                    <span>
                        Search NED Data for a flat universe
                    </span>
                    <select id="ned-search-radius">
                        <option value="fov">in FOV</option>
                        <option value="0.016667">1 arcmin</option>
                        <option value="0.166667">10 arcmin</option>
                        <option value="0.5">30 arcmin</option>
                        <option value="1">60 arcmin</option>
                    </select>
                </p>
                <p>
                    <label for="lines-hnot">H_0</label> 
Caillat Michel's avatar
Caillat Michel committed
226
                    <input type="text" id="lines-hnot" value="69.6">
227
228

                    <label for="lines-omegam">Omega_M</label> 
Caillat Michel's avatar
Caillat Michel committed
229
                    <input type="text" id="lines-omegam" value="0.286">
230
231
232
233

                    <button type="button" class="btn btn-control btn-secondary" data-toggle="modal"
                        data-target="#ned-modal">
                        Search
234
                    </button>
235
236
237
                </p>
                <p>
                    <label for="lines-redshift">Redshift</label> <input type="text"
Caillat Michel's avatar
Caillat Michel committed
238
                    id="lines-redshift">
239
240

                    <label for="lines-velocity">Velocity</label> <input type="text" id="lines-velocity"
241
242
243
244
                        placeholder="in km/s">   
                        
                    <label for="lines-dl">DL</label> <input type="text" id="lines-dl" disabled
                        placeholder="in Mpc">       
245
                </p>
246
                <p>
247
                    <textarea id="input-markers" cols="40" rows="5" placeholder="9:13:45.489;+40:56:28.224;WISEA" readonly></textarea>
248
                    <br/>
249
250
                    <!--<button id="show-markers" type="button" class="btn btn-control btn-secondary">Show</button>-->
                    <button id="clear-markers" type="button" class="btn btn-control btn-secondary">Clear</button>
251
                </p>
252

253
            </div>
254
            <div class="col">      
255
                <div class="form-line">
256
257
258
259
                    <label for="toggle-lines-search"><strong>Show Lines after selection</strong></label>
                    <input type="checkbox" id="toggle-lines-search" />  
                </div>  
                <div id="spectroscopy-menu" class="hidden">     
260
                    <div class="form-line">
261
262
263
264
265
266
267
268
269
                        <div class="form-line">
                            <div class="autoComplete_wrapper">
                                <input type="search" dir="ltr" spellcheck="false" autocorrect="off" autocomplete="off"
                                    autocapitalize="off" id="autoComplete">
                            </div>
                        </div>
                        <div class="form-line">
                            <ul id="selectedspecies" class="selected-species"></ul>

270
271
272
                        </div>
                    </div>
                    <div class="form-line">
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
                        <label>Search in</label>
                        <span>
                            <a data-toggle="tooltip" title="Local : a short list of well known lines, CDMS : 
                        spectroscopic data gathered from CDMS database through VAMDC access, 
                        JPL : spectroscopic data gathered from JPL database through VAMDC access">
                                <span class="glyphicon glyphicon-info-sign " /></a> :
                        </span>
                        <label title="A selection of commonly used lines in radio astronomy spectra analysis">
                        <a target="_blank" href="../files/local.csv"><strong>Local</strong></a></label>
                        <input type="radio" id="localdatasource" name="spectrodatasource" checked value="local" />

                        <label title="List of molecules in interstellar medium from CDMS database">
                        <a target="_blank" href="../files/ISM.txt"><strong>ISM</strong></a></label>
                        
                        <input type="radio" id="ismdatasource" name="spectrodatasource" value="ism" />
                        <label title="List of molecules in interstellar and circumstellar medium from CDMS database">
                        <a target="_blank" href="../files/ISM_CSM.txt"><strong>ISM-CSM</strong></a></label>
                        <input type="radio" id="ismcsmdatasource" name="spectrodatasource" value="ismcsm" />
                
                        <label title="All species from CDMS database available through VAMDC"><strong>CDMS</strong></label>
                        <input type="radio" id="cdmsdatasource" name="spectrodatasource" value="cdms" />
294

295
296
297
298
                        <!--
                        
                        <label title="All species from JPL database available through VAMDC"><strong>JPL</strong></label>
                        <input type="radio" id="jpldatasource" name="spectrodatasource" value="jpl" />-->
299
                    </div>
300
301
302
303
304
305
306
307
308
309
                    <div class="spectroscopy form-line">
                        <label id="intensityrangelabel" for="intensityrange">Line intensity</label>
                        <a data-toggle="tooltip" title="Base 10 logarithm of the integrated intensity 
                                                        in units of nm^2 MHz at 300 K." />
                            <span class="glyphicon glyphicon-info-sign " ></span></a>
                        <input id="intensityrange" type="range" min="-40" max="0" step="0.1"
                            oninput="intensity.value=value" onchange="intensity.value=value" class="range">
                        <output id="intensity">-1</output>
                    </div>
                    <div class="form-line">
310
                        <label id="energyuplabel">Energy up max</label>
311
312
313
                        <a data-toggle="tooltip" title="Energy of the transition upper level in cm-1" />
                            <span class="glyphicon glyphicon-info-sign " ></a>
                        <input type="text" name="EnergyUp" id="energyup" >
314
315
316
317
                        <select id="energyupunit">
                            <option value="K" selected>K</option>    
                            <option value="cm-1">cm-1</option>    
                        </select>
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
                    </div>
                    <div class="form-line">
                        <label>Number of atoms </label>
                        <select id="atomcount-min">
                            <option value="1" selected>1</option>    
                            <option value="2">2</option>    
                            <option value="3">3</option>    
                            <option value="4">4</option>    
                            <option value="5">5</option>    
                            <option value="6">6</option>    
                            <option value="7">7</option>    
                            <option value="8">8</option>    
                            <option value="9">9</option>    
                            <option value="10">10</option>    
                            <option value="undefined">All</option>    
                        </select>
                        <select id="atomcount-max">
                            <option value="1">1</option>    
                            <option value="2">2</option>    
                            <option value="3">3</option>    
                            <option value="4" selected>4</option>    
                            <option value="5">5</option>   
                            <option value="6">6</option>    
                            <option value="7">7</option>    
                            <option value="8">8</option>    
                            <option value="9">9</option>    
                            <option value="10">10</option>    
                            <option value="undefined">All</option>   
                        </select>
                    </div>
                    <div class="form-line">
                        <select id="energy-groups" class="hidden">
350
351
                        </select>
                    </div>
352
                </div>
353
            </div>
354
            <!-- empty column to ensure column width are identical for each row  -->
355
            
356
            <div class="col">
357
                <!--
358
359
360
361
362
                <div>
                    <span id="reference-line"></span>
                </div>
                <div>                    
                    <span id="lineluminosity-value"></span>
363
                </div>-->
364
            </div>
365
        </div>
Moreau Nicolas's avatar
Moreau Nicolas committed
366
        <div id="dataset"></div>
367

368
369
370
371
372
        <div class="hidden">
            <div id="popup-single" class="ol-popup">
                <a href="#" id="popup-single-closer" class="ol-popup-closer"></a>
                <div id="popup-single-content"></div>
            </div>
373
        </div>
374
375
376
377
378
        <div class="hidden">
            <div id="popup-summed" class="ol-popup">
                <a href="#" id="popup-summed-closer" class="ol-popup-closer"></a>
                <div id="popup-summed-content"></div>
            </div>
379
        </div>
380
381
382
383
384
385
386
387
388
        <!-- Modal for spectroscopic data-->
        <div class="modal fade" id="spectro-modal">
            <div class="modal-dialog modal-xlg" role="document">
                <div class="modal-content">
                    <pre id="spetro-modal-lines"></pre>
                </div>
            </div>
        </div>
        
389
390
391
        <!-- Modal for ned data-->
        <div class="modal fade" id="ned-modal">
            <div class="modal-dialog modal-xlg" role="document">
392
                <div class="modal-content ned-modal">
393
394
395
396
397
398
                    <div class="modal-header">
                        <h5 class="modal-title" id="ned-modal-title">Data from NED</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
399
                    <div class="modal-body ned-data" id="ned-data">
400
401
402
403
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
404
405
406
                </div>
            </div>

407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
            <!-- Modal for samp cassis-->
            <div class="modal fade hidden" id="samp-modal" role="dialog">
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Send spectrum by SAMP (Cassis)</h4>
                        </div>
                        <div class="modal-body">
                            <p>
                                This link is intended to send the current artemix spectrum to Cassis tool, or any other
                                tool that runs with the SAMP protocol and accepts our file fits format.
                            </p>
                            <p>
                                For the transfer to work, Check that Cassis is running.
                            </p>
                            <h3>How to launch Cassis</h3>
                            <p>
                                <strong>- Cassis with command line:</strong>
                            </p>
                            <p>
                                Open a terminal and run: javaws http://cassis.irap.omp.eu/online/cassis.jnlp
                            </p>
                            <p>
                                <strong>- Cassis online:</strong>
                            </p>
                            <ul>
                                <li>1- Go to the Cassis <a href="http://cassis.irap.omp.eu/?page=installation">
                                        website</a></li>
                                <li>2- Use Cassis online application or download the latest version </li>
                            </ul>
                            <p>
                                If you encounter a problem during the installation, check that you have the correct Java
                                version compatible with Cassis, and allow the installation in your computer. Please read
                                <a href="images/enablejava.png">here</a> on how to
                                do with a Mac.
                            </p>
                            <p>
                                In case you encounter any problem with Cassis please contact the Cassis project manager
                                <a href="#">Jean-Michel.Glorian{at}irap.omp.eu</a>
                            </p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
454
                </div>
455
456
457
            </div>

            <!-- Modal for samp aladin -->
Caillat Michel's avatar
Caillat Michel committed
458
            <div class="modal fade samp-modal-aladin" id="samp-modal-aladin" role="dialog">
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Send image by SAMP (Aladin)</h4>
                        </div>
                        <div class="modal-body">
                            <p>
                                This link is intended to send the current Artemix image to Aladin tool, or any other
                                tool that runs with the SAMP protocol and accepts our file png format.
                            </p>
                            <p>
                                For the transfer to work, Check that Aladin is running.
                            </p>
                            <p>
                                How to launch Aladin :
                            </p>
                            <p>
                                <strong>- Aladin with command line:</strong>
                            </p>
                            <p>
                                Open a terminal and run: javaws https://aladin.u-strasbg.fr/java/nph-aladin.pl
                            </p>
                            <p>
                                <strong>- Aladin online:</strong>
                            </p>
                            <ul>
                                <li>1- Go to the Aladin <a
                                        href="https://aladin.u-strasbg.fr/java/nph-aladin.pl?frame=downloading">
                                        website</a></li>
                                <li>2- Use Aladin online application or download the latest version </li>
                            </ul>
                            <p>
                                If you encounter a problem during the installation, check that you have the correct Java
                                version compatible with Aladin, and allow the installation on your computer.
                            </p>
                            <p>
                                Please look <a href="images/enablejava.png">here</a> to know how to do with MacOS.
                            </p>
                            <p>
                                If you encouter any problem with Aladin please contact the Aladin team AT <a href="#">
                                    unistra.fr?Subject=Aladin</a>
                            </p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
508
509
                </div>
            </div>
510
            <div>
511
                <span id='spectroServer' hidden>                    
512
513
514
515
516
                    <% if(spectrosHost !== "localhost") {%>
                        http://<%= spectrosHost; %>/<%= spectrosPath; %>
                    <%} else{%>
                        http://<%= spectrosHost; %>:<%= spectrosPort; %>
                    <% } %>                      
517
                </span>
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
                <span id='withSamp' hidden>
                    <%= JSON.stringify(useSAMP); %>
                </span>
                <span id='urlRoot' hidden>
                    <%= JSON.stringify(urlRoot); %>
                </span>
                <span id='relFITSFilePath' hidden>
                    <%= JSON.stringify(relFITSFilePath); %>
                </span>
                <span id='header' hidden>
                    <%= JSON.stringify(header); %>
                </span>
                <span id='product' hidden>
                    <%= JSON.stringify(product); %>
                </span>
533

534
535
536
537
                <span id='defaultLutIndex' hidden>
                    <%= JSON.stringify(renderingCapabilities["default_lut_index"]); %>
                </span>
            </div>
538
539
540
        </div>          
    </div>  
    <script type="module" src="../javascript/olqv.js"></script>
541
</body>
542
543

</html>