Variable component not defined in JS code

Online experiments
1

Hi,

I have a variable component (imList) declared at the beginning of the routine, the start value is set to obtain some image names in my condition file, split by “,”, see below -

variable
variable677×530 34.1 KB

It runs fine locally with PsychoPy without any problem. However, when I convert this experiment online, it seems that this variable component is not initialized in the JS code, and has the error below -
error

I was wondering why the variable component is not declared in the auto-generated and what’s the proper way to resolve this issue.

Thanks much!

2

Variable components don’t auto translate to JS. You need to use a code component.

3

Yes, that seems to work. Thanks @wakecarter

Yet another question I have is how to plot multiple images at the same time -
I have a template image component called imageSample. Locally, I copy the image component 60 times:

for i in range(60):
    images.append(copy.copy(imageSample))

And then plot the 60 images simultaneously in each frame:

for i in range(60):
    images[i].image = imList[i]
    images[i].draw()

This works perfectly when running with PsychoPy.
With PsychoJS, I’m not sure I copied the images in the right way, but I changed append to push:

images = [];
for (var i = 0; i<60; i++) {
    images.push(imageSample);
    images[i].image = imList[i];
}

And under each frame, I tried to plot all 60 images by:

for (var i = 0; i<60;i++) {
    images[i].setAutoDraw(true);
}

This, however, only plots one image, instead of 60, so I guess there must be something wrong.
There’s no error though.
Any thought?

Thanks.

4

I’m not familiar with this method.

This shouldn’t be used in Builder.

I’ve used Python code like the following to present multiple images.


for Idx in range (9):
    bars.append(visual.ImageStim(
    win=win,
    name='ladder', 
    image='ladder.png', ori=0, pos=[pointsz[Idx]*scale*dtarget/2,(Idx-4)*scale+voffset], size=[scale*dtarget*28.72,scale*dtarget],
    color=white, colorSpace='rgb', opacity=1,
    flipHoriz=False, flipVert=False,
    texRes=128, interpolate=True)
    )
5

Ok. How did you present multiple images in the browser with the sample code you included? Did you use auto translation?

6

Yes, plus code_JS as per my crib sheet.

I used AutoiDraw to turn images on and off again

1 Like
7

Still no luck for me.

I have th code_JS declared at the beginning of experiment, and have the code below to create 60 image stims:

for (var i = 0; i<60; i++) {
    images.push(new visual.ImageStim({
    win : psychoJS.window,
    name : 'image', units : 'pix', 
    image : imList[i], mask : undefined,
    ori : 0, pos : [objectCoord[0][i], objectCoord[1][i]], size : 1.0,
    color : new util.Color([1, 1, 1]), opacity : 1,
    flipHoriz : false, flipVert : false,
    texRes : 128, interpolate : true, depth : -1.0 
  }));
}

I checked my image file and position coordinate, both should be ok. Then using setAutoDraw(true) to present them:

for (var i = 0; i<60;i++) {
    images[i].setAutoDraw(true);
}

There’s nothing on the screen.

8

Please forgive my stupid mistake, as I set the image size to 1 pixel…

1 Like