fix(cli): Improve cli output and doc

bin/ItkVtkImageViewer-cli.js

@@ -5,6 +5,7 @@ var ipList = require('./network');
 var server = require('./server');
 var pkg = require('../package.json');
 var openFn = require('open');
+var shell = require('shelljs');
 
 var app = null;
 var version = /semantically-release/.test(pkg.version) ? 'development version' : pkg.version;
@@ -24,8 +25,9 @@ function printIP(l) {
 program
   .version(version)
   .option('-p, --port [3000]', 'Start web server with given port', handlePort, 3000)
-  .option('-d, --data [directory/http]', 'Data directory to serve')
-  .option('-s, --server-only', 'Do not open the web browser')
+  .option('-d, --data [directory]', 'Data directory to serve')
+  .option('-s, --server-only', 'Do not open the web browser\n')
+  .option('-f, --filter [nrrd,png,tiff,bmp]', 'List files with those extensions in data directory', 'nrrd,png,tiff,bmp')
   .parse(process.argv);
 
 if (!process.argv.slice(2).length || !program.help) {
@@ -50,6 +52,16 @@ if (ipList.length === 1) {
   console.log();
 }
 
+// Show data files
+if (program.data) {
+  console.log('  => Available data files:\n');
+  var regexp = new RegExp(program.filter.split(',').map(t => `(?:\.${t.trim()}$)`).join('|'));
+  shell.ls('-R', dataPath).filter(t => t.match(regexp)).forEach((name) => {
+    console.log(`    /?fileToLoad=/data/${name.replace(/ /g, '%20')}`);
+  });
+  console.log();
+}
+
 // Open browser if asked
 if (!program.serverOnly) {
   openFn(['http://localhost:', program.port].join(''));

doc/content/docs/cli.md

@@ -0,0 +1,66 @@
+title: Command Line Interface
+---
+
+ITK/VTK Image Viewer can be used as a command line tool for opening and visualizing your local data file.
+
+## Installation
+
+First of all, you will need to install the tool on you system which will require Node.js.
+Assumming your environment already has node, you should be able to run the following command line.
+
+```sh
+$ npm install itk-vtk-image-viewer -g
+```
+
+The command line will install globally the application which should enable a new command line:
+
+```sh
+$ ItkVtkImageViewer
+
+  Usage: ItkVtkImageViewer [options]
+
+  Options:
+
+    -h, --help                        output usage information
+    -V, --version                     output the version number
+    -p, --port [3000]                 Start web server with given port
+    -d, --data [directory]            Data directory to serve
+    -s, --server-only                 Do not open the web browser
+
+    -f, --filter [nrrd,png,tiff,bmp]  List files with those extensions in data directory
+```
+
+## Usage 
+
+Listed above are the various options available, but below are commonly used commands:
+
+
+### Quick start
+
+Start a server on default port without automatically opening a browser and sharing your local `~/itk-data` directory as `/data`.
+
+This allow to visualize file on the local file system via a given URL: 
+- `http://10.21.3.245:3000/?fileToLoad=/data/005_20months_T2_Reg2Atlas.nrrd`
+
+```sh
+$ ItkVtkImageViewer -sd ~/itk-data
+
+ItkVtkImageViewer
+  => Serve /home/ItkConsortium/itk-data on port 3000
+
+     en0 => http://10.21.3.245:3000/
+
+  => Available data files:
+
+    /?fileToLoad=/data/005_20months_T2_Reg2Atlas.nrrd
+    /?fileToLoad=/data/005_32months_Reg2Atlas_ManualBrainMask.nrrd
+    /?fileToLoad=/data/ScreenShot2017.png
+```
+
+### Drag and drop viewer
+
+```sh
+$ ItkVtkImageViewer -p
+```
+
+![ItkVtkImageViewer](./viewer.jpg)

doc/content/docs/embeddedViewer.md

@@ -0,0 +1,68 @@
+title: Embedded Viewer
+---
+
+ITK/VTK Image Viewer can be used within an existing web site as a library to embed interactive 3D visualization using remote datasets.
+To do so a container elements should be created for that view inside your current HTML content like follow.
+
+```html
+<div class="itk-vtk-image-viewer" />
+```
+
+Moreover, the JavaScript library should also be added to the web page. Only one of the following is required
+
+```html
+<script type="text/javascript" src="https://kitware.github.io/itk-vtk-image-viewer/app/itkVtkImageViewer.js">
+```
+
+or 
+
+```html
+<script type="text/javascript" src="https://unpkg.com/itk-vtk-image-viewer/dist/itkVtkImageViewer.js">
+```
+
+### Viewer configuration
+
+The container `<div/>` can be extended with the following set of attributes:
+
+- (Mandatory) data-url="/data/005_36months_T2_RegT1_Reg2Atlas_ManualBrainMask_Stripped.nrrd"
+- (Optinal) data-viewport="300x200" | default is 500x500
+- (Optinal) data-background-color="00aa00" | default is black
+
+
+![ItkVtkImageViewer-embedded](./embeddedViewer.jpg)
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+
+    [...]
+
+    <div
+      style="float: right; display: inline-block; border: 2px solid gray; margin: 20px;"
+      class="itk-vtk-image-viewer"
+      data-url="/data/005_36months_T2_RegT1_Reg2Atlas_ManualBrainMask_Stripped.nrrd"
+      data-viewport="300x200"
+    ></div>
+
+    [...]
+
+    <div
+      style="float: left; display: inline-block; border: 2px solid gray; margin: 20px;"
+      class="itk-vtk-image-viewer"
+      data-url="/data/005_20months_T2_Reg2Atlas.nrrd"
+      data-viewport="400x400"
+      data-background-color="ffffff"
+    ></div>
+
+    [...]
+
+    <script type="text/javascript" src="itkVtkImageViewer.js">
+    </script>
+  </body>
+</html>
+```

doc/content/docs/viewer.md

@@ -0,0 +1,9 @@
+title: Default viewer
+---
+
+The default view of the ITK/VTK Image Viewer let you drag and drop into the page the data file that you want to look at.
+But an additional usage of that page is possible by providing extra arguments to the URL. This allow to reference remote dataset and enable there visualization in full screen.
+
+The extra argument to provide is `?fileToLoad=[...]` where the path provided can be relative to the current location on the Web or you can provide a full http:// url to the actual data.
+
+![ItkVtkImageViewer](./dataViewer.jpg)

doc/content/index.jade

@@ -1,7 +1,7 @@
 layout: index
 description: ITK/VTK Image Viewer
 subtitle: Load your data with ITK and Visualize it with vtk.js
-cmd: npm install -g itk-vtk-image-viewer
+cmd: ItkVtkImageViewer --help
 comments: false
 ---
 
@@ -12,6 +12,7 @@ ul#intro-feature-list
         i.fa.fa-cloud-download
       h3.intro-feature-title
         a(href="https://www.npmjs.com/package/itk-vtk-image-viewer").link Releases
+        img(style="padding-left: 25px",src="https://badge.fury.io/js/itk-vtk-image-viewer.svg")
       p.intro-feature-desc ITK/VTK Image Viewer is a Web based viewer for loading DICOM images and more...
 
   li.intro-feature-wrap
@@ -22,18 +23,9 @@ ul#intro-feature-list
         a(href="http://www.vtk.org/services/").link Support and Services
       p.intro-feature-desc Kitware offers advanced software R&D solutions and services. Find out how we can help with your next project.
 
-  li.intro-feature-wrap
-    .intro-feature
-      .intro-feature-icon
-        i.fa.fa-graduation-cap
-      h3.intro-feature-title
-        a(href="http://www.kitware.com/products/protraining.php").link Training Courses
-      p.intro-feature-desc Attend an upcoming training course
+ul#intro-cmd-wrap(style='margin-top: 25px;border-radius: 10px;')
+  li.intro-cmd-item npm install itk-vtk-image-viewer -g
+  li.intro-cmd-item ItkVtkImageViewer -s
 
-  li.intro-feature-wrap
-    .intro-feature
-      .intro-feature-icon
-        i.fa.fa-comments-o
-      h3.intro-feature-title
-        a(href="http://vtk.uservoice.com/forums/31508-general").link Request a Feature
-      p.intro-feature-desc Tell us what you think
+p(style='text-align: center; margin: 20px auto; max-width: 700px;')
+  img(src='./docs/howToUse.jpg', width='100%')

doc/tpl/__en__

@@ -28,3 +28,7 @@ sidebar:
     testing: Testing
     tests: Tests
     coverage: Coverage
+    cli: Command Line
+    viewer: Viewer
+    embeddedViewer: Inline Viewer
+

doc/tpl/__sidebar__

@@ -1,3 +1,6 @@
 docs:
   getting_started:
     overview: index.html
+    cli: cli.html
+    viewer: viewer.html
+    embeddedViewer: embeddedViewer.html

package.json

@@ -19,27 +19,32 @@
     "gh-pages": "0.10.0",
     "gl-matrix": "2.3.1",
     "open": "0.0.5",
-    "seedrandom": "2.4.2"
+    "seedrandom": "2.4.2",
+    "shelljs": "0.7.4"
   },
   "devDependencies": {
     "babel-polyfill": "6.13.0",
     "itk": "^2.0.0",
+
     "kw-doc": "1.0.20",
     "kw-web-suite": "2.2.1",
     "normalize.css": "5.0.0",
-    "shelljs": "^0.7.4",
-    "shx": "^0.2.2",
+
+    "shx": "0.2.2",
     "vtk.js": "2.24.1"
   },
   "scripts": {
     "doc": "kw-doc -c ./doc/config.js",
-    "doc:www": "npm t -- --single-run && kw-doc -c ./doc/config.js -s",
+    "doc:www": "kw-doc -c ./doc/config.js -s",
     "doc:publish": "kw-doc -c ./doc/config.js -mp",
+
     "build": "webpack --progress --colors",
     "build:debug": "webpack --progress --colors --display-modules",
     "build:release": "export NODE_ENV=production && npm run build -- -p",
     "postbuild:release": "npm run bundle && shx cp -r ./node_modules/itk/dist/* ./dist/",
+
     "bundle": "StandaloneHTML ./dist/index.html ./dist/ItkVtkImageViewer.html",
+
     "commit": "git cz",
     "semantic-release": "semantic-release pre && npm publish && semantic-release post"
   },