-
Notifications
You must be signed in to change notification settings - Fork 170
/
annotations.html
57 lines (54 loc) · 1.74 KB
/
annotations.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>NGL - test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<script src="../build/js/ngl.dev.js"></script>
<script>
// Datasources
NGL.DatasourceRegistry.add("data", new NGL.StaticDatasource("../data/"))
var stage;
document.addEventListener("DOMContentLoaded", function () {
stage = new NGL.Stage('viewport')
// Handle window resizing
window.addEventListener( "resize", function( event ){
stage.handleResize();
}, false );
stage.loadFile("data://3SN6.cif").then(function (o) {
o.addRepresentation("cartoon", { color: "chainid" })
var chainText = {
'A': 'alpha subunit',
'B': 'beta subunit',
'G': 'gamma subunit',
'R': 'beta 2 adrenergic receptor',
'N': 'nanobody'
}
var ap = o.structure.getAtomProxy()
o.structure.eachChain(function (cp) {
ap.index = cp.atomOffset + Math.floor(cp.atomCount / 2)
o.addAnnotation(ap.positionToVector3(), chainText[ cp.chainname ])
}, new NGL.Selection('polymer'))
o.autoView()
var pa = o.structure.getPrincipalAxes()
var q = pa.getRotationQuaternion()
q.multiply(o.quaternion.clone().inverse())
stage.animationControls.rotate(q, 0)
stage.animationControls.move(o.getCenter(), 0)
})
})
</script>
<div id="viewport" style="width:30%; height:400px; margin: 0 auto;"></div>
</body>
</html>