diff --git a/README.md b/README.md index 050c5a6e..e4b02ca5 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,7 @@ See the [help page](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html) for ## Download -The complete version with all libraries can be downloaded from [https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-0.9.2-dev.zip](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-0.9.2-dev.zip) +The complete version with all libraries can be downloaded from [https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-0.9.3-dev.zip](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-0.9.3-dev.zip) ## Contact @@ -92,6 +92,8 @@ gulp gh-pages ## Change log +The beta version [icn3d-0.9.3-dev](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-0.9.3-dev.zip) was release on March 9, 2016. Improved the following features: "Back" and "Forward" button, Export State, Open State. + The beta version [icn3d-0.9.2-dev](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-0.9.2-dev.zip) was release on March 4, 2016. CSS namespace was added. The file simple_ui.js was reorganized to share some codes with full_ui.js. A "Schematic" style was added to show one letter residue name in the C-alpha (for protein) or phosphorus (for nucleotide) position. The beta version [icn3d-0.9.1-dev](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-0.9.1-dev.zip) was release on Feb 9, 2016. The surface generation was switched from the iview version (surface.js) to the more efficient 3Dmol version (ProteinSurface4.js and marchingcube.js). diff --git a/full.html b/full.html index 21faa44f..d48aa3b9 100644 --- a/full.html +++ b/full.html @@ -1,7 +1,12 @@ - iCn3D Structure Viewer + + + + + +iCn3D Structure Viewer
@@ -37,9 +42,9 @@ // for mmdb structures, pass the parameters after the first "&" sign var inpara = ""; - var ampPos = document.URL.indexOf("&"); + var ampPos = document.URL.indexOf("?"); if(ampPos !== -1) { - inpara = document.URL.substr(ampPos); + inpara = "&" + document.URL.substr(ampPos + 1); } var gi = params.gi; diff --git a/icn3d.html b/icn3d.html index fbe5e57f..ee591df8 100644 --- a/icn3d.html +++ b/icn3d.html @@ -155,7 +155,6 @@

iCn3D Structure Viewer

setCamera
setColorByOptions
-setStylesForAtoms
setOutlineColor
showPicking
@@ -532,16 +531,16 @@

Commands for the advanced interface3. Style    
- - - - - - - - - - + + + + + + + + + + @@ -598,9 +597,8 @@

Commands for the advanced interface
a) Surface -> Type

- - + @@ -753,7 +751,7 @@

Display Options @@ -860,7 +857,7 @@

API Documents of the core library iCn3Dabove.

createSurfaceRepresentation(atoms, type, wireframe, opacity)    
-Create surface for "atoms". "type" can be 1 (Van der Waals surface), 2 (solvent excluded surface), 3 (solvent accessible surface), and 4 (molecular surface). "wireframe" is a boolean to determine whether to show the surface as a mesh. "opacity" is a value between 0 and 1. "1" means not transparent at all. "0" means 100% transparent.
+Create surface for "atoms". "type" can be 1 (Van der Waals surface), 2 (molecular surface), and 3 (solvent accessible surface). "wireframe" is a boolean to determine whether to show the surface as a mesh. "opacity" is a value between 0 and 1. "1" means not transparent at all. "0" means 100% transparent.

createTube(atoms, atomName, radius, bHighlight)    
Create tubes for "atoms" with certain "atomName". "radius" is the radius of the tubes. "bHighlight" is an option to draw the highlight for these atoms. The highlight could be outlines with bHighlight=1 and 3D objects with bHighlight=2 as mentioned above.
@@ -931,10 +928,6 @@

API Documents of the core library iCn3DsetStylesForAtoms(options, atoms)    
-Set the display styles for "atoms" according to the input "options" for sidechains, secondary, nucleotides, ligands, water, and ions as shown above.
-
- setOutlineColor(colorStr)    
Set the outline color when highlighting atoms. The available options are "yellow", "green", and "red".

diff --git a/index.html b/index.html index 1e985855..64795f57 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,12 @@ - iCn3D Structure Viewer + + + + + +iCn3D Structure Viewer
@@ -38,9 +43,9 @@ // for mmdb structures, pass the parameters after the first "&" sign var inpara = ""; - var ampPos = document.URL.indexOf("&"); + var ampPos = document.URL.indexOf("?"); if(ampPos !== -1) { - inpara = document.URL.substr(ampPos); + inpara = "&" + document.URL.substr(ampPos + 1); } var gi = params.gi; diff --git a/package.json b/package.json index c450c3a2..ebd12765 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "icn3d", - "version": "0.9.2-dev", + "version": "0.9.3-dev", "description": "iCn3D Structure Viewer", "main": "index.html", "scripts": { diff --git a/src/full_ui.js b/src/full_ui.js index c3c370ba..ca028959 100644 --- a/src/full_ui.js +++ b/src/full_ui.js @@ -54,8 +54,8 @@ var iCn3DUI = function(cfg) { me.options['background'] = 'black'; //black, grey, white me.options['color'] = 'spectrum'; //spectrum, secondary structure, charge, chain, residue, atom, red, green, blue, magenta, yellow, cyan, white, grey, custom me.options['sidechains'] = 'nothing'; //lines, stick, ball & stick, sphere, nothing - me.options['secondary'] = 'ribbon'; //ribbon, strand, cylinder & plate, c alpha trace, b factor tube, lines, stick, ball & stick, sphere, nothing - me.options['surface'] = 'nothing'; //Van der Waals surface, solvent excluded surface, solvent accessible surface, molecular surface, nothing + me.options['proteins'] = 'ribbon'; //ribbon, strand, cylinder & plate, c alpha trace, b factor tube, lines, stick, ball & stick, sphere, nothing + me.options['surface'] = 'nothing'; //Van der Waals surface, molecular surface, solvent accessible surface, nothing me.options['opacity'] = '0.8'; //1.0, 0.9, 0.8, 0.7, 0.6, 0.5 me.options['wireframe'] = 'no'; //yes, no me.options['ligands'] = 'stick'; //lines, stick, ball & stick, sphere, nothing @@ -69,15 +69,19 @@ var iCn3DUI = function(cfg) { me.options['picking'] = 'residue'; //no, atom, residue, strand me.options['nucleotides'] = 'phosphorus trace'; //nucleotide cartoon, phosphorus trace, lines, stick, ball & stick, sphere, nothing - me.options['surfaceregion'] = 'nothing'; //nothing, all, sphere - if(me.cfg.cid !== undefined) { me.options['picking'] = 'atom'; me.options['ligands'] = 'ball & stick'; } + else if(me.cfg.align !== undefined) { + me.options['picking'] = 'atom'; + me.options['proteins'] = 'c alpha trace'; + } me.modifyIcn3d(); + me.bAddCommands = true; + }; iCn3DUI.prototype = { @@ -153,10 +157,21 @@ iCn3DUI.prototype = { var transformation = {}; transformation.factor = this._zoomFactor; transformation.mouseChange = this.mouseChange; - transformation.quaternion = this.quaternion; - //this.transformation.push(transformation); + //transformation.quaternion = this.quaternion; + transformation.quaternion = {}; + transformation.quaternion._x = parseInt(this.quaternion._x * 1000) / 1000; + transformation.quaternion._y = parseInt(this.quaternion._y * 1000) / 1000; + transformation.quaternion._z = parseInt(this.quaternion._z * 1000) / 1000; + transformation.quaternion._w = parseInt(this.quaternion._w * 1000) / 1000; + + if(me.bAddCommands) { + this.commands.push('pickatom ' + atom.serial + '|||' + JSON.stringify(transformation)); + this.optionsHistory.push(this.cloneHash(this.options)); - this.commands.push('pickatom ' + atom.serial + '|||' + JSON.stringify(transformation)); + if(me.isSessionStorageSupported()) me.saveCommandsToSession(); + + me.STATENUMBER = this.commands.length; + } this.logs.push('pickatom ' + atom.serial + ' (chain: ' + atom.structure + '_' + atom.chain + ', residue: ' + atom.resn + ', number: ' + atom.resi + ', atom: ' + atom.name + ')'); if ( $( "#" + me.pre + "logtext" ).length ) { @@ -171,7 +186,9 @@ iCn3DUI.prototype = { me.deferred = $.Deferred(function() { if(me.isSessionStorageSupported()) me.getCommandsBeforeCrash(); - var width = window.innerWidth, height = window.innerHeight; + //var width = window.innerWidth, height = window.innerHeight; + var width = $( window ).width(); + var height = $( window ).height(); if(me.cfg.width.toString().indexOf('%') !== -1) { width = width * me.cfg.width.substr(0, me.cfg.width.toString().indexOf('%')) / 100.0 - me.LESSWIDTH; @@ -266,14 +283,14 @@ iCn3DUI.prototype = { else if(me.cfg.cid !== undefined) { me.inputid = me.cfg.cid; - var url = "https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/cid/" + me.inputid + "/description/jsonp"; - $.ajax({ - url: url, - dataType: 'jsonp', - success: function(data) { - if(data.InformationList !== undefined && data.InformationList.Information !== undefined) me.icn3d.moleculeTitle = data.InformationList.Information[0].Title; - } - }); + var url = "https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/cid/" + me.inputid + "/description/jsonp"; + $.ajax({ + url: url, + dataType: 'jsonp', + success: function(data) { + if(data.InformationList !== undefined && data.InformationList.Information !== undefined) me.icn3d.moleculeTitle = data.InformationList.Information[0].Title; + } + }); me.setLogCommand('load cid ' + me.cfg.cid, true); @@ -326,12 +343,12 @@ iCn3DUI.prototype = { // remove highlight of chains removeSeqChainBkgd: function(currChain) { - $( ".seqTitle" ).each(function( index ) { + $( ".icn3d-seqTitle" ).each(function( index ) { if(currChain === undefined) { - $( this ).removeClass('highlightSeq'); + $( this ).removeClass('icn3d-highlightSeq'); } else { - if($(this).attr('chain') !== currChain) $( this ).removeClass('highlightSeq'); + if($(this).attr('chain') !== currChain) $( this ).removeClass('icn3d-highlightSeq'); } }); }, @@ -339,7 +356,7 @@ iCn3DUI.prototype = { // remove all highlighted residue color removeSeqResidueBkgd: function() { $( ".residue" ).each(function( index ) { - $( this ).removeClass('highlightSeq'); + $( this ).removeClass('icn3d-highlightSeq'); }); }, @@ -409,7 +426,7 @@ iCn3DUI.prototype = { setStyle: function (selectionType, style) { var me = this; var atoms = {}; switch (selectionType) { - case 'protein': + case 'proteins': atoms = me.icn3d.intersectHash(me.icn3d.highlightAtoms, me.icn3d.proteins); break; case 'sidechains': @@ -439,18 +456,44 @@ iCn3DUI.prototype = { }, setLogCommand: function (str, bSetCommand) { var me = this; + var transformation = {}; transformation.factor = me.icn3d._zoomFactor; transformation.mouseChange = me.icn3d.mouseChange; - transformation.quaternion = me.icn3d.quaternion; - //me.icn3d.transformation.push(transformation); + + //transformation.quaternion = me.icn3d.quaternion; + transformation.quaternion = {}; + transformation.quaternion._x = parseInt(me.icn3d.quaternion._x * 1000) / 1000; + transformation.quaternion._y = parseInt(me.icn3d.quaternion._y * 1000) / 1000; + transformation.quaternion._z = parseInt(me.icn3d.quaternion._z * 1000) / 1000; + transformation.quaternion._w = parseInt(me.icn3d.quaternion._w * 1000) / 1000; if(bSetCommand) { - me.icn3d.commands.push(str + '|||' + JSON.stringify(transformation)); + // save the command only when it's not a history command, i.e., not in the process of going back and forth + if(me.bAddCommands) { + me.icn3d.commands.push(str + '|||' + JSON.stringify(transformation)); - if(me.isSessionStorageSupported()) me.saveCommandsToSession(); + me.icn3d.optionsHistory.push(me.icn3d.cloneHash(me.icn3d.options)); - me.STATENUMBER = me.icn3d.commands.length; + if(me.isSessionStorageSupported()) me.saveCommandsToSession(); + + me.STATENUMBER = me.icn3d.commands.length; + } + // If a new command was called, remove the forward commands and push to the command array + else if(!me.bAddCommands && me.STATENUMBER < me.icn3d.commands.length) { + var oldCommand = me.icn3d.commands[me.STATENUMBER - 1]; + var pos = oldCommand.indexOf('|||'); + if(str !== oldCommand.substr(0, pos)) { + me.icn3d.commands = me.icn3d.commands.slice(0, me.STATENUMBER); + + me.icn3d.commands.push(str + '|||' + JSON.stringify(transformation)); + me.icn3d.optionsHistory.push(me.icn3d.cloneHash(me.icn3d.options)); + + if(me.isSessionStorageSupported()) me.saveCommandsToSession(); + + me.STATENUMBER = me.icn3d.commands.length; + } + } } me.icn3d.logs.push(str); @@ -465,11 +508,17 @@ iCn3DUI.prototype = { var bExpandDialog = me.isMac() && !me.isMobile(); if(id === me.pre + 'dl_selectresidues' || id === me.pre + 'dl_alignment') { - if($( window ).width() > $( window ).height() ) { - me.resizeCanvas(0.5 * $( window ).width(), $( window ).height() - me.LESSHEIGHT); + //window_width = window.innerWidth; + //window_height = window.innerHeight; + + window_width = $( window ).width(); + window_height = $( window ).height(); - height = bExpandDialog ? 'auto' : $( window ).height() - me.LESSHEIGHT - 2*me.MENU_HEIGHT; - width = bExpandDialog ? 'auto' : 0.5 * $( window ).width() - me.LESSWIDTH; + if(window_width > window_height ) { + me.resizeCanvas(0.5 * window_width, window_height - me.LESSHEIGHT); + + height = bExpandDialog ? 'auto' : window_height - me.LESSHEIGHT - 2*me.MENU_HEIGHT; + width = bExpandDialog ? 'auto' : 0.5 * window_width - me.LESSWIDTH; //var position={ my: "left top", at: "right top", of: "#" + me.pre + "canvas", collision: "none" }; var position; @@ -492,15 +541,15 @@ iCn3DUI.prototype = { position: position, close: function(e) { me.cfg.resize = true; - me.resizeCanvas($( window ).width() - me.LESSWIDTH, $( window ).height() - me.LESSHEIGHT); + me.resizeCanvas(window_width - me.LESSWIDTH, window_height - me.LESSHEIGHT); } }); } else { - if(me.isMobile()) me.resizeCanvas($( window ).width() - me.LESSWIDTH, $( window ).height() - me.LESSHEIGHT - 30); + if(me.isMobile()) me.resizeCanvas(window_width - me.LESSWIDTH, window_height - me.LESSHEIGHT - 30); height = bExpandDialog ? 'auto' : 250; - width = bExpandDialog ? 'auto' : $( window ).width() - me.LESSWIDTH; + width = bExpandDialog ? 'auto' : window_width - me.LESSWIDTH; var position ={ my: "left top", at: "left bottom-30", of: "#" + me.pre + "canvas", collision: "none" }; @@ -1610,6 +1659,9 @@ iCn3DUI.prototype = { back: function () { var me = this; me.STATENUMBER--; + // do not add to the array me.icn3d.commands + me.bAddCommands = false; + if(me.STATENUMBER < 1) { me.STATENUMBER = 1; } @@ -1623,6 +1675,9 @@ iCn3DUI.prototype = { forward: function () { var me = this; me.STATENUMBER++; + // do not add to the array me.icn3d.commands + me.bAddCommands = false; + if(me.STATENUMBER > me.icn3d.commands.length) { me.STATENUMBER = me.icn3d.commands.length; } @@ -1693,28 +1748,28 @@ iCn3DUI.prototype = { adjustIcon: function () { var me = this; if(me.STATENUMBER === 1) { - if($("#" + me.pre + "back").hasClass('middleIcon')) { - $("#" + me.pre + "back").toggleClass('middleIcon'); - $("#" + me.pre + "back").toggleClass('endIcon'); + if($("#" + me.pre + "back").hasClass('icn3d-middleIcon')) { + $("#" + me.pre + "back").toggleClass('icn3d-middleIcon'); + $("#" + me.pre + "back").toggleClass('icn3d-endIcon'); } } else { - if($("#" + me.pre + "back").hasClass('endIcon')) { - $("#" + me.pre + "back").toggleClass('middleIcon'); - $("#" + me.pre + "back").toggleClass('endIcon'); + if($("#" + me.pre + "back").hasClass('icn3d-endIcon')) { + $("#" + me.pre + "back").toggleClass('icn3d-middleIcon'); + $("#" + me.pre + "back").toggleClass('icn3d-endIcon'); } } if(me.STATENUMBER === me.icn3d.commands.length) { - if($("#" + me.pre + "forward").hasClass('middleIcon')) { - $("#" + me.pre + "forward").toggleClass('middleIcon'); - $("#" + me.pre + "forward").toggleClass('endIcon'); + if($("#" + me.pre + "forward").hasClass('icn3d-middleIcon')) { + $("#" + me.pre + "forward").toggleClass('icn3d-middleIcon'); + $("#" + me.pre + "forward").toggleClass('icn3d-endIcon'); } } else { - if($("#" + me.pre + "forward").hasClass('endIcon')) { - $("#" + me.pre + "forward").toggleClass('middleIcon'); - $("#" + me.pre + "forward").toggleClass('endIcon'); + if($("#" + me.pre + "forward").hasClass('icn3d-endIcon')) { + $("#" + me.pre + "forward").toggleClass('icn3d-middleIcon'); + $("#" + me.pre + "forward").toggleClass('icn3d-endIcon'); } } }, @@ -1726,17 +1781,17 @@ iCn3DUI.prototype = { $("#" + id2).toggleClass('ui-icon-plus'); $("#" + id2).toggleClass('ui-icon-minus'); - $("#" + id1).toggleClass('shown'); - $("#" + id1).toggleClass('hidden'); + $("#" + id1).toggleClass('icn3d-shown'); + $("#" + id1).toggleClass('icn3d-hidden'); - $("#" + id2).toggleClass('shown'); - $("#" + id2).toggleClass('hidden'); + $("#" + id2).toggleClass('icn3d-shown'); + $("#" + id2).toggleClass('icn3d-hidden'); - $("#" + id3).toggleClass('shown'); - $("#" + id3).toggleClass('hidden'); + $("#" + id3).toggleClass('icn3d-shown'); + $("#" + id3).toggleClass('icn3d-hidden'); - $("#" + id4).toggleClass('shown'); - $("#" + id4).toggleClass('hidden'); + $("#" + id4).toggleClass('icn3d-shown'); + $("#" + id4).toggleClass('icn3d-hidden'); }, // exportState: function() { var me = this; @@ -1745,7 +1800,7 @@ iCn3DUI.prototype = { // window.open(url, '_blank'); // }, - loadScript: function (dataStr, bAddCommands) { var me = this; + loadScript: function (dataStr) { var me = this; me.icn3d.bRender = false; dataStr = dataStr.replace(/;/g, '\n') @@ -1754,24 +1809,45 @@ iCn3DUI.prototype = { me.STATENUMBER = me.icn3d.commands.length; - me.execCommands(me.STATENUMBER, bAddCommands); + me.execCommands(me.STATENUMBER); }, - execCommandsBase: function (start, end, bAddCommands, steps) { var me = this; + execCommandsBase: function (start, end, steps) { var me = this; for(var i=start; i <= end; ++i) { if(me.icn3d.commands[i].indexOf('load') !== -1) { - $.when(me.applyCommandLoad(me.icn3d.commands[i], bAddCommands)).then(function() { - me.execCommandsBase(i + 1, end, bAddCommands, steps); - }); - return; + if(end === 0 && start === end) { + $.when(me.applyCommandLoad(me.icn3d.commands[i])).then(function() { + me.icn3d.bRender = true; + + // end of all commands + if(1 === me.icn3d.commands.length) me.bAddCommands = true; + me.renderFinalStep(steps); + }); + return; + } + else { + $.when(me.applyCommandLoad(me.icn3d.commands[i])).then(function() { + me.execCommandsBase(i + 1, end, steps); + }); + return; + } } else { - me.applyCommand(me.icn3d.commands[i], bAddCommands); + me.applyCommand(me.icn3d.commands[i]); } if(i === steps - 1) { me.icn3d.bRender = true; + // end of all commands + if(i + 1 === me.icn3d.commands.length) me.bAddCommands = true; + + me.renderFinalStep(steps); + } + } + }, + + renderFinalStep: function(steps) { var me = this; var commandTransformation = me.icn3d.commands[steps-1].split('|||'); if(commandTransformation.length == 2) { @@ -1788,18 +1864,44 @@ iCn3DUI.prototype = { me.icn3d.quaternion._w = transformation.quaternion._w; } - me.icn3d.draw(); - } - } + var currHighlightAtoms = me.icn3d.cloneHash(me.icn3d.highlightAtoms); + + // assign styles using the options at that stage + me.icn3d.highlightAtoms = me.icn3d.atoms; + me.icn3d.setAtomStyleByOptions(me.icn3d.optionsHistory[steps - 1]); + + // set the highlightAtom back + me.icn3d.highlightAtoms = me.icn3d.cloneHash(currHighlightAtoms); + + if(me.icn3d.optionsHistory.length >= steps) { + var pickingOption = me.icn3d.optionsHistory[steps - 1].picking; + if(pickingOption === 'no') { + me.icn3d.picking = 0; + } + else if(pickingOption === 'atom') { + me.icn3d.picking = 1; + } + else if(pickingOption === 'residue') { + me.icn3d.picking = 2; + } + else if(pickingOption === 'strand') { + me.icn3d.picking = 3; + } + + me.icn3d.draw(me.icn3d.optionsHistory[steps - 1]); + } + else { + me.icn3d.draw(); + } }, - execCommands: function (steps, bAddCommands) { var me = this; + execCommands: function (steps) { var me = this; me.icn3d.bRender = false; - me.execCommandsBase(0, steps-1, bAddCommands, steps); + me.execCommandsBase(0, steps-1, steps); }, - applyCommandLoad: function (commandStr, bAddCommands) { var me = this; - if(bAddCommands !== undefined && bAddCommands) me.setLogCommand(commandStr, true); + applyCommandLoad: function (commandStr) { var me = this; + me.bAddCommands = false; // chain functions together me.deferred2 = $.Deferred(function() { @@ -1835,8 +1937,8 @@ iCn3DUI.prototype = { return me.deferred2; }, - applyCommand: function (commandStr, bAddCommands) { var me = this; - if(bAddCommands !== undefined && bAddCommands) me.setLogCommand(commandStr, true); + applyCommand: function (commandStr) { var me = this; + me.bAddCommands = false; var commandTransformation = commandStr.split('|||'); @@ -1908,11 +2010,13 @@ iCn3DUI.prototype = { me.icn3d.pickedatom = me.icn3d.atoms[atomid]; + me.icn3d.showPicking(me.icn3d.pickedatom); + // highlight the sequence background - var pickedResidue = me.icn3d.pickedatom.structure + '_' + me.icn3d.pickedatom.chain + '_' + me.icn3d.pickedatom.resi; - if($("#" + me.pre + pickedResidue).length !== 0) { - $("#" + me.pre + pickedResidue).toggleClass('highlightSeq'); - } + //var pickedResidue = me.icn3d.pickedatom.structure + '_' + me.icn3d.pickedatom.chain + '_' + me.icn3d.pickedatom.resi; + //if($("#" + me.pre + pickedResidue).length !== 0) { + // $("#" + me.pre + pickedResidue).toggleClass('icn3d-highlightSeq'); + //} } else if(command.indexOf('select zone cutoff') !== -1) { var radius = command.substr(command.lastIndexOf(' ') + 1); @@ -1927,7 +2031,7 @@ iCn3DUI.prototype = { me.setStyle(selectionType, style); } - else if(command.indexOf('color') !== -1) { + else if(command.indexOf('color') === 0) { var color = command.substr(command.indexOf(' ') + 1); //var options2 = {}; //options2['color'] = color; @@ -1990,42 +2094,45 @@ iCn3DUI.prototype = { else if(command.indexOf('set assembly off') !== -1) { me.icn3d.bAssembly = false; } - else if(command.indexOf('add label') !== -1) { - var paraArray = command.split(' | '); - var text = paraArray[0].substr(paraArray[0].lastIndexOf(' ') + 1); + else if(commandOri.indexOf('add label') !== -1) { + var paraArray = commandOri.split(' | '); + //var text = paraArray[0].substr(paraArray[0].lastIndexOf(' ') + 1); + var text = paraArray[0].substr(('add label').length + 1); var positionArray = paraArray[1].split(' '); - var x = position[1], y = position[3], z = position[5]; + var x = positionArray[1], y = positionArray[3], z = positionArray[5]; var size = paraArray[2].substr(paraArray[2].lastIndexOf(' ') + 1); var color = paraArray[3].substr(paraArray[3].lastIndexOf(' ') + 1); var background = paraArray[4].substr(paraArray[4].lastIndexOf(' ') + 1); - if(background === '0' || background === '') background = undefined; + if(size === '0' || size === '' || size === 'undefined') size = undefined; + if(color === '0' || color === '' || color === 'undefined') color = undefined; + if(background === '0' || background === '' || background === 'undefined') background = undefined; me.addLabel(text, x,y,z, size, color, background); me.icn3d.draw(); } else if(command.indexOf('add residue labels') !== -1) { - me.addResiudeLabels(); - me.icn3d.options['labels'] = 'yes'; + me.addResiudeLabels(); + me.icn3d.draw(); } - else if(command.indexOf('add residue topology') !== -1) { + else if(command.indexOf('add residue schematic') !== -1) { var options2 = {}; - options2['secondary'] = 'c alpha trace'; + options2['proteins'] = 'c alpha trace'; options2['nucleotides'] = 'phosphorus trace'; options2['ligands'] = 'nothing'; options2['water'] = 'nothing'; options2['ions'] = 'nothing'; - me.icn3d.setAtomStyleByOptions(options2); + me.icn3d.options['labels'] = 'yes'; - var bTopology = true; - me.addResiudeLabels(bTopology); + me.icn3d.setAtomStyleByOptions(options2); - me.icn3d.options['labels'] = 'yes'; + var bSchematic = true; + me.addResiudeLabels(bSchematic); //me.icn3d.draw(options2); me.icn3d.draw(); @@ -2037,7 +2144,7 @@ iCn3DUI.prototype = { var color = paraArray[3].substr(paraArray[3].lastIndexOf(' ') + 1); var dashed = paraArray[4].substr(paraArray[4].lastIndexOf(' ') + 1) === 'true' ? true : false; - me.addLine(p1Array[0], p1Array[1], p1Array[2], p2Array[0], p2Array[1], p2Array[2], color, dashed); + me.addLine(p1Array[1], p1Array[3], p1Array[5], p2Array[1], p2Array[3], p2Array[5], color, dashed); } else if(command.indexOf('zoom selection') !== -1) { me.icn3d.zoominSelection(); @@ -2200,7 +2307,7 @@ iCn3DUI.prototype = { html += me.setDialogs(); - html += me.setCustomDialogs(); + html += me.setCustomDialogs(); $( "#" + id).html(html); @@ -2224,610 +2331,631 @@ iCn3DUI.prototype = { $("#" + me.pre + "accordion6").hover( function(){ $("#" + me.pre + "accordion6 div").css("display", "block"); }, function(){ $("#" + me.pre + "accordion6 div").css("display", "none"); } ); }, - setMenu1: function() { var me = this; - var html = ""; - - html += "
"; - html += " "; - html += "

File

"; - html += "
"; - html += "
    "; - html += "
  • Retrieve by ID"; - html += "
      "; - html += "
    • PDB ID
      • "; - html += "
    • mmCIF ID
      • "; - html += "
    • MMDB ID
      • "; - //html += "
    • Search MMDB term
      • "; - html += "
    • gi
      • "; - html += "
    • PubChem CID
      • "; - html += "
    "; - html += "
    • "; - html += "
  • Open PDB File
    • "; - html += "
  • Open State/Script
    • "; - html += "
  • Export State
    • "; - html += "
  • Export Image
    • "; - html += "
  • Links"; - html += "
      "; - html += "
    • Structure Summary
      • "; - html += "
    • Find Similar Structures
      • "; - html += "
    • Literature
      • "; - html += "
    "; - html += "
    • "; - html += "
"; - html += "
"; - html += " "; - html += "
"; - - return html; - }, - - setMenu2: function() { var me = this; - var html = ""; - - html += "
"; - html += " "; - html += "

Select

"; - html += "
"; - html += "
    "; - - html += "
  • Select"; - html += "
      "; - if(me.cfg.cid === undefined) { - html += "
      • "; - } - html += "
      • "; - html += "
      • "; - html += "
      • "; - if(me.cfg.cid === undefined) { - html += "
      • "; - } - if(me.cfg.align !== undefined) { - html += "
      • "; - } - html += "
      • "; - html += "
    "; - html += "
    • "; - - html += "
  • Picking"; - html += "
      "; - if(me.cfg.cid === undefined) { - html += "
      • "; - html += "
      • "; - html += "
      • "; - } - else { - html += "
      • "; - html += "
      • "; - html += "
      • "; - } - - html += "
      • "; - html += "
    "; - html += "
    • "; - - html += "
  • Display"; - html += "
      "; - if(me.cfg.align !== undefined) { - html += "
      • "; - } - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
    "; - html += "
    • "; - - html += "
  • Highlight Color"; - html += "
      "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
    "; - html += "
    • "; - html += "
  • Highlight Style"; - html += "
      "; - - if(Detector.webgl) { - html += "
      • "; - html += "
      • "; - } - else { - html += "
      • "; - html += "
      • "; - } - html += "
    "; - html += "
    • "; - - html += "
"; - html += "
"; - html += " "; - html += "
"; - - return html; - }, - - setMenu3: function() { var me = this; - var html = ""; - - html += "
"; - html += " "; - html += "

Style

"; - html += "
"; - html += "
    "; - - if(me.cfg.cid === undefined) { - html += "
  • Protein"; - html += "
      "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - - html += "
      • "; - - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
    "; - html += "
    • "; - - html += "
  • Side Chains"; - html += "
      "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
    "; - html += "
    • "; - - html += "
  • Nucleotides"; - html += "
      "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
    "; - html += "
    • "; - - html += "
  • Ligands"; - html += "
      "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
    "; - html += "
    • "; - } - else { - html += "
  • Ligands"; - html += "
      "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
    "; - html += "
    • "; - } - - - html += "
  • Ions"; - html += "
      "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
    "; - html += "
    • "; - - html += "
  • Water"; - html += "
      "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
    "; - html += "
    • "; - - html += "
"; - html += "
"; - html += " "; - html += "
"; - - return html; - }, - - setMenu4: function() { var me = this; - var html = ""; - - html += "
"; - html += " "; - html += "

Color

"; - html += "
"; - html += "
    "; - - if(me.cfg.cid === undefined) { - if(me.cfg.mmdbid !== undefined) { - html += "
    • "; - } - else { - html += "
    • "; - } - html += "
    • "; - html += "
    • "; - //html += "
    • "; - html += "
    • "; - html += "
    • "; - html += "
    • "; - } - else { - html += "
    • "; - } - - html += "
  • -
    • "; - html += "
  • Unicolor"; - html += "
      "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
    "; - html += "
  • -
    • "; - html += "
    • "; - html += "
"; - html += "
"; - html += " "; - html += "
"; - - return html; - }, - - setMenu5: function() { var me = this; - var html = ""; - - html += "
"; - html += " "; - html += "

Surface

"; - html += "
"; - html += "
    "; - html += "
  • Type"; - html += "
      "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - // html += "
      • "; - html += "
      • "; - html += "
    "; - html += "
    • "; - html += "
  • Opacity"; - html += "
      "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
    "; - html += "
    • "; - html += "
  • Wireframe"; - html += "
      "; - html += "
      • "; - html += "
      • "; - html += "
    "; - html += "
    • "; - - html += "
  • Neighbors"; - html += "
      "; - html += "
      • "; - html += "
      • "; - html += "
    "; - html += "
    • "; - - - html += "
"; - html += "
"; - html += " "; - html += "
"; - - return html; - }, - - setMenu6: function() { var me = this; - var html = ""; - - html += "
"; - html += " "; - html += "

Other

"; - html += "
"; - html += "
    "; - html += "
  • Reset
    • "; - //html += "
  • Center on Picked Atom
    • "; - html += "
  • Zoom in Selection
    • "; - html += "
  • Back
    • "; - html += "
  • Forward
    • "; - if(me.cfg.cid === undefined) { - html += "
  • Assembly"; - html += "
      "; - html += "
      • "; - html += "
      • "; - html += "
    "; - html += "
    • "; - html += "
  • H-bonds to selection"; - html += "
      "; - html += "
      • "; - html += "
      • "; - html += "
    "; - html += "
    • "; - } - html += "
  • Label"; - html += "
      "; - - html += "
      • "; - if(me.cfg.cid === undefined) { - html += "
      • "; - } - html += "
      • "; - html += "
    "; - html += "
    • "; - html += "
  • Distance"; - html += "
      "; - html += "
      • "; - html += "
      • "; - html += "
    "; - html += "
    • "; - html += "
  • Auto Rotation"; - html += "
      "; - html += "
    • Rotate Left
      • "; - html += "
    • Rotate Right
      • "; - html += "
    • Rotate Up
      • "; - html += "
    • Rotate Down
      • "; - html += "
    "; - html += "
    • "; - html += "
  • Camera"; - html += "
      "; - html += "
      • "; - html += "
      • "; - html += "
    "; - html += "
    • "; - html += "
  • Background"; - html += "
      "; - html += "
      • "; - html += "
      • "; - html += "
      • "; - html += "
    "; - html += "
    • "; - html += "
  • XYZ-axes"; - html += "
      "; - html += "
      • "; - html += "
      • "; - html += "
    "; - html += "
    • "; - html += "
  • Transform Hint"; - html += "
      "; - html += "
    • Rotate"; - html += "
        "; - html += "
      • Left Mouse
        • "; - html += "
      • Key L: Left
        • "; - html += "
      • Key J: Right
        • "; - html += "
      • Key I: Up
        • "; - html += "
      • Key M: Down
        • "; - html += "
      "; - html += "
      • "; - html += "
    • Zoom"; - html += "
        "; - html += "
      • Middle Mouse
        • "; - html += "
      • Left Mouse + Shift
        • "; - html += "
      • Key Z: Zoom in
        • "; - html += "
      • Key X: Zoom out
        • "; - html += "
      "; - html += "
      • "; - html += "
    • Translate"; - html += "
        "; - html += "
      • Right Mouse
        • "; - html += "
      • Left Mouse + Ctrl
        • "; - html += "
      • Arrow Left: Left
        • "; - html += "
      • Arrow Right: Right
        • "; - html += "
      • Arrow Up: Up
        • "; - html += "
      • Arrow Down: Down
        • "; - html += "
      "; - html += "
      • "; - html += "
    "; - html += "
    • "; - html += "
  • Help
    • "; - html += "
"; - html += "
"; - html += " "; - html += "
"; - - return html; - }, - - setCommandLog: function() { var me = this; - var html = ""; - - html += "
"; - - html += "
Script/Log (Hint)

"; - html += " "; - html += "
"; - - return html; - }, - - setDialogs: function() { var me = this; - var html = ""; - - html += ""; - html += "
"; - - // filter for large structure - html += "
"; - //html += "
This large structure contains more than 50,000 atoms. Please select some structures/chains below to display.
"; - //html += " "; - html += "
"; - html += "
"; - html += "
"; - html += "
"; - html += "
"; - - html += "
"; - - html += "
"; - html += "
"; - - html += "
"; - - if(me.cfg.align !== undefined) { - html += "
"; - html += "
"; - html += "
"; - html += "
"; - } - - html += "
"; - html += "

a) Style -> Protein
ribbon: style protein ribbon
strand: style protein strand
cylinder & plate: style protein cylinder & plate
c alpha trace: style protein c alpha trace
b factor tube: style protein b factor tube
lines: style protein lines
stick: style protein stick
ball & stick: style protein ball & stick
sphere: style protein sphere
hide: style protein nothing
ribbon: style proteins ribbon
strand: style proteins strand
cylinder & plate: style proteins cylinder & plate
c alpha trace: style proteins c alpha trace
b factor tube: style proteins b factor tube
lines: style proteins lines
stick: style proteins stick
ball & stick: style proteins ball & stick
sphere: style proteins sphere
hide: style proteins nothing

b) Style -> Nucleotides
nucleotide cartoon: style nucleotides nucleotide cartoon
Van der Waals surface: set surface Van der Waals surface
solvent excluded surface: set surface solvent excluded surface
solvent accessible surface: set surface solvent accessible surface
molecular surface: set surface molecular surface
solvent accessible surface: set surface solvent accessible surface
hide: set surface nothing

b) Surface -> Opacity
"; - - html += " "; - - html += " "; - - //html += " "; - - html += "
"; - html += ""; - html += ""; - html += ""; - html += ""; - html += "
Select:
Name:
Description:
"; - html += " Atom Selection(s):
"; - html += " "; - html += "
"; - html += " "; - html += "
One line command: select [my_select] | name [my_name] | description [my_description], e.g., select :1-10 | name residue1-20 | description residues 1-20 in all chains

Hint:
Users can define \"select\" command similar to Chimera. For example, in the selection \"#1,2,3.A,B,C:5-10,Lys,ligands@CA,C\":
\"#1,2,3\" uses \"#\" to indicate structure selection.
\".A,B,C\" uses \".\" to indicate chain selection.
\":5-10,Lys,ligands\" uses \":\" to indicate residue selection. Residue could be predefined names: 'proteins', 'nucleotides', 'ligands', 'ions', and 'water'.
\"@CA,C\" uses \"@\" to indicate atom selection.

Partial definition is allowed, e.g., \":1-10\" selects all residue IDs 1-10 in all chains.

Different selections can be concatenated using semicolon, e.g., \":1-10; :Lys\" selects all residue IDs 1-10 and all Lys residues.
"; - - html += ""; - - html += "
"; - html += "PDB ID: "; - html += ""; - html += "
"; - - html += "
"; - html += "PDB File: "; - html += ""; - html += "
"; - - html += "
"; - html += "mmCIF ID: "; - html += ""; - html += "
"; - - html += "
"; - html += "MMDB ID: "; - html += ""; - html += "
"; - - html += "
"; - html += "Protein gi: "; - html += ""; - html += "
"; - - html += "
"; - html += "PubChem CID: "; - html += ""; - html += "
"; - - html += "
"; - html += "State file:
"; - html += ""; - html += "
"; - - html += "
"; - html += "Custom Color: "; - html += ""; - html += "
"; - - html += "
"; - html += " Threshold: Å
"; - html += " "; - html += "
"; - - html += "
Å
"; - html += " 2. the sphere around currently selected atoms"; - html += "
"; - - html += "
"; - - html += " "; - - html += " "; - - html += " "; - - if(me.cfg.align !== undefined) { - html += " "; - } - - html += " "; - - html += "
Structure:
"; - html += " 		Chain:
"; - html += " 		Aligned:
"; - html += " 		Custom:
"; - html += "
"; - - html += "
"; - - html += "
"; - html += "1. Text:
"; - html += "2. Size:
"; - html += "3. Color:
"; - html += "4. Background:
"; - html += "5. Pick TWO atoms
"; - html += "6. "; - html += "
"; - - html += "
"; - html += " 1. Pick TWO atoms
"; - html += " 2. "; - html += "
"; - - html += ""; - html += ""; - - return html; - }, - - setCustomDialogs: function() { var me = this; - var html = ""; - - return html; - }, + setMenu1: function() { var me = this; + var html = ""; + + html += "
"; + html += " "; + html += "

File

"; + html += "
"; + html += "
    "; + html += "
  • Retrieve by ID"; + html += "
      "; + html += "
    • PDB ID
      • "; + html += "
    • mmCIF ID
      • "; + html += "
    • MMDB ID
      • "; + //html += "
    • Search MMDB term
      • "; + html += "
    • gi
      • "; + html += "
    • PubChem CID
      • "; + html += "
    "; + html += "
    • "; + html += "
  • Open PDB File
    • "; + html += "
  • Open State/Script
    • "; + html += "
  • Export State
    • "; + html += "
  • Export Image
    • "; + html += "
  • Links"; + html += "
      "; + html += "
    • Structure Summary
      • "; + html += "
    • Find Similar Structures
      • "; + html += "
    • Literature
      • "; + html += "
    "; + html += "
    • "; + html += "
"; + html += "
"; + html += " "; + html += "
"; + + return html; + }, + + setMenu2: function() { var me = this; + var html = ""; + + html += "
"; + html += " "; + html += "

Select

"; + html += "
"; + html += "
    "; + + html += "
  • Select"; + html += "
      "; + if(me.cfg.cid === undefined) { + html += "
      • "; + } + html += "
      • "; + html += "
      • "; + html += "
      • "; + if(me.cfg.cid === undefined) { + html += "
      • "; + } + if(me.cfg.align !== undefined) { + html += "
      • "; + } + html += "
      • "; + html += "
    "; + html += "
    • "; + + html += "
  • Picking"; + html += "
      "; + if(me.cfg.cid === undefined) { + html += "
      • "; + html += "
      • "; + html += "
      • "; + } + else { + html += "
      • "; + html += "
      • "; + html += "
      • "; + } + + html += "
      • "; + html += "
    "; + html += "
    • "; + + html += "
  • Display"; + html += "
      "; + if(me.cfg.align !== undefined) { + html += "
      • "; + } + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
    "; + html += "
    • "; + + html += "
  • Highlight Color"; + html += "
      "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
    "; + html += "
    • "; + html += "
  • Highlight Style"; + html += "
      "; + + if(Detector.webgl) { + html += "
      • "; + html += "
      • "; + } + else { + html += "
      • "; + html += "
      • "; + } + html += "
    "; + html += "
    • "; + + html += "
"; + html += "
"; + html += " "; + html += "
"; + + return html; + }, + + setMenu3: function() { var me = this; + var html = ""; + + html += "
"; + html += " "; + html += "

Style

"; + html += "
"; + html += "
    "; + + if(me.cfg.cid === undefined) { + if(me.cfg.align !== undefined) { + html += "
  • Proteins"; + html += "
      "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + + html += "
      • "; + + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
    "; + html += "
    • "; + } + else { + html += "
  • Protein"; + html += "
      "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + + html += "
      • "; + + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
    "; + html += "
    • "; + } + + html += "
  • Side Chains"; + html += "
      "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
    "; + html += "
    • "; + + html += "
  • Nucleotides"; + html += "
      "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
    "; + html += "
    • "; + + html += "
  • Ligands"; + html += "
      "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
    "; + html += "
    • "; + } + else { + html += "
  • Ligands"; + html += "
      "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
    "; + html += "
    • "; + } + + + html += "
  • Ions"; + html += "
      "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
    "; + html += "
    • "; + + html += "
  • Water"; + html += "
      "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
    "; + html += "
    • "; + + html += "
"; + html += "
"; + html += " "; + html += "
"; + + return html; + }, + + setMenu4: function() { var me = this; + var html = ""; + + html += "
"; + html += " "; + html += "

Color

"; + html += "
"; + html += "
    "; + + if(me.cfg.cid === undefined) { + if(me.cfg.mmdbid !== undefined) { + html += "
    • "; + } + else { + html += "
    • "; + } + html += "
    • "; + html += "
    • "; + //html += "
    • "; + html += "
    • "; + html += "
    • "; + html += "
    • "; + } + else { + html += "
    • "; + } + + html += "
  • -
    • "; + html += "
  • Unicolor"; + html += "
      "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
    "; + html += "
  • -
    • "; + html += "
    • "; + html += "
"; + html += "
"; + html += " "; + html += "
"; + + return html; + }, + + setMenu5: function() { var me = this; + var html = ""; + + html += "
"; + html += " "; + html += "

Surface

"; + html += "
"; + html += "
    "; + html += "
  • Type"; + html += "
      "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + // html += "
      • "; + html += "
      • "; + html += "
    "; + html += "
    • "; + html += "
  • Opacity"; + html += "
      "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
    "; + html += "
    • "; + html += "
  • Wireframe"; + html += "
      "; + html += "
      • "; + html += "
      • "; + html += "
    "; + html += "
    • "; + + html += "
  • Neighbors"; + html += "
      "; + html += "
      • "; + html += "
      • "; + html += "
    "; + html += "
    • "; + + + html += "
"; + html += "
"; + html += " "; + html += "
"; + + return html; + }, + + setMenu6: function() { var me = this; + var html = ""; + + html += "
"; + html += " "; + html += "

Other

"; + html += "
"; + html += "
    "; + html += "
  • Reset
    • "; + //html += "
  • Center on Picked Atom
    • "; + html += "
  • Zoom in Selection
    • "; + html += "
  • Back
    • "; + html += "
  • Forward
    • "; + if(me.cfg.cid === undefined) { + html += "
  • Assembly"; + html += "
      "; + html += "
      • "; + html += "
      • "; + html += "
    "; + html += "
    • "; + html += "
  • H-bonds to selection"; + html += "
      "; + html += "
      • "; + html += "
      • "; + html += "
    "; + html += "
    • "; + } + html += "
  • Label"; + html += "
      "; + + html += "
      • "; + if(me.cfg.cid === undefined) { + html += "
      • "; + } + html += "
      • "; + html += "
    "; + html += "
    • "; + html += "
  • Distance"; + html += "
      "; + html += "
      • "; + html += "
      • "; + html += "
    "; + html += "
    • "; + html += "
  • Auto Rotation"; + html += "
      "; + html += "
    • Rotate Left
      • "; + html += "
    • Rotate Right
      • "; + html += "
    • Rotate Up
      • "; + html += "
    • Rotate Down
      • "; + html += "
    "; + html += "
    • "; + html += "
  • Camera"; + html += "
      "; + html += "
      • "; + html += "
      • "; + html += "
    "; + html += "
    • "; + html += "
  • Background"; + html += "
      "; + html += "
      • "; + html += "
      • "; + html += "
      • "; + html += "
    "; + html += "
    • "; + html += "
  • XYZ-axes"; + html += "
      "; + html += "
      • "; + html += "
      • "; + html += "
    "; + html += "
    • "; + html += "
  • Transform Hint"; + html += "
      "; + html += "
    • Rotate"; + html += "
        "; + html += "
      • Left Mouse
        • "; + html += "
      • Key L: Left
        • "; + html += "
      • Key J: Right
        • "; + html += "
      • Key I: Up
        • "; + html += "
      • Key M: Down
        • "; + html += "
      "; + html += "
      • "; + html += "
    • Zoom"; + html += "
        "; + html += "
      • Middle Mouse
        • "; + html += "
      • Left Mouse + Shift
        • "; + html += "
      • Key Z: Zoom in
        • "; + html += "
      • Key X: Zoom out
        • "; + html += "
      "; + html += "
      • "; + html += "
    • Translate"; + html += "
        "; + html += "
      • Right Mouse
        • "; + html += "
      • Left Mouse + Ctrl
        • "; + html += "
      • Arrow Left: Left
        • "; + html += "
      • Arrow Right: Right
        • "; + html += "
      • Arrow Up: Up
        • "; + html += "
      • Arrow Down: Down
        • "; + html += "
      "; + html += "
      • "; + html += "
    "; + html += "
    • "; + html += "
  • Help
    • "; + html += "
"; + html += "
"; + html += " "; + html += "
"; + + return html; + }, + + setCommandLog: function() { var me = this; + var html = ""; + + html += "
"; + + html += "
Script/Log (Hint)

"; + html += " "; + html += "
"; + + return html; + }, + + setDialogs: function() { var me = this; + var html = ""; + + html += ""; + html += "
"; + + // filter for large structure + html += "
"; + //html += "
This large structure contains more than 50,000 atoms. Please select some structures/chains below to display.
"; + //html += " "; + html += "
"; + html += "
"; + html += "
"; + html += "
"; + html += "
"; + + html += "
"; + + html += "
"; + html += "
"; + + html += "
"; + + if(me.cfg.align !== undefined) { + html += "
"; + html += "
"; + html += "
"; + html += "
"; + } + + html += "
"; + html += " "; + + html += " "; + + html += " "; + + //html += " "; + + html += "
"; + html += ""; + html += ""; + html += ""; + html += ""; + html += "
Select:
Name:
Description:
"; + html += " Atom Selection(s):
"; + html += " "; + html += "
"; + html += " "; + html += "
One line command: select [my_select] | name [my_name] | description [my_description], e.g., select :1-10 | name residue1-20 | description residues 1-20 in all chains

Hint:
Users can define \"select\" command similar to Chimera. For example, in the selection \"#1,2,3.A,B,C:5-10,Lys,ligands@CA,C\":
\"#1,2,3\" uses \"#\" to indicate structure selection.
\".A,B,C\" uses \".\" to indicate chain selection.
\":5-10,Lys,ligands\" uses \":\" to indicate residue selection. Residue could be predefined names: 'proteins', 'nucleotides', 'ligands', 'ions', and 'water'.
\"@CA,C\" uses \"@\" to indicate atom selection.

Partial definition is allowed, e.g., \":1-10\" selects all residue IDs 1-10 in all chains.

Different selections can be concatenated using semicolon, e.g., \":1-10; :Lys\" selects all residue IDs 1-10 and all Lys residues.
"; + + html += "
"; + + html += "
"; + html += "PDB ID: "; + html += ""; + html += "
"; + + html += "
"; + html += "PDB File: "; + html += ""; + html += "
"; + + html += "
"; + html += "mmCIF ID: "; + html += ""; + html += "
"; + + html += "
"; + html += "MMDB ID: "; + html += ""; + html += "
"; + + html += "
"; + html += "Protein gi: "; + html += ""; + html += "
"; + + html += "
"; + html += "PubChem CID: "; + html += ""; + html += "
"; + + html += "
"; + html += "State file:
"; + html += ""; + html += "
"; + + html += "
"; + html += "Custom Color: "; + html += ""; + html += "
"; + + html += "
"; + html += " Threshold: Å
"; + html += " "; + html += "
"; + + html += "
Å
"; + html += " 2. the sphere around currently selected atoms"; + html += "
"; + + html += "
"; + + html += " "; + + html += " "; + + html += " "; + + if(me.cfg.align !== undefined) { + html += " "; + } + + html += " "; + + html += "
Structure:
"; + html += " 		Chain:
"; + html += " 		Aligned:
"; + html += " 		Custom:
"; + html += "
"; + + html += "
"; + + html += "
"; + html += "1. Text:
"; + html += "2. Size:
"; + html += "3. Color:
"; + html += "4. Background:
"; + html += "5. Pick TWO atoms
"; + html += "6. "; + html += "
"; + + html += "
"; + html += " 1. Pick TWO atoms
"; + html += " 2. "; + html += "
"; + + html += "
"; + html += ""; + + return html; + }, + + setCustomDialogs: function() { var me = this; + var html = ""; + + return html; + }, setTools: function() { var me = this; // second row @@ -3380,93 +3508,94 @@ iCn3DUI.prototype = { }, // menu 3 - clickMenu3_proteinRibbon: function() { var me = this; - $("#" + me.pre + "menu3_proteinRibbon").click(function (e) { + clickmenu3_proteinsRibbon: function() { var me = this; + $("#" + me.pre + "menu3_proteinsRibbon").click(function (e) { //e.preventDefault(); - me.setStyle('protein', 'ribbon'); - me.setLogCommand('style protein ribbon', true); + me.setStyle('proteins', 'ribbon'); + me.setLogCommand('style proteins ribbon', true); }); }, - clickMenu3_proteinStrand: function() { var me = this; - $("#" + me.pre + "menu3_proteinStrand").click(function (e) { + clickmenu3_proteinsStrand: function() { var me = this; + $("#" + me.pre + "menu3_proteinsStrand").click(function (e) { //e.preventDefault(); - me.setStyle('protein', 'strand'); - me.setLogCommand('style protein strand', true); + me.setStyle('proteins', 'strand'); + + me.setLogCommand('style proteins strand', true); }); }, - clickMenu3_proteinCylinder: function() { var me = this; - $("#" + me.pre + "menu3_proteinCylinder").click(function (e) { + clickmenu3_proteinsCylinder: function() { var me = this; + $("#" + me.pre + "menu3_proteinsCylinder").click(function (e) { //e.preventDefault(); - me.setStyle('protein', 'cylinder & plate'); - me.setLogCommand('style protein cylinder & plate', true); + me.setStyle('proteins', 'cylinder & plate'); + me.setLogCommand('style proteins cylinder & plate', true); }); }, - clickMenu3_proteinCalpha: function() { var me = this; - $("#" + me.pre + "menu3_proteinCalpha").click(function (e) { + clickmenu3_proteinsCalpha: function() { var me = this; + $("#" + me.pre + "menu3_proteinsCalpha").click(function (e) { //e.preventDefault(); - me.setStyle('protein', 'c alpha trace'); - me.setLogCommand('style protein c alpha trace', true); + me.setStyle('proteins', 'c alpha trace'); + me.setLogCommand('style proteins c alpha trace', true); }); }, - clickMenu3_proteinBfactor: function() { var me = this; - $("#" + me.pre + "menu3_proteinBfactor").click(function (e) { + clickmenu3_proteinsBfactor: function() { var me = this; + $("#" + me.pre + "menu3_proteinsBfactor").click(function (e) { //e.preventDefault(); - me.setStyle('protein', 'b factor tube'); - me.setLogCommand('style protein b factor tube', true); + me.setStyle('proteins', 'b factor tube'); + me.setLogCommand('style proteins b factor tube', true); }); }, - clickMenu3_proteinLines: function() { var me = this; - $("#" + me.pre + "menu3_proteinLines").click(function (e) { + clickmenu3_proteinsLines: function() { var me = this; + $("#" + me.pre + "menu3_proteinsLines").click(function (e) { //e.preventDefault(); - me.setStyle('protein', 'lines'); - me.setLogCommand('style protein lines', true); + me.setStyle('proteins', 'lines'); + me.setLogCommand('style proteins lines', true); }); }, - clickMenu3_proteinStick: function() { var me = this; - $("#" + me.pre + "menu3_proteinStick").click(function (e) { + clickmenu3_proteinsStick: function() { var me = this; + $("#" + me.pre + "menu3_proteinsStick").click(function (e) { //e.preventDefault(); - me.setStyle('protein', 'stick'); - me.setLogCommand('style protein stick', true); + me.setStyle('proteins', 'stick'); + me.setLogCommand('style proteins stick', true); }); }, - clickMenu3_proteinBallstick: function() { var me = this; - $("#" + me.pre + "menu3_proteinBallstick").click(function (e) { + clickmenu3_proteinsBallstick: function() { var me = this; + $("#" + me.pre + "menu3_proteinsBallstick").click(function (e) { //e.preventDefault(); - me.setStyle('protein', 'ball & stick'); - me.setLogCommand('style protein ball & stick', true); + me.setStyle('proteins', 'ball & stick'); + me.setLogCommand('style proteins ball & stick', true); }); }, - clickMenu3_proteinSphere: function() { var me = this; - $("#" + me.pre + "menu3_proteinSphere").click(function (e) { + clickmenu3_proteinsSphere: function() { var me = this; + $("#" + me.pre + "menu3_proteinsSphere").click(function (e) { //e.preventDefault(); - me.setStyle('protein', 'sphere'); - me.setLogCommand('style protein sphere', true); + me.setStyle('proteins', 'sphere'); + me.setLogCommand('style proteins sphere', true); }); }, - clickMenu3_proteinNothing: function() { var me = this; - $("#" + me.pre + "menu3_proteinNothing").click(function (e) { + clickmenu3_proteinsNothing: function() { var me = this; + $("#" + me.pre + "menu3_proteinsNothing").click(function (e) { //e.preventDefault(); - me.setStyle('protein', 'nothing'); - me.setLogCommand('style protein nothing', true); + me.setStyle('proteins', 'nothing'); + me.setLogCommand('style proteins nothing', true); }); }, @@ -3858,6 +3987,7 @@ iCn3DUI.prototype = { }); }, +/* clickMenu5_surfaceSES: function() { var me = this; $("#" + me.pre + "menu5_surfaceSES").click(function (e) { //e.preventDefault(); @@ -3866,7 +3996,7 @@ iCn3DUI.prototype = { me.setLogCommand('set surface solvent excluded surface', true); }); }, - +*/ clickMenu5_surfaceSAS: function() { var me = this; $("#" + me.pre + "menu5_surfaceSAS").click(function (e) { //e.preventDefault(); @@ -3880,7 +4010,8 @@ iCn3DUI.prototype = { $("#" + me.pre + "menu5_surfaceMolecular").click(function (e) { //e.preventDefault(); - me.setOption('surface', 'molecular surface'); + //me.setOption('surface', 'molecular surface'); + me.setOption('surface', 'solvent excluded surface'); me.setLogCommand('set surface molecular surface', true); }); }, @@ -3990,36 +4121,36 @@ iCn3DUI.prototype = { clickMenu6_addlabelResidues: function() { var me = this; $("#" + me.pre + "menu6_addlabelResidues").click(function (e) { //e.preventDefault(); + me.icn3d.options['labels'] = 'yes'; me.setLogCommand('add residue labels', true); me.addResiudeLabels(); - me.icn3d.options['labels'] = 'yes'; me.icn3d.draw(); }); }, - clickMenu6_addlabelResidueTopology: function() { var me = this; - $("#" + me.pre + "menu6_addlabelResidueTopology").click(function (e) { + clickMenu6_addlabelResidueSchematic: function() { var me = this; + $("#" + me.pre + "menu6_addlabelResidueSchematic").click(function (e) { //e.preventDefault(); + me.icn3d.options['labels'] = 'yes'; - me.setLogCommand('add residue topology', true); + me.setLogCommand('add residue schematic', true); var options2 = {}; - options2['secondary'] = 'c alpha trace'; - options2['nucleotides'] = 'phosphorus trace'; + options2['proteins'] = 'c alpha trace'; + options2['nucleotides'] = 'phosphorus trace'; options2['ligands'] = 'nothing'; options2['water'] = 'nothing'; options2['ions'] = 'nothing'; me.icn3d.setAtomStyleByOptions(options2); - var bTopology = true; - me.addResiudeLabels(bTopology); + var bSchematic = true; + me.addResiudeLabels(bSchematic); - me.icn3d.options['labels'] = 'yes'; //me.icn3d.draw(options2); me.icn3d.draw(); }); @@ -4031,6 +4162,7 @@ iCn3DUI.prototype = { me.openDialog(me.pre + 'dl_addlabel', 'Add custom labels'); me.icn3d.picking = 1; + me.icn3d.options['picking'] = 'atom'; me.icn3d.pickpair = true; me.icn3d.pickedatomNum = 0; }); @@ -4044,12 +4176,13 @@ iCn3DUI.prototype = { me.icn3d.pickpair = false; //me.icn3d.pickedatomNum = 0; + me.icn3d.options["labels"] = "no"; + var select = "set labels off"; me.setLogCommand(select, true); me.icn3d.labels = []; - me.icn3d.options["labels"] = "no"; me.icn3d.draw(); }); @@ -4061,6 +4194,7 @@ iCn3DUI.prototype = { me.openDialog(me.pre + 'dl_distance', 'Measure the distance of atoms'); me.icn3d.picking = 1; + me.icn3d.options['picking'] = 'atom'; me.icn3d.pickpair = true; me.icn3d.pickedatomNum = 0; }); @@ -4074,12 +4208,13 @@ iCn3DUI.prototype = { me.icn3d.pickpair = false; //me.icn3d.pickedatomNum = 0; + me.icn3d.options["lines"] = "no"; + var select = "set lines off"; me.setLogCommand(select, true); me.icn3d.lines = []; - me.icn3d.options["lines"] = "no"; me.icn3d.draw(); }); }, @@ -4228,12 +4363,12 @@ iCn3DUI.prototype = { $("#" + me.pre + "menu6_hbondsNo").click(function (e) { //e.preventDefault(); - var select = "set hbonds off"; - me.setLogCommand(select, true); - me.icn3d.options["hbonds"] = "no"; me.icn3d.options["lines"] = "no"; + var select = "set hbonds off"; + me.setLogCommand(select, true); + me.icn3d.lines = []; me.icn3d.draw(); @@ -4270,10 +4405,10 @@ iCn3DUI.prototype = { me.commandname = "seq_" + id.substr(id.indexOf('_') + 1); } - $(this).toggleClass('highlightSeq'); + $(this).toggleClass('icn3d-highlightSeq'); var residueid = id.substr(id.indexOf('_') + 1); - if($(this).hasClass('highlightSeq')) { + if($(this).hasClass('icn3d-highlightSeq')) { //atom.color = new THREE.Color(0xFFFF00); me.selectAResidue(residueid, me.commandname); @@ -4283,7 +4418,7 @@ iCn3DUI.prototype = { for (var i in me.icn3d.residues[residueid]) { var atom = me.icn3d.atoms[i]; - if(!$(this).hasClass('highlightSeq')) { + if(!$(this).hasClass('icn3d-highlightSeq')) { //atom.color = me.icn3d.atomPrevColors[i]; //delete me.icn3d.highlightAtoms[i]; @@ -4309,21 +4444,21 @@ iCn3DUI.prototype = { // select annotation title $(".ui-selected", this).each(function() { var currChain = $(this).attr('chain'); - if($(this).hasClass('seqTitle')) { + if($(this).hasClass('icn3d-seqTitle')) { me.SELECT_RESIDUE = false; me.setLogCommand('select residue ' + Object.keys(me.selectedResidues), true); me.removeSeqChainBkgd(currChain); me.removeSeqResidueBkgd(); - $(this).toggleClass('highlightSeq'); + $(this).toggleClass('icn3d-highlightSeq'); var chainid = $(this).attr('chain'); //var anno = $(this).attr('anno'); // annotation ids are from 0 to number of annotations. "anno" is "sequence" for the sequence line //var commanddesc = $(this).text() + " (" + chainid + ")"; var commandname = "seq_" + $(this).text().trim(); - if($(this).hasClass('highlightSeq')) { + if($(this).hasClass('icn3d-highlightSeq')) { var command = 'select chain ' + chainid; me.selectAChain(chainid, commandname); me.setLogCommand(command, true); @@ -4371,10 +4506,10 @@ iCn3DUI.prototype = { me.commandname = "alignSeq_" + id.substr(id.indexOf('_') + 1); } - $(this).toggleClass('highlightSeq'); + $(this).toggleClass('icn3d-highlightSeq'); var residueid = id.substr(id.indexOf('_') + 1); - if($(this).hasClass('highlightSeq')) { + if($(this).hasClass('icn3d-highlightSeq')) { //atom.color = new THREE.Color(0xFFFF00); me.selectAResidue(residueid, me.commandname); @@ -4384,7 +4519,7 @@ iCn3DUI.prototype = { for (var i in me.icn3d.residues[residueid]) { var atom = me.icn3d.atoms[i]; - if(!$(this).hasClass('highlightSeq')) { + if(!$(this).hasClass('icn3d-highlightSeq')) { //atom.color = me.icn3d.atomPrevColors[i]; delete me.icn3d.highlightAtoms[i]; @@ -4411,21 +4546,21 @@ iCn3DUI.prototype = { // select annotation title $(".ui-selected", this).each(function() { var currChain = $(this).attr('chain'); - if($(this).hasClass('seqTitle')) { + if($(this).hasClass('icn3d-seqTitle')) { me.SELECT_RESIDUE = false; me.setLogCommand('select residue ' + Object.keys(me.selectedResidues), true); me.removeSeqChainBkgd(currChain); me.removeSeqResidueBkgd(); - $(this).toggleClass('highlightSeq'); + $(this).toggleClass('icn3d-highlightSeq'); var chainid = $(this).attr('chain'); //var anno = $(this).attr('anno'); // annotation ids are from 0 to number of annotations. "anno" is "sequence" for the sequence line //var commanddesc = $(this).text() + " (" + chainid + ")"; var commanddesc = "alignSeq_" + $(this).text().trim(); - if($(this).hasClass('highlightSeq')) { + if($(this).hasClass('icn3d-highlightSeq')) { me.selectAAlignChain(chainid, commanddesc); me.setLogCommand('select alignChain ' + chainid, true); } @@ -4446,7 +4581,7 @@ iCn3DUI.prototype = { }, selectSequenceMobile: function() { var me = this; - $("#" + me.pre + "dl_sequence").add("#" + me.pre + "dl_sequence2").on('click', '.residue', function(e) { + $("#" + me.pre + "dl_sequence").add("#" + me.pre + "dl_sequence2").on('click', '.icn3d-residue', function(e) { $("#" + me.pre + "chainid").val(""); $("#" + me.pre + "structureid").val(""); @@ -4473,10 +4608,10 @@ iCn3DUI.prototype = { me.commandname = "seq_" + id.substr(id.indexOf('_') + 1); } - $(this).toggleClass('highlightSeq'); + $(this).toggleClass('icn3d-highlightSeq'); var residueid = id.substr(id.indexOf('_') + 1); - if($(this).hasClass('highlightSeq')) { + if($(this).hasClass('icn3d-highlightSeq')) { //atom.color = new THREE.Color(0xFFFF00); me.selectAResidue(residueid, me.commandname); @@ -4486,7 +4621,7 @@ iCn3DUI.prototype = { for (var i in me.icn3d.residues[residueid]) { var atom = me.icn3d.atoms[i]; - if(!$(this).hasClass('highlightSeq')) { + if(!$(this).hasClass('icn3d-highlightSeq')) { //atom.color = me.icn3d.atomPrevColors[i]; delete me.icn3d.highlightAtoms[i]; @@ -4505,7 +4640,7 @@ iCn3DUI.prototype = { }, selectChainMobile: function() { var me = this; - $("#" + me.pre + "dl_sequence").on('click', '.seqTitle', function(e) { + $("#" + me.pre + "dl_sequence").on('click', '.icn3d-seqTitle', function(e) { $("#" + me.pre + "chainid").val(""); $("#" + me.pre + "structureid").val(""); @@ -4521,14 +4656,14 @@ iCn3DUI.prototype = { me.removeSeqResidueBkgd(); // select annotation title - $(this).toggleClass('highlightSeq'); + $(this).toggleClass('icn3d-highlightSeq'); var chainid = $(this).attr('chain'); //var anno = $(this).attr('anno'); // annotation ids are from 0 to number of annotations. "anno" is "sequence" for the sequence line //var commanddesc = $(this).text() + " (" + chainid + ")"; var commandname = "seq_" + $(this).text().trim(); - if($(this).hasClass('highlightSeq')) { + if($(this).hasClass('icn3d-highlightSeq')) { var command = 'select chain ' + chainid; me.selectAChain(chainid, commandname); me.setLogCommand(command, true); @@ -4544,7 +4679,7 @@ iCn3DUI.prototype = { } }); - $("#" + me.pre + "dl_sequence2").on('click', '.seqTitle', function(e) { + $("#" + me.pre + "dl_sequence2").on('click', '.icn3d-seqTitle', function(e) { $("#" + me.pre + "chainid").val(""); $("#" + me.pre + "structureid").val(""); @@ -4560,14 +4695,14 @@ iCn3DUI.prototype = { me.removeSeqResidueBkgd(); // select annotation title - $(this).toggleClass('highlightSeq'); + $(this).toggleClass('icn3d-highlightSeq'); var chainid = $(this).attr('chain'); //var anno = $(this).attr('anno'); // annotation ids are from 0 to number of annotations. "anno" is "sequence" for the sequence line //var commanddesc = $(this).text() + " (" + chainid + ")"; var commanddesc = "alignSeq_" + $(this).text().trim(); - if($(this).hasClass('highlightSeq')) { + if($(this).hasClass('icn3d-highlightSeq')) { me.selectAAlignChain(chainid, commanddesc); me.setLogCommand('select alignChain ' + chainid, true); } @@ -4893,8 +5028,10 @@ iCn3DUI.prototype = { me.setLogCommand('load state file ' + file, false); - var bAddCommands = true; - me.loadScript(dataStr, bAddCommands); + me.icn3d.commands = []; + me.icn3d.optionsHistory = []; + + me.loadScript(dataStr); }; reader.readAsText(file); @@ -4984,7 +5121,7 @@ iCn3DUI.prototype = { var size = $("#" + me.pre + "labelsize" ).val(); var color = $("#" + me.pre + "labelcolor" ).val(); var background = $("#" + me.pre + "labelbkgd" ).val(); - if(background === '0' || background === '') background = undefined; + if(background === '0' || background === '' || background === 'undefined') background = undefined; if(me.icn3d.pickedatom === undefined || me.icn3d.pickedatom2 === undefined) { alert("Please pick another atom"); @@ -4994,6 +5131,8 @@ iCn3DUI.prototype = { var y = (me.icn3d.pickedatom.coord.y + me.icn3d.pickedatom2.coord.y) / 2; var z = (me.icn3d.pickedatom.coord.z + me.icn3d.pickedatom2.coord.z) / 2; + me.icn3d.options['labels'] = 'yes'; + me.setLogCommand('add label ' + text + ' | x ' + x + ' y ' + y + ' z ' + z + ' | size ' + size + ' | color ' + color + ' | background ' + background, true); me.addLabel(text, x, y, z, size, color, background); @@ -5002,7 +5141,6 @@ iCn3DUI.prototype = { me.icn3d.pickpair = false; //var options2 = {}; - me.icn3d.options['labels'] = 'yes'; me.icn3d.draw(); } }); @@ -5017,6 +5155,9 @@ iCn3DUI.prototype = { alert("Please pick another atom"); } else { + me.icn3d.options['labels'] = 'yes'; + me.icn3d.options['lines'] = 'yes'; + var distance = parseInt(me.icn3d.pickedatom.coord.distanceTo(me.icn3d.pickedatom2.coord) * 10) / 10; var text = distance.toString() + " A"; @@ -5042,8 +5183,6 @@ iCn3DUI.prototype = { me.icn3d.pickpair = false; //var options2 = {}; - me.icn3d.options['labels'] = 'yes'; - me.icn3d.options['lines'] = 'yes'; me.icn3d.draw(); } }); @@ -5103,6 +5242,11 @@ iCn3DUI.prototype = { //me.icn3d.transformation.push(transformation); me.icn3d.commands.push(lastCommand + '|||' + JSON.stringify(transformation)); + me.icn3d.optionsHistory.push(me.icn3d.cloneHash(me.icn3d.options)); + + if(me.isSessionStorageSupported()) me.saveCommandsToSession(); + + me.STATENUMBER = me.icn3d.commands.length; me.applyCommand(lastCommand + '|||' + JSON.stringify(transformation)); @@ -5229,6 +5373,9 @@ iCn3DUI.prototype = { windowResize: function() { var me = this; if(me.cfg.resize !== undefined && me.cfg.resize && !me.isMobile() ) { $(window).resize(function() { + //var width = window.innerWidth - me.LESSWIDTH; + //var height = window.innerHeight - me.LESSHEIGHT; + var width = $( window ).width() - me.LESSWIDTH; var height = $( window ).height() - me.LESSHEIGHT; @@ -5297,16 +5444,16 @@ iCn3DUI.prototype = { me.clickMenu2_pickingStrand(); me.clickMenu2_aroundsphere(); me.clickMenu2_select_chain(); - me.clickMenu3_proteinRibbon(); - me.clickMenu3_proteinStrand(); - me.clickMenu3_proteinCylinder(); - me.clickMenu3_proteinCalpha(); - me.clickMenu3_proteinBfactor(); - me.clickMenu3_proteinLines(); - me.clickMenu3_proteinStick(); - me.clickMenu3_proteinBallstick(); - me.clickMenu3_proteinSphere(); - me.clickMenu3_proteinNothing(); + me.clickmenu3_proteinsRibbon(); + me.clickmenu3_proteinsStrand(); + me.clickmenu3_proteinsCylinder(); + me.clickmenu3_proteinsCalpha(); + me.clickmenu3_proteinsBfactor(); + me.clickmenu3_proteinsLines(); + me.clickmenu3_proteinsStick(); + me.clickmenu3_proteinsBallstick(); + me.clickmenu3_proteinsSphere(); + me.clickmenu3_proteinsNothing(); me.clickMenu3_sidechainsLines(); me.clickMenu3_sidechainsStick(); me.clickMenu3_sidechainsBallstick(); @@ -5349,9 +5496,9 @@ iCn3DUI.prototype = { me.clickMenu5_neighborsYes(); me.clickMenu5_neighborsNo(); me.clickMenu5_surfaceVDW(); - me.clickMenu5_surfaceSES(); - me.clickMenu5_surfaceSAS(); + //me.clickMenu5_surfaceSES(); me.clickMenu5_surfaceSAS(); + me.clickMenu5_surfaceMolecular(); me.clickMenu5_surfaceNothing(); me.clickMenu5_opacity10(); me.clickMenu5_opacity09(); @@ -5364,7 +5511,7 @@ iCn3DUI.prototype = { me.clickMenu6_assemblyYes(); me.clickMenu6_assemblyNo(); me.clickMenu6_addlabelResidues(); - me.clickMenu6_addlabelResidueTopology(); + me.clickMenu6_addlabelResidueSchematic(); me.clickMenu6_addlabelYes(); me.clickMenu6_addlabelNo(); me.clickMenu6_distanceYes(); @@ -5424,13 +5571,13 @@ iCn3DUI.prototype = { /*! The following are shared by full_ui.js and simple_ui.js */ - iCn3DUI.prototype.addResiudeLabels = function (bTopology) { var me = this; + iCn3DUI.prototype.addResiudeLabels = function (bSchematic) { var me = this; var size = 40; var background = "#CCCCCC"; - if(bTopology) { - size = 20; - //background = undefined; - } + if(bSchematic) { + size = 20; + //background = undefined; + } for(var i in me.icn3d.highlightAtoms) { var atom = me.icn3d.atoms[i]; @@ -5442,8 +5589,8 @@ iCn3DUI.prototype = { label.position = atom.coord; - label.bTopology = 0; - if(bTopology) label.bTopology = 1; + label.bSchematic = 0; + if(bSchematic) label.bSchematic = 1; label.text = me.icn3d.residueName2Abbr(atom.resn); label.size = size; @@ -6103,8 +6250,8 @@ iCn3DUI.prototype = { } if(me.cfg.inpara !== undefined && me.cfg.inpara.indexOf('mols=') == -1 && data.atomcount > data.threshold && data.molid2rescount !== undefined) { - // hide surface option - $("#" + me.pre + "accordion5").hide(); + // hide surface option + $("#" + me.pre + "accordion5").hide(); var labelsize = 40; @@ -6847,10 +6994,10 @@ iCn3DUI.prototype = { // assign white color to all unaligned atoms var color = new THREE.Color("#FFFFFF"); for(var i in me.icn3d.atoms) { - if(!alignedAtoms.hasOwnProperty(i)) { - me.icn3d.atoms[i].color = color; - } - } + if(!alignedAtoms.hasOwnProperty(i)) { + me.icn3d.atoms[i].color = color; + } + } seqalign = {}; } // if(align diff --git a/src/icn3d.js b/src/icn3d.js index 833ea248..e3d35957 100644 --- a/src/icn3d.js +++ b/src/icn3d.js @@ -109,6 +109,7 @@ var iCn3D = function (id) { // these variables will not be cleared for each structure this.commands = []; // a list of commands, ordered by the operation steps. Each operation will be converted into a command. this command list can be used to go backward and forward. + this.optionsHistory = []; // a list of options corresponding to this.commands. this.logs = []; // a list of comands and other logs, ordered by the operation steps. this.bRender = true; // a flag to turn off rendering when loading state file @@ -141,7 +142,7 @@ var iCn3D = function (id) { background: 'black', color: 'spectrum', sidechains: 'nothing', - secondary: 'cylinder & plate', + proteins: 'cylinder & plate', surface: 'nothing', wireframe: 'no', opacity: '0.8', @@ -3322,27 +3323,28 @@ iCn3D.prototype = { var a = parameters.hasOwnProperty("alpha") ? parameters["alpha"] : 1.0; var bBkgd = true; - var bTopology = false; - if(parameters.hasOwnProperty("bTopology") && parameters["bTopology"]) { - bTopology = true; - } + var bSchematic = false; + if(parameters.hasOwnProperty("bSchematic") && parameters["bSchematic"]) { + bSchematic = true; + } var backgroundColor, borderColor, borderThickness; if(parameters.hasOwnProperty("backgroundColor") && parameters["backgroundColor"] !== undefined) { - //backgroundColor = parameters.hasOwnProperty("backgroundColor") ? this.hexToRgb(parameters["backgroundColor"], a) : { r:0, g:0, b:0, a:0.5 }; - backgroundColor = this.hexToRgb(parameters["backgroundColor"], a); - borderColor = parameters.hasOwnProperty("borderColor") ? this.hexToRgb(parameters["borderColor"], a) : { r:0, g:0, b:0, a:1.0 }; - borderThickness = parameters.hasOwnProperty("borderThickness") ? parameters["borderThickness"] : 4; - } - else { - bBkgd = false; - backgroundColor = undefined; - borderColor = undefined; - borderThickness = 0; - } + //backgroundColor = parameters.hasOwnProperty("backgroundColor") ? this.hexToRgb(parameters["backgroundColor"], a) : { r:0, g:0, b:0, a:0.5 }; + backgroundColor = this.hexToRgb(parameters["backgroundColor"], a); + + borderColor = parameters.hasOwnProperty("borderColor") ? this.hexToRgb(parameters["borderColor"], a) : { r:0, g:0, b:0, a:1.0 }; + borderThickness = parameters.hasOwnProperty("borderThickness") ? parameters["borderThickness"] : 4; + } + else { + bBkgd = false; + backgroundColor = undefined; + borderColor = undefined; + borderThickness = 0; + } var textAlpha = 1.0; - var textColor = parameters.hasOwnProperty("textColor") ? this.hexToRgb(parameters["textColor"], textAlpha) : { r:255, g:255, b:0, a:1.0 }; + var textColor = parameters.hasOwnProperty("textColor") && parameters["textColor"] !== undefined ? this.hexToRgb(parameters["textColor"], textAlpha) : { r:255, g:255, b:0, a:1.0 }; var canvas = document.createElement('canvas'); @@ -3354,14 +3356,14 @@ iCn3D.prototype = { var width = textWidth + 2*borderThickness; var height = fontsize + 2*borderThickness; - if(bTopology) { - if(width > height) { - height = width; - } - else { - width = height - } - } + if(bSchematic) { + if(width > height) { + height = width; + } + else { + width = height + } + } canvas.width = width; canvas.height = height; @@ -3370,21 +3372,21 @@ iCn3D.prototype = { var factor = 3 * this.maxD / 100; if(bBkgd) { - // background color - context.fillStyle = "rgba(" + backgroundColor.r + "," + backgroundColor.g + "," + backgroundColor.b + "," + backgroundColor.a + ")"; - // border color - context.strokeStyle = "rgba(" + borderColor.r + "," + borderColor.g + "," + borderColor.b + "," + borderColor.a + ")"; - - context.lineWidth = borderThickness; - - if(bTopology) { - var r = width * 0.35; - this.circle(context, 0, 0, width, height, r); - } - else { - this.roundRect(context, 0, 0, width, height, radius * 0.3); - } - } + // background color + context.fillStyle = "rgba(" + backgroundColor.r + "," + backgroundColor.g + "," + backgroundColor.b + "," + backgroundColor.a + ")"; + // border color + context.strokeStyle = "rgba(" + borderColor.r + "," + borderColor.g + "," + borderColor.b + "," + borderColor.a + ")"; + + context.lineWidth = borderThickness; + + if(bSchematic) { + var r = width * 0.35; + this.circle(context, 0, 0, width, height, r); + } + else { + this.roundRect(context, 0, 0, width, height, radius * 0.3); + } + } // need to redefine again context.font = "Bold " + fontsize + "px " + fontface; @@ -3468,16 +3470,16 @@ iCn3D.prototype = { labelbackground = label.background; if(labelcolor !== undefined && labelbackground !== undefined && labelcolor.toLowerCase() === labelbackground.toLowerCase()) { - labelcolor = "#888888"; - } + labelcolor = "#888888"; + } - var bb; - if(label.bTopology !== undefined && label.bTopology) { - bb = this.makeTextSprite(label.text, {fontsize: parseInt(labelsize), textColor: labelcolor, borderColor: labelbackground, backgroundColor: labelbackground, alpha: labelalpha, bTopology: 1}); - } - else { - bb = this.makeTextSprite(label.text, {fontsize: parseInt(labelsize), textColor: labelcolor, borderColor: labelbackground, backgroundColor: labelbackground, alpha: labelalpha, bTopology: 0}); - } + var bb; + if(label.bSchematic !== undefined && label.bSchematic) { + bb = this.makeTextSprite(label.text, {fontsize: parseInt(labelsize), textColor: labelcolor, borderColor: labelbackground, backgroundColor: labelbackground, alpha: labelalpha, bSchematic: 1}); + } + else { + bb = this.makeTextSprite(label.text, {fontsize: parseInt(labelsize), textColor: labelcolor, borderColor: labelbackground, backgroundColor: labelbackground, alpha: labelalpha, bSchematic: 0}); + } //bb.position.copy(labelpositions[i]); bb.position.set(label.position.x, label.position.y, label.position.z); @@ -4308,53 +4310,56 @@ iCn3D.prototype = { // set atom style when loading a structure setAtomStyleByOptions: function (options) { - var selectedAtoms; - if (options.secondary !== undefined) { - selectedAtoms = this.intersectHash(this.highlightAtoms, this.proteins); + if(options === undefined) options = this.options; + + var selectedAtoms; + + if (options.proteins !== undefined) { + selectedAtoms = this.intersectHash(this.highlightAtoms, this.proteins); for(var i in selectedAtoms) { - this.atoms[i].style = options.secondary.toLowerCase(); + this.atoms[i].style = options.proteins.toLowerCase(); } } // side chain overwrite th erotein style if (options.sidechains !== undefined) { - selectedAtoms = this.intersectHash(this.highlightAtoms, this.sidechains); + selectedAtoms = this.intersectHash(this.highlightAtoms, this.sidechains); for(var i in selectedAtoms) { this.atoms[i].style = options.sidechains.toLowerCase(); } } if (options.ligands !== undefined) { - selectedAtoms = this.intersectHash(this.highlightAtoms, this.ligands); + selectedAtoms = this.intersectHash(this.highlightAtoms, this.ligands); for(var i in selectedAtoms) { this.atoms[i].style = options.ligands.toLowerCase(); } } if (options.ions !== undefined) { - selectedAtoms = this.intersectHash(this.highlightAtoms, this.ions); + selectedAtoms = this.intersectHash(this.highlightAtoms, this.ions); for(var i in selectedAtoms) { this.atoms[i].style = options.ions.toLowerCase(); } } if (options.water !== undefined) { - selectedAtoms = this.intersectHash(this.highlightAtoms, this.water); + selectedAtoms = this.intersectHash(this.highlightAtoms, this.water); for(var i in selectedAtoms) { this.atoms[i].style = options.water.toLowerCase(); } } if (options.nucleotides !== undefined) { - selectedAtoms = this.intersectHash(this.highlightAtoms, this.nucleotides); + selectedAtoms = this.intersectHash(this.highlightAtoms, this.nucleotides); for(var i in selectedAtoms) { this.atoms[i].style = options.nucleotides.toLowerCase(); } } }, - rebuildScene: function (options) { - jQuery.extend(this.options, options); + rebuildScene: function (options) { var me = this; + jQuery.extend(me.options, options); if(this.scene !== undefined) { for(var i = this.scene.children.length - 1; i >= 0; i--) { @@ -4814,7 +4819,8 @@ iCn3D.prototype = { this.setCamera(); } -// this.applyTransformation(this._zoomFactor, this.mouseChange, this.quaternion); - this.render(); + //this.applyTransformation(this._zoomFactor, this.mouseChange, this.quaternion); + //this.render(); + this.draw(); } }; diff --git a/src/icn3d_full_ui.css b/src/icn3d_full_ui.css index d6a91147..f9d26f16 100644 --- a/src/icn3d_full_ui.css +++ b/src/icn3d_full_ui.css @@ -30,6 +30,7 @@ button, select, input { font-size: 10px; } .icn3d-commandTitle {font-size: 12px; font-weight:bold; font-family: Verdana, Arial, Helvetica, sans-serif; color: #666666;} .icn3d-middleIcon {opacity: 1.0} -.icn3d-endIcon {opacity: 0.5} +.icn3d-endIcon {opacity: 0.2} .icn3d-box {border-top: solid 1px #ccc; border-right: solid 1px #ccc; border-bottom: solid 1px #ccc; border-left: solid 1px #ccc; padding: 5px;} + diff --git a/src/simple_ui.js b/src/simple_ui.js index 74907f2b..7ed3608e 100644 --- a/src/simple_ui.js +++ b/src/simple_ui.js @@ -54,8 +54,8 @@ var iCn3DUI = function(cfg) { me.options['background'] = 'black'; //black, grey, white me.options['color'] = 'spectrum'; //spectrum, secondary structure, charge, chain, residue, atom, red, green, blue, magenta, yellow, cyan, white, grey, custom me.options['sidechains'] = 'nothing'; //lines, stick, ball & stick, sphere, nothing - me.options['secondary'] = 'ribbon'; //ribbon, strand, cylinder & plate, c alpha trace, b factor tube, lines, stick, ball & stick, sphere, nothing - me.options['surface'] = 'nothing'; //Van der Waals surface, solvent excluded surface, solvent accessible surface, molecular surface, nothing + me.options['proteins'] = 'ribbon'; //ribbon, strand, cylinder & plate, c alpha trace, b factor tube, lines, stick, ball & stick, sphere, nothing + me.options['surface'] = 'nothing'; //Van der Waals surface, molecular surface, solvent accessible surface, nothing me.options['opacity'] = '0.8'; //1.0, 0.9, 0.8, 0.7, 0.6, 0.5 me.options['wireframe'] = 'no'; //yes, no me.options['ligands'] = 'stick'; //lines, stick, ball & stick, sphere, nothing @@ -91,237 +91,238 @@ iCn3DUI.prototype = { modifyIcn3dShowPicking: function() {var me = this; iCn3D.prototype.showPicking = function(atom) { - this.removeHighlightObjects(); - - this.highlightAtoms = {}; - if(this.picking === 1) { - this.highlightAtoms[atom.serial] = 1; - } - else if(this.picking === 2) { - var residueid = atom.structure + '_' + atom.chain + '_' + atom.resi; - this.highlightAtoms = this.residues[residueid]; - } - - this.addHighlightObjects(); - - //var text = '#' + atom.structure + '.' + atom.chain + ':' + atom.resi + '@' + atom.name; - //var residueText = '.' + atom.chain + ':' + atom.resi; - var residueText = atom.resn + atom.resi; - - var text; - if(me.cfg.cid !== undefined) { - text = atom.name; - } - else { - text = residueText + '@' + atom.name; - } - - var labels = []; - var label = {}; - label.position = atom.coord; - - if(this.picking === 1) { - label.text = text; - } - else if(this.picking === 2) { - label.text = residueText; - } - - label.background = "#CCCCCC"; - - labels.push(label); - - //http://www.johannes-raida.de/tutorials/three.js/tutorial13/tutorial13.htm - this.createLabelRepresentation(labels); - }; - }, + this.removeHighlightObjects(); + + this.highlightAtoms = {}; + if(this.picking === 1) { + this.highlightAtoms[atom.serial] = 1; + } + else if(this.picking === 2) { + var residueid = atom.structure + '_' + atom.chain + '_' + atom.resi; + this.highlightAtoms = this.residues[residueid]; + } + + this.addHighlightObjects(); + + //var text = '#' + atom.structure + '.' + atom.chain + ':' + atom.resi + '@' + atom.name; + //var residueText = '.' + atom.chain + ':' + atom.resi; + var residueText = atom.resn + atom.resi; + + var text; + if(me.cfg.cid !== undefined) { + text = atom.name; + } + else { + text = residueText + '@' + atom.name; + } + + var labels = []; + var label = {}; + label.position = atom.coord; + + if(this.picking === 1) { + label.text = text; + } + else if(this.picking === 2) { + label.text = residueText; + } + + label.background = "#CCCCCC"; + + labels.push(label); + + //http://www.johannes-raida.de/tutorials/three.js/tutorial13/tutorial13.htm + this.createLabelRepresentation(labels); + }; + }, // ======= functions start============== // show3DStructure is the main function to show 3D structure show3DStructure: function() { var me = this; - var html = me.setHtml(); + var html = me.setHtml(); - $( "#" + me.divid).html(html); + $( "#" + me.divid).html(html); - var width = window.innerWidth, height = window.innerHeight; + var width = window.innerWidth, height = window.innerHeight; + //var width = $( window ).width(), height = $( window ).height(); - if(me.cfg.width.toString().indexOf('%') !== -1) { - width = width * (me.cfg.width).substr(0, me.cfg.width.toString().indexOf('%')) / 100.0 - 20; - } - else { - width = me.cfg.width; - } + if(me.cfg.width.toString().indexOf('%') !== -1) { + width = width * (me.cfg.width).substr(0, me.cfg.width.toString().indexOf('%')) / 100.0 - 20; + } + else { + width = me.cfg.width; + } - if(me.cfg.height.toString().indexOf('%') !== -1) { - height = height * (me.cfg.height).substr(0, me.cfg.height.toString().indexOf('%')) / 100.0 - 20; - } - else { - height = me.cfg.height; - } + if(me.cfg.height.toString().indexOf('%') !== -1) { + height = height * (me.cfg.height).substr(0, me.cfg.height.toString().indexOf('%')) / 100.0 - 20; + } + else { + height = me.cfg.height; + } - $("#" + me.pre + "viewer").width(width).height(height); - $("#" + me.pre + "canvas").width(width).height(height); + $("#" + me.pre + "viewer").width(width).height(height); + $("#" + me.pre + "canvas").width(width).height(height); - if(parseInt(width) <= 200) { - $("#" + me.pre + "toolbox").hide(); - } + if(parseInt(width) <= 200) { + $("#" + me.pre + "toolbox").hide(); + } me.allEventFunctions(); me.allCustomEvents(); - me.icn3d = new iCn3D(me.pre + 'canvas'); - - if(me.cfg.bCalphaOnly !== undefined) me.icn3d.bCalphaOnly = me.cfg.bCalphaOnly; - - me.loadStructure(); - }, - - setHtml: function() { var me = this; - var html = ""; - - html += "
"; - html += ""; - html += "
"; - - html += "
Loading the structure...
"; - - html += "Your browser does not support WebGL."; - - html += "
"; - html += "Tools"; - html += "
"; - html += "
"; - - if(me.cfg.cid === undefined) { - html += "
"; - html += "  Protein "; - html += ""; - html += "
"; - - html += "
"; - html += "  Side Chains "; - html += ""; - html += "
"; - - html += "
"; - html += "  Nucleotides "; - html += ""; - html += "
"; - - html += "
"; - html += "  Ligands "; - html += ""; - html += "
"; - } - else { - html += "
"; - html += "  Ligands "; - html += ""; - html += "
"; - } - - html += "
"; - html += "  Color "; - html += ""; - html += "
"; - - html += "
"; - html += "   "; - html += "
"; - - html += "
"; - html += "  "; - html += "
"; - - html += "
"; - html += "
"; - html += "
"; - - html += "
"; - - html += ""; - html += "
"; - - // filter for large structure - html += "
"; - //html += "
This large structure contains more than 50,000 atoms. Please select some structures/chains below to display.
"; - //html += " "; - html += "
"; - html += "
"; - html += "
"; - html += "
"; - html += "
"; - - html += "
"; - - return html; - }, + me.icn3d = new iCn3D(me.pre + 'canvas'); + + if(me.cfg.bCalphaOnly !== undefined) me.icn3d.bCalphaOnly = me.cfg.bCalphaOnly; + + me.loadStructure(); + }, + + setHtml: function() { var me = this; + var html = ""; + + html += "
"; + html += ""; + html += "
"; + + html += "
Loading the structure...
"; + + html += "Your browser does not support WebGL."; + + html += "
"; + html += "Tools"; + html += "
"; + html += "
"; + + if(me.cfg.cid === undefined) { + html += "
"; + html += "  Proteins "; + html += ""; + html += "
"; + + html += "
"; + html += "  Side Chains "; + html += ""; + html += "
"; + + html += "
"; + html += "  Nucleotides "; + html += ""; + html += "
"; + + html += "
"; + html += "  Ligands "; + html += ""; + html += "
"; + } + else { + html += "
"; + html += "  Ligands "; + html += ""; + html += "
"; + } + + html += "
"; + html += "  Color "; + html += ""; + html += "
"; + + html += "
"; + html += "   "; + html += "
"; + + html += "
"; + html += "  "; + html += "
"; + + html += "
"; + html += "
"; + html += "
"; + + html += "
"; + + html += ""; + html += "
"; + + // filter for large structure + html += "
"; + //html += "
This large structure contains more than 50,000 atoms. Please select some structures/chains below to display.
"; + //html += " "; + html += "
"; + html += "
"; + html += "
"; + html += "
"; + html += "
"; + + html += "
"; + + return html; + }, loadStructure: function() { var me = this; - me.icn3d.moleculeTitle = ''; + me.icn3d.moleculeTitle = ''; if(me.cfg.pdbid !== undefined) { - me.inputid = me.cfg.pdbid; + me.inputid = me.cfg.pdbid; var pdbid = me.cfg.pdbid.toLowerCase(); // http://www.rcsb.org/pdb/files/1gpk.pdb only allow lower case me.downloadPdb(pdbid); } else if(me.cfg.mmdbid !== undefined) { - me.inputid = me.cfg.mmdbid; + me.inputid = me.cfg.mmdbid; me.downloadMmdb(me.cfg.mmdbid); } else if(me.cfg.gi !== undefined) { @@ -352,24 +353,24 @@ iCn3DUI.prototype = { }); } else if(me.cfg.cid !== undefined) { - me.inputid = me.cfg.cid; - var url = "https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/cid/" + me.cfg.cid + "/description/jsonp"; - $.ajax({ - url: url, - dataType: 'jsonp', - success: function(data) { - if(data.InformationList !== undefined && data.InformationList.Information !== undefined) me.icn3d.moleculeTitle = data.InformationList.Information[0].Title; - } - }); + me.inputid = me.cfg.cid; + var url = "https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/cid/" + me.cfg.cid + "/description/jsonp"; + $.ajax({ + url: url, + dataType: 'jsonp', + success: function(data) { + if(data.InformationList !== undefined && data.InformationList.Information !== undefined) me.icn3d.moleculeTitle = data.InformationList.Information[0].Title; + } + }); me.downloadCid(me.cfg.cid); } else if(me.cfg.mmcif !== undefined) { - me.inputid = me.cfg.mmcif; + me.inputid = me.cfg.mmcif; me.downloadMmcif(me.cfg.mmcif); } else if(me.cfg.align !== undefined) { - me.inputid = me.cfg.align; + me.inputid = me.cfg.align; me.downloadAlignment(me.cfg.align); } else { @@ -378,13 +379,13 @@ iCn3DUI.prototype = { }, renderStructure: function(bInitial) { var me = this; - if(bInitial) { - me.icn3d.draw(me.options); - } - else { - me.icn3d.draw(); - } - }, + if(bInitial) { + me.icn3d.draw(me.options); + } + else { + me.icn3d.draw(); + } + }, selectAll: function() { var me = this; // select all atoms again @@ -409,7 +410,7 @@ iCn3DUI.prototype = { me.selectAll(); switch (selectionType) { - case 'secondary': + case 'proteins': atoms = me.icn3d.intersectHash(me.icn3d.highlightAtoms, me.icn3d.proteins); break; case 'sidechains': @@ -430,207 +431,212 @@ iCn3DUI.prototype = { } if(style === 'schematic') { - var options2 = {}; - options2['secondary'] = 'c alpha trace'; - options2['nucleotides'] = 'phosphorus trace'; - options2['ligands'] = 'nothing'; - options2['water'] = 'nothing'; - options2['ions'] = 'nothing'; + var options2 = {}; + options2['proteins'] = 'c alpha trace'; + options2['nucleotides'] = 'phosphorus trace'; + options2['ligands'] = 'nothing'; + options2['water'] = 'nothing'; + options2['ions'] = 'nothing'; + + me.icn3d.setAtomStyleByOptions(options2); + + var bTopology = true; + me.addResiudeLabels(bTopology); + + me.icn3d.options['labels'] = 'yes'; + + me.icn3d.draw(); + } + else { + for(var i in atoms) { + me.icn3d.atoms[i].style = style; + } + + me.icn3d.options[selectionType] = style; + + if(selectionType === 'proteins' && style === 'nothing') { + me.icn3d.labels = []; + me.icn3d.options["labels"] = "no"; + } + + me.icn3d.draw(); + } + }, + + clickTab: function() { var me = this; + $('.icn3d-bottomTab').click(function (e) { + var height = $(".icn3d-insideTab").height(); + if(height === 0) { + $(".icn3d-insideTab").height(200); + } + else { + $(".icn3d-insideTab").height(0); + } + }); + }, + + clickPicking: function() { var me = this; + $("#" + me.pre + "enablepick").click(function(e) { + e.preventDefault(); + + if(me.cfg.cid !== undefined) { + me.icn3d.picking = 1; + me.icn3d.options['picking'] = 'atom'; + } + else { + me.icn3d.picking = 2; + me.icn3d.options['picking'] = 'residue'; + } + + }); + }, + + clickNoPicking: function() { var me = this; + $("#" + me.pre + "disablepick").click(function(e) { + e.preventDefault(); + + me.icn3d.picking = 0; + me.icn3d.options['picking'] = 'no'; + me.icn3d.draw(undefined, false); + me.icn3d.removeHighlightObjects(); + + }); + }, + + changeProteinStyle: function() { var me = this; + $("#" + me.pre + "proteins").change(function(e) { + e.preventDefault(); + + $("#" + me.pre + "sidechains").val("nothing"); + }); + }, + + clickReset: function() { var me = this; + $("#" + me.pre + "reset").click(function (e) { + e.preventDefault(); + + me.loadStructure(); + }); + }, + + showSubsets: function() { var me = this; + $("#" + me.pre + "filter").click(function (e) { + e.preventDefault(); + + var ckbxes = document.getElementsByName(pre + "filter_ckbx"); + + var mols = ""; + + var ligandFlag = "&het=0"; + for(var i = 0, il = ckbxes.length; i < il; ++i) { // skip the first "all" checkbox + if(ckbxes[i].checked) { + if(ckbxes[i].value == 'ligands') { + ligandFlag = "&het=2"; + } + else { + mols += ckbxes[i].value + ","; + } + } + } + + // have to choose one + if(mols == "") { + mols = ckbxes[0].value + } + + var url = document.URL + "&mols=" + mols + "&complexity=2" + ligandFlag; + + window.open(url, '_self'); + }); + }, + + labelSubsets: function() { var me = this; + $("#" + me.pre + "label_3d_diagram").click(function (e) { + e.preventDefault(); + + var ckbxes = document.getElementsByName(me.pre + "filter_ckbx"); - me.icn3d.setAtomStyleByOptions(options2); + var mols = ""; - var bTopology = true; - me.addResiudeLabels(bTopology); + var labels = []; - me.icn3d.options['labels'] = 'yes'; + for(var i = 0, il = ckbxes.length; i < il; ++i) { // skip the first "all" checkbox + if(ckbxes[i].checked) { + if(ckbxes[i].value != 'ligands') labels.push(me.icn3d.savedLabels[ckbxes[i].value]); + } + } - me.icn3d.draw(); - } - else { - for(var i in atoms) { - me.icn3d.atoms[i].style = style; - } + me.icn3d.labels = labels; - me.icn3d.options[selectionType] = style; + me.icn3d.createLabelRepresentation(me.icn3d.labels); - if(selectionType === 'secondary' && style === 'nothing') { - me.icn3d.labels = []; - me.icn3d.options["labels"] = "no"; - } + me.icn3d.render(); + }); + }, + + windowResize: function() { var me = this; + if(me.cfg.resize !== undefined && me.cfg.resize && !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { + $(window).resize(function() { + if(me.cfg.resize !== undefined && me.cfg.resize) { + var width = window.innerWidth(); + var height = window.innerHeight(); + + //var width = $( window ).width(); + //var height = $( window ).height(); + + $("#" + me.pre + "canvas").width(width - 20).height(height - 20); + $("#" + me.pre + "viewer").width(width - 20).height(height - 20); + + me.icn3d.setWidthHeight(width - 20, height - 20); + + me.icn3d.draw(); + + // do not change the colors, i.e., use the previous colors + //options['color'] = 'custom'; + } + }); + } + }, - me.icn3d.draw(); - } + changeSelection: function() { var me = this; + ['color', 'sidechains', 'proteins', 'ligands', 'water', 'ions', 'nucleotides'].forEach(function (opt) { + $('#' + me.pre + opt).change(function (e) { + if(opt === 'color') { + me.setColor(opt, $('#' + me.pre + opt).val()); + } + else { + me.setStyle(opt, $('#' + me.pre + opt).val()); + } + }); + }); }, - clickTab: function() { var me = this; - $('.icn3d-bottomTab').click(function (e) { - var height = $(".icn3d-insideTab").height(); - if(height === 0) { - $(".icn3d-insideTab").height(200); - } - else { - $(".icn3d-insideTab").height(0); - } - }); - }, - - clickPicking: function() { var me = this; - $("#" + me.pre + "enablepick").click(function(e) { - e.preventDefault(); - - if(me.cfg.cid !== undefined) { - me.icn3d.picking = 1; - me.icn3d.options['picking'] = 'atom'; - } - else { - me.icn3d.picking = 2; - me.icn3d.options['picking'] = 'residue'; - } - - }); - }, - - clickNoPicking: function() { var me = this; - $("#" + me.pre + "disablepick").click(function(e) { - e.preventDefault(); - - me.icn3d.picking = 0; - me.icn3d.options['picking'] = 'no'; - me.icn3d.draw(undefined, false); - me.icn3d.removeHighlightObjects(); - - }); - }, - - changeProteinStyle: function() { var me = this; - $("#" + me.pre + "secondary").change(function(e) { - e.preventDefault(); - - $("#" + me.pre + "sidechains").val("nothing"); - }); - }, - - clickReset: function() { var me = this; - $("#" + me.pre + "reset").click(function (e) { - e.preventDefault(); - - me.loadStructure(); - }); - }, - - showSubsets: function() { var me = this; - $("#" + me.pre + "filter").click(function (e) { - e.preventDefault(); - - var ckbxes = document.getElementsByName(pre + "filter_ckbx"); - - var mols = ""; - - var ligandFlag = "&het=0"; - for(var i = 0, il = ckbxes.length; i < il; ++i) { // skip the first "all" checkbox - if(ckbxes[i].checked) { - if(ckbxes[i].value == 'ligands') { - ligandFlag = "&het=2"; - } - else { - mols += ckbxes[i].value + ","; - } - } - } - - // have to choose one - if(mols == "") { - mols = ckbxes[0].value - } - - var url = document.URL + "&mols=" + mols + "&complexity=2" + ligandFlag; - - window.open(url, '_self'); - }); - }, - - labelSubsets: function() { var me = this; - $("#" + me.pre + "label_3d_diagram").click(function (e) { - e.preventDefault(); - - var ckbxes = document.getElementsByName(me.pre + "filter_ckbx"); - - var mols = ""; - - var labels = []; - - for(var i = 0, il = ckbxes.length; i < il; ++i) { // skip the first "all" checkbox - if(ckbxes[i].checked) { - if(ckbxes[i].value != 'ligands') labels.push(me.icn3d.savedLabels[ckbxes[i].value]); - } - } - - me.icn3d.labels = labels; - - me.icn3d.createLabelRepresentation(me.icn3d.labels); - - me.icn3d.render(); - }); - }, - - windowResize: function() { var me = this; - if(me.cfg.resize !== undefined && me.cfg.resize && !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { - $(window).resize(function() { - if(me.cfg.resize !== undefined && me.cfg.resize) { - $("#" + me.pre + "canvas").width($( window ).width() - 20).height($( window ).height() - 20); - $("#" + me.pre + "viewer").width($( window ).width() - 20).height($( window ).height() - 20); - - me.icn3d.setWidthHeight($( window ).width() - 20, $( window ).height() - 20); - - me.icn3d.draw(); - - // do not change the colors, i.e., use the previous colors - //options['color'] = 'custom'; - } - }); - } - }, - - changeSelection: function() { var me = this; - ['color', 'sidechains', 'secondary', 'ligands', 'water', 'ions', 'nucleotides'].forEach(function (opt) { - $('#' + me.pre + opt).change(function (e) { - if(opt === 'color') { - me.setColor(opt, $('#' + me.pre + opt).val()); - } - else { - me.setStyle(opt, $('#' + me.pre + opt).val()); - } - }); - }); - }, - - allEventFunctions: function() { var me = this; - me.clickTab(); - me.clickPicking(); - me.clickNoPicking(); - me.changeProteinStyle(); - me.clickReset(); - me.showSubsets(); - me.labelSubsets(); - me.windowResize(); - me.changeSelection(); - }, + allEventFunctions: function() { var me = this; + me.clickTab(); + me.clickPicking(); + me.clickNoPicking(); + me.changeProteinStyle(); + me.clickReset(); + me.showSubsets(); + me.labelSubsets(); + me.windowResize(); + me.changeSelection(); + }, allCustomEvents: function() { var me = this; // add custom events here } }; - /*! The following are shared by full_ui.js and simple_ui.js */ - iCn3DUI.prototype.addResiudeLabels = function (bTopology) { var me = this; + iCn3DUI.prototype.addResiudeLabels = function (bSchematic) { var me = this; var size = 40; var background = "#CCCCCC"; - if(bTopology) { - size = 20; - //background = undefined; - } + if(bSchematic) { + size = 20; + //background = undefined; + } for(var i in me.icn3d.highlightAtoms) { var atom = me.icn3d.atoms[i]; @@ -642,8 +648,8 @@ iCn3DUI.prototype = { label.position = atom.coord; - label.bTopology = 0; - if(bTopology) label.bTopology = 1; + label.bSchematic = 0; + if(bSchematic) label.bSchematic = 1; label.text = me.icn3d.residueName2Abbr(atom.resn); label.size = size; @@ -950,13 +956,13 @@ iCn3DUI.prototype = { }; iCn3DUI.prototype.downloadAlignment = function (align) { var me = this; - //var url = "https://www.ncbi.nlm.nih.gov/Structure/vastpp/vastpp.cgi?cmd=c&w3d&ids=" + align; - //var url2 = "https://www.ncbi.nlm.nih.gov/Structure/vastpp/vastpp.cgi?cmd=c1&d&ids=" + align; + var url = "https://www.ncbi.nlm.nih.gov/Structure/vastpp/vastpp.cgi?cmd=c&w3d&ids=" + align; + var url2 = "https://www.ncbi.nlm.nih.gov/Structure/vastpp/vastpp.cgi?cmd=c1&d&ids=" + align; - var alignArray = me.cfg.align.split(','); - var ids_str = (alignArray.length === 2? 'uids=' : 'ids=') + align; - var url = 'https://structuredev24.be-md.ncbi.nlm.nih.gov/Structure/vastplusdev/vastplus.cgi?cmd=c&w3d&' + ids_str; - var url2 = 'https://structuredev24.be-md.ncbi.nlm.nih.gov/Structure/vastplusdev/vastplus.cgi?cmd=c1&d&' + ids_str; + //var alignArray = me.cfg.align.split(','); + //var ids_str = (alignArray.length === 2? 'uids=' : 'ids=') + align; + //var url = '/Structure/vastplusdev/vastplus.cgi?cmd=c&w3d&' + ids_str; + //var url2 = '/Structure/vastplusdev/vastplus.cgi?cmd=c1&d&' + ids_str; if(me.cfg.inpara !== undefined) { url += me.cfg.inpara; @@ -1303,8 +1309,8 @@ iCn3DUI.prototype = { } if(me.cfg.inpara !== undefined && me.cfg.inpara.indexOf('mols=') == -1 && data.atomcount > data.threshold && data.molid2rescount !== undefined) { - // hide surface option - $("#" + me.pre + "accordion5").hide(); + // hide surface option + $("#" + me.pre + "accordion5").hide(); var labelsize = 40; @@ -1770,7 +1776,8 @@ iCn3DUI.prototype = { else if (atm.mt === 'l') { // ligands and ions me.icn3d.ligands[serial] = 1; - if (atm.bonds.length === 0) me.icn3d.ions[serial] = 1; + //if (atm.bonds.length === 0) me.icn3d.ions[serial] = 1; + if (atm.elem === atm.resn) me.icn3d.ions[serial] = 1; me.icn3d.het = true; } @@ -2046,10 +2053,10 @@ iCn3DUI.prototype = { // assign white color to all unaligned atoms var color = new THREE.Color("#FFFFFF"); for(var i in me.icn3d.atoms) { - if(!alignedAtoms.hasOwnProperty(i)) { - me.icn3d.atoms[i].color = color; - } - } + if(!alignedAtoms.hasOwnProperty(i)) { + me.icn3d.atoms[i].color = color; + } + } seqalign = {}; } // if(align @@ -2058,5 +2065,3 @@ iCn3DUI.prototype = { data = {}; }; - -