forked from 3dmol/3Dmol.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
viewer.html
112 lines (99 loc) · 3.93 KB
/
viewer.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
<!DOCTYPE html>
<html>
<head>
<title>3Dmol.js Viewer</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<script src="build/3Dmol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://fastcdn.org/FileSaver.js/1.1.20151003/FileSaver.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="viewer.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="viewer.js"></script>
<script src="learning-environment/sessions.js"></script>
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o), m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js',
'ga');
ga('create', 'UA-55629183-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<span id="menu" onclick="toggleHide();">☰</span>
<div id="sessionbutton"><img src="learning-environment/share.png" width=32></div>
<div id="sessionconnect" class="rightdialog">
<div>
<button id="sessionconnectbutton" disabled>Create</button> Session: <input type=text size=10 id="session_name_input">
<span id="sessionconnectclose" class="close">×</span>
</div>
</div>
<div id="sessioncontrol" class="rightdialog">
<div class="sessionname">Session</div>
<div>
<button id="askbutton">Query Atoms</button>
<div id="sessioncontrolinfo">
<div id = "userinfo" class="infotext">Users: 0</div>
<div style="display:inline-block"><span id = "responseinfo" class="infotext"></span><span id="refreshresults">↻</span></div>
</div>
<span id="sessiondestroy" class="close">×</span>
</div>
</div>
<div id="sessionmonitor" class="rightdialog">
<div class="sessionname">Session</div>
<div>
<span id = "sessionmonitorinfo"></span>
<span id="sessionleave" class="close">×</span>
</div>
</div>
<div id="selectmessage">Select atom(s)</div>
<div id="sidenav" class="ui-widget-content">
<div class="header">
<div class="heading">
<span>3Dmol Viewer</span>
<a href="javascript:void(0)" class="closebtn" onclick="toggleHide()">✕</a>
</div>
</div>
<div class="center">
<ul id="list">
<li class="option" style="pointer-events:auto;">
<h3>File/PDB/URL</h3>
<div class="container">
<label>Model Type: </label>
<select id="model_type">
<option value="pdb">PDB</option>
<option value="url">URL</option>
<option value="cid">CID</option>
</select>
<br>
<span><label>Query: </label><input id="model_input"></input></span>
</div>
<br>
</li>
<li id="selections" class="option" style="pointer-events:auto">
<h3>Selections</h3>
<div id="container">
<ul id="selection_list">
</ul>
</div>
</li>
</ul>
</div>
<div class="footer">
<button id="addStyle" onclick="addSelection('style')">Add Style</button><button id="addSurface" onclick="addSelection('surface')">Add Surface</button><button id="addLabelRes" onclick="addSelection('labelres')">Add LabelRes</button>
<button id="savePng" onclick="savePng();">Save PNG</button><button onclick="center();" id="centerModel">Center</button><button onclick="vrml();" id="vrmlExport">VRML</button>
</div>
</div>
<div id='gldiv' style="width: 100%; height: 100vh;"></div>
</body>
</html>