ProtVista PDB

<!DOCTYPE html>
<html>

  <head>
 
    <link  rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.2/fonts.css"  type="text/css" media="all"/>
    <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="https://www.ebi.ac.uk/pdbe/pdb-component-library/js/protvista-pdb-3.3.0.js"></script>
 
  </head>

  <body>
    <h4>ProtVista PDB Demo</h4>

    <!-- Actions Menu -->
    <div style="float:right; border:1px solid lightgray; width:300px;padding:10px;">
      
      <h3><u>Helper methods</u></h3>
      <button id="zoomBtn">Zoom on 100-200 range</button>&nbsp;
      <button id="resetZoomBtn">Reset zoom</button><br><br>
      <button id="highlightBtn">Highlight on 133-189 range</button>&nbsp;
      <button id="clearHighlightBtn">Reset Highlight</button><br><br>
      <button id="resetViewBtn">Reset View</button><br><br>
    </div>

    <div>
      <protvista-pdb accession="P05067" id="pv1"></protvista-pdb>
    </div>
    
    <script>

      document.addEventListener('DOMContentLoaded', () => {

        //Get web-component element
        const pvInstance = document.getElementById('pv1');

        //Bind button clicks

        //zoom on 100-200 range
        document.getElementById('zoomBtn').addEventListener('click', () => {
          pvInstance.layoutHelper.resetZoom({ start: 100, end: 200 });
        });

        //Reset zoom
        document.getElementById('resetZoomBtn').addEventListener('click', () => {
          pvInstance.layoutHelper.resetZoom({ start: 1, end: null });
        });

        //Highlight
        document.getElementById('highlightBtn').addEventListener('click', () => {
          pvInstance.layoutHelper.resetZoom({ start: 133, end: 189, highlight: true });
        });

        //Clear highlight
        document.getElementById('clearHighlightBtn').addEventListener('click', () => {
          pvInstance.layoutHelper.resetZoom({ start: 133, end: 189, highlight: false });
        });

        //Reset view
        document.getElementById('resetViewBtn').addEventListener('click', () => {
          pvInstance.layoutHelper.resetView();
        });


      });
      
    </script>
    
    
  </body>

</html>