1. PDB Prints as JS plugin - PDBeurope/pdb-prints GitHub Wiki

PDB Prints as JS plugin

Steps to include PDB Prints as a JavaScript plugin in a web application

1. Include the library css and script file in your web page

<link  rel="stylesheet"  type="text/css"  href="https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdb-prints-component-2.0.0.css">

<script  type="text/javascript"  src="https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdb-prints-plugin-2.0.0.js"  defer></script>

2. Instantiate plugin and provide parameters (options) to render

<script>
   //Instantiate plugin after DOM content is loaded
   document.addEventListener('DOMContentLoaded', () => {

        //Create plugin instance
        var pluginInstance = new PdbPrintsPlugin();

        //Set options (** All the available options are listed below in the documentation)
        var options = {
	    entryId: '1cbs'
        }
    
        //Get element from HTML/Template to place PDB Prints 
        var viewContainer = document.getElementById('printsView');

        //Call render method to display the 2D view
        pluginInstance.render(viewContainer, options);
   });
</script>

Check here the example demonstrating all the steps

Plugin parameters (options)

No. Option Value Details
01 entryId string ** PDB ID - Example: '1cbs'
02 orientation string Expected value - 'vertical' / 'horizontal'(default)
03 color string Expected value - 'transparent' /'embl_green'(default)
04 size string Expected value - '48' / '64' / '128' /'36'(default)
05 hideLogo array Expected value - ["PDBeLogo","PrimaryCitation", "Taxonomy", "Expressed", "Experimental", "Protein", "NucleicAcid", "Ligands"]
06 errorStyle string CSS style for the error box - Example: 'color:#ff0000;' will change the error text color to red

** Mandatory. ↩

⚠️ **GitHub.com Fallback** ⚠️