Mouse Hover Events

[Mezzorio]

Hey everyone!

I wanted to get a bit of help getting a function working whereby when I hover my mouse over character sprites it will show a there name and title just above the mouse position for each different sprite, I'm unsure if I need to look at going down the route of a mouse hover/mouse over function or i need to create an event listener. If anyone could make a demo that I could play with and learn from or something that would be perfect!

Thanks guys!

Mezz 

[RaananW]

Hi,

The best events for that would be the OnPointerOverTrigger OnPointerOutTrigger, which can be added as actions to a specific mesh. You can check the Actions demo in the playground to see how it works (https://www.babylonjs-playground.com/?17) and read all about the action manager here - http://doc.babylonjs.com/tutorials/how_to_use_actions

 

[Wingnut]

Maybe actionManagers?  Here's a loop you once had in your project, Mezz.  I made it a bit longer.

for (var i = 0; i <numberOfStaff; i++){
    spriteManagerstaffs.isPickable = true;
    staffs = new BABYLON.Sprite("staff", spriteManagerstaffs);
    staffs.actionManager = new BABYLON.ActionManager(scene);
    staffs.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger,
    function (AM_event) {
        console.log("Over " + AM_event.source.name);
    }));

    staffs.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOutTrigger,
    function (AM_event) {
        console.log("Exit " + AM_event.source.name);
    }));
} 

Hope this helps.  I think both the actionManager and the sprite itself.... need isPickable = true;  Overlapping sprites could be trouble.

[Wingnut]

Oh, Raanan is a "fast draw"    Gunned me down in the streets... by mere microseconds. 

What's next?  Deciding what type of pop-up text panel to use?  *nod*  For maximum complications, use an absolutely positioned html iframe.    Launch the staffer's entire website in that iframe.

[Mezzorio]

10 minutes ago, Wingnut said:

Maybe actionManagers?  Here's a loop you once had in your project, Mezz.  I made it a bit longer.

for (var i = 0; i <numberOfStaff; i++){
    spriteManagerstaffs.isPickable = true;
    staffs = new BABYLON.Sprite("staff", spriteManagerstaffs);
    staffs.actionManager = new BABYLON.ActionManager(scene);
    staffs.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger,
    function (AM_event) {
        console.log("Over " + AM_event.source.name);
    }));

    staffs.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOutTrigger,
    function (AM_event) {
        console.log("Exit " + AM_event.source.name);
    }));
} 

Hope this helps.  I think both the actionManager and the sprite itself.... need isPickable = true;  Overlapping sprites could be trouble.

Ive got the set as pickable true and have my wierd sprite manager so overlapping sprites is no longer an issue, now i have some things to play with and try to get working! 

Thanks to you both!

[Wingnut]

And to DK for the feature itself...

 

[Wingnut]

Perhaps @RaananW or others can help us with a question, while we're here.

In my previous code-paste, and pretending there are 50 staff...

... Are we storing those pointerOver and pointerOut funcs... MANY times?  Does anyone see how to make this wiser... if there is some bad practices involved here?  Thx for advice.

[Mezzorio]

Just now, Wingnut said:

Perhaps @RaananW or others can help us with a question, while we're here.

In my previous code-paste, and pretending there are 50 staff...

... Are we storing those pointerOver and pointerOut funcs... MANY times?  Does anyone see how to make this wiser... if there is some bad practices involved here?  Thx for advice.

Im using 40 Sprites in my build i load them in as an array and use loops to call through the array list and then in my html set data teams for buttons and other features so on click you can pull through any values stored within the array, and only have to load in one function for the mouse pointer over and clickable area, i can send you my build folder if you wanted to see @Wingnut

 

[Wingnut]

It sounds like you have it well under-control... cool.  I sometimes give bad advice, esp when I code-paste.  I must be careful not to spread my stupidity. 

[Mezzorio]

Just now, Wingnut said:

It sounds like you have it well under-control... cool.  I sometimes give bad advice, esp when I code-paste.  I must be careful not to spread my stupidity. 

I wouldn't say that, I can't work out how to get this working, i don't know what i need to put in the function to get the mouse hover to display the text value of the examples in the function currently if you have any advice?

spriteManagerstaffs.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickUpTrigger,
                function () {
                staffs[staffnum].name;
                 staffs[staffnum].title;
            }));

[Wingnut]

Well, you sound like you come from an HTML background, where desc or altdesc would display when mouse-over some html elements.  *nod* 

In webGL canvas land... no such luxuries.

One way... the great "sheet of cellophane" that is BABYLON GUI full-screen mode.  A 2D piece of plastic across the monitor screen, and you can draw on it.  That's one way.  babylon gui textBlocks, possibly inside containers.

Another way, babylon gui text mapped onto a plane... that you enable and disable at will.  Like another sprite, but for text and crap.  Little icons/pics allowed too.... but no overflow/scrollbars.  Wordwrap = yes. (my preferred way is this way).

Remember... Babylon GUI AdvancedDynamicTexture (adt's) can be mapped fullscreen, or onto a mesh.  It is common to use many adt's at the same time.

Also, standard (old style) BJS DynamicTexture on material for a plane... but really, Babylon GUI is already doing that... and with better text handling.

Pop-open absolute positioned iframe or div... or span.... not out of the question.  Scrollers active, borders nice, good text handling and pads.  *shrug*  Others may have thoughts.

[Mezzorio]

@Wingnut https://drive.google.com/open?id=0B3n3tyoDBL7Cc1E3QmxxZWNXekk - My build folder hosted in Google Drive

[Wingnut]

A modalBox? hmm.    Let's see... that's a pop-open that won't let you un-focus it... until you take an action?  Something like that.  heh

You know... Mezz... I've been TRYING to make you avoid sprites and instead put your pictures onto planes or boxes.  So, I'm biased.  But even now... don't just pop-up a panel of info.  Spinning mesh... fly that puppy-in from stage left... with a WHOOOOOSH and a spray of sparkly particles! YEAH!  Like Tinker Bell just whacked us in the head with her magic faerie wand!  POOOSH - twinklefest! 

Get BIG!  It's all about the "hoopla", right?    Now THAT'S a pop-open.  heh  (oh, I better get some coffee and a clue, huh?)

A slow dissolve-in using something.visibility or somematerial.alpha... is always nice, too.