Biojs.Protein3D 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
Pdb file 3D viewer component using JMol
Version
1.0.0.
To get the above Biojs.Protein3D to work on your page, you need to do the following:
- Include the file Biojs.Protein3D.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.Protein3D into.
window.onload = function() { var instance = new Biojs.Protein3D({ target: 'YourOwnDivId' }); // Example of loading a pdb file by means of an HTTP request to // 'http://www.ebi.ac.uk/pdbe/entry-files/pdb1wq6.ent' through the local proxy 'proxy.php'. // Note that instance.setPdb(data) is invoked once the data have been arrived. jQuery.ajax({ url: '../biojs/dependencies/proxy/proxy.php', data: 'url=http://www.ebi.ac.uk/pdbe/entry-files/pdb1wq6.ent', dataType: 'text', success: function(pdbFile){ instance.setPdb(pdbFile); }, error: function(qXHR, textStatus, errorThrown){ alert(textStatus); } }); };
Required Parameters
-
target | {string}
Identifier of the DIV tag where the component should be displayed.
Optional Parameters
-
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();
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
Reverts the highlighting of a region and removes the current selection.
Example :
instance.removeSelection();
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/entry-files/pdb3u01.ent',
dataType: 'text',
success: function(pdbFile){
instance.setPdb(pdbFile);
},
error: function(qXHR, textStatus, errorThrown){
alert(textStatus);
}
});
setSelection
Filters the currently provided PDB files: 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 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]);
Example 3:
// Selection from 51 to 60, 87, and from 101 to 110
instance.setSelection([{start:51,end:60},87,{start:101,end:110}]);
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 );
}
);
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 );
}
);