<!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 plugin - Helper functions</title>
<!-- 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-plugin.js"
></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.msp-plugin ::-webkit-scrollbar-thumb {
background-color: #474748 !important;
}
body {
padding: 10px;
}
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</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, B:15-20
</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 }, sideChain: true },
{ struct_asym_id: 'B', start_residue_number: 15, end_residue_number: 20, color: { r: 150, g: 255, b: 0 }, representation: 'spacefill', representationColor: '#ff00ff' }]})"
>
Select Chain B:1-6, B:15-20 (extra reprs)
</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>Custom tooltips</h4>
<button
onclick="viewerInstance.visual.tooltips({ data: [
{ struct_asym_id: 'A', tooltip: 'Custom tooltip for chain A' },
{ struct_asym_id: 'B', tooltip: 'Custom tooltip for chain B' },
{ struct_asym_id: 'C', tooltip: 'Custom tooltip for chain C' },
{ struct_asym_id: 'D', tooltip: 'Custom tooltip for chain D' },
] });"
>
Add tooltips
</button>
<button onclick="viewerInstance.visual.clearTooltips();">
Clear
</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* JS Plugin Demo</h3>
<!-- Molstar container -->
<div id="myViewer"></div>
</div>
</div>
<script>
// Create plugin instance
const viewerInstance = new PDBeMolstarPlugin();
// Set options
const options = {
moleculeId: '1hda',
hideControls: true,
};
// Get element from HTML/Template to place the viewer
const viewerContainer = document.getElementById('myViewer');
// Call render method to display the 3D view
viewerInstance.render(viewerContainer, options);
// Subscribe to events
viewerInstance.events.loadComplete.subscribe(() => {
console.log('Loaded');
});
</script>
</body>
</html>