Recently, there's been some interest in using Javascript for cheminformatics. Duan Lian has made some progress by using the Google Web Toolkit (GWT) to convert Rich's MX toolkit from Java to Javascript. He has also started working on depiction by writing Java classes that handle drawing. These are then converted to Javascript using GWT. The initial results show proof of concept.I've taken a different approach to structure depiction by using an existing Javascript graphics library, processing.js. This should result in more efficient code, although ironically processing.js is itself a port of the Java graphics library, Processing.
For my proof of concept, I've implemented a 3D structure depiction. Here are the results.
As usual with these things, some browser caveats apply but it works for me on Firefox 3. Also note that though the code is actually in the Processing language and translated to Javascript, it could easily have been written directly in Javascript. processing.js supports interaction with the mouse, so a full 3D structure twirler could be implemented with a bit of effort and a sprinkling of MVC. I will leave this as an exercise for the reader. :-)
7 comments:
Noel, very interesting. I wonder how much work it would be to use MX-GWT (or better, MX compiled to a general-purpose, plain-vanilla javascript file) to convert a molfile into a set of Processing instructions...
AFAIK, that would be trivial (assuming that the javascript that comes out of MX-GWT allow access to the molecule object). You just need to write a javascript function that takes an MX molecule and calls methods of processing.js to draw it. As I said above, there's no need to use Processing instructions at all (I was just in a hurry).
I like the idea of using the canvas element for depictions - I was playing around with 2D depictions for a couple of hours before Christmas and hacked together something that could convert a jme string into a graph on the canvas. I could send you the code if you're interested.
Any idea what the state of play is with canvas elements and IE? Apparently the element won't be supported natively in IE8 and although there appear to be plugins available, that doesn't smell like a good solution - might as well just use an applet. So there would be no chance adopting this sort of idea at work in the near future. Pity, feels like there could be many opportunities in this area.
@Richard H: I don't know what a JME string is, but I'd be interested in seeing the code anyway. Rather than email it, can you just paste it at http://gist.github.com/ (there's no need to create an account), and then add a comment here with the link (I assume the code is free-for-all).
The processing.js website has some text on Canvas and browsers. As a commercial solution, lack of support in IE8 is a killer. For my purposes, since Firefox is available cross-platform, if it works in Firefox that's good enough for me. Microsoft would presumably prefer us to use Silverlight.
Hello again,
I've pasted a hastily tidied up version of my code at http://gist.github.com/43774
JME is the java molecular editor, which is developed by Peter Ertl at Novartis - see http://www.molinspiration.com/jme
The code converts a JMEfile string (which is a JS exposed method of the JME applet and has a really simple to parse format) to a molecule object which can then be depicted in a canvas element. I reckon there are 85 lines of useful javascript, plus some extra that were included for debugging purposes, so it's pretty lightweight and hopefully quite readable. Not that it does a very good job of depicting molecules (yet), since it only does the graph, not the atom types or bond orders.
I'd be interested to hear if you find it in any way useful!
Thanks Richard. For those of us without JME, we need to comment out lines 134-137.
I wonder would it be possible to port an existing depiction engine in Python to Javascript using epy.googlecode.com? That would avoid reinventing the wheel.
Nothing new under the sun: http://blahbleh.com/molecools.php?name=ethanol
Looks pretty snazzy too.
Post a Comment