UI questions

[denon40]

Hi,

I am new to Babylon and HTML and was wondering if there was a way to create a popup window upon clicking on an object (I have everything that I would need already finished except for creating the actual window itself. I know that there is a way to do it with HTML but i was wondering if there is a way within Babylon to do it (which would save me time learning that part in HTML).

If anybody has suggestions about how to go about this I would greatly appreciate it.

[Boz]

You can catch the click on a object in your 3D scene. Let's say you want to display a pop-up when you click on the object called "thisOne" :

scene.onPointerDown = function(evt, pickResult)
{
    // If you click on an object from your scene
    if(pickResult.hit) {
        // Get the object name
        var meshName = pickResult.pickedMesh.name;

        if(meshName == "thisOne") {
            // Create your pop-up
            alert('Bonjour');
        }
    }
}

Then, if you want to create a "sophisticated" window (instead of the alert function), you can use one of the BabylonJS GUI Extensions : bGUI, CastorGUI or Canvas2D

It allows you to display text and pictures, with colors and design management.

However, if you only need one window you could have used HTML directly :

var popup = document.createElement('div');
popup.innerHTML = ''; // The HTML code of your pop-up
document.body.appendChild(popup);

 

[Wingnut]

Hi guys.  Well said, @Pouet.  On that last version, you might need some CSS for popup. 

popup.style.position = "absolute";
popup.style.top = "20%";
popup.style.left = "20%";
popup.style.border = "4pt outset blue";
popup.style.font = "blah blah blah";
... (lots more, as wanted)

Tour CSS3 styles at http://webpages.charter.net/wingthing/html/propIndex.htm if you like.  Click on any property to view the W3C spec regarding THAT property (click-thru).

If I remember correctly, Android devices using CocoonJS... can't access DOM.  So, createElement and appendChild won't work, there.  For those devices, use bGui, CastorGui, guiDialog, or Canvas2d.  Canvas2D is new, but has fine docs, and really is future-looking.  Besides the many playground demos in the docs, I recently saw another Canvas 2D demo where a lot of text was displayed on a panel, and it was real clean and nice.  http://babylonjs-playground.com/#1S2MDR#2

We MIGHT see bGUI, CastorGUI, and guiDialog re-programmed in the near future... to use Canvas2D as their underlying system.  No promises, just speculation.   

Forum search:  http://www.html5gamedevs.com/search/?&type=forums_topic&nodes=28,16,29,30,31 
Docs search:  http://doc.babylonjs.com/ 
Playground search:  http://doc.babylonjs.com/playground

Good luck, stay in touch.  Further assistance available and gladly shared.