Friday 11 January 2013

3. Embedding a jmol applet in your blog

Jmol has a beautiful feature: it can be embedded in a web page so you can present an interactive jmol view in yours, including blog posts.

You will need a place in the web to store the jmol jar file. If you don't have your own server, you can just use your Dropbox (or similar service) public folder, and this is the method i will describe here as it is readily available for anyone.

First step is to download the latest version (i had problems testing the procedure with version 12. My tests were done with version 13.0.10) of jmol full source package and uncompress it:
http://sourceforge.net/projects/jmol/files/Jmol/

Then create a folder jmol inside your Dropbox Public folder, and copy there the file JmolAppletSigned.jar and any of the models you want to show in your web page or blog. In Jmol version 14, JmolAppletSigned.jar comes inside a zip file jsmol.zip, included in the jmol distribution.

Finally, assuming the public Dropbox link to the folder is http://dl.dropbox.com/u/xxxxxxxx/jmol/, you would include something like this in the proper place in your post:

<applet name='jmol' code="JmolApplet" archive="http://dl.dropbox.com/u/xxxxxxxx/jmol/JmolAppletSigned.jar" width="350" height="350">
<param name="progressbar" value='true' />
<param name="script" value="load http://dl.dropbox.com/u/xxxxxxxx/jmol/L-proline.mol; spin on;" />
</applet>

And this is the working example (give a time to load):


Observe that you can interact with the applet using your mouse1. Right button opens an options menu. You can change the size of the applet area at taste using the tag attributes width and height. This is the most basic usage. About everything else, it is just a matter of adding the needed jmol script code in the value attribute of the script parameter.

Notes

[1] Check my previous post Visualizing a 3D structure of a molecule with jmol.

1 comment:

  1. hello, i'm a new user of jmol
    can you help to give the complete code ??? thanks

    ReplyDelete