JSmol Widget for ExtJS 5

Screenshot of the Demo Page Running in Google Chrome

Background

Jmol

Jmol is an open-source viewer for three-dimensional chemical structures, with features for chemicals, crystals, materials and biomolecules. Features include reading a variety of file types and output from quantum chemistry programs, and animation of multi-frame files and computed normal modes from quantum programs.

JSmol

JSmol is a JavaScript framework that allows web developers to create pages that utilize either Java or HTML5 (no Java), at will. This enables Jmol to display interactive 3D molecular structures on devices that do not have Java installed, or for which Java is not available (such as smart phones and some tablet computers, e.g. iPad) or has not been installed because of concerns for Java being a security threat.

I have used Jmol for a few years now. But, over the past few years, due to concerns of security threat? Running Java applet in a browse is getting harder and harder. Shelling out money to buy certificate for open source software is, well, at most a hard sell.

So, JSmol to the rescue, pure JavaScript HTML5 application, works on IE, Firefox, Chrome, and even iPad. What is the catch? At least it does not live well with ExtJS on the same web page. You will get weired error messages like 'Uncaught TypeError: Cannot read property '***' of null'. My guess is JSmol has changed prototype of some basic types.

Problem

• Jmol:   can no longer be used in any major browser without compiling with a trusted certificate
• JSmol: not compatible with ExtJS, and I suspect may have problem with a lot of other libraries as well

Solution

iframe! It gives the web page the needed firewall between ExtJS page and JSmol page.

I have implemented a basic ExtJS 5 Widget that will inject an iframe, then inject JSmol code to render molecule models.

Live demo: Example - JSmol Widget for ExtJS 5

Demo page source code:

• JSmolExt_demo.htm
• JSmolExt_demo.js

Widget Source Code:

• JSmolExt.js

This widget takes JmolConfig object, and will pass it along to the JSmol app in the iframe. For details of the parameters, please refer to: Jmol JavaScript Object/Info.

One more thing, the component has a "safe" option. Because the code to inject JSmol to iframe does not work in Firefox and IE 9. If "safe" is true, it will simply set iframe src to a pre-existing page that host JSmol library. I used this page: A bare bone JSmol Demo Page. Problem with my page is that it is static and does not honor the JSmolConfig passed to the widget. Now it is up to you to pass along the JSmolConfig to a dynamic page.

Just for fun, below is a screenshot of Jmol's official demo from one of my computers.