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

As of now I become a subclass of ShapesFactory

parent 800d716b
Hide whitespace changes
Inline Side-by-side
yafitsv/views/olqv_boxes.ejs
View file @ abc91c38
<script> <script>
class BoxFactory { class BoxFactory extends ShapesFactory {
constructor (sliceViewer, infosBlock) { constructor (sliceViewer, infosBlock) {
super(sliceViewer, infosBlock);
ShapesFactory.enter(this.constructor.name);
console.log("BoxFactory ctor: entering"); console.log("BoxFactory ctor: entering");
this.source; this.source;
...@@ -13,53 +15,8 @@ class BoxFactory { ...@@ -13,53 +15,8 @@ class BoxFactory {
let target = this.map.getTarget(); let target = this.map.getTarget();
this.jTarget = typeof target === "string" ? $("#" + target) : $(target); this.jTarget = typeof target === "string" ? $("#" + target) : $(target);
this.lastSelectedBox = null; this.lastSelectedBox = null;
this.highlightStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255,255,255,0.7)'
}),
stroke: new ol.style.Stroke({
color: '#3399CC',
width: 3
})
});
this.style = {
'LineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'lightblue',
//lineDash: [2],
width: 2
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.6)'
})
}),
'Polygon': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'lightblue',
//lineDash: [2],
width: 2
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
})
};
this.style_f = (feature) => {
return this.style[feature.getGeometry().getType()];
};
this.source = new ol.source.Vector();
this.layer = new ol.layer.Vector({source: this.source, style: this.style_f});
this.map.addLayer(this.layer);
this.layer.setZIndex(12); this.layer.setZIndex(12);
this.visible = true;
this.overlay = null;
this.container = document.getElementById('popup');
this.content = document.getElementById('popup-content');
this.closer = document.getElementById('popup-closer');
this.lastSelectedContour = null; this.lastSelectedContour = null;
...@@ -73,77 +30,46 @@ class BoxFactory { ...@@ -73,77 +30,46 @@ class BoxFactory {
this.button.onclick = f.bind(this); this.button.onclick = f.bind(this);
this.isOpened = false; this.isOpened = false;
this.infosBlock = infosBlock;
/* /*
** This is our dragbox interaction ** This is our dragbox interaction
*/ */
this.dragBox = new ol.interaction.DragBox({condition: ol.events.condition.platformModifierKeyOnly}); this.dragBox = new ol.interaction.DragBox({condition: ol.events.condition.platformModifierKeyOnly});
this.dragBox.on('boxend', () => { this.dragBox.on('boxend', () => {
console.log("this.dragBox.on('boxend', function() { : entering"); ShapesFactory.enter("this.dragBox.on('boxend', function() { : entering");
var extent = this.dragBox.getGeometry().getExtent(); var extent = this.dragBox.getGeometry().getExtent();
// The real work when a drag box interaction reach its end is done below ( saynchronously ) // The real work when a drag box interaction reach its end is done below ( saynchronously )
//this.createAndMeasureBox(this.relFITSFilePath, this.sliceIndex, extent[0], extent[2], extent[1], extent[3]); //this.createAndMeasureBox(this.relFITSFilePath, this.sliceIndex, extent[0], extent[2], extent[1], extent[3]);
let box = this.prepareBox(extent[0], extent[2], extent[1], extent[3]); let box = this.prepareBox(extent[0], extent[2], extent[1], extent[3]);
this.measure(box); this.measure(box);
console.log("this.dragBox.on('boxend', function() { : exiting"); ShapesFactory.exit();
}); });
console.log("BoxFactory ctor: exiting"); ShapesFactory.exit();
} }
getButton() { getButton() {
return this.button; return this.button;
} }
highlight(feature) {
console.log("highlight : entering");
if (this.lastSelectedBox !== null) {
this.lastSelectedBox.setStyle(undefined);
}
feature.setStyle(this.highlightStyle);
this.lastSelectedBox = feature;
console.log("highlight : exiting");
}
open() { open() {
console.log('open: entering'); ShapesFactory.enter(this.open.name);
this.map.addInteraction(this.dragBox); this.map.addInteraction(this.dragBox);
this.jTarget.css('cursor','nwse-resize'); this.jTarget.css('cursor','nwse-resize');
this.isOpened = true; this.isOpened = true;
console.log('open: exiting'); ShapesFactory.exit();
} }
close() { close() {
console.log('close: open'); ShapesFactory.enter(this.close.name);
this.map.removeInteraction(this.dragBox); this.map.removeInteraction(this.dragBox);
this.jTarget.css('cursor','pointer'); this.jTarget.css('cursor','pointer');
this.isOpened = false; this.isOpened = false;
console.log('close: exiting'); ShapesFactory.exit();
} }
hide() {
console.log("hide : entering");
this.layer.setVisible(false);
console.log("hide : exiting");
};
show() {
console.log("show : entering");
this.layer.setVisible(true);
console.log("show : exiting");
};
clear() {
console.log("clear : entering");
if (this.lastSelectedBox) this.lastSelectedBox.setStyle(undefined);
this.lastSelectedBox = null;
this.source.clear();
console.log("clear : exiting");
};
prepareBox(iRA0, iRA1, iDEC0, iDEC1){ prepareBox(iRA0, iRA1, iDEC0, iDEC1){
console.log("createBox: entering"); ShapesFactory.enter(this.prepareBox.name);
document.getElementById('loading').style.display='block'; document.getElementById('loading').style.display='block';
var tl = [iRA0, iDEC1]; var tl = [iRA0, iDEC1];
var tr = [iRA1, iDEC1]; var tr = [iRA1, iDEC1];
...@@ -157,12 +83,12 @@ class BoxFactory { ...@@ -157,12 +83,12 @@ class BoxFactory {
let properties = {}; let properties = {};
properties["type"]="box"; properties["type"]="box";
feature.set("properties",properties); feature.set("properties",properties);
console.log("createBox: exiting"); ShapesFactory.exit();
return feature; return feature;
} }
measure(feature, addFeature=true) { measure(feature, addFeature=true) {
console.log("measure: entering"); ShapesFactory.enter(this.measure.name);
let properties = feature.get("properties"); let properties = feature.get("properties");
if (properties.hasOwnProperty("type") && properties["type"] === "box") { if (properties.hasOwnProperty("type") && properties["type"] === "box") {
document.getElementById('loading').style.display="block"; document.getElementById('loading').style.display="block";
...@@ -180,7 +106,7 @@ class BoxFactory { ...@@ -180,7 +106,7 @@ class BoxFactory {
'iDEC0': iDEC0, 'iDEC0': iDEC0,
'iDEC1': iDEC1 }, 'iDEC1': iDEC1 },
(resp) => { (resp) => {
console.log('measure callback: entering'); ShapesFactory.enter('measure callback: entering');
document.getElementById('loading').style.display="none"; document.getElementById('loading').style.display="none";
if ( resp["status"] == false ){ if ( resp["status"] == false ){
alert ("Something went wrong with the measurements of contour. The message was '" + resp["message"]+"'"); alert ("Something went wrong with the measurements of contour. The message was '" + resp["message"]+"'");
...@@ -193,23 +119,24 @@ class BoxFactory { ...@@ -193,23 +119,24 @@ class BoxFactory {
this.selected(feature); this.selected(feature);
} }
} }
console.log('measureBox callback: exiting'); ShapesFactory.exit();
} ); } );
} }
else { else {
console.log("Unable to measure such a feature") ; console.log("Unable to measure such a feature") ;
} }
console.log("measure : exiting"); ShapesFactory.exit();
} }
selected(feature) { selected(box) {
console.log("selected : entering"); ShapesFactory.enter(this.selected.name);
let properties = feature.get("properties"); let properties = box.get("properties");
let title = "Flux in box : " + properties["measurements"]["sum"]["value"].toExponential(4) + " " + properties["measurements"]["sum"]["unit"]; let title = "Flux in box : " + properties["measurements"]["sum"]["value"].toExponential(4) + " " + properties["measurements"]["sum"]["unit"];
this.infosBlock.headline(title) this.infosBlock.headline(title)
this.infosBlock.populate(title, properties["measurements"]); this.infosBlock.populate(title, properties["measurements"]);
this.highlight(feature); this.highlight(box);
console.log("selected : exiting"); ShapesFactory.selection = box;
ShapesFactory.exit();
} }
} }
</script> </script>
yafitsv/views/olqv_contours.ejs
View file @ abc91c38
<script> <script>
class ContoursViewer { class ContoursFactory extends ShapesFactory {
constructor (sliceViewer, infosBlock) { constructor (sliceViewer, infosBlock) {
console.log("ContoursViewer ctor: entering");console.trace(); super(sliceViewer, infosBlock);
this.infosBlock = infosBlock; ShapesFactory.enter(this.constructor.name);
this.source; this.source;
this.layer; this.layer;
this.sliceViewer = sliceViewer;
this.relFITSFilePath = this.sliceViewer.getRelFITSFilePath(); this.relFITSFilePath = this.sliceViewer.getRelFITSFilePath();
this.sliceIndex = this.sliceViewer.getSliceIndex(); this.sliceIndex = this.sliceViewer.getSliceIndex();
this.map = sliceViewer.getMap();
this.infosBlock = infosBlock;
this.highlightStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255,255,255,0.7)'
}),
stroke: new ol.style.Stroke({
color: '#3399CC',
width: 3
})
});
this.style = {
'LineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
lineDash: [2],
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.6)'
})
}),
'Polygon': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
lineDash: [2],
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
})
};
this.style_f = (feature) => {
return this.style[feature.getGeometry().getType()];
};
this.source = new ol.source.Vector();
this.layer = new ol.layer.Vector({source: this.source, style: this.style_f});
this.map.addLayer(this.layer);
this.layer.setZIndex(10); this.layer.setZIndex(10);
this.visible = true;
this.overlay = null;
this.container = document.getElementById('popup');
this.content = document.getElementById('popup-content');
this.closer = document.getElementById('popup-closer');
this.lastSelectedContour = null;
this.lastBox = null; this.lastBox = null;
$(this.map.getTargetElement()).append($("#ModalContoursForm")); $(this.map.getTargetElement()).append($("#ModalContoursForm"));
...@@ -74,37 +24,21 @@ class ContoursViewer { ...@@ -74,37 +24,21 @@ class ContoursViewer {
this.button.setAttribute("title", "Draw contours"); this.button.setAttribute("title", "Draw contours");
this.button.append("C"); this.button.append("C");
console.log("ContoursViewer ctor: exiting");console.trace(); ShapesFactory.exit();
} }
getButton() { getButton() {
return this.button; return this.button;
} }
highlight(feature) {
console.log("highlight : entering");
if (this.lastSelectedContour !== null) {
this.lastSelectedContour.setStyle(undefined);
if (this.lastBox !== null) {
this.source.removeFeature(this.lastBox);
this.lastBox = null;
}
}
feature.setStyle(this.highlightStyle);
this.box(feature);
//this.grid(feature);
this.lastSelectedContour = feature;
console.log("highlight : exiting");
}
box(feature) { box(feature) {
console.log("box : entering"); console.log("box : entering");
let br = feature.get("properties")["measurements"]["boundingRect"]["value"]; let br = feature.get("properties")["measurements"]["boundingRect"]["value"];
let corners=[[br[0], br[1]], let corners=[[br[0], br[1]],
[br[0]+br[2]-1, br[1]], [br[0]+br[2]-1, br[1]],
[br[0]+br[2]-1, br[1]+br[3]-1], [br[0]+br[2]-1, br[1]+br[3]-1],
[br[0], br[1]+br[3]-1], [br[0], br[1]+br[3]-1],
[br[0], br[1]]]; [br[0], br[1]]];
this.lastBox = new ol.Feature({geometry: new ol.geom.Polygon([corners])}); this.lastBox = new ol.Feature({geometry: new ol.geom.Polygon([corners])});
this.source.addFeature(this.lastBox); this.source.addFeature(this.lastBox);
...@@ -126,54 +60,47 @@ class ContoursViewer { ...@@ -126,54 +60,47 @@ class ContoursViewer {
} }
importYAFITSContours(yAFITSContours) { importYAFITSContours(yAFITSContours) {
ShapesFactory.enter(this.importYAFITSContours.name);
console.log("importYAFITSContours: entering"); console.log("importYAFITSContours: entering");
this.clear(); this.clear();
var features = new Array(); var features = new Array();
yAFITSContours.forEach((contour) => { yAFITSContours.forEach((contour) => {
let coordinates = contour["coordinates"]; let coordinates = contour["coordinates"];
coordinates.push(coordinates[0]); coordinates.push(coordinates[0]);;
let properties = contour["properties"];
properties["type"] = "contour"
features.push(new ol.Feature( { geometry : new ol.geom.LineString(coordinates), features.push(new ol.Feature( { geometry : new ol.geom.LineString(coordinates),
properties : contour["properties"]}))}); properties : properties}))}
);
this.source.addFeatures(features); this.source.addFeatures(features);
this.show(); this.show();
console.log("importYAFITSContours: exiting"); ShapesFactory.exit()
} }
hide() { selected(contour) {
console.log("hide : entering"); ShapesFactory.enter(this.selected.name);
this.layer.setVisible(false); let properties = contour.get("properties");
console.log("hide : exiting"); let level = properties["level"]["value"].toExponential(3);
let levelUnit = properties["level"]["unit"];
let title = 'Contour level at ' + level + ' ' + levelUnit;
this.infosBlock.headline(title)
this.infosBlock.populate(title, properties["measurements"]);
this.highlight(contour);
ShapesFactory.selection = contour;
ShapesFactory.exit()
} }
}; // End of class ContoursFactory
show() { class ContoursFactoryGUI {
console.log("show : entering"); static enter(what) {
this.layer.setVisible(true); console.group(this.name + "." + what);
console.log("show : exiting");
} }
clear() { static exit() {
console.log("clear : entering"); console.groupEnd();
if (this.lastSelectedContour) this.lastSelectedContour.setStyle(undefined); }
this.lastSelectedContour = null;
this.source.clear();
console.log("clear : exiting");
}
selected(feature) {
console.log("selected : entering");
let properties = feature.get("properties");
let level = properties["level"]["value"].toExponential(3);
let levelUnit = properties["level"]["unit"];
let title = 'Contour level at ' + level + ' ' + levelUnit;
this.infosBlock.headline(title)
this.infosBlock.populate(title, properties["measurements"]);
this.highlight(feature);
console.log("selected : exiting");
}
}; // End of class ContoursViewer
class ContoursGUI {
constructor () { constructor () {
ContoursFactoryGUI.enter(this.constructor.name);
this.modal = $("#ModalContoursForm"); this.modal = $("#ModalContoursForm");
this.text_of_quantiles = $("#text_of_quantiles"); this.text_of_quantiles = $("#text_of_quantiles");
this.levels = $("#levels"); this.levels = $("#levels");
...@@ -190,6 +117,8 @@ class ContoursGUI { ...@@ -190,6 +117,8 @@ class ContoursGUI {
this.number_of_bins.focus(() => {this.contoursMethod = "numberOfBins"}); this.number_of_bins.focus(() => {this.contoursMethod = "numberOfBins"});
this.modal.on("shown.bs.modal", this.drawThings.bind(this)); this.modal.on("shown.bs.modal", this.drawThings.bind(this));
ContoursFactoryGUI.exit();
// this.histBinsMethodAuto=$("#hist-bins-method-auto"); // this.histBinsMethodAuto=$("#hist-bins-method-auto");
// this.histBinsMethodAuto.click(() => {this.contoursMethod="histBinsMethod", this.histBinsMethodName="auto"}); // this.histBinsMethodAuto.click(() => {this.contoursMethod="histBinsMethod", this.histBinsMethodName="auto"});
...@@ -205,30 +134,32 @@ class ContoursGUI { ...@@ -205,30 +134,32 @@ class ContoursGUI {
} }
connect(contoursViewer, sliceViewer) { connect(contoursViewer, sliceViewer) {
console.log("connect : entering"); ContoursFactoryGUI.enter(this.connect.name);
this.contoursViewer = contoursViewer; this.contoursViewer = contoursViewer;
this.update_contours.click(this.queryYAFITSContours.bind(this)); this.update_contours.click(this.queryYAFITSContours.bind(this));
//this.clear_contours.click(this.contoursViewer.clear.bind(this.contoursViewer)); //this.clear_contours.click(this.contoursViewer.clear.bind(this.contoursViewer));
this.clear_contours.click(this.clear.bind(this)); this.clear_contours.click(this.clear.bind(this));
this.sliceViewer = sliceViewer; this.sliceViewer = sliceViewer;
console.log("connect : exting"); ContoursFactoryGUI.exit();
} }
clear() { clear() {
ContoursFactoryGUI.enter(this.clear.name);
this.text_of_quantiles.val(""); this.text_of_quantiles.val("");
this.levels.val(""); this.levels.val("");
this.contoursViewer.clear(); this.contoursViewer.clear();
ContoursFactoryGUI.exit();
} }
drawThings() { drawThings() {
console.log("drawThings: entering"); ContoursFactoryGUI.enter(this.drawThings.name);
this.drawHistogram(); this.drawHistogram();
this.drawCumulativeDistribution(); this.drawCumulativeDistribution();
console.log("drawThings: exiting"); ContoursFactoryGUI.exit();
} }
drawHistogram() { drawHistogram() {
console.log("drawHistogram: entering"); ContoursFactoryGUI.enter(this.drawHistogram.name);
console.log(JSON.stringify(this.sliceViewer.getStatistics())); console.log(JSON.stringify(this.sliceViewer.getStatistics()));
let histogram = this.sliceViewer.getStatistics()["histogram"]; let histogram = this.sliceViewer.getStatistics()["histogram"];
let population = histogram[0]; let population = histogram[0];
...@@ -265,9 +196,9 @@ class ContoursGUI { ...@@ -265,9 +196,9 @@ class ContoursGUI {
events: { events: {
click: function (e) { click: function (e) {
if (that.hasLevelsDefined()) if (that.hasLevelsDefined())
that.levels.val(that.levels.val()+","+e.point.x); that.levels.val(that.levels.val()+","+e.point.x);
else else
that.levels.val(e.point.x); that.levels.val(e.point.x);
that.levels.focus(); that.levels.focus();
} }
} }
...@@ -289,9 +220,9 @@ class ContoursGUI { ...@@ -289,9 +220,9 @@ class ContoursGUI {
dashStyle: "shortdot", dashStyle: "shortdot",
lineWidth : 1, lineWidth : 1,
data:[ data:[
[this.sliceViewer.getStatistics()["mean"], 0], [this.sliceViewer.getStatistics()["mean"], 0],
[this.sliceViewer.getStatistics()["mean"], Math.max(...population)] [this.sliceViewer.getStatistics()["mean"], Math.max(...population)]
] ]
}, },
{ {
name: '+sigma', name: '+sigma',
...@@ -299,9 +230,9 @@ class ContoursGUI { ...@@ -299,9 +230,9 @@ class ContoursGUI {
dashStyle: "shortdot", dashStyle: "shortdot",
lineWidth : 2, lineWidth : 2,
data:[ data:[
[this.sliceViewer.getStatistics()["mean"]+this.sliceViewer.getStatistics()["std"], 0], [this.sliceViewer.getStatistics()["mean"]+this.sliceViewer.getStatistics()["std"], 0],
[this.sliceViewer.getStatistics()["mean"]+this.sliceViewer.getStatistics()["std"], Math.max(...population)] [this.sliceViewer.getStatistics()["mean"]+this.sliceViewer.getStatistics()["std"], Math.max(...population)]
] ]
}, },
{ {
name:'-sigma', name:'-sigma',
...@@ -309,17 +240,17 @@ class ContoursGUI { ...@@ -309,17 +240,17 @@ class ContoursGUI {
dashStyle: "shortdot", dashStyle: "shortdot",
lineWidth : 2, lineWidth : 2,
data:[ data:[
[this.sliceViewer.getStatistics()["mean"]-this.sliceViewer.getStatistics()["std"], 0], [this.sliceViewer.getStatistics()["mean"]-this.sliceViewer.getStatistics()["std"], 0],
[this.sliceViewer.getStatistics()["mean"]-this.sliceViewer.getStatistics()["std"], Math.max(...population)] [this.sliceViewer.getStatistics()["mean"]-this.sliceViewer.getStatistics()["std"], Math.max(...population)]
] ]
} }
] ]
}); });
console.log("drawHistogram: exiting"); ContoursFactoryGUI.exit();
} }
drawCumulativeDistribution() { drawCumulativeDistribution() {
console.log("drawCumulativeDistribution: entering"); ContoursFactoryGUI.enter(this.drawCumulativeDistribution.name);
let histogram = this.sliceViewer.getStatistics()["histogram"]; let histogram = this.sliceViewer.getStatistics()["histogram"];
let bins = histogram[1]; let bins = histogram[1];
let cumulDist = this.sliceViewer.getStatistics()["cumuldist"]; let cumulDist = this.sliceViewer.getStatistics()["cumuldist"];
...@@ -353,9 +284,9 @@ class ContoursGUI { ...@@ -353,9 +284,9 @@ class ContoursGUI {
events: { events: {
click: function (e) { click: function (e) {
if (that.hasQuantilesDefined()) if (that.hasQuantilesDefined())
that.text_of_quantiles.val(that.text_of_quantiles.val()+","+e.point.y); that.text_of_quantiles.val(that.text_of_quantiles.val()+","+e.point.y);
else else