handle events from outside the canvas?

[Ghostdog]

hello,

I would like to steer/control objects in my scene from buttons that are not inside the HTML canvas object that owns the babylon engine.

This should be

a ) standard button from ionic framework 

or

b ) other canvas objects elements

layered before the babylon canvas.

 

How I manage events if pressing "buttons" from outside and bring these events to an action trigger of Babylon?

 

Thanks & with best regards,

Stefan

 

(just started with Babylon and XDK)

[Wingnut]

Hi @[email protected], welcome to the Babylon.js forum.

   This is quite easy, and there are many ways to do it.  The canvas is a HTML element, yes?  So, it is a part of a webpage, just like the button.  All events, canvas, button, document, window... keypresses, pointerDown, pointerUp... they are all browser-generated.  So, all of Javascript and HTML... can "see" these events (ionic, babylon scene, everything).  They bubble and cascade to nearly everything.  This is why there are many ways to do this.

Babylon.js has a "playground", and we love it.  It is a place to show things (often easier than "telling" things).  First, we'll do basic event work.

Let's go look at a playground demo...

http://www.babylonjs-playground.com/#16MOW9#4

This is not an ActionManager thing.  We will talk about actionManager clicks/triggers a bit later.  But those are easy, too. 

Lines 33-46  Here I make a html button... positioned "absolute" which means it uses CSS style "top" and "left" settings, and is not "flowed into" the other html.  It gives you FULL positioning power.

Line 48  Here I place the button into the html document... inside the body part.

Lines 50-53  Here is where I add the eventListener to our new button.  Notice it "looks-up" the button... using the button's .id, which was set in line 34.  The function part... moves the boxes sideways... no big deal.  Try clicking the button a few times.

Works ok, right?  (I hope so) 

Lines 55-59 is an interesting thing.  What this does... is remove the old button... every time you hit RUN in the playground.  If I did not do that, there would soon be many buttons stacked atop each other.  A new button would be added each time you hit the RUN button in the playground.  We want to remove all old buttons when the scene is disposed.  Wise to clean-up. 

As you can see, the button is not upon the canvas, or within it.  It is simply an html-based button.  Feel free to make changes, hit RUN, SAVE, Get Zip, anything.  You cannot damage anything in the playground.  Each time you SAVE a playground, you are given a new URL.  You can copy/paste that URL to the forum... and talk with us about your playground... and we can answer questions about it, or help you easy. 

Anytime you have problems with Babylon.JS... it is good to create a playground demo... that shows the problem.  You will get quick answers... when you create playgrounds that help us "see" the problem.

Do you have all the "good" links?  Docs, playground, playground search, forum search, BJS source github?  Now you do.  Good luck.  Welcome again.  Stay in touch. 

[Ghostdog]

Hi Wingnut,

wow - this is wonderfull

I can manipulate the hole hole DOM direct within / from my babylon js code section. As you mentioned  .. no big deal .. but what a great one!! 

Thank you 

[Wingnut]

Good to hear.  I made a mistake in the playground. 

Line 43... "18pt verdana bold" not working so well.

Use this instead... http://www.babylonjs-playground.com/#16MOW9#5

See line 43/44.  After repair, I needed to make the button wider in line 38, too.

Perhaps I should have created a "button" in line 33.  Maybe that would be better than "span"... and perhaps still can be nicely styled.  Back in the old days... html <button> sucked... it was ugly ugly ugly.  But these days... might be better.  *shrug* 

Let's try button.  http://www.babylonjs-playground.com/#16MOW9#7

Notice I was able to remove line 47.  Also, no more text highlighting with fast clicks.  This works better.

You can also do "read-outs" with html.

http://www.babylonjs-playground.com/#10P0IP#0

Here, I viewed the raw html for the playground and learned that the render canvas... was a child of a div whose id="canvasZone".  I set THAT as my container in line 6, and then in lines 205-220, I appended all my "crap" into the canvasZone container.  Lots of dynamic html in THAT playground , eh?  Sometimes I get crazy. 

[dbawel]

Of course, @Wingnut nailed it. However, I would seriously watch the following video on using jQuery if you want to expand upon this. It's a bit dated, but completely relevant. This goes beyond jQuery and shows how to take control of the DOM as well. There are other tutorials which are helpful, but I found this the most comprehensive for me personally.

 

Cheers,

DB

[dbawel]

@[email protected] -  I know this isn't wholly relevant to your question, but are you familiar with literals? Also, have you built any projects relying on "use  strict"; ? Only ask as I believe stongly in both methods, and rarely find examples of these on the forum.

DB