From b0bc956c13184270cb4aa9d35c46c37295f565cc Mon Sep 17 00:00:00 2001 From: "Wang, Jiyao" Date: Tue, 15 Nov 2016 14:24:33 -0500 Subject: [PATCH] enabled to output images with transparent background --- README.md | 12 ++---- icn3d.html | 3 ++ package.json | 2 +- src/icn3d/display.js | 7 +++- src/icn3d/icn3d.js | 4 +- src/icn3dui/full_ui.js | 52 +++++++++++++++++++++++- src/icn3dui/parsers/mmcif_mmdb_parser.js | 9 ++-- 7 files changed, 73 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index ed963b2b..9f41fc32 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ We provided two versions of iCn3D widgets: [basic interface](https://www.ncbi.nl Either of these widgets could be easily added to your own web pages. Please see the [help page](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html) for more details. -Complete package of iCn3D including Three.js and jQuery can be downloaded from [https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.3.2.zip](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.3.2.zip). The "Download ZIP" link in this page does not include these third-party libraries. +Complete package of iCn3D including Three.js and jQuery can be downloaded from [https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.3.3.zip](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.3.3.zip). The "Download ZIP" link in this page does not include these third-party libraries. ## Usage @@ -89,18 +89,12 @@ gulp gh-pages ## Change log +The production version [icn3d-1.3.3](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.3.3.zip) was release on November 15, 2016. Now users can save the image with "transparent" background. + The production version [icn3d-1.3.2](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.3.2.zip) was release on October 18, 2016. The atom specification in "Advanced set selection" was modified to use "$" instead of "#" in front of structure IDs. This modification avoids to the problem of showing multiple "#" in the urls of "Share Link". The production version [icn3d-1.3.1](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.3.1.zip) was release on October 4, 2016. Partial diplay of helices or beta-sheets are enabled. The side chains, if displayed, are connected to C-alphas. -The production version [icn3d-1.2.3](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.2.3.zip) was release on September 13, 2016. The MMTF format started to support https. - -The production version [icn3d-1.2.2](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.2.2.zip) was release on August 24, 2016. Added a switch button to switch between all atoms and selected atoms. When the mode is "selected atoms", the switch and the text "selection" next to it are colored in orange. The menu "Style", "Color", and "Surface" are colored in orange and only apply to selected atoms. - -The production version [icn3d-1.2.1](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.2.1.zip) was release on August 18, 2016. Some bugs were fixed. - -The production version [icn3d-1.2.0](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.2.0.zip) was release on August 17, 2016. The dialog of 2D interactions was added to show the interactions among different chains. Both the nodes (chains) and lines (interactions) can be selected. Secondary structures will be calculated if the input PDB file has no defined secondary structure information. The previous files src/icn3d.js, src/full_ui.js, and src/simple_ui.js were separated into small files. - All previous releases can be found at the [API page](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html#log). ## Contact diff --git a/icn3d.html b/icn3d.html index a14b93fc..c852d470 100644 --- a/icn3d.html +++ b/icn3d.html @@ -1520,6 +1520,9 @@

API Documents of the advanced UI library iCn3DUI

Change Log:back to top

+The production version icn3d-1.3.3 was release on November 15, 2016. Now users can save the image with "transparent" background. +

+ The production version icn3d-1.3.2 was release on October 18, 2016. The atom specification in "Advanced set selection" was modified to use "$" instead of "#" in front of structure IDs. This modification avoids to the problem of showing multiple "#" in the urls of "Share Link".

diff --git a/package.json b/package.json index 5fb65ec4..c54beb8a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "icn3d", - "version": "1.3.2", + "version": "1.3.3", "description": "iCn3D Structure Viewer", "main": "index.html", "scripts": { diff --git a/src/icn3d/display.js b/src/icn3d/display.js index d8814d8a..d1017c54 100644 --- a/src/icn3d/display.js +++ b/src/icn3d/display.js @@ -749,7 +749,12 @@ this.mouse = new THREE.Vector2(); var background = this.backgroundColors[this.options.background.toLowerCase()]; - this.renderer.setClearColor(background); + if(this.options.background.toLowerCase() === 'transparent') { + this.renderer.setClearColor(background, 0); + } + else { + this.renderer.setClearColor(background, 1); + } // apply fog if(this.options['fog'] === 'yes') { if(this.options['camera'] === 'perspective') { //perspective, orthographic diff --git a/src/icn3d/icn3d.js b/src/icn3d/icn3d.js index 89c97219..5c2666db 100644 --- a/src/icn3d/icn3d.js +++ b/src/icn3d/icn3d.js @@ -52,7 +52,8 @@ var iCn3D = function (id) { this.renderer = new THREE.WebGLRenderer({ canvas: this.container.get(0), antialias: true, - preserveDrawingBuffer: true + preserveDrawingBuffer: true, + alpha: true }); this.overdraw = 0; @@ -844,6 +845,7 @@ iCn3D.prototype = { black: new THREE.Color(0x000000), grey: new THREE.Color(0xCCCCCC), white: new THREE.Color(0xFFFFFF), + transparent: new THREE.Color(0x000000) }, residueColors: { diff --git a/src/icn3dui/full_ui.js b/src/icn3dui/full_ui.js index 82a40364..632618ab 100644 --- a/src/icn3dui/full_ui.js +++ b/src/icn3dui/full_ui.js @@ -2796,6 +2796,46 @@ iCn3DUI.prototype = { var text = paraArray[0].substr(('add label').length + 1); // add label Text | x 40.45 y 24.465000000000003 z 53.48 | size 40 | color #ffff00 | background #cccccc | type custom + var x,y,z, size, color, background, type; + for(var i = 1, il = paraArray.length; i < il; ++i) { + var wordArray = paraArray[i].split(' '); + + var bPosition = false; + if(wordArray[0] == 'x') { + bPosition = true; + x = wordArray[1]; + y = wordArray[3]; + z = wordArray[5]; + } + else if(wordArray[0] == 'size') { + size = paraArray[i].substr(paraArray[i].lastIndexOf(' ') + 1); + } + else if(wordArray[0] == 'color') { + color = paraArray[i].substr(paraArray[i].lastIndexOf(' ') + 1); + } + else if(wordArray[0] == 'background') { + background = paraArray[i].substr(paraArray[i].lastIndexOf(' ') + 1); + } + else if(wordArray[0] == 'type') { + type = paraArray[i].substr(paraArray[i].lastIndexOf(' ') + 1); + } + + if(!bPosition) { + var position = me.icn3d.centerAtoms(me.icn3d.hash2Atoms(me.icn3d.highlightAtoms)); + x = position.center.x; + y = position.center.y; + z = position.center.z; + } + } + + 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, type); + me.icn3d.draw(); + +/* if(paraArray.length == 6) { // specified position var positionArray = paraArray[1].split(' '); var x = positionArray[1], y = positionArray[3], z = positionArray[5]; @@ -2811,7 +2851,7 @@ iCn3DUI.prototype = { me.addLabel(text, x,y,z, size, color, background, type); me.icn3d.draw(); } - else if(paraArray.length == 5) { // position is the center of the current selection + else { // if(paraArray.length == 5) { // position is the center of the current selection var position = me.icn3d.centerAtoms(me.icn3d.hash2Atoms(me.icn3d.highlightAtoms)); var x = position.center.x; var y = position.center.y; @@ -2828,6 +2868,7 @@ iCn3DUI.prototype = { me.addLabel(text, x,y,z, size, color, background, type); me.icn3d.draw(); } +*/ } else if(command.indexOf('add residue labels') !== -1) { me.icn3d.addResiudeLabels(me.icn3d.highlightAtoms); @@ -3565,6 +3606,7 @@ iCn3DUI.prototype = { html += "
    • "; html += "
    • "; html += "
    • "; + html += "
    • "; html += " "; html += " "; html += "
  • Fog"; @@ -5228,6 +5270,13 @@ iCn3DUI.prototype = { }); }, + clickMenu6_bkgdTransparent: function() { var me = this; + $("#" + me.pre + "menu6_bkgdTransparent").click(function (e) { + me.setOption('background', 'transparent'); + me.setLogCommand('set background transparent', true); + }); + }, + clickMenu6_showfogYes: function() { var me = this; $("#" + me.pre + "menu6_showfogYes").click(function (e) { me.setOption('fog', 'yes'); @@ -7039,6 +7088,7 @@ iCn3DUI.prototype = { me.clickMenu6_bkgdBlack(); me.clickMenu6_bkgdGrey(); me.clickMenu6_bkgdWhite(); + me.clickMenu6_bkgdTransparent(); me.clickMenu6_showfogYes(); me.clickMenu6_showfogNo(); me.clickMenu6_showslabYes(); diff --git a/src/icn3dui/parsers/mmcif_mmdb_parser.js b/src/icn3dui/parsers/mmcif_mmdb_parser.js index ca7ff8b2..c9f03f40 100644 --- a/src/icn3dui/parsers/mmcif_mmdb_parser.js +++ b/src/icn3dui/parsers/mmcif_mmdb_parser.js @@ -22,7 +22,7 @@ if($("#" + me.pre + "commandlog")) $("#" + me.pre + "commandlog").show(); }, success: function(data) { - url = "//www.ncbi.nlm.nih.gov/Structure/mmcifparser/mmcifparser.cgi"; + url = "https://www.ncbi.nlm.nih.gov/Structure/mmcifparser/mmcifparser.cgi"; $.ajax({ url: url, @@ -399,10 +399,10 @@ iCn3DUI.prototype.downloadMmdb = function (mmdbid, bGi) { var me = this; var url; if(bGi !== undefined && bGi) { - url = "https://www.ncbi.nlm.nih.gov/Structure/mmdb/mmdb_strview.cgi?program=w3d&seq=1&gi=" + mmdbid; + url = "https://www.ncbi.nlm.nih.gov/Structure/mmdb/mmdb_strview.cgi?program=w3d&seq=1&b&gi=" + mmdbid; } else { - url = "https://www.ncbi.nlm.nih.gov/Structure/mmdb/mmdb_strview.cgi?program=w3d&seq=1&uid=" + mmdbid; + url = "https://www.ncbi.nlm.nih.gov/Structure/mmdb/mmdb_strview.cgi?program=w3d&seq=1&b&uid=" + mmdbid; } me.icn3d.bCid = undefined; @@ -1238,6 +1238,9 @@ // modify resi since MMDB used the same resi as in PDB where resi is not continuous // No need to modify mmcif resi if(type === 'mmdbid') { + // bfactor + atm.b = (atm.b.length > 0) ? atm.b[0] : 1; + oldResi = atm.resi; if(atm.resi !== prevOldResi && atm.resi !== prevOldResi + 1 && chainMissingResArray[atm.chain] !== undefined && chainMissingResArray[atm.chain][missingResIndex] !== undefined && atm.resi === chainMissingResArray[atm.chain][missingResIndex][1]) {