Drop down menu mouseover

[Kilombo]

Hello everyone,

 

I need help on something. I wonder if it's possible to make something like a "drop down menu" when the mouse hovers one mesh.

I've got the problem minimized by overriding the right button click. But this option is not viable (since it's a bad practice).

So.. I use the left button to point the place where the mesh will move to, the only solutions that occurs to me it's the mouseover event.

Any suggestions?

 

Thanks in advance.

[Maxence]

Hi,

 

I don't think the "mouseover" event could be fired when you are moving your mouse over a mesh. Because this means your are always checking if the mouse is over a mesh.

 

I have seen an example on babylonsJs website which use actions and actionManager to change the display of a mesh, I think it could help you to do what you want.

 

Here the code and the example.

 

You can start by updating babylonJS code to fire a custom event and see if it can works for your project. If it works you will have to make it usable by everyone.

 

Hope it could helpful.

Thanks for reading.

 

[Wingnut]

Hi again, Kilombo, and hi Maxence!

 

  Ya know, Maxence is correct, to a degree.  You might just be able to do it, Kilombo.

 

Using the link that Maxence provided... take a look at line 93:

mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPointerOverTrigger, mesh.material, "emissiveColor", new BABYLON.Color3.White()));

We can see by the demo... that the onPointerOverTrigger is working just fine.  It causes an ACTION on mesh.material object, on the property called emissiveColor... to be a value of white.  Object, property, value.  But that's scene object actions (yawn).

 

In the actionManager docs at https://github.com/BabylonJS/Babylon.js/wiki/How-to-use-Actions ... in the ACTIONS section, there is an action called... ExecuteCodeAction(trigger, func, condition).  THAT... could run a function... which could MAYBE obtain the pickingInfo (to get the current pointer position)... and then that function could overlay some absolute-positioned HTML... atop the canvas.  And that HTML... could be a menu.  (or it could be any other goofy thing, like an animated gif or html AUDIO element)

 

I suspect that the 'func' could be "document.anyfunction" or even something as weird as "mesh.meshmenu" or "scene.getMeshByName('book_of_callable_functions').wine_bottle_context_menu".  But there is no parameter in ExecuteCodeAction to send args TO the called function.  Maybe pickingInfo is sent automatically... just like the event object is sent to eventHandlers... for standard browser events.

 

Maybe it should be... 

 

ExecuteCodeAction(trigger, func, [args], condition)

 

Or maybe...

 

ExecuteCodeAction(trigger, func, [pickingInfo, optional_args], condition)

 

But, at minimum... you could certainly turn-on a HTML sidebar menu of "stuff"... by using the ExecuteCodeAction with BABYLON.ActionManager.OnPointerOverTrigger as the action trigger.  There's some beefy power there, and if a guy was a mad scientist... he could definitely cause some serious damage and maybe even take over the world... using ExecuteCodeAction. 

 

Interesting topic, gang!  Demented experiments ahead! 

[Kilombo]

Great answers. I can't try them today. But I'll surely do it.

You see:

ExecuteCodeAction(trigger, func, condition)

The func, can be whatever I want, so I can call a function that will some how trigger a menu (composed by PNG or something, I've to study a solution).

What it matters is that "there's a light in the end of the tunnel", and I'll work it out some how (I've got to).

 

Thanks to both of you.

 

I'll feed this topic with the solution (if i find it).

[Wingnut]

Hi guys!   I've been doing a tiny bit of experimenting on the actionManager-driven mouseover menu, and it has turned out pretty well, but we could use some modifications to the framework to make it work much better.  Let's take a look at what I've got so far.

 

If you look at the source code, you can see that we have two primary functions...  myMouseOver and myMouseOut.  MyMouseOver is quite a mess of 'dynamic html'... html elements made from javascript, styled with javascript, and appended into the document with... yep... javascript.

 

The actionManager sends no args/parameters to our myMouseOver function and that is why it has the empty parentheses ().  When myMouseOver runs, we have no idea where the mouse pointer is located, and we don't know which mesh was moused-over.  I was able to do an ugly workaround to find where the mouse pointer was located... so the menus pop-open at fairly accurate locations, but I am not able to find out which mesh was moused-over (from inside the myMouseOver function).

 

What we NEED... is for the programmers of the actionManager... to send some information ABOUT the triggering... to our myMouseOver function.  We would really like an information object... to be sent to the function named in the ExecuteCodeAction.  If we had that, we could query that object and get information like mouse x and y location, and mesh name/reference... from it.

 

Our myMouseOver function first line would INSTEAD look like this...

 

function myMouseOver(infoObject) {

 

and then we could do...

 

var myMouseX = infoObject.mouseX;

var myMouseY = infoObject.mouseY;

var whichMesh = infoObject.triggeredMesh;

 

Maybe we can convince Deltakosh to modify the ExecuteCodeAction and send us an object full of information that we could use in our myMouseOver and/or myMeshClick functions, huh?  The main things we need is WHERE the mouse pointer is located, and which mesh was triggered.  But the infoObject could contain lots more things, and we would not complain.  More is good.    Party on!

[gryff]

Nice little demo Wingy - even if the "MyMouseOver is quite a mess of 'dynamic html'". But full object info would be good.

 

cheers, gryff

[GameMonetize]

Great idea!!

To get it more general here is what I'll add to next release:

 

scene.meshUnderPointer <-- property that returns the mesh under the pointer or null

scene.pointerX and scene.pointerY <-- well, the pointer position

[Kilombo]

Thanks guys, I still didn't had the time to test it (to much work). You guys are great. You not only point the way out... You solved me the entire problem. It's really, really a great community.

[Wingnut]

Cooool! 

 

There is a rumor going around that your 'context menu' idea also promoted the adding of center mouse button trigger, and right mouse button trigger... to the actionManager, too.  You're a trailblazer, Kilombo (and Maxence), and you hardly even knew you were blazing trails, eh?    That actionManager has a promising future... and you guys helped make it that way.  PARTY ON!

[Wingnut]

Ok, Kilombo, we're commandeering your thread... to torture Deltakosh with more inane questions about the actionManager.  We need to get out of Subin George's hair.    He's trying to get questions answered and we are vomiting words all over his nice clean thread.

 

Speaking of giving Deltakosh migraine headaches... dare I ask if virtualJoystick events and mouse drag'n'drops... are destined to come through the actionManager, as well?  (ouch, eh?)  (sorry)    Is touchPick and touchDrag scary?  I bet so.  It scares me, anyway.  heh.

 

Let's see... touchPick.  hmmm.  We'd need a sister to virtualJoysticks... called virtualPointer.  As you drag the pointer around the screen with your finger, various mesh would have a mouseOver trigger active, and their .showBoundingBox would turn on and off as you put the pointer atop them.  Then to CHOOSE (pick) a mesh, you would tap ANOTHER finger on the touchscreen or touchpad.

 

Then depending upon the actionFunction (the function targetted by a ExecuteCodeAction), the mesh would be considered picked or connected to the virtualPointer.  Then you could drag the virtual pointer to another scene location, tap a second finger, and drop (untake) the mesh at that location.  But what IS 'location' when doing 2D drags in 3D scenes?  A nightmare, right?

 

Ok, so, when the virtualPointer is turned on (when a finger is touching the pad/screen), a circle of 5 buttons surrounds the pointer.  One is pick, one is lockedTake, one is unTake (drop), one is move object away from camera, and one is move object toward camera.  but then we'd need some properties... like .moveAwaySpeed and .moveTowardSpeed.  And maybe .dragSpeed. *scratch scratch*. 

 

Plus, we have only talked about dragging mesh positions.  We will want to drag mesh rotations, too.  Erf.

 

My brain hurts.    I wonder if DK is wiring TNT to the actionManger as we speak.  heh.