|
|
<!doctype html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="utf-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
|
<title>FRACTAL: example_2.pdb</title> |
|
|
<style> |
|
|
html, body { height: 100%; margin: 0; font-family: monospace; } |
|
|
#viewport { width: 100%; height: calc(100% - 60px); } |
|
|
#info { |
|
|
position: fixed; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 60px; |
|
|
background: rgba(0,0,0,0.85); |
|
|
color: #0f0; |
|
|
padding: 12px 20px; |
|
|
box-sizing: border-box; |
|
|
font-size: 14px; |
|
|
line-height: 1.5; |
|
|
overflow: auto; |
|
|
} |
|
|
#info span { color: #0ff; font-weight: bold; } |
|
|
</style> |
|
|
<script src="https://unpkg.com/ngl@latest/dist/ngl.js"></script> |
|
|
</head> |
|
|
<body> |
|
|
<div id="viewport"></div> |
|
|
<div id="info">Click on atoms to see details...</div> |
|
|
<script> |
|
|
const pdbText = "ATOM 1 N ALA A 1 0.000 0.000 0.000 1.00 0.00 N\nATOM 2 CA ALA A 1 1.458 0.000 0.000 1.00 0.00 C\nATOM 3 C ALA A 1 1.990 1.429 0.000 1.00 0.00 C\nATOM 4 O ALA A 1 3.198 1.651 0.000 1.00 0.00 O\nATOM 5 N ALA A 2 3.308 1.565 -0.094 1.00 0.00 N\nATOM 6 CA ALA A 2 4.192 0.410 -0.191 1.00 0.00 C\nATOM 7 C ALA A 2 4.206 -0.362 1.124 1.00 0.00 C\nATOM 8 O ALA A 2 4.891 -1.374 1.253 1.00 0.00 O\nATOM 9 N ALA A 3 3.067 -0.373 1.809 1.00 0.00 N\nATOM 10 CA ALA A 3 1.875 0.314 1.326 1.00 0.00 C\nATOM 11 C ALA A 3 1.892 1.776 1.761 1.00 0.00 C\nATOM 12 O ALA A 3 0.974 2.534 1.456 1.00 0.00 O\nATOM 13 N ALA A 4 3.073 2.385 1.726 1.00 0.00 N\nATOM 14 CA ALA A 4 4.281 1.691 1.295 1.00 0.00 C\nATOM 15 C ALA A 4 5.045 1.156 2.501 1.00 0.00 C\nATOM 16 O ALA A 4 6.097 0.537 2.356 1.00 0.00 O\nATOM 17 N ALA A 5 5.897 1.999 3.077 1.00 0.00 N\nATOM 18 CA ALA A 5 6.085 3.357 2.579 1.00 0.00 C\nATOM 19 C ALA A 5 7.561 3.739 2.625 1.00 0.00 C\nATOM 20 O ALA A 5 7.935 4.847 2.248 1.00 0.00 O\nATOM 21 N ALA A 6 7.917 4.591 3.581 1.00 0.00 N\nATOM 22 CA ALA A 6 6.947 5.126 4.530 1.00 0.00 C\nATOM 23 C ALA A 6 7.231 6.599 4.805 1.00 0.00 C\nATOM 24 O ALA A 6 6.526 7.241 5.581 1.00 0.00 O\nATOM 25 N ALA A 7 6.959 7.029 6.033 1.00 0.00 N\nATOM 26 CA ALA A 7 6.420 6.140 7.055 1.00 0.00 C\nATOM 27 C ALA A 7 5.349 6.855 7.871 1.00 0.00 C\nATOM 28 O ALA A 7 4.766 6.279 8.787 1.00 0.00 O\nATOM 29 N ALA A 8 5.227 6.477 9.139 1.00 0.00 N\nATOM 30 CA ALA A 8 6.073 5.437 9.713 1.00 0.00 C\nATOM 31 C ALA A 8 5.234 4.223 10.099 1.00 0.00 C\nATOM 32 O ALA A 8 5.757 3.231 10.602 1.00 0.00 O\nATOM 33 N ALA A 9 5.631 3.555 11.178 1.00 0.00 N\nATOM 34 CA ALA A 9 6.801 3.964 11.945 1.00 0.00 C\nATOM 35 C ALA A 9 7.932 2.956 11.766 1.00 0.00 C\nATOM 36 O ALA A 9 9.012 3.116 12.331 1.00 0.00 O\nATOM 37 N ALA A 10 8.470 2.474 12.882 1.00 0.00 N\nATOM 38 CA ALA A 10 8.002 2.888 14.199 1.00 0.00 C\nATOM 39 C ALA A 10 9.148 3.489 15.006 1.00 0.00 C\nATOM 40 O ALA A 10 8.965 3.902 16.149 1.00 0.00 O\nATOM 41 N ALA A 11 9.351 2.971 16.213 1.00 0.00 N\nATOM 42 CA ALA A 11 8.521 1.890 16.732 1.00 0.00 C\nATOM 43 C ALA A 11 8.025 2.226 18.134 1.00 0.00 C\nATOM 44 O ALA A 11 7.307 1.443 18.753 1.00 0.00 O\nATOM 45 N ALA A 12 7.911 1.205 18.977 1.00 0.00 N\nATOM 46 CA ALA A 12 8.242 -0.158 18.578 1.00 0.00 C\nATOM 47 C ALA A 12 6.987 -1.025 18.558 1.00 0.00 C\nATOM 48 O ALA A 12 7.048 -2.213 18.247 1.00 0.00 O\nATOM 49 N ALA A 13 7.159 -2.312 18.845 1.00 0.00 N\nATOM 50 CA ALA A 13 8.473 -2.858 19.160 1.00 0.00 C\nATOM 51 C ALA A 13 9.138 -3.405 17.901 1.00 0.00 C\nATOM 52 O ALA A 13 10.256 -3.911 17.949 1.00 0.00 O\nATOM 53 N ALA A 14 9.691 -4.608 18.005 1.00 0.00 N\nATOM 54 CA ALA A 14 9.663 -5.359 19.254 1.00 0.00 C\nATOM 55 C ALA A 14 11.051 -5.900 19.581 1.00 0.00 C\nATOM 56 O ALA A 14 11.244 -6.564 20.597 1.00 0.00 O\nATOM 57 N ALA A 15 11.116 -7.186 19.912 1.00 0.00 N\nATOM 58 CA ALA A 15 9.926 -8.027 19.959 1.00 0.00 C\nATOM 59 C ALA A 15 9.991 -8.974 21.152 1.00 0.00 C\nATOM 60 O ALA A 15 9.082 -9.771 21.373 1.00 0.00 O\nATOM 61 N ALA A 16 9.266 -10.084 21.060 1.00 0.00 N\nATOM 62 CA ALA A 16 8.455 -10.374 19.884 1.00 0.00 C\nATOM 63 C ALA A 16 6.986 -10.511 20.271 1.00 0.00 C\nATOM 64 O ALA A 16 6.132 -10.756 19.422 1.00 0.00 O\nATOM 65 N ALA A 17 6.201 -11.120 19.388 1.00 0.00 N\nATOM 66 CA ALA A 17 6.719 -11.625 18.123 1.00 0.00 C\nATOM 67 C ALA A 17 6.676 -10.535 17.057 1.00 0.00 C\nATOM 68 O ALA A 17 7.069 -10.757 15.914 1.00 0.00 O\nATOM 69 N ALA A 18 6.427 -10.938 15.815 1.00 0.00 N\nATOM 70 CA ALA A 18 6.208 -12.343 15.495 1.00 0.00 C\nATOM 71 C ALA A 18 7.270 -12.838 14.518 1.00 0.00 C\nATOM 72 O ALA A 18 7.265 -14.000 14.119 1.00 0.00 O\nATOM 73 N ALA A 19 6.904 -13.820 13.701 1.00 0.00 N\nATOM 74 CA ALA A 19 5.562 -14.390 13.741 1.00 0.00 C\nATOM 75 C ALA A 19 5.601 -15.801 14.317 1.00 0.00 C\nATOM 76 O ALA A 19 4.571 -16.460 14.438 1.00 0.00 O\nATOM 77 N ALA A 20 4.544 -16.567 14.065 1.00 0.00 N\nATOM 78 CA ALA A 20 3.415 -16.081 13.281 1.00 0.00 C\nATOM 79 C ALA A 20 2.530 -15.174 14.130 1.00 0.00 C\nATOM 80 O ALA A 20 1.520 -14.658 13.656 1.00 0.00 O\nATOM 81 N ALA A 21 2.213 -13.998 13.598 1.00 0.00 N\nATOM 82 CA ALA A 21 2.688 -13.602 12.278 1.00 0.00 C\nATOM 83 C ALA A 21 3.735 -12.500 12.398 1.00 0.00 C\nATOM 84 O ALA A 21 4.264 -12.023 11.396 1.00 0.00 O\nATOM 85 N ALA A 22 3.463 -11.361 11.769 1.00 0.00 N\nATOM 86 CA ALA A 22 2.232 -11.180 11.010 1.00 0.00 C\nATOM 87 C ALA A 22 2.504 -10.382 9.739 1.00 0.00 C\nATOM 88 O ALA A 22 1.595 -10.118 8.955 1.00 0.00 O\nATOM 89 N ALA A 23 1.718 -9.331 9.527 1.00 0.00 N\nATOM 90 CA ALA A 23 0.658 -8.967 10.459 1.00 0.00 C\nATOM 91 C ALA A 23 -0.591 -8.531 9.700 1.00 0.00 C\nATOM 92 O ALA A 23 -1.604 -8.182 10.302 1.00 0.00 O\nATOM 93 N ALA A 24 -1.394 -7.680 10.330 1.00 0.00 N\nATOM 94 CA ALA A 24 -1.094 -7.195 11.672 1.00 0.00 C\nATOM 95 C ALA A 24 -2.296 -7.391 12.589 1.00 0.00 C\nATOM 96 O ALA A 24 -2.251 -7.046 13.768 1.00 0.00 O\nATOM 97 N ALA A 25 -2.573 -6.389 13.417 1.00 0.00 N\nATOM 98 CA ALA A 25 -1.769 -5.172 13.443 1.00 0.00 C\nATOM 99 C ALA A 25 -0.719 -5.252 14.546 1.00 0.00 C\nATOM 100 O ALA A 25 0.065 -4.325 14.737 1.00 0.00 O\nATOM 101 N ALA A 26 -0.216 -4.095 14.963 1.00 0.00 N\nATOM 102 CA ALA A 26 -0.647 -2.823 14.394 1.00 0.00 C\nATOM 103 C ALA A 26 0.322 -2.372 13.306 1.00 0.00 C\nATOM 104 O ALA A 26 0.139 -1.319 12.698 1.00 0.00 O\nATOM 105 N ALA A 27 0.908 -1.194 13.495 1.00 0.00 N\nATOM 106 CA ALA A 27 0.636 -0.383 14.676 1.00 0.00 C\nATOM 107 C ALA A 27 0.227 1.029 14.269 1.00 0.00 C\nATOM 108 O ALA A 27 -0.046 1.874 15.119 1.00 0.00 O\nATOM 109 N ALA A 28 1.014 2.012 14.693 1.00 0.00 N\nATOM 110 CA ALA A 28 2.199 1.751 15.501 1.00 0.00 C\nATOM 111 C ALA A 28 2.067 2.415 16.868 1.00 0.00 C\nATOM 112 O ALA A 28 2.962 2.316 17.705 1.00 0.00 O\nATOM 113 N ALA A 29 3.193 2.861 17.415 1.00 0.00 N\nATOM 114 CA ALA A 29 4.479 2.723 16.742 1.00 0.00 C\nATOM 115 C ALA A 29 5.280 1.580 17.357 1.00 0.00 C\nATOM 116 O ALA A 29 6.398 1.295 16.932 1.00 0.00 O\nATOM 117 N ALA A 30 6.594 1.609 17.155 1.00 0.00 N\nATOM 118 CA ALA A 30 7.228 2.676 16.390 1.00 0.00 C\nATOM 119 C ALA A 30 7.734 2.142 15.054 1.00 0.00 C\nATOM 120 O ALA A 30 8.303 2.884 14.255 1.00 0.00 O\nATOM 121 N ALA A 31 9.024 2.336 14.796 1.00 0.00 N\nATOM 122 CA ALA A 31 9.900 3.019 15.740 1.00 0.00 C\nATOM 123 C ALA A 31 10.624 4.172 15.053 1.00 0.00 C\nATOM 124 O ALA A 31 11.413 4.879 15.676 1.00 0.00 O\nATOM 125 N ALA A 32 11.945 4.063 14.959 1.00 0.00 N\nATOM 126 CA ALA A 32 12.657 2.903 15.484 1.00 0.00 C\nATOM 127 C ALA A 32 13.592 3.321 16.613 1.00 0.00 C\nATOM 128 O ALA A 32 14.287 2.490 17.194 1.00 0.00 O\nATOM 129 N ALA A 33 14.766 2.699 16.663 1.00 0.00 N\nATOM 130 CA ALA A 33 15.133 1.676 15.691 1.00 0.00 C\nATOM 131 C ALA A 33 15.576 0.402 16.401 1.00 0.00 C\nATOM 132 O ALA A 33 15.928 -0.586 15.760 1.00 0.00 O\nATOM 133 N ALA A 34 16.410 -0.385 15.729 1.00 0.00 N\nATOM 134 CA ALA A 34 16.872 -0.045 14.389 1.00 0.00 C\nATOM 135 C ALA A 34 16.184 -0.924 13.350 1.00 0.00 C\nATOM 136 O ALA A 34 16.434 -0.797 12.153 1.00 0.00 O\nATOM 137 N ALA A 35 16.937 -1.327 12.332 1.00 0.00 N\nATOM 138 CA ALA A 35 18.340 -0.949 12.219 1.00 0.00 C\nATOM 139 C ALA A 35 18.481 0.336 11.411 1.00 0.00 C\nATOM 140 O ALA A 35 19.588 0.828 11.198 1.00 0.00 O\nATOM 141 N ALA A 36 19.591 0.456 10.689 1.00 0.00 N\nATOM 142 CA ALA A 36 20.612 -0.584 10.674 1.00 0.00 C\nATOM 143 C ALA A 36 20.788 -1.176 12.069 1.00 0.00 C\nATOM 144 O ALA A 36 21.604 -2.072 12.274 1.00 0.00 O\nATOM 145 N ALA A 37 20.154 -2.320 12.305 1.00 0.00 N\nATOM 146 CA ALA A 37 19.337 -2.968 11.286 1.00 0.00 C\nATOM 147 C ALA A 37 17.907 -3.148 11.785 1.00 0.00 C\nATOM 148 O ALA A 37 17.055 -3.677 11.075 1.00 0.00 O\nATOM 149 N ALA A 38 17.197 -4.106 11.198 1.00 0.00 N\nATOM 150 CA ALA A 38 17.757 -4.934 10.137 1.00 0.00 C\nATOM 151 C ALA A 38 17.285 -4.443 8.773 1.00 0.00 C\nATOM 152 O ALA A 38 17.644 -5.006 7.742 1.00 0.00 O\nATOM 153 N ALA A 39 17.076 -5.378 7.853 1.00 0.00 N\nATOM 154 CA ALA A 39 17.287 -6.793 8.136 1.00 0.00 C\nATOM 155 C ALA A 39 18.422 -7.343 7.278 1.00 0.00 C\nATOM 156 O ALA A 39 18.761 -8.521 7.364 1.00 0.00 O\nATOM 157 N ALA A 40 18.233 -8.552 6.761 1.00 0.00 N\nATOM 158 CA ALA A 40 17.009 -9.306 7.003 1.00 0.00 C\nATOM 159 C ALA A 40 17.339 -10.718 7.475 1.00 0.00 C\nATOM 160 O ALA A 40 16.444 -11.520 7.735 1.00 0.00 O\nATOM 161 N ALA A 41 16.418 -11.647 7.237 1.00 0.00 N\nATOM 162 CA ALA A 41 15.166 -11.329 6.562 1.00 0.00 C\nATOM 163 C ALA A 41 13.991 -11.484 7.522 1.00 0.00 C\nATOM 164 O ALA A 41 12.841 -11.262 7.150 1.00 0.00 O\nATOM 165 N ALA A 42 12.782 -11.507 6.971 1.00 0.00 N\nATOM 166 CA ALA A 42 12.595 -11.392 5.529 1.00 0.00 C\nATOM 167 C ALA A 42 12.084 -10.001 5.170 1.00 0.00 C\nATOM 168 O ALA A 42 11.860 -9.695 4.000 1.00 0.00 O\nATOM 169 N ALA A 43 11.077 -9.951 4.303 1.00 0.00 N\nATOM 170 CA ALA A 43 10.499 -11.161 3.731 1.00 0.00 C\nATOM 171 C ALA A 43 10.527 -11.095 2.208 1.00 0.00 C\nATOM 172 O ALA A 43 10.084 -12.019 1.529 1.00 0.00 O\nATOM 173 N ALA A 44 11.449 -10.303 1.671 1.00 0.00 N\nATOM 174 CA ALA A 44 12.379 -9.542 2.497 1.00 0.00 C\nATOM 175 C ALA A 44 12.119 -8.047 2.351 1.00 0.00 C\nATOM 176 O ALA A 44 12.798 -7.227 2.966 1.00 0.00 O\nATOM 177 N ALA A 45 10.844 -7.673 2.316 1.00 0.00 N\nATOM 178 CA ALA A 45 9.759 -8.642 2.413 1.00 0.00 C\nATOM 179 C ALA A 45 9.451 -9.234 1.042 1.00 0.00 C\nATOM 180 O ALA A 45 8.565 -10.075 0.904 1.00 0.00 O\nATOM 181 N ALA A 46 8.176 -9.521 0.800 1.00 0.00 N\nATOM 182 CA ALA A 46 7.136 -9.283 1.793 1.00 0.00 C\nATOM 183 C ALA A 46 6.550 -10.605 2.278 1.00 0.00 C\nATOM 184 O ALA A 46 5.655 -10.626 3.120 1.00 0.00 O\nATOM 185 N ALA A 47 5.258 -10.596 2.588 1.00 0.00 N\nATOM 186 CA ALA A 47 4.450 -9.388 2.470 1.00 0.00 C\nATOM 187 C ALA A 47 2.988 -9.694 2.777 1.00 0.00 C\nATOM 188 O ALA A 47 2.137 -8.809 2.733 1.00 0.00 O\nEND\n"; |
|
|
const blob = new Blob([pdbText], { type: 'text/plain' }); |
|
|
const stage = new NGL.Stage('viewport'); |
|
|
const infoBox = document.getElementById('info'); |
|
|
|
|
|
window.addEventListener('resize', function () { stage.handleResize(); }, false); |
|
|
|
|
|
stage.loadFile(blob, { ext: 'pdb' }).then(function (o) { |
|
|
o.addRepresentation('cartoon', { colorScheme: 'chainindex' }); |
|
|
o.addRepresentation('ball+stick', { sele: 'hetero and not water' }); |
|
|
|
|
|
|
|
|
stage.signals.clicked.add(function (pickingProxy) { |
|
|
if (pickingProxy && pickingProxy.atom) { |
|
|
const atom = pickingProxy.atom; |
|
|
const resname = atom.resname || 'UNK'; |
|
|
const resno = atom.resno !== undefined ? atom.resno : '?'; |
|
|
const chain = atom.chainname || 'A'; |
|
|
const atomname = atom.atomname || '?'; |
|
|
const element = atom.element || '?'; |
|
|
|
|
|
infoBox.innerHTML = |
|
|
'<span>Atom:</span> ' + atomname + |
|
|
' <span>Residue:</span> ' + resname + |
|
|
' <span>Position:</span> ' + resno + |
|
|
' <span>Chain:</span> ' + chain + |
|
|
' <span>Element:</span> ' + element; |
|
|
} else { |
|
|
infoBox.innerHTML = 'Click on atoms to see details...'; |
|
|
} |
|
|
}); |
|
|
|
|
|
stage.autoView(); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
