1. PDB Prints as JS plugin

PDB Prints as JS plugin

• Steps to include PDB Prints in a web-application
• Plugin parameters

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. ↩