Jmol JavaScript Object

This page is under development.

The Jmol JavaScript Object ("Jmol-JSO") is a set of JavaScript functions and utilities refactored and reorganized for Jmol 13.0 into a single JavaScript object. It supersedes the former Jmol.js JavaScript library, allowing a cleaner, more efficient way to interact with the Jmol applet on a web page, and abstracting the visualization of a molecular model so that the applet can be seamlessly replaced by an image or a third-party non-Java visualization resource (using WebGL and/or HTML5) depending on client's platform resources.

Using Jmol-JSO, a web page developer can target Java-challenged (iPad, iPhone) and Applet-challenged (Android) platforms using a "Jmol applet surrogate" (such as GLmol or ChemDoodle or just an image) while still implementing Jmol itself on traditional platforms. Compromises will have to be made, because no other resource has the scripting power of Jmol. However, the wide variety of options available allows a subset of Jmol functionality on all such devices, and there should be no need to ever see a message "Sorry, you don't have Java installed...."

Jmol-JSO also allows easy access to public databases such as the RCSB PDB database, the National Cancer Institute CACTVS server, and PubChem, even when the Jmol Java applet is not available because of a user's platform.

In addition, Jmol-JSO allows easy interaction with the JSpecView applet (for spectroscopy) and the JME applet (for 2D drawing input) on a web page. Thus, 3D models can be tied to IR, NMR, UV/VIS, GC, and GC/MS spectra (using the JCAMP-DX Version 6 standard), 3D models can be embedded in JCAMP-DX files (see Jmol-JSpecView-specs.pdf), and 3D models can be introduce by a page visitor using simple chemical drawing.

Jmol-JSO is fully compatible with jQuery, creating the single global Jmol object. The library has been W3C and XHTML validated.

Installation

JmolJSO requires a small suite of JavaScript libraries that replace Jmol.js. However, the Java files necessary are the same:

• JmolApplet.jar or JmolAppletSigned.jar or JmolApplet0*.jar or JmolAppletSigned0*.jar

(That is, a set of files, where the * stands for several suffixes. You may need to read about signed vs. unsigned applet if you are unfamiliar with the Jmol jar files.)

Note that Java security policy imposes limitations on the folder location of files.

The basic suite of JavaScript libraries include these four:

• JmolCore.js (required)
• JmolApplet.js (required)
• JmolControls.js (optional -- required if any buttons or links or other input methods will be used)
• JmolApi.js (required)

However, AJAX access (by the unsigned applet or non-Java resources) to cross-domain resources such as public databases also requires jQuery.min.js and jQuery.iecors.js (loaded prior to JmolCore.js), and use of ChemDoodle, GLmol, JSpecView, or JME requires additional libraries.

Initialization

Note that JavaScript libraries not starting with "Jmol" may not be included in the Jmol distribution. Files can be found at chemapps.stolaf.edu/jmol and associated subdirectories. These include:

• jQuery.min.js The jQuery JavaScript library allowing the unsigned applet and non-Jmol options cross-domain access to public databases for all browsers other than MSIE.
• jQuery.iecors.js An extension of jQuery allowing the unsigned applet and non-Jmol options to have cross-domain access to public databases.
• ChemDoodleWeb.js ChemDoodle Web Components.
• gl-matrix-min.js Javascript Matrix and Vector library for High Performance WebGL apps; required for the ChemDoodle option only.
• mousewheel.js jQuery Mouse Wheel Plugin required for the ChemDoodle option only.
• GLmol.js GLmol - Molecular Viewer on WebGL/JavaScript.
• Three49custom.js A custom version of the WebGL 3D JavaScript library required for the GLmol option only and available at gitHub.

Basic

The web page at the very least should have the following in the head section (referencing files in appropriate directories if not the directory of the web page, as shown here):

<script type="text/javascript" src="JmolCore.js"></script>
<script type="text/javascript" src="JmolApplet.js"></script>
<script type="text/javascript" src="JmolControls.js"></script>
<script type="text/javascript" src="JmolApi.js"></script>


JmolControls.js may be omitted if no buttons, links, menus, or other user-interactive features are implemented on the page. All functions discussed below are found in JmolApi.js. The other files contain code that creates the various Jmol object prototypes and methods that are called from JmolApi.js.

Unsigned Jmol applet requiring access to public databases and all non-Java options

Web pages requiring the unsigned applet to access public databases, as well as all non-Jmol options, additionally require jQuery so that they can perform cross-browser or host-server AJAX calls:

<script type="text/javascript" src="jQuery.min.js"></script>
<script type="text/javascript" src="jQuery.iecors.js"></script>
<script type="text/javascript" src="JmolCore.js"></script>
<script type="text/javascript" src="JmolApplet.js"></script>
<script type="text/javascript" src="JmolControls.js"></script>
<script type="text/javascript" src="JmolApi.js"></script>


ChemDoodle option

Web pages utilizing ChemDoodle (either HTML5/WebGL or HTML5/non-WebGL versions) should have the following in their head section:

<script type="text/javascript" src="jQuery.min.js"></script>
<script type="text/javascript" src="jQuery.iecors.js"></script>
<script type="text/javascript" src="JmolCore.js"></script>
<script type="text/javascript" src="JmolApplet.js"></script>
<script type="text/javascript" src="JmolControls.js"></script>
<script type="text/javascript" src="JmolApi.js"></script>
<script type="text/javascript" src="gl-matrix-min.js"></script>
<script type="text/javascript" src="mousewheel.js"></script>
<script type="text/javascript" src="ChemDoodleWeb.js"></script>
<script type="text/javascript" src="JmolCD.js"></script>


GLmol option

<script type="text/javascript" src="jQuery.min.js"></script>
<script type="text/javascript" src="jQuery.iecors.js"></script>
<script type="text/javascript" src="JmolCore.js"></script>
<script type="text/javascript" src="JmolApplet.js"></script>
<script type="text/javascript" src="JmolControls.js"></script>
<script type="text/javascript" src="JmolApi.js"></script>
<script type="text/javascript" src="Three49custom.js"></script>
<script type="text/javascript" src="GLmol.js"></script>
<script type="text/javascript" src="JmolGLmol.js"></script>


Initialization parameters

All of the initialization parameters common to Jmol.js can be implemented in Jmol-JSO. However, the method of indicating variables is different. The essential call to create an applet or other non-Java viewer is simply:

myJmol = Jmol.getApplet("myJmol", Info)

Note that myJmol and Info are user-defined variables and may hence have any name you wish. myJmol is in fact the identifier of the particular JmolApplet that is being created. You may wish to have two applets in your page and call them e.g. jmolA and jmolB, and use for them the same set of parameters Info, or use two different sets named e.g. InfoA and InfoB. To the contrary, Jmol (right after the equal sign) must be written as such, since it is the internal name and identification of the unique Jmol-JSO constructor.

Info is an associative array (a set of key/value pairs) indicating all the desired characteristics of the applet. For a full, up-to-date description of all of the Info options, see JmolApi.js. It is recommended that any page developer interested in utilizing Jmol extensively take a look at this file. The principal Info keys and their default values are given below:

	var Info = {
		addSelectionOptions: false,
		color: "#FFFFFF",
		debug: false,
		defaultModel: "",
		height: 300,
		isSigned: false,
		jarFile: "JmolApplet0.jar",
		jarPath: ".",
		readyFunction: null,
		script: null,
		serverURL: "http://chemapps.stolaf.edu/jmol/jmolcd.php",
		src: null,
		useNoApplet: false,
		useJmolOnly: true,
		useWebGlIfAvailable: true,
		useImageOnly: false,
		width: 300
	};	 

• Info.addSelectionOptions Set this value to true if you want the user to see a menu with public database options.
• Info.color The background color of the applet.
• Info.debug Set this value to true if you are having problems getting your page to show the applet or buttons.
• Info.defaultModel A model from a public database to obtain and display when the applet is loaded.
• Info.height The width of the applet in pixels or expressed as percent of its container height as a string in quotes: "100%". Note that for a percent to work, ALL surrounding HTML elements must explicitly implement the CSS attribute style=height:....
• Info.isSigned Make sure to change this to true if the file indicated for jarFile is the signed applet.
• Info.jarFile The file used, usually either JmolApplet0.jar (for faster incremental loading) or JmolApplet.jar (a single 2.5+MB download).
• Info.jarPath The path to the jar file. Note that if the unsigned applet is used and the page is tested locally, then all model files must in or under the directory indicated by this value.
• Info.readyFunction The name of a JavaScript function to call when the applet has been created and is ready to receive commands (and also called when the applet is destroyed when the page is closed).
• Info.script A script to run when the applet has loaded. Note that indicating a script here is not necessary; with Jmol-JSO, unlike with Jmol.js, you can start making script calls to the applet as soon as the applet wrapper object has been created in JavaScript; there is no need to wait for Java applet initialization to have completed.
• Info.serverURL The URL of the server to be used for non-Jmol options to get file data. This can be left as "http://chemapps.stolaf.edu/jmol/jmolcd.php", as that is a public site accessible to cross-domain AJAX calls, but it can perhaps better be installed on the user's host for better performance.
• Info.src Same as Info.script only included because it is the syntax commonly used for images.
• Info.useNoApplet Setting this true will (perhaps for testing purposes, but perhaps not) prevent use of the Jmol applet under all circumstances.
• Info.useJmolOnly The default true setting prevents any substitution for Jmol on any platform that is Java- or applet-challenged.
• Info.useWebGlIfAvailable Switches to WebGL-based options if that is all that is available.
• Info.useImageOnly Set this value to true to display only images, no applets or any other option (mostly for testing purposes).
• Info.width The width of the applet in pixels or expressed as percent of its container width as a string in quotes: "100%". Note that for a percent to work, ALL surrounding HTML elements must explicitly implement the CSS attribute style=width:....

In addition to these keys are a set of parameters that using Jmol.js could be set using the jmolSetParameter() or jmolSetCallback() functions. These are discussed in sets:

• Info.animframecallback
• Info.appletreadycallback
• Info.atommovedcallback
• Info.echocallback
• Info.evalcallback
• Info.hovercallback
• Info.loadstructcallback
• Info.messagecallback
• Info.pickcallback
• Info.measurecallback
• Info.minimizationcallback
• Info.resizecallback
• Info.scriptcallback
• Info.synccallback

These callbacks allow the page designer to get information about what is happening within the applet. The name of a JavaScript function, in single- or double-quotes should be given here if desired. Do not use function() {....} syntax.

• Info.language

This setting can be used to specify a language to be used in the JmolApplet interface (primarily for testing; the default language used in the applet is automatically detected from the system settings of the user's browser).

• usecommandthread

The signed Jmol applet generally runs commands by passing them to a command thread that is established when the applet is created, while the unsigned applet does not. You can change this behavior if you are observing Java security issues. Otherwise, it should not be adjusted.

• Info.boxbgcolor
• Info.boxfgcolor
• Info.boxmessage
• Info.progressbar
• Info.progresscolor

These five values generally should not be adjusted.

Applet Creation/Display Functions

The following functions all relate to applet creation or display.

Jmol.setGrabberOptions = function(options)

/* Jmol._grabberOptions = [ ["$", "NCI(small molecules)"], [":", "PubChem(small molecules)"], ["=", "RCSB(macromolecules)"] ]; */

CSS-Setting Functions

These functions, called prior to the creation of the associated object(s) allow the page designer to add specific attributes (usually, but not necessarily CSS style attributes) to the HTML tag(s) that will be created later. This allows setting one or more common style attributes for, for example, all buttons in a certain cell of a table, or all radio buttons of a certain group. Either a class name or an attribute can be given. For example:

  Jmol.setButtonCss(null, "style='width:160px'");

Control-Specific Functions

These Jmol functions create elements of the page that the page visitor can use to interact with the applet or applet surrogate.

Html-Specific Functions

These simple commands just deliver HTML to the page. They are merely convenience functions for use from within the body so as not to have to continually switch in and out of script tags. (Much better practice is to do all control creation in the header of the page, from within jQuery's $(document).ready() function, using Jmol.setDocument(0), appending the HTML to a growing string using the control-specific functions, then setting the code in a predefined div element using the jQuery $('#divId').html() function.)

Public Jmol Applet methods

TODO

Contributors

AngelHerraez, Hansonr, Hansonrstolaf, Cudo29, Ceroni, Ppillot