Passing webGL canvas widget click event to jQuery

[dbawel]

Hello,

I get caught up in the most rediculous problems - which should be simple. I have a GUI element (widget) on a webGL canvas using bGUI, and need to click on the widget (object) and pass that event to the jQuery 'click' event. I've tried and studied every method, but I'm obviously mising something. @Nabroski provided the following code which works fine in my scripts now, but I need to avoid appending (creating) a new button to pass the click event to the jQuery event handler. How might I use any object in the following playground scene to pass the 'click' event or a 'pick' event to pass this to the jQuery event handler if an object in the scene below is clicked, and no button is created to "choose file"?

http://www.babylonjs-playground.com/#VNVOU#12

I feel really stupid on this one. So I've tried countless solutions, but nothing but errors on var files = evt.target.files; as I can't manage to pass a 'click' event from my GUI. Not even using: 

alert(event.currentTarget === this);

Thanks,

DB

[Pryme8]

$(e.target).click()

[Wingnut]

Hiya DB.  These two event objects are not the same type.  If it were a KEYPRESS event on the canvas, then the keypress handler code would get a "genuine" event to actionManager executeCodeAction(here).  But mouse picks on mesh... use a "special" event object... not the same type as jQuery/DOM needs.  (as least I THINK this is true).  BJS pick events have a pickInfo object attached, which carries a duffle bag of MESH-pick info.  They are Deltakosh-created event objects.

So, you might think this way.  What would it take to CREATE a jQuery event object... inside code... in an actionManager executeCodeAction function?  Can you "build" an event for jQuery?  Can you "fire it"? 

If so... do that.  Make a bridge.    (not sure if ANY of this is correct, but maybe) 

http://playground.babylonjs.com/?11 Here, a non-actionManager pick is seen... having a standard event object AND a BJS pickResult.  You can check the evt object for things like .ctrlKey, plus check the pickResult for hits on mesh, as shown.  Handy.

[Nabroski]

make a callback,

or intert an css class= <input> to your render canvas element, you just need a file reader all the jquery stuff is probably unnecessary 


http://babylonjs-playground.com/#1VSU96#0

http://babylonjs-playground.com/#1VSU96#2

best

[dbawel]

Thank you for all of the help. @Pryme8 -  I've tried to impliment $(e.target).click() into my code, but am missing something. If you might expand a bit, I've read EVERY post for the past 5 years on every forum, and am still baffled.

@Nabroski - I wish I could simply call a FileReader, but am using jQuery to pass the files to the server. Is there a way to impliment the following into the jQuery click event when the widget is pressed?:

window.addEventListener("click", function (evt) {  

This should be simple, but for some reason this one is really killing me. Perhaps this is what @Wingnut is suggesting?

Thanks,

DB

[Nabroski]

@dbawel

yeah, sure, just use a callback

http://stackoverflow.com/questions/256754/how-to-pass-arguments-to-addeventlistener-listener-function

[RaananW]

Not sure if this is what you mean, but this - http://www.babylonjs-playground.com/#VNVOU#13 will open the file dialog after a click on the canvas.

 

[dbawel]

You guys are awesome. I was missing the logic in the order of operations, and got very close with @Nabroski's post and @RaananW's playground example showed me exactly where my code wasn't passing the event to the file reader/loader. This is the dumbest I've felt in a while, as my pride kept me from creating this thread and wasting time. I'm so glad to be a part of this community, and this topic re-wired how I can interact with jQuery.

Thanks to you all,

DB