Jmol JavaScript Object/Info

Documentation of parameters of the Info variable

This page explains the parameters of the Info variable, an essential part of the Jmol JavaScript Object and hence of JSmol.

Note that, although this is usually designated as Info in the documentation, it is a regular JavaScript variable that you can name as you wish.

Info is an associative array (a set of key/value pairs) indicating all the desired characteristics of the Jmol object (Jmol applet or JSmol).

Values may be defined

• either during initialization of the Info variable:

  var Info = {
    color: "#E8F4FF",
    height: 400,
    width: 400
  };

• or separately:

  Info.color = "#E8F4FF";

An alphabetic listing of all parameters, along with a comparative view of which modalities of Jmol Object they may be applied to, may be checked in Jmol JavaScript_Object/InfoTable.

Jmol object definition

(The values shown in the listing below are the defaults)

Dimensions

• height 300

The size of the Jmol object in pixels or expressed as percent of its container height as a string in quotes: "100%".

• width 300

The width of the Jmol object 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 attributes style=height:... and style=width:.... That includes setting height to 100% for body and html. Note also that, despite that, non-Java JSmol uses the canvas element, which will not resize correctly.

Background color

• color "white"

The background color of the Jmol object, as a quoted text string in any JmolScript-supported format: color name, decimal triplet [r,g,b] or hexadecimal [xRRGGBB], or in html-style format: #RRGGBB. Note that default is now white, in contrast to black in the classic Jmol.js method.

Files and paths

• j2sPath "j2s"

(HTML5 modality) The path to j2s including its own name; the contents of this folder are essential for JSmol to work.

• serverURL "http://your.server.here/jsmol.php"

The URL of jsmol.php to be used for getting file data into non-Java modalities. For better performance and to avoid cross-domain issues, you should set this to a url in the same server your pages are. In the scheme of the standard JSmol distribution, that will be "php/jsmol.php".

If you cannot have PHP working in your server, you may use "https://chemapps.stolaf.edu/jmol/jsmol/php/jsmol.php", since that is a public site accessible to cross-domain AJAX calls.

Setting this properly is essential, among other situations,

• when loading into JSmol models in binary files, at least in some browsers
• for cross-domain loading JSmol components (.js files), i.e. when Info.j2sPath points to a server different to the one that hosts the page

And the following are needed only for the Java modality:

• jarFile "JmolApplet0.jar"

(Java modality only) The file to be used, usually either JmolApplet0.jar (for faster incremental loading) or JmolApplet.jar (a single 2.5+ MB download), or the signed versions JmolAppletSigned0.jar and JmolAppletSigned.jar. Be careful that the setting here should match that of isSigned.

• isSigned false

(Java modality only) Make sure to change this to true if the file indicated for jarFile is the signed applet.

• jarPath "java"

(Java modality only) The path to the applet files. Note that if the unsigned applet is used and the page is tested locally, then all model files must be in or under the folder indicated by this value, to satisfy Java security policy.

Modality

• use "HTML5" This string determines the mode to be used (either Java applet or a surrogates).
  • The default setting is HTML5 and indicates to use JSmol in html5-only mode.
  • The value Java forces use of the Jmol Applet (and it may display a message if Java is not enabled).
  • The value WebGL will force the WebGL modality (combined with html5).

Startup period

(The values shown in the listing below are the defaults)

• appletLoadingImage j2sPath + "/img/JSmol_spinner.gif"

Set the path and filename of an image that is displayed in place of the Jmol object while this is loading.

It may be disabled using Info.appletLoadingImage = "none"

• coverImage ""

Set the path and filename of an image that will be displayed on top of the Jmol object (usually as an initial replacement or during loading, see deferApplet and deferUncover parameters below).

• makeLiveImage j2sPath + "/img/play_make_live.jpg"

Set the path and filename of a small image (icon) that is displayed over the bottom-left corner of the cover image to give a visual hint that clicking will uncover the model. The default icon, , is included in the JSmol distribution; you may specify your own using this parameter.

• coverTitle ""

Set a tip that is displayed before model starts to load.

• coverScript ""

Set a Jmol command or script that will be executed upon clicking the cover image.

• deferApplet false

If set true, the model will not be loaded until the user clicks on the cover image (see coverImage parameter above).

• deferUncover false

If set true, the cover image will remain until command execution is complete.

• disableInitialConsole true

If set false, displays messages ('console') in the Jmol panel while the Jmol object is being built initially. Note: the default used to be false but was changed since version 14.5.2_2016.02.14, given the implementation of appletLoadingImage

• disableJ2SLoadMonitor false

If set true, avoids the display of messages in a single line, colored, at bottom-left of the page while code loads (both initially and every time a new module is requested by a running script).

• readyFunction null

The name (without quotes) of a JavaScript function to call when the Jmol object has been created and is ready to receive commands (and also called when the object is destroyed e.g. when the page is closed).

For example, with readyFunction: jmolIsReady any of the following JavaScript function definitions could be used:

function jmolIsReady() { alert('Welcome to Jmol!'); }

jmolIsReady = function() { alert('Welcome to Jmol!'); }

jmolIsReady = function(theJmol) { document.title = theJmol._id + " is ready"; }

Note: The JavaScript function will receive as argument a pointer to the particular Jmol object that invoked it (as exemplified in the third example above).

Model loading

(The values shown in the listing below are the defaults)

• src ""

A filename to load once the Jmol object has finished loading. It may be a model in a supported format, or a script file.

• script ""

A script to run when the Jmol object has finished loading. Note that indicating a script here is not necessary; with Jmol-JSO, unlike with Jmol.js, you can start making script calls to Jmol as soon as the Jmol wrapper object has been created in JavaScript; there is no need to wait for Jmol object initialization to have completed.

• defaultModel ""

The name or id of a model to be retrieved from a public database, and displayed when the Jmol object has finished loading.

Examples:

defaultModel: "=1crn" gets it from RCSB PDB

defaultModel: "$caffeine" gets it from NCI CACTUS

defaultModel: ":caffeine" gets it from PubChem

defaultModel: "caffeine" gets it from NCI CACTUS

Customization or extras

(The values shown in the listing below are the defaults)

• addSelectionOptions false

Set this value to true if you want to display, below the Jmol object, a menu with options for loading structures from public databases.

• console "***_infodiv"

The ID in html of the container or div that will receive output from Jmol. Default value is the Jmol Object name/id followed by "_infodiv", and it is contained in the info panel that may be displayed alternatively to the Jmol viewer.

• debug false

Set this value to true if you are having problems getting your page to show the Jmol object, buttons or ther controls.

• language "2-letter or 2+2-letter code"

This setting can be used to specify a language to be used in the Jmol Object interface (mainly the pop-up menu). The existing choices may be checked in the pop-up menu. If not specified, the default language is automatically detected from the system settings of the user's browser.

Examples:

language: "es" for Spanish

language: "pt_BR" for Brazilian Portuguese

• memoryLimit 512

(Java modality only) The maximum amount of memory allowed for the Java applet, in MB.

• menuFile "fileName"

Loads a custom pop-up menu.

• usecommandthread false

The signed Jmol Java 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.

• zIndexBase 9000

Defines the z-index property in CSS of the Jmol Object and its associated div's. This is set by default to a very high value, so the object will be laid on top of any other page elements, but it may be useful to change it when you are integrating Jmol with other components. In addition to setting for the particular applet, it also sets the default for all other applets on the page, in case it is not defined for those applets.

• z {9000, 9001, 9002, 9003, 9004, 9005, 9006, 9007, 99008, 100008, 109007}

Defines, in a more fine-grained way, the z-index property in CSS of all div's forming the Jmol Object.

It is an associative array that includes (some of these are more relevant to JmolSpecViewer):

Info.z = {
  header: ,
  rear: ,
  main: ,
  image: ,
  front: ,
  fileOpener: ,
  coverImage: ,
  dialog: ,
  menu: ,
  console: ,
  monitorZIndex:
}

When just zIndexBase is provided, it will set all components of z in this way:

  header: zIndexBase,
  rear: zIndexBase + 1,
  main: zIndexBase + 2,
  image: zIndexBase + 3,
  front: zIndexBase + 4,
  fileOpener: zIndexBase + 5,
  coverImage: zIndexBase + 6,
  dialog: zIndexBase + 7,
  menu: zIndexBase + 90000,
  console: zIndexBase + 91000,
  monitorZIndex: zIndexBase + 99999

Callbacks

These callbacks, given in the Info variable, allow the page designer to get information about what is happening within the Jmol object. The name of a JavaScript function, wrapped in single- or double-quotes should be given as value. Do not use function() {....} syntax.

(In the former method, Jmol.js, these could be set using either jmolSetParameter() or jmolSetCallback() functions.)

As an alternative, the callbacks may also be defined from a script using the set command.

Example:

Info.pickCallback = "myPick";
function myPick() {
  alert('you clicked on atom with index=' + arguments[2]);
}

In each case, several parameters are returned and passed to the function (its arguments array):

1. the first parameter returned (argument zero) is always the Jmol Object name;
2. the 2nd and later parameters hold the information; not all are used by all callbacks (see below).

• animFrameCallback

Called: when a change in frame/model happens. When a file is loaded, the function is called once o twice before the loading starts (returning frame index zero) and once more after it finishes (returning frame index one).

arguments[1]: frame index (zero-based).

arguments[2]: file number (1-based).

arguments[3]: frame number within the file (1-based).

arguments[4-5]: first and last frame numbers within the current animation range (1-based added to one million).

arguments[6]: animation state: 0 (stopped) or 1 (animating)

arguments[7]: the value of animation direction: +1 or -1

arguments[8]: the current direction the animation is going: 1 (forward) or -1 (reverse)

arguments[9]: the name or title of the model, taken from the file contents (same that is displayed at the top of the window in the Jmol application)

arguments[10]: when a morph has been calculated, a floating point number corresponding to some intermediate value between two frames

• appletReadyCallback

Please, do not use this. Instead, use the readyFunction parameter described above.

• atomMovedCallback

Called: when the position of one or more atoms is modified; this usually requires set picking dragatom + mouse action, or rotateSelected or similar command.

arguments[1]: the affected atom set (as a Jmol atomset object - possibly in JSON construction; this will need parsing)

• echoCallback

• evalCallback

• hoverCallback

Called: when the mouse or pointer is positioned (hovers) over an atom.

arguments[1]: a text string with the current hover label (either the default or user-defined through set hoverLabel), followed by X, Y, Z coordinates of the atom.

Example for a MOL file: O14 #14 -0.438 -2.4279 -0.0068

Example for a PDB file: [ASN]46:A.ND2 #326 13.407 3.298 15.015

arguments[2]: the atom index (zero-based)

• loadStructCallback

Called: upon file loading (successful or not).

arguments[1]: the URL of the loaded file (full path+filename).

arguments[2]: the filename of the loaded file (without the path).

arguments[3]: the internal title of the model in the loaded file.

arguments[4]: any error messages generated.

arguments[5]: a numeric code: 3 when the file loaded successfully, 0 when the model was zapped, -1 when the loading failed.

arguments[6]: a text string with the frame number prior to loading the current model, in file.model syntax (for example, "3.1" or "1.1 - 3.31" if a whole range of models was framed).

arguments[7]: a text string with the last frame number after loading the current model, in file.model syntax.

Note: When multiple files are loaded with the same load command, only data for the last-loaded file is returned

• measureCallback

• messageCallback

• minimizationCallback

• pickCallback

Called: when the user clicks an atom -- or a bond (see below).

Note that for this to work, set atomPicking must be set true (it is by default)

• Clicking on an atom:

arguments[1]: a text string with atom id, atom number, and xyz coordinates in the form:

(MOL file) C6 #6 -0.30683374 -1.6836332 -0.716934

(PDB file) [TYR]29:A.CE2 #210 -0.801 7.705 5.156

arguments[2]: atom index (zero-based).

• Clicking on an bond:

If set bondPicking true has been issued, bonds will become clickable and also invoke the callback function, but the return from the function will be different:

arguments[1]: a text string in the form:

["bond","3 1 C2 #2 -- C4 #4 1.3608072",-0.0,0.9061,-0.30629998]

meaning bond number (indexed by order, 1-based), bond type (single, double...), 1st atom id, 1st atom number, 2nd atom id, 2nd atom number, bond length (distance), and xyz coordinates of the bond's midpoint.

arguments[2]: ?.

arguments[3]: a text string in the form:

{model=1.1, index=2, type=bond, info=3 1 C2 #2 -- C4 #4 1.3608072, pt={-0.0, 0.9061, -0.30629998}, modelIndex=0}

• resizeCallback

• scriptCallback

• syncCallback

Lightweight version

A special alternative version of JSmol may be invoked, with a very small file size and high responsiveness, particularly adequate for a quick startup and for systems with limited resources and power, like phones. It accepts a subset of the parameters described here, plus some additional, unique parameters. See Lightweight JSmol for details.

Misc.

• boxbgcolor
• boxfgcolor
• boxmessage
• progressbar
• progresscolor

These five values generally should not be adjusted.

Contributors

AngelHerraez