Double click for an event (rather than pointerdown)

Questions
1

Hi everyone,

I’m trying to implement an event that triggers when you click a gui button. Here is my code below which is currently only in HTML:

scene.onPointerDown = function(evt, pickResult) {
if (pickResult.hit) {
console.log("pickResult.hit: " + pickResult.pickedMesh.name);
if (meshContent[pickResult.pickedMesh.name]) {
console.log(“In the list”); // YES! Our mesh is in the list (ground is not there)

How can I change PointerDown to be doubletap or similar so that you have to double click the mouse for the button trigger the event. I’ve seen the playground below but I struggle implementing this into my code with my knowledge:

Another playground with double tap functions

2

For info GUI events are seperate to Scene events

This topic might help you

3

Hi, Yes, I also had a look at this page too. So how would I change my code to incorporate this functionality? bearing in mind I’m not the best coder, do I swap OnPointerDown with something in here? or am I way off the mark (code below from that link you shared):

//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;
}
4

You do not use onpointerdown just the onpointerclickobservable

5

This is my immediate thoughts based on the above for the new code but I did mention I’m not a coder and my knowledge is pretty basic :stuck_out_tongue:

button.onPointerClickObservable.add(() => {
handleSingleDoubleClick();
});

scene.onPointerClickObserbable = function(evt, pickResult) {
if (pickResult.hit) {
console.log("pickResult.hit: " + pickResult.pickedMesh.name);
if (meshContent[pickResult.pickedMesh.name]) {
console.log(“In the list”); // YES! Our mesh is in the list (ground is not there)

I’m not sure it’s as easy as plugging that line in as I’m only looking to validate the click if it was a double click. Any chance you could give me a steer with the code? I can see if I can add a playground I used.

This is a playground I created with the onpointerdown. the text box appears when you single click on the building. I’ve tried the above and can’t get it to work as I don’t have a button but rather 100’s of different buildings in my main file all with different names.

6

Sorry but you are not very clear about what you want; you talk about clicks on buttons but only have meshes?

Get one thing working for you at a time.

This button will only work with a double click. Put what you want to happen on a double click inside the doubleClickAction function.

7

Hi,

You’re right I probably wasn’t too clear. I have buildings / mesh’s in my playground/website and I want to be able to double click them, rather than single click them for the pop-up / text box to appear. As per my playground, it’s relatively similar to my website version, however, in the website a pop-up window appears. If someone could help me understand how the double click works in the playground I shared when clicking on the mesh, that would really help me implement it on to my website.

Regards,

James

1 Like
8

So if you are talking about meshes the you use

scene.onPointerObservable

Out of the pointerEventTypes you only need

BABYLON.PointerEventTypes.POINTERDOUBLETAP
9

ok thank you. How would I use that in practice for my code in the playground for this part:

scene.onPointerDown = function(evt, pickResult)

Would it become

scene.onPointerObservable = function(evt, pickResult) But then I’m not sure how to use the Pointerdouble tap in the code

10

See the pointerdown type in this example Babylon.js Playground

and do something similiar

11

I can’t get it to work for mine unfortunately - I just don’t have the knowledge to substitute the code and keep it working:

12

i cleaned your code a bit, it works as expected:

Test fresh fruits highlight | Babylon.js Playground (babylonjs.com)

there were parts of your code that were throwing exceptions, so you would want to take care of them.

13

Thanks Raananw. The text box doesn’t appear to be showing up if I double click however. If you check the first playground I shared, it appears on a single click of the building/mesh. The code is quite old and I’ve improved it on other playgrounds :slight_smile:

14

the playground I showed does nothing except for logging a doulbe-tap. Do whatever needed in this callback, and you are good to go :slight_smile:

15

So that’s the part I struggle with. I’m trying to get that text box that shows when you single click as shown in this https://playground.babylonjs.com/#9Z476P#136

to appear with your revised code instead when you double click:

https://playground.babylonjs.com/#9Z476P#140 but I’m not sure how it goes into that

16

Test fresh fruits highlight | Babylon.js Playground (babylonjs.com)

1 Like
17

Thank you that works great :slight_smile: Just one final thing, and you will hate me for this no doubt, the code is slightly different in HTML :sweat_smile: I thought it would be an easy transfer over but there’s differences in the approach to the code I think.

I’ve added a html file here Dropbox - popup html26linkstext3.html - Simplify your life (the buildings are in the space but might be hard to see).

 scene.onPointerDown = function(evt, pickResult) {
            if (pickResult.hit) {
                console.log("pickResult.hit: " + pickResult.pickedMesh.name);
                if (meshContent[pickResult.pickedMesh.name]) {
                    console.log("In the list"); // YES! Our mesh is in the list (ground is not there)
                    
                    toggleModal(); // If there was no modal before, it will be shown; it there was modal already, it will be invisible

                    console.log("Mesh: " + pickResult.pickedMesh.name + "; Content: " + meshContent[pickResult.pickedMesh.name]);

                       document.getElementById("modal-iframe").innerHTML = "<iframe src=\"https://"+meshContent[pickResult.pickedMesh.name] + "\" title=\"Modal\"frameborder=\"0\" style=\"overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:40px;left:0px;right:0px;bottom:0px\" height=\"100%\" width=\"100%\"></iframe>"

                 
                }
            }
        }
18

you shouldn’t use scene.onPointerDown to detect double clicks… you should use the observable, just like in the demo.

I don’t know where this HTML is from, but you can simply download the playground and use it, if you need an HTML page.

Otherwise, I trust you to fix your code and make it work :slight_smile: The playground is no magic, it’s just running a script in an HTML page.

1 Like
19

It’s for my website, I’ve got a larger city model and currently that code works to load popup window upon single clicking a building. The only thing is, with 600 buildings in my main scene, single clicks are easy to do and pop ups appear all over the place :slight_smile:

That HTML is my main code and the playgrounds I just use for different elements of testing. I’ll see if I can get my head around transferring the playground code into how it currently works HTML. There’s a difference in naming conventions which is confusing me.

20

Suggest you read the following to see how the playground and HTML fit together.