Class Biojs.Protein3D

Version 1.0.0.

Extends Biojs.

Defined in: Biojs.Protein3D.js.

Class Summary
Constructor Attributes	Constructor Name and Description
	Biojs.Protein3D(options) Pdb file 3D viewer component using JMol

Field Summary
Field Attributes	Field Name and Description
<inner>	eventTypes Array containing the supported event names
<inner>	opt Default options (and its values) for the Protein3D component.

Method Summary
Method Attributes	Method Name and Description
	applyJmolCommand(The) Apply a script to the Jmol applet that currently are displayed
	changeBackgroundColor(color) Select and coloring atoms.
	changeControlsVisiblility(flag) Shows/Hides the form of controls.
	constructor(options)
	display(The, color) Select and coloring atoms.
	displayAntialias(flag) Apply antialias rendering filter.
	displayColorScheme(colorScheme) Selects the color scheme for the current structure.
	displayNegative(color, flag) Selects the acidic atoms and do coloring.
	displayPolar(color, flag) Selects the polar atoms and do coloring.
	displayPositive(color, flag) Selects the basic atoms and do coloring.
	displayStyle(style) Selects the style for the current structure.
	displaySurface(name) Draws a translucent surface surrounding the protein.
	displayUnPolar(color, flag) Selects the polar atoms and do coloring.
	getSelection() Returns the information about the region of the currently PDB file.
	hideControls() Hides the form of controls.
	hideNegative() Undo the action of method displayNegative.
	hidePolar() Undo the action of method displayPolar.
	hidePositive() Undo the action of method displayPositive.
	hideSurface() Undo the action of method displaySurface.
	hideUnPolar() Undo the action of method displayUnPolar.
	removeSelection() Reverts the highlighting of a region and removes the current selection.
	reset() Restores the default display settings for the current PDB file.
	rotate(flag) Apply rotation.
	setHalosVisible(value) Enable/disable the visibility of halos for showing up the current selection.
	setPdb(pdb) Sets the pdb file to be displayed.
	setSelection(selection) Filters the currently provided PDB files: Only PDB files containing a part of the requested region are selectable.
	showControls() Shows the form of controls.
	showLoadingImage(flag)
	toString()
	undisplay(The) Select and remove the coloring atoms.

Methods borrowed from class Biojs:: addListener, extend, getId, listen, raiseEvent, setEventHandlers, setOptions

Event Summary
Event Attributes	Event Name and Description
	onPdbLoaded(actionPerformed)
	onSelection(actionPerformed)

Class Detail

Biojs.Protein3D(options)

Pdb file 3D viewer component using JMol
Author: John Gomez, Christine Jandrasits.

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-srv/view/files/1wq6.pdb' 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-srv/view/files/1wq6.pdb',
		dataType: 'text',
		success: function(pdbFile){
			instance.setPdb(pdbFile);
		},
		error: function(qXHR, textStatus, errorThrown){
			alert(textStatus);
		}
	});

Parameters:
{Object} options: An object with the options for Biojs.Protein3D component.

Options detailed:
{string} target: Identifier of the DIV tag where the component should be displayed.
{int} [width=597]: Width in pixels.
{int} [height=400]: Height in pixels.
{string} [jmolFolder="{BIOJS_HOME}/dependencies/jmol-12.0.48"]: Relative path of the jMol library.
{string} [loadingStatusImage="{BIOJS_HOME}/css/images/ajax-loader-1.gif"]: Relative path of the image to be displayed on loading status.
{string} [unpolarColor="salmon"]: This value is used by displayUnpolar() method for coloring hydrophobic residues.
{string} [negativeColor="red"]: This value is used by displayNegative() method for coloring acidic(-) residues.
{string} [positiveColor="blue"]: This value is used by displayNegative() method for coloring basic(+) residues.
{string} [polarColor="yellow"]: This value is used by displayNegative() method for coloring hydrophylic residues.
{string} [backgroundColor="white"]: Background color of the jMol applet
{bool} [enableControls=true]: Enable for showing the control panel. If value is 'false', it disables both methods showControls and hideControls.

Requires:: jQuery Core 1.6.4; jMol 12.0.48; Protein3D CSS

Field Detail

<inner> eventTypes

Array containing the supported event names

<inner> {Object} opt

Default options (and its values) for the Protein3D component.

Method Detail

applyJmolCommand(The)

Apply a script to the Jmol applet that currently are displayed

// Rotate one time in X-axis.
instance.applyJmolCommand('select all; cartoon off; meshribbons on;');

Parameters:
{string} The: Jmol script.

changeBackgroundColor(color)

Select and coloring atoms.

// Select hetero atoms and coloring with the RGB triplet code [xFF0088].  
instance.changeBackgroundColor("[xFF0088]");

Parameters:
{string} color: Refer to the Jmol documentation for availables coloring schemes.

changeControlsVisiblility(flag)

Shows/Hides the form of controls.

instance.changeControlsVisiblility(true);

Parameters:
flag

constructor(options)

Parameters:
options

display(The, color)

Select and coloring atoms.

// Select hetero atoms and coloring with the RGB triplet code [xFF0088].  
instance.display("hetero","[xFF0088]");

Parameters:
{string} The: color. Refer to the Jmol documentation for availables coloring schemes.
color

displayAntialias(flag)

Apply antialias rendering filter.

instance.displayAntialias(true);

Parameters:
{boolean} flag: If true, smooth rendering will be applied.

displayColorScheme(colorScheme)

Selects the color scheme for the current structure.

instance.displayColorScheme(Biojs.Protein3D.COLOR_RAINBOW);

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

displayNegative(color, flag)

Selects the acidic atoms and do coloring.

// 
instance.displayNegative("red");

Parameters:
{string} color Optional, Default: "red": Refer to the Jmol documentation for availables coloring schemes.
flag

displayPolar(color, flag)

Selects the polar atoms and do coloring.

// 
instance.displayPolar();

Parameters:
{string} color Optional, Default: "yellow": Refer to the Jmol documentation for availables coloring schemes.
flag

displayPositive(color, flag)

Selects the basic atoms and do coloring.

// 
instance.displayPositive();

Parameters:
{string} color Optional, Default: "blue": Refer to the Jmol documentation for availables coloring schemes.
flag

displayStyle(style)

Selects the style for the current structure.

instance.displayStyle( Biojs.Protein3D.STYLE_CPK );

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

displaySurface(name)

Draws a translucent surface surrounding the protein.

instance.displaySurface( Biojs.Protein3D.SURFACE_CAVITIES );

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

displayUnPolar(color, flag)

Selects the polar atoms and do coloring.

// 
instance.displayUnPolar();

Parameters:
{string} color Optional, Default: "salmon": Refer to the Jmol documentation for availables coloring schemes.
flag

{Object|Array} getSelection()

Returns the information about the region of the currently PDB file.

//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.

instance.hideControls();

hideNegative()

Undo the action of method displayNegative.

// 
instance.hideNegative();

hidePolar()

Undo the action of method displayPolar.

// 
instance.hidePolar();

hidePositive()

Undo the action of method displayPositive.

// 
instance.hidePositive();

hideSurface()

Undo the action of method displaySurface.

// 
instance.hideSurface();

hideUnPolar()

Undo the action of method displayUnPolar.

// 
instance.hideUnPolar();

removeSelection()

Reverts the highlighting of a region and removes the current selection.

instance.removeSelection();

reset()

Restores the default display settings for the current PDB file. Note: for removing out the current selection use removeSelection().

instance.reset();

rotate(flag)

Apply rotation.

instance.rotate(true);

Parameters:
flag

setHalosVisible(value)

Enable/disable the visibility of halos for showing up the current selection. On halos off, all not selected atoms will be translucent.

// Sets the halos off
instance.setHalosVisible(false);

Parameters:
{boolean} value: 'true' for halos on, 'false' for halos off.

setPdb(pdb)

Sets the pdb file to be displayed. Also triggers the event whenever a new pdb file is loaded.

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);
		}
	});

Parameters:
{string} pdb: The content of the pdb file.

setSelection(selection)

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.

// Selection of the region in the interval [100,150].
instance.setSelection({start: 100, end: 150});

// Selection of the positions 4, 8 and 100.
instance.setSelection([4,8,100]);

// Selection from 51 to 60, 87, and from 101 to 110
instance.setSelection([{start:51,end:60},87,{start:101,end:110}]);

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.

showControls()

Shows the form of controls.

instance.showControls();

showLoadingImage(flag)

Parameters:
flag

toString()

undisplay(The)

Select and remove the coloring atoms.

// Select hetero atoms and remove the coloring .  
instance.undisplay("hetero");

Parameters:
{string} The: Jmol script.

Event Detail

onPdbLoaded(actionPerformed)

instance.onPdbLoaded(
   function( objEvent ) {
      alert( (objEvent.result == "success")? "Pdb file "+ objEvent.file+" loaded."  : objEvent.message );
   }
);

Parameters:
{function} actionPerformed: An function which receives an Biojs.Event object as argument.

Event object data:
{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'.

onSelection(actionPerformed)

instance.onSelection(
   function( objEvent ) {
      selection = (objEvent.selectionType === "region")? (objEvent.selection.start +" - "+ objEvent.selection.end) : objEvent.selection.join(',');
      alert( "Selected "+objEvent.selectionType+": "+selection );
   }
);

Parameters:
{function} actionPerformed: An function which receives an Biojs.Event object as argument.

Event object data:
{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.

Classes

Class Biojs.Protein3D