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

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.
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 of data, which I particularly value.

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 how lecture notes can be so converted.

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.


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.

Tags: , , , , , , , , , , , , , , , , , ,

10 Responses to “Mobile-friendly solutions for viewing (WordPress) Blogs with embedded 3D molecular coordinates.”

  1. Qadir Timerghazin says:

    ChemDoodle looks very interesting and seems to work faster than Jmol; unfortunately, I need to switch browsers to see it, since Safari does not support WebGL yet…

    On a related note: I wonder if you could make a short tutorial how you do these fabulous interactive tables, like the one in your recent JCTC article? Specifically, I wonder about the logistical part here: do you submit them at the initial submission or after the paper is accepted, are there any pitfalls one needs to be aware of while dealing with the publisher, etc. It could be really helpful!

  2. Henry Rzepa says:

    On the point of Safari, the latest version supports WebGL very well, but you do have to follow this procedure.

    Regarding the interactive tables, they are often the starting point for an article. They are produced as an organiser for the calculations, and I tend to use a standard template that has evolved over the years. This is part of the initial submission, normally as a ZIP archive. The covering letter details instructions for the referees on how to unzip and invoke it. It is true that when a publisher first receives it, they are often at a complete loss on how to handle it. Some editors fail to grasp its purpose, and I have had to be very persistent. You often get excuses such as “our automated publishing system cannot handle HTML” or other such.

    There is only one publisher who continues to foil me; I get the impression that their bottom line is their profit margins, and not what is in the best scientific interest. There is also a hint that some publishers might have spotted such interactive tables as a potential money spinner, and may intend charging the author for them in the same way they might charge for colour diagrams.

    If you have not spotted it, a complete collection of these tables has been listed elsewhere on this blog.

  3. Qadir Timerghazin says:

    I missed the post with the collection of tables indeed…

    So, the publishers do not object posting autor-submitted java applets on their web-sites? I could expect they would be concerned how secure it is.

  4. Henry Rzepa says:

    I tend to submit the signed Jmol rather than the unsigned version. I have not had any issues.

  5. Qadir Timerghazin says:

    We’re going to try submitting an interactive table along with the next paper we submit – we extensively use them in-house, but never tried actually publishing them.

    Just a last question: what format do you use for surfaces – JVXL? The publishers won’t be too happy about multi-MB cubes…

  6. […] I ponder how long it might take for magazines such as New Scientist to include interactive diagrams such as […]

  7. […] noted the addition of ChemDoodle to this blog previously. There may be newcomers which I need to track down to this type of non-Java […]

  8. […] this aspect of mechanism. With new generations of interactive and dynamic text books about to spring upon us, it might be time to rethink what goes into them. I would hope it is not just a rehash of  what […]

  9. Thanks for this simple instructions on how to install chemdoodleweb on a wordpress. I gave in past some tries but without any success. I am not a computer geek really. Is it possible to use file pdb instead of mol?
    Pino striccoli

  10. Thank you for providing these clear instructions on installing ChemDoodleWeb on WordPress. I attempted it before without success, as I’m not very tech-savvy. Can I use a PDB file instead of a MOL file?

Leave a Reply