Sunday, July 26, 2015

Web Visualization of NBOs in x3d Format

In an earlier post, we discussed embedding the NBO imagery into a Web page using the Java-JmolApplet as well as the recent Jsmol JavaScript implementation. To further expand on the Jmol visualization possibilities, we will take a look at one implementation of the orbital imagery that uses open-source x3d format [2].

In this blog article, we will go through the steps of getting the key elements for building an interactive website with NBO-specific layout. All files used in this post are available from the Download section at the end.

x3d Format:
X3D stands for "Extensible 3D" and it is the new open standard for 3D content on the internet/web. In essence, X3D is intended to be the new format or language that is used/required for 3D interactive worlds on the web (replacing/extending the existing VRML97 standard).
More on x3d standard from the Wiki and web3d.org.

X3D is a royalty-free ISO standard XML-based file format for representing 3D computer graphics. X3D has a rich set of componentized features that can tailored for use in engineering and scientific visualization. X3D strives to become the 3D standard for the Web, as integrated in the HTML5 pages as other XML dialects (MathML, SVG) already are there. X3DOM is a proposed syntax model and its implementation as a script library that demonstrates how this integration can be achieved without a browser plugin, using only WebGL and JavaScript.

Getting the Web Components:
In this section, we will outline the steps of the overall workflow for building the interactive webpage. Uses of such webpage include blogs and stand-alone pages. A simple implementation of a local web server (discussed below) enables a "live" presentation in the classroom and conference settings.
This particular example will feature analysis of the formamide molecule evaluated at HF/3-21G level [1].

Starting in the Jmol Application:

To generate the NBO imagery, we will use Jmol-NBO Visualization Helper (JNVH), which was described earlier [3]. Briefly, the JNVH facilitates generation of Jmol .macro files that allow loading and visualization of the NBO archive files (.31-.46). The latter files are created by NBO executable compiled or linked into the variety of Electronic Structure Systems (ESS). Examples of such systems include Gaussian09 (NBO3), GAMESS, FIREFLY, and many other packages. GENNBO suite of NBO6-based programs [4] allows for direct linking to ESS or for a stand-alone processing of the wavefunction (archive file .47).
The sequence of steps in JNVH is following:
  1. Launch JNVH .jar file.
  2. Load directory of NBO archive files (.37 for NBO set) by clicking the "1. Browse Dir" button.
  3. Enter the range of NBOs to display into "NBOs" field (in this example 4-12)
  4. Check the box "x3d-jvxl script?" and choose to write the output into the default $HOME/.macros directory.
  5. Click "Create".
  6. For interacting NBO pairs, check the box 'NBO Interactions" , enter the list of pairs (e.g. 4:16, 6:13,..), uncheck the "Clear default directory" box, and press "Create".

Layout and specific options in the JNVH panel are shown in Figure 1.

Fig. 1  Jmol Visualization Helper window.

Now, we will be heading to the $HOME/.macros directory (on Windows, C:\Users\username\.jmol\macros) and review the folder content. Next to the "*.macro" files, an accompanying script (*.scr) file was created for each orbital presentation. For single surface images, another script file, "x3d-jvxl-*.spt" was created. This file is a standard Jmol script containing instructions to generate the corresponding *.x3d and *.jvxl files (see the code in Figure 4).
Web visualization with *.jvxl files including the Jsmol adaptation will be discussed in the upcoming post.

Snapshot of the .macros directory is shown in Figure 2. Note the different script files created for each orbital type.
Fig. 2  Files generated by the JNVH with option from Fig. 1.

At this point, we launch the Jmol application and open the Console (File -> Console). Drag the x3d-jvxl-form.spt file into the main Jmol window (not the Console) as shown in Figure 3. The script will start processing the sequence of macro files and the corresponding .x3d and .jvxl files will be created.

Fig. 3  Running the script in Jmol.

Details of the .spt script are shown in Figure 4. Replace the magenta-colored strings with your HOME directory. One could use the commands directly in the Jmol Console or modify the script before the run. The script is hardcoded in the JNVH app. Let me know if there are other options to include.


// x3d-jvxl-form.spt
// Strip the basename   
 function baseName(str) {  
   var nameArray = str.split('.');  
   var base = nameArray[nameArray.length - 1];  
   return base;  
 }  
 set defaultDirectory "$HOME\.jmol\macros"  
 fin = ["s10_form-NBO.scr", "s11_form-NBO.scr", "s12_form-NBO.scr",  
   "s4_form-NBO.scr", "s5_form-NBO.scr", "s6_form-NBO.scr",  
   "s7_form-NBO.scr", "s8_form-NBO.scr", "s9_form-NBO.scr"  
 ]  
 cd $HOME\.jmol\ macros  
 for (var i = 1; i <= fin.length; i = i + 1) {  
   var filename = fin[i]  
   script @filename  
   var newfile = baseName(filename) + ".x3d"  
   var jvxlfile = baseName(filename) + ".jvxl"  
   label off  
   color RasMol  
   write @newfile  
   write MO @jvxlfile  
 }
      
     Figure 4.  Jmol script to generate .x3d and .jvxl files from Jmol .macro files.

Building the Webpage:

To build a simple static webpage on our computer, create the corresponding folder structure at any local drive. For example, D:\web\x3d. Layout demonstrated in this blog is based on a "pluggable" container wrapper allowing to render the index.html file as a standalone page or to be inserted into another .html file. The folder can be later uploaded to your server for the Internet access. In the local implementation, I am using a simple portable web server, mongoose.

A typical folder structure is shown in Figure 5.

Fig. 5  Website folder structure and files.

Copy the*.x3d files created earlier from the .macros folder into the /nbo folder of your new site. Depending on your preference, there is one additional, although optional step required.

Jmol x3d export routine resets the transparency level of your orbitals to zero. The value is set in the '<Appearance>' tag located just before the '<CoordIndex>' tag in the x3d file. Included Python file "modfiles.py" sets the transparency tag back to 0.3. Run the Python script by double-clicking it in the folder where *x3d files are present. Alternatively, use the System Shell (cmd, bash, ..)  and cd into directory containing the modfiles.py and *.x3d files. New set of x3d files is created with _t0.3_ string inserted into the filename.

css files:

The folder contains css files that should suffice for building a respectable site container. The site layout is based on the popular 960 Grid System. Feel free to modify them.

     img files:

This folder contains images that you want to display at your site. Since there is a gallery table in the page (Figure 6), the corresponding icons for orbital-images have to be created first. The easiest way is to create those icons while in the Jmol Console.

At the command prompt with 3-D image properly scaled and positioned type:

> write image 400 400 PNG "OrbNum.png"

 where OrbNumber is the number of the orbital that will be displayed in the main image frame (e.g., 4.png, 12.png).
Fig. 6  Website view of the Gallery section.

     nbo content:

This folder contains the *.x3d files created and modified earlier.

     ... and the site:

First, download the .zip package from the download section and unpack it into any drive/folder. In our case, D:\web\x3d. Start the local mongoose server and browse to the site directory created in previous steps. Location of the mongoose.exe file is one directory up from this x3d site (D:\web). Address is http://localhost:8080/jsmolweb. A snapshot of the gallery section is shown in Figure 6. The orbital labels and images have to be provided by manually entering the values into the <table> markup.

Alternatively, upload the unpacked folder to your web hosting server and access it from the Internet.
To illustrate the final appearance and flexibility of our new website, preview it at:
                            http://nbo.marcelpatek.com/mol/demo/x3d

Conclusions:

In this blog post, we explored generation and implementation of .x3d 3-D files for visualization of Natural Bond Orbitals in web browsers. We used the Jmol-NBO Visualization Helper to create the Jmol .macro files and scripts that assist in writing .x3d files off the Jmol application. Finally, we built a simple web page container for presentation and discussion of NBO imagery.


Downloads:


References:
1.
F. Weinhold, C. R. Landis, Discovering Chemistry With Natural Bond Orbitals. Wiley, 2012.

2.
“Jmol/JSmol Interactive Script Documentation.” [Online] [Accessed: 26-Jul-2015].

3.
M. Patek, “Jmol-NBO Visualization Helper,” Aug-2014.

4.
E. D. Glendening, C. R. Landis, and F. Weinhold, “NBO 6.0: Natural bond orbital analysis program,” Journal of computational chemistry, vol. 34, no. 16, pp. 1429–1437, 2013. DOI: 10.1002/jcc.23266


at

No comments:

Post a Comment