Imperial College London

Henry Rzepa

My [very first
post](http://www.ch.imperial.ac.uk/rzepa/blog/?p=8){target="_blank"} 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](https://market.android.com/search?q=jmol&so=1){target="_blank"},
      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](http://www.hp.com/hpinfo/newsroom/press/2011/111209xa.html){target="_blank"}
      it will open source WebOS, but it seems Java [will not be
      supported](http://www.webos-internals.org/wiki/Java_Support_in_webOS){target="_blank"} so
      probably no Jmol there then.
    - Windows 8 Mobile (Metro) also seems [unlikely to support
      it](http://icewalker2g.wordpress.com/2011/09/15/java-and-the-windows-8-metroverse/){target="_blank"}
      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](http://www.ch.imperial.ac.uk/rzepa/blog/?p=3183){target="_blank"}
      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](http://webglmol.sourceforge.jp/index-en.html){target="_blank"},
      an open source molecular viewer for Apple's IOS. A version is also
      [available for
      Android](http://webglmol.sourceforge.jp/android-en.html){target="_blank"}.
      I may give a try at embedding this into the blog.

<div>

It seems that the 3D molecular viewing options are certainly increasing,
but at the moment there is some uncertainty in performance,
compatibility and the ability to extract molecular data from the
"*sandboxes*". This last comment relates to the
[re-usability](http://www.ch.imperial.ac.uk/rzepa/blog/?p=3154){target="_blank"} of
data, which I particularly value.

</div>

<div>

Although this post has focussed on embedding and rendering molecular
data into a blog post, the same principle in fact applies to other
expressions. Perhaps the most interesting is the epub3 e-book format,
which also supports Javascript/HTML5, and which seems likely to be
adopted for future interactive e-books. Indeed, it should be possible to
fully convert an interactive blog created using this technology to a
e-book with relatively little effort. I have also [illustrated
here](http://www.ch.imperial.ac.uk/local/organic/pericyclic/epub3_test.html){target="_blank"}
how lecture notes can be so converted.

</div>

<div>

If you get the impression that the task of a modern communicator of
science and chemistry is not merely that of penning well chosen words to
describe their topic, but of having to program their effort, then you
may not be mistaken.

</div>

------------------------------------------------------------------------

### Procedure for creating a 3D model in a WordPress blog post using ChemDoodle. {#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,](http://web.chemdoodle.com/installation){target="_blank"} 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.](http://web.chemdoodle.com/tutorial){target="_blank"}

------------------------------------------------------------------------

::: {.wp_orcid_field}
[https://orcid.org/0000-0002-8635-8390](https://orcid.org/0000-0002-8635-8390){target="_blank"
rel="author"}
:::


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.

Messaggi di Rogue Scholar

Mobile-friendly solutions for viewing (WordPress) Blogs with embedded 3D molecular coordinates.