Commit 91413587 authored by Caillat Michel's avatar Caillat Michel
Browse files

First commit. All the material ( HTML + Javascript ) to work with boxes

parent db09e1fc
<script>
class BoxFactory {
constructor (sliceViewer) {
console.log("BoxFactory ctor: entering");
this.source;
this.layer;
this.dragBox;
this.relFITSFilePath = sliceViewer.getRelFITSFilePath();
this.sliceIndex = sliceViewer.getSliceIndex();
this.map = sliceViewer.getMap();
let target = this.map.getTarget();
this.jTarget = typeof target === "string" ? $("#" + target) : $(target);
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.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.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", "Work with boxes");
this.button.append("B");
let f = function(event) {event.stopPropagation(); if (this.isOpened) this.close(); else this.open();};
this.button.onclick = f.bind(this);
this.isOpened = false;
/*
** This is our dragbox interaction
*/
this.dragBox = new ol.interaction.DragBox({condition: ol.events.condition.platformModifierKeyOnly});
this.dragBox.on('boxend', () => {
console.log("this.dragBox.on('boxend', function() { : entering");
var extent = this.dragBox.getGeometry().getExtent();
// 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]);
let box = this.prepareBox(extent[0], extent[2], extent[1], extent[3]);
this.measure(box);
console.log("this.dragBox.on('boxend', function() { : exiting");
});
console.log("BoxFactory ctor: exiting");
}
getButton() {
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() {
console.log('open: entering');
this.map.addInteraction(this.dragBox);
this.jTarget.css('cursor','nwse-resize');
this.isOpened = true;
console.log('open: exiting');
}
close() {
console.log('close: open');
this.map.removeInteraction(this.dragBox);
this.jTarget.css('cursor','pointer');
this.isOpened = false;
console.log('close: exiting');
}
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){
console.log("createBox: entering");
document.getElementById('loading').style.display='block';
var tl = [iRA0, iDEC1];
var tr = [iRA1, iDEC1];
var br = [iRA1, iDEC0];
var bl = [iRA0, iDEC0];
var corners = [];
corners.push(tl,tr, br, bl, tl);
let feature = new ol.Feature({geometry : new ol.geom.Polygon([corners])});
let properties = {};
properties["type"]="box";
feature.set("properties",properties);
console.log("createBox: exiting");
return feature;
}
measure(feature, addFeature=true) {
console.log("measure: entering");
let properties = feature.get("properties");
if (properties.hasOwnProperty("type") && properties["type"] === "box") {
document.getElementById('loading').style.display="block";
let corners = feature.getGeometry().getCoordinates()[0];
console.log(corners[0]);
let iRA0 = Math.round(corners[0][0]);
let iDEC1 = Math.round(corners[0][1]);
let iRA1 = Math.round(corners[1][0]);
let iDEC0 = Math.round(corners[2][1]);
console.log(iRA0, iRA1, iDEC0, iDEC1);
$.post("measureBox", {'relFITSFilePath': this.relFITSFilePath,
'iFREQ': this.sliceIndex,
'iRA0': iRA0,
'iRA1': iRA1,
'iDEC0': iDEC0,
'iDEC1': iDEC1 },
(resp) => {
console.log('measure callback: entering');
document.getElementById('loading').style.display="none";
if ( resp["status"] == false ){
alert ("Something went wrong with the measurements of contour. The message was '" + resp["message"]+"'");
}
else {
properties["measurements"]=resp["result"];
feature.set("properties", properties);
if (addFeature) {
this.source.addFeature(feature);
this.selected(feature);
}
}
console.log('measureBox callback: exiting');
} );
}
else {
console.log("Unable to measure such a feature") ;
}
console.log("measure : exiting");
}
selected(feature) {
console.log("selected : entering");
let properties = feature.get("properties");
let title = "Flux in box : " + properties["measurements"]["sum"]["value"].toExponential(4) + " " + properties["measurements"]["sum"]["unit"];
infos_line.innerHTML = title;
infos_line.innerHTML += ' <button type="button" class="btn btn-outline-link btn-sm" data-toggle="modal" data-target="#ModalInfosBlock">etc.</button>';
populateInfosBlock(title, properties["measurements"]);
this.highlight(feature);
console.log("selected : exiting");
}
}
</script>
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