Chemical Canvas

A jQuery plugin for drawing and interacting with chemical diagrams.

Support for popular chemical formats and the PDB Chemical Component Dictionary files.

Follows an MVC design for integration with different visualization components (like 3-D viewers or tabular formats).

How to use: see the documentations and view the source below. All necessary scripts and files can be downloaded from this site

For questions or comments contact ddimitrop@gmail.com

Layered organization of plugins:

Standalone chemical editor (chemDiagram)

Create a chemical diagram editor from an element.

Use:

<div id="chemEdit"><div>
$('#chemEdit').chemDiagram();

Options:
width, height: the width and height of the drawing area (excluding the controls) - default 600x300
readOnly: disable editing operations (adding or deleting atoms and bonds) - default false
fragments: enable the display of the fragment library - default true
fragmentsArray: provide custom fragments

Example:

This is the chemEdit div

Run this code: $('#chemEdit').chemDiagram({width:1000});

or view the clean source of an example page

Integration of 2D, 3D and tabular views (chemViews)

It integrates jmol (http://www.jmol.org/) as a 3D viewer and jqGrid jQuery plugin (http://www.trirand.com/blog/) as a tabular viewer for atoms and bonds properties.

Use:

<div id="chemView"><div>
$('#chemView').chemViews();

Options:
diagram:options for the diagram editor (see above)
jmol: witdth and height for jmol (default {width:600,height:500})
atomModel,bondModel: jqGrid model settings for atoms and bonds tables

Example:

$('#chemView').chemViews({diagram:{width:1000},jmol{width:500}});

Try it out

Integration of windowing system (chemWin)

It integrates the jQuery Windows Engine Plugin (http://hernan.amiune.com/labs) and demonstrates the use of Ajax requests in order to integrate with chemoinformatics programs like CACTVS (http://www2.chemie.uni-erlangen.de/software/cactvs/)

<div id="chemWin"></div>
$('#chemWin').chemWin();

Options:
jmol: options for the jmol window - defaults {title: "3-D view",width:600,height:500,posx:10,posy:585}
file: options for the chemical file output window - defaults {title: "Chemical format",width:400,height:500,posx:615,posy:0}
atoms,bonds: options for the atom,bond grid windows
edit:o options for the chemical canvas editor window -defaults {title: "Chemical diagram",width:600,height:500,posx:10,posy:40}
control:options for the controls area {hide:false,load:true,upload:false,align2d:true,addhydro:true,align3d:true,reset:true}

Example

$('#chemWin').chemWin({mol:{title:"JMOL",width:1000}});

Try it out

Accessing components:

You may access the molecule (and diagram) objects from your javascript code like this:

For a plain chemical canvas editor:
Run the code below (First make sure that you have clicked on the link above that creates a chemCanvas. Also you may want to draw something inside the editor)

molecule=$('#chemEdit').chemMol();
diagram=$('#chemEdit').chemCanvasDiagram();
alert(molecule.atoms.length);

Similarily for a chemical views component:

molecule=$('#chemView').chemViewMol();
diagram= $('#chemView').chemViewDiagram();

Or for a chemical windows component:

molecule=$('#chemWin').chemWinMol();
diagram= $('#chemWin').chemWinDiagram();

Core functionality of a molecule object

Click on the links below to try out the code, next to each. First make sure that you have created a chemical canvas and grabbed the molecule object by using the links above. Also make sure that you have drawn something in the editor.

Run this: alert(molecule.atoms.length) // array of atoms
Run this: alert(molecule.bonds.length) // array of bonds
Run this: molecule.id='test' // identifier
Run this: molCopy=molecule.clone(); alert(molCopy.atoms.length)
Run this: alert(molecule.formula());

Core functionality of the diagram object:

Run this: diagram.setModel(new Molecule()); //use another molecule as the model of the diagram
Run this: diagram.redraw(); // programmatically redraw the diagram
Run this: diagram.center();

Select, Change and Highlight events

You can register listeners and capture events on the model like when the users selects or changes atoms and bonds.

Example:
Run this:

molecule.select(function(a) {
           if (a instanceof Atom) 
               alert('You selected atom '+a.name);
         });

and now go a click on atoms of the diagram editor.

Other functionality:

Chemical Formats

There is support for export import from common chemical formats like SDF, PDB and mmCif

Run this: alert(molecule.toSdf())
Run this: alert(molecule.toPdb())

This is the textarea with id="bnz"

Parse the contents of this textarea as SDF and load it in the editor

Run this:

    molecule.fromSdf($('#bnz').val());
    diagram.center();
    diagram.redraw();

Scroll up and check the chemical editor above

This is the textarea with id="plq"

data_PLQ
# 
_chem_comp.id                                    PLQ 
_chem_comp.name                                  1,4-benzoquinone 
_chem_comp.type                                  NON-POLYMER 
_chem_comp.pdbx_type                             HETAIN 
_chem_comp.formula                               "C6 H4 O2" 
_chem_comp.mon_nstd_parent_comp_id               ? 
_chem_comp.pdbx_synonyms                         "cyclohexa-2,5-diene-1,4-dione; QUINONE RING OF THE PLASTOQUINONE 9" 
_chem_comp.pdbx_formal_charge                    0 
_chem_comp.pdbx_initial_date                     2007-11-13 
_chem_comp.pdbx_modified_date                    2008-10-14 
_chem_comp.pdbx_ambiguous_flag                   N 
_chem_comp.pdbx_release_status                   REL 
_chem_comp.pdbx_replaced_by                      ? 
_chem_comp.pdbx_replaces                         ? 
_chem_comp.formula_weight                        108.095 
_chem_comp.one_letter_code                       ? 
_chem_comp.three_letter_code                     PLQ 
_chem_comp.pdbx_model_coordinates_details        ? 
_chem_comp.pdbx_model_coordinates_missing_flag   N 
_chem_comp.pdbx_ideal_coordinates_details        Corina 
_chem_comp.pdbx_ideal_coordinates_missing_flag   N 
_chem_comp.pdbx_model_coordinates_db_code        3B6K 
_chem_comp.pdbx_subcomponent_list                ? 
_chem_comp.pdbx_processing_site                  RCSB 
# 
loop_
_chem_comp_atom.comp_id 
_chem_comp_atom.atom_id 
_chem_comp_atom.alt_atom_id 
_chem_comp_atom.type_symbol 
_chem_comp_atom.charge 
_chem_comp_atom.pdbx_align 
_chem_comp_atom.pdbx_aromatic_flag 
_chem_comp_atom.pdbx_leaving_atom_flag 
_chem_comp_atom.pdbx_stereo_config 
_chem_comp_atom.model_Cartn_x 
_chem_comp_atom.model_Cartn_y 
_chem_comp_atom.model_Cartn_z 
_chem_comp_atom.pdbx_model_Cartn_x_ideal 
_chem_comp_atom.pdbx_model_Cartn_y_ideal 
_chem_comp_atom.pdbx_model_Cartn_z_ideal 
_chem_comp_atom.pdbx_component_atom_id 
_chem_comp_atom.pdbx_component_comp_id 
_chem_comp_atom.pdbx_ordinal 
PLQ O5 O5 O 0 1 N N N 8.001 28.334 5.301 -2.623 -0.000 -0.002 O5 PLQ 1  
PLQ C5 C5 C 0 1 N N N 7.183 28.799 6.238 -1.409 -0.000 -0.002 C5 PLQ 2  
PLQ C6 C6 C 0 1 N N N 6.766 27.926 7.366 -0.670 1.279  0.002  C6 PLQ 3  
PLQ C4 C4 C 0 1 N N N 6.686 30.185 6.155 -0.670 -1.279 0.002  C4 PLQ 4  
PLQ C3 C3 C 0 1 N N N 5.767 30.703 7.189 0.670  -1.279 0.002  C3 PLQ 5  
PLQ C2 C2 C 0 1 N N N 5.358 29.845 8.319 1.409  -0.000 -0.002 C2 PLQ 6  
PLQ O2 O2 O 0 1 N N N 4.535 30.324 9.258 2.623  -0.000 -0.002 O2 PLQ 7  
PLQ C1 C1 C 0 1 N N N 5.856 28.448 8.411 0.670  1.279  0.002  C1 PLQ 8  
PLQ H6 H6 H 0 1 N N N 7.127 26.910 7.424 -1.210 2.214  0.004  H6 PLQ 9  
PLQ H4 H4 H 0 1 N N N 6.994 30.821 5.338 -1.210 -2.214 0.004  H4 PLQ 10 
PLQ H3 H3 H 0 1 N N N 5.393 31.714 7.118 1.210  -2.214 0.004  H3 PLQ 11 
PLQ H1 H1 H 0 1 N N N 5.556 27.817 9.235 1.210  2.214  0.004  H1 PLQ 12 
# 
loop_
_chem_comp_bond.comp_id 
_chem_comp_bond.atom_id_1 
_chem_comp_bond.atom_id_2 
_chem_comp_bond.value_order 
_chem_comp_bond.pdbx_aromatic_flag 
_chem_comp_bond.pdbx_stereo_config 
_chem_comp_bond.pdbx_ordinal 
PLQ O5 C5 DOUB N N 1  
PLQ C5 C6 SING N N 2  
PLQ C5 C4 SING N N 3  
PLQ C6 C1 DOUB N N 4  
PLQ C6 H6 SING N N 5  
PLQ C4 C3 DOUB N N 6  
PLQ C4 H4 SING N N 7  
PLQ C3 C2 SING N N 8  
PLQ C3 H3 SING N N 9  
PLQ C2 O2 DOUB N N 10 
PLQ C2 C1 SING N N 11 
PLQ C1 H1 SING N N 12 
#

Parse the contents of this textarea as mmCif and load it in the editor

Run this:

    molecule.fromCif($('#plq').val());
    diagram.center();
    diagram.redraw();

Scroll up and check the chemical editor above

Run this: alert(molecule.toCif())

How to add or change the fragments

The chemical editor comes with a collection of fragments and you may add on this or replace it. The chemical library provides support for easily builting your own custom fragments.

This is the chemEdit1 div

Run this code:

   $('#chemEdit1').chemDiagram({
      fragmentsArray:{
                      cyclopropane:Fragment.prototype.fragments.cyclopropane, // keep one from the standard library
                      propane: new CustomFragment([{},{on:0},{on:1}]),
                      carboxyl: new CustomFragment([{element:'C',name:'CX'},{element:'O',name:'OX',on:0,order:2},{element:'O',name:'OY',on:0}])
                     }
    });

Note: In order that your custom fragments UI looks nice, you should create small images with the same names as the fragments you define (i.e. propane.png and carboxyl.png)

Model view example

The model - a molecule and its listeners - is seperated from the view and control code (like the chemical editor). To demo that the 2 editors that will be created with the code below will share the same model, so any modifications on one will be immediatelly propagated in the other

This is the chemEdit2 div

This is the chemEdit3 div

Run this code:

   $('#chemEdit2').chemDiagram();
   molecule2=$('#chemEdit2').chemMol();
   diagram2=$('#chemEdit2').chemCanvasDiagram();
   $('#chemEdit3').chemDiagram();
   molecule3=$('#chemEdit3').chemMol();
   diagram3=$('#chemEdit3').chemCanvasDiagram();
   diagram3.setModel(molecule2);                 // The editor 3 uses the same model as the editor 2                  
   // Make sure that both editors get redrawn when the model changes
   molecule2.change (function() {diagram2.redraw();diagram3.redraw() });
   molecule2.select (function() {diagram2.redraw();diagram3.redraw() });

Ajax calls to chemoinformatics packages

The chemical canvas plugin contains very few and simple chemical algorithms. Its basic idea to run existing chemoinformatics packages on the server side and retrieve the results with Ajax calls.

For example it has been used with CACTVS (http://www2.chemie.uni-erlangen.de/software/cactvs/) support in the backend in order to retrieve an optimal 2D layout of the molecule (when the input is an SDF file with 3D or no coordinates for example) or in order to convert input from other formats (like SMILES) to an explicit chemical format (like SDF) that it supports.

For more information you may look at the code provided by the jQuery.chemAjax.js script.

chemComp mmCif editor

A more advanced example of customising and using the plugin to edit Chemical Component Dictionary (mmCif) files is available below.
(some functions will not work since they depend on the server-side installation of chemoinformatic packages)

Try it out

Project details

Copyright (c) 2010 Dimitris Dimitropoulos (ddimitrop@gmail.com)
Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html

This project is using the following:

canvas-text (http://code.google.com/p/canvas-text/)
ExplorerCanvas (http://excanvas.sourceforge.net/)
Jmol (http://www.jmol.org/)
jquery 1.4.2 (http:/jquery.org)
AjaxFileUpload (http://www.phpletter.com/Our-Projects/AjaxFileUpload/)
jQuery cookie (https://github.com/carhartl/jquery-cookie)
jqGrid (http://www.trirand.com/blog/)
jquery-json (http://code.google.com/p/jquery-json/)
jQuery Windows Engine Plugin (http://plugins.jquery.com/project/jqWindowsEngine)