Startseite Erkunden Hilfe
Anmelden
web
/
TmMolStar
3
0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Struktur: d08776bf19
Branches Tags
TmMolStar
/
src
/
apps
/
viewer
/
embedded.html

embedded.html 2.0 KB
Verlauf Originalformat

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.     <head>
    4. 

  4.         <meta charset="utf-8" />
    5. 

  5.         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    6. 

  6.         <link rel="icon" href="./favicon.ico" type="image/x-icon">
    7. 

  7.         <title>Embedded Mol* Viewer</title>
    8. 

  8.         <style>
    9. 

  9.             #app {
    10. 

  10.                 position: absolute;
    11. 

  11.                 left: 100px;
    12. 

  12.                 top: 100px;
    13. 

  13.                 width: 800px;
    14. 

  14.                 height: 600px;
    15. 

  15.             }
    16. 

  16.         </style>
    17. 

  17.         <link rel="stylesheet" type="text/css" href="molstar.css" />
    18. 

  18.     </head>
    19. 

  19.     <body>
    20. 

  20.         <div id="app"></div>
    21. 

  21.         <script type="text/javascript" src="./molstar.js"></script>
    22. 

  22.         <script type="text/javascript">
    23. 

  23.             molstar.Viewer.create('app', {
    24. 

  24.                 layoutIsExpanded: true,
    25. 

  25.                 layoutShowControls: false,
    26. 

  26.                 layoutShowRemoteState: false,
    27. 

  27.                 layoutShowSequence: true,
    28. 

  28.                 layoutShowLog: false,
    29. 

  29.                 layoutShowLeftPanel: true,
    30. 

  30. 

  31.                 viewportShowExpand: true,
    32. 

  32.                 viewportShowSelectionMode: false,
    33. 

  33.                 viewportShowAnimation: false,
    34. 

  34. 

  35.                 pdbProvider: 'rcsb',
    36. 

  36.                 emdbProvider: 'rcsb',
    37. 

  37.             }).then(viewer => {
    38. 

  38.                 viewer.loadPdb('7bv2');
    39. 

  39.                 viewer.loadEmdb('EMD-30210', { detail: 6 });
    40. 

  40.                 // viewer.loadAllModelsOrAssemblyFromUrl('https://cs.litemol.org/5ire/full', 'mmcif', false, { representationParams: { theme: { globalName: 'operator-name' } } })
    41. 

  41.                 // viewer.loadStructureFromUrl('my url', 'pdb', false, {
    42. 

  42.                 //     representationParams: {
    43. 

  43.                 //         theme: {
    44. 

  44.                 //             globalName: 'uniform',
    45. 

  45.                 //             globalColorParams: { value: 0xff0000 }
    46. 

  46.                 //         }
    47. 

  47.                 //     },
    48. 

  48.                 //     label: 'my structure'
    49. 

  49.                 // });
    50. 

  50.             });
    51. 

  51.         </script>
    52. 

  52.     </body>
    53. 

  53. </html>
    54.