how to fix the position of canvas and graph in vpython?

Question

Before I say it, Sorry for my poor English. I'm making an orbit simulation with vpython, because the earth science teacher asked me to.

The link below is the result of my work so far.

https://glowscript.org/#/user/sungho2574/folder/MyPrograms/program/2

Unfortunately, I can't watch the simulation and the graphs simultaneously, so I want to put two graphs side by side and put them right under the canvas. Also, I want to put "setting" next to the 3d canvas.

I tried various ways, but nothing worked.

And I found this vpython 6 link. https://vpython.org/contents/new_features.html

In this link, I could find the GUI image that canvas and setting are located side by side. But I also failed to work with it.

1. Can I put canvas or whatever freely in vpython 7?

2. Or in vpython 6?

Answer 1

VPython 6 ended many years ago. VPython 7 exists, but has the same syntax and capabilities as the Web VPython you are using at glowscript.org. From the documentation on canvases at

https://www.glowscript.org/docs/VPythonDocs/canvas.html

is this information on aligning canvases (and graphs):

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.

Here is an example (make the window wide): https://www.glowscript.org/#/user/GlowScriptDemos/folder/Examples/program/HardSphereGas-VPython