icn3d 3.16.0 → 3.17.0

package/README.md

@@ -1,6 +1,77 @@
-Python Scripts based on iCn3D
-=============================
+icn3d
+=====
 
-Either Python scripts in the directory "icn3dpython" or Node.js scripts in the directory "icn3dnode" can be used to analyze structures in command line <b>with one second sleep time in between</b>.
+"I see in 3D" (iCn3D) Structure Viewer is not only a web-based 3D viewer, but also a structure analysis tool interactively or in the batch mode using NodeJS scripts based on the npm package icn3d. iCn3D synchronizes the display of 3D structure, 2D interaction, and 1D sequences and annotations. Users' custom display can be saved in a short URL or a PNG image. More features are listed at [iCn3D Doc](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html#about).
+
+Installation
+------------
+
+iCn3D can be installed with the following command:
+
+    npm install icn3d
+
+The following packages are required as shown in dependency:
+
+    npm install jquery
+    npm install jsdom
+    npm install three
+
+Usage
+--------
+
+* <b>Use icn3d to generate Node.js scripts</b>
+    
+    To use icn3d to generate Node.js scripts, the source code is from this icn3d npm package. As shown in [one example of Node.js script](https://github.com/ncbi/icn3d/blob/master/icn3dnode/interaction2.js), part of the script can be like the following. All classes and functions can be accessed with the variable "icn3dui". The class structure is listed at [iCn3D Doc](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html#classstructure).
+    
+    	global.THREE = require('three');
+    	let jsdom = require('jsdom');
+    	global.$ = require('jquery')(new jsdom.JSDOM().window);
+    	
+    	let icn3d = require('icn3d');
+    	let icn3dui = new icn3d.iCn3DUI({});
+
+* <b>Use icn3d as a 3D Viewer with React</b>
+
+    You can first specify the "dependencies.js" file as follows:
+
+		import * as THREE from 'icn3d/three'
+		import $ from 'jquery'
+		import 'jquery-ui-bundle';
+
+		import 'jquery-ui-bundle/jquery-ui.min.css';
+
+		global.THREE = THREE
+		global.$ = $
+		global.jQuery = $
+    
+	Then specify the "icn3d-viewer.js" file as follows:
+
+		import React, { useEffect } from "react";
+		import './dependencies';
+		
+		import * as icn3d from 'icn3d/module'
+		import "../node_modules/icn3d/css/icn3d.css"
+
+		function Icn3dViewer() {
+			useEffect(() => {
+				const cfg = {
+					divid: 'viewer',
+					mobilemenu: true
+				};
+				cfg['mmdbid'] = '1tup';
+				const icn3dui = new icn3d.iCn3DUI(cfg);
+				icn3dui.show3DStructure();
+			}, []);
+			return <div id="viewer"></div>;
+		}
+
+		export default Icn3dViewer;
+
+* <b>Use icn3d as a 3D Viewer with jQuery</b>
+
+    The source code is available in the [iCn3D GitHub page](https://github.com/ncbi/icn3d). You can following the instruction at [iCn3D Doc](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html#HowToUse). The JavaScript code could be as simple as the following:
+    
+    	var cfg = {'mmdbid': '1tup'};
+    	var icn3dui = new icn3d.iCn3DUI(cfg);
+    	icn3dui.show3DStructure();
 
-You can write Python scripts either based on iCn3D URLs as shown in the directory "icn3d_url", or by following the interactive steps in the directory "web_scraping", which enables you to extract any output from the UI.