Error in a loop of images in online version only

Online experiments
1

I’m running an incredibly simple experiment in which I loop through a set of images whose filenames are given in a .xlsx file, and the subject responds with the left vs. right arrow key. This experiment runs fine through Python. When I try to export to run on Pavlovia, though, the experiment works for a while, and then throws the following error:

{ “origin” : “MinimalStim.setAutoDraw”, “context” : “when setting the autoDraw attribute of stimulus: my.imageright”, “error” : “the PIXI representation of the stimulus is unavailable” }

(where “imageright” is the variable name of an image from the builder).

Has anyone run across this error before? This is my first “zero google search results” error.

2

Did you find a solution to this error?

I’ve encountered exactly the same problem:

{“origin”:“MinimalStim.setAutoDraw”,“context”:“when setting the autoDraw attribute of stimulus: image1”,“error”:“the PIXI representation of the stimulus is unavailable”}

The experiment begins correctly, shows an instruction screen with only text, but when progressing to the next screen which displays some images, this error occurs immediately.

3

HI @amr, can you let us know which version of PsychoPy you are using?

4

Hey, thanks for the reply, this is on 3.0.0b9

5

Ok I am unable to recreate the error. I am using the most up-to-date PsychoPy 3. I set up a simple experiment that presents an image using the image component. Image filenames (e.g., red.png) were stored in an .xlsx conditions file in a column called ‘stim’. The conditions file was passed to the loop handler. $stim was the variable name for the image stimuli in the image component that was set to change on every repeat. Do you see anything that differs from how you produced your experiment?

6

Thanks for looking into it. I think the problem was rooted in the fact that the experiment was originally created in 1.90.2.

I quickly recreated a basic version of it from scratch in 3.0.0b9 and, while it’s a bit buggy, the images at least now display.

7

Great. What sort of bugs are you experiencing?

8

I’ve nailed the problem down.

My task involves some images that can be clicked on to select and then another location can be clicked and the image will change location (like drag and drop but without the dragging - I’d used drag and drop but found it a little laggy sometimes).

This requires the basic properties in the builder for each image, in the line that reads “Image”, to point to the image, e.g. “image1.png”, and for the drop down box to be set to “set every frame”.

It is the setting in the drop down box that causes the problem, if it is set to constant, the images display both locally on PsychoPy and online through Pavlovia, but the images are not movable. If it is set to “set every frame”, when run on PsychPy locally, the images display and can be clicked and moved, but online, the PIXI error above occurs as soon as that routine begins.

9

Ok, yes that is how components tend to work. Setting to “Every repeat” will update the variable on every trial, whereas “Each Frame” will allow the variable to be updated on every frame, if required. http://www.psychopy.org/builder/components.html#how-often-to-evaluate-the-variable-code

10

I’d really like to use the PsychoJS export to HTML functionality to run this online, but is updating the images each frame (as is necessary for this experiment) currently incompatible with this? At the moment it always generates the PIXI error.

11

Do the images really need to change on every frame? From what you describe, isn’t it just the location that needs to vary dynamically?

12

That setting just ensures that the images are automatically redrawn in the new location if they are moved. If it is not set, then then even if an image’s location technically changes, it will not appear so to the user because the image is not drawn again in the new location.

The experiment works perfectly in normal PsychoPy, it’s just when I try to run it online after converting to Javascript that there is this error.

13

That indicates something is going deeply wrong: it is absolutely standard behaviour for a stimulus to be redrawn on every frame on which it is set to be visible. It certainly shouldn’t need to have its source image file re-imported: that in itself will lead to many problems.

i.e. updating the image file for a stimulus on every frame (even when you’re re-loading the same image file) is highly likely to lead to performance issues, as that is an operation that often can’t be completed within a single refresh period. Very rapid alteration of image files requires that the stimuli be pre-generated and cached for the time time-critical presentation period. This isn’t something that is done for routine stimulus operations, like just updating its position.

14

Ah OK, interesting, thank you. I’d made an assumption about that setting based on the behaviour I’d observed in this experiment that was wrong.

Leaving the Javascript version to one side for the moment, I’ve found that in PsychoPy the experiment simply doesn’t work if the images aren’t all set to update every frame (the images just don’t move). I’m using some simple additional code to select an image by mouse click and then to set a new location for the image with a second mouse click. When set to update the images every frame the experiment behaves as intended and the timings are acceptable - the important data in this case is the final spatial arrangement of the images.

What I would really like to do though, is to convert this experiment to run online using PsychoJS. So if some change can be made to how image updates are handled that preserves the outwardly appearing current behaviour, but means that it works in the Javascript version, that would be amazing.

15

I suspect there is a conflict introduced by that custom code, which is interfering with the normal drawing cycle. We’d need to see it to make a better diagnosis.

16

You were correct! Thank you very much for prompting me to look into this. I think the way I previously had it running was introducing a delay as a side effect, which made the code I wrote work correctly and prevented an image from being picked up and then set down again in the same mouse click. I’ve made changes to this which result in the experiment working fine in PsychoPy, but when I export to HTML and run via Pavlovia, the experiment now displays the images, but none can be clicked and moved in the intended way.

The clicking and dropping is now restricted using frame numbers, is this incompatible with PsychoJS?

For reference, I set up some variables with default values on the ‘Begin Routine’ tab:

stimuli = [image1, image2, image3, image4]
clicked = 0
clickedStimulus = -1
pickupFrame = -1
dropOffFrame = -1

and then have this code on the ‘Each Frame’ tab:

if clicked == 0 and dropOffFrame < frameN - 8:
    for i, stimulus in enumerate(stimuli):
        if mouse.isPressedIn(stimulus):
            clicked = 1
            clickedStimulus = stimulus
            stimulus.opacity = 0.5
            dropOffFrame = -1
            pickupFrame = frameN
            break


if clicked == 1 and pickupFrame < frameN - 8:
     if mouse.getPressed().count(1):
        clickedStimulus.setPos(mouse.getPos())
        clickedStimulus.opacity = 1
        clicked = 0
        clickedStimulus = -1
        pickupFrame = -1
        dropOffFrame = frameN
17

Glad you have gotten things sorted, in Python at least. I don’t know enough about the current state of PsychoJS to know if there is a limitation there on this sort of dynamic interaction. Perhaps @dvbridges or @jon could comment?

But to help, you should explain exactly what you mean by this:

Do you mean they can’t be moved at all, or they move in some unexpected fashion?

18

Sure @Michael, I have some code which can switch the position of an image if it is clicked. The image position will need resetting at the beginning of each routine. Is a code component with the JS code view:

//Begin Routine

image.setPos([0, 0]) // original position - note, position must be set in square brackets

// Every Frame

for (let blockName in mouse.clicked_image) {
    if (mouse.clicked_image[blockName] == image.image) {
        image.setPos([.5, 0]);  // Shift position if mouse clicks image
    }
}
1 Like
19

@Michael, I should have been clearer, what I meant to say was that the images all display, but none of them move at all.

@dvbridges, thanks for this code, but I can’t seem to get it to work. I’ve set up a new experiment with a single routine that contains only single ‘image’, ‘mouse’ and ‘code’ objects. It runs, but the image just remains static. Is there anything obvious that I might be missing here? If I can get this to work in the simplest case, I’m sure I can adapt it to my needs at a later point.

Two warnings are visible in Chrome DevTools, but as far as I can see these only relate to the lack of an image mask in the present case.

log4javascript.min.js:148 WARN ImageStim.setMask visual-3.0.0b9.js 221 | setting the mask of ImageStim: image with argument: undefined.
log4javascript.min.js:148 WARN ImageStim._setAttribute util-3.0.0b9.js 771 | setting the value of attribute: mask in PsychObject: image as: undefined
20

Ok this works for me, using an image defined using a conditions file. The image is called ‘image’, and mouse called ‘mouse’. Would you show me your JS code from your simple example?