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

yafitsv/views/olqv_boxes.ejs

+<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>