Commit 796ca1fc authored by Caillat Michel's avatar Caillat Michel
Browse files

Remove <table> elements from html, replace by div with bootstrap container.

Cosmetics modifications on graph appearanceO
parent 598c01df
h1, h2, h3, h4, h5 {color: #272727;text-align: left;}
h1 {font-size: 2.25em;}
h2 {font-size: 1.75em; margin: 30px 0 15px 0;}
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;
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;
}
.hidden{
display : none;
}
......@@ -17,6 +17,7 @@
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/overlay.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/olqv.css">
<script src="../javascript/FITSHeaderTable.js"></script>
<script src="../javascript/olqv_utils.js"></script>
......@@ -27,129 +28,7 @@
<script src="../javascript/samp.js"></script>
<script src="../javascript/samp_utils.js"></script>
<%}%>
<!-- End of conditional code generation -->
<style>
.map {
height: 512px;
width: 512px;
}
#loading {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
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
}
</style>
<!-- End of conditional code generation -->
</head>
<body>
......@@ -209,56 +88,57 @@
</nav>
</div>
<div>
<table style="width: 100%">
<tr>
<td style= "background-color: lightgray">
<div id="external_mouse_position_1"></div>
</td>
<td align="middle" style= "background-color: lightgray">
<div id="publish_spectrum"></div>
</td>
</tr>
<tr>
<td style="width: 25%">
<div id="slice" class="map" style="background-color:darkblue"></div>
</td>
<td>
<button id="zoomout">-</button>
<button id="zoomin">+</button>
<button id="zoomreset">Reset</button>
<div id="spectrum"></div>
</td>
</tr>
<tr>
<td style="background-color: lightgray">
<div id="external_mouse_position_2"></div>
</td>
<td align="middle" style="background-color: lightgray">
<div id="publish_summedpixelsspectrum"></div>
</td>
</tr>
<tr>
<td style="width: 25%, background-color:darkblue">
<div id="summedslices" class="map"></div>
</td>
<td>
<div id="summedpixelsspectrum"></div>
</td>
</tr>
</table>
<table style='display: none'>
<tr>
<td><canvas id="hiddenSlice"></canvas></td>
</tr>
<tr>
<td><canvas id="hiddenSummedSlices"></canvas></td>
</tr>
</table>
</div>
<div class="container chart-container">
<div class="row">
<div class="col">
<div id="external_mouse_position_1"></div>
</div>
<div class="col">
<div id="publish_spectrum"></div>
</div>
</div>
<div class="row">
<div class="col chart-img">
<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>
</div>
<div class="row">
<div class="col">
<div id="external_mouse_position_2"></div>
</div>
<div class="col">
<div id="publish_summedpixelsspectrum"></div>
</div>
</div>
<div class="row">
<div class="col chart-img">
<div id="summedslices" class="map"></div>
</div>
<div class="col chart-plot">
<div id="summedpixelsspectrum"></div>
</div>
</div>
</div>
<div style='display: none'>
<div class="container chart-container hidden">
<div class="row">
<div class="col">
<canvas id="hiddenSlice"></canvas>
</div>
<div class="col">
<canvas id="hiddenSummedSlices"></canvas>
</div>
</div>
</div>
<div class="hidden">
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
......@@ -266,7 +146,7 @@
</div>
<!-- Modal for samp cassis-->
<div class="modal fade" id="sampModal" role="dialog" style="display:none">
<div class="modal fade hidden" id="sampModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
......@@ -275,19 +155,35 @@
<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.
</br></br>
For the transfer to work, Check that Cassis is running.</br></br>
How to launch Cassis</br>
<strong>- Cassis with command line:</strong></br>
Open a terminal and run: javaws http://cassis.irap.omp.eu/online/cassis.jnlp </br></br>
<strong>- Cassis online:</strong></br>
<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>
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. Found <a href="images/enablejava.png">here</a> how to do with Mac </br></br>
In case of problems with Cassis please contact the Cassis project manager <a href="#">Jean-Michel.Glorian{at}irap.omp.eu</a></p>
<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>
......@@ -1280,8 +1176,8 @@ var SAMPPNGPublishControl = (function (Control) {
type: 'scatter',
marker: {
color: '#1f77b4',
size : 5.,
radius : 1
size : 0,
radius : 0
},
line: {
color: '#1f77b4',
......@@ -1565,6 +1461,7 @@ var SAMPPNGPublishControl = (function (Control) {
text: toptitle
},
chart: {
width : 1100,
zoomType: 'x',
panning: true,
panKey: 'shift',
......@@ -1616,8 +1513,9 @@ var SAMPPNGPublishControl = (function (Control) {
usePreAllocated: true
},
xAxis: {
gridLineColor: '#000000',
lineColor: '#000000',
/*gridLineColor: '#000000',*/
gridLineWidth: 1,
lineColor: '#FFFFFF',
title: {
text: xtitle
},
......@@ -1643,10 +1541,11 @@ var SAMPPNGPublishControl = (function (Control) {
}
},
yAxis: {
gridLineColor: '#000000',
lineColor: '#000000',
/*gridLineColor: '#000000',*/
lineColor: '#FFFFFF',
gridLineWidth: 1,
lineWidth : 1,
gridLineWidth : 0,
opposite : true,
title: {
text: ytitle
}
......@@ -1654,7 +1553,10 @@ var SAMPPNGPublishControl = (function (Control) {
plotOptions: {
series: {
animation: false,
//lineWidth : 1
lineWidth : 1
},
marker: {
radius : 0
}
},
series: [
......@@ -1664,7 +1566,7 @@ var SAMPPNGPublishControl = (function (Control) {
showInLegend: false,
data : highData,
marker: {
radius : 1
radius : 0
}
},getPoint(_frequencyMarker.x)
......@@ -1708,8 +1610,10 @@ var SAMPPNGPublishControl = (function (Control) {
let _averageSpectrum = null;
var toptitle = function ( value, unit ) {
return value.toExponential(4) + " (" + unit + ")";
var toptitle = function ( value, unit, vmin, vmax ) {
return value.toExponential(4) +
" (" + unit + "), vmin = " +
vmin.toFixed(4) +" , vmax = " + vmax.toFixed(4);
}
this.setAverageSpectrum = function(averageSpectrum){
......@@ -1754,10 +1658,10 @@ var SAMPPNGPublishControl = (function (Control) {
if (_instrume == "SITELLE") {
xtitle = _ctype3 + " (" + getCunit3() + ")";
ytitle = "FLUX (" + summedPixelsSpectrumUnit(header["BUNIT"]) + ")";
toptitle_unit = "ergs / s / cm^2";;
toptitle_unit = "ergs / s / cm^2";
}
else if (_origin.startsWith("CASA")) {
xtitle = "Velocity (km/s) - " + header[_specsys];
xtitle = "Velocity (km/s) - " + _specsys;
ytitle = "Int. flux density (" + summedPixelsSpectrumUnit(_bunit) + ")";
toptitle_unit = "Jy . km / s";
}
......@@ -1812,7 +1716,8 @@ var SAMPPNGPublishControl = (function (Control) {
title: {
text: ''
},
chart: {
chart: {
width : 1100,
zoomType: 'x',
panning: true,
panKey: 'shift',
......@@ -1837,7 +1742,7 @@ var SAMPPNGPublishControl = (function (Control) {
let imax = getCalculatedIndex(event.xAxis[0].max);
let title = getSummedSpectrumTitle(averageSpectrum, imin, imax, cdelt3prim);
this.setTitle({text:toptitle(title, toptitle_unit)});
this.setTitle({text:toptitle(title, toptitle_unit, event.xAxis[0].min, event.xAxis[0].max)});
return false;
}
}
......@@ -1853,14 +1758,16 @@ var SAMPPNGPublishControl = (function (Control) {
},
crosshair : true,
reversed : false,
gridLineColor: '#000000',
lineColor: '#000000'
/*gridLineColor: '#000000',*/
gridLineWidth: 1,
lineColor: '#FFFFFF'
},
yAxis: {
gridLineColor: '#000000',
lineColor: '#000000',
/*gridLineColor: '#000000',*/
gridLineWidth: 1,
lineColor: '#FFFFFF',
lineWidth : 1,
gridLineWidth : 0,
opposite : true,
title: {
text: ytitle
}
......@@ -1868,7 +1775,10 @@ var SAMPPNGPublishControl = (function (Control) {
plotOptions: {
series: {
animation: false,
//lineWidth : 1
lineWidth : 1
},
marker: {
radius : 0
}
},
tooltip:{
......@@ -2021,7 +1931,7 @@ var SAMPPNGPublishControl = (function (Control) {
cropThreshold: Infinity,
showInLegend: false,
marker: {
radius : 1
radius : 0
},
data: chartData,
}
......@@ -2031,7 +1941,7 @@ var SAMPPNGPublishControl = (function (Control) {
addYAxisSeries(summedPixelsSpectrumChart);
addYAxisSeries(spectrumChart);
let title = getSummedSpectrumTitle(averageSpectrum, 0, averageSpectrum.length-1, cdelt3prim);
summedPixelsSpectrumChart.setTitle({text:toptitle(title, toptitle_unit)});
summedPixelsSpectrumChart.setTitle({text:toptitle(title, toptitle_unit, summedData.x[0], summedData.x[averageSpectrum.length-1])});
document.getElementById('loading').style.display = 'none';
console.log("SummedPixelsSpectrumViewer : callback of getAverageSpectrum: exiting ");
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment