Commit 14fd0e35 authored by Caillat Michel's avatar Caillat Michel
Browse files

Fix animation problem on bottom graph

parent 51ab4b9e
......@@ -16,8 +16,10 @@ h4 {font-size: 1em; margin: 30px 0 15px 0;}
top: 0;
left: 0;
z-index: 100;
/*width: 100vw;
height: 100vh;*/
width: 100vw;
height: 100vh;
height: 1200px;
background-color: rgba(192, 192, 192, 0.5);
background-image: url("../MnyxU.gif");
background-repeat: no-repeat;
......@@ -142,6 +144,7 @@ h4 {font-size: 1em; margin: 30px 0 15px 0;}
.chart-container > .row > .chart-plot{
max-width : 100%;
padding-left : 0;
padding-top : 5em;
}
.hidden{
......
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
......@@ -7,10 +8,15 @@
<!--script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"
integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
......@@ -22,12 +28,12 @@
<script src="../javascript/FITSHeaderTable.js"></script>
<script src="../javascript/olqv_utils.js"></script>
<!-- <script src="https://openlayers.org/en/v4.6.4/build/ol.js" type="text/javascript"></script> -->
<!-- <script src="https://openlayers.org/en/v4.6.4/build/ol.js" type="text/javascript"></script> -->
<!-- Conditional code generation -->
<%if(useSAMP){%>
<%if(useSAMP){%>
<script src="../javascript/samp.js"></script>
<script src="../javascript/samp_utils.js"></script>
<%}%>
<%}%>
<!-- End of conditional code generation -->
</head>
......@@ -40,40 +46,40 @@
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<% if (renderingCapabilities) { %>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<ul class="list-group list-group-horizontal">
<li class="list-group-item ">
<label for="LUTSelector">LUTs</label>
<select name="LUTs" class="form-control" id="LUTSelector">
<% renderingCapabilities["luts"].forEach(function(lut) { %>
<option> <%=lut%></option>
<% }) %>
</select>
</li>
<li class="list-group-item ">
<label for="ITTSelector">ITTs</label>
<select class="form-control" id="ITTSelector">
<% renderingCapabilities["itts"].forEach(function(itt) { %>
<option> <%=itt%></option>
<% }) %>
</select>
</li>
<li class="list-group-item ">
<label for="VideoModeSelector">Video mode</label>
<select class="form-control" id="VideoModeSelector">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<ul class="list-group list-group-horizontal">
<li class="list-group-item ">
<label for="LUTSelector">LUTs</label>
<select name="LUTs" class="form-control" id="LUTSelector">
<% renderingCapabilities["luts"].forEach(function(lut) { %>
<option> <%=lut%></option>
<% }) %>
</select>
</li>
<li class="list-group-item ">
<label for="ITTSelector">ITTs</label>
<select class="form-control" id="ITTSelector">
<% renderingCapabilities["itts"].forEach(function(itt) { %>
<option> <%=itt%></option>
<% }) %>
</select>
</li>
<li class="list-group-item ">
<label for="VideoModeSelector">Video mode</label>
<select class="form-control" id="VideoModeSelector">
<% renderingCapabilities["vmodes"].forEach(function(vmode) { %>
<option> <%=vmode%></option>
<option> <%=vmode%></option>
<% }) %>
</select>
</li>
<li class="list-group-item">
<a class="form-control" id="rccap" class="btn btn-primary" href="#" role="button">Apply</a>
</li>
</ul>
</nav>
</div>
</select>
</li>
<li class="list-group-item">
<a class="form-control" id="rccap" class="btn btn-primary" href="#" role="button">Apply</a>
</li>
</ul>
</nav>
</div>
<%}%>
<%}%>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
......@@ -225,427 +231,437 @@
</body>
<script>
var ENTER = function () { console.log(arguments.callee.name + ": entering."); };
var EXIT = function () { console.log(arguments.callee.name + ": exiting."); };
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;
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 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);
}
//
// 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
}
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]]
});
/**
* 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);
/**
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));
}
};
//
// 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");
};
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);
}
//
// 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");
};
//
// 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
}
});
// create our popup.
_popupLastClickInfos();
};
/**
* 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;
};
/*
** 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);
}
document.getElementById('loading').style.display='none';
}
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");
document.getElementById('loading').style.display='block';
image.getImage().addEventListener('load', function() {
document.getElementById('loading').style.display='none';
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");
document.getElementById('loading').style.display='block';
image.getImage().addEventListener('load', function() {
document.getElementById('loading').style.display='none';
hidden_canvas_2.getContext('2d').drawImage(image.getImage(), 0, 0);
});
image.getImage().src = src;
image.getImage().crossOrigin = "Anonymous";
console.log("_imageLoadFunction_2 : exiting");
};
_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");
};
//
// 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");
};
// create our popup.
_popupLastClickInfos();
};
/*
** 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
}
}
var SAMPPNGPublishControl = (function (Control) {
function SAMPPNGPublishControl(opt_options) {
var options = opt_options || {};
var button = document.createElement('button');
button.innerHTML = '&#8663';
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);
var element = document.createElement('div');
element.className = 'samp-publish-png ol-unselectable ol-control';
element.appendChild(button);
_image.getImage().src = _srcURI;
} else {
console.log("Response status: %d (%s)", this.status, this.statusText);
}
showLoaderAction(false);
}
Control.call(this, {
element: element,
target: options.target
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);
});
this.handlePublish = function () {;}
button.addEventListener('click', this.handlePublish.bind(this), false);
this.setHandler = function (handler) {console.log("Changing handler"); button.addEventListener('click', handler.bind(this), false)};
}
image.getImage().src = src;
image.getImage().crossOrigin = "Anonymous";
console.log("_imageLoadFunction_1 : exiting");
};
if ( Control ) SAMPPNGPublishControl.__proto__ = Control;
SAMPPNGPublishControl.prototype = Object.create( Control && Control.prototype );
SAMPPNGPublishControl.prototype.constructor = SAMPPNGPublishControl;
//
// What happends when the image to be displayed in 'image'
// is loaded. To be used for _map_2
//
var _imageLoadFunction_2 = function (image, src) {