Change dynamically cursor over canvas

[Samuel Girardin]

Hi, 

It's not really specific to babylonjs. I try to change the cursor dynamically from my js. Just want to get the crosshair cursor over the canvas sometimes and revert to the default one...

I try several things, with no success. I can have crosshair all time (if in my css I use cursor:"crosshair", but *I can 't revert it.

If you look at this playground http://playground.babylonjs.com/#1BFYHY#1  , you will see the cursor change for 1ms when you enter very slowly in the canvas..

Any idea ? 

Thanks !

[Dad72]

Did you try with jQuery. For me it works like this:

$("canvas#canvas").on("mouseover",function() {          $(this).css('cursor', 'url(Data/Images/hand01.png), auto'); }).mouseout(function(){        $(this).css('cursor', 'auto');});

[Samuel Girardin]

No, in fact I never use JQuery ... I don't know what it is !  Shame on me ! I m sure we can do that with js! 

[Dad72]

You should try jQuery. it is very powerful and very simple. It takes little code to do big thing with jQuery.

[Samuel Girardin]

I give a try with jquery, with no success, still searching for a full js solution...

[Kemal UÇAR]

On 25.10.2014 at 4:46 PM, Dad72 said:

$("canvas#canvas").on("mouseover",function() {          $(this).css('cursor', 'url(Data/Images/hand01.png), auto'); }).mouseout(function(){        $(this).css('cursor', 'auto');});

Hi Dad72 ;

im very new with Jquery , just downloaded for that

how to add or define a mesh for jquery selector ? in Babylon

example please

Thank you

[Dad72]

Can you specify what you want to do? Jquery working side html / DOM and not webGL.

[Kemal UÇAR]

Hi Dad72 ;

for example 

i hv a mesh in scene ( mesh name "sphere1" )

i want change cursor image with jquery , if mouseover on sphere1

i must define sphere1 a jquery selector right ?

where to write sphere1 in your code

$("canvas#canvas").on("mouseover",function() {          $(this).css('cursor', 'url(Data/Images/hand01.png), auto'); }).mouseout(function(){        $(this).css('cursor', 'auto');});

or how to define before this code for understanding jquery ( mesh name sphere1 ) ???

in this PG http://www.babylonjs-playground.com/#21YCLG#5

changing cursor with action manager trigger and scene.hoverCursor method 

i want do this with jquery just that.

 

i hope i can define

sorry for my bad English

 

[Dad72]

You can not do it with jQuery. selecting or hover the sphere being in the 3d world and not html.

You must do with the scene.hoverCursor as you have done on the PG.

[Kemal UÇAR]

Thanks for your answering Dad72 

hv nice time

[Wingnut]

Hey @Dad72 or anyone...  I am working with this playground - http://babylonjs-playground.com/#OWCCR#16  (Careful - heavy playground, GC-wise)

Now I learn about scene.hoverCursor.  Nice feature.

I need to change to "pointer" when mouse-over a clickable shape2d.  Not sure how I do that.

In the above PG, I cannot get "pointer" to activate anywhere... not over renderCanvas or over screen-space canvas2D shapes.

Can you/anyone help?  Have ideas?  Thanks!

[Dad72]

hi,

I do not know about Canvas3D if it manages "picked". 
scene.hoverCursor was made for "action" of Babylon 'which is why it should not work in your case.

[aWeirdo]

@Wingnut

First of all, something is messing with the canvas cursor, forcing it back to default after a very brief flash of the pointer..

so i used the body tag instead, to override it.

Also note that it is pretty buggy..

canvas2d have some pointer issues that are yet to be sorted.

like when leaving the parent canvas2d object, neither PointerOut nor PointerLeave is fired,

so if you leave the parent object while hovering a child, the cursor doesn't return to default.

but other than that it works okay..

This have now been fixed.

http://babylonjs-playground.com/#OWCCR#23

[Wingnut]

Thx guys!  If .hoverCursor is for actions, I wonder why on Scene.  Should it be actionManager.hoverCursor?  *shrug*   Perhaps not.  I need to study this more.

[Dad72]

This is because the hovercursor is defined in scene. certain thing in action are common to the scene class

[dbawel]

Is anyone else receiving a Compilation Error in the following PG scene @Wingnut provided? I receive the same error in the previous version of this PG scene as well.

http://babylonjs-playground.com/#OWCCR#23

I receive Compilation errors quite often in the playground, but cannot find ANYTHING consistant in any of the scenes when I recieve an error - perhaps there's something wrong with my graphics drivers or hardware? Since I often read comments about scenes which I personally cannot load and receive a Compilation Error, I'm now more concerned than ever. I'm running Windows 10 on and Asus laptop, and I have Auto Update for Windows enabled, and I'm up to date on my OS, Bios, and drivers - at least I'm almost certain this is the case. The specific error is:

Line 11:36 - Cannot read property 'CACHESTRATEGY_DONTCACHE' of undefined

and line 11 reads:

 cachingStrategy: BABYLON.Canvas2D.CACHESTRATEGY_DONTCACHE,

It's simply a variable definition, and the extension and property must exist in the PG environment if others can load the scene - as I expect I'm running the exact same environment as it's the default babylon.js Playground. I don't have ANY other issues with applications and my system never faults or dumps - so if anyone has any thoughts as to why the scene appears to run for other users and fails on my system in Chrome, please let me know. The only other error I receive for this scene is in the console, and this appears before babylon.js is confirmed as loaded as seen below - so whatever causes the following console error doesn't appear to stop loading assets:

Duplicate definition of module 'vs/languages/javascript/javascript'     loader.js:formatted:562

e.defineModule @ loader.js:formatted:562     

babylon.js:3 BJS - [20:49:17]: Babylon.js engine (v2.5.-beta) launched

And the above error is unique to the PG scene above. I appriciate any help troubleshooting this issue as this occurs allot when I search the PG and try to load existing scenes. But almost never when it's a current topic on the forum. Also, if anyone else receives the same error, please let me know.

Thank you,

DB

[Wingnut]

Thx DAD72, but I don't agree with that thinking.  I think a different pointer should be allowed on different actionManagers.  For example, one mesh might be clickable (hand-finger pointer), another might be dragable (grab pointer), another might be shootable (cross hairs).  Each pointerOver should allow a different type of pointer... all in a single scene.  Do you agree that many types of pointers should be allowed in a single scene?  *shrug*  (thx)  That might not be possible, though.  Perhaps using a prim2D/shape2D for pointers... will be possible, or IS possible.  I have much to learn.

@dbawel, sorry to hear you are having error problems.  Maybe we should start a new thread for that.

I get SOME errors, but rarely the type that you describe, and not in this playground.  In this one, I get...

Error: WebGL: drawArrays: Drawing to a destination rect smaller than the viewport rect. (This warning will only be given once)babylon.js:6:228
SecurityError: Failed to load worker script at "http://yoda.blob.core.windows.net/monaco/vs/base/worker/workerMain.js?service1"(unknown)
SecurityError: Failed to load worker script at "http://yoda.blob.core.windows.net/monaco/vs/base/worker/workerMain.js?service2"(unknown)

But those are common for me... happens all the time in FF and IE... started about 5 months ago.  It causes my PG intellisense to fail in both browsers. (sucks) 

I also get some "exceeded 16 webGL contexts... using the last one created" -warnings, too.

DB, do you clear your browser cache occasionally?  Otherwise, the PG will sometimes use old versions of BJS found in the browser cache.

I HAVE had the "Duplicate definition" errors SOMETIMES... but not in the above PG.  There ARE "breaking changes" that have happened... thru our history.  One was the "not enough params in createCylinder" error... it screwed up quite a few playgrounds.  It usually reports Compilation Error:  e is undefined.  Errors like that are almost ALWAYS not enough params/args.  I always look for a createCylinder that doesn't have a vertical-subdivs parameter... when I see that error.

In general, there are, indeed, a few broken playgrounds, but plenty are working, too.  Sorry to hear about your problems, DB.  Clear your browser cache... often.  Failing to clear the browser cache... has "got me"... oh... at least 6 times in my BJS history.  Maybe more.  I think Deltakosh actually nicknamed me "That guy who forgets to clear his browser cache". 

Do you have other browsers available besides chrome?  Seeing the same errors on multiple browsers? 

I wouldn't worry too much about the drivers and other deep stuff.  We have not seen many situations where "deep stuff" causes PG errors... as far as I know.

ISSUE REMAINS!  (Might be worth another thread, though).  But, let's all help DB fig what's happening.

[Kemal UÇAR]

Helloi All ;

aWeirdo  right ;

scene hover not workin in 2d canvas

body.style.cursor  workin like this

http://babylonjs-playground.com/#OWCCR#24

Thanks

[dbawel]

Ok... wierd. I took the drastic measure of un-installing Chrome and re-installing (still same current version), and now the scenes work fine. I decided to take this action after I began to have carriage return problems when editing text here on the forum - so I knew this was a more serious issue with my Chrome browser and install.

I've never experienced this before, as my browser is updated regularly; but something was incorrect in the Chrome application - I just wish I knew what it was. I'll take a look at my registry, and wish I'd looked before I initiated the re-install process, as perhaps this may have held a clue. But @Wingnut - thanks for trying to help, and I'll let you know if I discover anything more. However, I doubt it and expect it will remain a mystery.

Cheers,

DB

[GameMonetize]

Ping @Nockawa

 

[Nockawa]

On 10/15/2016 at 11:42 PM, aWeirdo said:

@Wingnut

First of all, something is messing with the canvas cursor, forcing it back to default after a very brief flash of the pointer..

so i used the body tag instead, to override it.

Also note that it is pretty buggy..

canvas2d have some pointer issues that are yet to be sorted.

like when leaving the parent canvas2d object, neither PointerOut nor PointerLeave is fired,

so if you leave the parent object while hovering a child, the cursor doesn't return to default.

but other than that it works okay..

http://babylonjs-playground.com/#OWCCR#23

I'm "discovering" this thread, so I read and answer as I read it.

There was a regression concerning PointerOut/Leave/Enter/In but I believe it's fixed now, so can you retest and confirm with your test case? thanks.

 

[Nockawa]

On 10/16/2016 at 1:33 PM, KemalUCAR said:

Helloi All ;

aWeirdo  right ;

scene hover not workin in 2d canvas

body.style.cursor  workin like this

http://babylonjs-playground.com/#OWCCR#24

Thanks

There's now a Canvas2D.overPrim property which gives you the property under the cursor, if you put an observer on the propertyChanged observable of the Canvas2D, you'll be notified about these changes. I don't know if the PG is updated with this code, as some of you may have recently noticed, we are in the middle of splitting Canvas2D/GUI from the main babylon.js file.

[aWeirdo]

Hi  @Nockawa

it doesn't appear to have been fixed in this specific case, (or the PG version of babylon just hasn't updated yet)

you can see it in this PG: http://babylonjs-playground.com/#OWCCR#23

At the canvas2d object at lower left corner, wait for a shape to "overflow", it should "cut" off by the edge of the canvas2d object, hiding the "overflow".

hover the shape -> cursor changes to pointer -> move the cursor out of canvas2d area(without moving the mouse out of the shape, while inside canvas2d) -> cursor is still pointer, but it should have been reset to default by PointerLeave or PointerOut, whichever function is supposed to fire.

I hope it makes sense, i would take a screenshot but it doesn't show the cursor^^

tested it with the latest versions of chrome, edge & opera 

[Kemal UÇAR]

Thank you Nockawa for canvas2d very good job , I m learning to use  

[Nockawa]

3 minutes ago, aWeirdo said:

Hi  @Nockawa

it doesn't appear to have been fixed in this specific case,

you can see it in this PG: http://babylonjs-playground.com/#OWCCR#23

At the canvas2d object at lower left corner, wait for a shape to "overflow", it should "cut" off by the edge of the canvas2d object, hiding the "overflow".

hover the shape -> cursor changes to pointer -> move the cursor out of canvas2d area(without moving the mouse out of the shape, while inside canvas2d) -> cursor is still pointer, but it should have been reset to default by PointerLeave or PointerOut, whichever function is supposed to fire.

I hope it makes sense, i would take a screenshot but it doesn't show the cursor^^

Let's say it took me couple of minutes to understand but I got it!

Ok, in this case the "real" issue is something I find out many weeks ago I apparently didn't fixed (or it got broken again), I support correctly the case where the pointer is going out of the canvas (I was talking about going in/out of primitives above) and looks like I don't clip the part of the primitive that is out of the canvas for interaction.

This two issues shouldn't be long to fix, I have few minutes right now, let's go for it!