Merge pull request #32 in STRUC/icn3d from release133 to master

* commit 'b0bc956c13184270cb4aa9d35c46c37295f565cc':
  enabled to output images with transparent background

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.
 
-<b>Complete package</b> 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. 
+<b>Complete package</b> 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

icn3d.html

@@ -1520,6 +1520,9 @@ <h2>API Documents of the advanced UI library iCn3DUI<img src="https://www.ncbi.n
 <a name="log"></a>
 <h2>Change Log:<img src="https://www.ncbi.nlm.nih.gov/Structure/IMG/spacer.gif" width="25" height="1" border="0"><a href="#Top"><img src="https://www.ncbi.nlm.nih.gov/Structure/IMG/arrowup_blue.gif" width="12" height="12" border="0" alt="back to top"></a></h2>
 
+The production version <a href="https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.3.3.zip">icn3d-1.3.3</a> was release on November 15, 2016. Now users can save the image with "transparent" background.
+<br><br>
+
 The production version <a href="https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.3.2.zip">icn3d-1.3.2</a> 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".
 <br><br>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "icn3d",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "iCn3D Structure Viewer",
   "main": "index.html",
   "scripts": {

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

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: {

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 += "                      <li><input type='radio' name='" + me.pre + "menu6_bkgd' id='" + me.pre + "menu6_bkgdBlack' checked><label for='" + me.pre + "menu6_bkgdBlack'>Black</label></li>";
         html += "                      <li><input type='radio' name='" + me.pre + "menu6_bkgd' id='" + me.pre + "menu6_bkgdGrey'><label for='" + me.pre + "menu6_bkgdGrey'>Grey</label></li>";
         html += "                      <li><input type='radio' name='" + me.pre + "menu6_bkgd' id='" + me.pre + "menu6_bkgdWhite'><label for='" + me.pre + "menu6_bkgdWhite'>White</label></li>";
+        html += "                      <li><input type='radio' name='" + me.pre + "menu6_bkgd' id='" + me.pre + "menu6_bkgdTransparent'><label for='" + me.pre + "menu6_bkgdTransparent'>Transparent</label></li>";
         html += "                  </ul>";
         html += "                </li>";
         html += "                <li>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();

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]) {