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,22 +115,21 @@
<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 class="col">
<div id="external_mouse_position_2" class="external_mouse_position"></div>
</div>
<div class="row">
<div class="col">
<div id="publish_summedpixelsspectrum"></div>
<div id="external_mouse_position_2" class="external_mouse_position"></div>
</div>
</div>
<div class="row">
......@@ -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,6 +272,9 @@
<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;
......@@ -277,10 +287,10 @@
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){
var showLoaderAction = function (enable) {
if (enable) {
document.getElementById('loading').style.display = 'block';
}else{
} else {
document.getElementById('loading').style.display = 'none';
}
}
......@@ -338,14 +348,50 @@
return Math.round(result);
}
function jyToK(flux){
/*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));
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;
return flux * Factor;
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
......@@ -1073,7 +1119,7 @@
console.log("SliceViewer : exiting");
};
</script>
</script>
<script>
......@@ -1371,6 +1417,7 @@
*/
this.plot = function (iRA, iDEC) {
console.log("plot: entering.");
let kpj = kelvinPerJansky();
if (typeof iRA === 'undefined') {
iRA = Math.floor(_naxis1 / 2);
}
......@@ -1536,15 +1583,16 @@
text: toptitle
},
chart: {
width: 1100,
height : '45%',
animation : false,
type : 'area',
width: PLOT_WIDTH,
height: PLOT_RATIO,
animation: false,
zoomType: 'x',
panning: true,
panKey: 'shift',
events: {
load: function(event){
load: function (event) {
// graph is loaded
showLoaderAction(false);
},
......@@ -1631,24 +1679,28 @@
title: {
text: ytitle
},
labels :{
formatter: function() {
return this.value /*+ "test"*/;
labels: {
formatter: function () {
//let kpj = kelvinPerJansky();
let label = '';
// result can be NaN if _bmin/_bmaj not available
// then nothing to display
if(!isNaN(kpj)){
label = " <br/> " + Number(this.value * kpj ).toExponential(2) + " K";
}
document.getElementById("debug_jpk").innerHTML = "J per K : "+ Number(janskyPerKelvin()).toExponential(4);
return Number(this.value).toExponential(2) + label;
}
}
},
plotOptions: {
/*scatter:{
zones: [
{
value : 0,
className : "zone-0"
}
]
},*/
series: {
step: true,
color: PLOT_COLOR,
animation: {
duration : 0
duration: 0
},
lineWidth: 1
},
......@@ -1656,6 +1708,11 @@
radius: 0
}
},
tooltip: {
formatter: function () {
return '( ' + this.x.toFixed(4) + ', ' + this.y.toFixed(4) + '), ' + Number(this.y * kpj ).toExponential(2) + " K";
}
},
series: [
{
// unlimited number of points when zooming
......@@ -1672,6 +1729,7 @@
sliceViewer.setFluxDensityInPopup(plotData.y[ifrequencyMarker]);
console.log("getSpectrum callback : exiting");
}
);
console.log("plot: exiting.");
};
......@@ -1679,6 +1737,8 @@
console.log("SpectrumViewer: exiting");
};
$("#zoomin").on('click', function () {
let factor = Math.abs((spectrumChart.xAxis[0].min - spectrumChart.xAxis[0].max) * 0.2);
let minVal = spectrumChart.xAxis[0].min + factor;
......@@ -1716,7 +1776,7 @@
_averageSpectrum = averageSpectrum;
}
this.setChartTitle = function(title){
this.setChartTitle = function (title) {
document.getElementById("chart_title").innerHTML = title;
}
......@@ -1817,9 +1877,10 @@
text: ''
},
chart: {
type : 'area',
animation: false,
width: 1100,
height : '45%',
width: PLOT_WIDTH,
height: PLOT_RATIO,
zoomType: 'x',
panning: true,
panKey: 'shift',
......@@ -1876,8 +1937,9 @@
},
plotOptions: {
series: {
step: true,
animation: {
duration : 0
duration: 0
},
lineWidth: 1
},
......@@ -1887,11 +1949,11 @@
},
tooltip: {
formatter: function () {
return '( ' + this.x.toFixed(4) + ', ' + this.y.toFixed(4); + ')';
return '( ' + this.x.toFixed(4) + ', ' + this.y.toFixed(4) + ')';
}
},
series: [
{}
{color: PLOT_COLOR,}
]
});
......@@ -2217,16 +2279,16 @@
if (_isPublishable()) {
console.log("Yes it can be published !");
$(publishSpectrumDiv).html(" <a id='samp' href='#'> Publish via SAMP</a>");
$('a#samp').click(function () { //_connector.runWithConnection(_sendSpectrum)
$(publishSpectrumDiv).html(" <button id='samp' class='btn btn-control'>Publish</button>");
$('#samp').click(function () { //_connector.runWithConnection(_sendSpectrum)
console.log("var _sendSpectrum = function(connection) {: entering");
var tabUrl = "<%=urlRoot%>/" + _spectrumPath;
var msg = new samp.Message("table.load.fits", { "table-id": "spectrum", "url": tabUrl, "name": "Artemix" });
_connector.connection.notifyAll([msg]);
console.log("var _sendSpectrum = function(connection) {: exiting");
});
$(publishSummedpixelsspectrumDiv).html("<a id='sampAverage' href='#'> Publish via SAMP</a>");
$('a#sampAverage').click(function () {//_connector.runWithConnection(_sendAverageSpectrum)
$(publishSummedpixelsspectrumDiv).html("<button id='sampAverage' class='btn btn-control'>Publish</button>");
$('#sampAverage').click(function () {//_connector.runWithConnection(_sendAverageSpectrum)
console.log("var _sendAverageSpectrum = function(connection) {: entering");
var tabUrl = "<%=urlRoot%>/" + _averageSpectrumPath;
var msg = new samp.Message("table.load.fits", {
......@@ -2342,7 +2404,7 @@
$('#sampRegistry').append(connector.createRegButtons());
//window.onload = function(){
connector.onHubAvailability(configureSampEnabled, 2000);
connector.onHubAvailability(configureSampEnabled, 3000);
//}
window.onbeforeunload = function () {
......@@ -2388,7 +2450,7 @@
summedPixelsSpectrumViewer.plot(0, width - 1, 0, height - 1);
$('a#rccap').click(function () { sliceViewer.refresh() });
$('#rccap').click(function () { console.log("### click"); sliceViewer.refresh() });
console.log('$.post("", {"method": "RADECRangeInDegrees", "relFITSFilePath": relFITSFilePath}).done(function (resp) { : exiting');
});
......
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