Important improvements to VPython 7

[Bruce Sherwood]

Update to VPython 7.1.4. Thanks to Matt Craig for building the installers.

 

You can get the latest version this way: pip install vpython --upgrade

Or if using Anaconda, conda update -c vpython vpython

 

1) A long-standing error has been fixed. You can now say “ev = scene.pause()” or “ev = scene.waitfor(....)” and “ev” contains the expected information (e.g. ev.event may have the value “mousedown”).

 

2) Keyboard events now work in VPython 7 when not using a Jupyter notebook. It is hoped that keyboard events will work soon in a Jupyter notebook.

 

3) In label objects and in graph titles (title, xtitle, ytitle) you can now use HTML styled text. You can get the latest version this way:

     pip install vpython --upgrade

     Or if using Anaconda, conda update -c vpython vpython

 

In the documentation for the label object,

 

     http://www.glowscript.org/docs/VPythonDocs/label.html

 

is this description of label text, which also applies to graph titles:

 

You can give a number or numerical expression; it will be converted to a string.You can include the HTML styles for italic (<i> or <em>), bold (<b> or <strong>), superscript (<sup>), or subscript (<sub>). For example, the string
     'The <b>mass <i>M</i></b>_sys = 10³ kg.
displays as
    'The mass M_sys = 10³ kg. 

Multiple lines can be displayed by inserting line breaks (\n), as in "Three\nlines\nof text" and you can insert <br> or <br/> instead of \n. You can also create multiple lines by using triple quotes There is a restriction on graph titles, in that you cannot insert line breaks in xtitles or ytitles.

By default a graph title is left-adjusted above the graph, as has been true in the past. Now you can set title_align to "center" or "right" as well as "left". When you specify "center" the title is centered above the grid.

In addition to this new graph titling capability, there are two other significant improvements. The title (which is at the top of a graph) now is fully bound to the graph. In particular, it stays with the graph when the graph is aligned "right". Secondly, I discovered that the flot graphing machinery was replotting all the titles every time you added data to the graph, which surely affected graph performance. This is no longer the case.

 

Technical note: A graph object is now a 2D canvas in which the graphing grid and data are confined to a subarea of the canvas, with the title, xtitle, and ytitle outside that subarea. In that way, changes to the graph do not affect the titles, which do not have to be replotted.

 

Bruce

 

[Bruce Sherwood]

Recently John Coady posted instructions on how to use VPython 7 with PyPy, which runs much faster than standard Python. Here for convenience are his instructions, modified only to remove a statement about having to modify vpython itself, a step no longer needed because John modified vpython to detect when you're using PyPy, in which case he makes the necessary accommodations:

I was able to install pypy an a linux machine and configure Jupyter Notebook to recognize it as a kernel. With this addition the PyPy kernel appeared in the list of kernels in Jupyter Notebook just like the other kernels like VPython and Python3 etc. Next I was able to open the Gas.ipynb in a Jupyter Notebook and then inside the notebook I switched kernels from VPython to PyPy and found that it ran around 10X faster. The performance of running Gas using PyPy kernel on my machine was similar or better than running GasNumpy or GasNumba using VPython kernel but without having to modify the code in Gas.ipynb,  To install PyPy as a kernel option for Jupyter Notebook follow these instructions.

Step 1: Download PyPy and install pypy on your machine

          https://pypy.org/download.html

Step 2: Add the installed path to pypy on your machine to your PATH environment variable

Step 3: Add pip to PyPy from the terminal window

            pypy -m ensurepip

Step 4: pip install ipykernel to pypy

            pypy -m pip install ipykernel

Step 5:  Add pypy kernel to Jupyter Notebook

            pypy -m ipykernel install --user --name pypy --display-name "Python (PyPy)"

If these steps were successful, then you should see the PyPy kernel as one of the available kernels in the Jupyter Notebook

    jupyter notebook 

then click the "file" button in the notebook and you should see "Python (PyPy)" as a kernel that you can use. Select PyPy to create a PyPy notebook. Then in the cell of the notebook type.

import sys

sys.version

and execute the cell. It should indicate that it is using PyPy.

To run VPython under pypy requires first installing numpy from pypy using the instructions provided

https://pypy.org/download.html

Also  pip install Vpython into PyPy site-packages directory with --no-deps flag.

pypy -m pip install --no-deps vpython

Following these instructions will allow you to run VPython notebooks using the PyPy kernel in the Jupyter Notebook.

John

[Aaron Titus]

I admittedly haven’t tried it. But do you know if the label will accept HTML entities for Greek symbols like:  &Delta; for a capital delta?

Aaron

[Bruce Sherwood]

No, but Unicode is supported. I composed "Ĉu montriĝas <i>Grekaj</i> Δ kaj δ?" in Word and pasted it into the text attribute of a label object, and it displayed correctly, in GlowScript VPython and VPython 7.

Bruce

[TKS]

Is there an update available for VPython so one can use html-entities?

Formatting:

gd = vp.graph(width=600, height=150)
gd.title+="<p style='color:DodgerBlue;'>theta(t)</p>"

Special symbols

xtitle='<i>t</i>', ytitle='<i>theta(t)</i>',  #&thetasym; &#977; #&phi; &#966; &#x3C6;

Injection of JavaScript ... (so I could link to MathJax or others ...)

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>



Tables to organize content, e.g. having two graphs side by side like subplots ...

    

[Bruce Sherwood]

There is a limited html capability for graph titles. From the documentation:

Titles: For title, xtitle, and ytitle you can give a number or numerical expression, which will be converted to a string.You can include the HTML styles for italic (<i> or <em>), bold (<b> or <strong>), superscript (<sup>), or subscript (<sub>). For example, the string

     "The <b>mass <i>M</i></b>_sys = 10³ kg."

displays as

    The mass M_sys = 10³ kg.

Multiple lines in a title can be displayed by inserting line breaks (\n), as in "Three\nlines\nof text" and you can insert <br> or <br/> instead of \n. You cannot use line breaks in xtitle or ytitle. If a title is specified, the height of the graph is increased to provide space for the title.

There are similar capabilities with label objects. From the documentation,

text The texYou can give a number or numerical expression; it will be converted to a string.You can include the HTML styles for italic (<i> or <em>), bold (<b> or <strong>), superscript (<sup>), or subscript (<sub>). For example, the string

     'The <b>mass <i>M</i></b>_sys = 10³ kg.

displays as

    'The mass M_sys = 10³ kg.

Multiple lines can be displayed by inserting line breaks (\n), as in "Three\nlines\nof text" and you can insert <br> or <br/> instead of \n. You can also create multiple lines by using triple quotes:

        L = label()
        L.text = """The quick brown fox
        jumps over the lazy dog."""

If you have a text editor such as Word that facilitates making special characters such as Greek letters, you can paste such text into any text-related VPython element.

You can place html code in a canvas title or caption. From the canvas documentation:

HTML: You can include html directives such as this: <b>This is bold.</b>

You can append more text to the title or caption (you can also use this form initially, as the caption and title start out as zero-length strings):

scene.append_to_title("Now <b>click the box</b>.")
scene.append_to_caption("See the <i>effect?</i>")

There isn't currently a way to invoke JavaScript, though this is possible with GlowScript VPython.

Bruce

[Bruce Sherwood]

From the documentation on graphs:

You can align a graph to the left or right of another graph or a canvas:

align Set to "left" (graph forced to left side of window), "right" (graph forced to right side of window), or "none" (the default alignment). If you want to place a graph to the right of a canvas, set the canvas align attribute to the string "left" and the graph align attribute to the string "right". If the window is too narrow, the object that is on the right will be displayed below the other object. If you want to place a graph to the right of the canvas but keep the canvas caption underneath the canvas, create the graph first with align set to "right" and activate the graph by plotting something in it, then create the canvas without specifying its value of align. Another option is to specify align='left' for all canvases and graphs, in which case they will abut each other.

And from the documentation on canvases:

align Set to "left" (canvas forced to left side of window), "right" (canvas forced to right side of window), or "none" (the default alignment). If you have a single canvas, setting align to "left" causes the canvas caption to be displayed to the right of the canvas. If you want to place a graph to the right of a canvas, set the canvas align attribute to the string "left" and the graph align attribute to the string "right". If the window is too narrow, the object that is on the right will be displayed below the other object. If you want to place a graph to the right of the canvas but keep the canvas caption underneath the canvas, create the graph first with align set to "right" and activate the graph by plotting something in it, then create the canvas without specifying its value of align. Another option is to specify align='left' for all canvases and graphs, in which case they will abut each other.

Bruce

[TKS]

Thanks for the quick reply!

I had to use align="left" for the first an the second graph because I wanted them to be side by side below the pendulum.

TKS