Henry Rzepa's blog

My very first post on this blog, in 2008, was to describe how Jmol could be used to illustrate chemical themes by adding 3D models to posts. Many of my subsequent efforts have indeed invoked Jmol. I thought I might review progress since then, with a particular focus on using the new generations of mobile device that have subsequently emerged.

1. Jmol is based on Java, which has been adopted by Google’s Android mobile operating system, but not by Apple’s IOS.
   • An Android version of Jmol was recently released, to rave reviews! I do not know however whether the Jmol on these posts can be viewed via Android. Perhaps someone can post a comment here on that aspect?
   • HP has just announced it will open source WebOS, but it seems Java will not be supported so probably no Jmol there then.
   • Windows 8 Mobile (Metro) also seems unlikely to support it either.
2. Apple has been prominent in touting HTML5 as a Java replacement. In practice, this means that any molecular viewer would be based on a combination of Javascript and WebGL technologies.  Whereas Java is a compiled language, Javascript is interpreted on-the-fly by the browser. Its viability has been greatly increased by very large improvements in the speeds that browsers interpret Javascript nowadays, but this speed is unlikely to ever match that of Java. The real issue is whether that matters. The other difference is that whereas a signed Java applet allows data to escape from the security Sandbox (and into eg a file system), Javascript is likely to be much more restrictive. These two properties mean that Javascript/HTML5 implementations make a lot of use of server-side functionality; in other words a lot of bytes may have to flow between server and mobile device to achieve a desired effect (and the user may have to pay for these bytes via their data plan).
   • One early adopter of the Javascript/WebGL HTML5 model has been ChemDoodle, which I illustrated on this blog about a year ago. I have tidied up the recipe for invoking it since then, and this is given below for anyone interested in implementing it. As of this moment, one essential component, WebGL, is only available to developers of Apple’s IOS system, but I expect this to become generally available soon. When that happens, ChemDoodle components on this blog will start working.
   • A new entrant is GLmol, an open source molecular viewer for Apple’s IOS. A version is also available for Android. I may give a try at embedding this into the blog.

Procedure for creating a 3D model in a WordPress blog post using ChemDoodle.

1. As administrator, go to

   wp-content/themes/default

   (or whatever theme you use) and in the file header.php, paste the following

   <link rel="stylesheet" href="../ChemDoodle/ChemDoodleWeb.css" type="text/css">
     <script type="text/javascript" src="../ChemDoodle/ChemDoodleWeb-libs.js"></script>
     <script type="text/javascript" src="../ChemDoodle/ChemDoodleWeb.js"></script>
      <script type="text/javascript" language="JavaScript">
     function httpGet(theUrl)
      {var xmlHttp = null;
      xmlHttp = new XMLHttpRequest();
      xmlHttp.open( "GET", theUrl, false );
      xmlHttp.send( );
      return xmlHttp.responseText;}
      </script>

2. From here, get the ChemDoodle components and put them into the directory immediately above the WordPress installation. They are there referenced by the path ../ChemDoodle as in the script above. You can put the folder elsewhere if you modify the path in the script accordingly.
3. Invoke an instance of a molecule thus;

   <script type="text/javascript">// <![CDATA[
   var transformBallAndStick2 = new ChemDoodle.TransformCanvas3D('transformBallAndStick2', 190, 190);transformBallAndStick2.specs.set3DRepresentation('Ball and Stick');         transformBallAndStick2.specs.backgroundColor = 'white';var molFile = httpGet( 'wp-content/uploads/2011/12/85-trans.mol' );var molecule = ChemDoodle.readMOL(molFile, 2);         transformBallAndStick2.loadMolecule(molecule);
   // ]]></script>

4. The key requirement is that the body of the script (starting with var) must not contain any line breaks; it must be a single wide line. So that you can see the whole line here, I show it in wrapped form (which you must not use);

   var transformBallAndStick2 = new
   ChemDoodle.TransformCanvas3D('
   transformBallAndStick2', 190,
   190);transformBallAndStick2.specs.
   set3DRepresentation('Ball and Stick');
   transformBallAndStick2.specs.
   backgroundColor = 'white';var molFile =
   httpGet('wp-content/uploads/2011/12/85-trans.mol');
   var molecule =ChemDoodle.readMOL(molFile, 2);
   transformBallAndStick2.loadMolecule(molecule);

5. The key data will be located in the path wp-content/uploads/2011/12/85-trans.mol which you should upload. Note that only the MDL molfile is supported in this mode (which makes no server-side requests). One can use eg CML, but this must be as a server request.
6. If you want multiple instances, then you must change each occurrence of the name of the variable, e.g. transformBallAndStick2 to be unique for each.
7. If you want to annotate the resulting display, server-side requests are again needed. I do not illustrate these here, but there is an excellent tutorial.