Macs in Chemistry

Insanely great science

Displaying structures using JSmol and GLMol

I’ve previously highlighted the use of ChemDoodle web components to display molecular structures within a web page, and a recent publication DOI by Henry Rzepa lead me to explore some of the newer additions to the means to render molecules within a web page without the use of applets or plugins.

JSmol

JSmol can be used as an alternative to the Jmol java applet, because it is written in javascript it does not require Java but instead renders the molecular models in a webpage using just JavaScript and HTML5 features. JSmol is not a different program than Jmol: it is Jmol, just compiled into JavaScript instead of Java, and thus those who are familiar with scripting Jmol will be very much at home with JSmol. Everything you need can be downloaded from here

The HTML code

The code below is used to simply display a molecule in a web page.

<html>
        <title>HTML5-only</title>
        <head>
        <script type="text/javascript" src="/jsmol/jsmol/jsmol/JSmoljQuery.js"></script>
        <script type="text/javascript" src="/jsmol/jsmol/jsmol/JSmolCore.js"></script>
        <script type="text/javascript" src="/jsmol/jsmol/jsmol/JSmolApplet.js"></script>
        <script type="text/javascript" src="/jsmol/jsmol/jsmol/JSmolApi.js"></script>
        <script type="text/javascript" src="/jsmol/jsmol/jsmol/j2s/j2sjmol.js"></script>
        <script type="text/javascript" src="/jsmol/jsmol/jsmol/JSmol.js"></script>
        <script type="text/javascript">

        //Jmol.debugCode = true

        var myJmol1
        var myInfo1 = {
        height: '100%',
        width: '100%',
        j2sPath: "/jsmol/jsmol/jsmol/j2s",
        use: 'HTML5',
        console: "myJmol1_infodiv",
        debug: false
        };

        </script>
        </head>
        <body>

        <div style="width:450px;height:300px" >
        <script type="text/javascript">
        myJmol1 = Jmol.getApplet("myJmol1", myInfo1);
        Jmol.script(myJmol1, 'load "/jsmol/Structures/temp4.sdf";' );
        </script>
        </div>


        </body>
        </html>

JSmol Example

The structure below is rendered using JSmol, if you click and hold down on the mouse you should be able to rotate it, alt-click rotates in the z-plane, shift-click is zoom (or you can use the scroll wheel on your mouse). If you right-click on the structure you should see a drop down menu displaying all the usual Jmol options. One consequence of this is that the javascript files are quite large and do take a a few moments to download. In my experimentation I found it all seemed to work as expected, including dot and and translucent surfaces, distance and angle measuring, there is a more fully featured test page here.

This conversion from Jmol to JSmol is excellent with the credit going to the people named below. WebGL interface written by Takanori Nakane. Java2Script written by Zhou Renjian, et al. Jzlib written by Atsuhiko Yamanaka. Jmol code conversion to JavaScript by Bob Hanson.

Using GLmol

GLmol is a 3D molecular viewer based on WebGL and Javascript, and again it is possible to display structures in a web page with out the need for plugins or java applets.

By default WebGL is not enabled in Safari, to enable you need to

In Safari, open the Safari menu and select Preferences, then, click the Advanced tab in the Preferences window. At the bottom of the window, check the Show Develop menu in menu bar checkbox.
 Then, open the Develop menu in the menu bar and select Enable WebGL. WebGL is supported by Firefox but not by Internet Explorer.

GLmol currently supports reading PDB (as used below), sdf, MOL and XYZ format, it will also load files from the RCSB PDB server NCBI PubChem server. The molecules can be rendered as ball and stick, or line format, and the secondary structure of proteins can be displayed in cartoon format.

The HTML code

<div id="glmol02" style="width: 500px; height: 400px; background-color: black;"></div> 
<textarea id="glmol02_src" style="display: none;">
COMPND    Emend 
AUTHOR    GENERATED BY OPEN BABEL 2.3.1
HETATM    1  F   LIG     1      10.646  -3.819  -2.572  1.00  0.00           F  
HETATM    2  C   LIG     1      11.163  -5.025  -2.207  1.00  0.00           C  
HETATM    3  F   LIG     1      11.850  -5.483  -3.288  1.00  0.00           F  
HETATM    4  F   LIG     1      12.093  -4.759  -1.251  1.00  0.00           F  
HETATM    5  C   LIG     1      10.116  -6.007  -1.731  1.00  0.00           C  
HETATM    6  C   LIG     1       8.753  -5.668  -1.726  1.00  0.00           C  
HETATM    7  C   LIG     1       7.780  -6.551  -1.228  1.00  0.00           C  
HETATM    8  C   LIG     1       8.193  -7.820  -0.789  1.00  0.00           C  
HETATM    9  C   LIG     1       9.548  -8.193  -0.802  1.00  0.00           C  
HETATM   10  C   LIG     1      10.501  -7.274  -1.267  1.00  0.00           C  
HETATM   11  C   LIG     1       9.991  -9.552  -0.308  1.00  0.00           C  
HETATM   12  F   LIG     1      10.644 -10.264  -1.266  1.00  0.00           F  
HETATM   13  F   LIG     1      10.842  -9.467   0.750  1.00  0.00           F  
HETATM   14  F   LIG     1       8.957 -10.337   0.104  1.00  0.00           F  
HETATM   15  C   LIG     1       6.315  -6.154  -1.122  1.00  0.00           C  
HETATM   16  O   LIG     1       5.714  -6.364  -2.409  1.00  0.00           O  
HETATM   17  C   LIG     1       4.291  -6.452  -2.377  1.00  0.00           C  
HETATM   18  O   LIG     1       3.704  -5.182  -2.063  1.00  0.00           O  
HETATM   19  C   LIG     1       2.291  -5.252  -1.897  1.00  0.00           C  
HETATM   20  C   LIG     1       1.597  -5.713  -3.179  1.00  0.00           C  
HETATM   21  N   LIG     1       2.152  -7.053  -3.616  1.00  0.00           N
HETATM   22  C   LIG     1       1.374  -7.629  -4.790  1.00  0.00           C  
HETATM   23  C   LIG     1       1.701  -9.088  -5.026  1.00  0.00           C  
HETATM   24  N   LIG     1       2.210  -9.816  -4.068  1.00  0.00           N  
HETATM   25  C   LIG     1       2.353 -11.073  -4.630  1.00  0.00           C  
HETATM   26  O   LIG     1       2.969 -12.002  -4.144  1.00  0.00           O  
HETATM   27  N   LIG     1       1.751 -11.073  -5.876  1.00  0.00           N  
HETATM   28  N   LIG     1       1.474  -9.742  -6.218  1.00  0.00           N  
HETATM   29  C   LIG     1       3.715  -7.005  -3.754  1.00  0.00           C  
HETATM   30  C   LIG     1       4.190  -6.301  -5.026  1.00  0.00           C  
HETATM   31  C   LIG     1       4.269  -7.030  -6.232  1.00  0.00           C  
HETATM   32  C   LIG     1       4.683  -6.420  -7.420  1.00  0.00           C  
HETATM   33  C   LIG     1       5.053  -5.085  -7.410  1.00  0.00           C  
HETATM   34  F   LIG     1       5.462  -4.504  -8.544  1.00  0.00           F  
HETATM   35  C   LIG     1       5.014  -4.348  -6.236  1.00  0.00           C  
HETATM   36  C   LIG     1       4.579  -4.950  -5.051  1.00  0.00           C  
HETATM   37  C   LIG     1       6.151  -4.711  -0.632  1.00  0.00           C  
HETATM   38  H   LIG     1       8.456  -4.686  -2.095  1.00  0.00           H  
HETATM   39  H   LIG     1       7.455  -8.528  -0.412  1.00  0.00           H  
HETATM   40  H   LIG     1      11.559  -7.546  -1.263  1.00  0.00           H  
HETATM   41  H   LIG     1       5.841  -6.817  -0.386  1.00  0.00           H  
HETATM   42  H   LIG     1       4.008  -7.169  -1.593  1.00  0.00           H  
HETATM   43  H   LIG     1       1.941  -4.248  -1.635  1.00  0.00           H  
HETATM   44  H   LIG     1       2.056  -5.914  -1.055  1.00  0.00           H  
HETATM   45  H   LIG     1       1.764  -5.013  -4.003  1.00  0.00           H  
HETATM   46  H   LIG     1       0.523  -5.836  -3.009  1.00  0.00           H  
HETATM   47  H   LIG     1       1.996  -7.740  -2.862  1.00  0.00           H  
HETATM   48  H   LIG     1       1.546  -7.015  -5.674  1.00  0.00           H  
HETATM   49  H   LIG     1       0.313  -7.577  -4.516  1.00  0.00           H  
HETATM   50  H   LIG     1       2.093 -11.732  -6.569  1.00  0.00           H  
HETATM   51  H   LIG     1       0.566  -9.604  -6.668  1.00  0.00           H  
HETATM   52  H   LIG     1       4.048  -8.047  -3.820  1.00  0.00           H  
HETATM   53  H   LIG     1       4.036  -8.093  -6.266  1.00  0.00           H  
HETATM   54  H   LIG     1       4.741  -6.982  -8.348  1.00  0.00           H  
HETATM   55  H   LIG     1       5.339  -3.311  -6.246  1.00  0.00           H  
HETATM   56  H   LIG     1       4.592  -4.338  -4.151  1.00  0.00           H  
HETATM   57  H   LIG     1       6.308  -3.991  -1.443  1.00  0.00           H  
HETATM   58  H   LIG     1       6.838  -4.479   0.189  1.00  0.00           H  
HETATM   59  H   LIG     1       5.140  -4.541  -0.251  1.00  0.00           H  
CONECT    1    2                                                      
CONECT    2    1    5    4    3                                       
CONECT    2                                                           
CONECT    3    2                                                      
CONECT    4    2                                                      
CONECT    5    2    6   10                                            
CONECT    6    5    7   38                                            
CONECT    7    6    8   15                                            
CONECT    8    7    9   39                                            
CONECT    9    8   10   11                                            
CONECT   10    5    9   40                                            
CONECT   11    9   14   13   12                                       
CONECT   11                                                           
CONECT   12   11                                                      
CONECT   13   11                                                      
CONECT   14   11                                                      
CONECT   15   16   37    7   41                                       
CONECT   15                                                           
CONECT   16   15   17                                                 
CONECT   17   18   29   16   42                                       
CONECT   17                                                           
CONECT   18   17   19                                                 
CONECT   19   18   20   43   44                                       
CONECT   19                                                           
CONECT   20   19   21   45   46                                       
CONECT   20                                                           
CONECT   21   20   29   22   47                                       
CONECT   21                                                           
CONECT   22   21   23   48   49                                       
CONECT   22                                                           
CONECT   23   22   24   28                                            
CONECT   24   23   25                                                 
CONECT   25   24   27   26                                            
CONECT   26   25                                                      
CONECT   27   25   28   50                                            
CONECT   28   23   27   51                                            
CONECT   29   17   21   30   52                                       
CONECT   29                                                           
CONECT   30   29   31   36                                            
CONECT   31   30   32   53                                            
CONECT   32   31   33   54                                            
CONECT   33   32   35   34                                            
CONECT   34   33                                                      
CONECT   35   33   36   55                                            
CONECT   36   30   35   56                                            
CONECT   37   15   57   58   59                                       
CONECT   37                                                           
CONECT   38    6                                                      
CONECT   39    8                                                      
CONECT   40   10                                                      
CONECT   41   15                                                      
CONECT   42   17                                                      
CONECT   43   19                                                      
CONECT   44   19                                                      
CONECT   45   20                                                      
CONECT   46   20                                                      
CONECT   47   21                                                      
CONECT   48   22                                                      
CONECT   49   22                                                      
CONECT   50   27                                                      
CONECT   51   28                                                      
CONECT   52   29                                                      
CONECT   53   31                                                      
CONECT   54   32                                                      
CONECT   55   35                                                      
CONECT   56   36                                                      
CONECT   57   37                                                      
CONECT   58   37                                                      
CONECT   59   37                                                      
MASTER        0    0    0    0    0    0    0    0   59    0   59    0
END
</textarea>

<script src="js/jquery-1.7.min.js"></script>
<script src="js/Three49custom.js"></script>
<script type="text/javascript" src="js/GLmol.js"></script>
<script type="text/javascript">

// Small molecules can be embedded in the page

var glmol02 = new GLmol('glmol02');

</script>

GLmol Example

Currently WebGL is not supported on mobile devices such as the iPad or iPhone, this is the work of Nakane T: GLmol - Molecular Viewer on WebGL/Javascript. webglmol.sourceforge.jp