Biojs.ProteinPortafolio 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
ProteinPortafolio component shows the description of a protein as well as its PDB alignments if there is any.
Component shows the PDBLogos of the selected alignment and ables to play with the sequence and
the 3D draw of the alignment.
Version
1.0.0.
To get the above Biojs.ProteinPortafolio to work on your page, you need to do the following:
- Include the file Biojs.ProteinPortafolio.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/jquery/jquery-1.6.4.js">
CSS stylesheet(s)
<link href="../biojs/css/biojs.Protein3D.css" rel="stylesheet" type="text/css" />
- 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.ProteinPortafolio into.
window.onload = function() { var instance = new Biojs.ProteinPortafolio({ target : "YourOwnDivId", accession : 'P99999' }); };
Required Parameters
-
target | {string}
Identifier of the DIV tag where the component should be displayed.
Optional Parameters
-
fontFamily | {string}
mono", courier, monospace'] Font list to be applied to the component content.
Default: '"Andale -
fontColor | {string}
HTML color code for the font.
Default: "white" -
backgroundColor | {string}
Background color for the entire div content.
Default: "#7BBFE9" -
selectionFontColor | {Object}
This color will be used to change the font color of selected text.
Default: "white" -
| {Object}
selectionBackgroundColor="yellow"] This color will be used to change the background of selected text.
-
pdb3DIcon | {string}
The only PDB icon is able to defines the 3D structure. Set source URL for 3D icon
Default: '../biojs/css/images/3d.png'
getAlignmentsByPdb
Get the available alignments for the current protein filtered by selection (PDB files containing a part of the requested region).
Parameters:
-
{string} pdb
identifier.
Example :
// Get the alignments matching with bases 4, 8 and 100.
alert ( instance.getAlignmentsByPdb("2F73") );
Returns:
- {Object} .
getCurrentAlignment
setProtein
Sets the protein accession which changes everything to reflect the new protein information
Parameters:
-
{string} accession
The new protein identifier
Example 1:
instance.setProtein("P07148");
Example 2:
instance.setProtein("P12345");
setSize
Change the font size. Do nothing it no value is provided.
Parameters:
-
{string} size
Optional
The new font size in pixels.
Example :
instance.setSize("72px");
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.");
}
);
onPdbSelected
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}
alignmentId
Identifier . -
{string}
pdbId
Selected pdb entry. -
{int}
start
Start position of the alignment. -
{int}
end
End position of the alignment.
Example :
instance.onPdbSelected(
function( e ) {
alert("Selected " + e.alignmentId + " alignment.");
}
);