2D Sketcher

The full web sketcher works in all browsers, including IE9, Safari, Opera, Chrome and Firefox, as well as Mobile Safari and Android Browser.

The sketcher controls are modeled from the ChemDoodle™ desktop application. Those familiar with the ChemDoodle desktop application will immediately be comfortable drawing structures in this web-based sketching component.

The most basic sketcher input is received from mouse events. All aspects of the ChemDoodle desktop application are present, from locking bond lengths and angles, to the optimize zone to fragment previews. More information about how to use the ChemDoodle family of sketchers can be found in the ChemDoodle user guide.

In addition to mouse input, there are buttons and keyboard shortcuts that are described in the other tabs.

It should also be noted that the web-based sketching component is optimized for drawing a single discrete molecule. There are not many websites that require the need to draw multiple discrete molecules at once, so the web-based sketching component allows one and only one structure to be drawn at any given time to simplify the application. Because there is only one molecule at a time, there is no need for a lasso function, as the molecule can be fully manipulated without it. This greatly simplifies a user’s experience and makes it much faster to draw molecules without confusing the user with unnecessary functions.

If you are developer and would like to learn how to install this sketcher, please refer to the SketcherCanvas documentation.

The buttons presented on top of the sketcher provide functionality as described by the following list. It should also be noted, that in all states, the user can use the mouse wheel to scale the sketcher rendering. Users can also click and drag on the background, with nothing hovered, to move the entire molecule. If the shift key is held while dragging the background, the entire molecule will be rotated. Double-clicking on the background will center the molecule.

Open File – This button pops up a window that allows a user to paste in the contents of an MDL MOLFile to be loaded into the sketcher.

Save File – If iChemLabs services are used, then this button will open a file dialog to allow users to save any of the 24 chemical file formats that ChemDoodle supports. Otherwise, this button pops up a window displaying MDL MOLFile content for the molecule in the sketcher that can be pasted into a text editor and saved with a .mol extension.

MolGrabber – This button pops up a window displaying a MolGrabberCanvas component that can be used to search the ChemExper, ChemSpider and PubChem databases for molecules of interest and then load them into the sketcher. This feature is only accessible through iChemLabs services.

Zoom In – Increases the rendering scale of the sketcher.

Zoom Out – Decreases the rendering scale of the sketcher.

Clear – Clears the sketcher, leaving a single carbon atom.

Erase – Puts the sketcher into erase mode. Highlighting an atom and clicking will remove that atom and any small disconnected fragments, leaving the largest fragment remaining. Highlighting a bond and clicking will only have an effect if that bond is part of a ring, and in that case it will remove that bond.

Move – Puts the sketcher into move mode. Highlighting an atom or bond and then pressing the mouse down and dragging will translate those objects.

Clean – Cleans the structure in 2D. This feature is only accessible through iChemLabs services.

Undo – Undoes the last performed action.

Redo – Redoes the last undone action.

Calculator – Calculates various descriptors for the drawn structure. This feature is only accessible through iChemLabs services.

Labels – After an element has been selected, hover an atom and click to change that atom’s label to the selected element symbol.

Periodic Table – Pops up a periodic table to select a symbol. After a symbol has been selected, hover an atom and click to change that atom’s label to the selected element symbol. Press the Close button to close it.

Bonds – After a bond type has been selected, hover an atom and press the mouse down to begin drawing a new bond of that type. Drag and place the preview to the preferred position and then release the mouse to place the bond. The optimize zone (blue circle) is provided to help place the bond in the optimal position when the mouse pointer is within the bounds of the circle. Hover a bond and click to change that bond’s type to the selected type. The single bond tool is special and will add to bond orders instead of overriding them. Hold down the shift key to modify standard lengths and hold down the alt key to modify standard angles.

Rings – After a ring type has been selected, hover an atom and press the mouse down to begin drawing a new ring of that type. Drag and place the preview to the preferred position and then release the mouse to place the ring. The optimize zone (blue circle) is provided to help place the ring in the optimal position when the mouse pointer is within the bounds of the circle. Hover a bond and press the mouse down to begin drawing a ring from that bond. Drag the preview to either side of the bond and then release the mouse to place the ring. Hold down the shift key to modify standard lengths and hold down the alt key to modify standard angles.

Charges – After a charge sign has been selected, hover an atom and click the mouse to add or subtract from that atom’s charge amount.

Lone Pairs – After a lone pair icon has been selected, hover an atom and click the mouse to add or remove a lone pair from that atom.

Group Buttons

At the end of some button groups, there is a small button with a downwards facing arrow. This means that there are more options available for this button set. Just click on this downwards facing arrow and select an option. The button adjacent to the downwards facing arrow will pick up this option and will be automatically selected for use.

Just like in the desktop version of ChemDoodle, the web-based sketcher implements a copious amount of keyboard shortcuts. In addition to the listed shortcuts, you can also use the arrow keys to nudge the molecule. All keyboard shortcuts will work regardless of the state or mode the sketcher is in.

Modifier Shortcuts

Modifier shortcuts are executed by holding down the system meta key, which is ctrl on Windows and Linux and command on Mac OS X.

n Clears the sketcher, leaving a lone carbon atom.
o Pops up a window to load a chemical file.
s Pops up a window to save the structure in the sketcher in a chemical format.
y Redoes the last undone action.
z Undoes the last performed action.
+ Zooms in.
- Zooms out.

When Atoms are Hovered

When an atom is hovered, the following shortcuts will be active. An atom is hovered if the mouse is close enough to the atom such that the atom is surrounded by an amber circle.

Alphabet Cycles the hovered atom’s label through the element symbols that begin with that letter of the alphabet.
Digits Adds a carbon chain with length equal to the digit pressed in the most optimal orientation. The 0 key will add a chain of length 10.
Shift+Digits Adds a ring with number of sides equal to the digit pressed (3+) in the most optimal orientation.
Delete/Backspace Removes the current atom and any attached bonds and any small attached fragments, leaving the largest fragment remaining.
+/- Increase/Decrease the charge amount of the atom.

When Bonds are Hovered

When a bond is hovered, the following shortcuts will be active. A bond is hovered if the mouse is close enough to the center of the bond such that the bond is encapsulated by two amber semicircles.

Digits Changes the bond’s order to the digit. Only 1-3 work.
Shift+Digits Adds a ring with number of sides equal to the digit pressed (3+) in the most optimal orientation.
Delete/Backspace Removes the current bond if and only if that bond is a member of a ring.
f Flip the bond orientation.

If the website implementing the web-based sketcher does not access iChemLabs services, then important functionality that you may benefit from is missing from their implementation. Please urge the providers of that service to contact us and provide users like you with premium services.

If you need help for any reason, please view our support options.