Skip to content
GitLab
Commit 82eae948 authored by Caillat Michel's avatar Caillat Michel
Browse files

An enhanced (?) version of the 2D viewer

parent b55cdf58
Hide whitespace changes
Inline Side-by-side
yafitsv/views/olqv_2-5d.ejs 0 → 100644
View file @ 82eae948
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title><%=title%></title>
<script src="https://kit.fontawesome.com/33cc1a1919.js" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<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.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/css/ol.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/overlay.css">
<script src="../javascript/FITSHeaderTable.js"></script>
<script src="../javascript/olqv_utils.js"></script>
<script src="../javascript/olqv_customcontrols.js"></script>
<script src="../javascript/olqv_infosblock.js"></script>
<script src="../javascript/olqv_reset.js"></script>
<script src="../javascript/olqv_settings.js"></script>
<script src="../javascript/olqv_shapes.js"></script>
<script src="../javascript/olqv_contours.js"></script>
<script src="../javascript/olqv_samp_publisher.js"></script>
<script src="../javascript/olqv_boxes.js"></script>
<script src="../javascript/olqv_markers.js"></script>
<script src="../javascript/olqv_keyboardevents.js"></script>
<script src="../javascript/olqv_viewer.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<!--
<%if(useSAMP){%>
-->
<script src="../javascript/samp.js"></script>
<script src="../javascript/samp_utils.js"></script>
<!--
<%}%>
-->
<style>
#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;
}
th,
td {
padding: 0px;
margin: 0px;
font-size: 16px;
height: 20px;
font-family: sans-serif
}
.list-group {
flex-direction: row;
}
.map:-moz-full-screen {
height: 85%;
z-index: 1000;
float: top;
}
.map:-webkit-full-screen {
height: 85%;
z-index: 1000;
}
.map:-ms-fullscreen {
height: 85%;
z-index: 1000;
}
.map:fullscreen {
height: 85%;
z-index: 1000;
}
.map {
background-color: black;
}
.fullscreen {
width: 100%;
height: 400px;
}
.sidepanel {
background: #0000;
width: 100%;
height: 15%;
}
.modal {
overflow: visible !important;
*display: block !important;
z-index: 99999;
}
.modal-body {
height: 500px;
overflow-y: auto;
z-index: 99999;
}
.samp-publish-png {
top: 65px;
left: .5em;
display: none;
}
.ol-touch .samp-publish-png {
top: 80px
}
.yafitscontourscontrol {
top: 140px;
left: .5em;
}
.customcontrols {
position: absolute;
top: .5em;
left: .5em;
}
.settingscontrol {
top: 200px;
left: .5em;
}
.ol-mouse-position {
background-color: white;
top: 8px;
right: 100px;
position: absolute
}
</style>
</head>
<body>
<div id="loading"></div>
<div id="FITSHDR" class="overlay" style="overflow:scroll"></div>
<div id="fullscreen" class="fullscreen">
<div class="sidepanel">
<nav class="navbar navbar-dark bg-dark">
<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 href="http://artemix.obspm.fr/fits/browse" target="_blank">See more FITS files...</a></div>
<div id="cubeInfos" style="font-size:15px; color: white"></div>
</nav>
<div>
<table style="width: 100%">
<tr>
<td align='center'>
<div id="infos-line" style="height:20; width:384; background-color: lightgray"> Integrated flux: ... </div>
</td>
</tr>
</table>
<table style='display: none'>
<tr>
<td><canvas id="hiddenSlice"></canvas></td>
</tr>
</table>
</div>
</div>
<div id="slice" class="map"></div>
</div>
</body>
<script>
var enter = function (what) {
console.group(what);
}
var exit = function () {
console.groupEnd();
}
class CoordinatesFormatter {
static enter(what) {
console.group(this.name + "." + what);
}
static exit() {
console.groupEnd();
}
constructor(canvas, raLabelFormatter, decLabelFormatter) {
CoordinatesFormatter.enter(this.constructor.name);
this.canvas = canvas;
this.raLabelFormatter = raLabelFormatter;
this.decLabelFormatter = decLabelFormatter;
this.dataSteps = null;
CoordinatesFormatter.exit();
}
format(olc) {
//CoordinatesFormatter.enter(this.format.name);
let result;
var ctx = this.canvas.getContext('2d');
var pixelAtPosition = ctx.getImageData(olc[0], height - olc[1], 1, 1).data;
if (pixelAtPosition) {
var dataStepsIndex = pixelAtPosition.slice(0, 3).join('_');
result = 'iRA=' + Math.round(olc[0]) + ' iDEC=' + Math.round(olc[1]) + ' RA=' + this.raLabelFormatter.format(olc[0]) + ' DEC=' + this.decLabelFormatter.format(olc[1]);
if (this.dataSteps && this.dataSteps[dataStepsIndex]) {
result += ' - Flux density : ' + this.dataSteps[dataStepsIndex].toExponential(4) + ' Jy/beam';
}
}
else {
result = "???";
}
//CoordinatesFormatter.exit();
return result;
}
getRaLabelFormatter() {
return this.raLabelFormatter;
}
getDecLabelFormatter() {
return this.decLabelFormatter;
}
setDataSteps(dataSteps) {
this.dataSteps = dataSteps;
}
}
// This is the (hidden) canvas where the images are actually drawn.
let hiddenCanvas = document.getElementById("hiddenSlice");
// This is the function describing the actions performed when an image is loaded
var imageLoadFunction = function (image, src) {
enter(imageLoadFunction.name);
document.getElementById('loading').style.display = 'block';
image.getImage().addEventListener('load', function () {
document.getElementById('loading').style.display = 'none';
hiddenCanvas.getContext('2d').drawImage(image.getImage(), 0, 0);
});
image.getImage().src = src;
image.getImage().crossOrigin = "Anonymous";
exit()
};
var updateViewer = function (relFITSFilePath, sliceIndex, viewer) {
enter(updateViewer.name);
document.getElementById('loading').style.display = "block";
ittName = $('#ITTSelector').find(':selected').text().trim();
lutName = $('#LUTSelector').find(':selected').text().trim();
vmName = $('#VideoModeSelector').find(':selected').text().trim();
document.getElementById('loading').style.display = 'block';
$.post('png', { 'si': sliceIndex, 'relFITSFilePath': relFITSFilePath, 'ittName': ittName, 'lutName': lutName, 'vmName': vmName }).done(
function (resp) {
console.log("$.post('/png', {'si': _sliceIndex, 'relFITSFilePath': _relFITSFilePath}).done(: entering");
document.getElementById('loading').style.display = 'none';
if (resp["status"] == false) {
alert("Something went wrong during the generation of the image. The message was '" + resp["message"] + "'");
}
else {
let dataSteps = resp["result"]["data_steps"];
let statistics = resp["result"]["statistics"];
var path_to_png = resp["result"]["path_to_png"];
var imageURL = "<%=urlRoot%>/" + path_to_png;
console.log("Image's URL is " + imageURL);
viewer.display(imageURL, [sliceIndex], dataSteps, statistics);
}
/*if (_box_infos_1.length == 0) {
//_getSumOverSliceRectAreaWithPOST(_relFITSFilePath, 0, 0, extent);
}*/
document.getElementById('loading').style.display = "none";
console.log("$.post('/png', {'si': _sliceIndex, 'relFITSFilePath': _relFITSFilePath}).done(: exiting");
}
)
exit();
};
var getSumOverSliceRectArea = function (relFITSFilePath, sliceIndex, extent, box_index = null) {
console.log("_getSumOverSliceRectAreaWithPOST: entering");
$.post("", {
"method": "getSumOverSliceRectArea",
"relFITSFilePath": relFITSFilePath,
"sessionID": 0,
"sliceIndex": sliceIndex,
"RAPix0": extent[0],
"RAPix1": extent[2],
"DECPix0": extent[1],
"DECPix1": extent[3]
}).done(
function (resp) {
console.log("getSumOverSliceRectArea callback: entering");
console.log(JSON.stringify(resp, 0, 4));
var x = JSON.parse(resp);
if (x["status"] == false) {
alert(x["message"]);
}
else {
document.getElementById('infos-line').innerHTML = 'Integrated flux : ' + x['result'].toExponential(4) + ' Jy';
}
console.log("getSumOverSliceRectArea callback: exiting");
}
);
console.log("_getSumOverSliceRectAreaWithPOST: exiting");
};
var contoursFactory;
var contoursFactoryGUI;
var reset;
var settings;
var boxTool;
var keyCodeProcessor;
var header = {};
/*
<% for (var i in header) {%>
*/
header["<%=i%>"] = "<%=header[i]%>"
/*
<%}%>
*/
var relFITSFilePath = "<%=relFITSFilePath%>";
var width = header['NAXIS1'];
var height = header['NAXIS2'];
var product = "<%=product%>";
var sAMPPublisher;
$(document).ready(function () {
console.log("$( document ).ready(function() {: entering");
$('[data-tooltip="tooltip"]').tooltip();
let FITSHDR = new FITSHeaderTable(document.getElementById("FITSHDR"), header);
var FITSSummary = '<strong>' + product + '</strong> - OBJECT = <strong>' + header['OBJECT'] + '</strong> - NAXIS = <strong>' + header['NAXIS'] + '</strong> - NAXIS1 = <strong>' + header['NAXIS1'] + '</strong> - NAXIS2 = <strong>' + header['NAXIS2'] + '</strong> - NAXIS3 = <strong>' + header['NAXIS3'] + '</strong>';
if ('NAXIS4' in header) {
FITSSummary += ' - NAXIS4 = <strong>' + header['NAXIS4'] + '</strong>';
}
FITSSummary += " <a id='showFITSHEADER' href='#'> etc.</a>";
$("#cubeInfos").html(FITSSummary);
$("cubeInfos").css('font-family: monospace; font-size=x-small');
$('#showFITSHEADER').click(function () { FITSHDR.show() });
document.getElementById('loading').style.display = 'block';
$.post("", { "method": "RADECRangeInDegrees", "relFITSFilePath": relFITSFilePath, "sessionID": 0 }).done(function (resp) {
console.log('$.post("", {"method": "RADECRangeInDegrees", "relFITSFilePath": relFITSFilePath}).done(function (resp) { : entering');
document.getElementById('loading').style.display = 'none';
RADECRangeInDegrees = resp.data["result"];
/* Keep things square */
if (width > height) {
height = width;
}
else if (width < height) {
width = height;
}
$('#LUTSelector').prop('selectedIndex', <%=renderingCapabilities["default_lut_index"] %>);
console.log("Data of '" + relFITSFilePath + "' are contained in " + JSON.stringify(resp.data["result"]));
let extent = [0, 0, width - 1, height - 1];
let raDDtoPixelConverter = new RADDtoPixelConverter(RADECRangeInDegrees[0][0], RADECRangeInDegrees[2][0], extent[0], extent[2]);
let decDDtoPixelConverter = new DECDDtoPixelConverter(RADECRangeInDegrees[0][1], RADECRangeInDegrees[2][1], extent[1], extent[3]);
let naxis = parseInt(header["NAXIS"]);
let naxis1 = parseInt(header["NAXIS1"]);
let naxis2 = parseInt(header["NAXIS2"]);
let naxis3 = 1;
if (naxis > 2) {
naxis3 = parseInt(header["NAXIS3"]);
}
let naxis4 = 1;
if (naxis > 4) {
naxis4 = parseInt(header["NAXIS4"]);
}
let crpix = [parseFloat(header["CRPIX1"]), parseFloat(header["CRPIX2"])];
let crval = [parseFloat(header["CRVAL1"]), parseFloat(header["CRVAL2"])];
let cdelt = [parseFloat(header["CDELT1"]), parseFloat(header["CDELT2"])];
let ra0 = RADECRangeInDegrees[0][0];
let ra1 = RADECRangeInDegrees[2][0];
console.log("ra0 = " + DecDeg2HMS(ra0) + " ra1 =" + DecDeg2HMS(ra1));
let dec0 = RADECRangeInDegrees[0][1];
let dec1 = RADECRangeInDegrees[2][1];
let raLabelFormatter = new RaLabelFormatter(extent[0], extent[2], ra0, ra1);
let decLabelFormatter = new DecLabelFormatter(extent[1], extent[3], dec0, dec1);
let coordinatesFormatter = new CoordinatesFormatter(hiddenCanvas, raLabelFormatter, decLabelFormatter)
var is3D = (naxis == 3 && naxis3 > 1) || (naxis == 4 && naxis3 > 1 && naxis4 == 1);
var viewer = new Viewer(relFITSFilePath, width, height, "slice", "hiddenSlice", coordinatesFormatter, is3D);
updateViewer(relFITSFilePath, 0, viewer);
let keyCodeProcessor = new KeyCodeProcessor(viewer);
keyCodeProcessor.open();
let infosBlock = new InfosBlock(viewer, document.getElementById("infos-line"));
let customControls = new CustomControls("slice");
let reset = new Reset(viewer);
customControls.addButton(reset.getButton());
let settings = new Settings(viewer);
/*<% renderingCapabilities["luts"].forEach(function (lut) { %>*/
settings.setLUT("<%=lut%>");
/*<% }) %>*/
/*<% renderingCapabilities["itts"].forEach(function (itt) { %>*/
settings.setITT("<%=itt%>");
/*<% }) %>*/
/*<% renderingCapabilities["vmodes"].forEach(function (vmode) { %>*/
settings.setVM("<%=vmode%>");
/*<% }) %>*/
customControls.addButton(settings.getButton());
let markersFactory = new MarkersFactory(viewer);
customControls.addButton(markersFactory.getButton());
let contoursFactory = new ContoursFactory(viewer, infosBlock);
customControls.addButton(contoursFactory.getButton());
let contoursFactoryGUI = new ContoursFactoryGUI(viewer);
contoursFactoryGUI.connect(contoursFactory);
let boxesFactory = new BoxesFactory(viewer, infosBlock);
customControls.addButton(boxesFactory.getButton());
$('a#rccap').click(function () { updateViewer(relFITSFilePath, 0, viewer); });
console.log('$.post("", {"method": "RADECRangeInDegrees", "fileName": relFITSFilePath}).done(function (resp) { : exiting');
//activate_markers(viewer);
});
console.log("$( document ).ready(function() {: exiting");
});
</script>
</html>
\ No newline at end of file
Supports Markdown
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