| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
- <link rel="icon" href="./favicon.ico" type="image/x-icon">
- <title>Mol* Viewer</title>
- <style>
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- html, body {
- width: 100%;
- height: 100%;
- overflow: hidden;
- }
- hr {
- margin: 10px;
- }
- h1, h2, h3, h4, h5 {
- margin-top: 5px;
- margin-bottom: 3px;
- }
- button {
- padding: 2px;
- }
- #app {
- position: absolute;
- left: 100px;
- top: 100px;
- width: 800px;
- height: 600px;
- }
- </style>
- <link rel="stylesheet" type="text/css" href="molstar.css" />
- </head>
- <body onload="loadPdb()">
- <div id="app"></div>
- <script type="text/javascript" src="./molstar.js"></script>
- <script type="text/javascript">
- function getParam(name, regex) {
- var r = new RegExp(name + '=' + '(' + regex + ')[&]?', 'i');
- return decodeURIComponent(((window.location.search || '').match(r) || [])[1] || '');
- }
- var debugMode = getParam('debug-mode', '[^&]+').trim() === '1';
- if (debugMode) molstar.setDebugMode(debugMode, debugMode);
- var viewer = new molstar.Viewer('app', {
- layoutShowControls: true,
- viewportShowExpand: true,
- collapseLeftPanel: false
- });
- // Set PDB Id here
- var regionDescriptors = {"pdb-id":"1afo","creation-date":"2021-09-03","is-transmembrane":1,"membrane-normal":{"x":0,"y":0,"z":17.5},"chains":[{"chain_id":"A","type":"alpha","seq":"VQLAHHFSEPEITLIIFGVMAGVIGTILLISYGIRRLIKK","regions":{"1":{"auth_ids":[62,63,64,65,66,67,68,69,70,71,72,73],"color":[255,0,0]},"H":{"auth_ids":[74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95],"color":[255,255,0]},"2":{"auth_ids":[96,97,98,99,100,101],"color":[0,0,255]}}},{"chain_id":"B","type":"alpha","seq":"VQLAHHFSEPEITLIIFGVMAGVIGTILLISYGIRRLIKK","regions":{"1":{"auth_ids":[62,63,64,65,66,67,68,69,70,71,72,73],"color":[255,0,0]},"H":{"auth_ids":[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],"color":[255,255,0]},"2":{"auth_ids":[100,101],"color":[0,0,255]}}}]};
- var pdbtmId = regionDescriptors["pdb-id"];
- regionDescriptors.format = 'mmcif'
- function loadPdb() {
- viewer.loadWithUNITMPMembraneRepresentation(
- // NOTE: Prepare CORS settings appropriately on backend
- // or made this index.html accessible from the same
- // origin (DOMAIN:PORT values).
- //`https://DOMAIN[:PORT]/api/pdbtm/${pdbtmId}/trpdb`,
- `https://cs.litemol.org/${pdbtmId}/full`,
- regionDescriptors
- );
- }
- </script>
- </body>
- </html>
|
