Can't access resources downloaded manually with psychoJS._serverManager.downloadResources()

Online experiments
,
1

URL of experiment: Sign in · GitLab

Description of the problem:
Note if you’re trying to look at my code on pavlovia, I’ve preserved a version of it that gives me the following errors in the branch “discourseResourceProblem”. I’m going to continue trying to solve the problem and working on other aspects of the code.

I’m designing an experiment to run on Pavlovia that needs to download a random subset of the resources. The stimulus set I’m using contains 4000+ images but each experimental session requires only around 300 images. I am trying, unsuccessfully, to achieve this via the following steps: 1) specifying in psychoJS.start() to only download the image list; 2) selecting a random subset of images in that list and downloading them via psychoJS._serverManager.downloadResources().

I can see that the images are being succesfully downloaded by opening the Devtools in Chrome. Note that I wait until all of them (~100 at this point) are downloaded before I advance to the point where a resource will be needed. However, when it’s time to actually use one of the images, I’m getting the following error:

Unfortunately we encountered the following error:

  • when setting the image of ImageStim: target_to_memorize
  • when getting the value of resource: allStim/BallsFrisbees/golfball_1.png
  • unknown resource

I have tried to debug this problem in a few ways.

  1. Not giving giving psychoJS.start() a resource argument, thus causing all images to be downloaded at the loading screen (see below function call; note right now I don’t have the full 4000 image set in the resources folder). The experiment runs totally fine and I never get unknown resource errors. This is not feasible for my experimental design but shows, to me, that there is something fundamentally different between automatic download of all resources and manual download of select resources.
    psychoJS.start({ expName: expName, expInfo: expInfo });

  2. Changing the path property of the resource object array that is passed to psychoJS._serverManager.downloadResources() (Array.<{name: string, path: string}>). I’m assuming that the value of name property, in the above example, should just be “golfball_1.png”. But i’m not sure whether the the value of the path property should be prepended by “resources/” or whether it should only specify the file path after “resources/”, e.g. 'allStim/BallsFrisbees/golfball_1.png". It would be really helpful to me if someone could show me the proper formatting for the resource object array and the values of the name and path. Note that when I don’t prepend the file path with “resources/” the resources don’t even download.

  3. I’ve checked the filepaths specified in my file list. On gitlab, the image pulls up if I copy and paste the filepath used to download my images into the URL when I’m looking at the html folder (e.g. paste “resources/allStim/BallsFrisbees/golfball_1.png” after "Sign in · GitLab). In the version of the code described in point #1 (e.g. download all resources on the loading screen), I get an error if I try to access “resources/allStim/BallsFrisbees/golfball_1.png” rather than “allStim/BallsFrisbees/golfball_1.png”. This leads me to believe prepending “resources/” is necessary when downloading the images but prepending “resoucres/” is not necessary when accessing them.

I think it’s most likely I’m making an error with psychoJS._serverManager.downloadResources() or in how I’m trying to access what has already been downloaded.

Is there a way that I can see a list of the resources that have been downloaded and reference that, rather than reference file list I used to download the resources? If not, how do I access them once they’ve been downloaded manually? I’ve tried to dig through the different scopes in Devtools but I could not find anything resembling an array of resources.
-Mark

2

I tracked down the problem via excruciating stepping in Devtools. this.resources is a map that, when I manually downloaded my resources, uses name as the key and an object containing path and the image as its value. So, when I needed to access the image, I had to call target_to_memorize.setImage("golfball_1.png") not target_to_memorize.setImage("allStim/BallsFrisbees/golfball_1.png").

I found the clue in core-2020.1.js line 132

const path_data = this.getResource(name) {
		const response = { origin: 'ServerManager.getResource', context: 'when getting the value of resource: ' + name };
		const path_data = this._resources.get(name);
		if (typeof path_data === 'undefined')
			throw Object.assign(response, { error: 'unknown resource' });
		return path_data.data;

When the resources are downloaded automatically (e.g. no resource property in psychoJS.start()), the key is the filepath (“allStim/BallsFrisbees/golfball_1.png”) and the path property of the value is the URL ( console.log(path_data.path) = "https://pavlovia.org/run/marklavelle13/hybriddmemattempt1-1//html//resources//allStim/BallsFrisbees/frisbee_14.png" in the above scope).

I hope this helps someone easily overcome a hurdle in manually downloading and accessing their resources!

4 Likes