07 Jan 09 JavaScript for Cheminformatics:JavaScript Molecule Editor and 3D Structure Viewer
Very happy to read about Rich’s post. It was one month ago when I released a demo of molecule structure renderer. Sorry for disappearing from the Internet so long, but I had to cope with final exams for 9 courses. However, I passed all of them and are now enjoying my winter vacation for 35 days, enough to make the tittle of this post to become true.
Today, I got something to show you.
Have a look at renderer and editor demo here.
You can click the first two buttons to load a demo structure with different sizes, and you can read a demo molecule. You can move your mouse on atoms, drag the editor on atoms and in white space to see what happened. If you’re using IE, especially IE6, the dragging process may not be so smooth, as IE is famous for its super slow JavaScript engine.
OK, what happened after you clicked the buttons. The buttons for loading editor have a onClick attribute with JavaScript below.
initEditor('editor1',500,300);
And behind this function is:
function initEditor(divID,width, height){
if(window.__initEditor){
document.getElementById(divID).innerHTML="";
__initEditor(divID,width, height);
}else{
document.getElementById(divID).style.width=width+"px";
document.getElementById(divID).style.height=height+"px";
document.getElementById(divID).innerHTML="Loading...";
setTimeout(function(){initEditor(divID,width, height);}, 1000);
}
}
And this in GWT Java code:
private static native void injectJSMethods()/*-{
$wnd.__readMolFile =function(divID,fileContent){
@com.chemhack.jsMolEditor.client.Editor::readMolFile(Ljava/lang/String;Ljava/lang/String;)(divID,fileContent);
};
$wnd.__initEditor =function(divID, width, height){
@com.chemhack.jsMolEditor.client.Editor::initEditor(Ljava/lang/String;II)(divID, width, height);
};
}-*/;
I think Rich’s problem has been partly solved as this proves how we can cross the boundary between hand-written JavaScript and GWT generated JavaScript. If you’d like to make the whole library exposed to JavaScript world, just write a wrapper for each Java method you’d like to call. GWT code generator may be a good helper.
I call this molecule editor jsMolEditor, and I plan to release its first fully functional Alpha version in two or three weeks. jsMolEditor will be released under GPL license as its code mainly came from MX-GWT and JChemPaint.
So how about JMol in javascript? This demo shows that it’s not a mission impossible, but we have a long way to go.
I promise to release the first Alpha in two or three weeks and also keep you informed how is the work going with at least two posts per week. 
Tags: Chemoinformatics, jsMolEditor
ChemHack
