web
/
TmMolStar


			
				
					
						
						
							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":Math.sin(Math.PI/2)*17.5,"y":0,"z":Math.cos(Math.PI/2)*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>