Commit 5b0ca68f authored by Caillat Michel's avatar Caillat Michel
Browse files

Added tooltips

parent b5aa809f
......@@ -56,10 +56,6 @@ class ContoursViewer {
this.content = document.getElementById('popup-content');
this.closer = document.getElementById('popup-closer');
//this.yAFITSContoursControl = new YAFITSContoursControl();
//this.yAFITSContoursControl.setHandler(this.onoff.bind(this));
//this.map.addControl(this.yAFITSContoursControl);
this.lastSelectedContour = null;
this.lastBox = null;
......@@ -70,6 +66,8 @@ class ContoursViewer {
this.button.setAttribute("class", "btn btn-primary btn-sm");
this.button.setAttribute("data-toggle", "modal");
this.button.setAttribute("data-target", "#ModalContoursForm");
this.button.setAttribute("data-tooltip", "tooltip");
this.button.setAttribute("title", "Draw contours");
this.button.append("C");
console.log("ContoursViewer ctor: exiting");console.trace();
......@@ -157,17 +155,13 @@ class ContoursViewer {
this.source.clear();
console.log("clear : exiting");
}
onoff () {
console.log("onoff : entering");
$("#ModalContoursForm").modal();
console.log("onoff : exiting");
}
}; // End of class ContoursViewer
class ContoursGUI {
constructor () {
this.modal = $("#ModalContoursForm");
this.text_of_quantiles = $("#text_of_quantiles");
this.levels = $("#levels");
this.number_of_bins = $("#number_of_bins");
this.update_contours = $("#update-contours");
......@@ -176,9 +170,12 @@ class ContoursGUI {
this.contoursViewer = undefined;
this.contoursMethod = undefined;
this.levels.focus(() => {this.contoursMethod = "levels"});
this.text_of_quantiles.focus(() => {this.contoursMethod = "quantiles"});
this.number_of_bins.focus(() => {this.contoursMethod = "numberOfBins"});
this.modal.on("shown.bs.modal", this.drawHistogram.bind(this));
// this.histBinsMethodAuto=$("#hist-bins-method-auto");
// this.histBinsMethodAuto.click(() => {this.contoursMethod="histBinsMethod", this.histBinsMethodName="auto"});
//
......@@ -192,52 +189,147 @@ class ContoursGUI {
// this.histBinsMethodSturges.click(() => {this.contoursMethod="histBinsMethod", this.histBinsMethodName="sturges"});
}
connect(contoursViewer) {
connect(contoursViewer, sliceViewer) {
console.log("connect : entering");
this.contoursViewer = contoursViewer;
this.update_contours.click(this.queryYAFITSContours.bind(this));
this.clear_contours.click(this.contoursViewer.clear.bind(this.contoursViewer));
this.sliceViewer = sliceViewer;
console.log("connect : exting");
}
hasQuantilesDefined () {
return this.text_of_quantiles.val().trim() != "";
drawHistogram() {
console.log("drawHistogram: entering");
console.log(JSON.stringify(this.sliceViewer.getStatistics()));
let histogram = this.sliceViewer.getStatistics()["histogram"];
let population = histogram[0];
let bins = histogram[1];
let data = new Array(2 * population.length);
for (i = 0; i < population.length; i++) {
data[i] = [bins[i], population[i]];
data[i+1] = [bins[i+1], population[i]];
}
Highcharts.chart("histogram",{
chart: {
type: 'line',
zoomType: 'x',
panning: true,
panKey: 'shift'
},
title: {
text: "Histogram of pixels values"
},
xAxis: {
title: {text: "Pixels values"},
minPadding: 0.05,
maxPadding: 0.05
},
yAxis: {
title: {text: "Population"}
},
series:[
{
name:'population per bin',
type: 'line',
data: data
},
{
name:'mean',
type: 'line',
dashStyle: "shortdot",
lineWidth : 1,
data:[
[this.sliceViewer.getStatistics()["mean"], 0],
[this.sliceViewer.getStatistics()["mean"], Math.max(...population)]
]
},
{
name: '+sigma',
type: 'line',
dashStyle: "shortdot",
lineWidth : 2,
data:[
[this.sliceViewer.getStatistics()["mean"]+this.sliceViewer.getStatistics()["std"], 0],
[this.sliceViewer.getStatistics()["mean"]+this.sliceViewer.getStatistics()["std"], Math.max(...population)]
]
},
{
name:'-sigma',
type: 'line',
dashStyle: "shortdot",
lineWidth : 2,
data:[
[this.sliceViewer.getStatistics()["mean"]-this.sliceViewer.getStatistics()["std"], 0],
[this.sliceViewer.getStatistics()["mean"]-this.sliceViewer.getStatistics()["std"], Math.max(...population)]
]
}
]
});
console.log("drawHistogram: exiting");
}
hasNumberOfBinsDefined () {
return this.number_of_bins.val().trim() != "";
hasLevelsDefined () {
var result = this.levels.val().trim() != "";
if (!result) {
alert ("No levels defined");
}
return result;
}
parseTextOfQuantiles(){
//ENTER();
hasQuantilesDefined () {
var result = this.text_of_quantiles.val().trim() != "";
if (!result) {
alert("No quantiles defined");
}
return result;
}
//
// hasNumberOfBinsDefined () {
// return this.number_of_bins.val().trim() != "";
// }
parseTextOfLevels(){
let result = false;
let text = this.text_of_quantiles.val();
let x = str2FloatArray(text, [0,1]);
let text = this.levels.val();
let x = str2FloatArray(text);
if (x) {
result=x.sort();
this.text_of_quantiles.val(result);
this.levels.val(result);
}
else {
alert("Input invalid to express a sequence of quantiles. It must be a ascending sequence of numbers in [0., 1.]");
alert("Input invalid to express a sequence of levels.");
}
//EXIT();
return result;
}
parseNumberOfBins () {
parseTextOfQuantiles(){
let result = false;
let text = this.number_of_bins.val();
console.log("--->"+text);
let x = parseInt(text);
if (!isNaN(x) && x > 0) {
result = Math.min(x, 10);
let text = this.text_of_quantiles.val();
let x = str2FloatArray(text, [0,1]);
if (x) {
result=x.sort();
this.text_of_quantiles.val(result);
}
else {
alert("Invalid value to express a number of bins. Must a positif integer smaller that 10");
alert("Input invalid to express a sequence of quantiles. It must be a ascending sequence of numbers in [0., 1.]");
}
return result;
}
// parseNumberOfBins () {
// let result = false;
// let text = this.number_of_bins.val();
// console.log("--->"+text);
// let x = parseInt(text);
// if (!isNaN(x) && x > 0) {
// result = Math.min(x, 10);
// }
// else {
// alert("Invalid value to express a number of bins. Must a positif integer smaller that 10");
// }
// return result;
// }
queryYAFITSContours() {
console.log("queryYAFITSContours : entering");
document.getElementById('loading').style.display="block";
......@@ -246,6 +338,15 @@ class ContoursGUI {
let postParams;
console.log("contoursMethod = " + this.contoursMethod);
switch (this.contoursMethod){
case "levels":
if (this.hasLevelsDefined()) {
let levels = this.parseTextOfLevels();
if (levels) {
postParams = {'relFITSFilePath': relFITSFilePath, 'optParams': JSON.stringify({'iFREQ':iFREQ, 'levels': levels}, 0, 4)}
}
}
break;
case "quantiles":
if (this.hasQuantilesDefined()) {
let quantiles = this.parseTextOfQuantiles();
......@@ -255,24 +356,25 @@ class ContoursGUI {
}
break;
case "numberOfBins":
if (this.hasNumberOfBinsDefined()) {
let numberOfBins = this.parseNumberOfBins();
console.log(numberOfBins);
if (numberOfBins) {
postParams = {'relFITSFilePath': relFITSFilePath, 'optParams': JSON.stringify({'iFREQ':iFREQ, 'numberOfBins': numberOfBins}, 0, 4)}
}
}
break;
case "histBinsMethod":
postParams = {'relFITSFilePath': relFITSFilePath, 'optParams': JSON.stringify({'iFREQ':iFREQ, 'histBinsMethod': this.histBinsMethodName}, 0, 4)}
break;
// casequantileserOfBins":
// if (this.hasNumberOfBinsDefined()) {
// let numberOfBins = this.parseNumberOfBins();
// console.log(numberOfBins);
// if (numberOfBins) {
// postParams = {'relFITSFilePath': relFITSFilePath, 'optParams': JSON.stringify({'iFREQ':iFREQ, 'numberOfBins': numberOfBins}, 0, 4)}
// }
// }
// break;
//
// case "histBinsMethod":
// postParams = {'relFITSFilePath': relFITSFilePath, 'optParams': JSON.stringify({'iFREQ':iFREQ, 'histBinsMethod': this.histBinsMethodName}, 0, 4)}
// break;
default:
alert("No contours method defined");
document.getElementById('loading').style.display="none";
}
document.getElementById('loading').style.display="none";
if (postParams) {
$.post('getContours', postParams,
......@@ -292,35 +394,6 @@ class ContoursGUI {
}
}; // End of class ContoursGUI
//
// Define YAFITSContous control.
//
if (false) {
var YAFITSContoursControl = /*@__PURE__*/(function (Control) {
function YAFITSContoursControl(opt_options) {
var options = opt_options || {};
ol.control.Control.call(this, {
element: document.getElementById("x"),
target: options.target
});
// document.getElementById("xx").addEventListener('click', this.handleYAFITSContours.bind(this), false);
}
if ( Control ) YAFITSContoursControl.__proto__ = Control;
YAFITSContoursControl.prototype = Object.create( Control && Control.prototype );
YAFITSContoursControl.prototype.constructor = YAFITSContoursControl;
YAFITSContoursControl.prototype.handleYAFITSContours = function handleYAFITSContours () {
$("#ModalContoursForm").modal("toggle");
};
return YAFITSContoursControl;
}(ol.control.Control));
}
</script>
<!-- <div id="x" class="yafitscontourscontrol ol-unselectable ol-control">
<button id="xx" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#ModalContoursForm">C</button>
......@@ -350,10 +423,16 @@ var YAFITSContoursControl = /*@__PURE__*/(function (Control) {
</div>
</div> -->
<div class="form-group">
<label class="control-label">Using histogram bin edges. Enter a number of bins</label>
<div id="histogram" style="height: 400px">
</div>
<label class="control-label">Use the histogram to choose the contours levels</label>
<div>
<input class="form-control" id="number_of_bins"></input>
<input class="form-control" id="levels"></input>
</div>
<!-- <label class="control-label">Using histogram bin edges. Enter a number of bins</label>
<div>
<input class="form-control" id="number_of_bins"></input>
</div> -->
</div>
<div class="form-group">
<label class="control-label">Using quantiles. Enter a comma separated list of quantiles</label>
......
......@@ -7,6 +7,8 @@ class MarkerFactory {
this.button.setAttribute("class", "btn btn-primary btn-sm");
this.button.setAttribute("data-toggle", "modal");
this.button.setAttribute("data-target", "#ModalMarkersForm");
this.button.setAttribute("data-tooltip", "tooltip");
this.button.setAttribute("title", "Work with markers");
this.button.append("M");
}
......
......@@ -4,6 +4,8 @@ class Reset {
this.button = document.createElement("button");
this.button.setAttribute("type","button");
this.button.setAttribute("class", "btn btn-primary btn-sm");
this.button.setAttribute("data-tooltip", "tooltip");
this.button.setAttribute("title", "Reset zoom and position");
let x = document.createElement("span");
x.setAttribute("class", "fas fa-home");
this.button.appendChild(x);
......
......@@ -53,6 +53,8 @@ class Settings {
this.button.setAttribute("class", "btn btn-primary btn-sm");
this.button.setAttribute("data-toggle", "modal");
this.button.setAttribute("data-target", "#ModalSettingsForm");
this.button.setAttribute("data-tooltip", "tooltip");
this.button.setAttribute("title", "Set visualization parameters");
let x = document.createElement("span");
x.setAttribute("class", "fas fa-cog");
this.button.appendChild(x);
......
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