Just put this in your webpage or blog post (note however that Blogger preview does not show the Twirlymol):
<div id="DIVNAME" height="200" width="200"></div>Replace DIVNAME with a unique name, and replace CHEMICAL_IDENTIFIER with any of the chemical identifiers accepted by the Chemical Structure Resolver; for example, a common name for a chemical, an InChI, or a SMILES string. More details over at the /Chemical/Structure blog. For now, let's just see it in action.
<script src="http://cactus.nci.nih.gov/chemical/structure/
CHEMICAL_IDENTIFIER/twirl?div_id=DIVNAME"
type="text/javascript"></script>
Replacing DIVNAME with 'buckyball' and CHEMICAL_IDENTIFIER with 'buckminsterfullerene' gives the following (go on, give it a twirl! - right mouse button to zoom in):
That was too easy - let's take one of Henzy Rzepa's crazy Mobius aromatic molecules. Steven Bachrach has written a review of some and very thoughtfully has included the InChIs. Replacing DIVNAME with 'crazymolecule' and CHEMICAL_IDENTIFIER with 'InChI=1/C14H14/c1-2-6-10-14-12-8-4-3-7-11-13(14)9-5-1/h1-14H/b2-1-,4-3-,9-5-,10-6-,11-7-,12-8-/t13-,14+' we have:
3D Nanoputians anyone? Here's the SMILES for a NanoKid: "c1(C2OCCO2)c(C#CC(C)(C)C)cc(C#Cc2cc(C#CCCC)cc(C#CCCC)c2)c(C#CC(C)(C)C)c1". Happy twirling.
13 comments:
Pretty cool Noel. Is there supposed to be a twisty buckyball in the post? I can only see the crazy molecule using Firefox. Unfortunately, it does not seem to work with Chrome.
Yes - there should be a twisty buckyball and Cameron Neylon said "Works flawlessly in Chrome under linux". (I'm running Firefox 3.5.5 on Windows XP for the record.) What versions are you using?
I've just installed Chrome on Windows, and it seems to be working fine. I'm not sure why it's not working for you...:-/
Well that was odd. Yes I can see both molecules with Chrome (Win XP, and Ubuntu). And once I updated Firefox (I haven't used it in a while) I can see both molecules in Firefox.
I tested it with Chrome and Firefox>3.5 on Windows XP while I implemented it. There it worked perfectly. It also works on IE7 and IE8, but it is very slow there (looks more like a slide show).
Possibly it takes a while to download Dojo the first time, and we don't wait long enough.
Noel,
So what do you think about GFX after using it with this project? Did it cause more frustrations than it prevented?
Microsoft announced recently that IE9 will provide an improved Javascript engine and will support HTML5, which is promising. Between that and Google Chrome Frame, it looks like Canvas is poised to really take off.
IE9 Announcement
-Kevin
This is very nice - and I may try to include it in some of my posts in the future. Particularly when people don;t include 3-D coordinates in their supporting materials and I don't feel like re-optimizing it!
But as an aside, the "crazy molecule" you've included is actually not one of Henry's Möbius molecules but the product of an electrocyclization of the "crazy molecule". Here's the InChI of the real thing (it's compound 1 from my post): InChI=1/C14H14/c1-2-4-6-8-10-12-14-13-11-9-7-5-3-1/h1-14H/b2-1-,3-1-,4-2-,5-3-,6-4-,7-5+,8-6+,9-7-,10-8+,11-9-,12-10+,13-11-,14-12-,14-13-
Steven
Cool! Any idea why it doesn't show up in blogger's preview?
@Kevin: No problems with GFX (apart from figuring out how to read the docs). I'm only drawing lines and circles after all. It would have been easier though if they simply allowed you to draw lines from point A to point B, instead of having to rotate, scale and translate things.
Regarding HTML5 and IE, this is great news of course, but only because IE has been the prodigal son. Presumably Google's Chrome Frame finally forced them to agree to implement the standard.
@Steven Bachrach: Glad you liked it. Sorry about fudging the science - I tried the InChI for molecule 1 and when that didn't work, I tried number 2 and went with it.
@Jan: Blogger's preview is not a complete HTML renderer. So I'm guessing that the hacks we use to download and insert Javascript are simply not recognized. BTW, for blogger I needed to close the script tag explicitly. I've updated the blog post above to help others avoid this problem.
that's very cool :) I just played with it a little bit too
just in case you enjoy bug reports: i seem to have a problem with displaying three of those molecules on the same page. if you click either the first post ( http://chemical-quantum-images.blogspot.com/2009/11/twirlymol.html ) or the second post ( http://chemical-quantum-images.blogspot.com/2009/11/twirlymol-2.html ) you will see 1 and 2 molecules respectively. but if you click the blog, you only see 2 in total
Any chance that it could show Uncle Al's chiralanes? Eg, (S)-[6.6]-Chiralane.
Bug (sort of) report. Didn't appear in 'blogger preview' but appeared when post was submitted.
ps nice app ... hope to use it in future posts.
@Felix: I'll follow this up with Markus. It seems likely we should delay display of the twirlymol until various things are loaded.
@gyg3s: I don't know if it'll work or not - if you can get the SMILES string out of ChemDraw or whatever, give it a go.
Regarding blogger preview, I'll update the post above, as I can see that this would confuse people.
Post a Comment