web
/
TmMolStar


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
							<!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>
        <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 hideControls = getParam('hide-controls', '[^&]+').trim() === '1';
            var collapseLeftPanel = getParam('collapse-left-panel', '[^&]+').trim() === '1';
            var pdbProvider = getParam('pdb-provider', '[^&]+').trim().toLowerCase();
            var emdbProvider = getParam('emdb-provider', '[^&]+').trim().toLowerCase();
            var mapProvider = getParam('map-provider', '[^&]+').trim().toLowerCase();
            var pixelScale = getParam('pixel-scale', '[^&]+').trim();
            var pickScale = getParam('pick-scale', '[^&]+').trim();
            var viewer = new molstar.Viewer('app', {
                layoutShowControls: !hideControls,
                viewportShowExpand: false,
                collapseLeftPanel: collapseLeftPanel,
                pdbProvider: pdbProvider || 'pdbe',
                emdbProvider: emdbProvider || 'pdbe',
                volumeStreamingServer: (mapProvider || 'pdbe') === 'rcsb'
                    ? 'https://maps.rcsb.org'
                    : 'https://www.ebi.ac.uk/pdbe/densities',
                pixelScale: parseFloat(pixelScale) || 1,
                pickScale: parseFloat(pickScale) || 0.25,
            });

            var snapshotId = getParam('snapshot-id', '[^&]+').trim();
            if (snapshotId) viewer.setRemoteSnapshot(snapshotId);

            var snapshotUrl = getParam('snapshot-url', '[^&]+').trim();
            var snapshotUrlType = getParam('snapshot-url-type', '[^&]+').toLowerCase().trim() || 'molj';
            if (snapshotUrl && snapshotUrlType) viewer.loadSnapshotFromUrl(snapshotUrl, snapshotUrlType);

            var structureUrl = getParam('structure-url', '[^&]+').trim();
            var structureUrlFormat = getParam('structure-url-format', '[a-z]+').toLowerCase().trim();
            var structureUrlIsBinary = getParam('structure-url-is-binary', '[^&]+').trim() === '1';
            if (structureUrl) viewer.loadStructureFromUrl(structureUrl, structureUrlFormat, structureUrlIsBinary);

            var pdb = getParam('pdb', '[^&]+').trim();
            if (pdb) viewer.loadPdb(pdb);

            var pdbDev = getParam('pdb-dev', '[^&]+').trim();
            if (pdbDev) viewer.loadPdbDev(pdbDev);

            var emdb = getParam('emdb', '[^&]+').trim();
            if (emdb) viewer.loadEmdb(emdb);
        </script>
    </body>
</html>