Merge pull request #28 in STRUC/icn3d from release122 to master

* commit 'cf15b49212bf7d9d008bb144f4be8cd27ffbb304':
  added a switch button to switch between all atoms and selected atoms

README.md

@@ -2,7 +2,7 @@
 
 ## iCn3D
 
-"I see in 3D" (iCn3D) Structure Viewer is a WebGL-based 3D viewer using Three.js and jQuery. It is based on the 3D styles of [iview](http://istar.cse.cuhk.edu.hk/iview/) and [GLmol](https://en.osdn.jp/projects/webglmol/), and the surface generation of [3Dmol](http://3dmol.csb.pitt.edu/). iCn3D has a feature-rich user interface and allows users to: use a url or a state file to capture the custom display of 3D structures, define custom atom sets, show 3D structure, 2D interactions, and 1D sequence together and select residues on all of them, display custom labeling, go back and forth to different stage, show highlight, etc. iCn3D can also show the aligned 3D structures by providing two PDB IDs or MMDB IDs, whose alignment has been pre-calculated at NCBI.  
+"I see in 3D" (iCn3D) Structure Viewer is a WebGL-based 3D viewer using Three.js and jQuery. It is based on the 3D styles of [iview](http://istar.cse.cuhk.edu.hk/iview/) and [GLmol](https://webglmol.osdn.jp/index-en.html), and the surface generation of [3Dmol](https://3dmol.csb.pitt.edu/). iCn3D has a feature-rich user interface and allows users to: use a url or a state file to capture the custom display of 3D structures, define custom atom sets, show 3D structure, 2D interactions, and 1D sequence together and select residues on all of them, display custom labeling, go back and forth to different stage, show highlight, etc. iCn3D can also show the aligned 3D structures by providing two PDB IDs or MMDB IDs, whose alignment has been pre-calculated at NCBI.  
 
 We provided two versions of iCn3D widgets: [basic interface](https://www.ncbi.nlm.nih.gov/Structure/icn3d/index.html?mmdbid=2por) and [advanced interface](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmdbid=2por). 
 
@@ -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.2.1.zip](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.2.1.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.2.2.zip](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.2.2.zip). The "Download ZIP" link in this page does not include these third-party libraries. 
 
 ## Usage
 
@@ -39,8 +39,8 @@ See the [help page](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html) for
 ## Tools based on
 
 * **[iview](http://istar.cse.cuhk.edu.hk/iview/)**: The drawing of 3D objects is mainly based on iview.
-* **[GLmol](https://en.osdn.jp/projects/webglmol/)**: The drawing of nucleotides cartoon is from GLmol.
-* **[3Dmol](http://3dmol.csb.pitt.edu/)**: The surface generation and labeling are from 3Dmol.
+* **[GLmol](https://webglmol.osdn.jp/index-en.html)**: The drawing of nucleotides cartoon is from GLmol.
+* **[3Dmol](https://3dmol.csb.pitt.edu/)**: The surface generation and labeling are from 3Dmol.
 
 ## Building
 
@@ -74,7 +74,7 @@ npm install -g http-server
 http-server
 ```
 
-Then point your browser at http://localhost:8080/icn3d.html.
+Then point your browser at https://localhost:8080/icn3d.html.
 
 Run `gulp help` to get a list of the available tasks.
 
@@ -89,6 +89,8 @@ gulp gh-pages
 
 ## Change log
 
+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.

icn3d.html

@@ -62,7 +62,7 @@ <h2>What is iCn3D Structure Viewer?<img src="https://www.ncbi.nlm.nih.gov/Struct
 
 <li>What is iCn3D Structure Viewer?</li>
 <br/>
-"I see in 3D" (iCn3D) Structure Viewer is a WebGL-based 3D viewer using Three.js and jQuery. It is based on the 3D styles of <a href="http://istar.cse.cuhk.edu.hk/iview/">iview</a> and <a href="https://en.osdn.jp/projects/webglmol/">GLmol</a>, and the surface generation of <a href="http://3dmol.csb.pitt.edu/">3Dmol</a>. iCn3D has a feature-rich user interface and allows users to: use a url or a state file to capture the custom display of 3D structures, define custom atom sets, show 3D structure, 2D interactions, and 1D sequence together and select residues on all of them, display custom labeling, go back and forth to different stage, show highlight, etc. iCn3D can also show the aligned 3D structures by providing two PDB IDs or MMDB IDs, whose alignment has been pre-calculated at NCBI. The source code of iCn3D is available at GitHub: <a href="https://github.com/ncbi/icn3d">https://github.com/ncbi/icn3d</a>.<br>
+"I see in 3D" (iCn3D) Structure Viewer is a WebGL-based 3D viewer using Three.js and jQuery. It is based on the 3D styles of <a href="http://istar.cse.cuhk.edu.hk/iview/">iview</a> and <a href="https://webglmol.osdn.jp/index-en.html">GLmol</a>, and the surface generation of <a href="https://3dmol.csb.pitt.edu/">3Dmol</a>. iCn3D has a feature-rich user interface and allows users to: use a url or a state file to capture the custom display of 3D structures, define custom atom sets, show 3D structure, 2D interactions, and 1D sequence together and select residues on all of them, display custom labeling, go back and forth to different stage, show highlight, etc. iCn3D can also show the aligned 3D structures by providing two PDB IDs or MMDB IDs, whose alignment has been pre-calculated at NCBI. The source code of iCn3D is available at GitHub: <a href="https://github.com/ncbi/icn3d">https://github.com/ncbi/icn3d</a>.<br>
 <br>
 We provided two versions of iCn3D widgets: <a href="index.html?mmdbid=2por">basic interface</a> and <a href="full.html?mmdbid=2por">advanced interface</a>. Both widgets can be easily added to web pages.
 <ol>
@@ -130,7 +130,7 @@ <h2>What is iCn3D Structure Viewer?<img src="https://www.ncbi.nlm.nih.gov/Struct
         <td>4. <a href="#color">Color</a>&nbsp;&nbsp;</td>
         <td>5. <a href="#surface">Surface</a>&nbsp;&nbsp;</td>
         <td>6. <a href="#analysis">Analysis</a>&nbsp;&nbsp;</td>
-        <td>6. <a href="#other">Other</a>&nbsp;&nbsp;</td>
+        <td>7. <a href="#other">Other</a>&nbsp;&nbsp;</td>
         </tr>
         </tbody>
     </table>
@@ -394,7 +394,7 @@ <h2>How to use iCn3D Structure Viewer in your html page:<img src="https://www.nc
 <ul>
 <li><a name="embedIframe"></a><b>Embed using iframe</b><br>
 <p>To embed iCn3D Structure Viewer in your own HTML page using iframe, simply add the following to your page:
-</p><div class="indent"><code>&lt;iframe src="http://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmdbid=2por&amp;width=300&amp;height=300&amp;showmenu=0&amp;rotate=0" width="320" height="320" style="border:none"&gt;&lt;/iframe&gt;</code></div>
+</p><div class="indent"><code>&lt;iframe src="https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmdbid=2por&amp;width=300&amp;height=300&amp;showmenu=0&amp;rotate=0" width="320" height="320" style="border:none"&gt;&lt;/iframe&gt;</code></div>
 
 </li>
 <li><a name="embedJS"></a><b>Embed with CSS and Javascript on NCBI servers</b><br>
@@ -503,12 +503,14 @@ <h2>How to use iCn3D Structure Viewer in your html page:<img src="https://www.nc
     </ul>
     <br>
 
-    <li><a name="HowToUseStep5"></a><b>Hint for picking 3D structure and selecting sequences:</b></li>
+    <li><a name="HowToUseStep5"></a><b>Hint for picking 3D structure, selecting 2D interactions, and selecting 1D sequences:</b></li>
     <div>To pick an atom/residue/strand in the 3D structure, hold "Alt" key and use mouse to pick. To add more selection to the current selection, hold "Ctrl" key and use mouse to pick. To add a range of selection starting from the current selection, hold "Shift" key and use mouse to pick the ending selection. To change the selected residue to the strand/chain/structure containing the residue, press the up/down arrow. <br/>
     <br/>
-    To select residues in the sequence window, drag with mouse or touch to select residues. Drag or touch again to deselect residues. Multiple selection is allowed without the Ctrl key.<br/>
+    To select chains or interactions in the 2D interactions dialog, click on the nodes or lines. The nodes are chains and can be unioned with the Ctrl key. The lines are interactions and can NOT be unioned. Each click on the lines selects half of the lines, i.e., select the interacting residues in one of the two chains. The selected residues are saved in the "Custom" menu in the button section.<br/>
     <br/>
-    To save the current selection (either on structure or on sequence), open the sequence window, specify the name and description for the selection, and click \"Save Selection\".
+    To select residues in the 1D sequence window, drag with mouse or touch to select residues. Drag or touch again to deselect residues. Multiple selection is allowed without the Ctrl key.<br/>
+    <br/>
+    To save the current selection (either on 3D structure, 2D interactions, or 1D sequence), open the sequence window, specify the name and description for the selection, and click \"Save Selection\".
     </div>
 
     <li><a name="HowToUseStep6"></a><b>Hint for recovering a crashed page:</b></li>
@@ -544,9 +546,10 @@ <h2>URL parameters for the advanced interface<img src="https://www.ncbi.nlm.nih.
 <tr valign='top'><td>resize</td><td>Yes</td><td>Yes</td><td>Set "true" or "1" to resize the image when the container is resized. The default is "true".</td></tr>
 <tr valign='top'><td>rotate</td><td>Yes</td><td>Yes</td><td>Set "right", "left", "up", or "down" to rotate the structure when it is  displayed at the beginning. The default is "right".</td></tr>
 
-<tr valign='top'><td>showmenu</td><td>No</td><td>Yes</td><td>Set "true" or "1" to show the menus and buttons at the top of the structure canvas. The default is "true".</td></tr>
+<tr valign='top'><td>showmenu</td><td>No</td><td>Yes</td><td>Set "false" or "0" to hide the menus and buttons at the top of the structure canvas. The default is "true".</td></tr>
 <tr valign='top'><td>showseq</td><td>No</td><td>Yes</td><td>Set "true" or "1" to show the sequence window. The default is "false".</td></tr>
 <tr valign='top'><td>showalignseq</td><td>No</td><td>Yes</td><td>Set "true" or "1" to show the aligned sequence window. The default is "false".</td></tr>
+<tr valign='top'><td>showcommand</td><td>No</td><td>Yes</td><td>Set "false" or "0" to hide the command window. The default is "true".</td></tr>
 <tr valign='top'><td>show2d</td><td>No</td><td>Yes</td><td>Set "true" or "1" to show the 2D interaction. The default is "false".</td></tr>
 <tr valign='top'><td><a name="commandsUrl"></a>command</td><td>No</td><td>Yes</td><td>Besides the "Script/Log" section, commands can also be attached to the url parameter "command". Several commands can be concatenated with the separator ";", e.g., <a href="full.html?mmdbid=3gvu&command=select .A:38-40 or .A:42 or .A:45 or .A:61 or .A:63 or .A:77-78 or .A:82 or .A:91 or .A:107-108 or .A:110 or .A:114 or .A:162 or .A:172-173; style proteins stick; color atom; set surface Van der Waals surface; add label ATP-binding Site | size 18 | color #0000ff | background #cccccc | type custom; select .STI; color green; toggle highlight">full.html?mmdbid=3gvu&amp;command=select .A:38-40 or .A:42 or .A:45 or .A:61 or .A:63 or .A:77-78 or .A:82 or .A:91 or .A:107-108 or .A:110 or .A:114 or .A:162 or .A:172-173; style proteins stick; color atom; set surface Van der Waals surface; add label ATP-binding Site | size 18 | color #0000ff | background #cccccc | type custom; select .STI; color green; toggle highlight</a>.</td></tr>
 </table>
@@ -883,7 +886,7 @@ <h2>Data Structure<img src="https://www.ncbi.nlm.nih.gov/Structure/IMG/spacer.gi
 
         chainsSeq: {};      // OPTIONAL, structure_chain name -&gt; array of residue object: {"name":[residue name], "resi": [residue number]}
         chainsAnno: {};     // OPTIONAL, structure_chain name -&gt; array of annotation
-        chainsAnnoTitle: [];// the title for the array of annotation.
+        chainsAnnoTitle: [];// OPTIONAL, the titles for the array of annotation
         moleculeTitle: "";  // OPTIONAL, ID and name
         hbondpoints: [];    // OPTIONAL, array of positions for hydrogen bond
         residueId2Name: {}; // OPTIONAL, structure_chain_resi -&gt; one letter abbreviation
@@ -909,12 +912,12 @@ <h2>Display Options<img src="https://www.ncbi.nlm.nih.gov/Structure/IMG/spacer.g
           options['camera']             = 'perspective';        //perspective, orthographic
           options['background']         = 'black';              //black, grey, white
           options['color']              = 'spectrum';           //spectrum, secondary structure, charge, hydrophobic, chain, residue, atom,
-          														// red, green, blue, magenta, yellow, cyan, white, grey, custom
+                                                                // red, green, blue, magenta, yellow, cyan, white, grey, custom
           options['proteins']           = 'ribbon';             //ribbon, strand, cylinder and plate, schematic, c alpha trace,
-          														// b factor tube, lines, stick, ball and stick, sphere, nothing
+                                                                // b factor tube, lines, stick, ball and stick, sphere, nothing
           options['sidechains']         = 'nothing';            //lines, stick, ball and stick, sphere, nothing
           options['nucleotides']        = 'phosphorus trace';   //cartoon, phosphorus trace, schematic, lines, stick,
-          														// ball and stick, sphere, nothing
+                                                                // ball and stick, sphere, nothing
           options['ligands']            = 'stick';              //line, stick, ball and stick, schematic, sphere, nothing
           options['water']              = 'nothing';            //sphere, dot, nothing
           options['ions']               = 'sphere';             //sphere, dot, nothing
@@ -1513,6 +1516,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.2.2.zip">icn3d-1.2.2</a> was release on August 18, 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.
+<br><br>
+
 The production version <a href="https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.2.1.zip">icn3d-1.2.1</a> was release on August 18, 2016. Some bugs were fixed.
 <br><br>
 

package.json

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

src/icn3d_full_ui.css

@@ -1,3 +1,5 @@
+.icn3d-text {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:1em;}
+
 .ui-dialog { font-size: 12px;}
 .ui-dialog .ui-dialog-title { font-size: 16px; height: 18px; }
 .ui-dialog .ui-button { width: 12px; height:12px; margin: -5px 0px 0px 0px;}
@@ -32,6 +34,7 @@ button, select, input { font-size: 10px; }
 .icn3d-seqLine {white-space:nowrap;}
 
 .icn3d-commandTitle  {font-size: 12px; font-weight:bold; font-family: Verdana, Arial, Helvetica, sans-serif; color: #666666;}
+.icn3d-modeselection  {color: #f8b84e!important;}
 
 .icn3d-middleIcon {opacity: 1.0}
 .icn3d-endIcon {opacity: 0.2}
@@ -53,3 +56,59 @@ button, select, input { font-size: 10px; }
     bottom: 3px;
     background-position: -80px -224px;
 }
+
+// toggle button: http://www.w3schools.com/howto/howto_css_switch.asp
+.icn3d-switch {
+  position: relative;
+  display: inline-block;
+  width: 33px;
+  height: 18px;
+}
+
+.icn3d-switch input {display:none;}
+
+.icn3d-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.icn3d-slider:before {
+  position: absolute;
+  content: "";
+  height: 13px;
+  width: 13px;
+  left: 4px;
+  bottom: 3px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .icn3d-slider {
+  background-color: #f8b84e;
+}
+
+input:focus + .icn3d-slider {
+  box-shadow: 0 0 1px #f8b84e;
+}
+
+input:checked + .icn3d-slider:before {
+  -webkit-transform: translateX(13px);
+  -ms-transform: translateX(13px);
+  transform: translateX(13px);
+}
+
+.icn3d-slider.icn3d-round {
+  border-radius: 18px;
+}
+
+.icn3d-slider.icn3d-round:before {
+  border-radius: 50%;
+}