|
1 | 1 | <!DOCTYPE html> |
2 | 2 | <html> |
3 | 3 | <head> |
4 | | - <meta charset='utf-8'> |
5 | | - <title>{{structureId}} CE-Symm Analysis</title> |
| 4 | + <meta charset='utf-8'> |
| 5 | + <title>{{structureId}} CE-Symm Analysis</title> |
6 | 6 | </head> |
7 | 7 | <body> |
8 | 8 |
|
|
14 | 14 |
|
15 | 15 | <script src="https://cdn.rawgit.com/google/palette.js/master/palette.js"></script> |
16 | 16 | <!--script src="{{pallete_url}}"></script--> |
17 | | - |
| 17 | +<script src="/js/ngl_ui.js"></script> |
18 | 18 | <script> |
19 | | -
|
20 | | -document.onkeypress = function (e) { |
21 | | - e = e || window.event; |
22 | | -
|
23 | | - if (e !== undefined && e.which == 115) { // 115 is s |
24 | | - console.log("s was pressed: small screenshot (1x)"); |
25 | | - screenshot(1); |
26 | | - } |
27 | | -
|
28 | | - if (e !== undefined && e.which == 109) { // 109 is m |
29 | | - console.log("m was pressed: medium screenshot (2x)"); |
30 | | - screenshot(2); |
31 | | - } |
32 | | -
|
33 | | - if (e !== undefined && e.which == 108) { // 108 is l |
34 | | - console.log("l was pressed: large screenshot (3x)"); |
35 | | - screenshot(3); |
36 | | - } |
37 | | -
|
38 | | - if (e !== undefined && e.which == 120) { // 120 is x |
39 | | - console.log("x was pressed: xtra large screenshot (4x)"); |
40 | | - screenshot(4); |
41 | | - } |
42 | | -
|
43 | | -}; |
44 | | -
|
45 | | -/** |
46 | | - * A function to trigger a png transparent screenshot with given factor |
47 | | - * @param factor the number of times the current canvas size will be multiplied by |
48 | | - */ |
49 | | -function screenshot(factor) { |
50 | | - if (stage!==undefined) { |
51 | | - stage.makeImage({factor: factor, antialias: true, trim: false, transparent: true}).then(function(blob) { NGL.download(blob) } ) |
52 | | - } |
53 | | -} |
54 | | -
|
55 | 19 | NGL.mainScriptFilePath = "{{url}}"; |
56 | 20 | var stage; |
| 21 | +document.onkeypress = function(e) { default_keypress(stage,e); }; |
57 | 22 |
|
58 | 23 | document.addEventListener( "DOMContentLoaded", function() { |
59 | | - $.getJSON("{{jsonUrl}}", function(data) { |
60 | | - stage = new NGL.Stage( "viewport" ); |
61 | | - stage.setParameters({ backgroundColor:"white" } ); |
| 24 | + $.get("{{tsvUrl}}", function(tsv) { |
| 25 | + stage = new NGL.Stage( "viewport" ); |
| 26 | + stage.setParameters({ backgroundColor:"white" } ); |
62 | 27 |
|
| 28 | + // Parse TSV file |
63 | 29 | // This can be cleaner |
64 | | - raw_lines = data.multipleAlignment.split("\n"); |
| 30 | + raw_lines = tsv.split("\n"); |
65 | 31 | var lines = [] |
66 | 32 | for (k = 0; k < raw_lines.length; k++) { |
67 | 33 | if (!raw_lines[k].startsWith("#") && raw_lines[k].length > 0) { |
68 | 34 | lines.push(raw_lines[k]) |
69 | 35 | } |
70 | 36 | } |
71 | 37 |
|
72 | | - // Get number of structures from first line |
73 | | - var n_strucs = (lines[0].split("\t").length - 1) / 3; |
74 | | -
|
75 | | - // Generate color palette |
76 | | - var colors = palette('cb-Dark2', n_strucs); |
77 | | -
|
78 | | - stage.loadFile( "/pdb/{{structureId}}", { defaultRepresentation: false, ext:"pdb" } ).then( function( o ){ |
79 | | - o.addRepresentation( "backbone", { color: "lightgrey" } ); |
80 | | - for (i = 0; i < lines.length; i++) { |
81 | | - var tabs = lines[i].split("\t"); |
82 | | - for (j = 0; j < n_strucs; j++) { |
83 | | - if (tabs[3*j] != "-") { |
84 | | - o.addRepresentation( "backbone", { |
85 | | - sele: "(" + tabs[3*j] + " or " + (parseInt(tabs[3*j])+1) + ") and :" + tabs[3*j+1], |
86 | | - color: "#" + colors[j] |
87 | | - }); |
88 | | - o.addRepresentation( "ball+stick", { |
89 | | - sele: "hetero and not ( water )" |
90 | | - }); |
91 | | - } |
92 | | - } |
93 | | - } |
94 | | - o.centerView(); |
95 | | - } ); |
| 38 | + // Get number of structures from first line |
| 39 | + var n_strucs = (lines[0].split("\t").length - 1) / 3; |
| 40 | +
|
| 41 | + // Generate color palette |
| 42 | + var colors = palette('cb-Dark2', n_strucs); |
| 43 | +
|
| 44 | + stage.loadFile( "/pdb/{{structureId}}", { defaultRepresentation: false, ext:"pdb" } ).then( function( o ){ |
| 45 | + o.addRepresentation( "backbone", { color: "lightgrey" } ); |
| 46 | + for (i = 0; i < lines.length; i++) { |
| 47 | + var tabs = lines[i].split("\t"); |
| 48 | + for (j = 0; j < n_strucs; j++) { |
| 49 | + if (tabs[3*j] != "-") { |
| 50 | + o.addRepresentation( "backbone", { |
| 51 | + sele: "(" + tabs[3*j] + " or " + (parseInt(tabs[3*j])+1) + ") and :" + tabs[3*j+1], |
| 52 | + color: "#" + colors[j] |
| 53 | + }); |
| 54 | + } |
| 55 | + } |
| 56 | + } |
| 57 | + o.addRepresentation( "ball+stick", { |
| 58 | + sele: "hetero and not ( water )" |
| 59 | + }); |
| 60 | + o.centerView(); |
| 61 | + } ); |
96 | 62 | }); |
97 | 63 | } ); |
98 | 64 |
|
99 | 65 | </script> |
100 | 66 |
|
101 | | -<div id="viewport" style="width:500px; height:500px;"></div> |
| 67 | +<div id="viewport" style="width: 100vw; height: 100vh; display:block;"></div> |
102 | 68 |
|
103 | 69 | </body> |
104 | 70 | </html> |
0 commit comments