Double click on gui button

Is it possible to capture double click event on gui button since I have came across only poirupen pointerdown pointerclick and pointermove events only.

There is no direct implementation that I am aware of, but you could implement your own “double-click-checker” function like this:

   // GUI
    var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
    var button = BABYLON.GUI.Button.CreateSimpleButton("myButton", "Click me");
    button.width = 0.2;
    button.height = "40px";
    button.color = "white";
    button.background = "green";

    //add PointerClickObservable to distinquish between single and double click
    button.onPointerClickObservable.add(() => {
        handleSingleDoubleClick();
    });

    advancedTexture.addControl(button);

    //simple vanilla js double click implementation taken from
    //https://stackoverflow.com/questions/5497073/how-to-differentiate-single-click-event-and-double-click-event
    var count = 0;
    function handleSingleDoubleClick() {
        if (!count) setTimeout(TimerFcn, 400); // 400 ms click delay
        count += 1;
    }

    function TimerFcn() {
        if (count > 1) console.log('you double clicked!')
        else console.log('you single clicked')
        count = 0;
    }

Here is a demo in the playground, needs some modification/customization, but maybe it gives you a point to start with :grinning_face_with_smiling_eyes:

https://playground.babylonjs.com/#XCPP9Y#8636

1 Like

Adding @msDestiny14 to maybe check if we can add dblClick?

For some reason I could have sworn we either had double click or maybe I told someone how to do it once in a forum post. :thinking:

How @wulf11 did it is exactly how I would have implemented it myself. Regardless I’m totally down to get it added in when I get a free moment :slight_smile: Would probably need some way to modify how fast the double click would have to be.

1 Like

glad my solution seems to work ! :grinning_face_with_smiling_eyes:

guess you mean this post: