How could I send a programmatic button click to a scene?

Questions
1

I would like to send a KeyboardEvent programmatically - basically because of testing.
Playground is
https://www.babylonjs-playground.com/#XZ0TH6#47

I am using

scene.getEngine().getRenderingCanvas().dispatchEvent(new KeyboardEvent('keydown',{'key':'Delete'}));

but it does not seem to work

Does anyone has an idea how to do it?

2

It is built into scene Interact with a Scene - Babylon.js Documentation

3

The page is about listening for events and about "By customizing the following code template you can control reactions within your scene to "

I would like to programmatically send an event to the scene.

4

By default the editor has the focus not the canvas. You need to set the focus onto the canvas https://www.babylonjs-playground.com/#XZ0TH6#48

2 Likes
5

This clicks, but the event on line 26 is not received.

It does not output the actually kbInfo so it means the observer does not receive the event.

Screenshot from 2020-07-24 19-23-00
Screenshot from 2020-07-24 19-23-001591×628 108 KB

6

The focus() call is not in effect yet when the event is sent when doing in sequence: it seems you need to wait for a javascript tick between setting the focus and sending the event:

https://www.babylonjs-playground.com/#XZ0TH6#49

3 Likes
7

Bingo.

It works. Thank you @Evgeni_Popov @JohnK

Screenshot from 2020-07-24 19-31-37
Screenshot from 2020-07-24 19-31-371586×314 42.2 KB

8

Too soon. Too soon. I still can’t get it working in a test and cant reproduce it in the playground. Worst possible situation. Looking at it. I can see it is a problem with the focus because when setting the focus by hand (clicking the canvas) it works. But setting the focus in the code does not set the focus.

9

Ahh, the internet, we build, we love it and we pretty much hate it.

Turns out that you can not call canvas.focus(). You need to have element.tabIndex set to like element.tabIndex="-1" and only then you can set the focus. And I think I don’t need the timeout for the tick

      canvas.tabIndex = -1;
      canvas.focus();
      canvas.dispatchEvent(new KeyboardEvent('keydown',{'key':'Delete'}))
4 Likes