JavaScript access to data files

[Bruce Sherwood]

The module "vpython" includes a JavaScript component for displaying 3D animations in a notebook. The JavaScript code has to read some data files which are jpegs used as textures on 3D objects and font files from which character contours are extracted and used to display extruded 3D text. When connected to the internet these files can be read from copies at Amazon Web Services, but when off-line they need to be read from local disk storage. Both the JavaScript programs and these data files are in nbextensions, in a progam folder and a data folder. 

What I need to do in a JavaScript program is to reference "../data/a.jpeg" or "../data/b.ttf", but this doesn't work, because relative file references are based on "localhost:8888/notebooks/my_notebook_directory" and so the file reference fails, since the place where I store my notebooks is unrelated to the location of nbextensions.

A colleague showed me how to obtain an absolute address, which I could use to reference the data files:

from jupyter_core.paths import jupyter_data_dir

Image(filename=jupyter_data_dir() + "/nbextensions/images.png")

This scheme works for a displaying an image but if I try to read data into a JavaScript program using an absolute address I get a CORS error (Cross-Origin Resource Sharing), and it would seem to be exceptionally challenging to get around this restriction. I tried the experiment of putting the data files next to my own notebooks, and the relative addressing works, but this is not a general solution for the vpython module.

Is there some way to reference data in nbextensions yet not have this count as a cross-reference error? Or can someone think of some other approach that could work? This seems important, because one often needs to be able to work off-line, say on an airplane.

Bruce

[Bruce Sherwood]

My colleague John Coady provided the solution, which is to use a URL in the form "/nbextensions/data/b.tff", where the initial slash is crucial.