My first attempt at a Javascript molecular viewer culminated in TwistyMol. For TwistyMol, I took as my starting point processing.js and consequently ran into some difficulties on IE, which doesn't support Canvas.
TwirlyMol is my attempt to start over with a browser-independent Javascript vector graphics library. I googled a bit and came across some pointers on Stack Overflow (a Q&A website that does things in a new way). I choose to go ahead with dojox.gfx, which is an experimental component of the Dojo javascript library. On IE, it uses VML, while on Firefox, it uses SVG (Canvas is also supported). I reckoned that this might improve performance on IE. Also, Dojo is likely to be better supported going forward, unlike processing.js which is essentially a one-man job (sure, the one man is the author of jQuery, but still) and its goal is quite different.
So, here's the demo.
It's ready to use for whatever you want. If you think about it, the code behind TwirlyMol can easily be adapted to displaying other types of 3D data, for example principal components graphs. What else would be useful? That's up to your imagination (comments below welcome).
And I think this draws to a close my involvement in Javascript molecular viewers. Hope y'all had fun. I've put the code up on Github just to see what happens. Maybe someone wants to add perspective.
Notes:
(1) Colours of atoms taken from the Blue Obelisk Data Repository. Even if you don't understand what the Blue Obelisk is about, I'm sure you can appreciate the benefit of shared chemical resources like these data.
(2) IE performance is still much slower than Firefox, but is better than with Twistymol.
(3) With Firefox, adding a large number of SVG molecules to a page is much slower than with Canvas. If doing this in practice, you'll need to add them in chunks of 50 or so, with a setTimeout() to add the next 50.
(4) Coding Javascript for IE really is frustrating.
(5) If you use mouse gestures, rotating or zooming with the right mouse button can trigger a gesture event. One way around this would be to implement support for modifier keys so that shift+left button causes right button behaviour, while alt+left would cause middle button behaviour. This would be quite easy as the dojox.gjx library has a function for testing whether shift is held down (I can't remember about the alt).
Noel:
ReplyDeleteI just wanted to let you know that we are making use of your TwirlyMol fairly extensively. We use it as part of the ChemEd DL Student Portal and the ChemPRIME wiki textbook project. Take a look at www.chemprime.chemeddl.org -> "Help for contributors" to see the way we have implemented it or you can see the Student Portal for an example of how we use it for students.
The only difference is that we decided against using the shadows (could cause misconceptions regarding light) and we also changed the colors of C and H slightly. The problem with a white background is that a white H doesn't show up!
I would like to add any sort of acknowledgment to your work that you would like. On the "Help for Contributors" page we have a link to this Blog post. Anything better you would prefer?
Wow - that's great, and thanks for letting me know. (I think you mean wiki.chemprime.chemeddl.org, BTW.) The acknowledgement you've given is fine.
ReplyDeleteYeah, you found the right URLS... sorry about that!
ReplyDeleteI just wanted to let you know my actual contact name (I developed ChemPaths), so I switched accounts on you. I also wanted to offer a few of the corrections which I made to the TwirlyMol code. They both involve coloring (one is matching the right element name and the other fix is in the Blue Obelisk Colors).
It would be great to have those fixes Justin, so please contact me by email (or fork the git repository and commit the changes).
ReplyDeleteIt's a shame that 2D and 3D Web drawing capabilities are so non-portable, especially since IE with its big market share is so lacking in this respect.
ReplyDeleteWhile in an ideal world, it should be considered an overengineered overkill, in practical applications, PDFs with embedded 3D models, renderered reliably on all platforms and browsers with Acrobat reader, is in my experience the most portable method of bringing 3D structure models to the user on the Web.
See www.xemistry.com/pdf3d
@Wolf-D.: I couldn't agree more. It's quite surprising how hard it is to use IE for this kind of thing. I haven't seen PDFs used in this way before - that's an interesting way of doing it. However, it is a depressing thought that maybe PDFs are the future of the web. :-)
ReplyDeleteNoel
ReplyDeleteJust to let you know I absolutely love TwirlyMol as a lightweight Jmol alternative. Has lots of potential for Web-based science education.
In my hands, display performance with Internet Explorer can be improved with the Google Chrome Frame plug-in for Internet Explorer.
Keep up the good work.
Noel
ReplyDeleteJust wanted to add my thanks for TwirlyMol. I'm just putting the finishing touches to a TwirlyMol plugin Filter for the open-source VLE Moodle. This should make it easy for teachers to add 3-D chemical structures to their online courses. Though wonderful in many respects, Jmol can be rather heavyweight for this.
In the course of this, I have identified a few fixes/features that may be of general interest.
1. Twirlymol currently only reads the first letter of element symbols. Hence Cl is misidentified as C (grey rather thabn green) Br as B (pink rather than brown.
The SDF specification has element symbols in columns 32-34 inclusive.
http://www.symyx.com/downloads/public/ctfile/ctfile.jsp
The following in twirlymol.js fixes things for me. though there may be more elegant solutions.
// var e = lines[i].substring(30, 32);
// e = e.replace(/^\s+|\s+$/g, '')
var e = lines[i].substring(31, 34);
e = e.replace(/\s+/g, '')
I also had a couple of issues with the TwirlyMol div height and width being declared in a non-standard way(rather than as style properties). In some cases browsers (particularly IE8) would fail to render TwirlyMols if their was an inconsistency with the webpage DOCTYPE declaration. Also, some commonly used CMS editors (TinyMCE, CKE etc) tend to strip out non-standard markup making it hard to embed TwirlyMols. I have fixed this in twirlymol.js as follows.
// var w = container.getAttribute("width");
// var h = container.getAttribute("height");
var w = dojo.style(elemID, "width");
var h = dojo.style(elemID, "height");
// Drop back to legacy div height and width attributes if div style height (only) not set. NB div style width defaults to 100% if not set.
if (h == 0){
var w = container.getAttribute("width");
var h = container.getAttribute("height");
}
These are set in the web page as e.g.
<div id="twirly1" style="height:300px; width:300px">
I have also tweaked the rendering so that Hydrogens appear as small spheres rather than small disks. Happy to provide the code for this if it is of any interest.
I'm loading .sdf files initially via PHP
$sdf = file_get_contents('file.sdf');
which works for remote URLs as well as local files.
Then fixing the line returns:
$sdf = str_replace("\n", "\\n", $sdf);
and finally loading as a JavaScript string
var sdf ="<?php echo $sdf ?<;
or equivalent.
Keep Twirling!
Geoff
Thanks Geoff for the encouragement and the patches. I'll incorporate these into the base code. I'd be very interested to see your hydrogen sphere modification - maybe send it to me off-list.
ReplyDeleteJust tried Internet Explorer 9 Beta
ReplyDeletehttp://www.beautyoftheweb.co.uk/
with TwirlyMol. Had to use the Compatibility View icon, but Twirlymol seemed to be a bit more responsive than with previous versions of IE - if not quite as interactive as with IE + Google Chrome Frame, Chrome, Firefox etc.