tooltip and behavior

Tools/Gulp/config.json

@@ -360,7 +360,8 @@
                 "../../src/Behaviors/Mesh/babylon.pointerDragBehavior.js",
                 "../../src/Behaviors/Mesh/babylon.multiPointerScaleBehavior.js",
                 "../../src/Behaviors/Mesh/babylon.sixDofDragBehavior.js",
-                "../../src/Behaviors/Mesh/babylon.attachToBoxBehavior.js"
+                "../../src/Behaviors/Mesh/babylon.attachToBoxBehavior.js",
+                "../../src/Behaviors/Mesh/babylon.fadeInOutBehavior.js"
             ],
             "dependUpon": [
                 "behaviors"

dist/preview release/what's new.md

@@ -102,6 +102,7 @@
 - Added Image Processing to the particle system to allow consistency in one pass forward rendering scenes ([sebavan](http://www.github.com/sebavan))
 - Added Video Recorder [Issue 4708](https://github.com/BabylonJS/Babylon.js/issues/4708) ([sebavan](http://www.github.com/sebavan))
 - Added support for main WebGL2 texture formats ([PeapBoy](https://github.com/NicolasBuecher))
+- Added fadeInOutBehavior and tooltipText for holographic buttons ([TrevorDev](https://github.com/TrevorDev))
 
 ### glTF Loader
 

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

@@ -5,6 +5,7 @@ import { StackPanel } from "../../2D/controls/stackPanel";
 import { Image } from "../../2D/controls/image";
 import { TextBlock } from "../../2D/controls/textBlock";
 import { AdvancedDynamicTexture } from "../../2D/advancedDynamicTexture";
+import { Control3D } from "./control3D";
 
 /**
  * Class used to create a holographic button in 3D
@@ -21,6 +22,88 @@ export class HolographicButton extends Button3D {
     private _plateMaterial: StandardMaterial;
     private _pickedPointObserver: Nullable<Observer<Nullable<Vector3>>>;
 
+    // Tooltip
+    private _tooltipFade: Nullable<BABYLON.FadeInOutBehavior>;
+    private _tooltipTextBlock: Nullable<TextBlock>;
+    private _tooltipTexture: Nullable<AdvancedDynamicTexture>;
+    private _tooltipMesh: Nullable<Mesh>;
+    private _tooltipHoverObserver:Nullable<Observer<Control3D>>
+    private _tooltipOutObserver:Nullable<Observer<Control3D>>
+
+    private _disposeTooltip(){
+        this._tooltipFade = null;
+        if(this._tooltipTextBlock){
+            this._tooltipTextBlock.dispose();
+        }
+        if(this._tooltipTexture){
+            this._tooltipTexture.dispose();
+        }
+        if(this._tooltipMesh){
+            this._tooltipMesh.dispose();
+        }
+        this.onPointerEnterObservable.remove(this._tooltipHoverObserver);
+        this.onPointerOutObservable.remove(this._tooltipOutObserver);
+    }
+
+    /**
+     * Text to be displayed on the tooltip shown when hovering on the button. When set to null tooltip is disabled. (Default: null)
+     */
+    public set tooltipText(text:Nullable<string>){
+        if(!text){
+            this._disposeTooltip();
+            return;
+        }
+        if(!this._tooltipFade){
+            // Create tooltip with mesh and text
+            this._tooltipMesh = BABYLON.MeshBuilder.CreatePlane("", {size: 1}, this._backPlate._scene)
+            var tooltipBackground = BABYLON.MeshBuilder.CreatePlane("", {size: 1, sideOrientation: BABYLON.Mesh.DOUBLESIDE}, this._backPlate._scene)
+            var mat = new StandardMaterial("", this._backPlate._scene);
+            mat.diffuseColor = BABYLON.Color3.FromHexString("#212121")
+            tooltipBackground.material = mat
+            tooltipBackground.isPickable = false;
+            this._tooltipMesh.addChild(tooltipBackground)
+            tooltipBackground.position.z = 0.05
+            this._tooltipMesh.scaling.y = 1/3
+            this._tooltipMesh.position.y = 0.7;
+            this._tooltipMesh.position.z = -0.15;
+            this._tooltipMesh.isPickable = false;
+            this._tooltipMesh.parent = this._backPlate;
+
+            // Create text texture for the tooltip
+            this._tooltipTexture = AdvancedDynamicTexture.CreateForMesh(this._tooltipMesh)
+            this._tooltipTextBlock = new TextBlock();
+            this._tooltipTextBlock.scaleY = 3
+            this._tooltipTextBlock.color = "white";
+            this._tooltipTextBlock.fontSize = 130;
+            this._tooltipTexture.addControl(this._tooltipTextBlock);
+
+            // Add hover action to tooltip
+            this._tooltipFade = new BABYLON.FadeInOutBehavior();
+            this._tooltipFade.delay = 500;
+            this._tooltipMesh.addBehavior(this._tooltipFade);
+            this._tooltipHoverObserver = this.onPointerEnterObservable.add(()=>{
+                if(this._tooltipFade){
+                    this._tooltipFade.fadeIn(true)
+                }
+            })
+            this._tooltipOutObserver = this.onPointerOutObservable.add(()=>{
+                if(this._tooltipFade){
+                    this._tooltipFade.fadeIn(false)
+                }
+            })
+        }
+        if(this._tooltipTextBlock){
+            this._tooltipTextBlock.text = text;
+        }
+    }
+
+    public get tooltipText(){
+        if(this._tooltipTextBlock){
+            return this._tooltipTextBlock.text;
+        }
+        return null;
+    }
+    
     /**
      * Gets or sets text for the button
      */
@@ -233,6 +316,8 @@ export class HolographicButton extends Button3D {
     public dispose() {
         super.dispose(); // will dispose main mesh ie. back plate
 
+        this._disposeTooltip();
+
         if (!this.shareMaterials) {
             this._backMaterial.dispose();
             this._frontMaterial.dispose();

src/Behaviors/Mesh/babylon.fadeInOutBehavior.ts

@@ -0,0 +1,92 @@
+module BABYLON {
+    /**
+     * A behavior that when attached to a mesh will allow the mesh to fade in and out
+     */
+    export class FadeInOutBehavior implements Behavior<Mesh> {
+        /**
+         * Time in milliseconds to delay before fading in (Default: 0)
+         */
+        public delay = 0;
+        /**
+         * Time in milliseconds for the mesh to fade in (Default: 300)
+         */
+        public fadeInTime = 300;
+
+        private _millisecondsPerFrame = 1000/60;
+        private _hovered = false;
+        private _hoverValue = 0;
+        private _ownerNode:Nullable<Mesh> = null;
+        
+        /**
+         * Instatiates the FadeInOutBehavior
+         */
+        constructor(){
+        }
+        
+        /**
+         *  The name of the behavior
+         */
+        public get name(): string {
+            return "FadeInOut";
+        }
+
+        /**
+         *  Initializes the behavior
+         */
+        public init() {
+        }
+
+        /**
+         * Attaches the fade behavior on the passed in mesh
+         * @param ownerNode The mesh that will be faded in/out once attached
+         */
+        public attach(ownerNode: Mesh): void {
+            this._ownerNode = ownerNode;
+            this._setAllVisibility(this._ownerNode, 0);
+        }
+        /**
+         *  Detaches the behavior from the mesh
+         */
+        public detach(): void {
+            this._ownerNode = null;
+        }
+
+        /**
+         * Triggers the mesh to begin fading in or out
+         * @param value if the object should fade in or out (true to fade in)
+         */
+        public fadeIn(value:boolean){
+            this._hovered = value;
+            this._update();
+        }
+
+        private _update = ()=>{
+            if(this._ownerNode){
+                this._hoverValue += this._hovered ? this._millisecondsPerFrame : -this._millisecondsPerFrame
+            
+                this._setAllVisibility(this._ownerNode, (this._hoverValue - this.delay)/this.fadeInTime);
+
+                if(this._ownerNode.visibility > 1){
+                    this._setAllVisibility(this._ownerNode, 1);
+                    this._hoverValue = this.fadeInTime + this.delay
+                    return
+                }else if(this._ownerNode.visibility < 0){
+                    this._setAllVisibility(this._ownerNode, 0);
+                    if(this._hoverValue < 0){
+                        this._hoverValue = 0
+                        return
+                    }
+                }
+                setTimeout(this._update,this._millisecondsPerFrame)
+            }
+        }
+
+        private _setAllVisibility(mesh:AbstractMesh, value:number){
+            mesh.visibility = value;
+            mesh.getChildMeshes().forEach((c)=>{
+                this._setAllVisibility(c, value);
+            })
+        }
+
+    }
+}