-
Notifications
You must be signed in to change notification settings - Fork 2
/
jmol_inline.html
174 lines (148 loc) · 8.43 KB
/
jmol_inline.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>JSmol Demo (load Inline)</title>
<!-- CSS Style Inline: (could go to static .css file) -->
<style type="text/css">
/* Jmol Applet */
/* defines height, width and orientation of the Jmol div element */
#jmol_div{
height: 500px;
width: 500px;
float: left;
}
</style>
<!-- Load Jmol javascript library -->
<script type="text/javascript" src="jsmol/JSmol.min.js"></script>
<!-- This data comes from the database and can be injected into a Django template: -->
<script type="text/javascript">
// assign the CML molecule to a string variable:
var cml_inline = "<?xml version='1.0' encoding='ASCII' standalone='yes'?><molecule xmlns:iupac='http://www.iupac.org/' xmlns='http://www.xml-cml.org/schema' xmlns:cmlx='http://www.xml-cml.org/schema/cmlx' xmlns:convention='http://www.xml-cml.org/convention/' xmlns:cc='http://www.xml-cml.org/dictionary/compchem/' xmlns:compchem='http://www.xml-cml.org/dictionary/compchem/' xmlns:g='http://www.xml-cml.org/dictionary/gaussian/' xmlns:xsd='http://www.w3.org/2001/XMLSchema' xmlns:si='http://www.xml-cml.org/unit/si/' xmlns:nonSi='http://www.xml-cml.org/unit/nonSi/' xmlns:cml='http://www.xml-cml.org/dictionary/cml/' id='mol9999' spinMultiplicity='1' formalCharge='0' convention='convention:molecular'><atomArray><atom id='a1' elementType='C' x3='-0.0134952194' y3='0.0038685998' z3='-0.030382396'/><atom id='a2' elementType='H' x3='-0.0056725438' y3='-1.080265325' z3='-0.0167961727'/><atom id='a3' elementType='Br' x3='1.8682974281' y3='0.6403936943' z3='-0.0463838435'/><atom id='a4' elementType='Cl' x3='-0.9101302027' y3='0.5931117345' z3='1.475597512'/><atom id='a5' elementType='F' x3='-0.6702988923' y3='0.4728913064' z3='-1.1615810297'/></atomArray><bondArray><bond atomRefs2='a1 a2' id='a1_a2' order='S'/><bond atomRefs2='a1 a3' id='a1_a3' order='S'/><bond atomRefs2='a1 a4' id='a1_a4' order='S'/><bond atomRefs2='a1 a5' id='a1_a5' order='S'/></bondArray><property dictRef='cml:molmass'><scalar xmlns:unit='http://www.xml-cml.org/unit/nonSi/' dataType='xsd:double' units='unit:dalton'>147.37404320000002</scalar></property><property dictRef='cc:dipoleMomentVector'><array dataType='xsd:double' units='nonSi:elementaryCharge.bohr' size='3'>0.2026029 -0.6465188 0.0316481</array></property><property xmlns:id='http://www.xml-cml.org/dictionary/identifier/' dictRef='id:smiles'><scalar dataType='xsd:string'>C(Br)(Cl)F</scalar></property><property xmlns:id='http://www.xml-cml.org/dictionary/identifier/' dictRef='id:smiles_H'><scalar dataType='xsd:string'>[CH]([Br])([Cl])[F]</scalar></property><identifier convention='iupac:inchi' value='InChI=1S/CHBrClF/c2-1(3)4/h1H/t1-/m0/s1'/><identifier convention='iupac:inchiKey' value='YNKZSBSRKWVMEZ-SFOWXEAESA-N'/></molecule>";
var dipole = "0.2026029 -0.6465188 0.0316481";
var partial_charges = "-0.295496 0.261652 0.17432 0.139718 -0.280193";
partial_charges = partial_charges.replace(/ /g, '\n') // replace all space with newlines
</script>
<!-- These functions could be placed in a static .js file: -->
<script type="text/javascript">
var dipole_is_on = false; // dipole vector is not shown upon load
function toggleShowDipole(){
// JavaScript function that executes one of two Jmol scripts,
// depending on whether variable dipole_is_on is true or false
var jm_script = '';
if (dipole_is_on == true) {
jm_script = "draw ID dipole off;"
dipole_is_on = false; // remember that dipole vector is off now
} else {
jm_script = 'v1 = {' + dipole + '};' // dipole moment vector
+ 'p1 = {*}.xyz ;' // center of the molecule as origin
+ 'p2 = @{ v1 * 4} + p1;' // scale the vector by factor 5 and shift to the origin
+ 'draw ID dipole arrow DIAMETER 0.15 @p1 @p2;'; //# draw the arrow
dipole_is_on = true ; // remember that dipole vector is on now
}
Jmol.script(myJmol, jm_script);
};
function load_charges(){
var jm_script = [ // create Jmol script as array of commands
'select *;',
'data "property_partialCharge"', // load charges into temporary property
partial_charges,
'end "property_partialCharge";',
'show data;',
'{*}.partialCharge = {*}.property_partialCharge.all;', // assign charges to correct property
// 'label %.3P;'
].join('\n'); // join array to newline-separated string
Jmol.script(myJmol, jm_script);
};
</script>
<!--
calls to jQuery and Jmol (inline)
This is static and can be externalized.
-->
<script type="text/javascript">
// initialize Jmol Applet
var myJmol = "myJmol";
var Info = {
width: "100%",
height: "100%",
color: "#000000", //black
use: "HTML5",
j2sPath: "jsmol/j2s", // this needs to point to where the j2s directory is.
debug: false,
script: 'load inline "' + cml_inline +'" ;', // on-load Jmol script
allowJavaScript: false,
disableJ2SLoadMonitor: true,
}
// jQuery ready functions
// is called when page has been completely loaded
$(document).ready(function() {
$("#jmol_div").html(Jmol.getAppletHtml(myJmol, Info))
})
var lastPrompt=0;
</script>
</head>
<body>
<h1>JSmol Demo (load inline)</h1>
<!-- DIV in which Jmol Applet will be placed -->
<div id='jmol_div'></div>
<br clear="all" / >
<!-- Radio buttons with vizualization (inline Jmol scripts) -->
<input name="vis" type="radio" onclick="Jmol.script(myJmol, 'cpk 25%; wireframe 0.15; ');" checked="checked"
>Show Balls & Sticks</input><br/>
<input name="vis" type="radio" onclick="Jmol.script(myJmol, 'cpk 100%; wireframe off; ');"
>Show spacefill</input><br/>
<input name="vis" type="radio" onclick="Jmol.script(myJmol, 'wireframe only; ');"
>Show Wireframe</input><br/>
<br/>
<!-- Buttons calling JavaScript functions onclick: -->
<button onclick="toggleShowDipole();">Show dipole (toggle)</button><br/>
<button onclick="load_charges();">Load Charges</button><br/>
<!-- Button with onclick JavaScript and inline Jmol script -->
<button onclick="Jmol.script(myJmol, 'label %.3P')">Show Partial Charges</button><br/>
<script type="text/javascript">
// function to disable / enable of input elements of class "surfacebox"
function set_checkbox_state(state){
if (state == 'on') {
$('input.surfacebox').prop('disabled', false)
} else {
$('input.surfacebox').prop('disabled', true)
}
}
// function to disable / enable of input elements of class "surf2"
function set_checkbox_state_class(state, cls){
if (state == 'on') {
$('.'+cls).prop('disabled', false)
} else {
$('.'.cls).prop('disabled', true)
}
}
</script>
<ul>
<li>First set of controls (uses function "set_checkbox_state(state)"):</li>
<li><input type="radio" name="surface1" checked="checked"
onclick="Jmol.script(myJmol, 'isosurface off;'); set_checkbox_state('off');" /> Surface off</li>
<li><input type="radio" name="surface1"
onclick="Jmol.script(myJmol, 'isosurface vdw;'); set_checkbox_state('on');" /> Van der Waals Surface</li>
<li><input type="radio" name="surface1"
onclick="Jmol.script(myJmol, 'isosurface solvent;'); set_checkbox_state('on');" /> Solvent Accessible Surface</li>
<li><input class="surfacebox" type="checkbox" disabled="true"
onclick="Jmol.script(myJmol, 'isosurface translucent 0.5;')" /> Translucent Surface
</li>
<li><input class="surfacebox" type="checkbox" disabled="true"
onclick="Jmol.script(myJmol, 'isosurface map mep;')" /> Electrostatic Potential</li>
</ul>
<ul>
<li>Second set of controls (uses function "set_checkbox_state_class(state, cls)"):</li>
<li><input type="radio" name="surface2" checked="checked"
onclick="Jmol.script(myJmol, 'isosurface off;'); set_checkbox_state_class('off', 'surf2');" /> Surface off</li>
<li><input type="radio" name="surface2"
onclick="Jmol.script(myJmol, 'isosurface vdw;'); set_checkbox_state_class('on', 'surf2');" /> Van der Waals Surface</li>
<li><input type="radio" name="surface2"
onclick="Jmol.script(myJmol, 'isosurface solvent;'); set_checkbox_state_class('on', 'surf2');" /> Solvent Accessible Surface</li>
<li><input class="surfacebox surf2" type="checkbox" disabled="true"
onclick="Jmol.script(myJmol, 'isosurface translucent 0.5;')" /> Translucent Surface</li>
<li><input class="surfacebox surf2" type="checkbox" disabled="true"
onclick="Jmol.script(myJmol, 'isosurface map mep;')" /> Electrostatic Potential</li>
</ul>
</body>
</html>