Fixes #2187 and #2188

dist/preview release/gui/babylon.gui.d.ts

@@ -242,6 +242,7 @@ declare module BABYLON.GUI {
         protected _measureForChildren: Measure;
         protected _background: string;
         background: string;
+        readonly children: Control[];
         constructor(name: string);
         containsControl(control: Control): boolean;
         addControl(control: Control): Container;
@@ -362,7 +363,9 @@ declare module BABYLON.GUI {
         private _imageHeight;
         private _loaded;
         private _stretch;
+        private _source;
         stretch: number;
+        source: string;
         constructor(name: string, url: string);
         _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
         private static _STRETCH_NONE;
@@ -389,6 +392,7 @@ declare module BABYLON.GUI {
         protected _onPointerDown(): void;
         protected _onPointerUp(): void;
         static CreateImageButton(name: string, text: string, imageUrl: string): Button;
+        static CreateImageOnlyButton(name: string, imageUrl: string): Button;
         static CreateSimpleButton(name: string, text: string): Button;
     }
 }

dist/preview release/gui/babylon.gui.js

@@ -1226,6 +1226,13 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(Container.prototype, "children", {
+                get: function () {
+                    return this._children;
+                },
+                enumerable: true,
+                configurable: true
+            });
             Container.prototype.containsControl = function (control) {
                 return this._children.indexOf(control) !== -1;
             };
@@ -1980,14 +1987,7 @@ var BABYLON;
                 _this.name = name;
                 _this._loaded = false;
                 _this._stretch = Image.STRETCH_FILL;
-                _this._domImage = new DOMImage();
-                _this._domImage.onload = function () {
-                    _this._imageWidth = _this._domImage.width;
-                    _this._imageHeight = _this._domImage.height;
-                    _this._loaded = true;
-                    _this._markAsDirty();
-                };
-                _this._domImage.src = url;
+                _this.source = url;
                 return _this;
             }
             Object.defineProperty(Image.prototype, "stretch", {
@@ -2004,6 +2004,25 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(Image.prototype, "source", {
+                set: function (value) {
+                    var _this = this;
+                    if (this._source === value) {
+                        return;
+                    }
+                    this._source = value;
+                    this._domImage = new DOMImage();
+                    this._domImage.onload = function () {
+                        _this._imageWidth = _this._domImage.width;
+                        _this._imageHeight = _this._domImage.height;
+                        _this._loaded = true;
+                        _this._markAsDirty();
+                    };
+                    this._domImage.src = value;
+                },
+                enumerable: true,
+                configurable: true
+            });
             Image.prototype._draw = function (parentMeasure, context) {
                 context.save();
                 this._applyStates(context);
@@ -2148,6 +2167,15 @@ var BABYLON;
                 result.addControl(iconImage);
                 return result;
             };
+            Button.CreateImageOnlyButton = function (name, imageUrl) {
+                var result = new Button(name);
+                // Adding image
+                var iconImage = new BABYLON.GUI.Image(name + "_icon", imageUrl);
+                iconImage.stretch = BABYLON.GUI.Image.STRETCH_FILL;
+                iconImage.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
+                result.addControl(iconImage);
+                return result;
+            };
             Button.CreateSimpleButton = function (name, text) {
                 var result = new Button(name);
                 // Adding text

gui/src/controls/button.ts

@@ -93,6 +93,18 @@ module BABYLON.GUI {
             return result;
         }
 
+        public static CreateImageOnlyButton(name: string, imageUrl: string): Button {
+            var result = new Button(name);
+
+            // Adding image
+            var iconImage = new BABYLON.GUI.Image(name + "_icon", imageUrl);
+            iconImage.stretch = BABYLON.GUI.Image.STRETCH_FILL;
+            iconImage.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
+            result.addControl(iconImage);            
+
+            return result;
+        }
+
         public static CreateSimpleButton(name: string, text: string): Button {
             var result = new Button(name);
 

gui/src/controls/container.ts

@@ -17,7 +17,11 @@ module BABYLON.GUI {
 
             this._background = value;
             this._markAsDirty();
-        }          
+        }  
+
+        public get children(): Control[] {
+            return this._children;
+        }        
 
         constructor(public name: string) {
             super(name);

gui/src/controls/image.ts

@@ -9,6 +9,7 @@ module BABYLON.GUI {
         private _imageHeight: number;
         private _loaded = false;
         private _stretch = Image.STRETCH_FILL;
+        private _source: string;
 
         public get stretch(): number {
             return this._stretch;
@@ -24,9 +25,13 @@ module BABYLON.GUI {
             this._markAsDirty();
         }
 
-        constructor(public name: string, url: string) {
-            super(name);
+        public set source(value: string) {
+            if (this._source === value) {
+                return;
+            }
 
+            this._source = value;
+            
             this._domImage = new DOMImage();
             
             this._domImage.onload = () => {
@@ -36,7 +41,13 @@ module BABYLON.GUI {
                 this._markAsDirty();
             }
             
-            this._domImage.src = url;
+            this._domImage.src = value;
+        }
+
+        constructor(public name: string, url: string) {
+            super(name);
+
+            this.source = url;
         }
 
         public _draw(parentMeasure: Measure, context: CanvasRenderingContext2D): void {