TL;DR: Images are not added to psychoJS.start when I try to assign the urls dynamically. How should I create the PsychoPy experiment to have correct compilation to JS code?
I have a working python experiment. It is very simple. I define some image paths. Depending on the current trial, I take one of those paths and assign it to a variable. That variable is then used as the image path.
# Begin Experiment
images = ["sad0.png", "sad1.png", "sad2.png", "sad3.png", "sad4.png"];
imageIndex = 0;
# Begin Routine
urlBase = 'C:\\Users\\user\\Desktop\\'
imageUrl = urlBase + images[imageIndex] # this variable is assigned to the image stimuli
ImageIndex = imageIndex + 1
So far that’s all working. Next, I want to actually run this online and I set the JS code component as such:
// Begin Routine
urlBase = "path/to/images/online/";
imageUrl = (urlBase + images[imageIndex]);
imageStim.setImage(imageUrl)
imageIndex = (imageIndex + 1);
However, Then I compile the builder to JS code and try to run it, which this leads to a problem. Specifically, it leads to an “unknown resource” error during the experiment, specifically when an image is (tried to be) presented.
Taking a peek into the psychojs-2021.2.3.js file I can see the following:
setImage(image) {
.... // some skipped things
if (typeof image == "string" && (image = this.psychoJS.serverManager.getResource(image)),
!(image instanceof HTMLImageElement))
throw "the argument: " + image.toString() + ' is not an image" }';
.... // some skipped things
So, the image variable being passed along (which is the imageUrl in this case) is used to getResources. However, there are no resources to get. They should have been created by a call to prepareResources, which was skipped since psychoJS.start was executed with an empty list for resources.
psychoJS.start({
expName: expName,
expInfo: expInfo,
resources: [
]
});
The above happens when I assign $imageUrl to the image stimuli within the builder. If instead I assign constant path as the image url , and then compile to JS I can see that the resources are actually added at the psychoJS.start call:
psychoJS.start({
expName: expName,
expInfo: expInfo,
resources: [
{'name': '../happy0.png', 'path': '../happy0.png'}
]
});
This implies that I could just manually add the resources here manually. I tried and indeed this makes it work online. However, how can I get the code to be correctly exported in the first place?
