Lightweight JSmol - Revision history

AngelHerraez: links to new subpage

2015-06-15T18:05:23Z

links to new subpage

AngelHerraez: zIndexBase parameter is valid for TMApplet too

2015-04-25T18:59:45Z

zIndexBase parameter is valid for TMApplet too

AngelHerraez: image to illustrate shadeAtoms

2015-03-03T15:44:51Z

image to illustrate shadeAtoms

AngelHerraez: Lightweight JSmol loads only MOL format

2014-11-10T20:29:42Z

Lightweight JSmol loads only MOL format

AngelHerraez: clean-up of unsupported params

2014-11-09T23:01:17Z

clean-up of unsupported params

AngelHerraez: /* Model loading */

2014-11-09T22:44:18Z

‎Model loading

AngelHerraez: Lightweight JSmol in new separate page

2014-11-09T20:54:21Z

Lightweight JSmol in new separate page

AngelHerraez: Lightweight JSmol in new separate page

2014-11-09T20:46:39Z

Lightweight JSmol in new separate page

AngelHerraez: Lightweight JSmol in new separate page

2014-11-09T20:28:36Z

Lightweight JSmol in new separate page

New page

This is an alternative version of Jmol object that, using the HTML5 canvas like JSmol, has a very small file size, loads very fast and has a high responsiveness. It is particularly adequate for a quick startup and for systems with limited resources and power, like phones.
It offers minimal functionality: just a simplified ball and stick rendering, no scripting.

== Initialization and loading ==
To use this, instead of invoking {{file|JSmol.min.js}} you call:

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

The essential and minimal call to create a lightweight JSmol object is simply:

<code>Jmol.getTMApplet("myJmol")</code>

:Note: the reason for the name is that this lightweight alternative was inspired on a viewer named TwirlyMol.

This will create a <tt>myJmol</tt> global variable in JavaScript that holds the Jmol object and is also the unique ID for that object in all functions and methods described below. ''Note that this simplest syntax will only work when the html file is located in the root JSmol folder.''

However, in most situations you will want to customize some aspects, like the size of the object and the file paths.

The regular call to create a Jmol object with specified characteristics is
to define an <code>Info</code> variable, which is an associative array (a set of key+value pairs) that indicates all the desired characteristics of the Jmol object.
The Jmol-JSO library will provide a default <code>Info</code> variable, so you only need to specify those keys which values you want to customize.

Once <code>Info</code> has been defined, you create and insert the lightweight JSmol object in the page using this:

<code>Jmol.getTMApplet("myJmol", Info)</code>

:Note that <tt>myJmol</tt> and <tt>Info</tt> are user-defined variables and may hence have any name you wish. In contrast, <tt>Jmol</tt> (right at the beginning) must be written as such, since it is the internal name and identification of the unique Jmol object constructor.

To customize the object, and also partially compensate for the lack of scripting, specific parameters of the <tt>Info</tt> variable are available. These are explained below.

== Parameters ==

* '''shadeAtoms''' <code>false</code>
:If set <code>true</code>, will apply a shading to atoms to give some 3D appearance. This is experimental and may slow down rendering considerably, so use it consciously.
* '''bondWidth''' <code>5</code>
* '''multipleBondSpacing''' <code>4</code>
* '''zoomScaling''' <code>1.5</code>
* '''pinchScaling''' <code>2</code>
* '''mouseDragFactor''' <code>0.5</code>
* '''touchDragFactor''' <code>0.15</code>
* '''spin''' <code>false</code>
:Default spinning of the model.
* '''spinRateX''' <code>0</code>
* '''spinRateY''' <code>0.5</code>
* '''spinFPS''' <code>20</code>

<code>use:"HTML5"</code> will be implicitly imposed and you may optionally include <code>addSelectionOptions:true</code>

← Older revision		Revision as of 18:05, 15 June 2015
Line 32:		Line 32:

	For general information about setting parameters and for details about the parameters shared in common with Java and HTML5 modalities, please visit the [[Jmol_JavaScript_Object/Info\|Info parameters]] page.		For general information about setting parameters and for details about the parameters shared in common with Java and HTML5 modalities, please visit the [[Jmol_JavaScript_Object/Info\|Info parameters]] page.
		+
		+	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]].

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

← Older revision		Revision as of 18:59, 25 April 2015
Line 63:		Line 63:

	=== Customization or extras ===		=== Customization or extras ===
		+	* '''zIndexBase''' <code>9000</code>
	* '''debug''' <code>false</code>		* '''debug''' <code>false</code>

@@ Line 1: / Line 1: @@
 This is an alternative version of Jmol object that, using the HTML5 canvas like JSmol, has a very small file size, loads very fast and has a high responsiveness. It is particularly adequate for a quick startup and for systems with limited resources and power, like phones.
-It offers minimal functionality: just a simplified ball and stick rendering, no scripting.
+It offers minimal functionality: just a simplified ball and stick rendering from MOL-formatted files, no scripting.
 == Initialization and loading ==
@@ Line 41: / Line 41: @@
 === Model loading ===
-* '''src''' <code>""</code>  (model from file)
+* '''src''' <code>""</code>  (model from a MOL file)
-* '''defaultModel''' <code>""</code>  (from database)
+* '''defaultModel''' <code>""</code>  (by name or id, from NIH-CACTUS or PubChem databases)
-* '''addSelectionOptions''' <code>false</code>  (from databases)
+* '''addSelectionOptions''' <code>false</code>  (also from NIH-CACTUS or PubChem databases, with user-entered names)
 === Model rendering ===

@@ Line 31: / Line 31: @@
 == Parameters ==
-For general information about setting parameters and for details about the common parameters, please visit the [[Jmol_JavaScript_Object/Info|Info parameters]] page.
+For general information about setting parameters and for details about the parameters shared in common with Java and HTML5 modalities, please visit the [[Jmol_JavaScript_Object/Info|Info parameters]] page.
 (The values shown in the listings below are the defaults)
@@ Line 39: / Line 39: @@
 * '''width''' <code>300</code>
 * '''color''' <code>"white"</code>
 === Model loading ===
@@ Line 66: / Line 60: @@
 * '''spinRateY''' <code>0.5</code>
 * '''spinFPS''' <code>20</code>

@@ Line 47: / Line 47: @@
 === Model loading ===
-* '''src''' <code>""</code>  (model or script from file)
+* '''src''' <code>""</code>  (model from file)
 * '''defaultModel''' <code>""</code>  (from database)
 * '''addSelectionOptions''' <code>false</code>  (from databases)

@@ Line 49: / Line 49: @@
 * '''shadeAtoms''' <code>false</code>
 :If set <code>true</code>, will apply a shading to atoms to give some 3D appearance. This is experimental and may slow down rendering considerably, so use it consciously.
 * '''bondWidth''' <code>5</code>
 * '''multipleBondSpacing''' <code>4</code>

@@ Line 41: / Line 41: @@
 * '''serverURL''' <code>"<nowiki>http://your.server.here/jsmol.php</nowiki>"</code>
 * '''use''' "HTML5" will be implicitly imposed
 === Startup period ===
 * '''readyFunction''' <code>null</code>
 === Model rendering ===
@@ Line 63: / Line 67: @@
 * '''spinRateY''' <code>0.5</code>
 * '''spinFPS''' <code>20</code>