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.
- 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.
- 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.
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.
- As administrator, go to
(or whatever theme you use) and in the file header.php, paste the following
- 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.
- Invoke an instance of a molecule thus;
- 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);
- 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.
- 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.
- 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.