Reply To: hide cursor and select by pointing

[Jeremy]

Hi Peiyao,

Apologies for the late reply, I was away from the office last week.

1) The only way to hide the cursor is to change the cursor CSS property to use a custom empty image. Keep in mind that hiding the cursor (and directly manipulating the mouse in any way more generally) is considered a security threat.

2) There is no type of PennController element, as of now, that easily lets you detect mouse hovering, so you’ll have to use javascript

Here is a trial whose behavior gets pretty close to what you describe:

PennController.ResetPrefix(null) // Shorten command names (keep this line here)

newTrial(
    newButton("Start")
        .print("center at 50vw", "middle at 50vh")
        .wait()
        .remove()
    ,
    newCanvas('left', 200,200).css('background','red').print("center at 25vw", "middle at 50vh"),
    newCanvas('right', 200,200).css('background','green').print("center at 75vw", "middle at 50vh")
    ,
    newFunction( ()=>{
        $("body").css({
            width: '100vw',
            height: '100vh',
            cursor: 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="), auto'
        });
        setTimeout(()=>$("body").bind('mousemove', ()=>$('body').css('cursor','unset')),1000);
    }).call()
    ,
    newVar("choice", 'none').log()
    ,
    newFunction( ()=>new Promise(r=>$(".PennController-left, .PennController-right").bind('mouseenter',
        e=>getVar("choice").set( e.target.className.replace(/^.*(left|right).*$/,"$1") )._runPromises().then(r)
    )) ).call()
)

You’ll notice the two Function elements: the first one replaces the cursor with a custom inline (empty) image for the whole page’s body (while making it occupy 100% of the space on the page) and also listens for any movement so it can restore the cursor. Some caveat about cursor and mouse movements: it appears the cursor property is only updated if the mouse moves, so you actually want the mouse to move immediately after the button is clicked. This will happen naturally with an external mouse, but maybe not with a trackpad. But also because of that, you want to add a delay before mouse movements will restore the cursor, which is why I added a setTimeout of 1000ms.

The second Function element tells the script to listen to mouse movements that land on either the element named left or the element named right (the two Canvases) and set the value of the choice Var element to “left” or “right” (looking up the element’s class name and deleting everything that’s not it). Because the call command on the Function element is asynchronous, I embedded all that into a Promise that’s only resolved when the mouse lands on left or right, which has the consequence of waiting until that event before reaching the end of the script (and therefore validating the trial).

Let me know if you need assistance adapting this to your case

Jeremy