4/5: 3D interactive graphics
Now that we have all of the structures rotated, superimposed, and grouped into a single '.rot' file, we are ready to visualize and manipulate the overlay in an interactive 3D environment. This task is controlled by a Python program over-lay.py, available here, which does the following:
- generates 'bonds' based on covalent radii
- sets the colours for each molecule
- creates an html file for viewing in a browser
- uses JavaScript to control the 3D graphics
- allows creation of high-resolution PNG images
The covalent radii used to configure the 'bonds' are kept in a file named 'covalent-radii.json' in a sub-directory 'static'. Colour codes are stored in the top few lines of over-lay.py, and are based on the 'tab20' colours used by Matplotlib, but rearranged a bit (feel free to alter these to suit your tastes). The 'static' directory also has an html template, a css file for formatting the browser interface, JavaScript to control the 3D viewer and local copies of 3Dmol-min.js and html2canvas.min.js, i.e. these files:
Local copies of 3Dmol-min.js and html2canvas.min.js are used so that the programs can be run when internet access is unavailable. The above links, however, go to their proper repositories. These two files do all the heavy lifting, with 3Dmol-min.js enabling the 3D interactive graphics rendering and html2canvas.min.js controlling high-resolution PNG image generation.
Over-lay.py looks for a file with '.rot' extension in the working directory and proceeds to generate the html file without further input. It should be almost instantaneous. The resulting html file may then be loaded into any modern browser, giving something like this:
If you click on the above image, the 3D viewer should load in a separate page. Your mouse or trackpad rotates the view and zooms in/out. When using a computer, the legend should be draggable (might not work on a phone) and may be made larger or smaller. Likewise, the bonds may be drawn thicker or thinner. When you have a view that suits your purposes, the 'Save' button temporarily hides the column of buttons and saves the scene. The resulting PNG is big enough (~5000 pixels wide) that it can be cropped/re-sized to satisfy most purposes. If you need something bigger, look on line 261 in the 'over-lay.js' file.
That pretty much covers the basics. As time permits, there'll be a few more examples, as mentioned in the previous section.
2: Extract atom coordinates from the CIF(s)
3: Optimal superposition via quaternions
4: 3D interactive graphics
5: Three Sn complexes and their pro-ligand