Verifying timing of dynamically changing images

Hi all,

I’m dynamically changing the image of an image component after a set period of time in an online study. I’ve managed to make it run, but I’m wondering if there’s a way to verify the timing of when the changed stimulus hits the screen.

Different threads on here suggest that while precise timing measurements are not possible, some decent approximations are possible, and I’d like to verify if what I’m doing is somewhat okay.

This is my “each frame” tab, and the JS side is auto-translated:

Importantly, I get a timestamp from trialClock.getTime() after I specify the new image from a list of images. I know the timestamps are not measuring at the “proper” spot, but is it good enough to verify things were roughly correct?

When I do print out allTimeStamps, I get an array with values like this:

All timestamps are ~1/60ms apart, with the first frame ~2/60. This pattern is extremely reliable on my computer. I would be happy to hear if anybody knows how to remove that initial frame skip.

Of course I’m aware that I could just use a movie component, but because 1. pngs support transparency and 2. there is (in theory, possibly) some way of measuring the onset of each individual frame with images, I prefer using images if the timings will be close to what my current timestamps suggest.

Another separate, less important issue is that even though I think setting the image to undefined in JS should result in no visible image and no error (When setting ImageStim.image=None don't crash but don't draw · Issue #61 · psychopy/psychojs · GitHub), it returns an error for me complaining that the “image is undefined”. So, instead, in my code you can see that I set opacity to 0 (and bring it back to 1 at the end of the routine).

I’m very grateful for any thoughts!