Commit 5eae401e authored by Caillat Michel's avatar Caillat Michel
Browse files

Improves page presentation

parent 14fd0e35
...@@ -6,147 +6,180 @@ h3 {font-size: 1.25em;margin: 30px 0 15px 0;} ...@@ -6,147 +6,180 @@ h3 {font-size: 1.25em;margin: 30px 0 15px 0;}
h4 {font-size: 1em; margin: 30px 0 15px 0;} h4 {font-size: 1em; margin: 30px 0 15px 0;}
.map { .map {
height: 512px; height: 512px;
width: 512px; width: 512px;
} }
#loading { #loading {
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: 100; z-index: 100;
/*width: 100vw; /*width: 100vw;
height: 100vh;*/ height: 100vh;*/
width: 100vw; width: 100vw;
height: 1200px; height: 1200px;
background-color: rgba(192, 192, 192, 0.5); background-color: rgba(192, 192, 192, 0.5);
background-image: url("../MnyxU.gif"); background-image: url("../MnyxU.gif");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
#info { #info {
z-index: 1; z-index: 1;
opacity: 0; opacity: 0;
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0; left: 0;
margin: 0; margin: 0;
background: rgba(0,60,136,0.7); background: rgba(0,60,136,0.7);
color: white; color: white;
border: 0; border: 0;
transition: opacity 100ms ease-in; transition: opacity 100ms ease-in;
} }
.marker { .marker {
width: 16px; width: 16px;
height: 16px; height: 16px;
border: 1px solid #088; border: 1px solid #088;
border-radius: 8px; border-radius: 8px;
background-color: #0FF; background-color: #0FF;
opacity: 0.5; opacity: 0.5;
} }
.ol-popup { .ol-popup {
position: absolute; position: absolute;
background-color: white; background-color: white;
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
padding: 10px; padding: 10px;
border-radius: 10px; border-radius: 10px;
border: 1px solid #cccccc; border: 1px solid #cccccc;
bottom: 12px; bottom: 12px;
left: -50px; left: -50px;
min-width: 150px; min-width: 150px;
font-size: 10px; font-size: 10px;
} }
.ol-popup:after, .ol-popup:before { .ol-popup:after, .ol-popup:before {
top: 100%; top: 100%;
border: solid transparent; border: solid transparent;
content: " "; content: " ";
height: 0; height: 0;
width: 0; width: 0;
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
} }
.ol-popup:after {
border-top-color: white; .ol-popup:after {
border-width: 10px; border-top-color: white;
left: 48px; border-width: 10px;
margin-left: -10px; left: 48px;
} margin-left: -10px;
.ol-popup:before { }
border-top-color: #cccccc;
border-width: 11px; .ol-popup:before {
left: 48px; border-top-color: #cccccc;
margin-left: -11px; border-width: 11px;
} left: 48px;
.ol-popup-closer { margin-left: -11px;
text-decoration: none; }
position: absolute;
top: 2px; .ol-popup-closer {
right: 8px; text-decoration: none;
} position: absolute;
.ol-popup-closer:after { top: 2px;
content: "x"; right: 8px;
} }
th, td { .ol-popup-closer:after {
padding: 0px; content: "x";
margin: 0px; }
font-size: 16px;
height: 20px; th, td {
} padding: 0px;
margin: 0px;
.list-group{ font-size: 16px;
flex-direction: row; height: 20px;
} }
.map:-moz-full-screen { .list-group{
height: 100%; flex-direction: row;
} }
.map:-webkit-full-screen {
height: 100%; .map:-moz-full-screen {
} height: 100%;
.map:-ms-fullscreen { }
height: 100%; .map:-webkit-full-screen {
} height: 100%;
.map:fullscreen { }
height: 100%; .map:-ms-fullscreen {
} height: 100%;
}
.samp-publish-png { .map:fullscreen {
top: 65px; height: 100%;
left: .5em; }
display:none;
} .samp-publish-png {
top: 65px;
.ol-touch .samp-publish-png { left: .5em;
top: 80px display:none;
} }
.chart-container{ .ol-touch .samp-publish-png {
max-width:100%; top: 80px
} }
.chart-container > .row{ .chart-container{
padding-top : 0.5em; max-width:100%;
} }
/*
.chart-container > .row > .chart-img{ .chart-container > .row{
max-width : 550px; padding-top : 0.5em;
padding-left : 5px; }*/
padding-right : 0px;
} .chart-container > .row > .chart-img{
max-width : 550px;
.chart-container > .row > .chart-plot{ padding-left : 5px;
max-width : 100%; padding-right : 0px;
padding-left : 0; }
padding-top : 5em;
} .chart-container > .row > .chart-plot{
max-width : 100%;
.hidden{ padding-left : 0;
display : none; /*padding-top : 5em;*/
} }
.col .chart-control{
padding-left : 825px;
}
.col .chart-title{
padding-left : 750px;
margin-bottom : 2em;
}
.hidden{
display : none;
}
.highcharts-graph.zone-0 {
stroke: #f7a35c;
}
.highcharts-area.zone-0 {
fill: #f7a35c;
}
.btn-control:hover{
background-color: #dadcdd;
}
.btn-control{
width : 100px;
}
.external_mouse_position{
height : 1.5em;
}
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<script src="../javascript/samp.js"></script> <script src="../javascript/samp.js"></script>
<script src="../javascript/samp_utils.js"></script> <script src="../javascript/samp_utils.js"></script>
<%}%> <%}%>
<!-- End of conditional code generation --> <!-- End of conditional code generation -->
</head> </head>
<body> <body>
...@@ -97,7 +97,7 @@ ...@@ -97,7 +97,7 @@
<div class="container chart-container"> <div class="container chart-container">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div id="external_mouse_position_1"></div> <div id="external_mouse_position_1" class="external_mouse_position"></div>
</div> </div>
<div class="col"> <div class="col">
<div id="publish_spectrum"></div> <div id="publish_spectrum"></div>
...@@ -108,15 +108,21 @@ ...@@ -108,15 +108,21 @@
<div id="slice" class="map" style="background-color:darkblue"></div> <div id="slice" class="map" style="background-color:darkblue"></div>
</div> </div>
<div class="col chart-plot"> <div class="col chart-plot">
<button id="zoomout">-</button> <div id="spectrum"></div>
<button id="zoomin">+</button>
<button id="zoomreset">Reset</button>
<div id="spectrum"></div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div id="external_mouse_position_2"></div> <div class="chart-control">
<button id="zoomin" class="btn btn-default btn-control">Zoom in</button>
<button id="zoomout" class="btn btn-default btn-control">Zoom out</button>
<button id="zoomreset" class="btn btn-default btn-control">Reset</button>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div id="external_mouse_position_2" class="external_mouse_position"></div>
</div> </div>
<div class="col"> <div class="col">
<div id="publish_summedpixelsspectrum"></div> <div id="publish_summedpixelsspectrum"></div>
...@@ -130,6 +136,13 @@ ...@@ -130,6 +136,13 @@
<div id="summedpixelsspectrum"></div> <div id="summedpixelsspectrum"></div>
</div> </div>
</div> </div>
<div class="row">
<div class="col">
<div class="chart-title">
<span id="chart_title"></span>
</div>
</div>
</div>
</div> </div>
<div class="container chart-container hidden"> <div class="container chart-container hidden">
...@@ -141,8 +154,8 @@ ...@@ -141,8 +154,8 @@
<canvas id="hiddenSummedSlices"></canvas> <canvas id="hiddenSummedSlices"></canvas>
</div> </div>
</div> </div>
</div> </div>
<div class="hidden"> <div class="hidden">
<div id="popup" class="ol-popup"> <div id="popup" class="ol-popup">
...@@ -162,12 +175,12 @@ ...@@ -162,12 +175,12 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p> <p>
This link is intended to send the current artemix spectrum to Cassis tool, 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. or any other tool that runs with the SAMP protocol and accepts our file fits format.
</p> </p>
<p> <p>
For the transfer to work, Check that Cassis is running. For the transfer to work, Check that Cassis is running.
</p> </p>
<h3>How to launch Cassis</h3> <h3>How to launch Cassis</h3>
<p> <p>
<strong>- Cassis with command line:</strong> <strong>- Cassis with command line:</strong>
...@@ -183,16 +196,16 @@ ...@@ -183,16 +196,16 @@
<li>2- Use Cassis online application or download the latest version </li> <li>2- Use Cassis online application or download the latest version </li>
</ul> </ul>
<p> <p>
If you encounter a problem during the installation, check that you have the correct Java version 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. 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. Please read <a href="images/enablejava.png">here</a> on how to do with a Mac.
</p> </p>
<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> 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> </p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div> </div>
</div> </div>
</div> </div>
...@@ -208,34 +221,53 @@ ...@@ -208,34 +221,53 @@
<h4 class="modal-title">Send image by SAMP (Aladin)</h4> <h4 class="modal-title">Send image by SAMP (Aladin)</h4>
</div> </div>
<div class="modal-body"> <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>
</br></br> This link is intended to send the current Artemix image to Aladin tool,
For the transfer to work, Check that Aladin is running.</br></br> or any other tool that runs with the SAMP protocol and accepts our file png format.
</p>
How to launch Aladin</br> <p>
<strong>- Aladin with command line:</strong></br> For the transfer to work, Check that Aladin is running.
Open a terminal and run: javaws https://aladin.u-strasbg.fr/java/nph-aladin.pl</br></br> </p>
<strong>- Aladin online:</strong></br> <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> <ul>
<li>1- Go to the Aladin <a href="https://aladin.u-strasbg.fr/java/nph-aladin.pl?frame=downloading"> website</a></li> <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> <li>2- Use Aladin online application or download the latest version </li>
If you encounter a problem during the installation, check that you have the correct Java version compatible with Aladin, and allow the installation in your computer. Found <a href="images/enablejava.png">here</a> how to do with Mac </br></br> </ul>
In case of problems with Aladin please contact the Aladin team cds-question AT <a href="#"> unistra.fr?Subject=Aladin</a></p> <p>
</div> If you encounter a problem during the installation, check that you have the correct Java version compatible with Aladin,
<div class="modal-footer"> and allow the installation on your computer.
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </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>
</div> </div>
</div> </div>
</div> </div>
</body> </body>
<script> <script>
var ENTER = function () { console.log(arguments.callee.name + ": entering."); };
var ENTER = function () { console.log(arguments.callee.name + ": entering."); }; var EXIT = function () { console.log(arguments.callee.name + ": exiting."); };
var EXIT = function () { console.log(arguments.callee.name + ": exiting."); };
<%if (useSAMP) {%> <%if (useSAMP) {%>
var sAMPPublisher = null; var sAMPPublisher = null;
<%}%> <%}%>
var ROI; var ROI;
...@@ -277,7 +309,7 @@ ...@@ -277,7 +309,7 @@
/** /**
calculate the value displayed as title of summed average spectrum calculate the value displayed as title of summed average spectrum
avgSpectrum array is reversed if data are radial velocities and avgSpectrum array is reversed if data are radial velocities and
cdelt3 < 0 cdelt3 < 0
*/ */
function getSummedSpectrumTitle(avgSpectrum, imin, imax, cdelt3prim) { function getSummedSpectrumTitle(avgSpectrum, imin, imax, cdelt3prim) {
...@@ -306,6 +338,14 @@ ...@@ -306,6 +338,14 @@
return Math.round(result); return Math.round(result);
} }
function jyToK(flux){
let kb = 1.380649e-23;
let sec = 4.8481368110954e-06;
let factor = 1/(2*kb*((_crval3/speedOfLight)**2)*((_bmaj*_bmin*sec*sec*Math.PI/4/Math.log(2))/1e-26));
return flux * Factor;
}
// //
// A object to mark informations related to a position // A object to mark informations related to a position
// in a popup bow located close to the position passed // in a popup bow located close to the position passed
...@@ -359,7 +399,10 @@ ...@@ -359,7 +399,10 @@
// //
var _updateLastClickInfos = function () { var _updateLastClickInfos = function () {
if (_lastCoordinate == null) return; if (_lastCoordinate == null) return;
_content.innerHTML = 'Chan#' + _lastChanIndex + '<br>' + 'x = ' + _lastCoordinate[0].toFixed(0) + ', y = ' + _lastCoordinate[1].toFixed(0) + '<br>' + _content.innerHTML = 'Chan#' + _lastChanIndex + '<br>' + 'x = '
+ _lastCoordinate[0].toFixed(0)
+ ', y = '
+ _lastCoordinate[1].toFixed(0) + '<br>' +
'RA=' + _lastRADEC['RA'] + '<br>' + 'RA=' + _lastRADEC['RA'] + '<br>' +
'DEC=' + _lastRADEC['DEC'] + '<br>' + 'DEC=' + _lastRADEC['DEC'] + '<br>' +
'Value=' + Number(_lastFluxDensity).toExponential(4); 'Value=' + Number(_lastFluxDensity).toExponential(4);
...@@ -578,7 +621,10 @@ ...@@ -578,7 +621,10 @@
var pixelAtPosition = ctx.getImageData(olc[0], height - olc[1], 1, 1).data; var pixelAtPosition = ctx.getImageData(olc[0], height - olc[1], 1, 1).data;
if (pixelAtPosition) { if (pixelAtPosition) {
var data_steps_index = pixelAtPosition.slice(0, 3).join('_'); var data_steps_index = pixelAtPosition.slice(0, 3).join('_');
result = 'Chan#' + _sliceIndex + ", " + _raLabelFormatter.format(olc[0]) + ', ' + _decLabelFormatter.format(olc[1]) + ', ' + (_data_steps_1[data_steps_index]).toExponential(2) + " " + _bunit; result = 'Chan#' + _sliceIndex
+ ", " + _raLabelFormatter.format(olc[0]) + ', '
+ _decLabelFormatter.format(olc[1]) + ', '
+ (_data_steps_1[data_steps_index]).toExponential(2) + " " + _bunit;
} }
else { else {
result = "???"; result = "???";
...@@ -592,7 +638,11 @@ ...@@ -592,7 +638,11 @@
var pixelAtPosition = ctx.getImageData(olc[0], height - olc[1], 1, 1).data; var pixelAtPosition = ctx.getImageData(olc[0], height - olc[1], 1, 1).data;
if (pixelAtPosition) { if (pixelAtPosition) {
var data_steps_index = pixelAtPosition.slice(0, 3).join('_'); var data_steps_index = pixelAtPosition.slice(0, 3).join('_');
result = _raLabelFormatter.format(olc[0]) + ', ' + _decLabelFormatter.format(olc[1]) + ', ' + _data_steps_2[data_steps_index].toExponential(1) + " " + summedPixelsUnit(_bunit); result = _raLabelFormatter.format(olc[0])
+ ', '
+ _decLabelFormatter.format(olc[1]) + ', '
+ _data_steps_2[data_steps_index].toExponential(1)
+ " " + summedPixelsUnit(_bunit);
} }
else { else {
result = "???"; result = "???";
...@@ -1487,6 +1537,7 @@ ...@@ -1487,6 +1537,7 @@
}, },
chart: { chart: {
width: 1100, width: 1100,
height : '45%',
animation : false, animation : false,
zoomType: 'x', zoomType: 'x',
panning: true, panning: true,
...@@ -1579,9 +1630,22 @@ ...@@ -1579,9 +1630,22 @@