Posts Tagged ‘JavaScript’

Ten years on: Jmol and WordPress.

Wednesday, May 16th, 2018

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:

<img onclick=”jmolApplet([450,450],’load a-data-file;spin 3;’);” src=”static-image-file” width=”450″ /> Click for 3D structure

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;

<img onclick=”jmolApplet([450,450],’load a-data-file;spin 3;’,’c1′);” src=”image-file” width=”450″ /> Click for 3D structure

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

Click for 3D structure of GAVFIS

Click for 3D

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:, , , , , , , , , , , , , , , , , ,
Posted in Interesting chemistry | 6 Comments »

Revisiting (and maintaining) a twenty year old web page. Mauveine: The First Industrial Organic Fine-Chemical.

Thursday, February 2nd, 2017

Almost exactly 20 years ago, I started what can be regarded as the precursor to this blog. As part of a celebration of this anniversary, I revisited the page to see whether any of it had withstood the test of time. Here I recount what I discovered.

The site itself is at www.ch.ic.ac.uk/motm/perkin.html  and has the title “Mauveine: The First Industrial Organic Fine-Chemical” It was an application of an earlier experiment[1] to which we gave the title “Hyperactive Molecules and the World-Wide-Web Information System“. The term hyperactive was supposed to be a play on hyperlinking to the active 3D models of molecules built using their 3D coordinates. The word has another, more negative, association with food additives such as tartrazine – which can induce hyperactivity in children – and we soon discontinued the association. This page was cast as a story about a molecule local to me in two contexts; the first being that the discoverer of mauveine, W. H. Perkin, had been a student at what is now the chemistry department at Imperial College. The second was the realization that where we lived in west London was just down the road from Perkin’s manufacturing factory. Armed with (one of the first) digital cameras, a Kodak DC25, I took some pictures of the location and added them later to the web page. The page also included two sets of 3D coordinates for mauveine itself and alizarin, another dyestuff associated with the factory. These were “activated” using HTML to make use of the then very new Chime browser plugin; hence the term hyperactive molecule.

This first effort, written in December 1995, soon needed revision in several ways. I note that I had maintained the site in 1998, 2001, 2004 and 2006. This took the form of three postscripts to add further chemical context and more recent developments and in replacing the original Chime code for Java code to support the new Jmol software (Chime itself had been discontinued, probably around 2001 or possibly 2004). With the passage of a further ten years, I now noticed that the hyperactive molecules were no longer working; the original Jmol applet was no longer considered secure by modern browsers and hence deactivated. So I replaced this old code with the latest version (14.7.5 as JmolAppletSigned.jar) and this simple fix has restored the functionality. The coordinates themselves were invoked using the HTML applet tag, which amazingly still works (the applet tag had replaced an earlier one, which I think might have been embed?).  A modern invocation would be by using e.g. the JSmol Javascript based tool and so perhaps at some stage this code will indeed need further revision when the Java-based applet is permanently disabled.

You may also notice that the 3D coordinates are obtained from an XML document, where they are encoded using CML (chemical markup language[2]), which is another expression from the family that HTML itself comes from. That form may well last rather longer than earlier formats – still commonly used now – such as .pdb or .mol (for an MDL molfile). 

Less successful was the attempt to include buttons which could be used to annotate the structures with highlights. These buttons no longer work and will have to be entirely replaced in the future at some stage.

The final part of the maintenance (which I had probably also done with the earlier versions) was to re-validate the HTML code. Checking that a web page has valid HTML was always a behind-the-scenes activity which I remember doing when constructing the ECTOC conferences also back in 1995 and doing so probably does prolong the longevity of a web page. This requires “tools-of-the-trade” and I use now (and indeed did also back in 1995 or so) an industrial strength HTML editor called BBedit. To this is added an HTML validation tool, the installation of which is described at https://wiki.ch.ic.ac.uk/wiki/index.php?title=It:html5 I re-ran this again† and so this 2017 version should be valid for a little while longer at least. The page itself now has not just a URL but a persistent version called a DOI (digital object identifier), which is 10.14469/hpc/2133[3]. In theory at least, even if the web server hosting the page itself becomes defunct, the page could – if moved – be found simply from its DOI. The present URL-based hyperlink of course is tied to the server and would not work if the server stopped serving.

To complete this revisitation, I can add here a recent result‡. Back in 1995, I had obtained the 3D coordinates of mauveine using molecular modelling software (MOPAC) together with a 2D structure drawing package (ChemDraw) because no crystal structure was available. Well, in 2015 such structures were finally published.[4] Twenty years on from the original “hyperactive” models, their crystal structures can be obtained from their assigned DOI, much in the same manner as is done for journal articles: Try DOI: 10.5517/CC1JLGK4[5] or DOI: 10.5517/CC1JLGL5[6].

At some stage, web archaeology might become a fashionable pursuit. Twenty year old Web pages are actually not that common and it would be of interest to chart their gradual decay as security becomes more important and standards evolve and mature. One might hope that at the age of 100, they could still be readable (or certainly rescuable). During this period, the technology used to display 3D models within a web page has certainly changed considerably and may well still do so in the future. Perhaps I will revisit this page in 2037 to see how things have changed!

†The old code can still be seen at www.ch.ic.ac.uk/motm/perkin-old.html

‡It should really be postscript 4.

References

  1. O. Casher, G.K. Chandramohan, M.J. Hargreaves, C. Leach, P. Murray-Rust, H.S. Rzepa, R. Sayle, and B.J. Whitaker, "Hyperactive molecules and the World-Wide-Web information system", Journal of the Chemical Society, Perkin Transactions 2, pp. 7, 1995. https://doi.org/10.1039/p29950000007
  2. P. Murray-Rust, and H.S. Rzepa, "Chemical Markup, XML, and the Worldwide Web. 1. Basic Principles", Journal of Chemical Information and Computer Sciences, vol. 39, pp. 928-942, 1999. https://doi.org/10.1021/ci990052b
  3. H. Rzepa, "Molecule of the month: Mauveine.", Imperial College London, 2017. https://doi.org/10.14469/hpc/2133
  4. M.J. Plater, W.T.A. Harrison, and H.S. Rzepa, "Syntheses and Structures of Pseudo-Mauveine Picrate and 3-Phenylamino-5-(2-Methylphenyl)-7-Amino-8-Methylphenazinium Picrate Ethanol Mono-Solvate: The First Crystal Structures of a Mauveine Chromophore and a Synthetic Derivative", Journal of Chemical Research, vol. 39, pp. 711-718, 2015. https://doi.org/10.3184/174751915x14474318419130
  5. Plater, M. John., Harrison, William T. A.., and Rzepa, Henry S.., "CCDC 1417926: Experimental Crystal Structure Determination", 2016. https://doi.org/10.5517/cc1jlgk4
  6. Plater, M. John., Harrison, William T. A.., and Rzepa, Henry S.., "CCDC 1417927: Experimental Crystal Structure Determination", 2016. https://doi.org/10.5517/cc1jlgl5

Tags:, , , , , , , , , , , , , , , , , , , , , , , , , , ,
Posted in Chemical IT, Historical | 1 Comment »

Electronic notebooks: a peek into the future?

Tuesday, September 16th, 2014

ELNs (electronic laboratory notebooks) have been around for a long time in chemistry, largely of course due to the needs of the pharmaceutical industries. We did our first extensive evaluation probably at least 15 years ago, and nowadays there are many on the commercial market, with a few more coming from opensource communities. Here I thought I would bring to your attention the potential of an interesting new entrant from the open community.

My very first post on this blog six years ago related to incorporation of the Jmol molecular viewer into posts, and it has been a feature of many since. A little more than two years ago, Jmol was recast into JSmol. This had become possible because JavaScript engines built into modern web browsers were finally getting the sort of performance needed to display molecules (years and years ago, lets say ~1990, such display required very fancy hardware kit such as Silicon Graphics workstations). Around the same time, another well-established Java-based molecule sketcher, JME (Java molecular editor) also became JavaScript based. My own interest in this sort of Web-based behaviour actually crystallised last December, when I decided to refactor my own lecture notes into a tablet-friendly format using JSmol, with some questions directed at the  formidably excellent Jmol discussion list. One of these related to how students might annotate such lecture notes with chemical sketches and store the results for future study or revision. Otis Rothenberger starting exploring various mechanisms for such local storage (using Web browsers), and in the last month or so has found a way of exploiting something called  HTML5 local storage, which allows the sort of capacity needed.  These three technologies have now come together on Otis’ site, which you can now view as CheMagic Notebook (this might be a .com site, but I believe the concept is very much open).

NBTogether with the Virtual model kit (VMK, itself now part of JSmol) this combination is starting to resemble a very interesting mechanism for creating an immersive lecture note environment, almost you might say a lecture note ecosystem. I would argue that for the first 30 years of the digital document era, most people preparing lecture notes became mesmerised (distracted?) by the need to print the outcomes with complete fidelity. It is only recently that the focus has turned to “beyond the PDF” (or beyond the PPT) and much richer mechanisms. So now we have lecture notes morphing into an ecosystem where:

  1. the objects themselves can be interactive (3D models, spectra, animations etc)
  2. or reference further models and associated data held in digital repositories
  3. or built from scratch in response to stimulation from peers, tutorials, workshops or lectures (using eg VMK or JME)
  4. and such annotations in effect themselves can be spliced into the student’s own copy of these notes,
  5. with the whole being regarded as a running notebook created from the initial seed of a lecturer’s materials augmented by the student’s own annotations.

I have focused here on where I started, i.e. refactoring my own lecture notes. But the above concepts could easily morph into eg a research project notebook, a rebundling into smaller segments which are themselves published into digital repositories (and there assigned their own persistent digital object identifiers) and ultimately further morphing into scholarly articles submitted to say a journal. These could represent a continuum, not discrete (and non-communicating) objects.

So will “lecture notes” actually start to change from their conventional (printable) form into something related to the above? Well, I have not addressed the largest hurdle preventing this; giving the content creators (i.e. the lecturers) the training, skills and most importantly the motivation to start to venture down this pathway. Otis has shown it should be technically possible. Come back and revisit this post in ten years time to see what actually did happen!

 

 

 

 

Tags:, , , , , , , , , , ,
Posted in Chemical IT | No Comments »

Test of JSmol in WordPress: the background story.

Sunday, June 8th, 2014

A word of explanation about this test page for experimenting with JSmol. Many moons ago I posted about how to include a generated 3D molecular model in a blog post, and have used that method on many posts here ever since. It relied on Java as the underlying software (first introduced in 1996), or almost 20 years ago. Like most software technologies, much has changed, and Java itself (as a compiled language) has had to move to improve its underlying security. In the last year, the Java code itself (in this case Jmol) has needed to be digitally signed in a standard manner, and this meant that many an old site that used unsigned older versions has started to throw up increasingly alarming messages.

To continue to experience the intended effect of eg Jmol, the user in turn has had to increasingly accept or tinker with their local Java settings; this has indeed become increasingly intrusive. And less experienced users often do not wish to engage with any of this activity. About two years ago, the Jmol community started having concerted discussions about what to do regarding Java, and they also started to converge with other developers and communities about a solution based on Javascript (which despite the name operates in an entirely different way from Java). Some of this early activity I tried to capture in a datument written during the summer of 2012[1]. The magnitude of the problem was considerable, how to refactor tens of thousands of Java-Code into JavaScript. The story of how this miracle was accomplished must be written by people like Bob Hanson and Takanori Nakane and perhaps some day they will. However, inserting all this wonderful technology into eg a WordPress blog still needed doing, and this task was undertaken by Jim Hu (and there are many others that are part of this effort, they all need to be thanked).

I volunteered to test, but so that Jim could see the effects of this testing, this (public) test page was created. Behind the scenes, the bugs have been winkled out, although much still remains to be done. This page will no doubt continue to evolve as this is done, and when it all works, I will no doubt add a postscript. So keep watching this space. It has two examples, each of which should produce a box with a molecule, as per this page.

  1. [jsmol pdb=’1PRC’ caption=’Load 1PRC’ commands=” id=’a1′ debug=’true’]
  2. [jsmol caption=’Load local file’ fileurl=’http://rzepa.net/blog/wp-content/uploads/2014/06/test2.pdb’ id=’a2′ commands=’=spacefill 23%;wireframe 0.15;color cpk;’ debug=’true’]

References

  1. H.S. Rzepa, "Chemical datuments as scientific enablers", Journal of Cheminformatics, vol. 5, 2013. https://doi.org/10.1186/1758-2946-5-6

Tags:, , , , , ,
Posted in Chemical IT | 1 Comment »

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

Sunday, December 11th, 2011

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:, , , , , , , , , , , , , , , , ,
Posted in Chemical IT | 11 Comments »

Embedding molecules in blogs: ChemDoodle, WebGL and SVG

Friday, December 24th, 2010

If you get a small rotatable molecule below, then ChemDoodle/HTML5/WebGL is working. Why might this be important? Well, the future is mobile, in other words, devices that rely on batteries or other sources of built-in power. This means the power guzzling GPU cards of the past (some reach ~400 Watts!) cannot be used. Rather than using e.g. a full power OpenGL library, one will use Web-based graphics libraries, which (to quote Wikipedia) extends the capability of the JavaScript programming language to allow it to generate interactive 3D graphics within any compatible web browser. A typical target device might be for example Apple’s iPad (for which the redoubtable Jmol, which is based on Java, is unlikely to ever work).

To find out if your device and its browser can support this type of graphical display, go to either this test page or this more general one (which at the time of writing actually gets the WebGL test wrong!).

I have deployed an earlier graphical methodology in other posts (SVG), which many browsers now support. This combination of HTML5, SVG and WebGL is the future! For its use on another blog, see here.

Tags:, , , , , , , , , , , ,
Posted in Chemical IT | 3 Comments »