Macs in Chemistry

Insanely great science

ChemDoodle Web Components ChemDoodle Web Components

Exploring ChemDoodle Web Components

The canvas element is part of HTML5 and allows the dynamic scripting of images. It was first introduced by Apple as part of the Mac OS X Webkit and is used to provide the framework for applications like Dashboard widgets. There are now an increasing number of uses, there is an interesting selection of demos here. There is also a handy tutorial on the mozilla site here. Not all browsers support all the functions but there is a table here that gives a pretty up to date view of each browsers capabilities. As you might expect Safari is one of the best supported.

The ChemDoodle Web Components pure javascript components from iChemLabs that are children of Canvas and thus use HTML 5 specification to produce the images. To use ChemDoodle Web Components you first need to install three files provided by iChemLabs

		ChemDoodleWeb.css
ChemDoodleWeb-libs.js
ChemDoodleWeb.js
You then need to link to these files in the HEAD section of the HTML page as shown below, making sure you have the path to the files correct.

Several PHP scripts are provided that can be used to access local files or remote databases, however perhaps the easiest way to use the web components is to simply embed the MDL mol file as text within the HTML.

 
		var test_molecule = 'Molecule Name\n ChemDraw08240913222D 0   0.00000     0.00000     0\n
		[Insert Comment Here]\n 14 15  0  0  0  0  0  0  0  0999 V2000\n
		-2.1425   -0.2062    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n
		-2.1425   -1.0312    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n
		-1.4280   -1.4438    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n
		-0.7136   -1.0312    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n
		-0.7136   -0.2062    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n
		-1.4280    0.2062    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n
		0.0009    0.2062    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n
		0.0009    1.0312    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n
		-0.7136    1.4438    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n
		-1.4280    1.0312    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n
		0.7148   -0.2059    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n
		1.4286    0.2062    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n
		2.1425   -0.2059    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n
		1.4286    1.0305    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n
		1  2  2  0  0  0  0\n  2  3  1  0  0  0  0\n  3  4  2  0  0  0  0\n
		4  5  1  0  0  0  0\n  5  6  2  0  0  0  0\n  6  1  1  0  0  0  0\n
		5  7  1  0  0  0  0\n  7  8  2  0  0  0  0\n  8  9  1  0  0  0  0\n
		9 10  2  0  0  0  0\n 10  6  1  0  0  0  0\n  7 11  1  0  0  0  0\n
		11 12  1  0  0  0  0\n 12 13  1  0  0  0  0\n  12 14  1  0  0  0  0\n
		M  END\n> \n07-08-2009\n';
                        var view2 = new ChemDoodle.ViewerCanvas('view2', 100, 100);
                        view2.loadMolecule(ChemDoodle.readMOL(test_molecule));
                        
The above code reads a MDL MOLfile, which is stored as javascript variable, interprets it using the MDLInterpreter provided with this library and sends the output molecule to the canvas. The function, Canvas.loadMolecule(), will then set the molecule, center it, scale it (if necessary to fit), then do the necessary chemoinformatics algorithms (such as finding rings, etc.) before painting the canvas.



Whilst you can only use molecules in MDL Mol format there are a number of tools that can convert chemical file formats, including iBabel.
It is possible to display multiple structures on a page.

With the molecule variable defined you can change the display. In this case the ACS publication style.
 
                             	//initialize component and set visual specifications
	var viewerCanvas = new ChemDoodle.ViewerCanvas('viewerCanvas', 100, 100);
	//the width of the bonds should be .6 pixels
	viewerCanvas.specs.bonds_width_2D = .6;
	//the spacing between higher order bond lines should be 18% of the length of the bond
	viewerCanvas.specs.bonds_saturationWidth_2D = .18;
	//the hashed wedge spacing should be 2.5 pixels
	viewerCanvas.specs.bonds_hashSpacing_2D = 2.5;
	//the atom label font size should be 10
	viewerCanvas.specs.atoms_font_size_2D = 10;
	//we define a cascade of acceptable font families
	//if Helvetica is not found, Arial will be used
	viewerCanvas.specs.atoms_font_families_2D = ["Helvetica", "Arial", "sans-serif"];
	//display carbons labels if they are terminal
	viewerCanvas.specs.atoms_displayTerminalCarbonLabels_2D = true;
	//load data and read into a Molecule
	var caffeine = ChemDoodle.readMOL(caffeine);
	//the bond lengths should be 14.4 pixels in ACS Document 1996
	caffeine.scaleToAverageBondLength(14.4);

	viewerCanvas.loadMolecule(caffeine);
                        

All elements of the display can be manipulated, including background colour, font type and colour, bond and atom colour etc. The Mol file specification allows for 3D structures and these can also be displayed. Below you should see the structure of viagra.



But since this is a 3d molecule it would be better to display it in a manner that allows visulisation of the three dimensional structure, one way to do this is to use the "rotator" tag.

var rotator = new ChemDoodle.RotatorCanvas(name, width, height[, rotateIn3D]);

As before all elements of the display can be manipulated, colours, speed, rotation axis etc.


The final component "Transform" allows the user to interact with the molecule var transform1 = new TransformCanvas('transform1', 350, 400, true); transform1.specs.bonds_useJMOLColors = true; transform1.specs.bonds_width = 3; transform1.specs.atoms_display = false; transform1.specs.backgroundColor = 'black'; transform1.loadMolecule(readMOL(viagra));

Click and drag on the molecule below to rotate the structure. If you have a scroll-wheel mouse then you should also then be able to zoom in and out.


All in all the ChemDoodle web components are very easy to use and are an excellent way to display chemical structures on a web page without the need to use and applet or plugin. They would be ideal for adding chemical information to Blogs for example. At the moment formatting the text representing the Mol file is a little tedious but talking to the developers they are thinking about how to make this easier, perhaps adding a new file output to OpenBabel. If you can use PHP or a cgi then that you could use them to access the structure files, iChemLabs provide simple instructures and examples.

As an update I've just seen this page on an iPhone, as you can see from images below it all seems to display fine the rotating structure included. The only problem seems to be you can't interact with the molecules. If you want to display chemistry on an iPhone this is probably the best option available.

Kevin Theisen is the President of iChemLabs, which funds, develops and hosts the open source ChemDoodle Web Components has written a step-by-step here.on how to quickly put together a rich web application with the ChemDoodle Web Components. In the walkthrough, I produce a small application that queries the Protein Data Bank (PDB), displays 3D animations of the results, and saves a viewing history.

Updated 14 Jan 2012