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