Twirl Your Identifier
Posted in Chemical Identifier Resolver, Uncategorized on November 20th, 2009 by Markus – 3 Comments
A few month ago I stumbled over the fantastic TwirlyMol javascript posted by Noel O’Boyle on his blog. TwirlyMol creates a live 3D model of a chemical structure just in your webpage without the need of any plugins (the only thing that is required is a modern browser). Well, I thought it would be really cool to link TwirlyMol with the Resolver because this would offer a simple way to use it as a 3D molecule viewer, or, it would allow to embed 3D structure models into web pages, all by just crafting an URL – o.k., here it is.
As structure representation you can use any chemical structure identfier that is accepted by the Resolver including arbitrary SMILES and InChI strings.
Use it as a 3D structure viewer:
http://cactus.nci.nih.gov/chemical/structure/aspirin/twirl http://cactus.nci.nih.gov/chemical/structure/CN(Cc1cnc2nc(N)nc(N)c2n1)c3ccc(cc3)C(=O)NC(CCC(O)=O)C(O)=O/twirl http://cactus.nci.nih.gov/chemical/structure/InChI=1S/C6H12/c1-2-4-6-5-3-1/h1-6H2/twirl
You can resize it:
http://cactus.nci.nih.gov/chemical/structure/aspirin/twirl?height=200&width=200 http://cactus.nci.nih.gov/chemical/structure/aspirin/twirl?height=400&width=400 http://cactus.nci.nih.gov/chemical/structure/aspirin/twirl?height=800&width=800
Embed it into your own web page:
a. create div element in your page, tag it with an id (could be an arbitrary name), and set the height and width attribute of the div element:
<div id="twirler" height="300" width="300"></div>
b. load the twirl script from cactus.nci.nih.gov and add the URL option “div_id” which names the id of the div element:
<script src="http://cactus.nci.nih.gov/chemical/structure/aspirin/twirl?div_id=twirler" />
Thats it. The rest is done by the javascript script coming from our webserver. Since TwirlyMol depends on the dojo and dojo.gfx javascript libraries these are loaded first from Google AJAX Libraries API into your web page. The 3D coordinates needed for the rendering of the structure are calculated by CORINA. You can use it also for more than one 3D model in the same web page, just use unique id names for the div element.
I tested on the following browsers how it works:
- Firefox. It works well on Firefox<3.5, however is much slower compared to the Firefox>3.5. I used Firefox on Linux and Windows XP
- Google Chrome. It works fine there and it is fast. OS was Windows XP
- Safari. I tested it only quickly there and I don’t know any particular version numbers (neither of the OS nor the browser) but it seems to work fine there, too.
- Internet Explorer. Well, well – it works, I tested it on IE7 and IE8 but it reminds more of a slide show than a molecule viewer.
If you experience any problems with TwirlyMol embedded by the Chemical Identifier Resolver, please report them to us. A thing I haven’t tested much is how it works with websites that uses the dojo and dojo.gfx libraries themselves. I also would be happy to hear about (present and absent) interferences with other javascript libraries like mootools, jquery, prototype.js etc. I used TwirlyMol with prototype.js myself and so far I didn’t run into any issues.
Read also Noel’s post about this on his blog, he has some nice live examples using this service (embarrassingly, I still have to figure out how I get TwirlyMol working in my Wordpress blog here 
)
