Overview   Integration   Scripting    Gallery      News      Contact     Download     Home 

Chemis3D Scripting

Applets may be customized by Javascript commands embedded in web pages.

Chemis3D supports JavaScript-Java communication technology (LiveConnect) which gives the document a greater control over the applet's behaviour. This capability enables the creation of complex user interactions controlled by web page elements.

Dynamic Control

Javascript calls to the applet public methods enables the modification of the applet's content and appearence from any parts of the embedding document or any parent document. A typical application of Dynamic HTML control is the design of advanced interactive interfaces using forms, imagemaps, or dynamic menus.


Click to display in 3D Click for a 3D View of Caffeine Click for a 3D View of Vitamin C Click for a 3D View of Aspirin There is a Java applet here. To use it, you need a Java aware browser with Java enabled.
Balls
Balls & Sticks
Sticks
Wireframe
AutoRotation
Play Animation
    Rotate           Scale           Translate      

How To

  • 1) Embedding of the applet in the HTML document.
    To enable JavaScript-Java communication, the applet must be identified by the document with the applet tag NAME

    <APPLET CODE=Chemis3D.class CODEBASE="Mole" ARCHIVE="Chemis3D.jar" NAME="C3DApplet1"
      WIDTH=256 HEIGHT=256>
          <PARAM NAME="model" VALUE="epoxy.zip">
          <PARAM NAME="format"  VALUE="x-xyz">
    </APPLET>
  • 2) Modification of the applet's content and appearence can be done by javascript calls to the applet's public methods.
        Chemis3D provide 8 public methods :

    setModel()
    setDisplay(), setColor(), setOptions(), setSelect(), setSpin(), setAnimation()
    setMouse()
    • The setModel() method is the most useful since it enables parameter modifications in only one call.

      document.C3DApplet1.setModel(script)

      The script argument is a string command line gathering selected parameters name and value (like with the inline parameter).

      parameter1_name=parameter1_value;parameter2_name=parameter2_value;...

      Examples:

      document.C3DApplet1.setModel('model=DNA.zip;format=x-pdb;display=ball;color=cpk')
      document.C3DApplet1.setModel('display=backbone')
      document.C3DApplet1.setModel('color=residue;animation=on,15')

      Notes :

      • Each parameter may be modified independently. The non-modificated parameters keep their old values.

      • LiveConnect technology works well with IE4-6, Netscape 4, Netscape 7.
        However Netscape 6 using Java Plug-in 1.2 display only partial support of javascript-java communication capabilities. For security reasons download of new chemical model into the applet using setModel() method is denied.


    • The method setDisplay(style) enables changes in the style rendering.
      style is a string similar to the possible value of the display parameter : "wireframe","ball", "ball-stick", "stick", "backbone"

    • The method setOptions(option(s) on/off)active selected options.
      option is a string similar to the possible value of the option parameter : "hydrogens", "heteroatoms", "labels", "fastmove"

    • The method setColor(colour)enables changes in the color rendering.
      colour is a string similar to the possible value of the color parameter : "cpk", "residue", "shapely", "group", "chain", "temperature", "structure", "0-31"

    • The method setSelect(tool, atoms serial)active/display selction tools.
      tool is a string similar to the possible value of the select parameter : "identity", "angle", "torsion", "highlight"
      serials are atoms serial number required to display distance (2 serials), angle (3 serials), dihedre (4 serials) or highlight (x serials). If missing the selected tool is simply ready to use.

    • The methods setSpin(direction,speed) and setAnimation(on/off,frame rate/frameId) enable changes in the spin and animation activities in a way similar to the relative applet parameters spin and animate

    • The method setMouse(mouseMode)enables changes in the manipulating mode.
      mouseMode is a string of the type "rotate3D", "translate", "zoom", "rotateXY"

  • 3) The applet call is connected with an HTML element (A ,IMG, FORM..) directly or via a JavaScript event (onClick,
          onChange, onMouseOver
    ).
         In addition a javascript function may also be used to relay the call.

    Examples:

    <A HREF=
       javascript:document.C3DApplet1.setModel('model=DNA.zip;format=x-pdb')>B-DNA</A>


    <SCRIPT LANGUAGE="javascript" Type="text/javascript">
    <!-- hide
        function toApplet(script) {
           document.C3DApplet1.setModel(script);
         }

    // end -->
    </SCRIPT>
    ...
    <IMG SRC="DNA.gif" WIDTH=100 HEIGHT=20 BORDER=0 ALT="Click for a 3D Model"
          onClick="toApplet('model=DNA.zip;format=x-pdb;display=stick')">


Some script codes


  • Javascript calling function :

    <SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
    <!-- hide

         function toApplet(myscript) {
            document.C3DApplet1.setModel(myscript);
          }
    // end -->
    </SCRIPT>


  • Image map control:

    <IMG SRC="Map1.gif" USEMAP="#MapMenu1" WIDTH=120 HEIGHT=360 ALT="3D View">
    <MAP NAME="MapMenu1">
      <AREA SHAPE="rect" COORDS="0,0,120,120"
      HREF="
    javascript:toApplet('model=Cafeine.txt;format=x-mol;display=ball;spin=Z')">
      <AREA SHAPE="rect" COORDS="0,121,120,240"
      HREF="
    javascript:toApplet('model=VitaminC.txt;format=x-mol;display=stick')">
      <AREA SHAPE="rect" COORDS="0,241,120,360"
      HREF="
    javascript:toApplet('model=Aspirin.txt;format=x-xyz;back=Prot.jpeg')">
    </MAP>


  • Pull down menu:

    <FORM NAME="achoice">
     <SELECT
    NAME="menu1" SIZE="1"
      onChange="toApplet(achoice.menu1.options[achoice.menu1.selectedIndex].value)">
     <OPTION
    SELECTED
      VALUE="
    model=H2O.txt;format=x-mol;display=ball;back=Chemis.gif">Water
     </OPTION>
     <OPTION
    SELECTED
      VALUE="
    model=ChlorophyllA.txt;format=x-mol;display=ball-stick;spin=x">Chlorophyll
     </OPTION>
     <OPTION
    SELECTED
      VALUE="
    model=Insulin.txt;format=x-pdb;display=ball;back=#ffffff;spin=off">Insulin
     </OPTION>
     <OPTION
    SELECTED
      VALUE="
    model=ADNA.zip;format=x-pdb;display=stick;color=chain;back=#000000">SyntDNA
     </OPTION>
     </SELECT>
    </FORM>



  • Radio Button :

    <FORM NAME="manipulateform">
      <INPUT
    TYPE=radio NAME="manipulate" VALUE="rotate3D" CHECKED
      Onclick="javascript:document.C3DApplet1.setMouse(this.value)"> <B>Rotate</B>    
      <INPUT TYPE=radio NAME="manipulate" VALUE="zoom"
      Onclick="javascript:document.C3DApplet1.setMouse(this.value)"> <B>Scale</B>    
      <INPUT TYPE=RADIO NAME="manipulate" VALUE="translate"
      Onclick="javascript:document.C3DApplet1.setMouse(this.value)"> <B>Translate</B>  
    </FORM>


  • Input Button :

    <FORM NAME="buttonform">
      <INPUT
    TYPE=button VALUE="Stop"
      OnClick="javascript:toApplet('spin=off;animation=off')">
    </FORM>