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;}
h4 {font-size: 1em; margin: 30px 0 15px 0;}
.map {
height: 512px;
width: 512px;
}
#loading {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 100;
/*width: 100vw;
height: 100vh;*/
width: 100vw;
height: 1200px;
background-color: rgba(192, 192, 192, 0.5);
background-image: url("../MnyxU.gif");
background-repeat: no-repeat;
background-position: center;
}
#info {
z-index: 1;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
margin: 0;
background: rgba(0,60,136,0.7);
color: white;
border: 0;
transition: opacity 100ms ease-in;
}
.marker {
width: 16px;
height: 16px;
border: 1px solid #088;
border-radius: 8px;
background-color: #0FF;
opacity: 0.5;
}
.ol-popup {
position: absolute;
background-color: white;
-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));
padding: 10px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 150px;
font-size: 10px;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "x";
}
th, td {
padding: 0px;
margin: 0px;
font-size: 16px;
height: 20px;
}
.list-group{
flex-direction: row;
}
.map:-moz-full-screen {
height: 100%;
}
.map:-webkit-full-screen {
height: 100%;
}
.map:-ms-fullscreen {
height: 100%;
}
.map:fullscreen {
height: 100%;
}
.samp-publish-png {
top: 65px;
left: .5em;
display:none;
}
.ol-touch .samp-publish-png {
top: 80px
}
.chart-container{
max-width:100%;
}
.chart-container > .row{
padding-top : 0.5em;
}
.chart-container > .row > .chart-img{
max-width : 550px;
padding-left : 5px;
padding-right : 0px;
}
.chart-container > .row > .chart-plot{
max-width : 100%;
padding-left : 0;
padding-top : 5em;
}
.hidden{
display : none;
}
height: 512px;
width: 512px;
}
#loading {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 100;
/*width: 100vw;
height: 100vh;*/
width: 100vw;
height: 1200px;
background-color: rgba(192, 192, 192, 0.5);
background-image: url("../MnyxU.gif");
background-repeat: no-repeat;
background-position: center;
}
#info {
z-index: 1;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
margin: 0;
background: rgba(0,60,136,0.7);
color: white;
border: 0;
transition: opacity 100ms ease-in;
}
.marker {
width: 16px;
height: 16px;
border: 1px solid #088;
border-radius: 8px;
background-color: #0FF;
opacity: 0.5;
}
.ol-popup {
position: absolute;
background-color: white;
-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));
padding: 10px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 150px;
font-size: 10px;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "x";
}
th, td {
padding: 0px;
margin: 0px;
font-size: 16px;
height: 20px;
}
.list-group{
flex-direction: row;
}
.map:-moz-full-screen {
height: 100%;
}
.map:-webkit-full-screen {
height: 100%;
}
.map:-ms-fullscreen {
height: 100%;
}
.map:fullscreen {
height: 100%;
}
.samp-publish-png {
top: 65px;
left: .5em;
display:none;
}
.ol-touch .samp-publish-png {
top: 80px
}
.chart-container{
max-width:100%;
}
/*
.chart-container > .row{
padding-top : 0.5em;
}*/
.chart-container > .row > .chart-img{
max-width : 550px;
padding-left : 5px;
padding-right : 0px;
}
.chart-container > .row > .chart-plot{
max-width : 100%;
padding-left : 0;
/*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 @@
<script src="../javascript/samp.js"></script>
<script src="../javascript/samp_utils.js"></script>
<%}%>
<!-- End of conditional code generation -->
<!-- End of conditional code generation -->
</head>
<body>
......@@ -97,7 +97,7 @@
<div class="container chart-container">
<div class="row">
<div class="col">
<div id="external_mouse_position_1"></div>
<div id="external_mouse_position_1" class="external_mouse_position"></div>
</div>
<div class="col">
<div id="publish_spectrum"></div>
......@@ -108,15 +108,21 @@
<div id="slice" class="map" style="background-color:darkblue"></div>
</div>
<div class="col chart-plot">
<button id="zoomout">-</button>
<button id="zoomin">+</button>
<button id="zoomreset">Reset</button>
<div id="spectrum"></div>
<div id="spectrum"></div>
</div>
</div>
<div class="row">
<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 class="col">
<div id="publish_summedpixelsspectrum"></div>
......@@ -130,6 +136,13 @@
<div id="summedpixelsspectrum"></div>
</div>
</div>
<div class="row">
<div class="col">
<div class="chart-title">
<span id="chart_title"></span>
</div>
</div>
</div>
</div>
<div class="container chart-container hidden">
......@@ -141,8 +154,8 @@
<canvas id="hiddenSummedSlices"></canvas>
</div>
</div>
</div>
</div>
<div class="hidden">
<div id="popup" class="ol-popup">
......@@ -162,12 +175,12 @@
</div>
<div class="modal-body">
<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.
</p>
<p>
For the transfer to work, Check that Cassis is running.
</p>
</p>
<h3>How to launch Cassis</h3>
<p>
<strong>- Cassis with command line:</strong>
......@@ -183,16 +196,16 @@
<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.
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 class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
......@@ -208,34 +221,53 @@
<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.
</br></br>
For the transfer to work, Check that Aladin is running.</br></br>
How to launch Aladin</br>
<strong>- Aladin with command line:</strong></br>
Open a terminal and run: javaws https://aladin.u-strasbg.fr/java/nph-aladin.pl</br></br>
<strong>- Aladin online:</strong></br>
<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>
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>
In case of problems with Aladin please contact the Aladin team cds-question 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>
<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>
</div>
</div>
</body>
<script>
var ENTER = function () { console.log(arguments.callee.name + ": entering."); };
var EXIT = function () { console.log(arguments.callee.name + ": exiting."); };
<script>
var ENTER = function () { console.log(arguments.callee.name + ": entering."); };
var EXIT = function () { console.log(arguments.callee.name + ": exiting."); };
<%if (useSAMP) {%>
var sAMPPublisher = null;
<%if (useSAMP) {%>
var sAMPPublisher = null;
<%}%>
var ROI;
......@@ -277,7 +309,7 @@
/**
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
*/
function getSummedSpectrumTitle(avgSpectrum, imin, imax, cdelt3prim) {
......@@ -306,6 +338,14 @@
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
// in a popup bow located close to the position passed
......@@ -359,7 +399,10 @@
//
var _updateLastClickInfos = function () {
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>' +
'DEC=' + _lastRADEC['DEC'] + '<br>' +
'Value=' + Number(_lastFluxDensity).toExponential(4);
......@@ -578,7 +621,10 @@
var pixelAtPosition = ctx.getImageData(olc[0], height - olc[1], 1, 1).data;
if (pixelAtPosition) {
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 {
result = "???";
......@@ -592,7 +638,11 @@
var pixelAtPosition = ctx.getImageData(olc[0], height - olc[1], 1, 1).data;
if (pixelAtPosition) {
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 {
result = "???";
......@@ -1487,6 +1537,7 @@
},
chart: {
width: 1100,
height : '45%',
animation : false,
zoomType: 'x',
panning: true,
......@@ -1579,9 +1630,22 @@
opposite: true,
title: {
text: ytitle
},
labels :{
formatter: function() {
return this.value /*+ "test"*/;
}
}
},
plotOptions: {
/*scatter:{
zones: [
{
value : 0,
className : "zone-0"
}
]
},*/
series: {
animation: {
duration : 0
......@@ -1608,7 +1672,7 @@
sliceViewer.setFluxDensityInPopup(plotData.y[ifrequencyMarker]);
console.log("getSpectrum callback : exiting");
}
);
);
console.log("plot: exiting.");
};
......@@ -1652,6 +1716,10 @@
_averageSpectrum = averageSpectrum;
}
this.setChartTitle = function(title){
document.getElementById("chart_title").innerHTML = title;
}
this.computeSummedAverageSpectrum = function (min, max) {
var imin = Math.round((min - summedData.x[0]) / (summedData.x[1] - summedData.x[0]));
var imax = Math.round((max - summedData.x[0]) / (summedData.x[1] - summedData.x[0]));
......@@ -1751,6 +1819,7 @@
chart: {
animation: false,
width: 1100,
height : '45%',
zoomType: 'x',
panning: true,
panKey: 'shift',
......@@ -1775,7 +1844,7 @@
let imax = getCalculatedIndex(event.xAxis[0].max);
let title = getSummedSpectrumTitle(averageSpectrum, imin, imax, cdelt3prim);
this.setTitle({ text: toptitle(title, toptitle_unit, event.xAxis[0].min, event.xAxis[0].max) });
self.setChartTitle(toptitle(title, toptitle_unit, event.xAxis[0].min, event.xAxis[0].max));