How do I create a web page that uses the ChemDraw ActiveX control? – Revvity Signals

Date Posted: 2018-12-10
Product: ChemDraw

Problem:

How do I create a web page that uses the ChemDraw ActiveX control?

Solution:

The following content is only useful if you are using a browser that supports the ActiveX control. Please review the Hardware/Software guide for your version of ChemDraw to see if you have a browser that supports the ActiveX control. Plugins are no longer supported by browsers, so disregard any information below that references the word Plugin.

Instead of writing HTML directly, you will instead call some simple JavaScript functions. We provide these functions for you, in the form of JavaScript files (*.js) that you can reference directly from your web pages.

This article tells you how to write these kind of pages.

Writing ActiveX Control Pages
ChemDraw JavaScript Library Function Reference
Troubleshooting

I. Writing Multi-browser Pages

Copy lib files and package files to an appropriate folder and set path variables in *chemdraw.js*.
Include the general ChemDraw library file *chemdraw.js* and wrapper files in the <HEAD></HEAD> part.
Use *cd_insertObject()* or *cd_insertObjectStr()* to insert a ChemDraw ActiveX in the appropriate position.
Use wrapper functions to operate ChemDraw ActiveX objects.

Here is an example. For this example, let's consider a website whose URL is http://mywebsite/, and where you plan to write a ChemDraw Active X page with a name *mycd.htm* and place it in the root directory. Let's follow the 4 steps.

1. Copy files to an appropriate place.

(1) JavaScript library files

chemdraw.js - General library, includes all functions to write ChemDraw ActiveX pages.
cdlib_ie.js - Function wrapper file for ActiveX, mainly used by IE browser

You can get the files from the latest ChemDraw release package.

You can put these files anywhere -- in the same directory as your html page, in a different directory on your server, or even on a different server altogether, as long as they stay together. It's usually easiest if you put them in a directory near the top level of your web site. That way, if you have more than one page that uses the ChemDraw Control, then all of those pages can link to the same JavaScript library files. For this example, let's put them in http://mywebsite/lib/chemdraw/.

(2) ActiveX CAB file and CDPHelper CAB and JAR file

camsoft.jar - CDPHelper JAR file
camsoft.cab - CDPHelper CAB file
camsoft.cab2 - IE uses it to detect Plugin

You can get these files from the latest ChemDraw release package

Copy the files into the folder that the three Javascript library files locate in. In this case, it's http://mywebsite/lib/chemdraw/.

2. Include the general ChemDraw library file *chemdraw.js* and wrapper files in the <HEAD></HEAD> part.

<HTML> <HEAD> <TITLE>Write Multi-browser pages</TITLE> <script language="JavaScript" src= "/lib/chemdraw/chemdraw.js"></script> <script> cd_includeWrapperFile("/lib/chemdraw/"); </script> </HEAD> <BODY bgColor=Silver> </BODY> </HTML>

3. Use *cd_insertObject()* or *cd_insertObjectStr()* to insert a ChemDraw ActiveX in the appropriate position.

The *cd_insertObject()* function will insert a ActiveX object into the page, initialized with the file "benzene.cdx", which in this case is located in the same directory as the mycd.htm page. The plugin will be created with a size of 267 by 128pixels, a name of "mycdx", not viewOnly (means editable), and no dataURL.

4. Use wrapper functions to operate ChemDraw ActiveX objects.

<HTML> <HEAD> <TITLE>Write Multi-browser pages</TITLE> <script language="JavaScript"> function clearStructure() { cd_clear("mycdx"); } </script> <script language="JavaScript" src= "/lib/chemdraw/chemdraw.js"></script> <script> cd_includeWrapperFile("/lib/chemdraw/"); </script> </HEAD> <BODY bgColor=Silver> <script> cd_insertObject("chemical/x-cdx", 267, 128, "mycdx", "benzene.cdx"); </script> <form> <input type="button" value="Clear Structure" name="btnClr" onclick="clearStructure()"> </form> </BODY> </HTML>

In this page, what I want to do is to clear all drawing when users click the *Clear Structure* button. To do this, I use ActiveX name as the inputting parameter to call wrapper function cd_clear().

When IE browsers visit this page, ActiveX control will be used.

II. ChemDraw JavaScript Library Function Reference

In this JavaScript library, many functions are defined. But only following 10 functions is necessary for you to learn before writing activeX pages.

Functions defined in chemdraw.js

cd_insertObject
cd_insertObjectStr
cd_includeWrapperFile

Wrapper functions defined in cdlib_ie.js and cdlib_ns.js

cd_getFormula
cd_getAnalysis
cd_getMolWeight
cd_getExactMass
cd_getData
cd_putData
cd_clear

NOTE: In following text, word required indicates the parameter is a required one, which you must give a value to; word optional indicates the parameter is an optional one, which you may ignore.

cd_insertObject(mimeType, objWidth, objHeight, objName, srcFile, viewOnly, shrinkToFit, dataURL)

This function dynamically chooses an appropriate ChemDraw Plugin/ActiveX for your web pages according to the calling browser.

Parameters:

mimeType

ignored

This parameter is ignored. This will always be "chemical/x-cdx" to ensure that the ChemDraw plugin is instantiated, rather than some other plugin that might also be able to interpret the source url.

objWidth

required

Display width.

objHeight

required

Display height.

objName

optional

The name of ChemDraw ActiveX object. This is an arbitrary name, but no two plugins on the same page should have the same name. This name is used to reference the plugin from other wrapper functions.

srcFile

optional

Data file used to initialize ChemDraw ActiveX. It may be any file type that ChemDraw supports.

viewOnly

optional

Set ChemDraw Plugin/ActiveX object working in viewOnly mode or not. Use "true" or "false". Default value is "false".

shrinkToFit

optional

If set it to "true", the drawing from initialization file will shrink automatically to fit the ActiveX window size. Use "true" or "false". Default value is "true".

dataURL

optional

Data file, from which data is loaded to ChemDraw ActiveX object. This parameter may be left blank. If present, data from this file is added to the plugin. It is most commonly used when you have non-CDX data files: use the srcFile parameter that points to an empty CDX file containing display settings (bond length, etc), and a dataURL that points to another data source (MolFile, etc) to display using those settings.

It may be any MIME type that ChemDraw supports. Currently ChemDraw supports following MIME types:

MIME Type	Description
chemical/x-cdx chemical/cdx	ChemDraw's native cdx format (Both listed MIME types are equivalent)
text/xml	ChemDraw's native cdxml format See also important troubleshooting note at bottom.
chemical/x-chemdraw	ChemDraw's historic chm format. Use of this format is strongly discouraged.
chemical/x-mdl-molfile chemical/mdl-molfile	The Molfile format as developed by MDL ISIS/Draw (Both listed MIME types are equivalent) See also important troubleshooting note at bottom.
chemical/x-mdl-tgf chemical/mdl-tgf	The tgf format as developed by MDL ISIS/Draw (Both listed MIME types are equivalent) See also important troubleshooting note at bottom.
chemical/x-mdl-rxn chemical/mdl-rxn	The Rxnfile format as developed by MDL ISIS/Draw (Both listed MIME types are equivalent) See also important troubleshooting note at bottom.
chemical/x-daylight-smiles chemical/daylight-smiles chemical/x-smiles chemical/smiles	The SMILES format as developed by Daylight. This will read/write the SMARTS format instead, for files that contain reaction information. (The four listed MIME types are all equivalent)
chemical/x-mdl-isis chemical/mdl-isis	The skc format as developed by MDL ISIS/Draw (Both listed MIME types are equivalent)
chemical/x-questel-f1	The F1 format as developed by Questel
chemical/x-questel-f1-query	The F1 query format as developed by Questel
chemical/x-msi-molfile chemical/msi-molfile	The MSI Molfile format as developed by Molecular Simulations,Inc. (now Accelrys) (Both listed MIME types are equivalent)
chemical/x-smd chemical/smd	The smd format (Both listed MIME types are equivalent)
chemical/x-ct chemical/ct	The Connection Table format used by very old versions of ChemDraw. (Both listed MIME types are equivalent)
chemical/x-cml chemical/cml	The XML-based Chemical Markup Language as documented at http://www.xml-cml.org/. (Both listed MIME types are equivalent). This is only supported in ChemDraw 9.0 and later.

You can also put structure data here directly with following format:
dataURL = 'data:{MIMEtype;[base64]},{data}'

{MIMEtype} is all MIME types listed in the table above. If the {data} is BASE64 coded data, you should append "base64" keyword after the MIME type.

dontCache

optional

Return value:

N/A

e.g.
cd_insertObject("chemical/x-cdx", 300, 200);

cd_insertObject("chemical/x-cdx", 267, 128, "mycdx", "benzene.cdx");

cd_insertObject("chemical/x-cdx", 267, 128, "mycdx", "benzene.cdx", true);

cd_insertObject("chemical/x-cdx", 267, 128, "mycdx", "empty.cdx", true, true, "benzene.mol");

cd_insertObject("chemical/x-cdx", 267, 128, "mycdx", "empty.cdx", true, true, dataurl='data:chemical/smiles,CCN(C)C(c1cccc(O)c1)=O');

<html>
<head>
<title>ChemDraw Control sample</title>

<script language="JavaScript" src="../HTML/chemdraw.js"></script>
<script> cd_includeWrapperFile("../HTML/"); </script>
</head>
<p>
<b><font size="4">ChemDraw Control using direct data</font></b><font SIZE="-1">
</p>
<table border><tr><td>
<script>

cdxstr = "VmpDRDAxMDAEAwIBAAAAAAAAAAAAAAAAAAAAAAMAEAAAAENoZW1EcmF3IDcuMC4xCAATAAAAVW50aXRsZWQgRG9jdW1lbnQAAzIACAD///////8AAAAAAAD//wAAAAD/////AAAAAP//AAAAAP////8AAAAA/////wAA//8BCQgAAEAEAQDAPAACCQgAAADhAAAA4QACCBAAAAAkAAAAJAAAACQAAAAkADoEAQABOwQBAAA8BAEAAAwGAQABDQYBAAAGBwIAAAAHBwIAAQADCAQAAAB4AAUIBAAAAB4ABggEAAAABAAHCAQAAAABAAgIBAAAAAIACQgEAACzAgAMCAEAAA0IAAAjCAEABQQIAgB4AAoICACIAGAAyAADAAsICACJAAAA8AADAAAIeAAAAwAAAtAC0AAAAAAchBWQ/sr+1B26FrwDZwUoA/wAAgAAAtAC0AAAAAAchBWQAAEAZABkAAAAAQABAQEAAAABJw8AAQABAAAAAAAAAAAAAAAAAAIAGQGQAAAAAABgAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAEAhAAZV8oAB/4XQCaoGcA4AeVAAABHgAAAAIAiADkBAkASGVsdmV0aWNhiQDkBAUAVGltZXMBgFYAAAAEAhAAAAAAAAAAAAAAANACAAAcAg8IAgABABAIAgABABYIBAAAACQAGAgEAAAAJAADgEcAAAAEAhAAZV8oAB/4XQCaoGcA4AeVAASARAAAAAoAAgABAAACCAAAADkA7IRfADcEAQABAAAEgEYAAAAKAAIAAwAAAggAAABXAOyEXwA3BAEAAQAABIBIAAAACgACAAUAAAIIAAAAZgAAgHkANwQBAAEAAASASgAAAAoAAgAHAAACCAAAAFcAE3uTADcEAQABAAAEgEwAAAAKAAIACQAAAggAAAA5ABN7kwA3BAEAAQAABIBOAAAACgACAAsAAAIIAAAAKgAAgHkANwQBAAEAAAWAUAAAAAoAAgANAAQGBABEAAAABQYEAEYAAAAKBgEAAQAABYBRAAAACgACAA4ABAYEAEYAAAAFBgQASAAAAAoGAQABAAAFgFIAAAAKAAIADwAEBgQASAAAAAUGBABKAAAACgYBAAEAAAWAUwAAAAoAAgAQAAQGBABKAAAABQYEAEwAAAAKBgEAAQAABYBUAAAACgACABEABAYEAEwAAAAFBgQATgAAAAoGAQABAAAFgFUAAAAKAAIAEgAEBgQATgAAAAUGBABEAAAACgYBAAEAAAAAAAAAAA==";
cd_insertObjectStr("<embed width='300' HEIGHT='300' type='chemical/x-cdx' dataurl='data:chemical/cdx;base64," + cdxstr + "'>");

</script>
</td></tr></table>
</font>
</html>

<html>
<head>
<title>ChemDraw Control sample</title>

<script language="JavaScript" src="../HTML/chemdraw.js"></script>
<script> cd_includeWrapperFile("../HTML/"); </script>
</head>
<table border><tr><td>
<script>

cd_insertObjectStr("<embed width='300' HEIGHT='300' type='chemical/x-cdx' dataurl='data:chemical/smiles,CCN(C)C(c1cccc(O)c1)=O'>");

</script>
</td></tr></table>
<p>Plugin parameters: type='chemical/x-cdx' dataurl='data:chemical/smiles,CCN(C)C(c1cccc(O)c1)=O'</p>
</html>

cd_insertObjectStr(tagStr)

This function acts the same role as the previous one, but uses one string as parameter. When upgrading to multi-browser pages from old Plugin pages, this function may be more convenient.

Parameters:		__
tagStr	required		A string to define ChemDraw Plugin/ActiveX attributes.
Return value:
	N/A

e.g.
cd_insertObjectStr("<EMBED src='HTML/blank.cdx' align='baseline' border= '0' width='267' height='128' type= 'chemical/x-cdx' name= 'mycdx'>");

NOTE: In parameter *tagStr*, only following keywords is valid, all of which are lowercase.

Keywords	value corresponding to function cd_insertObject	Required?
type	mimeType	ignored
width	objWidth	required
height	objHeight	required
name	objName	optional
src	srcFile	optional
viewonly	viewOnly	optional
shrinktofit	shrinkToFit	optional
dataurl	dataURL	optional
dontcache	dontCache	optional

e.g.
cd_insertObjectStr("src='HTML/blank.cdx' width=267 height=128 type= 'chemical/x-cdx' name= 'mycdx'");

cd_includeWrapperFile(basePath, checkInstall)

This function includes wrapper file, which wraps functions/methods of ChemDraw ActiveX into the same name, . What you do is just to call the functions defined in the wrapper files. Furthermore, since ActiveX is a more complicated component than Plugin, which defines more attributes and methods, you may use them but you must remember that Plugin may NOT support them. Functions defined in wrapper files are always safe and available for both Plugin and ActiveX, so in multi-browser pages, please use only wrapper functions.

Parameters:		__
basePath	required		The path along which the wrapper files can be found from current page folder.
checkInstall	optional		If true, it will check whether ActiveX is available on the local machine, and when finding ActiveX hasn't been installed, a new browser window will be launched to install it. If false, the step will be ignored. The default value is "true".
Return value:
	N/A

e.g.
cd_includeWrapperFile("lib/wrapperfile/");

cd_includeWrapperFile("lib/wrapperfile/", false);

cd_getFormula(objName, selection)

This function returns the formula of selected/all structures.

Parameters:		__
objName	required		Name of Plugin/ActiveX as specified in the objName parameter of the cd_insertObject() function
selection	optional		Set 1 to get the formula of selected structures, set 0 to get all. Default value is 0.
Return value:
	Formula as a string

e.g.
editFormula.value = cd_getFormula("mycdx", 0);

cd_getAnalysis(objName, selection)

This function returns the elemental analysis of selected/all structures.

Parameters:		__
objName	required		Name of ActiveX as specified in the objName parameter of the cd_insertObject() function
selection	optional		Set 1 to get the formula of selected structures, set 0 to get all.
Return value:
	Elemental analysis as a string

e.g.
editAnalysis.value = cd_getAnalysis("mycdx", 0);

cd_getMolWeight(objName, selection)

This function returns the molecular weight of selected/all structures.

Parameters:		__
objName	required		Name of Plugin/ActiveX as specified in the objName parameter of the cd_insertObject() function
selection	optional		Set 1 to get the formula of selected structures, set 0 to get all.
Return value:
	Molecular weight as a string

e.g.
editMolWt.value = cd_getMolWeight("mycdx", 0);

cd_getExactMass(objName, selection)

This function returns the exact mass of selected/all structures.

Parameters:		__
objName	required		Name of Plugin/ActiveX as specified in the objName parameter of the cd_insertObject() function
selection	optional		Set 1 to get the formula of selected structures, set 0 to get all.
Return value:
	Exact mass as a string

e.g.
editMs.value = cd_getExactMass("mycdx", 0);

cd_getData(objName, mimetype, checkMW)

This function returns the contents of the plugin in the specified data format.

Parameters:

objName

required

Name of ActiveX as specified in the objName parameter of the cd_insertObject() function

mimetype

required

Desired format of the data. Currently-supported formats include:

dataType	Meaning
"chemical/x-cdx"	CDX, in Base64
"chemical/x-mdl-molfile"	MDL MolFile	See also important troubleshooting note at bottom.
"chemical/x-daylight-smiles"	SMILES
"chemical/x-questel-f1"	DARC F1 Data
"chemical/x-questel-f1-query"	DARC F1 Query
"text/xml"	CDXML	See also important troubleshooting note at bottom.
"chemical/x-cml"	CML	See also important troubleshooting note at bottom. This is only supported in ChemDraw 9.0 and later.

checkMW

optioanl

If setting it true, only when Molecular Weight isn't 0, data may be returned. The default value is true.

Return value:

The contents of the plugin in the specified data format.

e.g.
editData.value = cd_getData("mycdx", "chemical/x-daylight-smiles");

cd_putData(objName, mimetype, data)

Set the contents of the Plugin/ActiveX to the specified data.

Parameters:

objName

required

Name of ActiveX as specified in the objName parameter of the cd_insertObject() function

mimetype

required

Format of the data being provided. Currently-supported formats include:

dataType	Meaning
"chemical/x-cdx"	CDX, in Base64
"chemical/x-mdl-molfile"	MDL MolFile	See also important troubleshooting note at bottom.
"chemical/x-daylight-smiles"	SMILES
"chemical/x-questel-f1"	DARC F1 Data
"chemical/x-questel-f1-query"	DARC F1 Query
"text/xml"	CDXML	See also important troubleshooting note at bottom.
"chemical/x-cml"	CML	See also important troubleshooting note at bottom. This is only supported in ChemDraw 9.0 and later.

data

required

data to be set to Plugin/ActiveX

Return value:

N/A

e.g.
cd_putData("mycdx", "chemical/x-daylight-smiles", smilesData);

cd_clear(objName)

This function clears the drawing.

Parameters:		__
objName	required		Name of ActiveX as specified in the objName parameter of the cd_insertObject() function
Return value:
	N/A

e.g.
cd_clear("mycdx");

cd_getVersion(objName)

This function returns the version of Plugin/ActiveX.

Parameters:		__
objName	required		Name of ActiveX as specified in the objName parameter of the cd_insertObject() function
Return value:
	version of ActiveX as a string. An ActiveX control may return ChemDraw Pro Control 8.0.3 A Control may return ChemDraw Pro Plugin 8.0.3

e.g.
var version = cd_getVersion("mycdx");

III. Troubleshooting

1. Why can't structures be loaded from a SRC file when using an IIS web server?

When you use the MS IIS web server ".cdx" files are used by the server by default as the channel definition files. So you must remove this default setting to let ChemDraw cdx files work in the ChemDraw ActiveX .

To remove this setting: Open "Internet Service Manager" --> Right click "default web site" --> Choose "Property" from the popup menu --> Choose "Main Directory" tab --> Click "Configure" button --> From "Application Mapping" list, choose ".cdx" item and click "Remove" button to delete it --> OK --> OK.

2. I'm trying to use inline CDXML, CML, or MolFile data, and I keep getting an "Unterminated string literal" error message!

JavaScript really doesn't like it when return characters appear in the middle of a string. So, trying to embed a MolFile verbatim will not work:

This will generate an "Unterminated string literal" error message

<script> cd_insertObjectStr("<embed width='300' height='200' name='mycdx' type='chemical/x-chemdraw' viewonly=false dataurl='data:chemical/mdl-molfile,
test.mol
  ChemDraw08300213062D

  7  7  0  0  0  0  0  0  0  0999 V2000
   -1.0717    0.4125    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -1.0717   -0.4125    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -0.3572   -0.8250    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    0.3572   -0.4125    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    0.3572    0.4125    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -0.3572    0.8250    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    1.0717    0.8250    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0
  1  2  1  0      
  2  3  1  0      
  3  4  1  0      
  4  5  1  0      
  5  6  1  0      
  6  1  1  0      
  5  7  1  0      
M  END
'>");</script>

Instead, you must convert the return characters into "\n" strings, which JavaScript is happy with:

That MolFile will probably appear on multiple lines as you view this page in your browser, but the point is that there truly must not be any returns in the actual HTML source. Any return characters in the MolFile (or CDXML file, or any other file format that uses embedded returns) must be converted to "\n".

Another option would be to forego the JavaScripts entirely, and instantiate the ActiveX using standard technology. For example, here is an example that loads the ChemDraw 7.0 control into a web page:

<object classid="clsid:AF2D2DC1-75E4-4123-BC0B-A57BD5C5C5D2" width="200" height="200" id="ChemDrawCt13" style="height: 200; width: 200">
<param NAME="DataURL" VALUE="data:chemical/x-mdl-molfile,test.mol
  ChemDraw08300213062D

  7  7  0  0  0  0  0  0  0  0999 V2000
   -1.0717    0.4125    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -1.0717   -0.4125    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -0.3572   -0.8250    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    0.3572   -0.4125    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    0.3572    0.4125    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -0.3572    0.8250    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    1.0717    0.8250    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0
  1  2  1  0      
  2  3  1  0      
  3  4  1  0      
  4  5  1  0      
  5  6  1  0      
  6  1  1  0      
  5  7  1  0      
M  END">
</object>

This approach, while possible, is strongly discouraged because it ties you to one specific implementation. This particular example will only work on Internet Explorer versions on machines that already have the ChemDraw 7.0 Control installed. It will not work under Netscape, and it will not work in the future when an 8.0 version of the control becomes available. Also, it will not work with any of the other JavaScript functions described on this page. Even though the Multibrowser technology introduces that minor "\n" problem with its use of JavaScript, it will be much more compatible on the long term.

Related articles