Posts Tagged ‘Microsoft Windows’

Refactoring my lecture notes on pericyclic reactions.

Sunday, December 29th, 2013

When I first started giving lectures to students, it was the students themselves that acted as human photocopiers, faithfully trying to duplicate what I was embossing on the lecture theatre blackboard with chalk. How times have changed! Here I thought I might summarise my latest efforts to refactor the material I deliver in one lecture course on pericyclic reactions (and because my notes have always been open, you can view them yourself if you wish).

When I first started this course, I created notes using a typewriter, and used stencils to draw the chemical diagram (with a french curve for smooth lines). Now of course, for most (organic chemistry) lecturers, it’s a combination of a chemical drawing software tool (which we first saw around 1985) and a visual presentation package such as Powerpoint (although we do still have one lecture theatre with a real chalk board which many lecturers still use, albeit probably to slow their presentation down and avoid “death by Powerpoint” for the students). I never endorsed this combination, having avoided PPT for many years. Instead, I do it this way, and here I will list some of the aspects of my newly refactored notes.

  1. I am at ease writing HTML(5). Because it is native markup, it has stood me in good stead for many years, since it adapts to new technologies very well and is not dependent on proprietary software. One example might be when I first refactored such notes into an e-book format (EPUB) using Calibre. It converts HTML delightfully easily. I should say that one does have to use HTML “properly”. By this I mean ensuring that style is implemented using CSS, that meta-data is appropriately entered into the document header, and that the resulting document is checked using the HTML syntax checker Tidy. This latter is actually built into the software editor I have used for many years (BBedit), but the same validation can be achieved via sites such as http://www.dirtymarkup.com/
  2. The diagrams can be created using the usual tools (ChemDraw, ChemDoodle), but I convert the end product to the SVG format. Chemdoodle saves as this natively; Chemdraw can save as EPS, and then I convert this without issue to SVG using Scribus.  I adopted this approach quite a few years ago (in 2000 in fact), since I felt that scalable graphics (which is what SVG is) had a sounder future than raster graphics. So it has proved, since SVG is now natively supported in most new Web browsers (IE being the prominent exception). 
  3. I decided about six years ago to augment my pericyclic lectures with properly computed transition states. After all, the essence of this topic is the properties of the reaction transition state (my approach is to consider its aromaticity), and so a quantitative model for this seems desirable. Mine have all been computed using the ωB97XD/6-311G(d,p) method (also extensively employed on this blog).
  4. About three years ago, starting from these transition states, I computed intrinsic reaction coordinates for all the reactions. These are now deployed as animations in my notes. I use animated GIFs for this, since it is widely supported. A bonus was to discover that conversion of such diagrams into EPUB format preserves the animation, and many e-book readers that support this format honour the animation (but not all). 
  5. When my transition state library (now including around 100 in number) was expanding, I put some thought into how to express these models in my notes. Initially, I used Jmol to do so, and wrote some Javascript for the notes that would “pop-up” a separate window to display the Jmol model. Not surprisingly, this feature does not condense down into an EPUB book at all. Nor does it work if the notes are displayed on a tablet browser (most such devices do not support the Java that Jmol requires). There is some prospect on the horizon that the EPUB3 format might be capable of supporting such interactivity, but not quite yet. In refactoring my notes for the next lecture delivery, I pondered how to handle this aspect. A natural was JSmol, a recent evolution of Jmol which does not depend on Java, instead using the very different technology Javascript (implemented natively in the Web browser, just like SVG). If you are interested, some of the early evolution of this new approach can be seen in an article I wrote about 18 months ago, and which contains very early working examples.[1] The pop-up window approach does not work very well on tablets, and so a hideable insert into the main window was adopted. The reader can show/hide this display readily, and its position stays fixed whilst the notes scroll around it.toolbarMaking this window come and go itself requires a control toolbar and my current design (which may change!) is shown above. It clearly indicates to the reader that the notes they are reading have interactive components. I cannot resist also directing you to chemagic.com/ochem/ochem.htm which is a particularly good example of how to create interactive teaching notes. Into this inset window, all my transition states, molecular orbitals and other relevant surfaces can appear on demand.
  6. Notice that the notes are indexed (by Google) and so are text-searchable (I cannot help but note that my institution uses a commercial content-management system for most lectures except mine, and where text-search of materials is not possible for obscure reasons). The transition state models can be indexed using InChI key generated when the molecule is deposited into a repository (see below), but sub-structure searching is a trickier issue!
  7. If any student wants to follow-up on any one entry in my transition state library, I have helped them do so by linking each one to a digital repository. This is addressed by a persistent digital object identifier (DOI), and from there anyone interested can branch off and start doing their own modelling. 
  8. On the subject of the DOI, I decided to allocate the notes themselves with such a handle. It is http://doi.org/10042/a3uxp[2] You might imagine that allocating such persistent identifiers is something only publishers can do (and that it costs money). In fact, a so-called handle server comes with our digital repository, and a clever programmer (thanks Matt!) was able to extract the relevant code and make it a stand-alone resource. I will not list the URL here, since we really only want handles allocated using it to be associated with my department!
  9. The transition states are also allocated handles, and it is perfectly possible to combine JSmol with handles to create interactive windows that retrieve the relevant files using the data DOI and render them. We are writing an article on how to do this, so look out for it.
  10. I pondered printing long and hard! Having sweated to get interactive components and animations into the notes, I felt that destroying this feature by what I will call 2D printing was an oxymoron. But students like printing (about 20 million print copies are made at my institution each year). In fact, some more Javascript resulted in a small link in my toolbar above, which first hides all the interactive boxes (including the toolbar itself!) before printing the page, and then returning the screen back to normal. I feel bad in a sense about doing this, but printed notes do have one nice feature, one can write notes in the margin!
  11. So can one replicate note taking electronically, using say a tablet? This it has to be said remains a somewhat unsolved problem, especially in chemistry. One has vexed issues to confront such as whether to use a stylus for the purpose (either passive, or palm-rejecting active) and whether the stylus is compatible with whatever note taking software one wants to use. And how should any notes take be stored? One chemical solution is www.cambridgesoft.com/land/flick-to-share.aspx where a ChemDraw diagram can be “flicked” to another student, or indeed an instructor, and also stored in the cloud. But I think I am going to have to work hard to convince most students that e-notes are better than just printing the notes onto paper and using a ball-point pen. I do however, expect interesting things to happen in this regard in the next year or two, so a space to watch most certainly.
  12. I have added 3D printing to my list. It is not yet on demand from the models built into the notes, but our small library of 3D-printable molecular orbitals and transition states is growing, and perhaps in the near future, a student can simply press another link entitled “3D print” to produce a model for themselves. If you have never held a 3D-printed molecular orbital in your hands, try it! You might discover something new.
  13. Templates? I have tried to package the distracting “behind-the-scenes” stuff into scripts and stylesheets, so that an author need only write the fairly simple HTML. Perhaps there are excellent commercial packages out there that might make the task easier. But just like convincing students to abandon using paper to carry notes is a tough nut to crack, so too I suspect will be convincing my colleagues to adopt this format. Most are very wedded indeed to the traditional word processor and the traditional presentation package.

Well, the refactored lecture materials described above will be exposed to real students (and real tutors) in a few weeks time, and feedback will no doubt be received. But if anyone reading this blog wishes to comment on any aspect, I most certainly welcome it. 


In what I initially regarded as an unusual 15th birthday present, my father gave me a mechanical typewriter, along with a small booklet on how to learn to touch-type. In retrospect, this gift was very far-sighted. Rather than just playing football with my friends, I also learned to touch-type. This blog has just been written employing this skill.

Internet Explorer for Microsoft Windows 8.0 and 8.1 displays these components well.

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
  2. "Organic Pericyclic Reactions", 2014. http://doi.org/10042/a3uxp

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.

Data-round-tripping: wherein the future?

Tuesday, December 7th, 2010

Moving (chemical) data around in a manner which allows its (automated) use in whichever context it finds itself must be a holy grail for all scientists and chemists. I posted earlier on the fragile nature of molecular diagrams making the journey between the editing program used to create them (say ChemDraw) and the Word processor used to place them into a context (say Microsoft office), via an intermediate storage area known as the clipboard. The round trip between the Macintosh (OS X) versions of these programs had been broken a little while, but it is now fixed! A small victory. This blog reports what happened when such a Mac-created Word document is sent to someone using Microsoft Windows as an OS (or vice versa).

As you might have guessed, the molecular diagram arrives largely dead, and not re-usable. Opening the .docx archive (it is nothing more than a zip file) reveals only a JPEG file residing inside. Nothing that can be chemically repurposed. If the reverse process is undertaken, of creating a chemdraw diagram, and pasting it into Word on Windows, one finds in the .docx two components; a bit-mapped image linked to an active object containing the data. Only the first of these is recognised if the file makes its way to a Macintosh; i.e. the same story, the data is again lost. So the bottom line is that Mac users and Windows users cannot, after all, exchange repurposable molecular diagrams using Word documents using this combination of programs. This is not good.

But let me remind what happened around 1993. The word processor was joined by a program called the Web browser. In 1996, the underlying content carrier, HTML, became XHTML (an instance of XML). Right from day 1 almost, such XHTML could, and frequently was repurposed. A memorable example is that search engines could use it to index the Web. The XHTML easily survived trips to and from clipboards. In 1996, CML joined HTML as a way of carrying chemical information capable of round-tripping without loss (if need be). There are other chemical XML languages in use nowadays, including CDXML used by the ChemDraw program. Word itself now uses XML (the x in .docx). So, after 14 years, why am I still describing the difficulties above? I am frankly at a loss to explain why there is still a need to write this post.

All is not entirely lost. The CML4Word approach is designed to enable (chemical) data round tripping from the outset. Although I do not yet know if the CML created and stored in the Word document using this mechanism is recognised anywhere outside of Word 2007 on Windows?  If anyone can let me know of examples where such a CML-enabled Word document can be used in other environments, I would be very grateful (but not on  OS X, as I know already).

And as I might have mentioned in the previous post on this topic, things may not however be getting better in that other carrier of information and data, the mobile phone/iPad, as exemplified by operating systems such as iOS or Android. Watch this space, as they say.