Z Stretching now in overview cube, reposition main cube

static/js/threeJsHelper/dist/threeJsHelper.js

@@ -554,7 +554,7 @@ function init() {
     scene.add(frontBox);
     objectsToIntersect.push(frontBox);
 
-    translateBoxes(-0.5, -0.5, -0.5);
+    translateBoxes(-0.5, -0.5, -0.5 * currentVolumeDimension.getZStretchFactor());
     rotateBoxesX(Math.PI / -2);
     //rotateBoxesY(Math.PI);
     //rotateBoxesZ(Math.PI);
@@ -1645,8 +1645,10 @@ var VolumeDimension = function() {
 }
 ;var OverviewHelper = function() {
     var sceneOveriew, rendererOverview, cameraOverview, innerCubeOverview;
+    var originalZStretchFactor;
 
     //private method
+
     var addInnerCubeOverView = function(x, y, z) {
         var innerCubeGeometry = new THREE.BoxGeometry( x, y, z );
         var innerCubeMaterial = new THREE.MeshBasicMaterial( {color: 0xaaaaaa} );
@@ -1654,6 +1656,10 @@ var VolumeDimension = function() {
         sceneOverview.add( innerCubeOverview );
     }
 
+    var addInnerFullCube = function() {
+        addInnerCubeOverView(1, 1 * originalZStretchFactor, 1);
+    };
+
     var initiateEventListener = function(containerOverviewElement) {
         // change overview box
         $(document).on('zoomActionFinished', function(e, params) {
@@ -1668,7 +1674,7 @@ var VolumeDimension = function() {
 
                 xOffset = zoomedInfo.dimension.xmin / textureInfo.originalSize.sizex;
                 yOffset = zoomedInfo.dimension.ymin / textureInfo.originalSize.sizey;
-                zOffset = zoomedInfo.dimension.zmin / textureInfo.originalSize.sizez;
+                zOffset = zoomedInfo.dimension.zmin / (textureInfo.originalSize.sizez * originalZStretchFactor);
 
                 addInnerCubeOverView(xWidth, yWidth, zWidth);
 
@@ -1677,9 +1683,8 @@ var VolumeDimension = function() {
                 innerCubeOverview.position.x = -0.5 + xOffset + xWidth / 2;
                 innerCubeOverview.position.y = (-0.5 + zOffset + zWidth / 2);
                 innerCubeOverview.position.z = (-0.5 + yOffset + yWidth / 2) * -1;
-                //innerCubeOverview.applyMatrix((new THREE.Matrix4()).makeRotationX(Math.PI / -2))
             } else {
-                addInnerCubeOverView(1,1,1);
+                addInnerFullCube();
             }
         });
         var headerHeight = $('header').height();
@@ -1717,30 +1722,32 @@ var VolumeDimension = function() {
         var material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });
 
         var colors = new Float32Array( numberOfEdges * 2 * 3 );
+        var zMin = -0.5 * originalZStretchFactor;
+        var zMax = 0.5 * originalZStretchFactor;
         var positions = new Float32Array([
             // edges in x direction
             // front face
-            -0.5, -0.5, -0.5,  0.5, -0.5, -0.5,
-            -0.5,  0.5, -0.5,  0.5,  0.5, -0.5,
+            -0.5, zMin, -0.5,  0.5, zMin, -0.5,
+            -0.5, zMax, -0.5,  0.5, zMax, -0.5,
             // back face
-            -0.5, -0.5,  0.5,  0.5, -0.5,  0.5,
-            -0.5,  0.5,  0.5,  0.5,  0.5,  0.5,
+            -0.5, zMin,  0.5,  0.5, zMin,  0.5,
+            -0.5, zMax,  0.5,  0.5, zMax,  0.5,
 
             // edges in y direction
             // front face
-            -0.5, -0.5, -0.5, -0.5,  0.5, -0.5,
-             0.5, -0.5, -0.5,  0.5,  0.5, -0.5,
+            -0.5, zMin, -0.5, -0.5, zMax, -0.5,
+             0.5, zMin, -0.5,  0.5, zMax, -0.5,
             // back face
-            -0.5, -0.5,  0.5, -0.5,  0.5,  0.5,
-             0.5, -0.5,  0.5,  0.5,  0.5,  0.5,
+            -0.5, zMin,  0.5, -0.5, zMax,  0.5,
+             0.5, zMin,  0.5,  0.5, zMax,  0.5,
 
             // edges in z direction
             // left side
-            -0.5, -0.5, -0.5, -0.5, -0.5,  0.5,
-            -0.5,  0.5, -0.5, -0.5,  0.5,  0.5,
+            -0.5, zMin, -0.5, -0.5, zMin,  0.5,
+            -0.5, zMax, -0.5, -0.5, zMax,  0.5,
             // right side
-             0.5, -0.5, -0.5,  0.5, -0.5,  0.5,
-             0.5,  0.5, -0.5,  0.5,  0.5,  0.5
+             0.5, zMin, -0.5,  0.5, zMin,  0.5,
+             0.5, zMax, -0.5,  0.5, zMax,  0.5
         ]);
 
         for(edgeCounter = 0; edgeCounter < 12 * 2; edgeCounter++) {
@@ -1767,6 +1774,7 @@ var VolumeDimension = function() {
 
     return {
         initOverview: function(containerOverviewElement) {
+            originalZStretchFactor = currentVolumeDimension.getZStretchFactor();
             sceneOverview = new THREE.Scene();
             cameraOverview = new THREE.PerspectiveCamera( 45, 150 / 150, .1, 1000 );
             cameraOverview.position.z = 2;
@@ -1778,7 +1786,7 @@ var VolumeDimension = function() {
             edgesHelper.material.linewidth = 2;
             //sceneOverview.add( edgesHelper );
 
-            addInnerCubeOverView(1,1,1);
+            addInnerFullCube();
             addCubeEdges();
             addTextsToScene();
 

static/js/threeJsHelper/src/Application.js

@@ -554,7 +554,7 @@ function init() {
     scene.add(frontBox);
     objectsToIntersect.push(frontBox);
 
-    translateBoxes(-0.5, -0.5, -0.5);
+    translateBoxes(-0.5, -0.5, -0.5 * currentVolumeDimension.getZStretchFactor());
     rotateBoxesX(Math.PI / -2);
     //rotateBoxesY(Math.PI);
     //rotateBoxesZ(Math.PI);

static/js/threeJsHelper/src/Helpers/Zoom/OverviewHelper.js

@@ -1,7 +1,9 @@
 var OverviewHelper = function() {
     var sceneOveriew, rendererOverview, cameraOverview, innerCubeOverview;
+    var originalZStretchFactor;
 
     //private method
+
     var addInnerCubeOverView = function(x, y, z) {
         var innerCubeGeometry = new THREE.BoxGeometry( x, y, z );
         var innerCubeMaterial = new THREE.MeshBasicMaterial( {color: 0xaaaaaa} );
@@ -9,6 +11,10 @@ var OverviewHelper = function() {
         sceneOverview.add( innerCubeOverview );
     }
 
+    var addInnerFullCube = function() {
+        addInnerCubeOverView(1, 1 * originalZStretchFactor, 1);
+    };
+
     var initiateEventListener = function(containerOverviewElement) {
         // change overview box
         $(document).on('zoomActionFinished', function(e, params) {
@@ -23,7 +29,7 @@ var OverviewHelper = function() {
 
                 xOffset = zoomedInfo.dimension.xmin / textureInfo.originalSize.sizex;
                 yOffset = zoomedInfo.dimension.ymin / textureInfo.originalSize.sizey;
-                zOffset = zoomedInfo.dimension.zmin / textureInfo.originalSize.sizez;
+                zOffset = zoomedInfo.dimension.zmin / (textureInfo.originalSize.sizez * originalZStretchFactor);
 
                 addInnerCubeOverView(xWidth, yWidth, zWidth);
 
@@ -32,9 +38,8 @@ var OverviewHelper = function() {
                 innerCubeOverview.position.x = -0.5 + xOffset + xWidth / 2;
                 innerCubeOverview.position.y = (-0.5 + zOffset + zWidth / 2);
                 innerCubeOverview.position.z = (-0.5 + yOffset + yWidth / 2) * -1;
-                //innerCubeOverview.applyMatrix((new THREE.Matrix4()).makeRotationX(Math.PI / -2))
             } else {
-                addInnerCubeOverView(1,1,1);
+                addInnerFullCube();
             }
         });
         var headerHeight = $('header').height();
@@ -72,30 +77,32 @@ var OverviewHelper = function() {
         var material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });
 
         var colors = new Float32Array( numberOfEdges * 2 * 3 );
+        var zMin = -0.5 * originalZStretchFactor;
+        var zMax = 0.5 * originalZStretchFactor;
         var positions = new Float32Array([
             // edges in x direction
             // front face
-            -0.5, -0.5, -0.5,  0.5, -0.5, -0.5,
-            -0.5,  0.5, -0.5,  0.5,  0.5, -0.5,
+            -0.5, zMin, -0.5,  0.5, zMin, -0.5,
+            -0.5, zMax, -0.5,  0.5, zMax, -0.5,
             // back face
-            -0.5, -0.5,  0.5,  0.5, -0.5,  0.5,
-            -0.5,  0.5,  0.5,  0.5,  0.5,  0.5,
+            -0.5, zMin,  0.5,  0.5, zMin,  0.5,
+            -0.5, zMax,  0.5,  0.5, zMax,  0.5,
 
             // edges in y direction
             // front face
-            -0.5, -0.5, -0.5, -0.5,  0.5, -0.5,
-             0.5, -0.5, -0.5,  0.5,  0.5, -0.5,
+            -0.5, zMin, -0.5, -0.5, zMax, -0.5,
+             0.5, zMin, -0.5,  0.5, zMax, -0.5,
             // back face
-            -0.5, -0.5,  0.5, -0.5,  0.5,  0.5,
-             0.5, -0.5,  0.5,  0.5,  0.5,  0.5,
+            -0.5, zMin,  0.5, -0.5, zMax,  0.5,
+             0.5, zMin,  0.5,  0.5, zMax,  0.5,
 
             // edges in z direction
             // left side
-            -0.5, -0.5, -0.5, -0.5, -0.5,  0.5,
-            -0.5,  0.5, -0.5, -0.5,  0.5,  0.5,
+            -0.5, zMin, -0.5, -0.5, zMin,  0.5,
+            -0.5, zMax, -0.5, -0.5, zMax,  0.5,
             // right side
-             0.5, -0.5, -0.5,  0.5, -0.5,  0.5,
-             0.5,  0.5, -0.5,  0.5,  0.5,  0.5
+             0.5, zMin, -0.5,  0.5, zMin,  0.5,
+             0.5, zMax, -0.5,  0.5, zMax,  0.5
         ]);
 
         for(edgeCounter = 0; edgeCounter < 12 * 2; edgeCounter++) {
@@ -122,6 +129,7 @@ var OverviewHelper = function() {
 
     return {
         initOverview: function(containerOverviewElement) {
+            originalZStretchFactor = currentVolumeDimension.getZStretchFactor();
             sceneOverview = new THREE.Scene();
             cameraOverview = new THREE.PerspectiveCamera( 45, 150 / 150, .1, 1000 );
             cameraOverview.position.z = 2;
@@ -133,7 +141,7 @@ var OverviewHelper = function() {
             edgesHelper.material.linewidth = 2;
             //sceneOverview.add( edgesHelper );
 
-            addInnerCubeOverView(1,1,1);
+            addInnerFullCube();
             addCubeEdges();
             addTextsToScene();
 

templates/volumes/show.html

@@ -115,10 +115,8 @@
 </ul>
 
 <script type="text/javascript">
-    console.log('what up');
     IPE.page = function() {
         var showGenerateButton = $('#show-generate');
-        console.log(showGenerateButton);
         showGenerateButton.click(function () {
             $('#generate-form').toggle('show');
         });