Biojs.PDBprints 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
This is the description of the PDBprints component. This component renders a set of icons to give a quick summary of salient features of a PDB entry.
See more info on PDBprints at http://pdbe.org/prints
Version
1.0.0.
To get the above Biojs.PDBprints to work on your page, you need to do the following:
- Include the file Biojs.PDBprints.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.PDBprints into.
window.onload = function() { var instance = new Biojs.PDBprints({ targets : [ {divid:"YourOwnDivId", pdbids:["1aac","1cbs"]} ] }); };
Required Parameters
-
targets | {list}
This is a list of configuration options, each corresponding to PDBprints to be rendered in a div. Each config consists of following:
- pdbids: PDB entry ids for which prints are to be rendered.
- divid: the id of div in which the prints are to be rendered.
- rapha: A Raphael object instead of div to render PDBprints into.
- startX: X-coordinate of point where rendering the array of PDBprints will start in the Raphael canvas
- startY: Y-coordinate of point point where rendering the array of PDBprints will start in the Raphael canvas
- interval: gap between successive PDBprints in a vertical or horizontal array
- size: length of an icon logo in PDBprints
- orient: vertical or horizontal rendering fo PDBprints
Optional Parameters
printsLayout
Parameters:
-
printsdata
printsLayout1
Parameters:
-
conf
-
printsdata
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. -
{int}
selected
Selected character.
Example :
instance.onClick(
function( objEvent ) {
alert("The character " + objEvent.selected + " was clicked.");
}
);
onHelloSelected
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. -
{int}
textSelected
Selected text, will be 'Hello' obviously.
Example :
instance.onHelloSelected(
function( objEvent ) {
alert("The word " + objEvent.textSelected + " was selected.");
}
);