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
|
<html>
<head>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Expires" content="-1" />
<title>Web Services - Sample 03: Sending Multiple Requests - IFRAME plus JavaScript</title>
<style><!--
a{text-decoration:none;
padding: 1px;
background-color: #dddddd}
--></style>
<script type="text/javascript">
// queue used for sending multiple requests to PyMOL (in order)
var pymol_queue = []
// semaphore for restarting the queue flush cycle
var pymol_active = false;
// method for flushing the queue
function pymol_queue_flush() {
if (pymol_queue.length>0) {
document.getElementById("pymol_response_iframe").src = pymol_queue.shift();
pymol_active = true;
} else {
pymol_active = false;
}
}
// convenience function for populating the queue
function cmd() {
for(var i=0; i < arguments.length; i++) {
pymol_queue.push( "/apply/pymol.cmd."+ arguments[i] +
( arguments[i].indexOf('?') < 0 ? '?' : '&' ) +
"_ts=" + new Date().getTime());
}
if(!pymol_active) {
pymol_queue_flush();
}
}
// for toggling display of output in the IFRAME
function toggle() {
var iframe = document.getElementById("pymol_response_iframe");
if (iframe.width!=0) {
iframe.width=0; iframe.height=0;
} else {
iframe.width="100%"; iframe.height=100;
}
}
</script>
</head>
<body>
<h3>Web Services - Sample 03: Using an IFRAME with JavaScript</h3>
<a href="javascript:void(0)" onclick="toggle()">toggle iframe</a>
<a href="/apply/_quit">quit pymol</a>
(FireFox only: <a href="javascript:void(0)" onclick="window.open('view-source:' + location.href)">view page source</a>)
<p>In order to make it possible to issue multiple PyMOL command from a
single JavaScript event, we create a queue and use the IFRAME's onload
method to iteratively request every URL placed on the queue.</p>
<pre>var pymol_queue = [];
var pymol_active = false;
function pymol_queue_flush() {
if (pymol_queue.length>0) {
document.getElementById("pymol_response_iframe").src = pymol_queue.shift();
pymol_active = true;
} else {
pymol_active = false;
}
}</pre>
<p>We then modify the Javascript "cmd" function to accept a list of
query suffixes, each of which is converted to a unique URL and placed
on the queue.</p>
<pre>function cmd() {
for(var i=0; i < arguments.length; i++) {
pymol_queue.push( "/apply/pymol.cmd."+ arguments[i] +
( arguments[i].indexOf('?') < 0 ? '?' : '&' ) +
"_ts=" + new Date().getTime());
}
if(!pymol_active) {
pymol_queue_flush();
}
}</pre>
<p>This approach is probably the simplest practical way to call
multiple PyMOL methods from a web page without doing JavaScript
development or relying upon XMLHttpRequest (AJAX). The downside is
that you need to manually encode your requests as URL query strings
with keyword arguments and (where necessary) URL escaping.</p>
<pre><a href="javascript:void(0)" onclick="cmd('set?name=suspend_updates','delete?name=all','reset','load?filename=$PYMOL_PATH/test/dat/1tii.pdb','show?representation=cartoon','show_as?representation=sticks&selection=chain A','orient?selection=chain A&animate=5','unset?name=suspend_updates')">cmd('set?name=suspend_updates',
'delete?name=all',
'reset',
'load?filename=$PYMOL_PATH/test/dat/1tii.pdb',
'show?representation=cartoon',
'show_as?representation=sticks&selection=chain A',
'orient?selection=chain A&animate=5',
'unset?name=suspend_updates')</a>
<a href="javascript:void(0)" onclick="cmd('count_atoms')">cmd('count_atoms')</a>
<a href="javascript:void(0)" onclick="cmd('reinitialize')">cmd('reinitialize')</a>
</pre>
<!-- IFRAME for holding the response.
-- Note use of "onload" to flush the queue -->
<iframe id="pymol_response_iframe"
src="/apply"
width="100%" height="100" frameborder="0"
marginheight="0" marginwidth="0"
scrolling="auto"
onload="pymol_queue_flush()"></iframe>
</body>
</html>
|
