Jmol JavaScript Object

Jmol-JSO

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 a non-Java visualization resource, like JSmol or a third-party resource (using WebGL and/or HTML5), or even an image, 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 JSmol, GLmol, ChemDoodle, or just an image) while still implementing JmolApplet on traditional platforms. Compromises will have to be made, because other resources do not have the scripting power of Jmol and JSmol. 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 integrates facilities for direct, behind-the-scenes access to public databases such as the RCSB PDB database, the National Cancer Institute CACTVS server, and PubChem, even when the user's platform does not allow the Jmol Java applet.

In addition, Jmol-JSO allows easy interaction with

• the JSpecView applet, allowing to tie 3D models to IR, NMR, UV/VIS, GC, and GC/MS spectra (see more details)
• the JME applet, so 3D models can be generated by a page visitor using simple chemical 2D drawing.

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

Representative differences with Jmol.js

Aspect	Jmol-JSO	Jmol.js
Non-Java Options	Automatically switches to non-Java surrogates.	No such capability.
Library Files	Requires at a minimum, JSmol.min.js and j2s.	Requires only Jmol.js
JavaScript Objects	Creates a single JavaScript Object, Jmol, which includes a set of functions and internal objects such as Jmol._Applet, Jmol._Image, and Jmol.controls.	Creates the _jmol associative array, but only uses it to hold parameter and variable values.
JavaScript Prototypes	The object you create using Jmol.getApplet() is a JavaScript object that is a subclass of Jmol._Applet (generally). When you use Jmol.getApplet(), you get a reference to a JavaScript object, not the Java applet itself. This wrapper allows a richer diversity of interaction with the actual Java applet or its surrogate.	jmolApplet() creates the applet with a given id and name (such as "jmolApplet0"), but no JavaScript wrapper object for it.
AJAX	Jmol-JSO includes methods to easily access cross-platform resources using AJAX provided by jQuery.	No AJAX support.
Scripting	Starts accepting script commands immediately, caching them until Jmol is ready to accept them.	Cannot accept script commands until the JmolApplet is fully initialized. (Requires some sort of applet-ready callback.)

JSmol

JSmol is the name for an alternative to Jmol applet that does not require Java but instead renders the molecular models in a webpage using just JavaScript and HTML5 features. This opens up the use of Jmol not only in PC's, Mac's and Linux's systems without Java installed, but also in tablets and phones (iOS, Android) that do not allow Java or applets. No hardware-based graphics acceleration is used either, and hence it should run in any system that supports HTML5 standards in the web browser. JSmol runs entirely in the client, needs no server technologies.

JSmol is included in a webpage using the Jmol-JSO infrastructure (specifically, using the use: "HTML5" key in the Info variable, see explanation below). In fact, it is possible to prepare a webpage so it will run in all devices using either JmolApplet or JSmol depending on the capabilities of the client machine.

JSmol allows rendering, scripting and interaction with the models just as Jmol does, since the source code is shared by both. Note that JSmol is not a different program than Jmol: it is Jmol, just compiled into JavaScript instead of Java (thanks to the Java2Script software).

Current limitations:

• Using local files (i.e. not in a web server) may not be feasible depending on the browser (security policies).
• Opening binary files (e.g Spartan files, gzipped files, PNGJ files): binary files can be read, but not all file types are identified (see below). Also, there are measures to be taken regarding browser compatibility.
• Writing of JPG and PNG data is not supported directly (but see Exporting an image).
• Background images are not supported.

Reading binary files

These are currently the extensions that make JSmol read a file as binary: .gz .jpg .png .zip .jmol .bin .smol .spartan .mrc .pse

If you rename any file to include .bin in its name, that will instruct JSmol to read it as a binary file.

In adition, for binary file reading to be compatible with Chrome and MSIE, you will need to have a base64 server-side piece that will convert the binary data to BASE64 format. This is because only Firefox allows clean (reliable) synchronous binary file transfer. The demo pages use a jsmol.php file, which does that and considerably more.

Installation

Jmol-JSO is generated with a suite of JavaScript libraries that replace Jmol.js. There are also a set of files that implement JSmol, the JavaScript-only alternative to Jmol. Finally, there are the Java files for the classic JmolApplet, which remain the same.

As software evolves, it is possible that versions may differ in their compatibility; the Jmol team appreciates all feedback from web page developers in this regard and make every effort to keep the files up to date. Please file a bug report if you find a problem.

JSmol releases may be obtained at the JSmol Project page, or the latest development set of files from St. Olaf.

The download contains these files and folders:

• Major files:
  • JSmol.min.js The only library that needs to be called explictly; it will take care of calling any of the other files as needed. (This includes a set of files minimized using the Google Closure Compiler)
  • jsmol.php A utility that allows some server-side operations (...more details to be included here...). By default, JSmol will try to use a copy of this file at the St.Olaf server, but you need to put a copy in your own server in order to get full functionality.
• java The files for the JmolApplet, the same that have been used for Jmol in previous versions
  • 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.)

• js The suite of JavaScript libraries needed for building the Jmol-JSO object (but most of these files are already included in packed form within JSmol.min.js, see below):
  • JSmol.js
  • JSmolCore.js
  • JSmolApplet.js
  • JSmolApi.js
  • JSmoljQuery.js
  • j2sjmolfull.js
  • JSmolControls.js Required only if any buttons or links or other input methods will be used.
  • JSmolJSV.js Needed only for using the JSpecView applet
  • JSmolGLmol.js Needed only for using the GLmol surrogate
  • JSmolThree.js Needed only for using the GLmol surrogate
• j2s The suite of JavaScript libraries needed for JSmol, which is the non-Java, HTML5-only surrogate with full Jmol functionality
• Some accessory files, included for your convenience but not required for functionality:
  • jsmol.htm, simple.htm, test2.htm are demonstration/example pages
  • data Files used by the above demo pages
• make and test are not generally needed.

In summary:

• For pages that use HTML5-only JSmol, you just need JSmol.min.js and j2s (A total of 12.6 MB, but only those parts actually needed will be downloaded to the client computer).
• For pages that use only the Jmol Java applet, you just need JSmol.min.js and java (A total of 7.9 MB, but may be reduced to 2.2 MB for a single set of signed or unsigned applet files, of which only those parts actually needed will be downloaded to the client computer).
• js is only important if you want to use the the GLmol surrogate, because the WebGL library is not included in JSmol.min.js. Specifically, you need js/JSmolGLmol.js and js/JSmolThree.js (which are not minimized).

Initialization

Loading the library

The web page should have the following in the head section (pointing to appropriate paths if not the same folder as the web page as shown here):

<script type="text/javascript" src="JSmol.min.js"></script>

There may be restrictions on the folder locations where you can put files for the libraries (js), the page (html), the models and scripts. This is imposed by browser security policies (related to both Java and JavaScript using AJAX calls) and usually applies only to situations where you are using the pages from local disk.

File access by either the signed or unsigned Java applet or the HTML5 version of Jmol/JSmol depends upon whether the page is located using "file:" or "http:"

unsigned applet

http: .jar files must be located in the same folder as data files or in a folder above this.

file: same

signed applet

http: no restrictions

file: same as unsigned applet

HTML5 JSmol

http: all files should be on the host server or on a server set up to deliver cross-domain AJAX using the "Access-Control-Allow-Origin: *" header.

file: all files should be on the local machine within or under the folder containing the .html page.

All this needs confirmation. See also Java security policy which applies to the Java applet.

Optional components

• Integration with JME, a Java-based editor to draw 2D chemical structures (Peter Ertl's Java Molecular Editor)
• Integration with JSpecView, a Java viewer for spectral data.
• GLmol option to render the 3D model using a combination of HTML5 and WebGL graphics (in compatible systems) (does not use Java)
• ChemDoodle option to render the 3D model using ChemDoodle (does not use Java)

Setting parameters

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

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

Note that myJmol and Info are user-defined variables and may hence have any name you wish. myJmol becomes 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.

When you use this method, you must always use as the first parameter the same name, in quotes, of the variable being assigned to the JavaScript Object. This is important, because controls created in relation to the Jmol object and its callback functions need to incorporate the ID of the Jmol JavaScript Object in order to work properly.

Info is an associative array (a set of key/value pairs) indicating all the desired characteristics of the applet. The principal 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: ".",
  memoryLimit: 512,
  readyFunction: null,
  script: null,
  serverURL: "http://chemapps.stolaf.edu/jmol/jsmol/jsmol.php",
  src: null,
  use: "Java noWebGL noHTML5 noImage",
  width: 300
};	 

Detailed explanation of the parameters of the Info variable.

Functions for creation or display of Jmol Objects

The following functions all relate to applet creation or display. All of them must be applied to the unique Jmol object (this name is literal, cannot be changed) --see syntax and examples below.

getApplet

Definition: Jmol.getApplet = function(id, Info, checkOnly)

This function creates the JavaScript Object that keeps track of the Jmol applet (or the JSmol surrogate if a non-Java option is active). It should be assigned to a variable with the same name as the id. For example:

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

checkOnly is an optional true/false flag that allows, when set true, to get a JavaScript Object that can be checked to see what type of applet would be created on this particular platform -- a signed Java applet, an unsigned Java applet, a JSmol canvas, an image, a GLmol canvas, etc.

getAppletHtml

Definition: Jmol.getAppletHtml = function(id)

Useful for inserting the applet code into the page, in the case when it was generated and stored in a variable (id) after Jmol.setDocument(false). For example:

Jmol.setDocument(false);
myJmol = Jmol.getApplet("myJmol", Info);
(...)
document.getElementById('someContainer').innerHTML = Jmol.getAppletHtml(myJmol);

getVersion

Definition: Jmol.getVersion = function()

This function returns the version of Jmol-JSO, like Jmol-JSO 13.0.

Example:

var t = Jmol.getVersion(myJmol);
alert(t);

resizeApplet

Definition: Jmol.resizeApplet = function(applet,size)

Used to change the dimensions of the specified applet.

size: a value or a pair of width/height values in an array, either expressed in pixels or as percent.

Examples:

Jmol.resizeApplet(myJmol, 400);
Jmol.resizeApplet(myJmol, [400,700]);
Jmol.resizeApplet(myJmol, "100%");
Jmol.resizeApplet(myJmol, ["50%","60%"]);

setAppletSync

Definition: Jmol.setAppletSync = function(applets, commands, isJmolJSV)

setDocument

Definition: Jmol.setDocument = function(doc)

doc is the target html context where the Jmol Object must be created.

If using Jmol.setDocument(false) or Jmol.setDocument(0), the Jmol Object may be later inserted using Jmol.getAppletHtml(). What happens is that the HTML code for the object is put into the internal applet._code variable and not written to the page. Then you can still refer to the applet, but place it on the page after the controls are made, or inject ot into the page upon some user action.

Example:

Jmol.setDocument(false);
myJmol = Jmol.getApplet("myJmol", Info);
(...)
document.getElementById('someContainer').innerHTML = Jmol.getAppletHtml(myJmol);

For some situations this may be equivalent to a simpler alternative: Just define the applet variable like var myJmol = "myJmol" and then, "myJmol" will suffice when providing any options or creating buttons and controls. Finally, use myJmol = Jmol.getApplet(myJmol,....) and the Object will work.

setGrabberOptions

Definition: Jmol.setGrabberOptions = function(options)

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

showInfo

Definition: Jmol.showInfo = function(applet, tf)

This displays or hides the information panel (which holds the log console, or maybe an associated JME applet). By default, that panel is located in the same position as the Jmol viewer, so displaying Info will hide Jmol and vice versa.

The tf parameter is a true or false flag.

setInfo

Definition: Jmol.setInfo = function(applet, info, isShown)

setXHTML

Definition: Jmol.setXHTML = function(id)

Functions for creating controls

These Jmol functions create elements of the page that the page visitor can use to interact with the applet or applet surrogate. Again, all these functions must be applied to the unique Jmol object (this name is literal, cannot be changed) --see syntax and examples below.

The first parameter for nearly all of these functions, appletOrId, must be a reference to the applet that will receive action of the control. Such reference is either the JSO object itself or its name-id (e.g. "myJmol" in the examples above).

In the following descriptions, a colored italic font is used for parameters that are optional.

jmolButton

Inserts in the page a button with a text label.

Definition: Jmol.jmolButton(appletOrId, script, label, id, title)

Example:

var myJmol = "myJmol";
var myInfo = {
  color: "#DDDDFF",
  script: "load myMolecule.mol;",
  height: 300,
  width: 300
};
myJmol = Jmol.getApplet("myJmol", myInfo);
Jmol.jmolButton(myJmol,"spacefill on", "display as vdW spheres");

script is run when the button is pressed. As a special syntax (valid for any other controls as well as the button described here), instead of a Jmol script you can run a JavaScript function that you have defined, by providing this in place of the script: [funcName, param1, param2, param3...] The function must be defined in this way:

function funcName(btn, obj, target) {
    // Entire array object is provided as 2nd argument.
    var param1 = obj[1];
    var param2 = obj[2];
    var param3 = obj[3];
    // JavaScript to execute here.
    ....
}

label is the text in the button; if not specified, it defaults to the first 32 characters of the script.

id (optional) will be set as both the HTML id and HTML name. It will default to jmolButton0, jmolButton1, etc.

Advanced:

In addition, the button will be included in a <span> element that will have an HTML id of "span_" plus the given id, and an HTML title of the given title.

Browsers will hence show title as a tooltip when mouse pointer stays over the button.

jmolCheckbox

Definition: Jmol.jmolCheckbox(appletOrId, scriptWhenChecked, scriptWhenUnchecked, labelHtml, isChecked, id, title)

jmolCommandInput

Definition: Jmol.jmolCommandInput(appletOrId, label, size, id, title)

jmolLink

Definition: Jmol.jmolLink(appletOrId, script, text, id, title)

script is run when the user clicks on the link.

text is written to the page as a link. If it is not specified, it defaults to the first 32 characters of script.

id will be set as both the HTML id and HTML name. It will default to jmolLink0, jmolLink1, etc.

Advanced:

In addition, the link text will be included in a <span> element that will have an HTML id of "span_" plus the given id, and an HTML title of the given title.

Browsers will hence show title as a tooltip when mouse pointer stays over the link.

jmolMenu

Definition: Jmol.jmolMenu(appletOrId, arrayOfMenuItems, size, id, title)

jmolRadio

Definition: Jmol.jmolRadio(appletOrId, script, labelHtml, isChecked, separatorHtml, groupName, id, title)

jmolRadioGroup

Definition: Jmol.jmolRadioGroup(appletOrId, arrayOfRadioButtons, separatorHtml, groupName, id, title)

setCheckboxGroup

Definition: Jmol.setCheckboxGroup(chkMaster,chkBox)

Functions that insert HTML

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.

Again, all these functions must be applied to the unique Jmol object (this name is literal, cannot be changed) --see syntax and examples below.

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.

jmolBr

Inserts a soft line break. Its only use is:

Jmol.jmolBr()

jmolHtml

Allows to insert in the page any HTML code you may wish. Example:

Jmol.jmolHtml(' <b style="color:red">H<sub>2</sub>O</b> ')

Functions that set CSS rules

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'");

Again, all these functions must be applied to the unique Jmol object (this name is literal, cannot be changed) --see syntax and examples below.

setAppletCss

Definition: Jmol.setAppletCss = function(cssClass, text)

setButtonCss

Definition: Jmol.setButtonCss = function(cssClass, text)

setCheckboxCss

Definition: Jmol.setCheckboxCss = function(cssClass, text)

setLinkCss

Definition: Jmol.setLinkCss = function(cssClass, text)

setMenuCss

Definition: Jmol.setMenuCss = function(cssClass, text)

setRadioCss

Definition: Jmol.setRadioCss = function(cssClass, text)

Other public methods

All these functions must be applied to the unique Jmol object (this name is literal, cannot be changed) --see syntax and examples below.

(TO-DO -- just transfer text with slight modification from jslibrary)

Definitions:

Jmol.evaluate = function(applet,molecularMath) 
Jmol.getInfo = function(applet) 
Jmol.getPropertyAsArray = function(applet,sKey,sValue)
Jmol.getPropertyAsJavaObject = function(applet,sKey,sValue)
Jmol.getPropertyAsJSON = function(applet,sKey,sValue) 
Jmol.getPropertyAsString = function(applet,sKey,sValue)
Jmol.getStatus = function(applet,strStatus) 
Jmol.loadFile = function(applet, fileName, params)
Jmol.restoreOrientation = function(applet,id) 
Jmol.restoreOrientationDelayed = function(applet,id,delay)
Jmol.saveOrientation = function(applet,id) 
Jmol.say = function(msg) 
Jmol.script = function(applet, script) 
Jmol.scriptEcho = function(applet, script) 
Jmol.scriptMessage = function(applet, script) 
Jmol.scriptWait = function(applet, script) 
Jmol.scriptWaitAsArray = function(applet, script) 
Jmol.scriptWaitOutput = function(applet, script)  
Jmol.search = function(applet, query, script) 

Methods specific to optional components

• Methods specific to the JME applet
• Methods specific to the JSpecView applet

Contributors

AngelHerraez, Hansonr, Hansonrstolaf, Cudo29, Ceroni, Ppillot