nova/static/css/custom.css

@@ -400,20 +400,45 @@ a:hover {
 
 #zoom-controls>div {
   display: inline-block;
-  margin-left:40px;
+  margin-left:60px;
+  position:relative;
+  margin-top:30px;
 }
 
 #xy-zoom-control, #yz-zoom-control {
-    overflow: hidden;
-    position: relative;
-    width: 150px;
-    height: 150px;
-    border: 1px solid #ddd;
+  overflow: hidden;
+  position: relative;
+  width: 150px;
+  height: 150px;
+  border: 1px solid #ddd;
 }
 
 #xy-zoom-selection, #yz-zoom-selection {
-    position: absolute;
-    width: 150px;
-    height: 150px;
-    border: 1px solid blue;
+  position: absolute;
+  width: 150px;
+  height: 150px;
+  border: 1px solid blue;
 }
+
+label.zc-mark {
+  position: absolute;
+  color: #555;
+  font-size:15px;
+}
+
+label.zc-zero-mark {
+  top: 0;
+  left: -10px;
+}
+
+label.zc-horizontal-one-mark {
+  right: -10px;
+  top: 0;
+}
+
+label.zc-vertical-one-mark {
+  bottom: 30px;
+  left: -10px;
+}
+
+

nova/templates/dataset/wave.html

@@ -14,20 +14,6 @@
           <div class="col-sm-2"><input type="text" class="slider-range-input" id="gray-threshold-max-input" /></div>
         </div>
       </div>
-      <div class="wave-control" id="zoom-controls">
-        <p>Zoom Control</p>
-        <div>
-          <div id="xy-zoom-control"><div id="xy-zoom-selection"></div></div>
-          <p><small>x-y plane</small></p>
-        </div>
-        <div>
-          <div id="yz-zoom-control"><div id="yz-zoom-selection"></div></div>
-          <p><small>y-z plane</small></p>
-        </div>
-      </div>
-      <div class="wave-control">
-        <button type="button" class="btn btn-dark" id="res-zoom-button-selection">Zoom to Selected Volume</button>
-      </div>
       <div class="wave-control">
         <p>X axis slicing</p>
         <div class="col-sm-12">
@@ -52,8 +38,25 @@
           <div class="col-sm-2"><input type="text" class="slider-range-input" id="z-max-input" /></div>
         </div>
       </div>
+      <div class="wave-control" id="zoom-controls">
+        <p>Zoom Control</p>
+        <div>
+          <div id="xy-zoom-control"><div id="xy-zoom-selection"></div></div>
+          <p><small>x-y plane</small></p>
+          <label class="zc-mark zc-zero-mark">0,0</label>
+          <label class="zc-mark zc-horizontal-one-mark">1,0</label>
+          <label class="zc-mark zc-vertical-one-mark">0,1</label>
+        </div>
+        <div>
+          <div id="yz-zoom-control"><div id="yz-zoom-selection"></div></div>
+          <p><small>y-z plane</small></p>
+          <label class="zc-mark zc-zero-mark">0,0</label>
+          <label class="zc-mark zc-horizontal-one-mark">1,0</label>
+          <label class="zc-mark zc-vertical-one-mark">0,1</label>
+        </div>
+      </div>
       <div class="wave-control">
-        <button type="button" class="btn btn-dark" id="res-zoom-button-slice">Zoom to Sliced Volume</button>
+        <button type="button" class="btn btn-dark" id="res-zoom-button-selection">Zoom to Selected Volume</button>
       </div>
     </div>
   </div>
@@ -274,21 +277,6 @@
                 $gray = [$("#gray-threshold-min-input").val(), $("#gray-threshold-max-input").val()];
                 window.location.href='/wave?user='+user_name+'&dataset='+dataset_name+'&collection='+collection_name+'&vol='+$v+'&gt='+$gray;
             }
-            $("#res-zoom-button-slice").click( function() {
-                $x = $("#x-min-input").val();
-                $y = $("#y-min-input").val();
-                $z = $("#z-min-input").val();
-                $X = $("#x-max-input").val();
-                $Y = $("#y-max-input").val();
-                $Z = $("#z-max-input").val();
-                $size = Math.min(Math.abs($X-$x), Math.abs($Y-$y), Math.abs($Z-$z));
-                $adj_size = Math.round($size*$current_dim/100);
-                $adj_x = Math.round($current_x + $x*$current_dim/100);
-                $adj_y = Math.round($current_y + $y*$current_dim/100);
-                $adj_z = Math.round($current_z + $z*$current_dim/100);
-                $vol = [$adj_x, $adj_y, $adj_z, $adj_size];
-                zoomToVolume($vol);
-            });
             $("#res-zoom-button-selection").click( function() {
                 $W = $("#xy-zoom-selection").parent().width();
                 $x = Math.round(100*parseInt($("#xy-zoom-selection").css("left"), 10)/$W);
@@ -312,7 +300,10 @@
                 resize: function (event, ui ){
                     h = ui.size.height;
                     t = ui.position.top;
+                    W = $(this).parent().width();
                     $("#yz-zoom-selection").css({'height':h, 'width': h,'left': t});
+                    t2 = Math.round(parseInt($("#yz-zoom-selection").css('top'), 10));
+                    if (h+ t2 >= W) $("#yz-zoom-selection").css({'top':W-h});
                 }
             }).draggable({
                 containment: "parent",
@@ -335,7 +326,10 @@
                 resize: function (event, ui ){
                     w = ui.size.width;
                     l = ui.position.left;
+                    H = $(this).parent().height()
                     $("#xy-zoom-selection").css({'height':w, 'width': w,'top':l});
+                    l2 = Math.round(parseInt($("#xy-zoom-selection").css('left'), 10));
+                    if (w+ l2 >= H) $("#xy-zoom-selection").css({'left':H-w});
                 }
             }).draggable({
                 containment: "parent",