Overview
Canvases
Layouts
API
Installation
Demos
Contact
ChemDoodle

Installing ChemDoodle Web Components is incredibly easy. Just follow the instructions below.

Contents

  1. License
  2. Download
  3. Installation
  4. Community Resources
  5. Browser Compatibilities
  6. Getting Help
  7. Version History

The ChemDoodle Web Components library is licensed under version 3 of the GNU GENERAL PUBLIC LICENSE with the following exception:

As a special exception to the GPL, any HTML file which merely makes function calls to this code, and for that purpose includes it by reference, shall be deemed a separate work for copyright law purposes. If you modify this code, you may extend this exception to your version of the code, but you are not obligated to do so. If you do not wish to do so, delete this exception statement from your version.

This means that your websites do NOT need to be released under GPL even if you call the ChemDoodle Web Components library.

Contact us for alternate licensing options.


To ensure the continued success of ChemDoodle Web Components, iChemLabs is dedicated to funding and developing this project. Please also help us by mentioning it to your colleagues and friends and placing a link to us on your webpage. If you really like ChemDoodle Web Components, you may also enjoy ChemDoodle, our advanced and affordable chemical structure environment that works on all operating systems.

Note that if you are using the 3D components, we are constantly working to ensure they are compatible with the nightly builds of Apple WebKit and Mozilla MineField. It is very possible that upgrading to a newer nightly build will produce an incompatibility. If you find that your 3D components are not working after a nightly build update, check our website and see if our demos are working. If ours are, then we have fixed the issue and you should redownload our library. We will not be announcing any fixes to the 3D ChemDoodle Web Components while WebGL is in beta status.

Download ChemDoodle Web Components v3.5.0
MD5 checksum: d13597383ba28a26a22e16a2b03a4a06
ChemDoodleWeb.js is only 102 KB!

Installation is very simple and consists of 5 easy steps:

  1. Download the ChemDoodle Web Components library above

  2. Install the following files on your website:

    • ChemDoodleWeb.css
    • ChemDoodleWeb-libs.js
    • ChemDoodleWeb.js

  3. Link to the essential files as URI resources in the HEAD section of all the pages in which you would like to use the components. The meta tag listed first is to ensure that Google Chrome Frame is used in Internet Explorer.

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

  4. If using the MolGrabber or File Loader components, create and install the necessary server programs to access databases or read files.

    We provide 4 sample PHP scripts for accessing server-side resources:

    CDWfile2js.php This script can be called to write a file on your server into a local javascript variable in the client HTML page.
    CDWGetLocalFile.php This script can be called to load a local file from the users computer into a FileLoader canvas.
    CDWProteinDataBank.php This script can be called to query the Protein Data Bank database and receive the resultant PDB file.
    CDWGetPubChem.php This script can be called to query the PubChem database and display the resulting mol file in a MolGrabber canvas.

    Use our provided PHP scripts as examples only. You should write your own server side scripts to appropriately suit your own website's security and logistic concerns.

  5. There are two displayable objects provided in the ChemDoodle Web Components library, Canvases and Layouts. Canvases are individual HTML5 canvas elements to display structures and draw on. Follow the instructions on the Canvases page to begin. Layouts define how one or more associated Canvas objects are laid out on a webpage and if and where other graphical decorations will be displayed (ie. for reactions). Layouts are discussed on the Layouts page. You may also refer to the samples directory of the downloaded file for complete web pages showing how to use the components.

For more advanced instruction on using ChemDoodle Web Components, calling the API, and customizing the components, please refer to the API.

Always make sure to have the latest version of your browser installed, and recommend this to the users of your site. The browsers below are listed in order of best performance, with Apple Safari the recommended browser on Mac, and with Google Chrome the recommended browser on Windows and Linux. ChemDoodle Web Components also work very well in Mobile Safari on iPhone OS and Browser on Android. All known issues are noted.

Mac

  1. Apple Safari- perfect.
  2. Google Chrome/Chromium- perfect.
  3. Mozilla Firefox- perfect. Has a neat Save Image As..." function when right-clicking on a canvas.
  4. Opera- text placement is not ideal, but performance is good. Some arrow glyphs are not supported. Modifier keys are not recognized.

Windows

  1. Google Chrome- nearly perfect, radial gradient is reversed. Drawing spectra with many data points is slower than all other browsers.
  2. Mozilla Firefox- nearly perfect, radial gradient does not paint. Has a neat Save Image As..." function when right-clicking on a canvas.
  3. Apple Safari- nearly perfect, Transformer component repaints very slowly while dragging.
  4. Microsoft Internet Explorer- requires Google Chrome Frame installed. Everything is identical to Google Chrome.
  5. Opera- text placement is not ideal, but performance is good. Y axis title is not rotated correctly.

Linux

  1. Google Chrome/Chromium- nearly perfect, radial gradient is reversed; incredibly fast!
  2. Mozilla Firefox- graphics are almost perfect, radial gradient does not paint, Transformer component repaints very slowly while dragging, performance is very poor. Has a neat Save Image As..." function when right-clicking on a canvas.
  3. Opera- text placement is not ideal, but performance is good, modifier key handling is not reliable.

iPhone OS

  1. Apple Mobile Safari- almost perfect. Selection of fonts in limited. Animations are slower. All touch events and gestures are supported.
  2. Opera Mini- text is not rendered. Animations don't work. Touch events are ignored.

Android

  1. Browser- almost perfect. Selection of fonts in limited. Animations are slower. All touch events and gestures are supported. Some low powered Android devices will have difficulty loading spectra with a large number of plot points.

If you believe you have found a bug, would like to report an issue, request a feature or license change or any other form of support, please contact us.

3.5.0

August 15, 2010

Executive Summary

Components for spectra and reactions have been added. The entire library has been optimized to significantly improve performance across browsers and to minimize size, including the removal of several external libraries. 3D ChemDoodle Web Components have also been optimized and updated to reflect recent retrospective changes to the development browsers.

Additions

  1. Spectrum graphics are now provided. Added SpectrumCanvas as a child of Canvas for rendering spectra. There are currently two children, ObserverCanvas, which displays a static image of a spectrum, and PerspectiveCanvas which allows for interaction with a spectrum. Spectrum graphics are completely customizable and grids and integration lines can be shown.
  2. Added JCAMPInterpreter that reads JCAMP-DX spectra for the spectrum Canvases. All compressed JCAMP-DX data formats are read. Additional spectrum descriptors are also read, such as title, units, etc.
  3. Reactions graphics are now provided. Added a new component, Layout, which defines how multiple, related Canvases are displayed relative to each other. Currently, there is only a single Layout, SimpleReactionLayout that shows reactants and products with plus symbols in the appropriate places, as well as a reaction arrow and condition text. All decorations for Layouts are customizable.
  4. Charges are now rendered on molecules. Charges are now read and written by MDLInterpreter. The Doodler now manipulates charges using the + and - keys while an atom is hovered.
  5. Optimized the ChemDoodle Web Component library for faster loads, interpretation and runtimes.
  6. Hidden Carbons (those connecting two and only two bonds of the same bond order that are parallel to each other) will now have their labels drawn. The VisualSpecifications.atoms_showHiddenCarbons_2D boolean variable now controls this setting. It is true by default.
  7. Added more ring perception algorithms. All ring perception classes are now children of the RingFinder class which contains methods for reducing molecule graphs to improve perception runtimes. Ring perception classes include HanserRingFinder, EulerFacetRingFinder and SSSRFinder. ChemDoodle Web Components now use a more efficient means to calculate rings, rather than just using the Hanser method, leading to much faster page loads.
  8. Added Molecule.scaleToAverageBondLength() and Molecule.getAverageBondLength() to help in standardizing input from various sources of chemical files.
  9. Added Molecule.getBonds(Atom a) as a helper file to return an array of the Bonds connected to the input Atom. Removed the Molecule.getBondNumber(Atom a) function as it is now redundant. Changed the Molecule.getCoordinationNumber(Atom a) function to Molecule.getCoordinationNumber(Array bonds) to be more efficient with the added getBonds method.
  10. Added Bond.getLength() and Bond.getLength3D() helper methods.
  11. Added a new Counter class that is the parent for objects that calculate integer descriptors for molecules. Both FrerejacqueNumberCounter and NumberOfMoleculesCounter have been added.
  12. Setting VisualSpecifications.backgroundColor to null will now allow you to show transparent components.
  13. Added middlemousedown, middleclick and middlemouseup events to the Canvas class.
  14. File Loader now displays a message if the input file does not contain chemical or compatible data.
  15. The latest version of jQuery, 1.4.2, has been integrated.
  16. Removed the antiquated BrowserDetect external library. Replaced with simpler internal source.
  17. The Sylvester and glUtils external libraries have been replaced with the smaller and more efficient glMatrix library.

Fixes

  1. Changed the default framerate of animations to 20fps to greatly improve performance.
  2. Fixed a bug in the pre-handling of mobile events where coordinates were offset.
  3. Fixed issue where the default mobile actions for events were overridden even if the event was not supported.
  4. Fixed several issues in Opera, and the browser is now fairly well supported.
  5. Fixed bug where unsaturated terminal atoms would incorrectly stack Hydrogens vertically.
  6. Replaced the right-click and drag jQuery extensions with simpler and more reliable internal source. This fixes a number of inconsistencies in mouse gestures for some browsers.
  7. Removed unneeded source to make the library smaller and Google Closure is now used instead of Yahoo YUI to minimize and optimize the source.
  8. Modifier keys now call the Doodler to repaint for immediate visual feedback.
  9. Fixed issue where the bond highlight in the Doodler sometimes drew a full circle in Google Chrome.
  10. The quaternion rotations option for Transformer Canvases has been removed. The trackball external library has been removed.
  11. ChemDoodle Web Components will no longer hang when loading highly embedded ring systems.
  12. Fixed boundary conditions in Hydrogen label stacking to prefer horizontal layouts.
  13. Fixed issue where some rings were not discovered if the Molecule object's graph was disjoint.
  14. Fixed issue where empty message did not appear in Firefox.
  15. Stopped automatic firing of the File Loader action when loaded in Firefox.
  16. 3D ChemDoodle Web Components have been updated to reflect the recent retrospective changes to the browsers.
  17. 3D ChemDoodle Web Components now use the correct recent WebGL typed arrays.

3.1.0

July 23, 2010

Executive Summary

Major additions in this release are the rendering of implicit hydrogens in 2D components and an advanced framework for handling touch events and gestures from mobile devices. iPhone OS and Android are now fully supported!

Additions

  1. The ChemDoodle Web Component framework for handling touch events and gestures from mobile devices (notably iPhone OS and Android) has been completed. The Canvas class now has 6 new optional abstract methods: touchstart, touchmove, touchend, gesturestart, gesturechange and gestureend.

    Users can interact with ChemDoodle Web Components through a desktop browser using a keyboard and mouse or through a mobile browser using touch events and gestures. For desktop browsers, implement the mouse and keyboard event listeners to perform actions. On mobile devices, the touch events and gestures will be closely mapped to the most equivalent mouse and keyboard event handlers. This is perfect for simple applications as the drag, mousedown and mouseup events are closely matched to touch events. However, hovering is something that is not possible on mobile devices, so mousemove handlers will never be called. Additionally, gestures like pinching have no mouse equivalent.

    To rectify this, write event handlers for any of the touch or gesture events to have mobile device interactions forwarded to more appropriate methods. If those mobile gesture handlers are implemented, the Canvas class will forward the corresponding events to them instead of to the mapped mouse and keyboard events. This way, you can implement all of the handlers for your single component and it will perform suitably on both desktop and mobile browsers!

  2. Implicit hydrogens are now rendered in 2D components for all atoms with visible labels. This specification is controlled by the VisualSpecifications' atoms_implicitHydrogens_2D variable which is true by default. The numbers in hydrogen labels will be properly subscripted and the hydrogens will stack depending on the orientations of bonds from the concerned atom.
  3. To correspond with the rendering of implicit hydrogens, a new VisualSpecifications variable, atoms_displayTerminalCarbonLabels_2D, has been added that will show carbon labels for terminal carbons. Combined with the atoms_implicitHydrogens_2D specification, methyl groups can be nicely displayed. This specification is false by default.
  4. Animations for Rotators and Rotator3Ds can now be toggled by double clicking on them.

Fixes

  1. The zoom scale for Transformer components can no longer become a negative value, which caused molecules to invert.
  2. The element selecting algorithm performed when setting atom labels in the Doodler component has been greatly improved to mirror how ChemDoodle works.

3.0.0

February 06, 2010

Executive Summary

This release introduces 3D components based on WebGL technology to provide hardware accelerated 3D graphics in web browsers. The 3D components are in an alpha state due to the fact that the standard browsers do not yet support WebGL; they are fairly stable in the development browsers. Several prebuilt components are provided. Several visual representations are built in. An advanced Phong shader has been implemented in javascript/GLSL to provide quality graphics. A few minor issues with the 2D components have been fixed.

Additions

  1. New 3D components have been included: Viewer3D, Rotator3D, Transformer3D and MolGrabber3D. Their implementation and functionality is very similar to their 2D analogues. The API has been updated for these new components.

Fixes

  1. Fixed small issue where short bond lengths were not clearing bond overlaps.
  2. Expanded the atomic data system to better match our ElementalData database. A new Element class has been added for storing elemental data, and an array of Elements is now provided in the ELEMENT hash array where the element symbol is the lookup key.
  3. Added more links and updated the browser compatibility list.

2.5.0

October 08, 2009

Executive Summary

This release stabilizes the API and provides in-depth extendable functionality for creating your own custom components. The API has seen some major changes (it has been significantly improved), so make sure to review it before upgrading. jQuery has been introduced to standardize the handling of user input events, simplifying the Canvas class. Two new components have been introduced: Slideshow and Hyperlink. In addition, our test driven development suite is now exposed on the site using a modified version of QUnit. ChemDoodle Web Components 2.5 works on all major browsers, including Microsoft Internet Explorer, Mozilla Firefox, Apple Safari and Google Chrome/Chromium. Yahoo YUI Compressor is now used to minify the libs for even faster page loads.

Additions

  1. A new Slideshow component has been added for displaying multiple molecules, one at a time, with transitions in between.
  2. A new Hyperlink component has been added to provide basic button-like interaction with visitors. This component is completely customizable, view the components page to see some nice examples. They can redirect users to urls or execute functions on click.
  3. The API for handling user input events has been changed significantly, all canvases are now extendable, and there is a new class called AnimatorCanvas to provide an extendable framework for producing animated components. The RotatorCanvas.startRotation() and RotatorCanvas.stopRotation() functions have been replaced with AnimatorCanvas.startAnimation() and AnimatorCanvas.stopAnimation() respectively. The API provided on the web is now much more thorough, better formatted, and is linked for easy navigation.
  4. The jQuery library is now used by the Canvas class to standardize the handling of user input events.
  5. Our test driven development suite is now exposed on the site using a modified version of QUnit.
  6. Images are now supported. You can set background images for the components, and hover images for the Hyperlinks. Images override the backgroundColor visual specification.
  7. Support for Google Chrome Frame has been implemented. The ChemDoodle Web Components now work beautifully on Microsoft Internet Explorer.
  8. Bond stereochemistry is now possible. You can specify protruding and recessed single bonds as well as ambiguous double bonds. They are drawn as solid and dashed wedges and a crossing double bond.
  9. New visual specifications added: atom label buffer, wedge thickness, hash width, hash spacing.
  10. Added another algorithm to the TransformCanvas for standard x and y axis 3D rotation. This is the default, as there seems to be an issue with quaternion rotations, where some mouse directions are reversed. To enable quaternion rotations, set the TransformCanvas.useQuaternions boolean to true.
  11. A new MolGrabberCanvas function, setSearchTerm(), has been added to preset a term to be queried on page load.
  12. Google Chromium added to the list of supported Linux browsers, and it works very, very well with the ChemDoodle Web Components.
  13. Yahoo YUI Compressor is now used to minify the the libs for even faster page loads.
  14. Added more links to the Community Resources section. If you have discussed or used the ChemDoodle Web Components, let us know and we will add a link to you as well.

Fixes

  1. Fixed issue where strokeStyle was not being set when drawing atoms as circles, leading to unexpected graphical effects when specifying bonds_JMOLColors to true. The strokeStyle is now set to 'black'.

2.1.0

September 14, 2009

Executive Summary

This release adds new functionality and fixes some minor issues. For a nice demo of the enhanced ChemDoodle Web Components, visit web.chemdoodle.com/pdb.php.

Additions

  1. Sample PHP code for querying the RCSB Protein Data Bank has been added.
  2. The ability to read PDB files has been added, along with a new Angstroms per bond length visual specification.
  3. Both atoms and bonds within a molecule can now be sorted by z coordinates.
  4. Covalent bonds can now be calculated based on covalent radii.
  5. Added new functions for manipulating 3D coordinates between atoms.
  6. New visual specifications for contrasting bond overlaps.
  7. A function to remove Hydrogens and their bonds.
  8. Added a function to copy structures.
  9. The API has been completed.

Fixes

  1. When reading MOLFiles, the y coordinate is now flipped so that structures appear right side up on the inverted canvas.
  2. MOLFile output is now centered first.
  3. Fixed minor bug that mishandled null content sent to writeMOL(content).
  4. Fixed bug where strokeStyle was bring set for atom circle width instead of the correct lineWidth property.
  5. Submit button names no longer cause conflicts.

2.0.0

August 16, 2009
Initial public release.

1.0.0

June 15, 2009
Initial internal release.