Show/hide cover by creating it in advance and manipulate opacity?

[tpronk]

Heya, @RebeccaHirst further developed my PsychoPy/PsychoJS demo, and now I'm further developing that again. Got a little suggestion that might benefit the way the cover is set up...

I noticed that in the reference Gorilla implementation, the cover DIV is created on the first trial, and manipulated via show/hide (i.e. setting the CSS property display to none or block). This can be a bit laggy (see this excellent paper ;) and this one)

Got two suggestions (which are implemented in an updated PsychoJS demo):

1. Create the DIV in advance
2. Show/hide it by manipulating opacity

To ensure that clicks on the cover are still bubbled to any HTML elements below it, set this CSS property: pointer-events: none;.

[u01ai11]

I think that's a good idea, thanks. I'll change the demo.

We do it the way in the Gorilla example because the paradigm we are using doesn't require millisecond timing -- the effects of approach avoidance are on the scale of seconds.

In general, this is something that we intentionally leave up to the user or for experiment platform to implement in their own way. This is because we want the tool to be as flexible as possible!

The overlay method is only really necessary because of the screenshot generation lag. Ideally this won't be necessary when you can implement BOTH a gaussian blur and cutout using SVG filters (which wouldn't require the screenshot).

[tpronk]

Indeed, those callbacks gave me the option to apply this opacity trick in the first place; love how the flexibility sparks a possible enhancement! :). My guess is that in certain circumstances, drawing the DIV on the first trial can take a frame or two, so on the first trial the stimuli might briefly be visible. Not basing this on experience with MouseView though, only on tests I ran with other software in the times that we could still enter the office.