<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<!-- Complied & minified library css -->
<link rel="stylesheet" href="//www.ebi.ac.uk/pdbe/pdb-component-library/v1.0/css/pdb.component.library.min-1.0.0.css" />
<!-- Dependencey scripts (these can be skipped if already included in page) -->
<script src="//www.ebi.ac.uk/pdbe/pdb-component-library/libs/d3.min.js"></script>
<script src="//www.ebi.ac.uk/pdbe/pdb-component-library/libs/angular.1.4.7.min.js"></script>
<!-- Complied & minified library JS -->
<script src="//www.ebi.ac.uk/pdbe/pdb-component-library/v1.0/js/pdb.component.library.min-1.0.0.js"></script>
<script src="script.js"></script>
</head>
<body>
<h3>LiteMol Component Demo</h3>
<div class="buttonArea">
<button onclick="callSelectFocus()">Select residues</button>
</div>
<div class="view3d">
<pdb-lite-mol id="litemol_1cbs" pdb-id="'1cbs'" hide-controls="true"></pdb-lite-mol>
</div>
</body>
</html>
//Bootstrapping / Installing the library
angular.element(document).ready(function () {
angular.bootstrap(document, ['pdb.component.library']);
});
//Method to bind component scope
var bindPdbComponentScope = function(element){
return angular.element(element).isolateScope();
}
//variable to store LiteMol Component Scope which has all the methods
var liteMolScope;
//bind to the component scope on window.onload
window.onload = function(e) {
var litemolElement = document.getElementById('litemol_1cbs');
liteMolScope = bindPdbComponentScope(litemolElement);
}
/*
SelectExtractFocus(selectionDetails, colorCode, showSideChains)
Use : Color and focus desired range of residues in the structure
Parameter :
1. selectionDetails (type : object) (desird values : entity_id, struct_asym_id, start_residue_number, end_residue_number)
example :
{
entity_id : '1',
struct_asym_id : 'A',
start_residue_number : 10,
end_residue_number : 15
}
2. colorCode (type : object) (value : rgb value - example : {r:255, g:0, b:0} for red)
3. showSideChains (type : boolean) (value : true / false) (optional)
if set..
true : shows sidechain residues for the selected range.
*/
var callSelectFocus = function(){
var residueDetails = [{
entity_id : '1',
struct_asym_id : 'A',
start_residue_number : 5,
end_residue_number : 5,
color: {r:49, g:163, b:84}
},
{
entity_id : '1',
struct_asym_id : 'A',
start_residue_number : 32,
end_residue_number : 32,
color: {r:49, g:163, b:84}
},
{
entity_id : '1',
struct_asym_id : 'A',
start_residue_number : 58,
end_residue_number : 58,
color: {r:49, g:163, b:84}
}
];
for(var i=0, len = residueDetails.length; i < len; i++) {
liteMolScope.LiteMolComponent.SelectExtractFocus(residueDetails[i], residueDetails[i].color, 'true');
}
}
/* Styles go here */
.buttonArea {
float:left;
width:150px;
text-align:left;
}
.buttonArea > button {
margin-bottom: 10px;
float:left;
}
.view3d {
float:right;
height:300px;
width:300px;
position:relative;
}