Add gui tab to the inspector

Tools/Gulp/config.json

@@ -1412,9 +1412,11 @@
                 "files": [
                     "../../inspector/src/Inspector.ts",
                     "../../inspector/src/properties.ts",
+                    "../../inspector/src/properties_gui.ts",
                     "../../inspector/src/gui/BasicElement.ts",
                     "../../inspector/src/adapters/Adapter.ts",
                     "../../inspector/src/adapters/CameraAdapter.ts",
+                    "../../inspector/src/adapters/GUIAdapter.ts",
                     "../../inspector/src/adapters/SoundAdapter.ts",
                     "../../inspector/src/adapters/TextureAdapter.ts",
                     "../../inspector/src/adapters/LightAdapter.ts",
@@ -1434,6 +1436,7 @@
                     "../../inspector/src/tabs/Tab.ts",
                     "../../inspector/src/tabs/PropertyTab.ts",
                     "../../inspector/src/tabs/CameraTab.ts",
+                    "../../inspector/src/tabs/GUITab.ts",
                     "../../inspector/src/tabs/SoundTab.ts",
                     "../../inspector/src/tabs/TextureTab.ts",
                     "../../inspector/src/tabs/LightTab.ts",

inspector/src/Inspector.ts

@@ -40,6 +40,9 @@ module INSPECTOR {
             colorBot?: string
         }) {
 
+            //Load properties of GUI objects now as BABYLON.GUI has to be declared before 
+            loadGUIProperties();
+
             //get Tabbar initialTab
             this._initialTab = initialTab;
 

inspector/src/adapters/GUIAdapter.ts

@@ -0,0 +1,135 @@
+module INSPECTOR {
+    
+    export class GUIAdapter 
+        extends Adapter 
+        implements IToolVisible {
+
+        constructor(obj: BABYLON.GUI.Control) {
+            super(obj);
+        }
+
+        /** Returns the name displayed in the tree */
+        public id(): string {
+            let str = '';
+            if (this._obj.name) {
+                str = this._obj.name;
+            } // otherwise nothing displayed        
+            return str;
+        }
+
+        /** Returns the type of this object - displayed in the tree */
+        public type(): string {
+            return Helpers.GET_TYPE(this._obj);
+        }
+
+        /** Returns the list of properties to be displayed for this adapter */
+        public getProperties(): Array<PropertyLine> {
+            let propertiesLines: Array<PropertyLine> = [];
+
+            for (let dirty of PROPERTIES['Control'].properties) {
+                let infos = new Property(dirty, this._obj);
+                propertiesLines.push(new PropertyLine(infos));
+            }
+
+            if(this._obj instanceof BABYLON.GUI.Button){
+                for (let dirty of PROPERTIES['Button'].properties) {
+                    let infos = new Property(dirty, this._obj);
+                    propertiesLines.push(new PropertyLine(infos));
+                }
+            }
+
+            if(this._obj instanceof BABYLON.GUI.ColorPicker){
+                for (let dirty of PROPERTIES['ColorPicker'].properties) {
+                    let infos = new Property(dirty, this._obj);
+                    propertiesLines.push(new PropertyLine(infos));
+                }
+            }
+
+            if(this._obj instanceof BABYLON.GUI.Checkbox){
+                for (let dirty of PROPERTIES['Checkbox'].properties) {
+                    let infos = new Property(dirty, this._obj);
+                    propertiesLines.push(new PropertyLine(infos));
+                }
+            }
+
+            if(this._obj instanceof BABYLON.GUI.Ellipse){
+                for (let dirty of PROPERTIES['Ellipse'].properties) {
+                    let infos = new Property(dirty, this._obj);
+                    propertiesLines.push(new PropertyLine(infos));
+                }
+            }
+
+            if(this._obj instanceof BABYLON.GUI.Image){
+                for (let dirty of PROPERTIES['Image'].properties) {
+                    let infos = new Property(dirty, this._obj);
+                    propertiesLines.push(new PropertyLine(infos));
+                }
+            }
+
+            if(this._obj instanceof BABYLON.GUI.Line){
+                for (let dirty of PROPERTIES['Line'].properties) {
+                    let infos = new Property(dirty, this._obj);
+                    propertiesLines.push(new PropertyLine(infos));
+                }
+            }
+
+            if(this._obj instanceof BABYLON.GUI.RadioButton){
+                for (let dirty of PROPERTIES['RadioButton'].properties) {
+                    let infos = new Property(dirty, this._obj);
+                    propertiesLines.push(new PropertyLine(infos));
+                }
+            }
+
+            if(this._obj instanceof BABYLON.GUI.Rectangle){
+                for (let dirty of PROPERTIES['Rectangle'].properties) {
+                    let infos = new Property(dirty, this._obj);
+                    propertiesLines.push(new PropertyLine(infos));
+                }
+            }
+
+            if(this._obj instanceof BABYLON.GUI.Slider){
+                for (let dirty of PROPERTIES['Slider'].properties) {
+                    let infos = new Property(dirty, this._obj);
+                    propertiesLines.push(new PropertyLine(infos));
+                }
+            }
+
+            if(this._obj instanceof BABYLON.GUI.StackPanel){
+                for (let dirty of PROPERTIES['StackPanel'].properties) {
+                    let infos = new Property(dirty, this._obj);
+                    propertiesLines.push(new PropertyLine(infos));
+                }
+            }
+
+            if(this._obj instanceof BABYLON.GUI.TextBlock){
+                for (let dirty of PROPERTIES['TextBlock'].properties) {
+                    let infos = new Property(dirty, this._obj);
+                    propertiesLines.push(new PropertyLine(infos));
+                }
+            }
+
+            if(this._obj instanceof BABYLON.GUI.Container){
+                for (let dirty of PROPERTIES['Container'].properties) {
+                    let infos = new Property(dirty, this._obj);
+                    propertiesLines.push(new PropertyLine(infos));
+                }
+            }
+
+            return propertiesLines;
+        }
+
+        public getTools(): Array<AbstractTreeTool> {
+            let tools = [];
+            tools.push(new Checkbox(this));
+            return tools;
+        }
+
+        public setVisible(b: boolean){
+            (this._obj as BABYLON.GUI.Control).isVisible = b;
+        }
+
+        public isVisible(): boolean{
+            return (this._obj as BABYLON.GUI.Control).isVisible;
+        }
+    }
+}

inspector/src/lib.d.ts

@@ -1,5 +1,6 @@
 /// <reference path="../../dist/preview release/babylon.d.ts"/>
 /// <reference path="babylon.canvas2D.d.ts"/>
+/// <reference path="../../dist/preview release/gui/babylon.gui.d.ts"/>
 
 interface ISplit {
     setSizes(sizes:Array<number>);

inspector/src/properties.ts

@@ -1,6 +1,6 @@
 module INSPECTOR {
 
-    export const PROPERTIES = {
+    export var PROPERTIES = {
         /** Format the given object : 
          * If a format function exists, returns the result of this function.
          * If this function doesn't exists, return the object type instead */

inspector/src/properties_gui.ts

@@ -0,0 +1,116 @@
+module INSPECTOR {
+    /**
+     * Function that add gui objects properties to the variable PROPERTIES
+     */
+    export function loadGUIProperties(){
+        let PROPERTIES_GUI = {
+            'ValueAndUnit': {
+                type: BABYLON.GUI.ValueAndUnit,
+                properties: ['_value', 'unit'],
+                format: (valueAndUnit: BABYLON.GUI.ValueAndUnit) => 
+                    { return valueAndUnit }
+            },
+            'Control': {
+                type: BABYLON.GUI.Control,
+                properties: [
+                    '_alpha',
+                    '_fontFamily',
+                    '_color',
+                    '_scaleX',
+                    '_scaleY',
+                    '_rotation',
+                    '_currentMeasure',
+                    '_width',
+                    '_height',
+                    '_left',
+                    '_top',
+                    '_linkedMesh',
+                    'isHitTestVisible',
+                    'isPointerBlocker',
+                ],
+                format: (control: BABYLON.GUI.Control) => { return control.name }
+            },
+            'Button': {
+                type: BABYLON.GUI.Button,
+                properties: [],
+                format: (button: BABYLON.GUI.Button) => { return button.name }
+            },
+            'ColorPicker': {
+                type: BABYLON.GUI.ColorPicker,
+                properties: ['_value'],
+                format: (colorPicker: BABYLON.GUI.ColorPicker) => { return colorPicker.name }
+            },
+            'Checkbox': {
+                type: BABYLON.GUI.Checkbox,
+                properties: ['_isChecked', '_background'],
+                format: (checkbox: BABYLON.GUI.Checkbox) => { return checkbox.name }
+            },
+            'Ellipse': {
+                type: BABYLON.GUI.Ellipse,
+                properties: ['_thickness'],
+                format: (ellipse: BABYLON.GUI.Ellipse) => { return ellipse.name }
+            },
+            'Image': {
+                type: BABYLON.GUI.Image,
+                properties: [
+                    '_imageWidth', 
+                    '_imageHeight',
+                    '_loaded',
+                    '_source',
+                ],
+                format: (image: BABYLON.GUI.Image) => { return image.name }
+            },
+            'Line': {
+                type: BABYLON.GUI.Line,
+                properties: ['_lineWidth',
+                    '_background',
+                    '_x1',
+                    '_y1',
+                    '_x2',
+                    '_y2',
+                ],
+                format: (line: BABYLON.GUI.Line) => { return line.name }
+            },
+            'RadioButton': {
+                type: BABYLON.GUI.RadioButton,
+                properties: ['_isChecked', '_background'],
+                format: (radioButton: BABYLON.GUI.RadioButton) => { return radioButton.name }
+            },
+            'Rectangle': {
+                type: BABYLON.GUI.Rectangle,
+                properties: ['_thickness', '_cornerRadius'],
+                format: (rectangle: BABYLON.GUI.Rectangle) => { return rectangle.name }
+            },
+            'Slider': {
+                type: BABYLON.GUI.Slider,
+                properties: [
+                    '_minimum',
+                    '_maximum',
+                    '_value',
+                    '_background',
+                    '_borderColor',
+                ],
+                format: (slider: BABYLON.GUI.Slider) => { return slider.name }
+            },
+            'StackPanel': {
+                type: BABYLON.GUI.StackPanel,
+                properties: ['_isVertical'],
+                format: (stackPanel: BABYLON.GUI.StackPanel) => { return stackPanel.name }
+            },
+            'TextBlock': {
+                type: BABYLON.GUI.TextBlock,
+                properties: ['_text', '_textWrapping'],
+                format: (textBlock: BABYLON.GUI.TextBlock) => { return textBlock.name }
+            },
+            'Container': {
+                type: BABYLON.GUI.Container,
+                properties: ['_background'],
+                format: (container: BABYLON.GUI.Container) => { return container.name }
+            },
+        }
+
+        for (let prop in PROPERTIES_GUI) {
+            PROPERTIES[prop] = PROPERTIES_GUI[prop];
+        }
+    } 
+}

inspector/src/tabs/GUITab.ts

@@ -0,0 +1,42 @@
+module INSPECTOR{
+    
+    export class GUITab extends PropertyTab {
+                
+        constructor(tabbar:TabBar, inspector:Inspector) {
+            super(tabbar, 'GUI', inspector); 
+        }
+
+        /* Overrides super */
+        protected _getTree() : Array<TreeItem> {
+            let arr = [];
+
+            // Recursive method building the tree panel
+            let createNode = (obj: BABYLON.GUI.Control) => {
+                let descendants = (obj as BABYLON.GUI.Container).children;
+
+                if (descendants && descendants.length > 0) {
+                    let node = new TreeItem(this, new GUIAdapter(obj));
+                    for (let child of descendants) {     
+                        let n = createNode(child);
+                        node.add(n); 
+                    }
+                    node.update();
+                    return node;
+                } else {
+                    return new TreeItem(this, new GUIAdapter(obj));
+                }
+            };
+            
+            // get all textures from the first scene
+            let instances = this._inspector.scene;
+            for (let tex of instances.textures) {
+                //only get GUI's textures
+                if (tex instanceof BABYLON.GUI.AdvancedDynamicTexture) {
+                    let node = createNode(tex._rootContainer);
+                    arr.push(node);
+                }
+            }
+            return arr;
+        }
+    }
+}

inspector/src/tabs/TabBar.ts

@@ -33,6 +33,7 @@ module INSPECTOR {
             this._tabs.push(new ShaderTab(this, this._inspector));
             this._tabs.push(new LightTab(this, this._inspector));
             this._tabs.push(new MaterialTab(this, this._inspector));
+            this._tabs.push(new GUITab(this, this._inspector));
 
             this._tabs.push(new CameraTab(this, this._inspector));
             this._tabs.push(new SoundTab(this, this._inspector));

inspector/test/index.js

@@ -213,6 +213,64 @@ var Test = (function () {
             cubes.push(b);
         }
 
+        // gui
+        var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
+
+        var picker = new BABYLON.GUI.ColorPicker();
+        picker.height = "150px";
+        picker.width = "150px";
+        picker.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
+
+        var checkbox = new BABYLON.GUI.Checkbox();
+        checkbox.width = "20px";
+        checkbox.height = "20px";
+
+        var slider = new BABYLON.GUI.Slider();
+        slider.minimum = 0;
+        slider.maximum = 2 * Math.PI;
+        slider.value = 0;
+        slider.height = "20px";
+        slider.width = "200px";
+
+        var line = new BABYLON.GUI.Line();
+        line.x1 = 10;
+        line.y1 = 10;
+        line.x2 = 1000;
+        line.y2 = 500;
+
+        var panel = new BABYLON.GUI.StackPanel();    
+
+        var button = BABYLON.GUI.Button.CreateSimpleButton("but", "Click Me");
+        button.width = 0.2;
+        button.height = "40px";
+        button.color = "white";
+        button.background = "green";
+        panel.addControl(button);     
+
+        var button2 = BABYLON.GUI.Button.CreateSimpleButton("but2", "Click Me also!");
+        button2.width = 0.2;
+        button2.height = "40px";
+        button2.color = "white";
+        button2.background = "green";
+        panel.addControl(button2);     
+
+        var ellipse1 = new BABYLON.GUI.Ellipse();
+        ellipse1.width = "100px"
+        ellipse1.height = "100px";
+        ellipse1.color = "Orange";
+        ellipse1.thickness = 4;
+        ellipse1.background = "green";
+
+
+        advancedTexture.addControl(ellipse1);    
+        advancedTexture.addControl(panel);   
+        advancedTexture.addControl(picker);    
+        advancedTexture.addControl(checkbox);    
+        advancedTexture.addControl(slider);    
+        advancedTexture.addControl(line);    
+        advancedTexture.addControl(checkbox);    
+
+
         this.scene = scene;
     };
     return Test;