Draw images from different folders (after shuffling lists of image paths) - error: "unknown resource"

[AKZ]

URL of experiment:
Sign in · GitLab

Experiment works properly in PsychoPy v2021.1.4 on local machine but not online - need help fixing JS code.

Description of experiment:

• study phase of a long-term memory experiment
• presentation of one image at a time, participants decide if indoor or outdoor
• 6 image sets comprising 192 images each (participants randomly assigned to one set), arranged within 6 different image folders (Set1, Set2,…, Set6)
• the 192 images are arranged in 96 pairs (001a.jpg, 001b.jpg, 002a.jp, 002b.jpg,…)
• Code element (“pickItems”) draws individual lists (of image paths) for each participant
• stimlistA contains paths of all “a” items, stimlistB contains paths of all “b” items
• stimlistA and stimlistB are then zipped to a table, shuffled, and split again, resulting in stimlistA_shuffled (e.g., 023a.jpg, 124a.jpg,…) and stimlistB_shuffled (e.g., 023b.jpg, 124b.jpg,…).
• “enclist” (final, shuffled list at encoding) consists of first 64 item paths of stimlistA_shuffled and paths 65-128 of stimlistB_shuffled:

if (((Setname === 1) && (VPcode < 150000))) {
enclist = [(stimlistA_shuffled.slice(0, 64)) + (stimlistB_shuffled.slice(64, 128))];
} else {
if (((Setname === 1) && (VPcode >= 150000))) {
enclist = [(stimlistB_shuffled.slice(0, 64)) + (stimlistA_shuffled.slice(64, 128))];
} else {…
…

Description of the problem:
error: “unknown resource”; it seems that the whole enclist is called when the image object shall be set - according to firefox browser console:

FATAL unknown | {“origin”:“ImageStim.setImage”,“context”:“when setting the image of ImageStim: image_enc_MST”,“error”:{“origin”:“ServerManager.getResource”,“context”:"when getting the value of resource: allitems/Set2/001a.jpg,allitems/Set2/002a.jpg,allitems/Set2/003a.jpg,allitems/Set2/004a.jpg,allitems/Set2/005a.jpg,…

After printing “enclist” it became clear to me that there has already been a problem with list creation as all paths are between the same two quotation marks - a further issue I could not solve so far:

What I tried so far (and didn´t help):
I replaced enclist by a simple list (stimlistA). This resulted in the following message:

Unfortunately we encountered the following error:

when setting the image of ImageStim: image_enc_MST
when getting the value of resource: allitems/Set5/001a.jpg
unknown resource

Try to run the experiment again. If the error persists, contact the experiment designer.

Does anybody have an idea how I could get the program to draw the actual images?

This would be of great help - many THANKS in advance!

[thomas_pronk]

Hey!

I think PsychoJS doesn’t realize that these stimuli need to be downloaded. In version 2021.1.4 there is a function called downloadResources you could use for that. See this demo for an example of how to use it. Thomas Pronk / demo_font · GitLab

Another way to get more info is looking on the forum for downloading resources “on the fly”

[AKZ]

Thank you so much! Inserting the downloadResources function did the job!

However, this only works for the stimlistA but not enclist. I guess this is a problem Py-JS translation.
The following Py code works (merge two lists, shuffle them “row-wise”/across-columns, split them again into two - now shuffled - lists):

stimlist = list(zip(stimlistA,stimlistB))
shuffle(stimlist)
shuffledstimlist = stimlist
stimlistA_shuffled, stimlistB_shuffled = map(list, zip(*stimlist))

This is what stimlistA looks like for Set1:

stimlistA = [“allitems/Set1/001a.jpg”, …, “allitems/Set1/192a.jpg”]

The actual code includes the Setname variable as there are 6 item sets overall, with c=allitems/Set:

stimlistA = [((c.toString() + Setname.toString()) +“/001a.jpg”),…]

stimlistB is the equivalent with filenames …/001b.jpg.

In order to create JS code analogously to the merge/shuffle/split process above, this is what I tried so far:

stimlist = zip(stimlistA, stimlistB);
shuffle(stimlist);
shuffledstimlist = stimlist;
split(stimlist,1);

Problem 1:
It seems that the zip function does its job but I haven´t come up with a good solution for the split function (which should split a table consisting of two columns and 192 rows into two lists, stimlistA_shuffled and stimlistB_shuffled, containing each 192 items).

Problem 2:
I would then like to create an individual “enclist” (actual list of items that is shown at encoding), which consists of entries 1-64 of stimlistA_shuffled and 65-128 of stimlistB_shuffled (or vice versa, depending on Setname and subject code). This is (one version of) the code I´ve tried but it doesn´t seem to work as the output is one single array (see the screenshot within the post above):

if (((Setname === 1) && (VPcode < 150000))) {
enclist = [[(stimlistA_shuffled.slice(0, 64))] + [(stimlistB_shuffled.slice(64, 128))]];
} else {…

Does anyone have a clue? Any help is greatly appreciated!

[AKZ]

Edit: I moved this here as the topic doesn´t quite fit to the resource error above: Merge lists A and B, shuffle row-wise, then split into shuffled lists A and B

[AKZ]

Hi all,

I am again experiencing a problem with downloadresources …
I inserted the encoding part in the rest of the experiment (consisting of encoding, retention interval, recognition) and now, for some reason, the resources are not found anymore. This is the error message I receive:

As you can see in the upper part of the console, resources should be downloaded …

This is where I inserted the downloadresources routine:

(text object “Please wait a moment…” has no duration input but should stop after image 192b.jpg (last image) has been downloaded:

//This is inserted in the “each frame” tab of the downloadresources_code component:
try {
psychoJS.serverManager.getResource(‘192b.jpg’);
continueRoutine = false;
console.log(“downlres_10_TRUE”);
} catch (e) {}

It indeed proceeds to the encoding_MST routine but only to the first slide where the image should be set. This is where the error occurs.

Here is the link to the experiment:
https://run.pavlovia.org/fapsySRHHD/20210629_mst

Does anyone have an idea?
Many thanks in advance!

[thomas_pronk]

How does your call to downloadResources look like?

[AKZ]

// Initialize components for Routine “downloadresources”
downloadresourcesClock = new util.Clock();
downloadresources_text = new visual.TextStim({
win: psychoJS.window,
name: ‘downloadresources_text’,
text: ‘Einen Moment bitte …’,
font: ‘Open Sans’,
units: undefined,
pos: [0, 0], height: 0.1, wrapWidth: undefined, ori: 0.0,
color: new util.Color(‘black’), opacity: undefined,
depth: 0.0
});

psychoJS.downloadResources([
{name: ‘001a.jpg’, path: ((c.toString() + Setname.toString()) + ‘/001a.jpg’)},
{name: ‘001b.jpg’, path: ((c.toString() + Setname.toString()) + ‘/001b.jpg’)},
[…]
{name: ‘192a.jpg’, path: ((c.toString() + Setname.toString()) + ‘/192a.jpg’)},
{name: ‘192b.jpg’, path: ((c.toString() + Setname.toString()) + ‘/192b.jpg’)}
]);

(In the actual code, […] is replaced by the remaining paths - removed it here for simplification)
Thanks a lot!

[AKZ]

So, I noticed something weird about the download_resources component: this routine seems to be (partly?) skipped when running the experiment.

I now moved this component to the beginning of the experiment (see below). So now, there should appear the download resources text first (“Einen Moment bitte…”), resources should be downloaded within the same routine, and then the next routine with its text “press space” should appear. However, when starting the experiment, the first thing to appear on the screen is “press space” (=text of the second routine).

However, at the same time, according to the console, resources are downloaded:

And “downloadres_10_TRUE” is logged:

… using the following code in the “each frame” tab of the download_resources routine (as you suggested in another post, @thomas_pronk:

try {
psychoJS.serverManager.getResource(‘192b.jpg’);
continueRoutine = false;
console.log(“downlres_10_TRUE”);
} catch (e) {}

Also, the following error messages appear in the console:

FATAL unknown | {“origin”:“ImageStim.setImage”,“context”:“when setting the image of ImageStim: image_enc_MST”,“error”:{“origin”:“ServerManager.getResource”,“context”:“when getting the value of resource: allitems/Set4/152a.jpg”,“error”:“unknown resource”}} log4javascript.min.js:1:40074

Object { origin: “ImageStim.setImage”, context: “when setting the image of ImageStim: image_enc_MST”, error: {…} }
core-2021.1.4.js:1923:12

I uploaded a short version of the experiment here:
https://run.pavlovia.org/fapsySRHHD/downlres_enc_shortversionmst
Any help would be greatly appreciated!

[AKZ]

And further: presenting ANY images of one of these folders doesn´t seem to work, not even when the path is created manually by navigating to the respective folder:

This time the error message is the same but with two backslashes instead of one slash:

This message occurs even in a very reduced version, in which only one single image should be drawn from these folders:

Could it be that the experiment contains too many pictures to be processed and thus, synchronizing/uploading the stimulus folders to Pavlovia doesn´t work? (although synchronization was succesful, according to the Runner output)
The experiment needs 6 item sets (=folders), each including 384 pictures = 2304 files and about 70MB…

Thanks for any hints!

[wakecarter]

As per my crib sheet, you should use / instead of \ in file paths online.

[AKZ]

Thanks, wakecarter! Unfortunately, this is what I´ve done so far, as you can see in this error message:

I just desperately started trying several other possibilities (e.g., backslashes and navigating to the path within the builder - which seems to create backslashes?) after / didn´t work. However, nothing has helped so far…

I guess I´ll start to build up the experiment again from scratch and test it online after every single step.

[wakecarter]

Have you attached the image via Experiment Settings / Online?

[AKZ]

Woohoo, THANK YOU SO MUCH!
That´s indeed what caused the error message, now it works perfectly!