Merge "[NRRPLT-2730] handle view container design via css, prepare view frustum visualization"

gz3d/client/style/gz3d.css

@@ -733,3 +733,25 @@ input[type=number]::-webkit-inner-spin-button
   }
 }
 
+.viewContainer {
+  position: absolute;
+  minWidth: 50px;
+  maxWidth: 100%;
+  maxHeight: 100%;
+  boxShadow: 0px 0px 0px 3px rgba(0,0,0,0.3);
+  borderRadius: 2px;
+  background: rgba(0,0,0,0);
+}
+
+.viewContainer > .frustumCheckbox {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+}
+
+.viewContainer > .frustumLabel {
+  position: absolute;
+  left: 20px;
+  top: 0px;
+}
+

gz3d/src/gziface.js

@@ -1068,8 +1068,10 @@ GZ3D.GZIface.prototype.createSensorFromMsg = function(sensor)
 
     // visualization - Deactivated since it causes the robot to be very big and the user
     // can't barely select other objects on the scene. Reactivate for debug purposes !
-    // var cameraHelper = new THREE.CameraHelper(view.camera);
-    // view.camera.add( cameraHelper );
+    var cameraHelper = new THREE.CameraHelper(view.camera);
+    cameraHelper.visible = false;
+    view.camera.cameraHelper = cameraHelper;
+    view.camera.add( cameraHelper );
 
     view.type = sensor.type;
 

gz3d/src/gzmultiview.js

@@ -38,7 +38,8 @@ GZ3D.MultiView.prototype.init = function()
     }
 
     this.createRenderContainerCallback = function() {
-        return document.createElement('div');
+        var renderContainer = document.createElement('div');
+        return renderContainer;
     };
 
     this.createMainUserView();
@@ -138,30 +139,20 @@ GZ3D.MultiView.prototype.createViewContainer = function(displayParams, name)
         return undefined;
     }
 
+    viewContainer.className += 'viewContainer';
 
     // z-index
     var zIndexTop = parseInt(this.mainContainer.style.zIndex, 10) + this.views.length + 1;
     viewContainer.style.zIndex = angular.isDefined(displayParams.zIndex) ? displayParams.zIndex : zIndexTop;
 
     // positioning
-    viewContainer.style.position = 'absolute';
     viewContainer.style.left = displayParams.left;
     viewContainer.style.top = displayParams.top;
     viewContainer.style.width = displayParams.width;
     viewContainer.style.height = displayParams.height;
 
-    // We set 50px as a min-width for now and set the min height accordingly
-    viewContainer.style.minWidth = '50px';
     var aspectRatio = parseInt(displayParams.height, 10) / parseInt(displayParams.width, 10);
-    viewContainer.style.minHeight = Math.floor(50 * aspectRatio) + 'px';
-    viewContainer.style.maxWidth = '100%';
-    viewContainer.style.maxHeight = '100%';
-
-    // Transparent view-container so that we can render viewport with one renderer in the same context
-    // view-container is only taken as reference for viewport
-    viewContainer.style.boxShadow = '0px 0px 0px 3px rgba(0,0,0,0.3)';
-    viewContainer.style.borderRadius = '2px';
-    viewContainer.style.background = 'rgba(0,0,0,0)';
+    viewContainer.style.minHeight = Math.floor(parseInt(viewContainer.style.minWidth, 10) * aspectRatio) + 'px';
 
     if (this.renderMethod === GZ3D.MULTIVIEW_RENDER_COPY2CANVAS) {
         // canvas