Ten years are a long time when it comes to (recent) technologies. The first post on this blog was on the topic of how to present chemistry with three intact dimensions. I had in mind molecular models, molecular isosurfaces and molecular vibrations (arguably a further dimension). Here I reflect on how ten years of progress in technology has required changes and the challenge of how any necessary changes might be kept “under the hood” of this blog.
That first post described how the Java-based applet Jmol could be used to present 3D models and animations. Gradually over this decade, use of the Java technology has become more challenging, largely in an effort to make Web-page security higher. Java was implemented into web browsers via something called Netscape Plugin Application Programming Interface or NPAPI, dating from around 1995. NPAPI has now been withdrawn from pretty much all modern browsers.‡ Modern replacements are based on JavaScript, and the standard tool for presenting molecular models, Jmol has been totally refactored into JSmol.† Now the challenge becomes how to replace Jmol by JSmol, whilst retaining the original Jmol Java-based syntax (as described in the original post). Modern JSmol uses its own improved syntax, but fortunately one can use a syntax converter script Jmol2.js which interprets the old syntax for you. Well, almost all syntax, but not in fact the variation I had used throughout this blog, which took the form:
[caption]<img onclick=”jmolApplet([450,450],’load a-data-file;spin 3;’);” src=”static-image-file” width=”450″ /> Click for 3D structure[/caption]
This design was originally intended to allow browsers which did not have the Java plugin installed to default to a static image, but that clicking on the image would allow browsers that did support Java to replace (in a new window) the static image with a 3D model generated from the contents of a-data-file. The Jmol2.js converter script had not been coded to detect such invocations. Fortunately Angel came to my rescue and wrote a 39 line Javascript file that does just that (my Javascript coding skills do not extend that far!). Thanks Angel!!
In fact I did have to make one unavoidable change, to;
[caption]<img onclick=”jmolApplet([450,450],’load a-data-file;spin 3;’,’c1′);” src=”image-file” width=”450″ /> Click for 3D structure[/caption]
to correct an error present in the original. It manifests when one has more than one such model present in the same document, and this necessitates that each instance has a unique name/identifier (e.g. c1). So now, in the WordPress header for the theme used here (in fact the default theme), the following script requests are added to the top of each page, the third of which is the new script.
<script type=”text/javascript” src=”JSmol.min.js”></script>
<script type=”text/javascript” src=”js/Jmol2.js”></script>
<script type=”text/javascript” src=”JmolAppletNew.js”></script>
The result is e.g.
Click for 3D structure of GAVFIS
Click for 3D interaction
This solution unfortunately is also likely to be unstable over the longer term. As standards (and security) evolve, so invocations such as onclick= have become considered “bad practice” (and may even become unsupported). Even more complex procedures will have to be devised to keep up with the changes in web browser behaviour and so I may have to again rescue the 3D models in this blog at some stage!¶ Once upon a time, the expected usable lifetime of e.g. a Scientific Journal (print!) was a very long period (>300 years). Since ~1998 when most journals went online, that lifetime has considerably shortened (or at least requires periodic, very expensive, maintenance). For more ambitious types of content such as the 3D models discussed here, it might be judged to be <10 years, perhaps much less before the maintenance becomes again necessary. Sigh!
‡ At the time of writing, WaterFox is one of the few browsers to still support it. †An early issue with using Javascript instead of Java was performance. For some tasks, the former was often 10-50 times slower. Improvements in both hardware and software have now largely eliminated this issue. ¶Thus using Jquery.
Tags: Ajax, Computer programming, computing, Cross-platform software, HTML, Java, Java applet, Java technology, JavaScript, JavaScript libraries, jmol, JQuery, NPAPI, Scientific Journal, Software engineering, Technology/Internet, web browser behaviour, web browsers, Web-page security
Henry – nice timing on this post as I have given up on incorporating Jmol-enabled 3-D structures into my blog. I’m not sure that we recognized how transient technology can be on the Internet and preservation of enhanced publication is truly a major challenge! It’s not just a matter of moving files from tape to floppy disks to CDs to DVDs to the cloud – but also insuring that the software tools to interact with the files remains current.
I have made a few attempts at scanning the internet to find simple instructions for embedding JSmol interactive models into WordPress, but to no avail.
Might I trouble you to write up a post that walks one through how to set this up – including where to locate the JSmol files, what javascript needs to be placed in headers, etc and what the actual calls are within a particular post.
While is would be nice to figure out a relatively simple way of upgrading older posts to JSmol, I’ll settle for knowing how to make my new posts interactive again!
Hi Steve,
Re: simple instructions for embedding JSmol interactive models into WordPress. Firstly caveats. The syntax for embedding JSmol has changed from that used for Java; it is highly recommended that the new procedure be used whenever possible. What I described here is the Jmol legacy mode, the objective being to retain the syntax used in old blog posts if possible, or at least with minimal editing. Anyone setting up a new instance of a WordPress blog would be encouraged to investigate the more standard invocation. However, the existing JSmol syntax did not support a model where a static image is replaced by an interactive 3D model when the image is clicked (the onclick event), the intent being to avoid intrusion of 3D models for those who do not wish them. As referred to in the post, this onclick model is a work in progress, since onclick events themselves seem to be the subject of ongoing evolution.
If anyone wishes explicit instructions for implementing JSmol as per above, please contact myself directly in the first instance. Alternatively, you can try installing the JSmol2WP WordPress plugin (https://wordpress.org/plugins/jsmol2wp/), an example of which can be see at http://www.rzepa.net/blog/?p=14272. This mode loads the 3D models directly into the post without the need to click on a static image first. There is a (small?) chance you might find “plugin-conflict”, which would need to be resolved (as is the case on this blog itself and which I have never managed to remove). The invocation syntax used with JSmol2WP is not compatible with the mode described in this post and hence which is not suitable for rescuing old posts which used the Java-Jmol method.
This is a topic in which I have great interest: the use of animation to represent 3-D molecular structure / reaction dynamics. (It even formed part of my dissertation project some 19 years ago. During my defense, I pointed out to my committee how halting the animation caused the illusion of a 3-D molecule to collapse to a simple 2-D image.)
Now, some years later (and in my retirement), I have almost convinced myself that a multiframe .GIF animation is the most timely and ENDURING approach to presenting web-based animations. Java-ish webtools have always managed to slither out from a “NEW! Just What You Need For Web Animation!” to the inevitable “OOPS – About That NEW! Java – it just introduced yet ANOTHER Security problem for web browsers…” in short order.
I would love to be redirected in this notion, mainly because:pre-packaged .GIF animations are not “interactive” at all – the viewer either watches it or not, without any chance to modify any parameters. [However, one can create multiple .GIF files that represent many choices of parameters without introducing security issues.]
On the other hand, this approach allows administrators to COMPLETELY eliminate “Java-anything” from computing platforms, especially student computer-labs in which it is often useful for students to be able to view 3-D chem animations. And also, the .GIF animations require relatively little bandwidth for download (though the explosion in bandwidth speed over the last few years makes this point virtually moot.)
I would be eager to read some other comments from those who are also interested in this topic.
[P.S. I am not a WordPress user…]
Re GIF vs JSmol (dynamic or interactive)
I would start by stating that an image of a molecule is data about that molecule. One might next ask, is that data FAIR? (findable, accessible, interoperable and re-usable). Put simply I am convinced that an interactive JSmol model fits being FAIR much better than an animated GIF does. Here are some reasons.
1. Seeing a JSmol model carries the message that the data that generated it is available (right click in this case to access the menu). This fulfils the A, I and R of FAIR.
2. It would be almost impossible to regenerate any accurate data from an image, animated or not.
3. JSmol carries numerical data, which is not subject to copyright. On the other hand, we have gotten to the situation that an image is almost always copyrighted. This addresses the R (re-use) of FAIR; one is on more difficult ground re-using an image.
4. Part of the copyright aspect of an image is that it presents a field or point of view determined entirely by its creator/author. One cannot apply a different point of view to it. JSmol on the other hand generates a representation of the model as determined by the reader and not the author. I think this a very important distinction. I think science is better served by the latter.
5. JSmol serves up a toolbox to the reader. Nowadays a very sophisticated one, and enabled because of the underpinning data present. One can conduct experiments with JSmol in a manner not possible with an animated GIF.
When the modern Web was created, one of its founding principles was the separation of style and content; HTML for content, CSS for style. A GIF, animated or not, carries no such separation. A JSmol model does. Of course this separation brings its own issues, one of which is longevity, since the separation is largely achieved using technology and standards. But I would note that even the veritable GIF has its issues; it is relatively poorly compressed and better replacements have been suggested many times over the years. It too has a (relatively short) life expectancy.
Finally, in the implementation on this blog, one can have BOTH, where an image is replaced by an interactive model if the reader choses to click on it. That thumbnail image could of course be animated. I would find less useful if only the image was offered, without the chance for the reader to also gain access to the model and its data.
Above, I alluded how to present chemistry with three intact dimensions. I had in mind molecular models, molecular isosurfaces and molecular vibrations (arguably a further dimension). Coincidentally, a preprint has recently appeared entitled Sampling molecular conformations and dynamics in a multi-user virtual reality framework which introduces a toolbox NanoSimbox in which four dimensions (three spatial, one time) are packaged as virtual reality; https://arxiv.org/abs/1801.02884. The concept is also reviewed in Chemistry World and the New Scientist Magazine (twice, once in 2013 and again in 2018) as a whole new way of doing chemistry. That is quite a claim. That claim is based in part on the ability of the NanoSimbox package (at https://isci.itch.io/nsb-imd) to offer real-time molecular mechanics driven molecular dynamics simulations of processes such as host-guest dockings coupled with VR presentation of haptic-like manipulations of the molecules. To fully try out this whole new way of doing chemistry apparently requires acquisition of a good quality VR headset, which I admit I do not have.
But I feel I should say that both JSmol (and another package which I use a lot, Avagadro) have the ability to perform real time mechanics-driven optimisations of molecules coupled with rubber-band like positioning of atoms. I often use Avogadro for example to explore conformational preferences of floppy molecules by moving atoms around with the cursor to see how the molecule responds, in real time. And that ability has been around for a decade or more. So I am not yet convinced that NanoSimBox is truly a whole new way of doing chemistry, rather than just leveraging the currently hot topics of VR, AR, MR and AI. I will however watch that space.
I lack experience with WordPress, but will be happy to collaborate with someone that knows, in setting up a JSmol-based implementation of this feature.
It is possible in JSmol to have an initial image that is replaced by the interactive model onclick, or also to just put the image manually and implement the replacement as we have done with Henry’s old posts.
Note: It is clear that no more Java will be involved, JSmol is HTML5 including JavaScript (which should be quite future-proof). In fact, for simpler displays of molecules even the more efficient WebGL mode may be used. Some more sophisticated features in JSmol display have not been implemented in WebGL and do require to use the html5-only mode.