Embedding Jmol applet in WordPress posts

By way of one of the comments on an older post, I’ve had a question about how to embed Jmol in WordPress posts. It isn’t trivial, but you can do it. Here’s the recipe:

  • unpack the latest jmol binary distribution inside your wp-content directory:
    cd wp-content; tar -zxvf ~/jmol-11.0.RC4.tar.gz
  • To make upgrading Jmol easy at a later time, make a link from that directory to jmol:
    ln -s jmol-11.0.RC4 jmol
  • add simple javascript function to your theme’s header:
    
    <script type="text/javascript">
    <!--
    function insertJmol(me,width,height,myMolecule) {
       document.getElementById(me).innerHTML = '<applet width="'
       +width+'" height="'+height+
       '" code="JmolApplet" archive="wp-content/jmol/JmolApplet.jar">'
       +'<param name="progressbar" value="true">'
       +'<param name="load" value="wp-content/'
       +myMolecule+'">';
     }
    //-->
    </script>
    
    
  • Then, upload both your coordinate file and a snapshot of the molecule to your wp-content directory
  • Insert code like this:
    
    <div class="jmol" id="caffeine_applet">
    <img src="wp-content/caffeine.jpg"
         onLoad="insertJmol('caffeine_applet',400,400,'caffeine.xyz')"
         alt="caffeine screenshot"/>
    </div>
    
    

This is a quick hack. I’ve done an end-run around the Jmol.js javascript library to get it to work with WordPress (that’s the reason for the <param name="progressbar" value="true"> part of the script above). However, it does work.

The caffeine molecule below is a live sample; you should be able to spin it.

caffeine screenshot

I’m still working on this. I should have a way to do this using the full functionality of Jmol.js (and all of the applet parameters) soon.

VN:F [1.9.3_1094]
Rating: 0.0/5 (0 votes cast)
Share and Enjoy:
  • Digg
  • Technorati
  • Slashdot
  • del.icio.us
  • Reddit
  • StumbleUpon
  • connotea
  • LinkedIn
  • FriendFeed
  • Google Bookmarks
  • Posterous
  • Twitter
  • Facebook
This entry was posted in Meta, Science, Software. Bookmark the permalink.

8 Responses to Embedding Jmol applet in WordPress posts

  1. Pingback: Weblog Tools Collection » Blog Archive » WordPress Plugin Releases for 1/18

  2. mela says:

    How would you set it up so that it starts to spin on the x axis as soon as you load the .mol file?

  3. Pingback: plonewars.com - » Embedding Jmol applet in Wordpress posts

  4. Pingback: ChemDev » Blog Archiv » Einbetten von Jmol in WordPress-Blogs

  5. Chemdev says:

    Hi there,
    I just don’t get it running.

    “…add simple javascript function to your theme’s header:…”

    Does this mean adding the Code snippet to the -section of my header.php?

    Thx

  6. BH says:

    it works … and well. I tried it here http://theobromine.uchini.be/?p=78

    More explanations (in english) here http://www.milomuses.com/chemicalmusings/?page_id=343 . No need to add code in the theme’s header.

  7. Amay says:

    Hi All,
    I have used the javascript and the code given above in my server.The molecule is loading fine and I am also getting the message “Jmol Script terminated”…But I am getting following error messages from Java Console………….
    —————————————
    Java Plug-in 1.6.0_07
    Using JRE version 1.6.0_07 Java HotSpot(TM) Client VM
    User home directory = C:\Documents and Settings\Pinak
    —————————————————-
    c: clear console window
    f: finalize objects on finalization queue
    g: garbage collect
    h: display this help message
    l: dump classloader list
    m: print memory usage
    o: trigger logging
    p: reload proxy configuration
    q: hide console
    r: reload policy configuration
    s: dump system and deployment properties
    t: dump thread list
    v: dump thread stack
    x: clear classloader cache
    0-5: set trace level to
    —————————————————-
    Jmol applet [null] destroyed
    Jmol applet null[null] initializing
    language=en_US
    AppletRegistry.checkIn(null[null])
    (C) 2007 Jmol Development
    Jmol Version 11.4.6 2007-12-20 06:37
    java.vendor:Sun Microsystems Inc.
    java.version:1.6.0_07
    os.name:Windows XP
    memory:36.3/59.1
    appletId:null
    appletDocumentBase=http://192.168.50.215/resources/bioinfo/geometry1/geometry.php?num=8502&res1=ASP&res2=PHE
    appletCodeBase=http://192.168.50.215/resources/bioinfo/geometry1/
    Jmol applet [null] initializing
    language=en_US
    AppletRegistry.checkIn([null])
    (C) 2007 Jmol Development
    Jmol Version 11.4.6 2007-12-20 06:37
    java.vendor:Sun Microsystems Inc.
    java.version:1.6.0_07
    os.name:Windows XP
    memory:35.9/61.4
    appletId:
    appletDocumentBase=http://192.168.50.215/resources/bioinfo/geometry1/geometry.php?num=8502&res1=ASP&res2=PHE
    appletCodeBase=http://192.168.50.215/resources/bioinfo/geometry1/

    FileManager.openFile(8502\8502.pdb) //8502\8502.pdb
    FileManager opening http://192.168.50.215/resources/bioinfo/geometry1/8502\8502.pdb
    The Resolver thinks Pdb
    openFile(8502\8502.pdb)16 ms
    ModelSet: haveSymmetry:false haveUnitcells:true haveFractionalCoord:false
    1 model in this collection. Use getProperty “modelInfo” or getProperty “auxiliaryInfo” to inspect them.
    ModelSet: autobonding; use autobond=false to not generate bonds automatically

    FileManager.openFile(8502\8502.pdb) //8502\8502.pdb
    FileManager opening http://192.168.50.215/resources/bioinfo/geometry1/8502\8502.pdb
    The Resolver thinks Pdb
    Exception in thread “Thread-692″ java.lang.NullPointerException
    at java.applet.Applet.showStatus(Unknown Source)
    at org.jmol.applet.Jmol.showStatusAndConsole(Unknown Source)
    at org.jmol.applet.Jmol$MyStatusListener.notifyScriptTermination(Unknown Source)
    at org.jmol.viewer.StatusManager.setStatusScriptTermination(Unknown Source)
    at org.jmol.viewer.Viewer.evalStringWaitStatus(Unknown Source)
    at org.jmol.viewer.ScriptManager.runScript(Unknown Source)
    at org.jmol.viewer.ScriptManager.runNextScript(Unknown Source)
    at org.jmol.viewer.ScriptManager$ScriptQueueRunnable.run(Unknown Source)
    at java.lang.Thread.run(Unknown Source)
    openFile(8502\8502.pdb)15 ms
    ModelSet: haveSymmetry:false haveUnitcells:true haveFractionalCoord:false
    1 model in this collection. Use getProperty “modelInfo” or getProperty “auxiliaryInfo” to inspect them.
    ModelSet: autobonding; use autobond=false to not generate bonds automatically

    —————————————

    I also want to set the parameters such as,spin on,style->scheme->trace,color->atoms->By Scheme->Chain, bla bla.. automatically at the time of loading of the molecule.
    Please help……..Thanks in advance…..

  8. Myer Nore says:

    If only there were a way to embed an applet in wordpress and have it show up in the rss feed. I subscribed to the feed just to see if it showed up – sadly, it didn’t.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>