Inspector improvement //Change the camera choice location from sceneTab to cameraTab

inspector/src/adapters/CameraAdapter.ts

@@ -29,14 +29,27 @@ module INSPECTOR {
         
         public getTools() : Array<AbstractTreeTool> {
             let tools = [];
-            // tools.push(new Checkbox(this));
             tools.push(new CameraPOV(this));
             return tools;
         }
 
+        // Set the point of view of the chosen camera
         public setPOV() {
-           (this._obj as BABYLON.Camera).getScene().activeCamera = this._obj;
+           (this._obj as BABYLON.Camera).getScene().switchActiveCamera(this._obj);
         }
+
+        // Return the name of the current active camera
+        public getCurrentActiveCamera() {
+            let activeCamera = (this._obj as BABYLON.Camera).getScene().activeCamera;
+            if(activeCamera != null)
+            {
+                return activeCamera.name;
+            }else{
+                return "0";
+            }
+        }
+
+
         
     }
 }

inspector/src/tabs/SceneTab.ts

@@ -67,24 +67,6 @@ module INSPECTOR {
                 wireframe.addEventListener('click', () => { this._inspector.scene.forcePointsCloud = false; this._inspector.scene.forceWireframe = true; });
                 solid.addEventListener('click', () => { this._inspector.scene.forcePointsCloud = false; this._inspector.scene.forceWireframe = false; });
 
-                // Cameras
-                title = Helpers.CreateDiv('actions-title', this._actions);
-                title.textContent = 'Cameras';
-                let cameraRadioButtons = [];
-                for (let camera of this._inspector.scene.cameras) {
-                    let cameraRadio = Helpers.CreateDiv('action-radio', this._actions);
-                    cameraRadio.textContent = camera.name;
-                    if(this._inspector.scene.activeCamera == camera)
-                    {
-                        cameraRadio.classList.add('active');
-                    }
-                    cameraRadioButtons.push(cameraRadio);
-                    cameraRadio.addEventListener('click', () => { this._inspector.scene.switchActiveCamera(camera);});
-                }
-
-                this._generateRadioAction(cameraRadioButtons);
-                
-
                 // Textures
                 title = Helpers.CreateDiv('actions-title', this._actions);
                 title.textContent = 'Textures channels';

inspector/src/treetools/CameraPOV.ts

@@ -1,7 +1,9 @@
 module INSPECTOR {
 
     export interface ICameraPOV {
-        setPOV: () => void
+        setPOV: () => void,
+        getCurrentActiveCamera: () => string,
+        id: () => string
     }
 
     /**
@@ -13,7 +15,16 @@ module INSPECTOR {
         constructor(camera: ICameraPOV) {
             super();
             this.cameraPOV = camera;
-            this._elem.classList.add('fa-video-camera');
+
+            // Setting the id of the line with the name of the camera
+            this._elem.id = this.cameraPOV.id();
+
+            // Put the right icon 
+            if(this._elem.id == this.cameraPOV.getCurrentActiveCamera()){
+                this._elem.classList.add('fa-check-circle');
+            }else{
+                this._elem.classList.add('fa-circle');
+            }
         }
 
         protected action() {
@@ -22,18 +33,23 @@ module INSPECTOR {
         }
 
         private _gotoPOV() {
-
-            let actives = Inspector.DOCUMENT.querySelectorAll(".fa-video-camera.active");
-            console.log(actives);
+            // Uncheck all the radio buttons
+            let actives = Inspector.DOCUMENT.querySelectorAll(".fa-check-circle");
             for (let i = 0; i < actives.length; i++) {
-                actives[i].classList.remove('active');
+                actives[i].classList.remove('fa-check-circle');
+                actives[i].classList.add('fa-circle');
             }
-            //if (this._on) {
-                // set icon camera
-                this._elem.classList.add('active');
-            //}
+            
+            // setting the point off view to the right camera
             this.cameraPOV.setPOV();
 
+            // Check the right radio button
+            if(this._elem.id == this.cameraPOV.getCurrentActiveCamera())
+            {
+                this._elem.classList.remove('fa-circle');
+                this._elem.classList.add('fa-check-circle');
+            }
+
         }
     }
 }

inspector/test/index.js

@@ -36,17 +36,17 @@ var Test = (function () {
         var scene = new BABYLON.Scene(this.engine);
         var canvas = scene.getEngine().getRenderingCanvas();
 
-        var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, 0), scene); 
+        var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 2, -2), scene); 
         
-        var camera2 = new BABYLON.ArcRotateCamera("Camera2", 0, 0, -0.1, new BABYLON.Vector3(0, 0, 0), scene);
+        var camera2 = new BABYLON.ArcRotateCamera("Camera2", 0, 0, 5, new BABYLON.Vector3(0, 0, 0), scene);
 
-        var camera3 = new BABYLON.ArcRotateCamera("Camera3", 0, 0, -0.1, new BABYLON.Vector3(0, 0, 0), scene);
+        var camera3 = new BABYLON.ArcRotateCamera("Camera3", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene);
 
-        var camera4 = new BABYLON.ArcRotateCamera("Camera4", 0, 0, -0.1, new BABYLON.Vector3(0, 0, 0), scene);
+        var camera4 = new BABYLON.ArcRotateCamera("Camera4", 0, 0, 15, new BABYLON.Vector3(0, 0, 0), scene);
 
-        var camera5 = new BABYLON.ArcRotateCamera("Camera5", 0, 0, -0.1, new BABYLON.Vector3(0, 0, 0), scene);
+        var camera5 = new BABYLON.ArcRotateCamera("Camera5", 0, 0, 20, new BABYLON.Vector3(0, 0, 0), scene);
 
-        var camera6 = new BABYLON.ArcRotateCamera("Camera6", 0, 0, -0.1, new BABYLON.Vector3(0, 0, 0), scene);
+        var camera6 = new BABYLON.ArcRotateCamera("Camera6", 0, 0, 25, new BABYLON.Vector3(0, 0, 0), scene);
 
         scene.activeCamera = camera2;