Creating Multi-browser Pages using the CS ChemDraw Plugin/ActiveX Control

Back in the old days (the middle of 2001!), it was easy to create web pages that used the CS ChemDraw Plugin. Both browsers in wide usage, Microsoft Internet Explorer (IE) and Netscape Navigator/Communicator (Netscape) supported the same type of plugin. A web page author could add a plugin to a web page with a line or two of HTML, and a web page reader could install a single plugin and assume that it would work.

Now, things have changed.

Starting with the second Service Pack for IE 5.5 (IE 5.5 SP 2), Microsoft removed support for the old-style plugins that they had supported for years. Netscape 6.0 was released around the same time, and although it continued to support old plugins for most purposes, its behavior changed in some areas that were important to ChemDraw. Now three different approaches are needed: one for people who haven't yet updated, and one each for people who have updated to the latest versions of Netscape and IE. The following table lists the browser compatibility of those three versions of the ChemDraw Plugin.

Browser and Version ActiveX old Plugin new Plugin
Netscape v. 4.x No Yes No
v. 6.x No No Yes
IE v. 4.x, v. 5.0, v. 5.5 (SP1) Yes Yes No
v. 5.5 (SP2), v. 6.x Yes No No

So, enough of the bad news. The GOOD NEWS is that it is still possible to create a single web page that uses the correct version of the plugin for all users. In fact, it's even easier to do this than before, because we've done the hard work for you. 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. These JavaScript functions do everything necessary to figure out which version of the plugin is needed by each person who views your page, and then produce just the right instructions to load the correct plugin.

This article tells you how to write these kind of pages (we will call them multi-browser pages).

  1. Upgrading to Multi-browser Pages
  2. Writing Multi-browser Pages
  3. ChemDraw JavaScript Library Function Reference
  4. Troubleshooting

<go back the top>

I. Upgrading to Multi-browser Pages

NOTE: This section discusses upgrading an existing web site to use the new JavaScript wrappers. If you are creating a new site, please skip immediately to the next section.

It is very easy to convert an existing page to use the new JavaScript wrappers. Let's look at a specific example. Suppose you have a website http://mywebsite/, and on that site there is a Plugin page myplugin.htm:

<html>
<head>

<title>ChemDraw Plugin</title>

<script LANGUAGE="JavaScript">
function Analyze()
{
document.theForm.SMILES.value = document.CDPAnalyze.getData(2);
}
</script>

</head>

<body>

<embed width="200" HEIGHT="200" type="chemical/x-cdx" src="benzene.cdx" ID="1">

<applet NAME="CDPAnalyze" CODE="camsoft.cdp.CDPHelperAppSimple" archive="camsoft.jar" WIDTH="10" HEIGHT="1">
<param NAME="ID" VALUE="1">
<param NAME="cabbase" VALUE="camsoft.cab">
</applet>

<form name=theForm>
<input NAME="SMILES" SIZE="30">
<input TYPE="button" VALUE="Analyze" ONCLICK="Analyze()">
</form>

</body>
</html>
 

The following five steps show how to upgrade this existing page to a multi-browser page.

1. Copy files to an appropriate place.

(1) JavaScript library files

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

You can get the three files by using the links above (you may need to right-click on the links and choose"Save Link As..." or a similar option). Note that older versions of these files were included in the ChemDraw 7.0 release package. Those older versions will work fine in most cases, but will misbehave in subtle ways in other cases. To be sure you are using the most updated versions, you should download the latest files using the links above.

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 plugin, 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 or simply by using the links above (you may need to right-click on the links and choose "Save Link As..." or a similar option; please note that after downloading camsoft.jar, a .zip extension may have been added to the name - you will need to delete the .zip extension from the name).

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

2. Add JavaScript library file (chemdraw.js) and Plugin/ActiveX method wrapper file (cdlib_ie.js for IE and cdlib_ns.js for Netscape).

In your existing html file, find the </head> tag and insert following two lines before it.

<html>
<head>

<title>ChemDraw Plugin</title>

<script LANGUAGE="JavaScript">
function Analyze()
{
document.theForm.SMILES.value = document.CDPAnalyze.getData(2);
}
</script>

<script language="JavaScript" src= "/lib/chemdraw/chemdraw.js"></script>
<script> cd_includeWrapperFile("/lib/chemdraw/"); </script>
</head>

<body>

<embed width="200" HEIGHT="200" type="chemical/x-cdx" src="benzene.cdx" ID="1">

<applet NAME="CDPAnalyze" CODE="camsoft.cdp.CDPHelperAppSimple" archive="camsoft.jar" WIDTH="10" HEIGHT="1">
<param NAME="ID" VALUE="1">
<param NAME="cabbase" VALUE="camsoft.cab">
</applet>

<form name=theForm>
<input NAME="SMILES" SIZE="30">
<input TYPE="button" VALUE="Analyze" ONCLICK="Analyze()">
</form>

</body>
</html>

NOTE: The "/lib/chemdraw/" portion of those two lines should be changed to match the real location where you installed the JavaScript files.

3. Change EMBED tag.

Find <embed> tag and put whole tag string into *cd_insertObjectStr* as a parameter. You may need to change any double quotes in the existing tag to single quotes::

<html>
<head>

<title>ChemDraw Plugin</title>

<script LANGUAGE="JavaScript">
function Analyze()
{
document.theForm.SMILES.value = document.CDPAnalyze.getData(2);
}
</script>

<script language="JavaScript" src= "/lib/chemdraw/chemdraw.js"></script>
<script> cd_includeWrapperFile("/lib/chemdraw/"); </script>
</head>

<body>

<script> cd_insertObjectStr("<embed width='200' HEIGHT='200' type='chemical/x-cdx' src='benzene.cdx' ID='1'>");</script>
<embed width="200" HEIGHT="200" type="chemical/x-cdx" src="benzene.cdx" ID="1">

<applet NAME="CDPAnalyze" CODE="camsoft.cdp.CDPHelperAppSimple" archive="camsoft.jar" WIDTH="10" HEIGHT="1">
<param NAME="ID" VALUE="1">
<param NAME="cabbase" VALUE="camsoft.cab">
</applet>

<form name=theForm>
<input NAME="SMILES" SIZE="30">
<input TYPE="button" VALUE="Analyze" ONCLICK="Analyze()">
</form>

</body>
</html>

To be able to call the Plugin/ActiveX object from other functions, it must have a name. So the line should be following.

<script> cd_insertObjectStr("<embed width='200' HEIGHT='200' type='chemical/x-cdx' src='benzene.cdx' ID='1' name='mycdx'>");</script>

This function will choose an appropriate Plugin/ActiveX for your web pages dynamically according to the calling browser type and version when loaded by client browsers.

Netscape 4.x old Plugin
Netscape 6 new Plugin
IE ActiveX

NOTE: Be sure add a name for each Plugin/ActiveX, only by which you can call it. The id isn't technically necessary any more, for cd_insertObjectStr function will assigned one identified ID when using CDPHelper, but it won't hurt..

NOTE: Be sure to always use lowercase. Some browsers are case-sensitive and mixing case can cause your pages to fail.

4. Remove CDPHelper's Applet tag.

CDPHelper applet isn't necessary any more, since even running in Netscape 4.x, the JavaScript function cd_insertObjectStr will insert one automatically just before the <EMBED> tag.

So what you will do this step is to find <applet> tag and remove the whole tag. If it's a CDPHelper, the CODE attribute must be equal to *camsoft.cdp.CDPHelperAppSimple*, so you can just search for that text:

<html>
<head>

<title>ChemDraw Plugin</title>

<script LANGUAGE="JavaScript">
function Analyze()
{
document.theForm.SMILES.value = document.CDPAnalyze.getData(2);
}
</script>

<script language="JavaScript" src= "/lib/chemdraw/chemdraw.js"></script>
<script> cd_includeWrapperFile("/lib/chemdraw/"); </script>
</head>

<body>

<script> cd_insertObjectStr("<embed width='200' HEIGHT='200' type='chemical/x-cdx' src='benzene.cdx' ID='1' name='mycdx'>");</script>

<applet NAME="CDPAnalyze" CODE="camsoft.cdp.CDPHelperAppSimple" archive="camsoft.jar" WIDTH="10" HEIGHT="1">
<param NAME="ID" VALUE="1">
<param NAME="cabbase" VALUE="camsoft.cab">
</applet>

<form name=theForm>
<input NAME="SMILES" SIZE="30">
<input TYPE="button" VALUE="Analyze" ONCLICK="Analyze()">
</form>

</body>
</html>
 

5. Change calling functions to Plugin/ActiveX with the following JavaScript functions.

Use following functions to replace old script expressions that operate Plugin.

(1) cd_getFormula(objName, selection)
(2) cd_getAnalysis(objName, selection)
(3) cd_getMolWeight(objName, selection)
(4) cd_getExactMass(objName, selection)
(5) cd_getData(objName, dataType)
(6) cd_putData(objName, dataType, data)
(7) cd_clear(objName)

All these functions come from the Plugin/ActiveX wrapper file (cdlib_ie.js for IE and cdlib_ns.js for Netscape):

<html>
<head>

<title>ChemDraw Plugin</title>

<script LANGUAGE="JavaScript">
function Analyze()
{
document.theForm.SMILES.value = cd_getData("mycdx", "chemical/x-daylight-smiles");
document.theForm.SMILES.value = document.CDPAnalyze.getData(2);
}
</script>

<script language="JavaScript" src= "/lib/chemdraw/chemdraw.js"></script>
<script> cd_includeWrapperFile("/lib/chemdraw/"); </script>
</head>

<body>

<script> cd_insertObjectStr("<embed width='200' HEIGHT='200' type='chemical/x-cdx' src='benzene.cdx' ID='1' name='mycdx'>");</script>

<form name=theForm>
<input NAME="SMILES" SIZE="30">
<input TYPE="button" VALUE="Analyze" ONCLICK="Analyze()">
</form>

</body>
</html>

Now current version myplugin.htm page can work well in all versions of IE and Netscape. When visiting it in IE, ActiveX control always is used; and in Netscape 4.x, old Plugin plus CDPHelper is used; and in Netscape 6, new Plugin is used.

NOTE: To call a Plugin/ActiveX object, the name is the only handle for wrapper functions, so if you will call the Plugin/ActiveX object to get or put data, you MUST give it an identified name in *cd_insertObjectStr()* or *cd_insertObject()*.


<go back the top>

II. Writing Multi-browser Pages

NOTE: This section discusses creating a new web site using the new JavaScript wrappers. If you are updating an existing site, please jump back to the previous section.

Like the previous part "Upgrading to Multi-browser Pages", there are 4 similar steps to writing Multi-browser pages.

  1. Copy lib files and package files to an appropriate folder and set path variables in *chemdraw.js*.
  2. Include the general ChemDraw library file *chemdraw.js* and wrapper files in the <HEAD></HEAD> part.
  3. Use *cd_insertObject()* or *cd_insertObjectStr()* to insert a ChemDraw Plugin/ActiveX in the appropriate position.
  4. Use wrapper functions to operate ChemDraw Plugin/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 multi-browser 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 Multi-browser pages.
cdlib_ns.js - Function wrapper file for Plugin, mainly used by Netscape browser.
cdlib_ie.js - Function wrapper file for ActiveX, mainly used by IE browser

You can get the three files from the latest ChemDraw release package or simply by using the links above (you may need to right-click on the links and choose "Save Link As..." or a similar option).

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 plugin, 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 or simply by using the links above (you may need to right-click on the links and choose "Save Link As..." or a similar option; please note that after downloading camsoft.jar, a .zip extension may have been added to the name - you will need to delete the .zip extension from the name).

Copy the three 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 Plugin/ActiveX in the appropriate position.

<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>

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

</BODY>
</HTML>

The *cd_insertObject()* function will insert a Plugin/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 Plugin/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 Plugin/ActiveX name as the inputting parameter to call wrapper function cd_clear().

When IE browsers visit this page, ActiveX control will be used; Netscape 4.x, old Plugin plus CDPHelper will be used; in Netscape 6, the new Plugin will be used.


<go back the top>

III. 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 multi-browser pages.  The former 3 functions (No. 1 - 3, defined in chemdraw.js) provide the Multi-browser power for your web pages, and the later 7 functions (No. 4 - 10, defined in cdlib_ie.js and cdlib_ns.js) are ChemDraw Plugin/ActiveX wrapper functions, by which you can operate ChemDraw Plugin/Active objects compromising in your web 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:__
mimeTypeignored 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.
objWidthrequiredDisplay width.
objHeightrequiredDisplay height.
objNameoptionalThe name of ChemDraw Plugin/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.
srcFileoptionalData file used to initialize ChemDraw Plugin/ActiveX. It may be any file type that ChemDraw supports.
viewOnlyoptionalSet ChemDraw Plugin/ActiveX object working in viewOnly mode or not.  Use "true" or "false". Default value is "false".
shrinkToFitoptionalIf 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".
dataURLoptionalData file, from which data is loaded to ChemDraw Plugin/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 TypeDescription
chemical/x-cdx
chemical/cdx
ChemDraw's native cdx format (Both listed MIME types are equivalent) 
text/xmlChemDraw's native cdxml format 
See also important troubleshooting note at bottom.
chemical/x-chemdrawChemDraw'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-f1The F1 format as developed by Questel
chemical/x-questel-f1-queryThe 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.

dontCacheoptional
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 Plugin sample</title>
<!-- chemdraw javascript file -->
<script language="JavaScript" src="../HTML/chemdraw.js"></script>
<script> cd_includeWrapperFile("../HTML/"); </script>
</head>
<p>
<b><font size="4">ChemDraw Plugin 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 Plugin sample</title>
<!-- chemdraw javascript file -->
<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  requiredA 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 Plugin/ActiveX into a same name, thus it's no need for you to learn the difference between Plugin and ActiveX.  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   requiredThe path along which the wrapper files can be found from current page folder.
checkInstalloptional If true, it will check whether Plugin/ActiveX is available on the local machine, and when finding Plugin/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 optionalSet 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 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:
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 Plugin/ActiveX as specified in the objName parameter of the cd_insertObject() function
mimetyperequiredDesired 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.
checkMWoptioanl  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 Plugin/ActiveX as specified in the objName parameter of the cd_insertObject() function
mimetyperequiredFormat 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.
datarequired 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 Plugin/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 Plugin/ActiveX as specified in the objName parameter of the cd_insertObject() function
Return value:
version of Plugin/ActiveX as a string. An ActiveX control may return
             ChemDraw Pro Control 8.0.3
A Plugin may return
             ChemDraw Pro Plugin 8.0.3

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


<go back the top>

IV. 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 Plugin/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. Why can't the Plugin get or put data (formula, molecular weight etc.) in Netscape 6.0?

Netscape 6.0 abandoned the "Live Connect" technology used by earlier versions of Netscape, and introduced the XPCOM technology to exchange data between plugins and web pages. Fortunately, Netscape 6.1 adds new code to let old plugin work with small changes. We do not support the use of Netscape 6.0, but do support Netscape 6.1.

3. Why can't structures be printed in Netscape 6.1?

You can't print structures in Netscape 6.1 or Netscape 6b1.  This is a Netscape bug.

4. Why does calling for Plugin/ActiveX by uppercase names fail in Netscape?

When you use uppercase names for the Plugin/ActiveX , Netscape will automatically convert them into lowercase, but when you use uppercase to refer to the Plugin/ActiveX , Netscape doesn't do this conversion.  Because Netscape is case sensitive, your call fails.  To avoid this trouble, it is best always to use lowercase names when communicating with the Plugin/ActiveX.

5. 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:

<script> cd_insertObjectStr("<embed width='300' height='200' name='mycdx' type='chemical/x-chemdraw' viewonly=false dataurl='data:chemical/mdl-molfile, test.mol\n  ChemDraw08300213062D\n\n  7  7  0  0  0  0  0  0  0  0999 V2000\n  -1.0717  0.4125  0.0000 C  0  0  0  0  0  0  0  0  0  0  0  0\n  -1.0717  -0.4125  0.0000 C  0  0  0  0  0  0  0  0  0  0  0  0\n  -0.3572  -0.8250  0.0000 C  0  0  0  0  0  0  0  0  0  0  0  0\n  0.3572  -0.4125  0.0000 C  0  0  0  0  0  0  0  0  0  0  0  0\n  0.3572  0.4125  0.0000 C  0  0  0  0  0  0  0  0  0  0  0  0\n  -0.3572  0.8250  0.0000 C  0  0  0  0  0  0  0  0  0  0  0  0\n  1.0717  0.8250  0.0000 O  0  0  0  0  0  0  0  0  0  0  0  0\n  1  2  1  0  \n  2  3  1  0  \n  3  4  1  0  \n  4  5  1  0  \n  5  6  1  0  \n  6  1  1  0  \n  5  7  1  0  \nM  END'>");</script>

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 Plugin/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.


<go back the top>