How to use a script to program the Chem3D ActiveX/Plugin Like other ActiveX/Plugin, the Chem3D control can be driven by a script in a web page or by a separate program . This example shows how to use a script in a web page to drive the control, but it is also possible to drive the control from another programming language such as C#, or VB. This example uses JavaScript, but it is also possible to use VBScript. We will start with the code generated in our previous example:
<HTML> <HEAD> <TITLE>My First Chem3D Model Page</TITLE> <script language="javascript" src="/jslib/chem3d.js"></script> </HEAD> <BODY> <script language="javascript"> c3d_insert3d("/chem3d_models/mymodel.c3d", 400, 300, "my3dobj"); </script> </BODY> </HTML>
Here, the model is displayed using the "Cylindrical Bonds" mode. Adding this code will allow the user to change the display type to "Sticks" mode:
<HTML> <HEAD> <TITLE>My First Chem3D Model Page</TITLE> <script language="javascript" src="/jslib/chem3d.js"></script> </HEAD> <BODY> <script language="javascript"> c3d_insert3d("/chem3d_models/mymodel.c3d", 400, 300, "my3dobj"); </script>
<script language="javascript"> function onShowAsSticks() { my3dobj.setDisplayType(1); } </script> <input type=button value="Show as Sticks" onclick="onShowAsSticks()">
</BODY> </HTML>
Here, we have created a JavaScript function, onShowAsSticks(). The variable "my3dobj" is a reference to the Chem3D ActiveX/Plugin object that was created above. NOTE: In order to refer to the Chem3D object you create, you must specify the *id* parameter. setDisplayType is the method used to set the display type for the Chem3D ActiveX/Plugin. For this parameter, the number 1 means *Sticks*. The other values can be found in the documentation. We have created a button so that the user can change the value. When the user clicks on the button, onShowAsSticks() is called. This function changes the display mode of the control. Here is a more detailed example that will allow the user to select from several display modes:
<HTML> <HEAD> <TITLE>My First Chem3D Model Page</TITLE> <script language="javascript" src="/jslib/chem3d.js"></script> </HEAD> <BODY> <script language="javascript"> c3d_insert3d("/chem3d_models/mymodel.c3d", 400, 300, "my3dobj"); </script>
<script language="javascript"> function onSelectModelType() { my3dobj.setDisplayType(modeltype.selectedIndex); } </script> <SELECT id="modeltype" name="modeltype" onchange="onSelectModelType()"> <OPTION>Wire Frame</OPTION> <OPTION>Sticks</OPTION> <OPTION>Ball and Sticks</OPTION> <OPTION>Cylindrical Bonds</OPTION> <OPTION>Space Filling</OPTION> <OPTION>Ribbons</OPTION> <OPTION>Cartoons</OPTION> </SELECT>
</BODY> </HTML>
Try some more examples, and have fun!