detectPointerOnOpaqueOnly for gui image only buttons

Questions
1

uh, so I looked at the doc and saw img.detectPointerOnOpaqueOnly = true is possible on the image class. Any chance the CreateImageOnlyButton can also use this ? I tried

var button = BABYLON.GUI.Button.CreateImageOnlyButton("but", "textures/grass.png");
button.image.detectPointerOnOpaqueOnly = true;

but it didn’t work. Asking cos I have custom made image buttons that are non-square and want to avoid misclicks happening when user mouseover the transparent parts of the button, especially at the corners.

2

Hey!

Do you mind reproducing the issue on the playground?

1 Like
3

oops, my bad! There you go: https://www.babylonjs-playground.com/#XCPP9Y#1217

Place the mouse just outside the blue button area, say botttom left corner and click, the button will trigger.

4

Ok I understand. It is expected as the Buttons are handling the hit testing based only on their bouding info.

I’ve added a new property for you:

button.delegatePickingToChildren = true;
   button.children[0].detectPointerOnOpaqueOnly = true;

This way the button will let internal controls handle hit testing :slight_smile: It will be in the next nightly

2 Likes
5

erm, I just tested it the new code and observed 1 phenomenon. When I move the mouse into the opaque area, the shadow triggers on the image. But when I move out of the opaque area, the shadow overlay remains on the image until I move out of the button’s bounding area completely. Seems like delegatePickingToChildren is working for mouseover only and not mouse moving out?

https://www.babylonjs-playground.com/#XCPP9Y#1218

6

My bad! I will fix that for next nightly

1 Like
7

Tested, works ! Thank you !

edit: a quick question. I know pngs work with the bjs gui. But what about svg? I have a svg icon sheet and when gui loads a particular icon with children[0].sourceLeft/sourceTop, the alignments are off but when I export said svg to png, it works fine. wai ?

8

svg can contains offsets but if they are at 0,0 they should work directly

1 Like
9

Then what I’m seeing is really weird.

repro: https://www.babylonjs-playground.com/#XCPP9Y#1221

comment the src at line 21 to toggle between png and svg. You may have to expand the canvas a little cos the orange block is being overlapped. To put it simply, the png is a direct export of the svg. I can’t find the reason why svg gives alignment problems while the png doesn’t. :thinking:

Any ideas?

10

this seems linked to the svg still

I definitely see an offset in the file:
image

1 Like
11

removed the transform attr from the xml, still no dice :frowning:

pg with updated svg file: https://www.babylonjs-playground.com/#XCPP9Y#1225

I’m thinking unit discrepancies in the svg but can’t pin down the problem. Finding it weird that the squares don’t seem to have any alignment issues but the rects do, hmm…

12

Figured it out. image stretch needs to be set to UNIFORM. Looks like bjs gui can support svg fully. I am now a happy dev ! Tyvm @Deltakosh !

Leaving it here for future devs who run into the same problem. Cheers ! :slight_smile:

13

That makes me happy!

1 Like
14

ugh, found something weird. Repro: https://www.babylonjs-playground.com/#XCPP9Y#1510

Move the cursor from rightmost of PG to left, there is a deadzone when the pointer moves from the 200px to 300px button and the 300px button does not respond. Highlighted as the red box in below pic

deadzone1

15

yep there is a bug in here…Let me dig into that :slight_smile:

16

Ok will be fixed with next nightly!

Thanks for reporting it!

1 Like