CH5M3D: an HTML5 program for creating 3D molecular structures
© Earley; licensee Chemistry Central Ltd. 2013
Received: 2 September 2013
Accepted: 25 October 2013
Published: 18 November 2013
KeywordsVisualization Molecular editor HTML5 3D Molecular graphics
Interactive programs that accurately represent the 3-dimensional structure of molecules are an important tool for modern chemistry. While displaying the structure of biological systems such as proteins is one of the more obvious applications, representation of smaller molecules is also important, particularly in education. To give just a few recent examples, computer graphics has been used by students to visualize the stereochemical nature of molecules , crystal structures have been used to illustrate aromatic properties , and a web-based tutorial has been developed for understanding pericyclic reactions . A review of approximately 30 apps for visualizing molecular structures on mobile devices was recently published .
In 2012, it was noted by the authors of the Avogadro program  that “the field of molecular graphics is dominated by viewers with little or no editing capabilities” . While Avogadro certainly does much to rectify this situation, our interest is in providing a web-based tool for students to view and modify small molecules. While students can certainly download and install Avogadro or another stand-alone program to create 3-dimensional structures, most of these students will not be consistently using this type of program for an extended period of time. For this reason, a free or low cost, web-based program was sought that would be usable on a range of platforms. There appears to be very few freely-available web-based programs that provide the ability to interactively view and edit molecular structures.
Given the fact that Java applets require a separate download, we were most interested in applications using HTML5. In addition to Molecular Calculator, a couple of programs are currently available that use HTML5 to interactively view 3-dimensional structures of molecules. The authors of the JSMol library have created an HTML5 page  illustrating some of the capabilities of this library, including the ability to use WebGL. CanvasMol  is a demonstration site showing some of the capabilities of HTML5. Fred Ackers  has published code combining HTML5 with WebGL to produce a 3D Molecular Viewer. One of the most well-developed HTML5 molecular graphics programs is ChemDoodle , which has web components for drawing of two-dimensional structures and viewing of three-dimensional structures. With the exception of Molecular Calculator, these programs do not offer the ability to edit/build 3D molecular structures.
While not all web browsers currently support HTML5, freely-available web browsers that do support this are available on all major platforms, including most mobile devices. While support for touch screen devices was not a primary design consideration, this program has been tested and works with some limitations on a variety of mobile devices. More complete support is planned to be included in future versions.
Library development and mouse behavior
Atomic coordinates can be read from files in the XYZ format. This format is described on the OpenBabel website . Every attempt was made to be as flexible as possible in reading these files, and spacing/column alignment is not crucial. Note that this format does not include any bond connectivity information. Upon successful reading of atomic coordinates, interatomic distances for all pairs of atoms are calculated, and if this distance is less than 1.2 times the sum of the covalent radii for these atoms, a bond is created. No attempt is made to determine the bond order in the current version of this library. If this capability is added in future versions, it will be necessary to add the ability to read and write files in a format that includes connectivity information. Preliminary support for reading MDL’s MOL format (which includes bonding information) is implemented in this library.
The HTML5 Canvas is used to display “ball-and-stick” structures of molecules with the size of atoms based on their covalent radii. It is assumed that atomic spheres do not overlap. Because the canvas element is two-dimensional, atoms are sorted by depth and drawn from back-to-front. To draw a molecule, the backmost atom is drawn using the “arc” element and filled using radial gradients to give the illusion of depth for each sphere. Colors for all elements are the same as those used in the Jmol  program. Bonds are drawn from this sphere to all connected atoms in front of this atom as lines originating from the point of intersection of the surface of the sphere and the bond for the back atom and terminating at the atomic center for the front atom. This process is then repeated until all atoms and bonds in the compound have been drawn.
This library was designed to be used with small molecules, and very few attempts were made to optimize this program for speed. No limits are placed on the array dimensions in this library, so the number of atoms that can be displayed is technically only limited by available memory. While structures containing a few thousand atoms can easily be viewed, it takes a noticeable amount of time to display large structures, and interacting with compounds of this size (rotations, etc.) is too slow to be practical. Because display and editing of large molecules is not necessary for the primary intended audience, it was not considered worthwhile to include WebGL in the initial release of this library. Implementation of WebGL would enable hardware-acceleration and allow larger molecules to be visualized, and it is possible that this will be added in future versions of this library. One simple technique has been implemented to optimize the display of larger molecules. Implementation of radial gradients is computationally expensive. For this reason, atoms are drawn without gradients in molecules containing over 250 atoms.
User interaction with molecules is accomplished using the mouse or related pointing device. Event listeners are set up for common mouse and touch events (mouse down, mouse up, mouse move, and mouse wheel). The action resulting from triggering of these events depends on the currently active 'mode’. It was decided early in development to define separate “View” and “Draw” modes. In View mode, the molecule cannot be changed, so mouse behavior is limited to rotation of the entire molecule or selecting atoms to provide information. Rotations around the x- and y-axes are performed by dragging the mouse pointer, starting on a blank portion the active canvas. Simultaneously pressing the [Shift] key allows rotation around the z-axis, while pressing the [Ctrl] key allows translations in the xy-plane. Rotation angles are based on the amount of horizontal and vertical movement of the mouse, with new molecular coordinates calculated based on standard matrix transformations. Selecting an atom provides information about this atom (elemental symbol and position in molecular coordinate list by default). If additional atoms are selected, bond lengths, angle, and dihedral angles can be viewed. Selecting an atom while pressing the [Shift] key toggles highlighting of the selected atom.
To aid in selecting elements, a function is called during initialization that looks for a division within the web page with an id of 'ptable’. If this division is found, this function will write the HTML code necessary to create a periodic table with each elemental symbol defined as a button that makes the appropriate call to the pickElem() function when selected. By default, only main group elements are shown initially, but a full periodic table is also available to allow any element to be selected, which allows building of both organic and inorganic structures.
If the active element is hydrogen, a different procedure is used. Selecting any atom will attempt to add a single hydrogen atom to this atom at a bond distance determined by the covalent radii and in a position intended to minimize interactions with other bonded atoms. Because no other atoms are moved, the result of this action is often not ideal. A very crude geometry optimization routine has been implemented, but this code is not optimized and is being actively developed to improve its speed and performance. This optimization is not a true molecular mechanics optimization, but simply optimizes bond lengths based on covalent radii, bond angles based on simple VSEPR theory, and minimizes torsional stress by changing dihedral angles.
In Draw mode, rotation of the entire molecule can be performed by “dragging” the pointer starting from a blank portion of the drawing canvas. Rotation about the z-axis is accomplished by holding the [Shift] key down during the rotation. Rotation of fragments about bonds is also possible as long as the selected bond is not part of a ring. Bonds can be added by holding the mouse pointer down on one atom and dragging the pointer to a second atom. If mistakes are made, an “Undo” function is available. This has been implemented as a simple stack, so a limited number of both “Undo” and “Redo” operations (currently 10) are possible.
To change the mouse behavior to delete atoms or bonds, a call is made to the pickElem function with a parameter of 'Delete’ or 'DelBond’. When deleting atoms, attached hydrogen atoms are also removed. To return back to the add atoms/bonds mode, pickElem is called with the desired elemental symbol.
Multiple molecules can be displayed on the same web page, and there is no hard-coded limit to the number of windows that can be placed on each page. The only requirement is that each window has a unique 'id’. The activeWin function associates a set of molecular coordinates with a canvas, and is used by all functions controlling the display of molecules, including all mouse/pointer functions. “Mouse” events are defined for each canvas, so “clicking” anywhere on any canvas can be used to set the active canvas for all user input. As a result, a single set of user interface controls (such as buttons) may be used regardless of the number of canvas elements placed on a page.
Installation on a web server requires copying the unpacked archive to a location that can be read by the server. No modifications of any of these files should be required, and the only permission required is read access. In some installations, it might be convenient to create a link to this directory.
Results and discussion
Included web pages
Several fully functional, sample web pages are included with this package that illustrate different ways that HTML pages can access this library. In the root directory of this package is a default web page named index.html, which demonstrates most of the main features of this library. By default, an image of the methane (CH4) molecule is displayed. A “browse” button is provided to allow the user to load files in the.xyz format, and a few sample files are included in the molecules subdirectory.
A number of additional web pages are included in a subdirectory named “variations” that illustrate different ways that this library can be used. These include:
Pre-load: This simple page loads and displays the structure of a molecule from a file stored on the server. The name of this file is part of the web page HTML and cannot be changed by the user. While the molecule can be rotated and information displayed, the user cannot change this structure.
Chooser: This page allows the user to select the file to be viewed from a list of files stored on the server using either buttons or from a drop-down select list. While the molecule can be rotated and information displayed, the user cannot alter any of these structures.
Gallery: This page loads a list of files stored on the server and displays each of these in a separate division along with descriptions. Each of the molecules can be rotated independently and information displayed. However, the user cannot change any of these structures.
Viewer (only): This page allows loading and viewing of molecules from files stored on the user’s computer, but does not allow for any editing of these structures.
View 2 Windows: This page illustrates that more than one molecule can be loaded on a page. This page also does not allow for any editing of either structure. To switch between active windows, use the mouse to click on any portion of a drawing canvas.
Two Windows: This page illustrates that more than one molecule can be loaded on a page, and that these windows do not have to be the same size. In this view, both View Mode and Draw Mode are enabled, so either (or both) of the structures being displayed can be altered.
Creating web pages
This is all the information required to create an interactive display, which by default will display the structure of the methane molecule. The first feature necessary to make this a useful application is the ability to load and view different structures. In some situations, it might be preferred to automatically load specific 3-dimensional molecular coordinates from files stored on the web server, while in other cases users could be given the option to load files stored on their computer. Currently, only.xyz files (such as those created by Open Babel ) containing cartesian coordinates are supported. A small selection of.xyz formatted files is available from the project home page, and the format of these files is described both in the documentation and on the Open Babel website.
We have described development of a library that allows for the easy creation of web pages providing the ability to display and edit both organic and inorganic molecular structures. Installation is simple and does not require any special permissions on the web server. Users benefit from not having to install any additional software, and the web pages are viewable on a wide range of browsers across different operating systems. While this library does not include as many features as more full-featured applications such as Jmol, this library is relatively small (≈ 75 kb) and can easily be extended to provide a range of capabilities. While the most recent version of this program is available on the project homepage, a demonstration of this program is available at the end of the full-text HTML version of this article [Additional file 1].
Availability and requirements
The support of Kent State University at Stark is gratefully acknowledged.
- Abraham M, Varghese V, Tang H: Using molecular representations to aid student understanding of stereochemical concepts. J Chem Educ. 2010, 87 (12): 1425-1429. 10.1021/ed100497f.View ArticleGoogle Scholar
- Box VGS: Using molecular modeling to understand some of the more subtle aspects of aromaticity and antiaromaticity. J Chem Educ. 2011, 88 (7): 898-906. 10.1021/ed100408s.View ArticleGoogle Scholar
- McRae C, Karuso P, Liu F: ChemVoyage: a web-based, simulated learning environment with scaffolding and linking visualization to conceptualization. J Chem Educ. 2012, 89 (7): 878-883. 10.1021/ed200533u.View ArticleGoogle Scholar
- Libman D, Huang L: Chemistry on the go: review of chemistry apps on smartphones. J Chem Educ. 2013, 90 (3): 320-325. 10.1021/ed300329e.View ArticleGoogle Scholar
- Avogadro. http://avogadro.openmolecules.net,
- Hanwell MD, Curtis DE, Lonie DC, Vandermeersch T, Zurek E, Hutchison GR: Avogadro: an advanced semantic chemical editor, visualization, and analysis platform. J Cheminformatics. 2012, 4: 17-10.1186/1758-2946-4-17.View ArticleGoogle Scholar
- Spartan. http://www.wavefun.com/products/spartan.html,
- GaussView. http://www.gaussian.com/g_prod/gv5.htm,
- ECCE - Extensible Computational Chemistry Environment. http://ecce.pnl.gov/,
- MacMolPlt. http://www.scl.ameslab.gov/MacMolPlt/,
- WebMO. http://www.webmo.net/,
- Jmol. http://jmol.sourceforge.net/,
- Jensen JH, Kromann JC: The Molecular Calculator: A Web Application for Fast Quantum Mechanics-Based Estimation of Molecular Properties. J Chem Educ. 2013, 90 (8): 1093-1095. 10.1021/ed400164n.View ArticleGoogle Scholar
- JSMol. http://sourceforge.net/projects/jsmol/,
- JME Molecular Editor. http://www.molinspiration.com/jme/,
- CanvasMol. http://alteredqualia.com/canvasmol,
- MoleculeViewer. http://www.codeproject.com/Articles/310887/Building-a-Molecular-3D-Viewer-using-WebGL-and-HTM,
- ChemDoodle. http://web.chemdoodle.com/,
- O’Boyle NM, Banck M, James CA, Morley C, Vandermeersch T, Hutchison GR: Open Babel: An open chemical toolbox. J Cheminformatics. 2011, 3: 33-10.1186/1758-2946-3-33.View ArticleGoogle Scholar
This article is published under license to BioMed Central Ltd. This is an Open Access article distributed under the terms of the Creative Commons Attribution License (http://creativecommons.org/licenses/by/2.0), which permits unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.