ChemDoodle Web Sketcher Usage

The ChemDoodle Web Sketcher provides you with the ability to load a sketcher into your webpage(s) to communicate chemical information with your users.

Contents

  1. Installation
  2. How to use the ChemDoodle Web Sketcher
  3. Creating the Sketcher
  4. Input and Output of Chemical Data
  5. Sending Data to your Server

Installation

After purchase and provisioning, you will be provided with a link to a portal to download the ChemDoodle Web Sketcher. Inside of the download, you will find four files:

  • ChemDoodleWebSketcher-License.pdf – This is your license
  • ChemDoodleWebSketcher.js – This is the Javascript file for the ChemDoodle Web Sketcher
  • ChemDoodleWebSketcher.css – This is the CSS file for the ChemDoodle Web Sketcher
  • images – This folder contains the images for the CSS file and should be placed in the same directory on your server that the ChemDoodleWebSketcher.css file is located

Include both of these files in the websites you would like to include the sketcher in by placing the following tags in the <head> section of your HTML. The first meta tag is to support Internet Explorer 6-8 with Google Chrome Frame.

1
2
3
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link rel="stylesheet" href="[path]/ChemDoodleWebSketcher.css" type="text/css">
<script type="text/javascript" src="[path]/ChemDoodleWebSketcher.js"></script>

Make sure to replace [path] with the correct path to where these files are installed on your server.

How to use the ChemDoodle Web Sketcher

Once installed, a single variable is defined in the global Javascript namespace, ChemDoodleWebSketcher. This variable controls the sketchers and all their instances, and you will use this variable for all uses of the ChemDoodle Web Sketcher.

For instance, the following code will provide you with the current version of the ChemDoodle Web Sketcher.

1
2
3
4
5
<script>
  var version = ChemDoodleWebSketcher.version;
  // we can do something with the version now, like alert it
  alert("The ChemDoodle Web Sketcher version is "+version);
</script>

The latest ChemDoodle Web Sketcher version is .

Creating the Sketcher

Depending on the options you purchased, you will have available up to 4 functions to create sketcher instances:

  • createSingleMoleculeInstance – This will create an instance of the Single Molecule Sketcher, provided to you by default with the Basic Sketcher package.
  • createSingleMoleculeInstanceWithCloud – This will create an instance of the Single Molecule Sketcher with access to Cloud services, provided to you with the Cloud option.
  • createFullInstance – This will create an instance of the Full Sketcher, provided to you with the Pro Sketcher option.
  • createFullInstanceWithCloud – This will create an instance of the Full Sketcher with access to Cloud services, provided to you with the Pro Sketcher and Cloud options.

Each of these functions takes 3 parameters, id, width and height. The id parameter is the string id of the sketcher and should be unique for each instance on a page. The width and height parameters are integers and defined the width and height of the sketcher instance in pixels. The following code demonstrates creating both a single molecule and a full sketcher with Cloud services access.

1
2
3
4
5
6
7
<script>
  // make sure to store the returned sketchers in variables so you can use them later
  // create a single molecule sketcher
  var sketcherSingle = ChemDoodleWebSketcher.createSingleMoleculeInstanceWithCloud('sketcherSingle', 420, 300);
  // create a full sketcher
  var sketcherFull = ChemDoodleWebSketcher.createFullInstanceWithCloud('sketcherFull', 420, 300);
</script>


Single Molecule Sketcher (Basic)
   
Full Sketcher (Pro)


Now remember, the sketchers are still HTML elements in the page, so you can control them like you would control <div> elements, such as by placing them in tables, having them centered, etc.

Input and Output of Chemical Data

You can input and output data from the sketcher using the following functions:

  • loadMOL(sketcher, mol) – loads a molecule into the sketcher from a MDL MOLfile source.
  • outputMOL(sketcher) – returns a string representing the molecule drawn in the sketcher in MDL MOLfile format.
  • loadJSON(sketcher, json) – loads content (both chemical and shape data) into the sketcher given the JSON data object in ChemDoodle JSON format. Shape information can only be loaded into the Full Sketcher.
  • outputJSON(sketcher) – returns a string representing the content drawn (both chemical and shape data) from the sketcher in ChemDoodle JSON format.

These functions are again accessed through the ChemDoodleWebSketcher object and take the sketcher as parameter. The following code demonstrates how to do this:

1
2
3
4
5
6
7
8
9
10
11
<script>
  // use the sketcher variable that we created earlier
  // this gets the data from the sketcher in MOLfile format
  var moldata = ChemDoodleWebSketcher.outputMOL(sketcher);
  // this loads the data to the sketcher in MOLfile format
  ChemDoodleWebSketcher.loadMOL(sketcher, 'Molecule Name\n  CHEMDOOD01011121543D 0   0.00000     0.00000     0\n[Insert Comment Here]\n  6  6  0  0  0  0  0  0  0  0  1 V2000\n    0.0000    1.0000    0.0000   N 0  0  0  0  0  0  0  0  0  0  0  0\n   -0.8660    0.5000    0.0000   C 0  0  0  0  0  0  0  0  0  0  0  0\n   -0.8660   -0.5000    0.0000   C 0  0  0  0  0  0  0  0  0  0  0  0\n    0.0000   -1.0000    0.0000   C 0  0  0  0  0  0  0  0  0  0  0  0\n    0.8660   -0.5000    0.0000   C 0  0  0  0  0  0  0  0  0  0  0  0\n    0.8660    0.5000    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\nM  END');
  // this gets the data from the sketcher in ChemDoodle JSON format
  var jsondata = ChemDoodleWebSketcher.outputJSON(sketcher);
  // this loads the data to the sketcher in ChemDoodle JSON format
  ChemDoodleWebSketcher.loadJSON(sketcher, {'m':[{'a':[{'x':91.339,'y':95.00000000000001,'i':'a0','l':'O'},{'x':108.661,'y':105.00000000000001,'i':'a1'},{'x':74.019,'y':105.00000000000001,'i':'a2'},{'x':125.981,'y':95.00000000000001,'i':'a3'},{'x':108.661,'y':125.00000000000001,'i':'a4'},{'x':74.019,'y':125.00000000000001,'i':'a5','l':'O'},{'x':56.699,'y':95.00000000000001,'i':'a6'},{'x':125.981,'y':75.00000000000001,'i':'a7'},{'x':143.301,'y':105.00000000000001,'i':'a8'},{'x':125.981,'y':135,'i':'a9'},{'x':143.301,'y':65.00000000000001,'i':'a10','l':'O'},{'x':108.661,'y':65.00000000000001,'i':'a11','l':'O'},{'x':143.301,'y':125.00000000000001,'i':'a12'}],'b':[{'b':0,'e':1,'i':'b0'},{'b':0,'e':2,'i':'b1'},{'b':10,'e':7,'i':'b2'},{'b':11,'e':7,'i':'b3','o':2},{'b':5,'e':2,'i':'b4','o':2},{'b':1,'e':3,'i':'b5'},{'b':1,'e':4,'i':'b6','o':2},{'b':3,'e':8,'i':'b7','o':2},{'b':3,'e':7,'i':'b8'},{'b':4,'e':9,'i':'b9'},{'b':8,'e':12,'i':'b10'},{'b':9,'e':12,'i':'b11','o':2},{'b':2,'e':6,'i':'b12'}]}]});
</script>






Sending Data to your Server

Now that your users have input their structure into the sketcher and you have retrieved it in Javascript as a string format, you will need to get that data to whatever algorithms you use to provide your service. If this is a Javascript service, you don’t need to do anything special, but if it relies on processes on your server, then you will need to get the information there. The best way to do this is through AJAX. There are several Javascript libraries available that simplify AJAX calls. We prefer jQuery. jQuery AJAX documentation is described here.