In the previous post, we discussed embedding the NBO imagery into a Web page using the Jmol-generated x3d file format. To further expand on the Jmol web visualization possibilities, we will take a look at yet another implementation of the orbital imagery; one that uses jvxl format to encode the molecular surfaces [1].
While the web implementation of x3d files does not require the Jmol app or JavaScript support, successful implementation of jvxl files does require both. Until recently, running the Jmol in web browsers required both the Java and Jmol be installed on the computer. Security concerns around the implementation of Java (and Java applets) in browsers have recently resulted in disabling the Java support in Chrome. This is where JSmol, a new incarnation of Jmol, comes in. JSmol overcomes the security concerns of the Jmol Java applet by rendering the molecular models in a web page using only JavaScript and HTML5. JSmol implements the entire set of Jmol functionalities [2, 3]. Indeed, the JSmol web interface includes the whole context menu of Jmol. It can be easily invoked by right-mouse clicking within the main image frame (Figure 7 at the bottom).
In this blog article, we will go through the steps of getting the key elements for building an interactive website with NBO-specific layout. The visualization is based on jvxl surface files and JSmol support. With the help of css, JavaScript and its library, JQuery, we will be able to interact with the molecular and surface models generated by the Jmol standalone application. All files used in this post are available from the Download section at the end.
While the web implementation of x3d files does not require the Jmol app or JavaScript support, successful implementation of jvxl files does require both. Until recently, running the Jmol in web browsers required both the Java and Jmol be installed on the computer. Security concerns around the implementation of Java (and Java applets) in browsers have recently resulted in disabling the Java support in Chrome. This is where JSmol, a new incarnation of Jmol, comes in. JSmol overcomes the security concerns of the Jmol Java applet by rendering the molecular models in a web page using only JavaScript and HTML5. JSmol implements the entire set of Jmol functionalities [2, 3]. Indeed, the JSmol web interface includes the whole context menu of Jmol. It can be easily invoked by right-mouse clicking within the main image frame (Figure 7 at the bottom).
In this blog article, we will go through the steps of getting the key elements for building an interactive website with NBO-specific layout. The visualization is based on jvxl surface files and JSmol support. With the help of css, JavaScript and its library, JQuery, we will be able to interact with the molecular and surface models generated by the Jmol standalone application. All files used in this post are available from the Download section at the end.
From the java.com official site:
"The Java plug-in for web browsers relies on the cross platform plugin architecture NPAPI, which has long been, and currently is, supported by all major web browsers. Google announced in September 2013 plans to remove NPAPI support from Chrome by "the end of 2014", thus effectively dropping support for Silverlight, Java, Facebook Video and other similar NPAPI based plugins. Recently, Google has revised their plans and now state that they plan to completely remove NPAPI by late 2015."
JVXL File Format:
jvxl stands for "Jmol Voxel" and it is a surface file format unique to Jmol. The purpose of the
JVXL file format is to provide a mechanism for the efficient delivery of molecular surface data
(orbitals, electron density plots, electrostatic potential maps, etc.) from a web server to a client page in a compact manner [1].
More on the jvxl file format and its use from the Wiki and Surfaces in Jmol.
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 local web server (discussed below) enables a "live" presentation in the classroom and conference settings.
This particular example (as in the x3d post) features analysis of the formamide molecule evaluated at HF/3-21G level [5].
Starting in the Jmol Application:
To generate the NBO imagery, we will use the Jmol-NBO Visualization Helper (JNVH), which was described earlier [4]. 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 [6] allows for direct linking to ESS or for a stand-alone processing of the wavefunction (archive file .47).The sequence of steps in the JNVH is following:
- Launch JNVH .jar file.
- Load directory of NBO archive files (.37 for NBO set) by clicking the "1. Browse Dir" button.
- Enter the range of NBOs to display into "NBOs" field (in this example 4-12)
- Check the box "x3d-jvxl script?" and choose to write the output into the default $HOME/.macros directory.
- Click "Create".
- 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 the each orbital presentation. For generation of surface images, another script file, "x3d-jvxl-*.spt" was created. This is a standard Jmol script containing instructions to generate the corresponding *.jvxl files.
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. |
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\jsmolweb. Layout outlined in this blog is based on a "pluggable" container wrapper allowing to render the html index file as a stand-alone page or to be inserted into other .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 4.
|
| Fig. 4 Website folder structure and exemplary files. |
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.Index.html file:
Html markup of the editable section of the index.html file is presented in Figure 5. Image names and orbital description in magenta should be changed according to your naming convention (see, img files: section below). The table has 2 rows and 3 columns and another row of icon images can be easily inserted by copying/pasting the segment that starts at <!--Another row of models--> and ends by the last </tr> tag.<!-- Table of available models --> <table id="icon_table" class="gallery"> <tr class="row1"> <td class="1"><a href="javascript:nbo2aj(nbo1)"><img src="./img/4.png" alt="" width="500" height="500" /></a></td> <td class="2"><a href="javascript:nbo2aj(nbo2);"><img src="./img/5.png" alt="" width="500" height="500" /></a></td> <td class="3"><a href="javascript:nbo2aj(nbo3)"><img src="./img/6.png" alt="" width="500" height="500" /></a></td> </tr>
<tr class="row12"><td class="1">NBO4</td><td class="2">NBO5</td><td class="3">NBO6</td></tr> <tr class="row2"> <!--Another row of models--> <td class="4"><a href="javascript:nbo2aj(nbo4)"><img src="./img/10.png" alt="" width="500" height="500" /></td> <td class="5"><a href="javascript:nbo2aj(nbo5)"><img src="./img/11.png" alt="" width="500" height="500" /></td> <td class="6"><a href="javascript:nbo2aj(nbo6)"><img src="./img/12.png" alt="" width="500" height="500" /></td> </tr> <tr class="row22"><td class="4">NBO10</td><td class="5">NBO11</td><td class="6">NBO12</td ></tr>
<!-- Insert third row here--> </table>
Figure 5. Html markup of the gallery table.
JQuery and JavaScript code:
The script to initiate the JSmol objects and to have them interact with the gallery html elements is presented in Figure 6. The script is embedded within the main index.html file (part of the download package). Lines 13, 15-19 have to be modified with your specific files. Parameters set at lines 22 and 23 can be modified, depending on your preference.Additional feature and purpose of the Ajax call is to retrieve orbital description, which originates in the GENNBO/NBO modules. Bond assignment and orbital occupancy are extracted from the jvxl file upon clicking the image icon in the gallery.
Let me know if there are other options to include.
1: <script type="text/javascript"> 2: Jmol._isAsync = false; 3: Jmol.getProfile() // records repeat calls to overridden or overloaded Java methods 4: var jmolApplet0; // set up in HTML table, below 5: 6: // use ?_USE=JAVA or _USE=SIGNED or _USE=HTML5 7: jmol_isReady = function (applet) { 8: document.title = (applet._id + " is ready"); 9: Jmol._getElement(applet, "appletdiv").style.border = "1px solid blue"; 10: }; 11: 12: // Enter list of images to be displayed 13: var panel = "s4-form-NBO.jvxl"; // Type the name of image in the main panel 14: var nbo1 = panel // do not modify 15: var nbo2 = "s5-form-NBO.jvxl"; 16: var nbo3 = "s6-form-NBO.jvxl"; 17: var nbo4 = "s10-form-NBO.jvxl"; 18: var nbo5 = "s11-form-NBO.jvxl"; 19: var nbo6 = "s12-form-NBO.jvxl"; 20: 21: // Image display <Jmol> parameters (modify) 22: var param1 = "background {0,0,150}; color Rasmol;zoom 130;center {-0.4 0 0}; rotate z -100; rotate y 35; rotate z 90; translate x -3.0; translate y 7.5"; 23: var param2 = "translucent 0.3;set antialiasDisplay"; 24: nbo = nbo1; 25: 26: Info = { 27: width: 300, 28: height: 300, 29: debug: false, 30: color: "#F0F0F0", 31: zIndexBase: 20000, 32: z: { 33: monitorZIndex: 100 34: }, 35: use: "HTML5", 36: j2sPath: "./jsmol/j2s", 37: allowjavascript: true, 38: script: 'load ./nbo/' + panel + '; ' + param1 + '; isosurface ./nbo/' + panel + ' ' + param2 + ' ', 39: } 40: 41: function nbo2aj(x) { 42: nbo = x; 43: Jmol.script(jmolApplet0, 'load ./nbo/' + nbo + ';' + param1 + '; isosurface ./nbo/' + nbo + ' ' + param2 + ' '); 44: 45: $.ajax({ 46: type: "GET", 47: url: './nbo/' + nbo, 48: dataType: "xml", 49: success: function(xml) { 50: $(xml).find("jvxlSurface").each(function () { 51: var Title = $(this).find('jvxlSurfaceTitle').text(); 52: // Parse the title and remove Model 1.1 and filename 53: var myregexp = /^Model\s[0-9]{1,2}\.[0-9]{1,2}\s+|.+\.37/mg; 54: Title = Title.replace(eval(myregexp), ""); 55: Title = Title.replace(/(^Occupancy.+)/mg, "<p>$1</p>"); 56: $("#nbo-desc>span").replaceWith("<span>" + Title + "</span>"); 57: }); 58: }, // close success 59: error: function(xhr, textStatus, errorThrown) { 60: alert('An error occured! ' + (errorThrown ? errorThrown : xhr.status)); 61: } 62: }); // close ajax 63: } // close nbo2aj 64: </script>
Figure 6. JQuery and Ajax syntax for the interactive site interface.
img files:
This folder contains images that you want to display at your site. Since there is a gallery table in the page (Figure 7), the corresponding icons for the 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. 7 Website view of the Gallery section. |
nbo content:
This folder contains all *.jvxl files created earlier.jsmol folder:
jsmol folder contains the files necessary for rendering and manipulation of images. It is the very same folder that is part of the Jmol application package (Figure 4). Just copy it from there to your web site folder. If you do not care for the examples and structural file, delete the folder "data".... and the site:
First, download the .zip package from the download section and unpack it into any drive/folder. In our case, D:\web\jsmolweb. 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 jsmolweb site (D:\web). Address is http://localhost:8080/jsmolweb. A snapshot of the gallery section is shown in Figure 7. As indicated earlier, the orbital labels and images have to be provided by manually entering the values into the <table> markup. By clicking the "Reset the model" link, the molecule and its corresponding surface are rendered with transparency=0 and with atom labels displayed.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:
Update (12/06/2015):
Presented web site template was re-written to use the Bootstrap framework to allow responsive display on phone and tablet devices. File to download: Jsmolweb-responsive.zip. The original version is still available. Demo site now serves the responsive version.Conclusions:
In this blog post, we explored the generation and implementation of .jvxl 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 the corresponding .jvxl files in the Jmol application. Finally, we built a JavaScript-rich web page container for the presentation and discussion of NBO imagery.
Downloads:
- Jmol-NBO Visualization Helper, main download site
- Jmol
- Complete set of example files (the whole web site)
- Complete set of example files (responsive web site version)
References:
[1] R. M. Hanson, “The Jmol Voxel (JVXL) File Format,” 2006.
[2] R. M. Hanson, “Jmol/JSmol Interactive Script Documentation,” 2006. [Online].
[3] R. M. Hanson, J. Prilusky, Z. Renjian, T. Nakane, and J. L. Sussman, “JSmol and the Next-Generation Web-Based Representation of 3D Molecular Structure as Applied to Proteopedia,” Isr. J. Chem., vol. 53, no. 3–4, pp. 207–216, Apr. 2013. DOI: 10.1002/ijch.201300024
[4] M. Patek, “Jmol-NBO Visualization Helper,” Aug-2014. [Online].
[5] F. Weinhold, C.R. Landis, Discovering Chemistry With Natural Bond Orbitals. Wiley, 2012. http://books.google.com/books?id=y68Cs32WNI0C
[6] Natural Bond Orbital 6.0 Homepage.
No comments:
Post a Comment