Add fontWeight to GUI controls

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

@@ -7,6 +7,7 @@ declare module BABYLON.GUI {
     class Style implements BABYLON.IDisposable {
         private _fontFamily;
         private _fontStyle;
+        private _fontWeight;
         /** @hidden */
         _host: AdvancedDynamicTexture;
         /** @hidden */
@@ -32,6 +33,8 @@ declare module BABYLON.GUI {
          * Gets or sets the font style
          */
         fontStyle: string;
+        /** Gets or sets font weight */
+        fontWeight: string;
         /** Dispose all associated resources */
         dispose(): void;
     }
@@ -232,6 +235,7 @@ declare module BABYLON.GUI {
         _currentMeasure: Measure;
         private _fontFamily;
         private _fontStyle;
+        private _fontWeight;
         private _fontSize;
         private _font;
         _width: ValueAndUnit;
@@ -336,7 +340,10 @@ declare module BABYLON.GUI {
         height: string | number;
         readonly heightInPixels: number;
         fontFamily: string;
+        /** Gets or sets font style */
         fontStyle: string;
+        /** Gets or sets font weight */
+        fontWeight: string;
         style: BABYLON.Nullable<Style>;
         /** @hidden */
         readonly _isFontSizeInPercentage: boolean;
@@ -1358,6 +1365,7 @@ declare module BABYLON.GUI {
         private _textPlate;
         private _frontPlate;
         private _text;
+        private _imageUrl;
         private _shareMaterials;
         private _frontMaterial;
         private _backMaterial;
@@ -1368,6 +1376,10 @@ declare module BABYLON.GUI {
          */
         text: string;
         /**
+         * Gets or sets the image url for the button
+         */
+        imageUrl: string;
+        /**
          * Gets the back material used by this button
          */
         readonly backMaterial: FluentMaterial;

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

@@ -43,6 +43,7 @@ var BABYLON;
             function Style(host) {
                 this._fontFamily = "Arial";
                 this._fontStyle = "";
+                this._fontWeight = "";
                 /** @hidden */
                 this._fontSize = new GUI.ValueAndUnit(18, GUI.ValueAndUnit.UNITMODE_PIXEL, false);
                 /**
@@ -103,6 +104,21 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(Style.prototype, "fontWeight", {
+                /** Gets or sets font weight */
+                get: function () {
+                    return this._fontWeight;
+                },
+                set: function (value) {
+                    if (this._fontWeight === value) {
+                        return;
+                    }
+                    this._fontWeight = value;
+                    this.onChangedObservable.notifyObservers(this);
+                },
+                enumerable: true,
+                configurable: true
+            });
             /** Dispose all associated resources */
             Style.prototype.dispose = function () {
                 this.onChangedObservable.clear();
@@ -1104,6 +1120,7 @@ var BABYLON;
                 this._currentMeasure = GUI.Measure.Empty();
                 this._fontFamily = "Arial";
                 this._fontStyle = "";
+                this._fontWeight = "";
                 this._fontSize = new GUI.ValueAndUnit(18, GUI.ValueAndUnit.UNITMODE_PIXEL, false);
                 this._width = new GUI.ValueAndUnit(1, GUI.ValueAndUnit.UNITMODE_PERCENTAGE, false);
                 this._height = new GUI.ValueAndUnit(1, GUI.ValueAndUnit.UNITMODE_PERCENTAGE, false);
@@ -1375,6 +1392,7 @@ var BABYLON;
                 configurable: true
             });
             Object.defineProperty(Control.prototype, "fontStyle", {
+                /** Gets or sets font style */
                 get: function () {
                     return this._fontStyle;
                 },
@@ -1388,6 +1406,21 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(Control.prototype, "fontWeight", {
+                /** Gets or sets font weight */
+                get: function () {
+                    return this._fontWeight;
+                },
+                set: function (value) {
+                    if (this._fontWeight === value) {
+                        return;
+                    }
+                    this._fontWeight = value;
+                    this._resetFontCache();
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(Control.prototype, "style", {
                 get: function () {
                     return this._style;
@@ -2094,10 +2127,10 @@ var BABYLON;
                     return;
                 }
                 if (this._style) {
-                    this._font = this._style.fontStyle + " " + this.fontSizeInPixels + "px " + this._style.fontFamily;
+                    this._font = (this._style.fontWeight ? this._style.fontWeight : this._style.fontStyle) + " " + this.fontSizeInPixels + "px " + this._style.fontFamily;
                 }
                 else {
-                    this._font = this._fontStyle + " " + this.fontSizeInPixels + "px " + this._fontFamily;
+                    this._font = (this._fontWeight ? this._fontWeight : this._fontStyle) + " " + this.fontSizeInPixels + "px " + this._fontFamily;
                 }
                 this._fontOffset = Control._GetFontOffset(this._font);
             };
@@ -6652,6 +6685,23 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(HolographicButton.prototype, "imageUrl", {
+                /**
+                 * Gets or sets the image url for the button
+                 */
+                get: function () {
+                    return this._imageUrl;
+                },
+                set: function (value) {
+                    if (this._imageUrl === value) {
+                        return;
+                    }
+                    this._imageUrl = value;
+                    this._rebuildContent();
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(HolographicButton.prototype, "backMaterial", {
                 /**
                  * Gets the back material used by this button
@@ -6698,6 +6748,15 @@ var BABYLON;
             HolographicButton.prototype._rebuildContent = function () {
                 var panel = new GUI.StackPanel();
                 panel.isVertical = true;
+                if (this._imageUrl) {
+                    var image = new BABYLON.GUI.Image();
+                    image.source = this._imageUrl;
+                    image.paddingTop = "40px";
+                    image.height = "180px";
+                    image.width = "100px";
+                    image.paddingBottom = "40px";
+                    panel.addControl(image);
+                }
                 if (this._text) {
                     var text = new BABYLON.GUI.TextBlock();
                     text.text = this._text;

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

@@ -12,6 +12,7 @@ declare module BABYLON.GUI {
     class Style implements BABYLON.IDisposable {
         private _fontFamily;
         private _fontStyle;
+        private _fontWeight;
         /** @hidden */
         _host: AdvancedDynamicTexture;
         /** @hidden */
@@ -37,6 +38,8 @@ declare module BABYLON.GUI {
          * Gets or sets the font style
          */
         fontStyle: string;
+        /** Gets or sets font weight */
+        fontWeight: string;
         /** Dispose all associated resources */
         dispose(): void;
     }
@@ -237,6 +240,7 @@ declare module BABYLON.GUI {
         _currentMeasure: Measure;
         private _fontFamily;
         private _fontStyle;
+        private _fontWeight;
         private _fontSize;
         private _font;
         _width: ValueAndUnit;
@@ -341,7 +345,10 @@ declare module BABYLON.GUI {
         height: string | number;
         readonly heightInPixels: number;
         fontFamily: string;
+        /** Gets or sets font style */
         fontStyle: string;
+        /** Gets or sets font weight */
+        fontWeight: string;
         style: BABYLON.Nullable<Style>;
         /** @hidden */
         readonly _isFontSizeInPercentage: boolean;
@@ -1363,6 +1370,7 @@ declare module BABYLON.GUI {
         private _textPlate;
         private _frontPlate;
         private _text;
+        private _imageUrl;
         private _shareMaterials;
         private _frontMaterial;
         private _backMaterial;
@@ -1373,6 +1381,10 @@ declare module BABYLON.GUI {
          */
         text: string;
         /**
+         * Gets or sets the image url for the button
+         */
+        imageUrl: string;
+        /**
          * Gets the back material used by this button
          */
         readonly backMaterial: FluentMaterial;

gui/src/2D/controls/control.ts

@@ -11,6 +11,7 @@ module BABYLON.GUI {
         public _currentMeasure = Measure.Empty();
         private _fontFamily = "Arial";
         private _fontStyle = "";
+        private _fontWeight = "";
         private _fontSize = new ValueAndUnit(18, ValueAndUnit.UNITMODE_PIXEL, false);
         private _font: string;
         public _width = new ValueAndUnit(1, ValueAndUnit.UNITMODE_PERCENTAGE, false);
@@ -276,6 +277,7 @@ module BABYLON.GUI {
             this._resetFontCache();
         }
 
+        /** Gets or sets font style */
         public get fontStyle(): string {
             return this._fontStyle;
         }
@@ -289,6 +291,20 @@ module BABYLON.GUI {
             this._resetFontCache();
         }
 
+        /** Gets or sets font weight */
+        public get fontWeight(): string {
+            return this._fontWeight;
+        }
+
+        public set fontWeight(value: string) {
+            if (this._fontWeight === value) {
+                return;
+            }
+
+            this._fontWeight = value;
+            this._resetFontCache();
+        }        
+
         public get style(): BABYLON.Nullable<Style> {
             return this._style;
         }
@@ -1046,9 +1062,9 @@ module BABYLON.GUI {
             }
 
             if (this._style) {
-                this._font = this._style.fontStyle + " " + this.fontSizeInPixels + "px " + this._style.fontFamily;
+                this._font = (this._style.fontWeight ? this._style.fontWeight : this._style.fontStyle) + " " + this.fontSizeInPixels + "px " + this._style.fontFamily;
             } else {
-                this._font = this._fontStyle + " " + this.fontSizeInPixels + "px " + this._fontFamily;
+                this._font = (this._fontWeight ? this._fontWeight : this._fontStyle) + " " + this.fontSizeInPixels + "px " + this._fontFamily;
             }
 
             this._fontOffset = Control._GetFontOffset(this._font);

gui/src/2D/style.ts

@@ -8,6 +8,7 @@ module BABYLON.GUI {
     export class Style implements BABYLON.IDisposable {
         private _fontFamily = "Arial";
         private _fontStyle = "";       
+        private _fontWeight = "";     
         /** @hidden */ 
         public _host: AdvancedDynamicTexture;
         /** @hidden */
@@ -75,6 +76,20 @@ module BABYLON.GUI {
             this.onChangedObservable.notifyObservers(this);
         }
 
+        /** Gets or sets font weight */
+        public get fontWeight(): string {
+            return this._fontWeight;
+        }
+
+        public set fontWeight(value: string) {
+            if (this._fontWeight === value) {
+                return;
+            }
+
+            this._fontWeight = value;            
+            this.onChangedObservable.notifyObservers(this);
+        }          
+
         /** Dispose all associated resources */
         public dispose() {
             this.onChangedObservable.clear();

gui/src/3D/controls/holographicButton.ts

@@ -9,6 +9,7 @@ module BABYLON.GUI {
         private _textPlate: Mesh;
         private _frontPlate: Mesh;
         private _text: string;
+        private _imageUrl: string;
         private _shareMaterials = true;
         private _frontMaterial: FluentMaterial;
         private _backMaterial: FluentMaterial;
@@ -34,6 +35,22 @@ module BABYLON.GUI {
         }
 
         /**
+         * Gets or sets the image url for the button
+         */
+        public get imageUrl(): string {
+            return this._imageUrl;
+        }
+
+        public set imageUrl(value: string) {
+            if (this._imageUrl === value) {
+                return;
+            }
+
+            this._imageUrl = value;
+            this._rebuildContent();
+        }        
+
+        /**
          * Gets the back material used by this button
          */
         public get backMaterial(): FluentMaterial {
@@ -94,6 +111,16 @@ module BABYLON.GUI {
             let panel = new StackPanel();
             panel.isVertical = true;
 
+            if (this._imageUrl) {
+                let image = new BABYLON.GUI.Image();
+                image.source = this._imageUrl;
+                image.paddingTop = "40px";
+                image.height = "180px";
+                image.width = "100px";
+                image.paddingBottom = "40px";
+                panel.addControl(image);                
+            }
+
             if (this._text) {
                 let text = new BABYLON.GUI.TextBlock();
                 text.text = this._text;