biojs-vis-pdbviewer
Version:
A BioJS 2.0 component to view protein structures
247 lines (209 loc) • 7.61 kB
HTML
<html>
<head>
<title>Jmol/DSSR Demonatration Page</title>
<script type="text/javascript" src="JSmol.min.js"></script>
<script type="text/javascript">
// Bob Hanson 4/22/2014 6:49:57 PM hansonr@stolaf.edu
var jmolApplet0; // set up in HTML table, below
var stemScript = "select nucleic;backbone -0.5;select nucleic and leadAtom;spacefill 1.5;label %[group1];set labelOffset 0 0;color labels yellow";
var _1ehzScript = "reset;center {60.992996 51.431 25.178501}; rotate z -142.9; rotate y 68.91; rotate z 112.36;";
var maxDrop = 5;
var Info = {
width: 450,
height: 450,
color: "white",
addSelectionOptions: false,
disableInitialConsole: true,
serverURL: "http://chemapps.stolaf.edu/jmol/jsmol/php/jsmol.php",
use: "JAVA HTML5",
jarFile: "JmolAppletSigned0.jar",
isSigned: true,
loadStructCallback: "enableButtons",
script: "background black;set backboneSteps;set defaultLoadScript '"+ stemScript + ";if(!h2oOn){display !water};color grey';load data/1ehz.pdb.dssr;" + _1ehzScript
}
function enableButtons() {
var data = "" +Jmol.evaluateVar(jmolApplet0, "getProperty('auxiliaryInfo.models.1.dssr.keys')");
for (var i = dssrBtns.length; --i >= 0;) {
var key = dssrBtns[i];
$("#dssrBtn_"+key).prop("disabled", (data.indexOf(key) < 0));
}
}
///////// MODEL LIST /////////
Models = []
template = "xid='%1';zap;set echo top left;echo loading...;refresh;load %4;%3|%2 (%1)"
function addModel(xxxx, load, text, script) {
script || (script = "");
load || (load = "=%1/dssr 1");
Models.push(template.replace(/\%4/, load).replace(/\%1/g, xxxx).replace(/%2/, text).replace(/%3/, script).split("|"))
}
addModel("1ehz", "data/1ehz.pdb.dssr", "T-RNA", _1ehzScript)
addModel("2m5u", "", "P4 Hairpin Loop")
addModel("2m4w", "", "G-Bulge")
addModel("4jab", "", "U/G Wobble Base Pair")
addModel("2mi0", "", "I-V Kissing Loop")
addModel("1msy", "", "GUAA tetraloop E. Coli 23 S rRNA")
addModel("4c40", "", "L7Ae kink turn")
addModel("2mhi", "", "telomerase CR4/5 domain")
addModel("4lvv", "", "THF Riboswitch", "rotate Y -90")
addModel("4mgn", "", "glyQS T box riboswitch+tRNA")
function jmolCheckbox(script1, script0,text,ischecked) {Jmol.jmolCheckbox(jmolApplet0,script1, script0, text, ischecked)}
function jmolButton(script, text) {Jmol.jmolButton(jmolApplet0, "select *;" + (script || text), (text || script))}
function jmolHtml(s) { document.write(s) };
function jmolBr() { jmolHtml("<br />") }
function jmolMenu(a) {Jmol.jmolMenu(jmolApplet0, a)}
function jmolScript(script) {
$("#jmolCmd0").val(script);
Jmol.script(jmolApplet0, script);
}
///////// SPECIALIZED BUTTONS /////////
var dssrBtns = []
function dssrBtn(key, name) {
var text = key.replace(/Loops/," Loops").replace(/Stacks/," Stacks");
if (key.indexOf(" pairs") >= 0)
key = "bp_" + key;
else if (name != null)
dssrBtns.push(key);
Jmol.jmolButton("jmolApplet0", [showDSSR, key, name],text, "dssrBtn_"+key);
}
function showDSSR(btn, data) {
var dssrType = data[1].replace(/ /g,"");
var dssrWhat = data[2]
var dssrPlural = data[1].toLowerCase();
var s = "";
var n = 0;
$("#menudiv").css('visibility', 'hidden');
if (btn) {
if (dssrType == "summary") {
alert(Jmol.scriptEcho(jmolApplet0, "show dssr 'summary'"));
return;
}
jmolScript("select *;color gray;");
if (dssrWhat == null)
return;
if (dssrType.indexOf("bp_") == 0) {
jmolScript("select within(dssr,\"basePairs[SELECT res* WHERE " + dssrWhat + "]\");color red");
$("#menudiv").html(s).css('visibility', 'hidden');
return;
}
var data = Jmol.evaluateVar(jmolApplet0, "getProperty('auxiliaryInfo.models.1.dssr."+dssrType+"')");
var n = data.length;
var s = "<select id='dssr' style='width:140px' size='"+Math.min(n+1, maxDrop)+"'>"
if (n > 1)
s += "<option value='' selected>" + (n == 2 ? "both" : "all " + n) + " " + dssrPlural + "</option>"
for (var i = 0; i < n; i++)
s += "<option value="+(i+1)+">"+ dssrWhat + " "+ (i + 1)+"</option>";
s += "</select>"
$("#menudiv").html(s).css('visibility', (n == 0 ? 'hidden' : 'visible'));
var f = function(a,e){selectOn(dssrType, $(e || this).val())};
$("#dssr").change(f).keyup(function() {var me = this;setTimeout(function(){f(0, me)}, 50)});
selectOn(dssrType, 0);
}
}
function selectOn(dssrType, n) {
jmolScript("select *;color grey;select within(dssr,'" + dssrType+"'); color " + (n ? "translucent " : "") + "red");
if (n) {
jmolScript("select within(dssr,'" + dssrType+"." + n + "'); color red");
}
}
$(document).ready(function() {
$("#menudiv").css("visibility","hidden");
});
</script>
</head>
<body>
<center>
<table><tr>
<td valign=top style="width:300px" rowspan=2>
This page demonstrates capabilities in Jmol 14.2
that involve RNA and DNA secondary structure
using real-time DSSR analysis provided by <a href=http://goo.gl/ap12xJ>3DNA</a>.
<br />
<br />
The commands being issued by the buttons are displayed in the
box under the applet.
<br />
<br />
<script type="text/javascript">
Jmol.setButtonCss(null,"style='width:140px'")
dssrBtn('stems', 'stem');
dssrBtn('helices', 'helix');
jmolBr();
dssrBtn('hairpinLoops', 'hairpin loop');
dssrBtn('internalLoops', 'internal loop');
jmolBr()
dssrBtn('kissingLoops', 'kissing loop');
dssrBtn('bulges', 'bulge');
jmolBr();
dssrBtn('junctions', 'junction');
dssrBtn('coaxialStacks', 'coaxial stack');
jmolBr();
dssrBtn("highlight off");
dssrBtn("summary");
jmolBr();
jmolBr();
dssrBtn("W-C pairs", "name='WC'");
dssrBtn("wobble pairs", "name='Wobble'");
jmolBr();
dssrBtn('multiplets', 'multiplet');
jmolBr();
</script>
<div id="menudiv" style="visiblity:hidden"><select><option></option></select></div>
</td>
<td valign=top align=center>
<script type="text/javascript">
jmolApplet0 = Jmol.getApplet("jmolApplet0", Info)
</script>
</td><td valign=top >
<form><!-- (FORM tag is important to automatically set checkbox off when page reloads) -->
<script type="text/javascript">
Jmol.setButtonCss(null,"style='width:160px'")
Jmol.setMenuCss(null,"style='width:160px'")
jmolButton("if (!xid) { xid = '1ehz'};var x = prompt('Enter a four-digit PDB ID',xid);if (!x) { quit }; xid = x; load @{'=' + x + '/dssr'} 1;set echo top center;echo @x","Load PDB by ID")
jmolBr()
jmolCheckbox("set pdbAddHydrogens TRUE","set pdbAddHydrogens FALSE","with hydrogens",false)
jmolBr()
jmolCheckbox("h2oOn=true;display *","h2oOn=false;display !water","display water",false)
jmolBr()
jmolHtml("Examples:")
jmolBr()
jmolMenu(Models)
jmolBr()
jmolBr()
jmolBr()
jmolBr()
jmolButton("load ?","Load File")
jmolBr()
jmolButton("calculate structure DSSR;javascript enableButtons()","Calculate DSSR")
jmolBr()
jmolBr()
jmolButton("write FILE ?","Save FILE")
jmolBr()
jmolButton("write IMAGE ?.png","Save PNG")
jmolBr()
jmolButton("write PNGJ ?.png","Save PNG+Jmol")
</script>
</form>
</td></tr>
<tr>
<td align=center>
<script type="text/javascript">
jmolBr()
Jmol.setButtonCss(null,"style='width:120px'")
jmolButton("color cpk")
jmolButton("color group")
jmolButton("color chain")
jmolButton("color structure")
jmolBr()
jmolButton(stemScript,"stem diag")
jmolButton("cartoon only")
jmolButton("backbone -0.3")
jmolButton("spacefill only;spacefill 23%;wireframe 0.15","ball&stick")
jmolBr()
Jmol.setButtonCss(null,"style='width:100px'")
jmolButton("console")
Jmol.jmolCommandInput(jmolApplet0)
</script>
</td></tr></table>
</body>
</html>