Merge pull request #16 from aleksandra-tarkowska/feature/big_image_roi

Feature/big image roi

components/tools/OmeroWeb/omeroweb/webgateway/media/css/3rdparty/panojs.css

@@ -6,7 +6,7 @@
   position: relative;
   top: 0;
   left: 0;
-  background-color: #434343;
+  background-color: #DDD;
   overflow: hidden;     
 
   /* NOTE: the size and width should be set dynamically when initialized */

components/tools/OmeroWeb/omeroweb/webgateway/media/css/omero_image.css

@@ -379,9 +379,6 @@ INPUT.changed {
   /* max-width: 600px; */
 }
 
-#roi_table_postit {
-    width:175px;
-}
 #roi_table_postit table {
     width: 100%;
 }
@@ -630,17 +627,46 @@ input.spin-button {
 }
 
 /* Styles for the ROI table */
+#roi_table_postit {
+    width:320px;
+}
+#roi_table_div {
+    overflow-y: scroll;
+    max-height: 500px;
+}
 #roi_small_table th {
     background-color: #ccc; 
     padding: 1px;
 }
 #roi_small_table td {
-    background-color: #fff; 
+    background-color: #fff;
     text-align: center;
 }
+#roi_small_table td.icon {
+    background-color: #fff;
+    text-align: left;
+    white-space: nowrap;
+    width: 50px;
+}
+#roi_small_table .only_child td {
+    background-color: #ddd;
+}
+
 #roi_small_table .shape_cell {
     cursor: pointer;
+    position: relative;
 }
 #roi_small_table .roi_row th {
     cursor: pointer;
+    position: relative;
+}
+#roi_thumb_popup {
+    position: absolute;
+    z-index: 250;
+    display: none;
+}
+.color_picker_option {
+    float: left;
+    width: 8px;
+    height: 10px;
 }

components/tools/OmeroWeb/omeroweb/webgateway/media/js/3rdparty/panojs/control_roi.js

@@ -0,0 +1,77 @@
+PanoJS.CONTROL_ROI_STYLE = "position: absolute;";
+
+function ROIControl(viewer) {
+  this.viewer = viewer; 
+  this.createDOMElements();
+
+  this.scale = 1;
+  this.x = 0;
+  this.y = 0;  
+  this.width = 0;
+  this.height = 0; 
+
+  this.viewer.addViewerMovedListener(this);
+  this.viewer.addViewerZoomedListener(this);
+  this.viewer.addViewerResizedListener(this);
+
+  // load thumbnail image
+  this.init();
+}
+
+
+ROIControl.prototype.init = function() {
+  this.updateDOMElements();
+  this.viewer.notifyViewerZoomed();
+}
+
+ROIControl.prototype.createDOMElements = function() {
+    var de = this.viewer.surface;
+
+    this.dom_element = document.createElement('div');
+    this.dom_element.id = 'roi_canvas_big';
+    this.dom_element.className = 'roi_canvas_big';
+    this.dom_element.setAttribute("style", PanoJS.CONTROL_ROI_STYLE);
+    de.appendChild(this.dom_element); 
+
+}
+
+ROIControl.prototype.updateDOMElements = function() {
+  var cur_size = this.viewer.currentImageSize();
+  this.width = cur_size.width;
+  this.height = cur_size.height;
+
+  this.dom_element.style.width = this.width + 'px';
+  this.dom_element.style.height = this.height + 'px';
+  this.dom_element.style.left = this.x + 'px';
+  this.dom_element.style.top = this.y + 'px';
+}
+
+ROIControl.prototype.viewerMoved = function(e) {
+    if (!this.dom_element || typeof this.dom_element == 'undefined') return;
+    this.x = e.x;
+    this.y = e.y;
+    this.updateDOMElements();
+
+    //notify the viewer
+    var vp = $.WeblitzViewport('#weblitz-viewport');
+    var theT = vp.getTPos();
+    var theZ = vp.getZPos();
+
+    if (vp.viewportimg.get(0).refresh_rois) {
+        vp.viewportimg.get(0).setRoiZoom(this.scale*100);
+    }
+    if (vp.viewportimg.get(0).setRoiZoom) {
+        vp.viewportimg.get(0).refresh_rois(theZ, theT);
+    }
+}
+
+ROIControl.prototype.viewerZoomed = function(e) {
+    this.scale  = e.scale;
+    this.viewerMoved(e);
+}
+
+ROIControl.prototype.viewerResized = function(e) {
+    this.viewerMoved(e);
+}
+
+

components/tools/OmeroWeb/omeroweb/webgateway/media/js/jquery-plugin-viewportImage.js

@@ -410,9 +410,11 @@ $.fn.viewportImage = function(options) {
       }
     });
 
+    this.getBigImageContainer = function () {
+        return viewerBean;
+    }
+
     this.setUpTiles = function (imagewidth, imageheight, xtilesize, ytilesize, init_zoom, levels, href, thref) {
-        $('<div id="weblitz-viewport-tiles" class="viewer" style="width: 100%; height: 100%;" ></div>').appendTo(wrapdiv);
-        jQuery('#weblitz-viewport-tiles').css({width: wrapwidth, height: wrapheight});
         var myPyramid = new BisqueISPyramid( imagewidth, imageheight, xtilesize, ytilesize);
         var myProvider = new PanoJS.TileUrlProvider('','','');
         myProvider.assembleUrl = function(xIndex, yIndex, zoom) {
@@ -426,6 +428,8 @@ $.fn.viewportImage = function(options) {
         myProvider.thumbnailUrl(thref);
 
         if (viewerBean == null) {
+            $('<div id="weblitz-viewport-tiles" class="viewer" style="width: 100%; height: 100%;" ></div>').appendTo(wrapdiv);
+            jQuery('#weblitz-viewport-tiles').css({width: wrapwidth, height: wrapheight});
 
             viewerBean = new PanoJS('weblitz-viewport-tiles', {
                 tileUrlProvider : myProvider,
@@ -439,6 +443,38 @@ $.fn.viewportImage = function(options) {
                 loadingTile     : '/appmedia/webgateway/img/3rdparty/panojs/blank.gif'//'progress.gif'
             });
 
+            viewerBean.mouseReleasedHandler = function(e) {
+                e = e ? e : window.event;
+                if (!this.pressed) return false;
+                var coords = this.resolveCoordinates(e);
+                var motion = {
+                    'x' : (coords.x - this.mark.x),
+                    'y' : (coords.y - this.mark.y)
+                };
+                var moved = this.mouse_have_moved;
+                this.release(coords);
+
+                if (!moved) return false;
+
+
+                // only if there was little movement
+                if (moved || motion.x>5 || motion.y>5) return false;
+
+                if (e.button == 2) {
+                    this.blockPropagation(e);      
+                    this.zoom(-1);    
+                } else
+                // move on one click
+                if (e.button < 2) {
+                    //if (!this.pointExceedsBoundaries(coords)) {
+                        this.resetSlideMotion();
+                        this.recenter(coords);
+                    //} 
+                }
+
+                return false;
+            }
+
             // thumbnail url overwritten
             // bird-eye view cannot relay on levels in order to load thumbail,
             // becuase of the way pyramid is generated.
@@ -456,14 +492,14 @@ $.fn.viewportImage = function(options) {
             PanoJS.MSG_BEYOND_MIN_ZOOM = null;
             PanoJS.MSG_BEYOND_MAX_ZOOM = null;
             viewerBean.init();
-            if (this.thumbnail_control) this.thumbnail_control.update();
+            if (viewerBean.thumbnail_control) viewerBean.thumbnail_control.update();
+            if (!viewerBean.roi_control) viewerBean.roi_control = new ROIControl(viewerBean);
 
             // not supported elements
             jQuery('#wblitz-zoom').parent().hide();
             jQuery('#wblitz-lp-enable').parent().hide();
             jQuery('.multiselect').hide();
             jQuery('#wblitz-invaxis').attr('disable', true);
-            jQuery('#roi_controls').hide();
         } else {
             viewerBean.tileUrlProvider = myProvider;
             viewerBean.update_url();
@@ -479,7 +515,7 @@ $.fn.viewportImage = function(options) {
       wrapwidth = wrapdiv.width();
       wrapheight = wrapdiv.height();
       //orig_width = image.get(0).clientWidth;
-      //orig_height = image.get(0).clientHeight;   
+      //orig_height = image.get(0).clientHeight;
 
       if (viewerBean != null) {
           jQuery('#weblitz-viewport-tiles').css({width: wrapwidth, height: wrapheight});