Commit 396be779 authored by Caillat Michel's avatar Caillat Michel
Browse files

Improve page presentation

parent 5eae401e
body{
width : 1440px;
}
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;}
......@@ -151,10 +155,6 @@ padding-top : 0.5em;
/*padding-top : 5em;*/
}
.col .chart-control{
padding-left : 825px;
}
.col .chart-title{
padding-left : 750px;
margin-bottom : 2em;
......@@ -177,9 +177,50 @@ padding-top : 0.5em;
}
.btn-control{
width : 100px;
width : 90px;
}
.external_mouse_position{
height : 1.5em;
}
#sampRegistry button{
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid
transparent;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.samp-img{
width:30px;
height:30px;
cursor: pointer;
}
.cube-infos{
font-size:15px;
color: black;
}
.img-configuration select{
display : inline-block;
width : auto;
}
.img-configuration .list-group-item:last-child{
margin-bottom: auto;
border-bottom-right-radius: 0%;
border-bottom-left-radius: 0%;
}
\ No newline at end of file
......@@ -44,10 +44,10 @@
<div class="pos-f-t">
<div class="collapse" id="sampRegistry"></div>
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<div class="p-4">
<% if (renderingCapabilities) { %>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<ul class="list-group list-group-horizontal">
<nav class="navbar navbar-light bg-light">
<ul class="list-group list-group-horizontal img-configuration">
<li class="list-group-item ">
<label for="LUTSelector">LUTs</label>
<select name="LUTs" class="form-control" id="LUTSelector">
......@@ -73,7 +73,7 @@
</select>
</li>
<li class="list-group-item">
<a class="form-control" id="rccap" class="btn btn-primary" href="#" role="button">Apply</a>
<button id="rccap" class="btn btn-default btn-control">Apply</button>
</li>
</ul>
</nav>
......@@ -82,15 +82,20 @@
<%}%>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<nav class="navbar navbar-light" style="background-color: #FFFFFF;">
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#navbarToggleExternalContent"
aria-controls="navbarToggleExternalContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<img src="../samphub.png" style="width:30px; height:30px" data-toggle="collapse" data-target="#sampRegistry" aria-controls="sampRegistry" aria-expanded="false" aria-label="Toggle navigation"/>
<!--<div><a id="jupyter" href="#" target="_blank"><img src="../jupyter.png" style="width:30px; height:30px" title="jupyter"/></a></div>-->
<a href="#" class="btn btn-link btn-sm" onclick="viewIn3D(); return false;"> 3D representation </a>
<div><a href="http://artemix.obspm.fr/fits/browse" target="_blank" class="btn btn-link btn-sm">See more FITS files...</a></div>
<div id="cubeInfos" style="font-size:15px; color: white"></div>
<a href="#" class="btn btn-link btn-sm" onclick="viewIn3D(); return false;"> Show 3D model </a>
<div><a href="http://artemix.obspm.fr/fits/browse" target="_blank" class="btn btn-link btn-sm">Show Fits file browser</a></div>
<div id="cubeInfos" class="cube-infos"></div>
<img src="../samphub.png" class="samp-img"
data-toggle="collapse" data-target="#sampRegistry" title="Transfer data to another application with SAMP protocol"
aria-controls="sampRegistry" aria-expanded="false" aria-label="Toggle navigation"/>
</nav>
</div>
<div>
......@@ -100,7 +105,7 @@
<div id="external_mouse_position_1" class="external_mouse_position"></div>
</div>
<div class="col">
<div id="publish_spectrum"></div>
<div id="debug_jpk"></div>
</div>
</div>
<div class="row">
......@@ -110,23 +115,22 @@
<div class="col chart-plot">
<div id="spectrum"></div>
</div>
</div>
<div class="row">
<div class="col">
<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>
<p><button id="zoomin" class="btn btn-default btn-control">Zoom in</button></p>
<p><button id="zoomout" class="btn btn-default btn-control">Zoom out</button></p>
<p><button id="zoomreset" class="btn btn-default btn-control">Reset</button></p>
<div id="publish_spectrum"></div>
</div>
</div>
</div>
<div class="row">
</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>
</div>
</div>
<div class="row">
<div class="col chart-img">
......@@ -135,6 +139,9 @@
<div class="col chart-plot">
<div id="summedpixelsspectrum"></div>
</div>
<div class="col">
<div id="publish_summedpixelsspectrum"></div>
</div>
</div>
<div class="row">
<div class="col">
......@@ -265,815 +272,854 @@
<script>
var ENTER = function () { console.log(arguments.callee.name + ": entering."); };
var EXIT = function () { console.log(arguments.callee.name + ": exiting."); };
const PLOT_WIDTH = 780;
const PLOT_RATIO = "65%";
const PLOT_COLOR ="#F5F101";
<%if (useSAMP) {%>
var sAMPPublisher = null;
var sAMPPublisher = null;
<%}%>
var ROI;
var summedPixelsSpectrumChart;
var spectrumChart;
var viewIn3D = function () {
window.open("getYtObj?relFITSFilePath=" + relFITSFilePath + "&iRA0=" + ROI.iRA0 + "&iRA1=" + ROI.iRA1 + "&iDEC0=" + ROI.iDEC0 + "&iDEC1=" + ROI.iDEC1 + "&iFREQ0=" + ROI.iFREQ0 + "&iFREQ1=" + ROI.iFREQ1);
};
var showLoaderAction = function(enable){
if(enable){
document.getElementById('loading').style.display = 'block';
}else{
document.getElementById('loading').style.display = 'none';
}
}
var handleEvent = function (evt) {
console.log(JSON.stringify(evt, null, 4));
return true;
};
/**
Add a series where Y=0 in the given chart
*/
function addYAxisSeries(chart) {
chart.addSeries({
lineWidth: 1,
enableMouseTracking: false,
showInLegend: false,
color: "#000000",
marker: {
enabled: false
},
data: [[chart.xAxis[0].dataMin, 0], [chart.xAxis[0].dataMax, 0]]
var summedPixelsSpectrumChart;
var spectrumChart;
var viewIn3D = function () {
window.open("getYtObj?relFITSFilePath=" + relFITSFilePath + "&iRA0=" + ROI.iRA0 + "&iRA1=" + ROI.iRA1 + "&iDEC0=" + ROI.iDEC0 + "&iDEC1=" + ROI.iDEC1 + "&iFREQ0=" + ROI.iFREQ0 + "&iFREQ1=" + ROI.iFREQ1);
};
var showLoaderAction = function (enable) {
if (enable) {
document.getElementById('loading').style.display = 'block';
} else {
document.getElementById('loading').style.display = 'none';
}
}
var handleEvent = function (evt) {
console.log(JSON.stringify(evt, null, 4));
return true;
};
/**
Add a series where Y=0 in the given chart
*/
function addYAxisSeries(chart) {
chart.addSeries({
lineWidth: 1,
enableMouseTracking: false,
showInLegend: false,
color: "#000000",
marker: {
enabled: false
},
data: [[chart.xAxis[0].dataMin, 0], [chart.xAxis[0].dataMax, 0]]
});
}
/**
calculate the value displayed as title of summed average spectrum
avgSpectrum array is reversed if data are radial velocities and
cdelt3 < 0
*/
function getSummedSpectrumTitle(avgSpectrum, imin, imax, cdelt3prim) {
let result = 0;
if (_ctype3 === 'VRAD' && _cdelt3 < 0) {
let copy = (x) => x;
let arraycopy = avgSpectrum.map(copy);
result = sumArr(arraycopy.reverse(), imin, imax, cdelt3prim);
} else {
result = sumArr(avgSpectrum, imin, imax, cdelt3prim);
}
return result / unitRescale(summedPixelsSpectrumUnit(_bunit));
}
function getCalculatedIndex(value) {
let result = 0;
if (_ctype3 === 'VRAD') {
let step1 = (unitFactor[defaultOutputUnit[_ctype3]] / unitFactor[getCunit3()]) / _cdelt3;
result = Math.abs(value * step1) - _crval3 + _crpix3 - 1;
} else if (_ctype3 === 'FREQ') {
// if ctype is FREQ we have to read defaultOutputUnit['VRAD']
let step1 = v2f(value * unitFactor[defaultOutputUnit['VRAD']], _restfreq);
let step2 = (step1 - _crval3) / _cdelt3;
result = step2 + _crpix3 - 1;
}
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;
}*/
function janskyPerKelvin() {
let kb = 1.380649e-23;
let bmin = degToRad(_bmin);
let bmax = degToRad(_bmaj);
lambda = null;
if (_origin.startsWith("GILDAS")){
lambda = speedOfLight / _restfreq;
}else{
lambda = speedOfLight / _crval3;
}
let omega = Math.PI * bmin * bmax / 4 / Math.log(2);
step1 = 2 * kb * omega / (lambda * lambda);
let result = step1 / 1e-26;
return result;
}
function kelvinPerJansky() {
let jperk = janskyPerKelvin();
let result = 1. / jperk;
return result;
}
function arcsecToDeg(arcsec) {
return arcsec / 3600;
}
function degToRad(deg) {
return deg * (Math.PI / 180);
}
//
// A object to mark informations related to a position
// in a popup bow located close to the position passed
// as a parameter.
//
function LastClickMarker(map) {
var _map = map;
var _overlay = null;
var _container = document.getElementById('popup');
var _content = document.getElementById('popup-content');
var _closer = document.getElementById('popup-closer');
var _lastChanIndex = null;
var _lastCoordinate = null;
var _lastRADEC = null;
var _lastFluxDensity = null;
// popup creation and addition to an ol overlay to the map passed
// as a parameter.
//
var _popupLastClickInfos = function () {
if (_overlay == null) {
/**
* Create an overlay to anchor the popup to the map.
*/
_overlay = new ol.Overlay({
element: _container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
}
/**
calculate the value displayed as title of summed average spectrum
avgSpectrum array is reversed if data are radial velocities and
cdelt3 < 0
*/
function getSummedSpectrumTitle(avgSpectrum, imin, imax, cdelt3prim) {
let result = 0;
if (_ctype3 === 'VRAD' && _cdelt3 < 0) {
let copy = (x) => x;
let arraycopy = avgSpectrum.map(copy);
result = sumArr(arraycopy.reverse(), imin, imax, cdelt3prim);
} else {
result = sumArr(avgSpectrum, imin, imax, cdelt3prim);
}
return result / unitRescale(summedPixelsSpectrumUnit(_bunit));
}
function getCalculatedIndex(value) {
let result = 0;
if (_ctype3 === 'VRAD') {
let step1 = (unitFactor[defaultOutputUnit[_ctype3]] / unitFactor[getCunit3()]) / _cdelt3;
result = Math.abs(value * step1) - _crval3 + _crpix3 - 1;
} else if (_ctype3 === 'FREQ') {
// if ctype is FREQ we have to read defaultOutputUnit['VRAD']
let step1 = v2f(value * unitFactor[defaultOutputUnit['VRAD']], _restfreq);
let step2 = (step1 - _crval3) / _cdelt3;
result = step2 + _crpix3 - 1;
}
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));
/**
* Add a click handler to hide the popup.
* @return {boolean} Don't follow the href.
*/
_closer.onclick = function () {
_overlay.setPosition(undefined);
_closer.blur();
return false;
};
return flux * Factor;
_map.addOverlay(_overlay);
}
};
//
// A object to mark informations related to a position
// in a popup bow located close to the position passed
// as a parameter.
//
function LastClickMarker(map) {
var _map = map;
var _overlay = null;
var _container = document.getElementById('popup');
var _content = document.getElementById('popup-content');
var _closer = document.getElementById('popup-closer');
var _lastChanIndex = null;
var _lastCoordinate = null;
var _lastRADEC = null;
var _lastFluxDensity = null;
// popup creation and addition to an ol overlay to the map passed
// as a parameter.
//
var _popupLastClickInfos = function () {
if (_overlay == null) {
/**
* Create an overlay to anchor the popup to the map.
*/
_overlay = new ol.Overlay({
element: _container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
/**
* Add a click handler to hide the popup.
* @return {boolean} Don't follow the href.
*/
_closer.onclick = function () {
_overlay.setPosition(undefined);
_closer.blur();
return false;
};
_map.addOverlay(_overlay);
}
};
//
// update the content of the popup by using the informations
// stored in _lastCoordinate, _lastRADEC and _lastFluxDensity
//
var _updateLastClickInfos = function () {
if (_lastCoordinate == null) return;
_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);
_overlay.setPosition(_lastCoordinate);
}
//
// public method to register the values to be displayed
// in the popup and update its content.
//
this.setPositionAndFluxDensity = function (data) {
console.log("this.setPosition = function(coordinate) { : entering");
_lastChanIndex = data["chanIndex"]
_lastCoordinate = data["coordinate"];
_lastRADEC = data["RADEC"];
_lastFluxDensity = data["fluxDensity"];
_updateLastClickInfos();
console.log("this.setPosition = function(coordinate) { : exiting");
};
//
// update the content of the popup by using the informations
// stored in _lastCoordinate, _lastRADEC and _lastFluxDensity
//
var _updateLastClickInfos = function () {
if (_lastCoordinate == null) return;
_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);
_overlay.setPosition(_lastCoordinate);
}
//
// public method to register the fluxDensity value passed as a parameter
// and update the popup content accordingly.
//
this.setFluxDensity = function (fluxDensity, sliceIndex) {
console.log("this.setFluxDensity = function(fluxDensity) { : entering");
_lastFluxDensity = fluxDensity;
_lastChanIndex = sliceIndex;
_updateLastClickInfos();
console.log("this.setFluxDensity = function(fluxDensity) { : exiting");
};
//
// public method to register the values to be displayed
// in the popup and update its content.
//
this.setPositionAndFluxDensity = function (data) {
console.log("this.setPosition = function(coordinate) { : entering");
// create our popup.
_popupLastClickInfos();
};
_lastChanIndex = data["chanIndex"]
_lastCoordinate = data["coordinate"];
_lastRADEC = data["RADEC"];
_lastFluxDensity = data["fluxDensity"];
/*
** A function to start/stop an hold-on animation while
** an image is prepared by the server until it serves it to the client.
** This function is dedicated to be passed a the value
** of the option imageLoadFunction of an ImageStatic constructor.
**
*/
var _image = null;
function _onProgress(event) {
if (event.lengthComputable) {
var percentComplete = (event.loaded / event.total) * 100;
console.log("Transfert: %d%%", percentComplete);
} else {
// Impossible de calculer la progression puisque la taille totale est inconnue
}
}
function _onError(event) {
console.error("Error " + event.target.status + " during the transfert.");
}
function _onLoad(event) {
// Ici, this.readyState XMLHttpRequest.DONE .
if (this.status === 200) {
console.log("Transfert done - " + this.responseText.length + "bytes.");
var _srcURI = "data:image/png," + this.responseText;
console.log("_srcURI=" + _srcURI);
_image.getImage().src = _srcURI;
} else {
console.log("Response status: %d (%s)", this.status, this.statusText);
}
showLoaderAction(false);
}
let hidden_canvas_1 = document.getElementById("hiddenSlice");
let hidden_canvas_2 = document.getElementById("hiddenSummedSlices");
//
//
// What happends when the image to be displayed in 'image'
// is loaded. To be used for _map_1
//
var _imageLoadFunction_1 = function (image, src) {
console.log("_imageLoadFunction_1 : entering");
showLoaderAction(true);
image.getImage().addEventListener('load', function () {
showLoaderAction(false);
hidden_canvas_1.getContext('2d').drawImage(image.getImage(), 0, 0);
});
image.getImage().src = src;
image.getImage().crossOrigin = "Anonymous";
console.log("_imageLoadFunction_1 : exiting");
};
//
// What happends when the image to be displayed in 'image'
// is loaded. To be used for _map_2
//
var _imageLoadFunction_2 = function (image, src) {
console.log("_imageLoadFunction_2 : entering");
showLoaderAction(true);
image.getImage().addEventListener('load', function () {
showLoaderAction(false);
hidden_canvas_2.getContext('2d').drawImage(image.getImage(), 0, 0);
});
image.getImage().src = src;
image.getImage().crossOrigin = "Anonymous";
console.log("_imageLoadFunction_2 : exiting");
};
var SAMPPNGPublishControl = (function (Control) {
function SAMPPNGPublishControl(opt_options) {
var options = opt_options || {};
var button = document.createElement('button');