JmolApplet and Visualiziation of NBOs in Web Browsers



Lone-pair -> antibond delocalization in formamide.

In this post, we will continue exploring visualization possibilities offered by the free Jmol viewer, particularly, the graphical representations of Natural Bond Orbitals (NBOs) generated by GENNBO 5.0W.  Other sources of .31-.46 plot files can be used as well. Ultimately, we should be able to output and dynamically display selected NBOs in any web browser and further they display properties.

Jmol is a free, open source molecule  viewer running on several common operating systems (Mac, Windows).  There are two main applications that most users will want to use for visualization of molecular orbitals and molecular surfaces:

• The JmolApplet is a web browser applet that can be integrated into web pages.
• The Jmol application is a standalone Java application that runs on the desktop.

Jmol: an open-source Java viewer for chemical structures in 3D. http://www.jmol.org/

Let's go through the steps of setting up files, directories, and parameters to output visualization directly to a web browser.

As briefly outlined in the previous post, we first need to get the Jmol application files from

jmolsourceforge.net (zip file). Unpack the zip file into any drive/folder (e.g. D:/computation/jmol for this tutorial) and make a shortcut to Jmol.jar file on your desktop. Next, we will need the formamide.31-.46 plot files generated earlier (previous post). In case that you wish to reproduce examples in this tutorial, here are the files. For now, just keep them separate from the jmol directory.
To be able to use ScriptButton features of the Export to Web module of the Jmol application, we need to run a simple web server*. There are several choices available:

• Using your own or institution's web server
• Installing a free web server environment, such as WampServer
• Running a simple portable web server, such as mongoose

* Launching .html files directly from the web export folder fails to display Interactive buttons and most importantly, the java visualizations.

Assuming that we want to run visualization on our local computer, the address will be http://localhost:8080/dir/file.html, where dir and file will be replaced by your actual directory name and the corresponding .html file name.

While I am using WampServer (on Windows 7, 32bit), examples discussed here use simpler and "light-weight" mongoose server. Download it (mongoose-x.x.exe) from the above link and place the .exe file at the same level where the Jmol file is located (Fig. 1).

This blog has been UPDATED (summer 2015) to reflect the recent changes in Jmol structure and Web presentation.

With the Chrome browser phasing out support of Java-based plugins (applets), Jmol development has moved to JavaScript-based framework and HTML5 support. 

As of mid-2015, Firefox, Opera, and IE still support java applets and plugins.

Fig. 1 Folder structure of the Jmol app and loca/server files

Preparing the web output:

Now, open the desktop version of Jmol (click Jmol.jar shortcut) and make sure to have sevral macro files ready (created earlier with JmolNBO Visualization Helper). Then go to:

1.  File -> Export -> Export to web page and select tab "ScriptButton Jmol" 







Fig. 2 Jmol Web Page Maker main window




2. Fill out the Author field, and enter "./jsmol" into the "Relative server path to jar files" field. Upon saving the html page, Jmol export Jsmol directory to your server structure (./java/jsmol). Enter just a dot into the "Relative path to local jar files" field (see Fig. 2). 
3. For each desirable loaded visualization (through the macro scripts in the main Jmol app window), click "Add Present Jmol State as Instance" button to add NBOs to make them available for display in the browser. Name the state (NBO) by its corresponding number (Fig. 2).
4. Click "Save HTML as" and navigate to the folder where Jmol folder is located (Fig. 3). In this example, it is D:/computation/jmol/java.

Fig. 3 Exporting web files with the folder layout

Now, the important part - go to the folder with .31-.42 plot files created earlier.  Due to an unknown bug in the java code, you have to re-name files form.31 and form.46 to form.37.31 and form37.46, respectively and copy them into the just created web folder /java. Essentially, we just insert .37 in the middle of the file name. Files in that directory should look similar to the top three files in Fig. 4.

Fig. 4 Structure and new files in the web export folder

All files created in this last step (except of jsmol directory) are available for download (java.zip). Unpack them next to the Jmol folder (Fig. 5) and follow the next step to reproduce this tutorial.

Fig. 5 Final directory layout

Launching the server:

• Launch mongoose.exe by double clicking it (Fig. 5). Mongoose web server icon will appear at the right-bottom notification area.
• Confirm security exception (if any) and check "Install service". 
• Type http://localhost:8080/java/java.html to launch the in browser. Again, replace "java" with the name of your actual folder and .html file name.
• After finishing visualization, cancel and exit the mongoose server service.

Since the visualization and web structure use a lot of JavaScript, loading of all files may take 10-20s. Once the image is loaded there is a small 3D icon positioned down-left in the image window. Click on that icon to start loading 3D view and Jmol menu (opens on right-mouse click).

The final web view is shown below.

Note that there is still the option to switch to Java-driven view (link below the image). However, the view will not work in the Chrome browser as of version 43.

Watch video tutorial:
This video pertains to the early version of Jmol tutorial. While many steps are the same, please adapt revisions from the updated blog.
mobile link: