1
+ < head >
2
+ < title > JMol Example</ title >
3
+ < script src ="jmol/Jmol.js " type ="text/javascript "> </ script >
4
+ < script type ="text/javascript ">
5
+
6
+ // ***** SET UP Jmol PARAMETERS & CONTROL BAR *****
7
+
8
+ // file location
9
+ var str = document . location . search . substr ( 1 , document . location . search . length ) . replace ( / % 2 0 / g, " " ) ;
10
+ var modelFile = str . split ( ',' ) [ 0 ] . split ( 'xyz=' ) [ 1 ] ;
11
+ var setUpInfo = "load " + modelFile + ";" ;
12
+
13
+ // control bar?
14
+ var controls = str . split ( ',' ) [ 2 ] . split ( 'controls=' ) [ 1 ] ;
15
+
16
+ // spin
17
+ var spin = str . split ( ',' ) [ 1 ] . split ( 'spin=' ) [ 1 ] ;
18
+ if ( spin == "true" ) {
19
+ setUpInfo += " spin on;" ;
20
+ spin = true ;
21
+ } else {
22
+ spin = false ;
23
+ }
24
+
25
+
26
+ // background colour
27
+ var bgColour = str . split ( ',' ) [ 3 ] . split ( 'bgColour=' ) [ 1 ] ;
28
+ if ( bgColour != "Black" && bgColour != "Blue" ) {
29
+ bgColour = "White" ;
30
+ }
31
+ setUpInfo += " background " + bgColour + ";" ;
32
+
33
+
34
+ // display / initial appearance
35
+ var initDisplay = str . split ( ',' ) [ 4 ] . split ( 'initLook=' ) [ 1 ] ;
36
+ var currentDisplay = initDisplay ;
37
+ if ( initDisplay == "CPK" ) {
38
+ setUpInfo += " spacefill on; wireframe off; backbone on; cartoon off;" ;
39
+ } else if ( initDisplay == "Ball and Stick" ) {
40
+ setUpInfo += " spacefill 25%; wireframe 35%; backbone on; cartoon off;" ;
41
+ } else if ( initDisplay == "Sticks" ) {
42
+ setUpInfo += " spacefill off; wireframe 20%; backbone on; cartoon off;" ;
43
+ } else if ( initDisplay == "Wireframe" ) {
44
+ setUpInfo += " spacefill off; wireframe on; backbone on; cartoon off;" ;
45
+ } else if ( initDisplay == "Cartoon" ) {
46
+ setUpInfo += " spacefill off; wireframe off; backbone on; cartoon on;" ;
47
+ } else if ( initDisplay == "Backbone" ) {
48
+ setUpInfo += " spacefill off; wireframe off; backbone 0.4; cartoon off;" ;
49
+ }
50
+
51
+
52
+ // model colours
53
+ var initColour = str . split ( ',' ) [ 7 ] . split ( 'initColour=' ) [ 1 ] ;
54
+ if ( initColour == "Element" ) {
55
+ setUpInfo += " color cpk;" ;
56
+ } else if ( initColour == "Amino Acid" ) {
57
+ setUpInfo += " color amino;" ;
58
+ } else if ( initColour == "Chain" ) {
59
+ setUpInfo += " color chain;" ;
60
+ } else if ( initColour == "Secondary Structure" ) {
61
+ setUpInfo += " color structure;" ;
62
+ } else { // default or not set
63
+ if ( initDisplay == "Cartoon" ) {
64
+ setUpInfo += " color cartoon structure;" ;
65
+ } else if ( initDisplay == "Backbone" ) {
66
+ setUpInfo += " color structure;" ;
67
+ } else {
68
+ setUpInfo += " color cpk;" ;
69
+ }
70
+ }
71
+ var colourOpt = str . split ( ',' ) [ 12 ] . split ( 'colourOpt=' ) [ 1 ] ;
72
+
73
+
74
+ // labels
75
+ var labelOpt = str . split ( ',' ) [ 11 ] . split ( 'labelOpt=' ) [ 1 ] ;
76
+
77
+
78
+ // surface
79
+ var surfaceOpt = str . split ( ',' ) [ 10 ] . split ( 'surfaceOpt=' ) [ 1 ] ;
80
+
81
+
82
+ setUpInfo += " set antialiasDisplay true;" ;
83
+
84
+
85
+ // bespoke script stuff
86
+ var initScript = str . split ( ',' ) [ 8 ] . split ( 'initScript=' ) [ 1 ] ;
87
+ if ( initScript != "undefined" && initScript != "" && initScript != "null" ) {
88
+ setUpInfo += initScript ;
89
+ }
90
+ var scriptOpt = str . split ( ',' ) [ 9 ] . split ( 'scriptOpt=' ) [ 1 ] ;
91
+
92
+
93
+ // Jmol window size
94
+ var windowW = Number ( str . split ( ',' ) [ 13 ] . split ( 'width=' ) [ 1 ] ) - 2 ;
95
+ var windowH = Number ( str . split ( ',' ) [ 14 ] . split ( 'height=' ) [ 1 ] ) - 2 ;
96
+ var modelW = windowW - 4 ;
97
+ var modelH = windowH - 4 ;
98
+
99
+
100
+ function setValues ( ) {
101
+ document . getElementById ( "spinCheck" ) . checked = spin ;
102
+ var comboArray = new Array ( "displayCombo" , "colourCombo" , "labelCombo" , "surfaceCombo" ) ;
103
+ var valueArray = new Array ( initDisplay , initColour , "None" , "None" ) ;
104
+ for ( i = 0 ; i < comboArray . length ; i ++ ) {
105
+ var combo = document . getElementById ( comboArray [ i ] ) ;
106
+ if ( combo ) {
107
+ for ( j = 0 ; j < combo . options . length ; j ++ ) {
108
+ if ( combo . options [ j ] . text == valueArray [ i ] ) {
109
+ combo . selectedIndex = j ;
110
+ break ;
111
+ }
112
+ }
113
+ }
114
+ }
115
+ }
116
+
117
+ function displayChg ( ) {
118
+ var selected = document . getElementById ( "displayCombo" ) . options [ document . getElementById ( "displayCombo" ) . selectedIndex ] . text ;
119
+ if ( selected == "CPK" ) {
120
+ jmolScript ( "spacefill on; wireframe off; backbone on; cartoon off" ) ;
121
+ } else if ( selected == "Ball and Stick" ) {
122
+ jmolScript ( "spacefill 25%; wireframe 35%; backbone on; cartoon off" ) ;
123
+ } else if ( selected == "Sticks" ) {
124
+ jmolScript ( "spacefill off; wireframe 20%; backbone on; cartoon off" ) ;
125
+ } else if ( selected == "Wireframe" ) {
126
+ jmolScript ( "spacefill off; wireframe on; backbone on; cartoon off" ) ;
127
+ } else if ( selected == "Backbone" ) {
128
+ jmolScript ( "spacefill off; wireframe off; backbone 0.4; cartoon off" ) ;
129
+ } else if ( selected == "Cartoon" ) {
130
+ jmolScript ( "spacefill off; wireframe off; backbone on; cartoon on" ) ;
131
+ }
132
+ currentDisplay = selected ;
133
+ colourChg ( ) ;
134
+ }
135
+
136
+ function colourChg ( ) {
137
+ var selected ;
138
+ if ( document . getElementById ( "colourCombo" ) == null ) {
139
+ selected = initColour ;
140
+ } else {
141
+ selected = document . getElementById ( "colourCombo" ) . options [ document . getElementById ( "colourCombo" ) . selectedIndex ] . text ;
142
+ }
143
+ if ( selected == "Element" ) {
144
+ jmolScript ( "color cpk" ) ;
145
+ } else if ( selected == "Amino Acid" ) {
146
+ jmolScript ( "color amino" ) ;
147
+ } else if ( selected == "Chain" ) {
148
+ jmolScript ( "color chain" ) ;
149
+ } else if ( selected == "Secondary Structure" ) {
150
+ jmolScript ( "color structure" ) ;
151
+ } else { // default
152
+ if ( currentDisplay == "Cartoon" ) {
153
+ jmolScript ( "color cartoon structure" ) ;
154
+ } else if ( currentDisplay == "Backbone" ) {
155
+ jmolScript ( "color structure" ) ;
156
+ } else {
157
+ jmolScript ( "color cpk" ) ;
158
+ }
159
+ }
160
+ }
161
+
162
+ function labelChg ( ) {
163
+ var selected = document . getElementById ( "labelCombo" ) . options [ document . getElementById ( "labelCombo" ) . selectedIndex ] . text ;
164
+ if ( selected == "None" ) {
165
+ jmolScript ( "label off" ) ;
166
+ } else if ( selected == "Element symbol" ) {
167
+ jmolScript ( "label %e" ) ;
168
+ } else if ( selected == "Atom name" ) {
169
+ jmolScript ( "label %a" ) ;
170
+ } else if ( selected == "Charged" ) {
171
+ jmolScript ( "select carbon; label 'carbon'" ) ;
172
+ }
173
+ }
174
+
175
+ function surfaceChg ( ) {
176
+ var selected = document . getElementById ( "surfaceCombo" ) . options [ document . getElementById ( "surfaceCombo" ) . selectedIndex ] . text ;
177
+ if ( selected == "Solvent accessible" ) {
178
+ jmolScript ( "isosurface sasurface" ) ;
179
+ } else if ( selected == "Solvent excluded" ) {
180
+ jmolScript ( "isosurface solvent" ) ;
181
+ } else if ( selected == "Cavities" ) {
182
+ jmolScript ( "isosurface cavity" ) ;
183
+ } else { // none
184
+ jmolScript ( "isosurface off" ) ;
185
+ }
186
+ }
187
+
188
+ function scriptChg ( ) {
189
+ var textArea = document . getElementById ( "scriptInput" ) ;
190
+ if ( textArea . value != "" ) {
191
+ jmolScript ( textArea . value ) ;
192
+ }
193
+ }
194
+
195
+ function spinChg ( ) {
196
+ var checkbox = document . getElementById ( "spinCheck" ) ;
197
+ if ( checkbox . checked == true ) {
198
+ jmolScript ( "spin on" ) ;
199
+ } else {
200
+ jmolScript ( "spin off" ) ;
201
+ }
202
+ }
203
+
204
+ function resetBtn ( ) {
205
+ jmolScript ( setUpInfo ) ;
206
+ if ( scriptOpt == "true" ) {
207
+ document . getElementById ( "scriptInput" ) . value = "" ;
208
+ }
209
+
210
+ if ( controls == "true" ) {
211
+ setValues ( ) ;
212
+ }
213
+ }
214
+
215
+ function resize ( newW , newH ) {
216
+ windowW = newW - 2 ;
217
+ windowH = newH - 2 ;
218
+ modelW = windowW - 4 ;
219
+ if ( document . getElementById ( "controlBar" ) != null ) {
220
+ modelH = windowH - document . getElementById ( "controlBar" ) . offsetHeight - 4 ;
221
+ } else {
222
+ modelH = windowH - 4 ;
223
+ }
224
+ jmolResizeApplet ( [ modelW , modelH ] ) ;
225
+ document . getElementById ( "holder" ) . style . cssText = 'width: ' + windowW + 'px; height: ' + ( windowH - 11 ) + 'px;' ;
226
+ }
227
+
228
+ function init ( ) {
229
+ document . getElementById ( "holder" ) . style . cssText = 'width: ' + windowW + 'px; height: ' + ( windowH - 11 ) + 'px;' ;
230
+
231
+ // remove control bar elements not needed
232
+ var remove = new Array ( ) ;
233
+ if ( controls != "true" && scriptOpt != "true" ) {
234
+ remove . push ( "controlBar" ) ;
235
+ } else if ( controls != "true" && scriptOpt == "true" ) {
236
+ remove . push ( "normalControls" ) ;
237
+ } else if ( controls == "true" && scriptOpt != "true" ) {
238
+ remove . push ( "scriptHolder" ) ;
239
+ }
240
+ if ( controls == "true" ) {
241
+ if ( colourOpt != "true" ) {
242
+ remove . push ( "colourHolder" ) ;
243
+ }
244
+ if ( surfaceOpt != "true" ) {
245
+ remove . push ( "surfaceHolder" ) ;
246
+ }
247
+ if ( labelOpt != "true" ) {
248
+ remove . push ( "labelHolder" ) ;
249
+ }
250
+ if ( str . split ( ',' ) [ 6 ] . split ( 'backOpt=' ) [ 1 ] == "false" ) {
251
+ remove . push ( "backbone" ) ;
252
+ }
253
+ if ( str . split ( ',' ) [ 5 ] . split ( 'cartoonOpt=' ) [ 1 ] == "false" ) {
254
+ remove . push ( "cartoon" ) ;
255
+ }
256
+ }
257
+
258
+ for ( i = 0 ; i < remove . length ; i ++ ) {
259
+ var tag = document . getElementById ( remove [ i ] ) ;
260
+ tag . parentNode . removeChild ( tag ) ;
261
+ }
262
+
263
+ // set init values
264
+ if ( controls == "true" ) {
265
+ setValues ( ) ;
266
+ }
267
+
268
+ // resize so no scrolling
269
+ if ( controls == "true" || scriptOpt == "true" || controls == true ) {
270
+ modelH = windowH - document . getElementById ( "controlBar" ) . offsetHeight - 4 ;
271
+ jmolResizeApplet ( [ modelW , modelH ] ) ;
272
+ }
273
+ }
274
+
275
+ </ script >
276
+
277
+ < style type ="text/css ">
278
+ <!- -
279
+ select, butto n, input {
280
+ font- size: 11px;
281
+ }
282
+
283
+ .model {
284
+ border : solid 2px white;
285
+ background-color : white;
286
+ text-align : center;
287
+ }
288
+
289
+ .controlBar {
290
+ border : solid 2px white;
291
+ background-color : # E6E6E6 ;
292
+ padding-top : 10px ;
293
+ padding-bottom : 5px ;
294
+ }
295
+
296
+ .block {
297
+ display : inline-block;
298
+ padding-left : 10px ;
299
+ padding-bottom : 5px ;
300
+ }
301
+ - - >
302
+ </ style >
303
+
304
+ </ head >
305
+
306
+ < body style ="margin:0; width:100%; height:100%; min-height:100%; background-color:#D6E0EC; font-family:Verdana, sans-serif; font-size:11px; overflow:hidden " onload ="init(); ">
307
+
308
+ < div name ="holder " id ="holder ">
309
+
310
+ < div class ="model ">
311
+ < script type ="text/javascript ">
312
+ jmolInitialize ( "jmol" ) ;
313
+ jmolSetAppletColor ( bgColour ) ;
314
+ jmolApplet ( [ modelW , modelH ] , setUpInfo ) ;
315
+ </ script >
316
+ </ div >
317
+
318
+ < div class ="controlBar " id ="controlBar ">
319
+
320
+ < span id ="normalControls ">
321
+
322
+ < label id ="displayHolder " class ="block "> Display: < select name ="displayCombo " id ="displayCombo " onchange ="displayChg(); ">
323
+ < option > CPK</ option >
324
+ < option > Ball and Stick</ option >
325
+ < option > Sticks</ option >
326
+ < option > Wireframe</ option >
327
+ < option id ="backbone "> Backbone</ option >
328
+ < option id ="cartoon "> Cartoon</ option >
329
+ </ select > </ label >
330
+
331
+ < label id ="colourHolder " class ="block "> Colour: < select name ="colourCombo " id ="colourCombo " onchange ="colourChg(); ">
332
+ < option > Default</ option >
333
+ < option > Element</ option >
334
+ < option > Amino Acid</ option >
335
+ < option > Chain</ option >
336
+ < option > Secondary Structure</ option >
337
+ </ select > </ label >
338
+
339
+ < label id ="surfaceHolder " class ="block "> Surface: < select name ="surfaceCombo " id ="surfaceCombo " onchange ="surfaceChg(); ">
340
+ < option selected ="selected "> None</ option >
341
+ < option > Solvent accessible</ option >
342
+ < option > Solvent excluded</ option >
343
+ < option > Cavities</ option >
344
+ </ select > </ label >
345
+
346
+ < label id ="labelHolder " class ="block "> Labels: < select name ="labelCombo " id ="labelCombo " onchange ="labelChg(); ">
347
+ < option selected ="selected "> None</ option >
348
+ < option > Element symbol</ option >
349
+ < option > Atom name</ option >
350
+ < option > Charged</ option >
351
+ </ select > </ label >
352
+
353
+ < label id ="spinHolder " class ="block "> Spin: < input type ="checkbox " name ="spinCheck " id ="spinCheck " onclick ="spinChg(); " checked ="false " /> </ label >
354
+
355
+ </ span >
356
+
357
+ < label id ="scriptHolder " class ="block "> < input type ="text " name ="scriptInput " id ="scriptInput " /> < button onclick ="scriptChg(); "> Apply script</ button > </ label >
358
+
359
+ < span class ="block ">
360
+ < button onclick ="resetBtn(); "> Reset</ button >
361
+ </ span >
362
+
363
+ </ div >
364
+
365
+ </ div >
366
+
367
+ </ body >
0 commit comments