Skip to content

Commit

Permalink
Merge pull request #47 in STRUC/icn3d from release200b to master
Browse files Browse the repository at this point in the history 
* commit '3b4881e2235295f989adaf5d38e4678310a1eb22':
  enable to export STL and VRML filesfor 3D printing, add annotations such as SNPs, domains, functional sites, etc
  • Loading branch information
@jiywang3
jiywang3 committed Apr 18, 2018
2 parents d5136bf + 3b4881e commit 8156fe4
Show file tree
Hide file tree
Showing 37 changed files with 9,058 additions and 18,266 deletions.
66 changes: 21 additions & 45 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,28 @@

## 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://webglmol.osdn.jp/index-en.html), the surface generation of [3Dmol](https://3dmol.csb.pitt.edu/), and the Imposter shaders of [NGL Viewer] (https://github.com/arose/ngl). 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. iCn3D has a feature-rich user interface and allows users to: show all kinds of annotations (e.g., SNPs, ClinVar, conserved domains, 3D domains, binding sites), add custom tracks (FASTA, bed file, etc) to the annotations, 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 sequences together and select residues on all of them, display custom labels, go back and forth to different stages, show highlights, export STL or VRML files for 3D printing, 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).
We provided two types of iCn3D widgets: [basic interface](https://www.ncbi.nlm.nih.gov/Structure/icn3d/index.html?mmdbid=1tup) and [advanced interface](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmdbid=1tup).

1. The basic interface has the minimum javascript code for the interface and is easy to understand. It has the basic features such as changing color and styles.
2. The advanced interface has a library for the interface and is more complicated to understand. It has many features.
1. The basic interface has the minimum javascript code for the interface. It has the basic features such as changing color and styles.
2. The advanced interface has a library for the interface. It has many features.

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.
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/docs/icn3d_help.html#HowToUse) 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.4.1.zip](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.4.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-2.0.0.zip](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-2.0.0.zip). The "Download ZIP" link in this page does not include third-party libraries.

## Usage

iCn3D accepts the following IDs:

* <b>mmdbid</b>: NCBI MMDB ID, e.g., [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmdbid=2por&showseq=1&show2d=1](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmdbid=2por&showseq=1&show2d=1)
* <b>mmtfid</b>: MMTF ID, e.g., [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmtfid=2por](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmtfid=2por)
* <b>pdbid</b>: PDB ID, e.g., [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?pdbid=2por](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?pdbid=2por)
* <b>mmcifid</b>: mmCIF ID, e.g., [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmcifid=2por](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmcifid=2por)
* <b>gi</b>: NCBI protein gi number, [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?gi=827343227](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?gi=827343227)
* <b>mmdbid</b>: NCBI MMDB ID, e.g., [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmdbid=1tup&showanno=1&show2d=1&showsets=1](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmdbid=1tup&showanno=1&show2d=1&showsets=1)
* <b>mmtfid</b>: MMTF ID, e.g., [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmtfid=1tup&show2d=1&showsets=1](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmtfid=1tup&showanno=1&showsets=1)
* <b>pdbid</b>: PDB ID, e.g., [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?pdbid=1tup&show2d=1&showsets=1](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?pdbid=1tup&showanno=1&showsets=1)
* <b>mmcifid</b>: mmCIF ID, e.g., [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmcifid=1tup&show2d=1&showsets=1](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?mmcifid=1tup&showanno=1&showsets=1)
* <b>gi</b>: NCBI protein gi number, [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?gi=827343227&show2d=1&showsets=1](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?gi=1310960&show2d=1&showsets=1)
* <b>cid</b>: PubChem Compound ID, e.g., [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?cid=2244](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?cid=2244)
* <b>align</b>: Two PDB IDs or MMDB IDs for structure alignment, e.g., [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?align=1hho,4n7n](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?align=1hho,4n7n)
* <b>align</b>: Two PDB IDs or MMDB IDs for structure alignment, e.g., [https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?align=1hho,4n7n&showalignseq=1&show2d=1&showsets=1](https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?align=1hho,4n7n&showalignseq=1&show2d=1&showsets=1)

iCn3D also accepts the following file types: PDB, mmCIF, Mol2, SDF, and XYZ. The files can be passed through a url, e.g., <a href="https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?type=pdb&url=https%3A%2F%2Ffiles.rcsb.org%2Fview%2F1gpk.pdb">https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?type=pdb&url=https%3A%2F%2Ffiles.rcsb.org%2Fview%2F1gpk.pdb</a>:

Expand All @@ -38,19 +38,19 @@ See the [help page](https://www.ncbi.nlm.nih.gov/Structure/icn3d/docs/icn3d_help

## Tools based on

* **[iview](http://istar.cse.cuhk.edu.hk/iview/)**: The drawing of 3D objects is mainly based on iview.
* **[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.
* **[NGL Viewer](https://github.com/arose/ngl)**: The Imposter shaders are from NGL Viewer.
* **[iview](http://istar.cse.cuhk.edu.hk/iview/)**: The drawing of 3D objects is based on iview.
* **[GLmol](https://webglmol.osdn.jp/index-en.html)**: The drawing of nucleotides cartoon is based on GLmol.
* **[3Dmol](https://3dmol.csb.pitt.edu/)**: The surface generation and labeling are based on 3Dmol.
* **[NGL Viewer](https://github.com/arose/ngl)**: The Imposter shaders are based on NGL Viewer.

## Building

If you want to work with the development version, then you'll need to use the Node.js build tools. We recommend using [nvm](https://github.com/creationix/nvm) (Node version manager). First, install that per the instructions in that README file, and then install the latest LTS version of Node.js, with, for example,

```
nvm install 4.2.2
nvm alias default 4.2.2 #=> Use this as default from now on
node --version #=> expect "v4.2.2"
nvm install #.#.#
nvm alias default #.#.# #=> Use this as default from now on
node --version
```

Next, clone this repository, and then perform the following setup steps in your working copy of icn3d.
Expand All @@ -68,37 +68,13 @@ You only have to perform the above steps once, to set up your working directory.
gulp
```

Then, serve the site from an HTTP server, to test it. If you don't have one readily available, you could uses the `http-server` app, with:

```
npm install -g http-server
http-server
```

Then point your browser at https://localhost:8080/icn3d.html.

Run `gulp help` to get a list of the available tasks.

A special task "gh-pages" will build the distribution files, and then push
them to GitHub pages. Make sure, in your working clone, that you define a
remote named "github" that points to a repo on GitHub that you have write
permission to, and then enter

```
gulp gh-pages
```

## Change log
The production version [icn3d-2.0.0](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-2.0.0.zip) was release on April 17, 2018. By clicking the menu "Windows: View Sequences & Annotations", users can view all kinds of annotations: ClinVar, SNPs, CDD domains, 3D domains, binding sites, interactions, and custom tracks. Users can click the menu "View: Chemical Binding" to show the chemical binding sites. Users can also export files for 3D printing at the menu "File: 3D Printing: VRML (Color, W/ Stabilizers)".

The production version [icn3d-1.4.1](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.4.1.zip) was release on November 3, 2017. The version of THREE.js in the zip file was fixed.

The production version [icn3d-1.4.0](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.4.0.zip) was release on November 2, 2017. The rendering speed has been significantly improved by using the Imposter shaders from NGL Viewer. A bug in "Share Link" was fixed.

The production version [icn3d-1.3.10](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.3.10.zip) was release on October 27, 2017. The "Save File" issue in Chrome 60 and after was fixed.

The production version [icn3d-1.3.9](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.3.9.zip) was release on September 5, 2017. The handling of residues with insertion codes was fixed in structure alignment.

The production version [icn3d-1.3.8](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-1.3.8.zip) was release on August 7, 2017. The handling of residues with insertion codes was fixed.

All previous releases can be found at the [API page](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html#log).

## Contact
Expand Down
103 changes: 64 additions & 39 deletions full.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,45 +11,46 @@
<body>
<div id="div0"></div>

<link rel="stylesheet"
href="node_modules/jquery-ui/themes/ui-lightness/jquery-ui.min.css">
<link rel="stylesheet" href="src/icn3d_full_ui.css">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/jquery-ui/jquery-ui.min.js"></script>
<script src="node_modules/three/three.min.js"></script>
<script src="src/Detector.js"></script>
<script src="src/CanvasRenderer.js"></script>
<script src="src/TrackballControls.js"></script>
<script src="src/OrthographicTrackballControls.js"></script>
<script src="src/Projector.js"></script>
<script src="src/marchingcube.js"></script>
<script src="src/ProteinSurface4.js"></script>
<script src="src/setupsurface.js"></script>
<script src="src/mmtf.js"></script>
<script src="src/icn3d.js"></script>
<script src="src/full_ui.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>

<script type="text/javascript">
<link rel="stylesheet" href="lib/jquery-ui-1.12.1.min.css">
<link rel="stylesheet" href="icn3d_full_ui.css">
<script src="lib/jquery-3.2.1.min.js"></script>
<script src="lib/jquery-ui-1.12.1.min.js"></script>
<script src="lib/three_0.80.0.min.js"></script>
<script src="full_ui_all.min.js"></script>

<script type="text/javascript">
// separating the GET parameters from the current URL
// repalce "color #" with "color " in the url
var url = document.URL.replace(/\#/g, '');

var bNopara = false;
var ampPos = document.URL.indexOf("?");
var ampPos = url.indexOf("?");
if(ampPos === -1) {
// alert("Please include '?pdbid=1GPK,2POR,...' in your url");
bNopara = true;
bNopara = true;
}

var getParams = document.URL.split("?");
var getParams = url.split("?");
// transforming the GET parameters into a dictionnary
var search = getParams[getParams.length - 1];
var params = {};
var inpara = "";

if(!bNopara) {
params = JSON.parse('{"' + decodeURI(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}');
//params = JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}');

var decodeSearch = decodeURIComponent(search);

var hashes = decodeSearch.split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
params[hash[0].trim()] = (hash[1] !== undefined) ? hash[1].trim() : undefined;
}

// for mmdb structures, pass the parameters after the first "&" sign
inpara = "&" + document.URL.substr(ampPos + 1);
// for mmdb structures, pass the parameters after the first "&" sign
inpara = "&" + url.substr(ampPos + 1);
}

var gi = params.gi;
Expand All @@ -68,6 +69,10 @@

var command = params.command; // ";" separated commands

if(command === undefined) {
command = '';
}

if(width === undefined) width = '100%';
if(height === undefined) height = '100%';

Expand Down Expand Up @@ -95,6 +100,14 @@
showcommand = false;
}

var showanno = params.showanno;
if(showanno == 'true' || showanno == '1') {
showanno = true;
}
else if(showanno === undefined || showanno == 'false' || showanno == '0') {
showanno = false;
}

var showseq = params.showseq;
if(showseq == 'true' || showseq == '1') {
showseq = true;
Expand All @@ -120,16 +133,19 @@
show2d = false;
}

var showsets = params.showsets;
if(showsets == 'true' || showsets == '1') {
showsets = true;
}
else if(showsets === undefined || showsets == 'false' || showsets == '0') {
showsets = false;
}

var rotate = params.rotate;
if(rotate === undefined) {
rotate = 'right';
}

var maxatomcnt = params.maxatomcnt;
if(maxatomcnt === undefined) {
maxatomcnt = 100000;
}

$( document ).ready(function() {
function setupViewer(idName, idValue) {
var maxStructure = 5; // show max 5 structures
Expand All @@ -145,6 +161,11 @@
}
}

var options = {};

//Options are available at: https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html#DisplayOptions
//options['proteins'] = 'sphere';

for(var i = 0, il = idArray.length; i < il && i < maxStructure; ++i) {
var cfg = {
divid: 'div' + i,
Expand All @@ -155,13 +176,16 @@
rotate: rotate,
showmenu: showmenu,
showcommand: showcommand,
showanno: showanno,
showseq: showseq,
show2d: show2d,
maxatomcnt: maxatomcnt,
showsets: showsets,
command: command
};
if(idName !== '') cfg[idName] = idArray[i];

if(Object.keys(options).length > 0) cfg['options'] = options;

var icn3dui = new iCn3DUI(cfg);

icn3dui.show3DStructure();
Expand All @@ -171,26 +195,26 @@
}

if(mmtfid !== undefined) {
setupViewer('mmtfid', mmtfid);
setupViewer('mmtfid', mmtfid);
}
else if(pdbid !== undefined) {
setupViewer('pdbid', pdbid);
setupViewer('pdbid', pdbid);
}
else if(cid !== undefined) {
setupViewer('cid', cid);
setupViewer('cid', cid);
}
else if(mmcifid !== undefined) {
setupViewer('mmcifid', mmcifid);
setupViewer('mmcifid', mmcifid);
}
else if(mmdbid !== undefined) {
setupViewer('mmdbid', mmdbid);
setupViewer('mmdbid', mmdbid);
}
else if(gi !== undefined) {
setupViewer('gi', gi);
setupViewer('gi', gi);
}
else if(urlname !== undefined) {
urlname = decodeURIComponent(urlname);
setupViewer('url', urltype + '|' + urlname);
setupViewer('url', urltype + '|' + urlname);
}
// e.g., align=103701,1,4,68563,1,167 [mmdbid1,biounit,molecule,mmdbid2,biounit,molecule]
else if(align !== undefined) {
Expand All @@ -203,10 +227,11 @@
rotate: rotate,
showmenu: showmenu,
showcommand: showcommand,
showanno: showanno,
showseq: showseq,
showalignseq: showalignseq,
show2d: show2d,
maxatomcnt: maxatomcnt,
showsets: showsets,
align: align,
command: command
};
Expand All @@ -216,7 +241,7 @@
icn3dui.show3DStructure();
}
else {
setupViewer('', '');
setupViewer('', '');
}

}); // document ready
Expand Down
Loading

0 comments on commit 8156fe4

Please sign in to comment.