Deletion of the selected input box using a delete button which is created in the scene

Questions
1

I am trying to delete the selected input box using a delete button which is created in the scene. I figured out that removeControl is required for removing something from the scene but how to do it for the selected gui, I am not able to figure out. I am new to babylon.js and finding it hard to achieve it.

2

Hi @Megha_Sen and welcome to the forum. To help us help you it would be very useful for you to provide a playground showing the GUI you want to create even it doesn’t fully work.

1 Like
3

Hello there and welcome to Babylon community. I work on our upcoming GUI editor and just love everything GUI so I made little demo showcasing what I think you’re looking for:
https://playground.babylonjs.com/#UWS0TS#172

Let me explain a little bit how it works :smiley:

You are correct advancedTexture.removeControl(input) will remove the GUI control from the scene but let’s go over how we got to calling that.

First thing I did was have some onPointerEnterObservable, onPointerOutObservable , onPointerUpObservable. These will trigger when we are over, not over, and clicked on the input GUI respectivly. Once we clicked on a GUI, we highlight it to kind of give the UX of it being “selected”.

Next we have a canvas.addEventListener(“pointerdown”) which will be when we click anywhere else on the canvas. This will unselect the GUI control when we click unless we are already over a GUI control. (aka we want to click the GUI control instead)

Lastly we have the canvas.addEventListener(‘keydown’) which will handle using the “Delete” key. If we hit that and we have the GUI control selected, we delete it! In the demo I used the input GUI control, but you can replace it with any control you’d like and the process will be exactly the same.

Fun fact this demo is very similar to how we delete GUIs in the GUI Editor :wink:
Let me know if you have any questions about this or anything GUI related.

1 Like
4

@msDestiny14 Your solution have helped me achieve the task. Thank you for your help. :slightly_smiling_face:

2 Likes