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.
Contents
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 calculationsconstructor = 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 atomconstructor = 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 ringconstructor = 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 bondconstructor = 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 withconstructor = 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 idconstructor = 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 onconstructor = 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 idconstructor = new Function MolGrabberCanvas(String id, Integer width, Integer height, String String)
prototype = Canvas
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 idconstructor = new Function MolGrabberCanvas3D(String id, Integer width, Integer height, String String)
prototype = Canvas3D
2i. RotatorCanvas
is a child of the AnimatorCanvas structure and provides a basic component for displaying molecular rotation animationsconstructor = 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 sceneconstructor = 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 structuresconstructor = 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 withconstructor = 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 sceneconstructor = 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 drawingconstructor = 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 moleculeconstructor = 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> |
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