<!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"
/>
<title>PDBe Molstar Component Demo</title>
<!-- Required for IE11 -->
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<!-- Web component polyfill (only loads what it needs) -->
<script
src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-lite.js"
charset="utf-8"
></script>
<!-- Required to polyfill modern browsers as code is ES5 for IE... -->
<script
src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
charset="utf-8"
></script>
<!-- Molstar CSS & JS -->
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/npm/pdbe-molstar@3.2.0/build/pdbe-molstar.css"
/>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/pdbe-molstar@3.2.0/build/pdbe-molstar-component.js"
></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.msp-plugin ::-webkit-scrollbar-thumb {
background-color: #474748 !important;
}
body {
padding: 30px;
}
h2 {
margin-bottom: 20px;
}
h3 {
margin-bottom: 2px;
}
h4 {
margin-top: 6px;
margin-bottom: 2px;
}
h4:first-child {
margin-top: 0px;
}
.content {
display: flex;
flex-wrap: wrap-reverse;
gap: 10px;
}
.controlsSection {
width: 290px;
}
.controlBox {
border: 1px solid lightgray;
padding: 10px;
margin-bottom: 20px;
}
#myViewer {
width: 400px;
height: 300px;
position: relative;
}
button {
margin-right: 8px;
margin-bottom: 8px;
padding: 1px;
padding-inline: 4px;
}
button:last-child {
margin-bottom: 0px;
}
</style>
</head>
<body>
<h2>PDBe Molstar Component</h2>
<div class="content">
<div class="controlsSection">
<h3>Canvas/ layout methods</h3>
<div class="controlBox">
<h4>Set Background</h4>
<button
onclick="viewerInstance.canvas.setBgColor({ r: 255, g: 255, b: 255 })"
>
White
</button>
<button
onclick="viewerInstance.canvas.setBgColor({ r: 0, g: 0, b: 0 })"
>
Black
</button>
<h4>Toggle controls menu</h4>
<button
onclick="viewerInstance.canvas.toggleControls(false)"
>
Hide
</button>
<button
onclick="viewerInstance.canvas.toggleControls(true)"
>
Show
</button>
<button onclick="viewerInstance.canvas.toggleControls()">
Toggle
</button>
<h4>Toggle Fullscreen</h4>
<button
onclick="viewerInstance.canvas.toggleExpanded(true)"
>
Show Fullscreen
</button>
</div>
<h3>Visual Methods</h3>
<div class="controlBox">
<h4>Change representation visibility</h4>
<button
onclick="viewerInstance.visual.visibility({ water: false })"
>
Hide Water Visual
</button>
<button
onclick="viewerInstance.visual.visibility({ water: true })"
>
Show Water Visual
</button>
<h4>Toggle Spin</h4>
<button onclick="viewerInstance.visual.toggleSpin(true)">
Rotate
</button>
<button onclick="viewerInstance.visual.toggleSpin(false)">
Stop
</button>
<button onclick="viewerInstance.visual.toggleSpin()">
Toggle
</button>
<h4>Focus</h4>
<button
onclick="viewerInstance.visual.focus([{ struct_asym_id: 'A', start_residue_number: 14, end_residue_number: 18 }])"
>
Focus on Chain A:14-18
</button>
<h4>Highlight</h4>
<button
onclick="viewerInstance.visual.highlight({ data: [{ struct_asym_id: 'A', start_residue_number: 14, end_residue_number: 18 }], color: { r: 255, g: 255, b: 0} })"
>
Highlight Chain A:14-18
</button>
<button onclick="viewerInstance.visual.clearHighlight()">
Clear Highlight
</button>
<h4>Selection</h4>
<button
onclick="viewerInstance.visual.select({ data: [{ struct_asym_id: 'A', color: { r: 255, g: 255, b: 0 }, focus: true }] })"
>
Select & Focus on Chain A
</button>
<br />
<button
onclick="viewerInstance.visual.select({ data: [{ struct_asym_id: 'B', color: { r: 255, g: 255, b: 0 }, focus: true }]})"
>
Select & Focus on Chain B
</button>
<br />
<button
onclick="viewerInstance.visual.select({ data: [{ struct_asym_id: 'B', start_residue_number: 1, end_residue_number: 6, color: { r: 255, g: 255, b: 0 } }]})"
>
Select Chain B:1-6
</button>
<br />
<button
onclick="viewerInstance.visual.select({ data: [{ struct_asym_id: 'B', start_residue_number: 1, end_residue_number: 6, color: { r: 255, g: 255, b: 0 } }, { struct_asym_id: 'B', start_residue_number: 15, end_residue_number: 20, color: { r: 150, g: 255, b: 0 } }]})"
>
Select Chain B:1-6 & Chain B:15-20
</button>
<br />
<button
onclick="viewerInstance.visual.select({ data: [{ uniprot_accession: 'P02070', start_uniprot_residue_number: 122, end_uniprot_residue_number: 142, color: { r: 255, g: 0, b: 255} }], nonSelectedColor: { r: 255, g: 255, b: 255 } })"
>
Select Uniprot
</button>
<br />
<button onclick="viewerInstance.visual.clearSelection()">
Clear Selection
</button>
<h4>Set highlight / selection colour</h4>
<button
onclick="viewerInstance.visual.setColor({ highlight: { r: 255, g: 255, b: 0 } })"
>
Yellow highlight
</button>
<button
onclick="viewerInstance.visual.reset({ highlightColor: true })"
>
Reset
</button>
<br />
<button
onclick="viewerInstance.visual.setColor({ select: { r: 255, g: 0, b: 0} })"
>
Red selection
</button>
<button
onclick="viewerInstance.visual.reset({ selectColor: true })"
>
Reset
</button>
<h4>Reset Visual</h4>
<button
onclick="viewerInstance.visual.reset({ camera: true })"
>
Camera
</button>
<button
onclick="viewerInstance.visual.reset({ theme: true })"
>
Theme
</button>
<button
onclick="viewerInstance.visual.reset({ camera: true, theme: true })"
>
Camera & Theme
</button>
<h4>Update data</h4>
<button
onclick="viewerInstance.visual.update({ moleculeId: '1cbs' }, false)"
>
Update (add)
</button>
<button
onclick="viewerInstance.visual.update({ moleculeId: '1cbs' }, true)"
>
Update (replace)
</button>
</div>
</div>
<div class="viewerSection">
<h3>PDBe Mol* Web-component Demo</h3>
<!-- Molstar container -->
<div id="myViewer">
<pdbe-molstar
id="pdbeMolstarComponent"
molecule-id="1hda"
assembly-id="1"
default-preset="default"
alphafold-view="false"
hide-water="true"
hide-het="false"
hide-non-standard="false"
load-maps="false"
bg-color-b="20"
bg-color-r="15"
bg-color-g="0"
highlight-color-g="255"
highlight-color-b="0"
select-color-g="255"
select-color-b="0"
lighting="glossy"
domain-annotation="true"
validation-annotation="true"
symmetry-annotation="true"
pdbe-url="https://www.ebi.ac.uk/pdbe/"
encoding="bcif"
low-precision="true"
subscribe-events="false"
hide-controls="true"
sequence-panel="false"
pdbe-link="true"
loading-overlay="true"
expanded="false"
landscape="false"
reactive="false"
>
</pdbe-molstar>
</div>
</div>
</div>
<script>
var viewerInstance;
window.onload = function () {
const pdbeMolstarComponent = document.getElementById(
'pdbeMolstarComponent'
);
viewerInstance = pdbeMolstarComponent.viewerInstance;
};
</script>
</body>
</html>