New to VPython, trying to show <img>-tag in generated notebook

[Ties W]

Hey there,

I'm relatively new to VPython, and it seems the documentation is very scarce, especially when it comes to stylizing the notebook (webpage) that is generated on run, and so I'm not sure if what I'm trying to accomplish is at all possible. As part of my code, the following snippet appears (but does not work):

scene.append_to_caption("<img src='" + PATH + "' />");

It should display an image, but it turns out the image cannot be located. Even when specifying an absolute path it appears that 'localhost:xxxxxx' is appended before the actual link (despite it not being part of the PATH variable). In short: how can I display a local image in the HTML page generated by VPython?

Kind regards,

Ties W

[Bruce Sherwood]

The documentation on textures at http://www.glowscript.org/docs/VPythonDocs/textures.html is relevant (see below). The following program works when airplane.jpg is in the same folder as the notebook. I don't know the Jupyter rules for specifying a more general path, though I have the impression that absolute local paths don't work. Perhaps someone in this forum can address that point.

from vpython import *

box()

scene.append_to_caption("<img src='airplane.jpg'/>");

VPython 7 and textures: If you are using VPython 7 you can use a texture on your own computer. The texture file must be in the same directory as your program file (in which case you would specify texture='T.jpg'), or in a subdirectory of that directory (for example, texture=images/'T.jpg').

If you want your texture to be available to programs stored in different places, look at 

    ...../ Lib/site-packages/vpython/vpython_data

There you will find the standard textures that are installed with VPython. Place a copy of your texture in this folder. In your VPython program, the following statement will display a box with your texture on it: 

box(texture='/nbextensions/vpython_data/T.jpg')

If you use "Share this program" in the GlowScript editor and copy code to a page on your own web site, you can fetch an image to use as a texture from the same web site, even if your web site isn't CORS-enabled.

Bruce

[Ties W]

First of all, thanks for your quick response. Sadly however, it does not seem to work for me. Indeed, absolute and relative paths get 'localhost:xxxxx' prepended, and so they do not point to a valid file on my computer. A MWE to show what I mean:

from vpython import *

if __name__ == "__main__":

    scene = canvas()

    scene.title = "Title"

    scene.append_to_caption("""

        <img src='test.png' />

        <img src='https://www.python.org/static/opengraph-icon-200x200.png' />

    """)

    box(pos=vec(0,0,0), size=vec(1,1,1))

    

    while True:

        pass

In this case, I do not get the test.png shown, but the absolute path to an online file does seem to work.

[Bruce Sherwood]

There's a confound here. The following program displays nothing:

from vpython import *

box()

while True:

     pass

The problem is that this "empty" while loop hangs up the CPU in such a way that nothing can be sent to the browser to display the box. If you do end with a while loop (which is unnecessary in a Jupyter notebook), do it this way:

while True:

    rate(1) # permit rendering to take place

So there are two puzzles. Assuming that test.png is in the same folder as your program (which you should check one more time), it's hard to understand why your program wouldn't work, though nothing would appear (not even the box) if you have an empty while loop. The second puxzle is that you are able to get an image from the web, but that shouldn't work in the presence of the empty while loop.

What platform are you using? Linux, Mac, Windows? Is this in the Anaconda environment?

Bruce

[Ties W]

Again, thanks for the response. I'm not using any special environment; I'm simply running the script straight from console on a Windows 10 machine. Using VPython 7.4.2 and Python 3.5.3. I changed the code to contain rate(1), but there is no real visual change: the former code rendered the same scene. Also finally, yes, I'm absolutely sure the test.png is in the same directory. The only real way I can describe where I suspect something is awry is through the following screen capture: hovering over the link reveals a different URL than what is shown in the HTML file. Namely, as I said before: the exact same link, but with localhost:xxxxx prepended.

Kind regards,

Ties

[Bruce Sherwood]

Ah. Because you used the word "notebook" in your original post, I assumed you were working in a Jupyter notebook. Now that I know that you're running from a terminal I'm able to reproduce the problem when running outside the Jupyter notebook environment (IDLE, Spyder, terminal). I don't immediately see what the solution is, but it's helpful that you noticed the prepended localhost issue.

Bruce

[Bruce Sherwood]

Here's a stopgap way to make it work. Place your image file in Lib\site-packages\vpython\vpython_data instead of in the folder where your .py program is stored. This also has the advantage of making the image file available to all of your programs on your machine. Do not use spaces in the image file name (this limitation will be lifted the next time there's a release).

What remains to be done is to figure out how to search in the folder where your program is stored.

Bruce

[bash...@ncsu.edu]

Fixed in next release of VPython 7 (7.4.3). It will first look for a jpeg in the directory where the .py program is (or, with suitable prefixes, in subfolders of that directory) and, if not found, will then look in Lib/site-packages/vpython/vpython_data. In the latter case, the jpeg will be accessible from any .py file on your computer.

If you don't want to wait for 7.4.3, replace Lib/site-packages/vpython/no_notebook.py with this file:

https://github.com/BruceSherwood/vpython-jupyter/blob/master/vpython/no_notebook.py

Again, thanks much for reporting the bug.

Bruce