Biojs.PDBLogos showcase
PLEASE NOTE: the above example is being affected by the CSS rules of this site. Click on 'view in window' to see the component by using its own CSS stylesheet(s) only.
View in windowOverview
PDBLogos shows a set of icons to give a quick summary of salient features of a PDB entry.
See more info on PDBLogos at http://pdbe.org/prints
Version
1.0.0.
To get the above Biojs.PDBLogos to work on your page, you need to do the following:
- Include the file Biojs.PDBLogos.js and its dependencies to your page header.
Biojs scripts
<script language="JavaScript" type="text/javascript" src="src/Biojs.js">
External script(s)
<script language="JavaScript" type="text/javascript" src="../biojs/dependencies/graphics/raphael-2.1.0.js">
- Create a div tag which holds an unique identifier.
<body> ... <div id="YourOwnDivId" /> ... </body> - Create a code snippet within a <script> tag and instance Biojs.PDBLogos into.
window.onload = function() { var instance = new Biojs.PDBLogos({ target: "YourOwnDivId", identifier: "1cbs" }); };
Required Parameters
-
target | {string}
Identifier/HTMLElement of the div container where the component should be rendered.
-
identifier | {string}
PDB entry id for which prints will be rendered.
-
raphael | {Object}
A Raphael object instead of div to render PDBprints into.
-
startX | {int}
X-coordinate of point where rendering the array of PDBprints will start in the Raphael canvas
-
startY | {int}
Y-coordinate of point point where rendering the array of PDBprints will start in the Raphael canvas
-
interval | {int}
Gap size between successive PDBprints in a vertical or horizontal array
-
size | {int}
Length of an icon logo
-
orient | {char}
Rendering orientation either vertical or horizontal
Optional Parameters
-
color | {string}
Color for background as HTML color code.
Default: "#588FE5" -
pdb3DIcon | {string}
Image URL to be used as 3D structure's icon
Default: 'biojs/css/images/3d.png'
setIdentifier
Sets the pdb identifier generating a new request of logos.
Parameters:
-
{string} value
PDB entry.
Example :
instance.setIdentifier("1j3s");
onClick
Parameters:
-
{function} actionPerformed
A function which receives an Biojs.Event object as argument.
Returned data in the Biojs.Event object:
-
{Object}
source
The component which did triggered the event. -
{string}
type
The name of the event. -
{string}
identifier
PDB actual entry. -
{string}
category
Name of the PDBLogo category clicked. -
{string}
printsUrl
Url of the PDB general information.
Example :
instance.onClick(
function( e ) {
alert("Logo " + e.category + " of PDB " + e.identifier + " was clicked.");
}
);