web
/
TmMolStar


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
							<!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);

            var timingMode = getParam('timing-mode', '[^&]+').trim() === '1';
            if (timingMode) molstar.setTimingMode(timingMode);

            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 pickPadding = getParam('pick-padding', '[^&]+').trim();
            var disableWboit = getParam('disable-wboit', '[^&]+').trim() === '1';
            var preferWebgl1 = getParam('prefer-webgl1', '[^&]+').trim() === '1' || void 0;
            var allowMajorPerformanceCaveat = getParam('allow-major-performance-caveat', '[^&]+').trim() === '1';

            molstar.Viewer.create('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,
                pickPadding: isNaN(parseFloat(pickPadding)) ? 1 : parseFloat(pickPadding),
                enableWboit: disableWboit ? false : void 0, // use default value if disable-wboit is not set
                preferWebgl1: preferWebgl1,
                allowMajorPerformanceCaveat: allowMajorPerformanceCaveat,
            }).then(viewer => {
                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);

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

                var modelArchive = getParam('model-archive', '[^&]+').trim();
                if (modelArchive) viewer.loadModelArchive(modelArchive);
            });
        </script>
        <!-- __MOLSTAR_ANALYTICS__ -->
    </body>
</html>