web
/
TmMolStar


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
							<!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 {

                max-width: 100%;

                flex: 0 0 100%;

                position: relative;

                left: 2px;

                top: 2px;

                width: 800px;

                height: 600px;

            }


            #controls {

                position: absolute;

                top: 2px;

                left: 810px;

                z-index: 10;

                width: 15rem;

                font-family: sans-serif;

                font-size: smaller;

            }


            #controls > button {

                /*display: block;*/

                width: 100%;

                text-align: left;

                margin: 5px 0px;

            }


            #controls > input, #controls > select {

                width: 100%;

                display: block;

            }

        </style>
        <link rel="stylesheet" type="text/css" href="molstar.css" />
    </head>
    <body>
        <div id="app"></div>
        <div id="controls"></div>
        <script type="text/javascript" src="./tm_molstar.js"></script>
        <script type="text/javascript">

            // init viewer

            var viewer = new tm_molstar.Viewer('app', {

                layoutShowControls: false,

                layoutIsExpanded: false,

                viewportShowExpand: true,

                collapseLeftPanel: true

            });


            function load(pdbId) {

                    viewer.plugin.clear();

                    tm_molstar.loadWithUNITMPMembraneRepresentation(viewer.plugin, {

                    structureUrl: `https://cs.litemol.org/${pdbId}/full`,

                    regionDescriptorUrl: `http://localhost:8000/build/data/${pdbId}.json`,

                });

            }


            function $(id) { return document.getElementById(id); }


            function addControl(label, action) {

                var btn = document.createElement('button');

                btn.onclick = action;

                btn.innerText = label;

                $('controls').appendChild(btn);

            }


            let idList = [

                '1a0s', // TODO: wrong rotation

                '2atk', // PASSED

                '1afo', // TODO: something is wrong with the rotation

                '1xl4', // PASSED

                '1xl6', // PASSED

                '4x8a', // TODO: something is very wrong with membrane planes

                '6xvf', // TODO: something is very wrong with membrane planes

            ];

            idList.forEach((pdbId) => addControl(pdbId, () => load(pdbId)));

            addControl('Reset', () => {

                viewer.plugin.clear();

                tm_molstar.loadInitialSnapshot(viewer.plugin)

            });

        </script>
    </body>
</html>