selection demo

<!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;
}