how can I run HTML5 doc with WebGL canvas on IPython notebook

Question

There is a nice tutorial on WebGL at this link:

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.

I do not know how external JS libs are included, but I added the code by brute force into the html doc as <script> JS </script> as normla internal javascript, and it works fine. — user2800464
– user2800464, Commented Feb 2, 2016 at 8:57

Community · Accepted Answer · 2021-10-07 13:35:05Z

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.

edited Oct 7, 2021 at 13:35

CommunityBot

11 silver badge

answered Feb 2, 2016 at 8:55

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2800464 Over a year ago

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 Over a year ago

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 Over a year ago

I think I found the error, which is related with backslash; but not in my code - in the handler code.

user2800464 · Accepted Answer · 2016-02-09 10:51:00Z

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.

Collectives™ on Stack Overflow

how can I run HTML5 doc with WebGL canvas on IPython notebook

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related