Skip to content
GitLab
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
Hide whitespace changes
Inline Side-by-side
yafitsv/public/stylesheets/olqv.css 0 → 100644
View file @ 796ca1fc
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;
}
yafitsv/views/olqv.ejs
View file @ 796ca1fc
...@@ -17,6 +17,7 @@ ...@@ -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" 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/overlay.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/olqv.css">
<script src="../javascript/FITSHeaderTable.js"></script> <script src="../javascript/FITSHeaderTable.js"></script>
<script src="../javascript/olqv_utils.js"></script> <script src="../javascript/olqv_utils.js"></script>
...@@ -27,129 +28,7 @@ ...@@ -27,129 +28,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 -->
<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>
</head> </head>
<body> <body>
...@@ -209,56 +88,57 @@ ...@@ -209,56 +88,57 @@
</nav> </nav>
</div> </div>
<div> <div>
<table style="width: 100%"> <div class="container chart-container">
<div class="row">
<tr> <div class="col">
<td style= "background-color: lightgray"> <div id="external_mouse_position_1"></div>
<div id="external_mouse_position_1"></div> </div>
</td> <div class="col">
<td align="middle" style= "background-color: lightgray"> <div id="publish_spectrum"></div>
<div id="publish_spectrum"></div> </div>
</td> </div>
</tr> <div class="row">
<tr> <div class="col chart-img">
<td style="width: 25%"> <div id="slice" class="map" style="background-color:darkblue"></div>
<div id="slice" class="map" style="background-color:darkblue"></div> </div>
</td> <div class="col chart-plot">
<td> <button id="zoomout">-</button>
<button id="zoomout">-</button> <button id="zoomin">+</button>
<button id="zoomin">+</button> <button id="zoomreset">Reset</button>
<button id="zoomreset">Reset</button> <div id="spectrum"></div>
<div id="spectrum"></div> </div>
</td> </div>
</tr> <div class="row">
<tr> <div class="col">
<td style="background-color: lightgray"> <div id="external_mouse_position_2"></div>
<div id="external_mouse_position_2"></div> </div>
</td> <div class="col">
<td align="middle" style="background-color: lightgray"> <div id="publish_summedpixelsspectrum"></div>
<div id="publish_summedpixelsspectrum"></div> </div>
</td> </div>
</tr> <div class="row">
<tr> <div class="col chart-img">
<td style="width: 25%, background-color:darkblue"> <div id="summedslices" class="map"></div>
<div id="summedslices" class="map"></div> </div>
</td> <div class="col chart-plot">
<td> <div id="summedpixelsspectrum"></div>
<div id="summedpixelsspectrum"></div> </div>
</td> </div>
</tr> </div>
</table>
<table style='display: none'>
<tr>
<td><canvas id="hiddenSlice"></canvas></td>
</tr>
<tr>
<td><canvas id="hiddenSummedSlices"></canvas></td>
</tr>
</table>
</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"> <div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a> <a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div> <div id="popup-content"></div>
...@@ -266,7 +146,7 @@ ...@@ -266,7 +146,7 @@
</div> </div>
<!-- Modal for samp cassis--> <!-- 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"> <div class="modal-dialog">
<!-- Modal content--> <!-- Modal content-->
<div class="modal-content"> <div class="modal-content">
...@@ -275,19 +155,35 @@ ...@@ -275,19 +155,35 @@
<h4 class="modal-title">Send spectrum by SAMP (Cassis)</h4> <h4 class="modal-title">Send spectrum by SAMP (Cassis)</h4>
</div> </div>
<div class="modal-body"> <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>
</br></br> This link is intended to send the current artemix spectrum to Cassis tool,
For the transfer to work, Check that Cassis is running.</br></br> or any other tool that runs with the SAMP protocol and accepts our file fits format.
</p>
How to launch Cassis</br> <p>
<strong>- Cassis with command line:</strong></br> For the transfer to work, Check that Cassis is running.
Open a terminal and run: javaws http://cassis.irap.omp.eu/online/cassis.jnlp </br></br> </p>
<strong>- Cassis online:</strong></br> <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> <ul>
<li>1- Go to the Cassis <a href="http://cassis.irap.omp.eu/?page=installation"> website</a></li> <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> <li>2- Use Cassis 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 Cassis, 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 Cassis please contact the Cassis project manager <a href="#">Jean-Michel.Glorian{at}irap.omp.eu</a></p> <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>
<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>
...@@ -1280,8 +1176,8 @@ var SAMPPNGPublishControl = (function (Control) { ...@@ -1280,8 +1176,8 @@ var SAMPPNGPublishControl = (function (Control) {
type: 'scatter', type: 'scatter',
marker: { marker: {
color: '#1f77b4', color: '#1f77b4',
size : 5., size : 0,
radius : 1 radius : 0
}, },
line: { line: {
color: '#1f77b4', color: '#1f77b4',
...@@ -1565,6 +1461,7 @@ var SAMPPNGPublishControl = (function (Control) { ...@@ -1565,6 +1461,7 @@ var SAMPPNGPublishControl = (function (Control) {
text: toptitle text: toptitle
}, },
chart: { chart: {
width : 1100,
zoomType: 'x', zoomType: 'x',
panning: true, panning: true,
panKey: 'shift', panKey: 'shift',
...@@ -1616,8 +1513,9 @@ var SAMPPNGPublishControl = (function (Control) { ...@@ -1616,8 +1513,9 @@ var SAMPPNGPublishControl = (function (Control) {
usePreAllocated: true usePreAllocated: true
}, },
xAxis: { xAxis: {
gridLineColor: '#000000', /*gridLineColor: '#000000',*/
lineColor: '#000000', gridLineWidth: 1,
lineColor: '#FFFFFF',
title: { title: {
text: xtitle text: xtitle
}, },
...@@ -1643,10 +1541,11 @@ var SAMPPNGPublishControl = (function (Control) { ...@@ -1643,10 +1541,11 @@ var SAMPPNGPublishControl = (function (Control) {
} }
}, },
yAxis: { yAxis: {
gridLineColor: '#000000', /*gridLineColor: '#000000',*/
lineColor: '#000000', lineColor: '#FFFFFF',
gridLineWidth: 1,
lineWidth : 1, lineWidth : 1,
gridLineWidth : 0, opposite : true,
title: { title: {
text: ytitle text: ytitle
} }
...@@ -1654,7 +1553,10 @@ var SAMPPNGPublishControl = (function (Control) { ...@@ -1654,7 +1553,10 @@ var SAMPPNGPublishControl = (function (Control) {
plotOptions: { plotOptions: {
series: { series: {
animation: false, animation: false,
//lineWidth : 1 lineWidth : 1
},
marker: {
radius : 0
} }
}, },
series: [ series: [
...@@ -1664,7 +1566,7 @@ var SAMPPNGPublishControl = (function (Control) { ...@@ -1664,7 +1566,7 @@ var SAMPPNGPublishControl = (function (Control) {
showInLegend: false, showInLegend: false,
data : highData, data : highData,
marker: { marker: {
radius : 1 radius : 0
} }
},getPoint(_frequencyMarker.x) },getPoint(_frequencyMarker.x)
...@@ -1708,8 +1610,10 @@ var SAMPPNGPublishControl = (function (Control) { ...@@ -1708,8 +1610,10 @@ var SAMPPNGPublishControl = (function (Control) {
let _averageSpectrum = null; let _averageSpectrum = null;
var toptitle = function ( value, unit ) { var toptitle = function ( value, unit, vmin, vmax ) {
return value.toExponential(4) + " (" + unit + ")"; return value.toExponential(4) +
" (" + unit + "), vmin = " +
vmin.toFixed(4) +" , vmax = " + vmax.toFixed(4);
} }
this.setAverageSpectrum = function(averageSpectrum){ this.setAverageSpectrum = function(averageSpectrum){
...@@ -1754,10 +1658,10 @@ var SAMPPNGPublishControl = (function (Control) { ...@@ -1754,10 +1658,10 @@ var SAMPPNGPublishControl = (function (Control) {
if (_instrume == "SITELLE") { if (_instrume == "SITELLE") {
xtitle = _ctype3 + " (" + getCunit3() + ")"; xtitle = _ctype3 + " (" + getCunit3() + ")";
ytitle = "FLUX (" + summedPixelsSpectrumUnit(header["BUNIT"]) + ")"; ytitle = "FLUX (" + summedPixelsSpectrumUnit(header["BUNIT"]) + ")";
toptitle_unit = "ergs / s / cm^2";; toptitle_unit = "ergs / s / cm^2";
} }
else if (_origin.startsWith("CASA")) { else if (_origin.startsWith("CASA")) {
xtitle = "Velocity (km/s) - " + header[_specsys]; xtitle = "Velocity (km/s) - " + _specsys;
ytitle = "Int. flux density (" + summedPixelsSpectrumUnit(_bunit) + ")"; ytitle = "Int. flux density (" + summedPixelsSpectrumUnit(_bunit) + ")";
toptitle_unit = "Jy . km / s"; toptitle_unit = "Jy . km / s";
} }
...@@ -1812,7 +1716,8 @@ var SAMPPNGPublishControl = (function (Control) { ...@@ -1812,7 +1716,8 @@ var SAMPPNGPublishControl = (function (Control) {
title: { title: {
text: '' text: ''
}, },
chart: { chart: {
width : 1100,
zoomType: 'x', zoomType: 'x',
panning: true, panning: true,
panKey: 'shift', panKey: 'shift',
...@@ -1837,7 +1742,7 @@ var SAMPPNGPublishControl = (function (Control) { ...@@ -1837,7 +1742,7 @@ var SAMPPNGPublishControl = (function (Control) {
let imax = getCalculatedIndex(event.xAxis[0].max); let imax = getCalculatedIndex(event.xAxis[0].max);
let title = getSummedSpectrumTitle(averageSpectrum, imin, imax, cdelt3prim); 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; return false;
} }
} }
...@@ -1853,14 +1758,16 @@ var SAMPPNGPublishControl = (function (Control) { ...@@ -1853,14 +1758,16 @@ var SAMPPNGPublishControl = (function (Control) {
}, },
crosshair : true, crosshair : true,
reversed : false, reversed : false,
gridLineColor: '#000000',