Biojs.Protein3DUniprot 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
Protein viewer to show the pdb files aligned to an Uniprot Accession
Version
1.0.0.
To get the above Biojs.Protein3DUniprot to work on your page, you need to do the following:
- Include the file Biojs.Protein3DUniprot.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.Protein3DUniprot into.
window.onload = function() { var instance = new Biojs.Protein3DUniprot({ target: 'YourOwnDivId', proteinId: 'P07148' }); };
Required Parameters
-
target | {string}
Identifier of the DIV tag where the component should be displayed.
Optional Parameters
-
proteinId | {string}
Uniprot identifier of the protein.
-
mapping | {string}
Mapping function to obtain the protein's alignments:
- Biojs.Protein3DUniprot.ALIGNMENTS_UNIPROT_MAPPING
- Biojs.Protein3DUniprot.ALIGNMENTS_PDBe_MAPPING
Default: Biojs.Protein3DUniprot.ALIGNMENTS_UNIPROT_MAPPING -
pdbUrl | {string}
Url of the web service in order to require the pdb file.
Default: "http://www.ebi.ac.uk/pdbe-srv/view/files" -
id | {string}
Identifier of the pdb to be displayed (i.e. '3nuc' to require 3nuc.pdb file). You can load another pbd by using requestPdb method.
-
proxyUrl | {string}
Server side proxy server.
Default: "../biojs/dependencies/proxy/proxy.php" -
width | {int}
Width in pixels.
Default: 597 -
height | {int}
Height in pixels.
Default: 400 -
jmolFolder | {string}
Relative path of the jMol library.
Default: "{BIOJS_HOME}/dependencies/jmol-12.0.48" -
loadingStatusImage | {string}
Relative path of the image to be displayed on loading status.
Default: "{BIOJS_HOME}/css/images/ajax-loader-1.gif" -
unpolarColor | {string}
This value is used by displayUnpolar() method for coloring hydrophobic residues.
Default: "salmon" -
negativeColor | {string}
This value is used by displayNegative() method for coloring acidic(-) residues.
Default: "red" -
positiveColor | {string}
This value is used by displayNegative() method for coloring basic(+) residues.
Default: "blue" -
polarColor | {string}
This value is used by displayNegative() method for coloring hydrophylic residues.
Default: "yellow" -
backgroundColor | {string}
Background color of the jMol applet
Default: "white" -
enableControls | {bool}
Enable for showing the control panel. If value is 'false', it disables both methods showControls and hideControls.
Default: true
applyJmolCommand
Apply a script to the Jmol applet that currently are displayed
Parameters:
-
{string} The
Jmol script.
Example :
// Rotate one time in X-axis.
instance.applyJmolCommand('select all; cartoon off; meshribbons on;');
changeBackgroundColor
Select and coloring atoms.
Parameters:
-
{string} color
Refer to the Jmol documentation for availables coloring schemes.
Example :
// Select hetero atoms and coloring with the RGB triplet code [xFF0088].
instance.changeBackgroundColor("[xFF0088]");
changeControlsVisiblility
Shows/Hides the form of controls.
Parameters:
-
flag
Example :
instance.changeControlsVisiblility(true);
display
Select and coloring atoms.
Parameters:
-
{string} The
color. Refer to the Jmol documentation for availables coloring schemes. -
color
Example :
// Select hetero atoms and coloring with the RGB triplet code [xFF0088].
instance.display("hetero","[xFF0088]");
displayAntialias
Apply antialias rendering filter.
Parameters:
-
{boolean} flag
If true, smooth rendering will be applied.
Example :
instance.displayAntialias(true);
displayColorScheme
Selects the color scheme for the current structure.
Parameters:
-
{string} colorScheme
Color scheme to be applied to the current structure. Use one of these values: Biojs.Protein3D.COLOR_BY_CHAIN, Biojs.Protein3D.COLOR_SECONDARY_STRUCTURE, Biojs.Protein3D.COLOR_RAINBOW, Biojs.Protein3D.COLOR_BY_ELEMENT, Biojs.Protein3D.COLOR_BY_AMINO_ACID, Biojs.Protein3D.COLOR_BY_TEMPERATURE, Biojs.Protein3D.COLOR_HIDROPHOBICITY
Example :
instance.displayColorScheme(Biojs.Protein3D.COLOR_RAINBOW);
displayNegative
Selects the acidic atoms and do coloring.
Parameters:
-
{string} color
Optional, Default: "red"
Refer to the Jmol documentation for availables coloring schemes. -
flag
Example :
//
instance.displayNegative("red");
displayPolar
Selects the polar atoms and do coloring.
Parameters:
-
{string} color
Optional, Default: "yellow"
Refer to the Jmol documentation for availables coloring schemes. -
flag
Example :
// instance.displayPolar();
displayPositive
Selects the basic atoms and do coloring.
Parameters:
-
{string} color
Optional, Default: "blue"
Refer to the Jmol documentation for availables coloring schemes. -
flag
Example :
// instance.displayPositive();
displayStyle
Selects the style for the current structure.
Parameters:
-
{string} style
Style of structure to be applied to the current structure. Use one of these values: Biojs.Protein3D.STYLE_CARTOON, Biojs.Protein3D.STYLE_BACKBONE, Biojs.Protein3D.STYLE_CPK, Biojs.Protein3D.STYLE_BALL_STICK, Biojs.Protein3D.STYLE_LIGANDS, Biojs.Protein3D.STYLE_LIGANDS_POCKET
Example :
instance.displayStyle( Biojs.Protein3D.STYLE_CPK );
displaySurface
Draws a translucent surface surrounding the protein.
Parameters:
-
{string} name
Type of surface wanted. Use one of these: Biojs.Protein3D.SURFACE_NONE, Biojs.Protein3D.SURFACE_ACCESSIBLE, Biojs.Protein3D.SURFACE_EXCLUDED, Biojs.Protein3D.SURFACE_CAVITIES
Example :
instance.displaySurface( Biojs.Protein3D.SURFACE_CAVITIES );
displayUnPolar
Selects the polar atoms and do coloring.
Parameters:
-
{string} color
Optional, Default: "salmon"
Refer to the Jmol documentation for availables coloring schemes. -
flag
Example :
// instance.displayUnPolar();
filterAlignments
Filters the alignments available for the current protein: Only PDB files containing a part of the requested region are selectable. The specified region is highlighted in the displayed PDB file.
Parameters:
-
{Object|Array} selection
Can be either a plain object or an array. If object, it must have the fields start and end; Where "start" is greater than or equal to "end". If array, it must contain numbers representing the positions to be selected.
Example :
// Selection of the region in the interval [100,150].
instance.filterAlignments({start: 120, end: 150});
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} .
getAlignmentsBySelection
Get the available alignments for the current protein filtered by selection (PDB files containing a part of the requested region).
Parameters:
-
{Object|Array} selection
Can be either a plain object or an array. If object, it must have the fields start and end; Where "start" is greater than or equal to "end". If array, it must contain numbers representing the positions to be selected.
Example 1:
// Selection of the region in the interval [100,150].
instance.setSelection({start: 120, end: 150});
Example 2:
// Get the alignments matching with bases 4, 8 and 100. alert ( instance.filterAlignments([4,8,100]) );
getCurrentAlignmentId
getCurrentProteinId
getPdbId
Parameters:
-
pdb
getSelection
Returns the information about the region of the currently PDB file.
Example :
//Show the region in an alert window.
var selection = instance.getSelection();
alert("selected: "+ selection );
Returns:
- {Object|Array} Returns a plain object if the current selection is a region. In this case, will contain the fields start and end; where "start" is greater than or equal to "end". Returns an array if the current selection is a set of positions. Returns undefined if there are not selection.
hideControls
Hides the form of controls.
Example :
instance.hideControls();
hideNegative
Undo the action of method displayNegative.
Example :
// instance.hideNegative();
hidePolar
Undo the action of method displayPolar.
Example :
// instance.hidePolar();
hidePositive
Undo the action of method displayPositive.
Example :
// instance.hidePositive();
hideSurface
Undo the action of method displaySurface.
Example :
// instance.hideSurface();
hideUnPolar
Undo the action of method displayUnPolar.
Example :
// instance.hideUnPolar();
removeSelection
Removes selection in the current displayed structure.
Example :
instance.removeSelection();
requestPdb
Request and display a pdb file by means of its identifier.
Parameters:
-
{string} pdbId
Pdb file identifier.
Example :
instance.requestPdb('3t6f');
reset
Restores the default display settings for the current PDB file. Note: for removing out the current selection use removeSelection().
Example :
instance.reset();
rotate
Apply rotation.
Parameters:
-
flag
Example :
instance.rotate(true);
setHalosVisible
Enable/disable the visibility of halos for showing up the current selection. On halos off, all not selected atoms will be translucent.
Parameters:
-
{boolean} value
'true' for halos on, 'false' for halos off.
Example :
// Sets the halos off instance.setHalosVisible(false);
setPdb
Sets the pdb file to be displayed. Also triggers the event whenever a new pdb file is loaded.
Parameters:
-
{string} pdb
The content of the pdb file.
Example :
instance.showLoadingImage();
jQuery.ajax({
url: '../biojs/dependencies/proxy/proxy.php',
data: 'url=http://www.ebi.ac.uk/pdbe-srv/view/files/3u01.pdb',
dataType: 'text',
success: function(pdbFile){
instance.setPdb(pdbFile);
},
error: function(qXHR, textStatus, errorThrown){
alert(textStatus);
}
});
setProtein
Get all pdb files for a given uniprot id. Also triggers the event that a new pdb file was loaded.
Parameters:
-
proteinId
Example :
instance.setProtein("P99999");
setSelection
Selection of a region using the uniprot positions.
Parameters:
-
{Object|Array} selection
Can be either a plain object or an array. If object, it must have the fields start and end; Where "start" is greater than or equal to "end". If array, it must contain numbers representing the positions to be selected.
Example 1:
// Selection of the region in the interval [100,150].
instance.setSelection({start: 100, end: 150});
Example 2:
// Selection of the positions 4, 8 and 100. instance.setSelection([4,8,100]);
showControls
Shows the form of controls.
Example :
instance.showControls();
showLoadingImage
Parameters:
-
flag
toString
undisplay
Select and remove the coloring atoms.
Parameters:
-
{string} The
Jmol script.
Example :
// Select hetero atoms and remove the coloring .
instance.undisplay("hetero");
onPdbLoaded
Parameters:
-
{function} actionPerformed
An 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}
file
The name of the loaded file. -
{string}
result
A string with either value 'success' or 'failure'. -
{string}
message
Error message in case of result be 'failure'.
Example :
instance.onPdbLoaded(
function( objEvent ) {
alert( (objEvent.result == "success")? "Pdb file "+ objEvent.file+" loaded." : objEvent.message );
}
);
onPdbSelected
Parameters:
-
{function} actionPerformed
An 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}
pdbId
The name of the loaded file. -
{string}
alignmentId
Alignment identifier. -
{string}
start
Starting base index. -
{string}
end
Ending base index.
Example :
instance.onPdbSelected(
function( e ) {
alert( "Alignment " + e.alignmentId + " selected. Start: " + e.start + " End: " + e.end );
}
);
onRequestError
Parameters:
-
{function} actionPerformed
An 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}
file
The name of the loaded file. -
{string}
result
A string with either value 'success' or 'failure'. -
{string}
message
Error message in case of result be 'failure'.
Example :
instance.onRequestError(
function( e ) {
alert( e.message );
}
);
onSelection
Parameters:
-
{function} actionPerformed
An 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}
selectionType
String with either value 'region' or 'positions'. -
{Object|Array}
selection
If the type of selection is a region, this will be a Object with attributes 'start' and 'end'. In other case, this will be an array containing the selected positions.
Example :
instance.onSelection(
function( objEvent ) {
selection = (objEvent.selectionType === "region")? (objEvent.selection.start +" - "+ objEvent.selection.end) : objEvent.selection.join(',');
alert( "Selected "+objEvent.selectionType+": "+selection );
}
);