ChemDoodle Web Components

This is the application programming interface (API) for the ChemDoodle Web Components. The API will show you how to interact with the components in javascript to write more advanced functions and transfer chemical data. Note that this library is covered under the open source GPL license. Please read and understand this license before extending or changing this API. You may feel free to contact us for alternate licensing and for custom development. This page is for moderate to advanced programmers.

Data Structures
Canvases
Input/Output
Cheminformatics

1a. VisualSpecifications

The VisualSpecifications structure contains all the variables that define how all objects are drawn on the canvas. The variables are categorized into Canvas, Atom (atoms_) and Bond (bonds_) settings. All of these visual specifications are set by the defaults when a Canvas is constructed. The default variables are global and have the same names as the member variables, except that they are preceded by default_. Change the default settings to enforce visual specifications on entire webpages.

constructor = new Function VisualSpecifications(Number x, Number y)

Array atoms_font_families_2D: the atom text font families, families cascade through the array if not found on the users computer; for 2D depiction
Default Value: [Helvetica, Arial, Dialog]
Unit: Array<String>
Array lightDirection_3D: the direction the lighting points in 3D scenes
Default Value: [-.1, -.1, -1]
Unit: vector
Boolean atoms_circles_2D: draw atoms as circles, text is not drawn; for 2D depiction
Default Value: false
Unit: true/false
Boolean atoms_display: draw the atoms
Default Value: true
Unit: true/false
Boolean atoms_materialAmbientColor_3D: the ambient color for atoms in 3D scenes
Default Value: #000000
Unit: color
Boolean atoms_materialShininess_3D: the shininess of atoms in 3D scenes
Default Value: 32
Unit: positive integer
Boolean atoms_materialSpecularColor_3D: the specular color for atoms in 3D scenes
Default Value: #555555
Unit: color
Boolean atoms_resolution_3D: the resolution of the sphere vertex buffer used to render atoms in 3D scenes
Default Value: 60
Unit: positive integer
Boolean atoms_sphereDiameter_3D: the diameter of atoms in 3D scenes (for ball and stick and wireframe type representations); atoms_useVDWDiameters_3D overrides this property
Default Value: 0.8
Unit: Angstroms
Boolean atoms_useJMOLColors: use JMOL colors for atoms
Default Value: false
Unit: true/false
Boolean atoms_useVDWDiameters_3D: use van der Waals diameters for atoms
Default Value: false
Unit: true/false
Boolean bonds_clearOverlaps_2D: draws a small background to the bond in the background color to contrast between overlapping bonds for 2D depiction
Default Value: false
Unit: true/false
Boolean bonds_display: draw the bonds
Default Value: true
Unit: true/false
Boolean bonds_symmetrical_2D: double bonds are drawn symmetrically always, instead of pointing towards the center of a ring, for instance; for 2D depiction
Default Value: false
Unit: true/false
Boolean bonds_useJMOLColors: color the bond by using a gradient between the JMOL colors of the connected atoms
Default Value: false
Unit: true/false
Number angstromsPerBondLength: number of Angstroms per bond length
Default Value: 1.25
Unit: Å/bond length
Number atoms_circleBorderWidth_2D: width of atom circle borders for 2D depiction
Default Value: 1
Unit: pixels
Number atoms_circleDiameter_2D: diameter of atom circles for 2D depiction
Default Value: 10
Unit: pixels
Number atoms_font_size_2D: atom text font size for 2D depiction
Default Value: 12
Unit: points
Number bondLength_2D: length of the bonds, set the default_ before using an interpreter to read your file; for 2D depiction
Default Value: 20
Unit: pixels
Number bonds_atomLabelBuffer_2D: the amount that the bond pulls back to avoid drawing under atom text for 2D depiction
Default Value: 0.25
Unit: %/100*bond length
Number bonds_cylinderDiameter_3D: the diameter of bonds in 3D scenes
Default Value: 0.3
Unit: Angstroms
Number bonds_hashSpacing_2D: the spacing of hashes for 2D depiction
Default Value: 2.5
Unit: pixels
Number bonds_hashWidth_2D: the width of hashes for 2D depiction
Default Value: 1
Unit: pixels
Number bonds_materialAmbientColor_3D: the ambient color for bonds in 3D scenes
Default Value: #222222
Unit: color
Number bonds_materialShininess_3D: the shininess of bonds in 3D scenes
Default Value: 32
Unit: positive integer
Number bonds_materialSpecularColor_3D: the specular color for bonds in 3D scenes
Default Value: #555555
Unit: color
Number bonds_overlapClearWidth_2D: the extent of the overlap clearing in both directions for 2D depiction
Default Value: 0.5
Unit: pixels
Number bonds_resolution_3D: the resolution of the cylinder vertex buffer used to render bonds in 3D scenes
Default Value: 60
Unit: positive integer
Number bonds_saturationAngle_2D: the angle that saturated double bonds are clipped by for 2D depiction
Default Value: Math.PI/3
Unit: radians
Number bonds_saturationWidth_2D: relative saturation width of double and triple bond lines for 2D depiction
Default Value: 0.2
Unit: %/100*bondLength
Number bonds_wedgeThickness_2D: the thickness of stereochemical wedge bonds for 2D depiction
Default Value: 0.22
Unit: %/100*bondLength
Number bonds_width_2D: width of the bonds for 2D depiction
Default Value: 1
Unit: pixels
Number projectionBackCulling_3D: the far camera cutoff distance in 3D scenes
Default Value: 10000
Unit: Angstroms
Number projectionFrontCulling_3D: the near camera cutoff distance in 3D scenes
Default Value: 0.1
Unit: Angstroms
Number projectionVerticalFieldOfView_3D: the field of view angle for the projection matrix in 3D scenes
Default Value: 45
Unit: degrees
Number projectionWidthHeightRatio_3D: the width/height ratio for the projection matrix in 3D scenes, this should be height/width of your component to keep the aspect ratio square
Default Value: 1
Unit: ratio
Number rotateAngle: rotation angle of the canvas
Default Value: 0
Unit: radians
Number scale: scale of the canvas, set this after the molecule has been loaded, then repaint the canvas
Default Value: 1
Unit: %/100
String atoms_color: atom color
Default Value: #000000
Unit: color
String backgroundColor: background color of the canvas
Default Value: white
Unit: color
String bonds_color: bond color
Default Value: #000000
Unit: color
String bonds_ends_2D: bond end style for 2D depiction
Allowed Values: [butt, round, square]
Default Value: round
String lightDiffuseColor_3D: the diffusive light color in 3D scenes
Default Value: '#FFFFFF'
Unit: color
String lightSpecularColor_3D: the specular light color in 3D scenes
Default Value: '#FFFFFF'
Unit: color
Function set3DRepresentation(String representation): presets the 3D representation for a Canvas3D, currently accepts: 'Ball and Stick', 'van der Waals Spheres', 'Stick', 'Wireframe'

1b. Point

represents a 2D point and contains functions for various 2D geometric calculations

constructor = new Function Point(Number x, Number y)

Number x: x coordinate
Default Value: 0
Unit: pixels
Number y: y coordinate
Default Value: 0
Unit: pixels
Function add(Point p): add Point p
Function angle(Point p): returns the angle to Point p, with the current Point as the origin (y-axis is inverted for the inverted canvases)
returns Number
Unit: radians
Function angleForStupidCanvasArcs(Point p): same as angle(), but for the contradictory way canvas arcs are handled
returns Number
Unit: radians
Function distance(Point p): returns the distance to Point p
returns Number
Unit: pixels
Function sub(Point p): subtract Point p

1c. Atom

represents a chemical atom

constructor = new Function Atom(String label, Number x, Number y, Number z)

prototype = Point

Boolean isHover: for DoodleCanvas, mouse is hovered over this, draws a brown circle
Boolean isLone: not connected to any other atoms (if Carbon, draws a grey dot)
Boolean isOverlap: for DoodleCanvas, overlaps another atom, draws a red circle
Boolean isSelected: for DoodleCanvas, mouse has clicked this, draws a blue circle
Number z: z coordinate
Default Value: 0
Unit: pixels
String label: label of the atom, should be an element symbol
Default Value: C
Unit: Element Symbol
Function add3D(Atom a): the 3D counterpart to the same Point function
Function distance3D(Atom a): the 3D counterpart to the same Point function
Function draw(Context ctx, VisualSpecifications specs): draws this atom to the canvas that owns the Context using the given VisualSpecifications
Function isLabelVisible(): returns true if label is not 'C'
returns Boolean
Unit: true/false
Function render(GLContext gl, VisualSpecifications specs): renders this atom to the 3D scene in the WebGL canvas that owns the GLContext using the given VisualSpecifications
Function sub3D(Atom a): the 3D counterpart to the same Point function

1d. Ring

represents a chemical ring

constructor = new Function Ring()

Array atoms: constituent atoms
Array bonds: constituent bonds
Point center: the center of this Ring, cached for performance
Function getCenter(): returns a Point that specifies the center of this Ring
returns Point
Unit: pixels
Function setupBonds(Point p): loops through bonds and sets all Bond.ring objects in to itself, caches center

1e. Bond

represents a chemical bond

constructor = new Function Bond(Atom a1, Atom a2, Number bondOrder)

static String BOND_STEREO_AMBIGUOUS: specifies an ambiguous stereo bias
static String BOND_STEREO_NONE: specifies no stereo bias
static String BOND_STEREO_PROTRUDING: specifies a protruding stereo bias
static String BOND_STEREO_RECESSED: specifies a recessed stereo bias
Atom a1: first Atom
Atom a2: second Atom
Boolean isHover: for DoodleCanvas, mouse is hovered over this, draws brown handles
Number bondOrder: bond order
Allowed Values: [1, 2, 3]
Default Value: 1
Ring ring: the largest containing SSSR ring
String stereo: stereochemical bias of the bond, must be one of the BOND_STEREO constants
Default Value: BOND_STEREO_NONE
Function contains(Atom a): returns the Atom opposite Atom a
returns Boolean
Unit: true/false
Function draw(Context ctx, VisualSpecifications specs): draws this bond to the canvas that owns the Context using the given VisualSpecifications
Function getCenter(): returns a Point that specifies the center between the two Atoms in the Bond
returns Point
Unit: pixels
Function getNeighbor(Atom a): returns the Atom opposite Atom a
returns Atom
Function render(GLContext gl, VisualSpecifications specs): renders this bond to the 3D scene in the WebGL canvas that owns the GLContext using the given VisualSpecifications

1f. Molecule

represents a chemical molecule

Array atoms: constituent atoms
Array bonds: constituent bonds
Array rings: constituent rings
Boolean findRings: will find rings in the check() function; this should be disabled by you, if not necessary, to improve performance
Default Value: true
Function check(): sets up the molecule for drawing by checking for lone carbons, rings and sorting
Function draw(Context ctx, VisualSpecifications specs): draws this molecule to the canvas that owns the Context using the given VisualSpecifications
Function getAngles(Atom a): with a as the origin, returns an Array of all the angles to the immediately connected atoms in this Molecule, in ascending order
returns Array
Unit: radians
Function getCenter(): returns a Point that specifies the center of this Molecule
returns Point
Unit: pixels
Function getCenter3D(): returns an Atom that specifies the center of this Molecule in 3 dimensions
returns Atom
Unit: pixels
Function getDimension(): returns a Point that specifies the width and height of this Molecule in the XY plane
returns Point
Unit: pixels
Function render(GLContext gl, VisualSpecifications specs): renders this molecule to the 3D scene in the WebGL canvas that owns the GLContext using the given VisualSpecifications
Function sortAtomsByZ(): sorts atoms in ascending order by z coordinate
Function sortBondsByZ(): sorts bonds in ascending order by their z coordinate

2a. Canvas

is the parent class for all ChemDoodle Web Components, it should not be instantiated. Its basic functionality allows for molecules to be drawn and loaded. This class also contains hosts the system for handling user input events from the mouse and the keyboard. This class should be extended for custom components.

constructor = new Function Canvas()

static Boolean ALT: keeps track of whether the alt key is held down
static Boolean SHIFT: keeps track of whether the shift key is held down
static Canvas CURRENT_OVER: keeps track of the component that the mouse is currently over. Null if the mouse is over no component
Image image: the background image, overrides the VisualSpecification backgroundColor property; if null, no image is drawn
Integer height: the height of the associated HTML element
Integer width: the width the associated HTML element
Molecule molecule: the molecule associated with this component
String emptyMessage: the message to be displayed if the molecule is null. If this variable is null, no message is displayed if the component is empty
String id: the HTML id of the associated HTML element
VisualSpecifications specs: the visual specifications that define how content should be painted
Function center(): centers the loaded molecule in the component
Function create(String id, Integer width, Integer height): this function places the component in the HTML page and is called in every constructor of the children classes. The id is the HTML id of the component, with width and height its dimensions
Function getMolecule(): returns the Molecule currently associated with the component
returns Molecule
Function loadMolecule(Molecule mol): loads the given Molecule, mol, and checks it
Function prehandleEvent(Event e): conditions the user input event and sets a new variable in the Event object named p that contains the coordinates of the event in the component
Function repaint(): repaints the component
Function setBackgroundImage(String url): sets the background image to the image specified by the url parameter
optional abstract Function click(Event e): receives the mouse click event, override this for your custom components
optional abstract Function dblclick(Event e): receives the mouse double click event, override this for your custom components
optional abstract Function drag(Event e): receives the mouse drag event, override this for your custom components
optional abstract Function drawChildExtras(Context ctx): draws extra graphics on top of the base graphics, override this for your custom components
optional abstract Function keydown(Event e): receives the key down event, override this for your custom components
optional abstract Function keypress(Event e): receives the key press event, override this for your custom components
optional abstract Function keyup(Event e): receives the key up event, override this for your custom components
optional abstract Function mousedown(Event e): receives the mouse down event, override this for your custom components
optional abstract Function mousemove(Event e): receives the mouse move event, override this for your custom components
optional abstract Function mouseout(Event e): receives the mouse out event, override this for your custom components
optional abstract Function mouseover(Event e): receives the mouse over event, override this for your custom components
optional abstract Function mouseup(Event e): receives the mouse up event, override this for your custom components
optional abstract Function mousewheel(Event e, Number delta): receives the mouse wheel event, override this for your custom components; delta is the amount the wheel has spun
optional abstract Function rightclick(Event e): receives the mouse right click event, override this for your custom components
optional abstract Function rightmousedown(Event e): receives the mouse right mouse down event, override this for your custom components
optional abstract Function rightmouseup(Event e): receives the mouse right mouse up event, override this for your custom components
optional abstract Function subCreate(): additional function to be called during create(), such that child classes can do additional setup before returning to the child constructor

2b. Canvas3D

is the parent class for all 3D ChemDoodle Web Components, it should not be instantiated. Its basic functionality allows for molecules to be rendered in a 3D scene and loaded.This class should be extended for custom components.

constructor = new Function Canvas3D()

prototype = Canvas

static Boolean NO_WEBGL_WARNING: if true, no warning will be displayed if WebGL cannot be initialized
Default Value: false
Unit: true/false
Matrix rotationMatrix: the rotation matrix to be applied before rendering the 3D scene
Default Value: Matrix.I(4)
Unit: 4x4 matrix
Matrix translationMatrix: the translation matrix to be applied before rendering the 3D scene
Default Value: Matrix.I(4)
Unit: 4x4 matrix
Point lastPoint: the last point in the components space that the user initiated a mouseDown event
Function afterLoadMolecule(): helper method to reset the scene if a gl parameter has been altered
Function setViewDistance(Number distance): helper method to move the camera the input distance away from the center of the scene; distance is in Angstroms
Function setupScene(): creates the 3D scene
override Function center(): centers the molecule in 3D around the origin
override Function drag(Event e): performs the mouse drag action
override Function mousedown(Event e): performs the mouse down action
override Function mousewheel(Event e): performs the mouse scroll action
override Function repaint(): renders the 3D scene
override Function rightmousedown(Event e): performs the mouse right click action
override Function subCreate(): sets up GLContext, alerts viewer to warning if GLContext cannot be created; initializes shaders and scene

2c. AnimatorCanvas

is a child of the Canvas class and is the parent class for all animated ChemDoodle Web Components, it should not be instantiated. It provides an extendable framework for creating animations. This class should be extended for custom components.

constructor = new Function AnimatorCanvas()

prototype = Canvas

Number timeout: the default refresh rate
Default Value: 33 (~30fps)
Unit: ms
Timer handle: a handle on the current Timer so it can be started and stopped
Function isRunning(): returns true if the animation is currently running
returns Boolean
Unit: true/false
Function startAnimation(): initializes the animation
Function stopAnimation(): terminates the animation
abstract Function nextFrame(): called by the timer, in the frequency specified by the interval timeout, this must be overridden for your custom components, repaints the component after each call

2d. DoodleCanvas

is a child of the Canvas structure and provides a basic component for users to draw molecules with

constructor = new Function DoodleCanvas(String id, Integer width, Integer height)

prototype = Canvas

Atom tempAtom: a temporary holder for soon to be placed atoms
Boolean isHelp: true if the user is hovering over the help icon
Point helpPos: the position of the help icon
override Function drag(Event e): performs the mouse drag action
override Function drawChildExtras(Context ctx): draws extra graphics on top of the base graphics
override Function keydown(Event e): performs the key down action
override Function mousedown(Event e): performs the mouse down action
override Function mousemove(Event e): performs the mouse move action
override Function mouseup(Event e): performs the mouse up action

2e. FileCanvas

is a child of the Canvas structure and provides a basic component for users to load molecule from their computer with. The action is the server side script to be called that loads the file into a hidden frame. After the asynchronous call is finished, the correct function is called to load the molecule into the component with the associated id

constructor = new Function FileCanvas(String id, Integer width, Integer height, String String, String urlOrFunction, String color, Number size)

prototype = Canvas

2f. HyperlinkCanvas

is a child of the Canvas structure and provides a basic button-like component: it responds to mouse overs and executes a link or action when clicked on

constructor = new Function HyperlinkCanvas(String id, Integer width, Integer height, String urlOrFunction)

prototype = Canvas

Boolean openInNewWindow: if true and urlOrFunction is a url, then the url will be opened in a new window instead of changing the current page
Default Value: false
Unit: true/false
Event e: keeps track of the last event
Image hoverImage: if this is initialized, then the mouse over will display an image instead of a hyperlink-like decoration
Number size: the width of the mouse over highlight
Default Value: 2
Unit: pixels
String color: the color of the mouse over highlight
Default Value: blue
Unit: color
String urlOrFunction: this is the url to be directed to when clicked, this can also be a function object and the function will be executed when clicked
Function setHoverImage(String url): sets the components hover image to the url specified
override Function click(Event e): performs the mouse click action
override Function drawChildExtras(Context ctx): draws extra graphics on top of the base graphics
override Function mouseout(Event e): performs the mouse out action
override Function mouseover(Event e): performs the mouse over action, currently not called

2g. MolGrabberCanvas

is a child of the Canvas structure and provides a basic component for users to search databases with. The action is the server side script to be called that loads the queried data into a hidden frame. After the asynchronous call is finished, the correct function is called to load the molecule into the component with the associated id

constructor = new Function MolGrabberCanvas(String id, Integer width, Integer height, String String)

prototype = Canvas

Function setSearchTerm(String term): automatically searches for and loads the input search term

2h. MolGrabberCanvas3D

is a child of the Canvas3D structure and provides a basic 3D component for users to search databases with. The content may then be transformed just as in the Transformer3D component. The action is the server side script to be called that loads the queried data into a hidden frame. After the asynchronous call is finished, the correct function is called to load the molecule into the component with the associated id

constructor = new Function MolGrabberCanvas3D(String id, Integer width, Integer height, String String)

prototype = Canvas3D

Function setSearchTerm(String term): automatically searches for and loads the input search term

2i. RotatorCanvas

is a child of the AnimatorCanvas structure and provides a basic component for displaying molecular rotation animations

constructor = new Function RotatorCanvas(String id, Integer width, Integer height, String String, Boolean rotate3D)

prototype = AnimatorCanvas

Boolean rotate3D: the animation will rotate in 3 dimensions if true, will only rotate around the z axis if false
Default Value: false
Number xIncrement: the x rotation increment
Default Value: Math.PI/360
Unit: radians
Number yIncrement: the y rotation increment
Default Value: Math.PI/360
Unit: radians
Number zIncrement: the z rotation increment
Default Value: Math.PI/360
Unit: radians
override Function nextFrame(): updates the state during the rotation

2j. RotatorCanvas3D

is a child of the Canvas3D structure and provides a basic component for displaying molecular rotation animations in a 3D scene

constructor = new Function RotatorCanvas3D(String id, Integer width, Integer height)

prototype = Canvas3D

Boolean rotate3D: the animation will rotate in 3 dimensions if true, will only rotate around the z axis if false
Default Value: false
Number timeout: the default refresh rate
Default Value: 33 (~30fps)
Unit: ms
Number xIncrement: the x rotation increment
Default Value: Math.PI/360
Unit: radians
Number yIncrement: the y rotation increment
Default Value: Math.PI/360
Unit: radians
Number zIncrement: the z rotation increment
Default Value: Math.PI/360
Unit: radians
Timer handle: a handle on the current Timer so it can be started and stopped
Function isRunning(): returns true if the animation is currently running
returns Boolean
Unit: true/false
Function startAnimation(): initializes the animation
Function stopAnimation(): terminates the animation
override Function drag(): set to null to ignore this gesture
override Function mousedown(): set to null to ignore this gesture
override Function mousewheel(): set to null to ignore this gesture
override Function nextFrame(): called by the timer, in the frequency specified by the interval timeout, this must be overridden for your custom components, repaints the component after each call
override Function rightmousedown(): set to null to ignore this gesture

2k. SlideshowCanvas

is a child of the AnimatorCanvas structure and provides a basic component for displaying transitions between several molecular structures

constructor = new Function SlideshowCanvas(String id, Integer width, Integer height)

prototype = AnimatorCanvas

Array molecules: the molecular structures to be displayed in the order they are to be displayed in, this should not be empty
Integer curIndex: keeps track of the current index in molecules
Integer phase: keeps track of the current phase (different types of animations) during the transition
Number alpha: keeps track of the current alpha during the transition
Number timeout: this parameter is inherited from AnimatorCanvas, but it is set to a larger value
Default Value: 5000
Unit: ms
Timer innerHandle: holds on to the second inner Timer for performing the transition, so it can be started and stopped
Function addMolecule(Molecule molecule): adds a molecule to the slideshow
Function breakInnerHandle(): completes the second phase of the animation and the molecule switch
override Function drawChildExtras(Context ctx): draws extra graphics on top of the base graphics
override Function nextFrame(): updates the state during the rotation

2l. TransformCanvas

is a child of the Canvas structure and provides a basic component for users to transform (translate [alt+drag], rotate [drag], scale [mousewheel]) molecules with

constructor = new Function TransformCanvas(String id, Integer width, Integer height)

prototype = Canvas

Boolean rotate3D: will rotate in 3 dimensions if true, will only rotate around the z axis if false
Default Value: false
Boolean useQuaternions: will use quaternion rotation if true, will rotate in 3D around the X and Y axes if false; currently the quaternion rotation is useable but some of the directions are reversed
Default Value: false
Number rotationMultMod: multiplication modifier for the rotation calculations, larger numbers correspond to faster rotations
Default Value: 1.3
Point lastPoint: keeps track of the last mouse position
override Function drag(Event e): performs the mouse drag action
override Function mousedown(Event e): performs the mouse down action
override Function mouserightdown(Event e): performs the mouse right down action, currently not called
override Function mousewheel(Event e, Number delta): performs the mouse wheel action

2m. TransformCanvas3D

is a child of the Canvas3D structure and provides a basic component for users to transform (translate [alt+drag], rotate [drag], scale [mousewheel]) molecules with in a 3D scene

constructor = new Function TransformCanvas3D(String id, Integer width, Integer height)

prototype = Canvas

2n. ViewerCanvas

is a child of the Canvas structure and provides a basic component for simply displaying a static styled structural drawing

constructor = new Function ViewerCanvas(String id, Integer width, Integer height)

prototype = Canvas

2o. ViewerCanvas3D

is a child of the Canvas3D structure and provides a basic component for simply displaying a static 3D scene of a molecule

constructor = new Function ViewerCanvas3D(String id, Integer width, Integer height)

prototype = Canvas

override Function drag(): set to null to ignore this gesture
override Function mousedown(): set to null to ignore this gesture
override Function mousewheel(): set to null to ignore this gesture
override Function rightmousedown(): set to null to ignore this gesture

3a. File Formats

There are several popular chemical file formats out there. Currently, ChemDoodle Web Components only reads and writes basic MDL MOLFiles and reads basic RCSB PDB files. This is sufficient for most chemical applications. Also note that ChemDoodle Web Components are optimized for individual molecules, so files containing many molecules may not be appropriate. To convert files to MDL MOLFile or RCSB PDB format, use ChemDoodle, which currently reads and writes 16 popular chemical filetypes.

3b. File Input

Somehow you will need to get chemical data to these javascript functions. One way is to use server side scripts to set up javascript variables before the page is sent to the viewer. We provide some examples through PHP that are downloaded with this library. However, you should use your server side script of choice to populate the ChemDoodle Web Components on your webpage, and use our PHP scripts as examples. For example, below we initialize 4 global javascript variables from MDL MOLFiles located on our server using the PHP function file2js(), so we can load them into components on the same page.

<SCRIPT>

        caffeine = <?php file2js('molecules/caffeine.mol'); ?>;

        larger = <?php file2js('molecules/larger.mol'); ?>;

        threed = <?php file2js('molecules/3d.mol'); ?>;

        dna = <?php file2js('molecules/dna.mol'); ?>;

</SCRIPT>

3c. MDLInterpreter

is a static class for reading and writing MDL files

static Function fit(String data, Number length): helper method for writing data to fixed lengths, returns the formatted String
returns String
static Function readMOL(String content, Number multiplier): reads the MOLFile content and returns the corresponding molecule; the optional multiplier variable will override the default_anstromsPerBondLength variable, set it to 1 for 3D scenes in Angstroms
static Function writeMOL(Molecule molecule): writes and returns a String containing the MOLFile of the given molecule
returns String

3d. PDBInterpreter

is a static class for reading and writing RCSB PDB files

static Function readPDB(String content, Number multiplier): reads the PDB file content and returns the corresponding molecule; the optional multiplier variable will override the default_anstromsPerBondLength variable, set it to 1 for 3D scenes in Angstroms

4a. Element

is data structure for holding information about an element; parameters not set by the constructor are set by the ElementalData script.

constructor = new Function Element(String symbol, String name, Number atomicNumber)

Number atomicNumber: the atomic number of the element
Number covalentRadius: the covalent radius of the element
Number vdWRadius: the van der Waals radius of the element
String jmolColor: the jmol color of the element
String name: the name of the element
String symbol: the symbol of the element

4b. ElementalData

ElementalData holds two arrays, and sets up the data for the Elements.

symbols, which contains all the element symbols, with each symbol index the corresponding atomic number - 1.
ELEMENT, where the key is the element name, and the data is the corresponding Element object.

4c. RingFinder

is a static class for obtaining rings

static Function getRingsSSSR(Molecule molecule): calculates and returns an array of Rings corresponding to the SSSR of the given Molecule; an SSSR is not always unique, the algorithm works by first finding all rings (Hanser) then obtaining the SSSR (Plotkin)
returns Array
Unit: Array<Ring>

4d. BondDeducer

is a static class for analyzing bonds

static Number LEEWAY: the amount of flexibility in calculating bonds; the larger the number, the more bonds found
Default Value: 1.1
Unit: bond lengths
static Function deduceCovalentBonds(Molecule molecule, Number customPointsPerAngstrom): deduces covalent bonds for the input molecule and appends them to the molecule's bonds array. Uses the covalent radii data provided in atomicData. The customPointsPerAngstrom parameters allows you to change the value from that specified by default.
static Function getPointsPerAngstrom():
returns Number
Unit: pixels/Angstrom

4e. HydrogenDeducer

is a static class for manipulating Hydrogens

static Function removeHydrogens(Molecule molecule): removes all Hydrogens and bonds attached to them from the given molecule

4f. StructureBuilder

is a static class for copying and creating molecular structures

static Function copy(Molecule molecule): returns a new Molecule object that is a copy of the input molecule
returns Molecule

Contents