Interactive chemistry ebooks: interactive figures

Here is version 2 of my ebook mockup page (see here for a description of version 1).  Actually there are two versions: one using Jmol and one for the iPad.

The Jmol version is how I would like the page to look.  The static figures are replaced with interactive Jmol versions embedded right in the page, and the figure captions contain links (denoted by ">>") to larger version of the figures on a separate page, that also contain extra features such as animations (Figure 3.1) or overlays (Figure 3.2).  An alternative design would have been to keep the static images, but insert links to the larger figures.  I think I like the current look better.  But for pages with more figures loading-time could become an issue with Jmol.

The iPad version is what is currently possible for the iPad with ChemDoodle Web Components.  We are waiting for two things to happen: 1) WebGL in Mobile Safari, which will allow real 3D representations of the molecules, and 2) Implementation of contours and surface maps in ChemDoodle Web Components.

For the iPad version I generated the necessary ChemDoodle Web Component HTML code using the ChemDoodle software package, as I show in this screencast.  The mol2 file I start with is generated with Avogadro.

ChemDoodle costs $60, and normally I restrict this blog to free software, but I am making an exception here because I think iChemlabs deserves to be supported since they made ChemDoodle Web Components open source.  Furthermore, since I have access to the source code I could probably figure out the format for the HTML code, if I wasn't so lazy.

Related blog-posts:
Interactive chemistry ebooks: highlight and annotate
Interactive chemistry ebooks: let us start now!
ChemDoodling: now in 3D, but not (yet) on the iPad
ChemDoodling on the iPad and the future of interactive chemistry text books
iPad: even 3D molecules that can be viewed from any angle

ChemDoodle Web Components: 2D to 3D and MolGrabber

Kevin Theisen and his colleagues over at iChemLabs have made a very useful web page that is both a great builder and a great educational tool.  I have written about "2D to 3D building" before, but what makes this site special is the integration with MolGrabber combined with Chemical Indentifier Resolver by Markus Sitzmann, which generates 3D coordinates.

First, I can't think of an easier way* to build (i.e. generate the coordinates of), say, aspirin, than typing "aspirin".  And of course you can modify the structure further, using aspirin as a starting point.  In the screencast I show how to save the file and load it into Avogadro for minimization and GAMESS input file generation.  UPDATE: Kevin has informed me that the coordinates you get are the 2D coordinates from the sketcher.  *Also, there is actually an easier way as explained in the comments.

Second, the site is a great tool for showing/learning the connection been nomenclature and structure (what's the difference between 1-butene and 2-butene?), as well as the connection between 2D and 3D structure (cyclohexane is not flat like benzene!). 

Currently, in order to see the 3D model you need to use the Chrome or Firefox 4 browser.  Also, it is a lot of fun to draw the 2D molecules on the iPad!  But the 3D model does not work in mobile Safari yet.

Lastly, iChemLabs has also made another very useful site where you can go directly from the name to the 3D structure (though here you don't have access to the coordinates).

ChemDoodling: now in 3D, but not (yet) on the iPad

 

You need Google Chrome or Firefox 4 to view the molecule.

In a previous post I wrote "The 3D version of ChemDoodle Web Components requires something called WebGL, which is not available in standard browsers yet, but should be soon.  You can get access to it now by downloading Google Chrome (BETA)."

Now you just need Google Chrome or Firefox, i.e. if you view this post in the Google Chrome or Firefox 4 browser you should be able to interact with the molecule.  Other browsers should include WebGL soon, and when it reaches Mobile Safari, it should work on the iPad.

This means ChemDoodle Web Components is ready for use in research and education.  It's quite easy to use: see here for installation instructions and here for a simple html example.  Furthermore, "Over the next couple years, we intend to match all functionality in JMol" according to Kevin Theisen.

I note that the ChemDoodle Web Components are open source, so feel free to pitch in!

ChemDoodling on the iPad and the future of interactive chemistry textbooks

Interactive model of morphine

I have bought an iPad!  In honor of this purchase I bring to you this blog's first interactive figure that also works on the iPad (and most other mobile devices).  It is made with ChemDoodle Web Components (a modified version of this page), an open source javascript based toolkit for chemistry, made by Kevin Theisen and co-workers at his company iChemLabs.

Readers of this blog will know that I am quite fond of Jmol for interactive molecular models, but Jmol is written in Java, which is not supported by the iOS operating system that iPads, iPhones, and iPods use - and perhaps it never will be.   This decision by Apple basically means back to square one for interactive chemistry when it comes to the iPad.

I know of just two options for interactive models for the iPad: the Molecules app by Brad Larson and ChemDoodle Web Components (TwirlyMol does not appear to be interactive on the iPad).  The Molecules app looks a bit more three dimensional, but works only on the iPad.  Chemdoodle Web Components should work on most browsers and most operating systems, and a fully 3D version is also available.  The 3D version of ChemDoodle Web Components requires something called WebGL, which is not available in standard browsers yet, but should be soon.  You can get access to it now by downloading Google Chrome (BETA).

It is the Molecules app that is used in the interactive text book from Inkling that I wrote about earlier (thanks again to Henry Rzepa for the info).  But I think ChemDoodle Web Components holds tremendous promise for interactive chemistry textbooks when combined with another new innovation on the horizon: EPUB3.

Epub is basically code that makes XHTML look nice when viewed in an epub reader (such as iBooks), but the current version does not allow for things like javascript, needed for interactivity.  That will change with epub3 and, when combined with ChemDoodle Web Components, should allow us to make interactive chemistry textbooks that can be read on most devices.   It will be an exciting time.