0

There is a nice tutorial on WebGL at this link:

http://learningwebgl.com/blog/?p=571

and I am using this example as my starting point for this question:

http://learningwebgl.com/lessons/lesson06/index.html

So it runs nicely on my browser. I copied the source and required libaries:

 - glMatrix.html
 - webgl-utils.js

on my pc. Now I can run them again on my browser nicely.

In the source html, these libaries are referred to as external libraries like this:

<script type="text/javascript" src=".\glMatrix.js"></script>
<script type="text/javascript" src=".\webgl-utils.js"></script>

They are located in the same directory as my source html, namely, kvBox.html.

Now I want to run this html within from the notebook cell. I enter:

from IPython.core.display import HTML

def putHTML():

    source = open("kvBox.html", "rb").read().decode()
    return HTML(source)


putHTML()

Same screen is there, without the box and the canvas. No error messages on the output line on the notebook.

When I look at the Notebook Server console I see these errors:

[I 21:56:51.077 NotebookApp] 302 GET /notebooks/.%5CglMatrix.js?_=1454010913066
(::1) 15.64ms
[I 21:56:51.077 NotebookApp] Refusing to serve hidden file, via 404 Error
[W 21:56:51.077 NotebookApp] 404 GET /files/.%5CglMatrix.js (::1) 0.00ms referer
=http://localhost:8888/notebooks/Untitled4.ipynb?kernel_name=python3
[I 21:56:51.093 NotebookApp] 302 GET /notebooks/.%5Cwebgl-utils.js?_=14540109130
67 (::1) 0.00ms
[I 21:56:51.093 NotebookApp] Refusing to serve hidden file, via 404 Error
[W 21:56:51.093 NotebookApp] 404 GET /files/.%5Cwebgl-utils.js (::1) 0.00ms refe
rer=http://localhost:8888/notebooks/Untitled4.ipynb?kernel_name=python3

I have googled and looked throgh SO for including external libraries to notebook. Mostly I found noteook extensions given at github. I need a solution for my own additions.

The nearest question was this item:

How to add external javascript file in Ipython notebook

So I tried to use %%html commands for the above mentioned external libraries. No erro on the output line, but same refusal error on the console.

EDIT:

After reading and trying so many different suggestions which have not worked, I had a workaround. I wrote a simple include routine myself. I merge the library code into my source html, in the "source" string above, and everything works fine.

Community
  • 1
  • 1
user2800464
  • 113
  • 3
  • 11
  • I do not know how external JS libs are included, but I added the code by brute force into the html doc as as normla internal javascript, and it works fine. – user2800464 Feb 02 '16 at 08:57

2 Answers2

0

The path separator character in a URL is / not \. See the documentation.

Your browser appears to be performing error recovery while IPython is not.

Hence you are getting 404 errors for /files/.%5CglMatrix.js (%5C is a URL encoded \) instead of 200 OKs for /files/glMatrix.js.

Use the correct URL.

Community
  • 1
  • 1
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • I must have tried all possible combinations with absolute or relative paths, with backslash or forward slash, with a preeceding dot or not, or without a skas at all, but I will go back and gşve it a try since I will need it in the long run for several others. – user2800464 Feb 04 '16 at 11:47
  • I tried again with forward slash. Now I get: "mat4 not found" error on the Notebook output cell. mat4 lives in glMatrix.js. On the jupyter console I get "302 GET/NOTEBOOKS/glMAtrix.js?_=..." error. I checked nbextensions dir, my notebook starting dir; the lbs are there. I tried again redefining extensions via: "notebook.nbextensions.install_nbextension(path = "C:/...". Same 302 /GET and mat4 not found error. – user2800464 Feb 07 '16 at 03:41
  • I think I found the error, which is related with backslash; but not in my code - in the handler code. – user2800464 Feb 09 '16 at 10:52
0

I think I found the root cause of the error. As Quentin indicated, it has to do with the backslash character. But not in my code. It is in the handler code. I am not sure whether it is on the Tornado side, or the Notebook side, but in the handler code where it gathers the path info, the os.path.join command creates backslashes; normal for python, but not good for Javascript.

Here is piece of trace I had created on my original Tornado application:

WARNING:tornado.access:404 GET /img%5Cbaseball.jpg (127.0.0.1) 0.00ms
handler_path:  ./images\BouncingBallDemo\baseball.jpg
app_path:  ./images\baseball.jpg
img_src:  /img\baseball.jpg

Upon replacing backslashes with forward slashes, my code worked OK on my Tornado application. I believe something similar is happening on my original notebook problem. I am not sure if I myself will be able to have a workaround, I will check.

user2800464
  • 113
  • 3
  • 11