biojs-vis-pdbviewer
Version:
A BioJS 2.0 component to view protein structures
158 lines (119 loc) • 5.93 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JSmol -- platform-aware Jmol using jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="JSmol.min.js"></script>
<script type="text/javascript">
// ---------------------------------------------------------------------------------
////// every page will need one variable and one Info object for each applet object
var Info = {
width: 450,
height: 450,
script: "script data/rabe1.spt",
color: "black",
use: "HTML5",
jarPath: "java",
j2sPath: "j2s",
jarFile: "JmolApplet.jar",
isSigned: false,
addSelectionOptions: false,
serverURL: "http://chemapps.stolaf.edu/jmol/jsmol/php/jsmol.php",
readyFunction: null,
console: "jmol_infodiv",
disableInitialConsole: true,
defaultModel: null,
debug: false
}
// this next bit just allows us to see what platform we are on
// based on our decisions indicated in Info
// "true" here indicates just a check
var appletCheck = Jmol.getApplet("test", Info, true);
var isApplet = (appletCheck._jmolType.indexOf("_Applet") >= 0);
var is2D = appletCheck._is2D;
if (!isApplet && !Info.script) {
// JSmol or image
Info.defaultModel = "$tylenol";
Info.script = "#alt:LOAD :tylenol";
}
var jmol = "jmol"; // the JavaScript applet object
// The actual applet will be jmol._applet (if it turns out to be an actual Applet),
// but we will never access that directly.
$(document).ready(function(){
// set Jmol to simply create the code and not use document.write
Jmol.setDocument(0);
// now we have a JavaScript Object "jmol" and jmol._code is the HTML
// we will need later
// This demonstration shows that
// what is put on the page can depend upon the platform.
// It may seem strange or uncessary in what is below to use the syntax
//
// Jmol.jmolXXXX(jmol,...)
//
// instead of just
//
// jmol.XXXX(...)
//
// This was an intentional design decision.
// The reason has to do with flexibility, organization, and legacy:
//
// It allows us to be much more flexible in that jmol is allowed to be just the string "jmol"
// (which allows us to create controls on the page before the applet wrapper object is created
// when using more traditional in-body scripting if we are not interested in platforms).
//
// It allowed me to put all the controls in (optional) Jmol.controls, which is a bit cleaner
// than just having all the controls in the jmol applet wrapper prototype (which would be OK,
// but would require copying, possibly with modification, in the case we have other
// related prototypes such as glMol, ChemDoodle, JSpecView, or JME
//
// It allows users of Jmol.js to easily migrate to this system -- just add "Jmol." in front of
// the legacy call jmolXXXX(...) and add the applet reference as the first parameter.
//
// Note that the use of $(document.ready()) is completely optional.
// You can do the traditional in-body coding if you want. See also simple2-nojq.htm.
// But as Gusts Kaksis pointed out, if we are using jQuery for database lookups, we might
// as well use it for more than that.
// If you do not use $(document.ready()), be sure to define jmol this way:
//
// jmol = "jmol"
//
// prior to calling any of the methods that create controls -- jmolButton, jmolLink, etc.
// and, if you do that, realize that you cannot implement any platform-aware features.
//
var radios = [
["set background white", "white", true],
["set background black", "black"]
];
// the HTML code is in jmol._code since we are using Jmol.setDocument(0)
jmol = Jmol.getApplet("jmol", Info);
$("#middlepanel").html(Jmol.getAppletHtml(jmol));
})
//]]>
</script>
</head>
<body>
<table border="1" style="margin-left:auto; margin-right:auto;">
<tr>
<td><div id="leftpanel" style="width:500px;overflow:auto;font-size:20px;height:500px; margin-left:20px; margin-right:20px; margin-top:20px; margin-bottom:20px">
Carbon nanotubes (CNTs) can be thought of as a rolled sheet of graphene. The direction on this roll can change, it can either be straight across or on a twist. The diameter of nanotubes is also variable. Therefore, different nanotubes must be labeled in a way that conveys these differences. The convention to do is uses two numbers n and m. These numbers correspond to the number of <IMG SRC="a1 vect.png"WIDTH=25 HEIGHT=25> (red)and <IMG SRC="a2 vect.png"WIDTH=25 HEIGHT=25> (blue) used to define the unit square, which defines the circumference of the nanotube. This means that <IMG SRC="equation.png"WIDTH=125 HEIGHT=25>
<br />
<br />
To visualize this <a href="javascript:Jmol.script(jmol,'getN')">choose n </a> and <a href="javascript:Jmol.script(jmol,'getM()')">choose m</a>
and then show<a href="javascript:Jmol.script(jmol,'drawComponent1()')"><IMG SRC="bluea1.png"WIDTH=39 HEIGHT=23></a>
and
<a href="javascript:Jmol.script(jmol,'drawComponent2()')"><IMG SRC="bluea2.png"WIDTH=38 HEIGHT=25></a>.
<br />
Next, let's see the resulting vector when we
<a href="javascript:Jmol.script(jmol,'drawVnm()')">add</a>
the vectors. So as previously stated, this resulting vector is the circumference and the vertical axis of the tube will be vertical to this vector. To visualize this watch the tube <a href="javascript:Jmol.script(jmol,'makeTube(f)')">roll</a> and notice what happened to the circumference vector.
<br />
<br />
Now try with other values of n and m to see how the chirality and diameter of nanotubes can change.
</div></td>
<td><div id="middlepanel"></div></td>
</tr>
</table>
<div id="console"></div>
</body>
</html>