@janelia/sharkviewer NPM

SharkLogo

Shark Viewer

NEW

09-26-2014 - Synapse Annotations. Load annotations from a separate file with format "x y z\n" for each annotation. You can use annotation_parser(annotation_text) to parse it into the format {'x': x, 'y': y, 'z':z}, {'x': x1, 'y': y1, 'z':z1}, ..., {'x': xn, 'y': yn, 'z':zn} and load that into the annotation property of SharkViewer.

08-08-2014 - Three.js loader version: html/js/sharkviewer_loader.js If you want to use the neuron rendered from SharkViewer in another scene use this version. html/Shark_Viewer_Loader_Version.html shows an example of how to use it.

06-18-2014 - Serverless SharkViewer! Now the html/Shark_Viewer.html file allows you to load and view your own SWC files without a server. Simply download the repository and open Shark_Viewer.html in a browser, then use the form to view your own SWC files.

DESCRIPTION

SharkViewer is a web-based viewer for SWC neuron files. It is written entirely in JavaScript using Three.js. To view SWC format guidelines visit: http://research.mssm.edu/cnic/swc.html

EXAMPLE

http://janeliascicomp.github.io/SharkViewer/

QUICK START

Install the dependencies

npm install

Start up a test server

npm run start

Click 'Choose File' button to load a SWC file.

USAGE

AS A MODULE

fetch the package

npm install @janelia/sharkviewer

import

import SharkViewer, { swcParser } from sharkViewer;

Create a new SharkViewer object. At a minimum you need to give it a DOM element to attach a canvas to.

var s = new sharkViewer({ dom_element: 'container' });

Initialize the SharkViewer

s.init();

Animate the SharkViewer

s.animate();

load in a neuron swc file.

const swcJSON = swcParser(swcText);
s.loadNeuron('neuron_name', '#ff0000', swcJSON);

AS A LIBRARY

download this repository
copy lib/shark_viewer.js and lib/three.min.js into your project
Load the javascript files into your page

<script src="three.min.js"></script>
<script src="shark_viewer.js"></script>

Create a new SharkViewer object. At a minimum you need to give it a DOM element to attach a canvas to.

var s = new sharkViewer.default({ swc: swc, dom_element: 'container' });

Initialize the SharkViewer

s.init();

Animate the SharkViewer

s.animate();

Load an SWC file into json. There is a helper function swcParser(swcText) available, or you can write your own to process it server side and load via AJAX.

var swcJSON = sharkViewer.swcParser(swcTxt); ;
s.loadNeuron('neuron_name', '#ff0000', swcJSON);

lib/index.html shows an example of this setup.

sharkViewer.default()

Create a new SharkViewer instance to display a collection of neurons.

Arguments

dom_element - html element that will receive the webgl canvas
- Default: 'container'
mode - sphere (full 3-D rendering for nodes and connections, slow), particle (uses particle system to speed rendering and make it look better), or skeleton (no nodes, just connections, very fast)
- Default: 'particle'
show_cones - show cones between cylinders for particle and sphere mode
- Default: true;

colors - color array for display, nodes of type 0 show as first color, etc.

Default:

[
			    0x00be9e,
			    0x3919cb,
			    0x7d0bc4,
			    0xff6700,
			    0x3eef00,
			    0xffce00,
			    0xf50027,
			    0x606060,
]

metadata - array of javascript objects with labels and type numbers to display as legend (type number matches to type column in swc file) format:
- Default: false
- Example:

[{"label":"undefined","type":0},{"label":"soma","type":1}]

annotation - array of javascript objects with x, y, z coordinates to display as synapse annotations.
- Default: false
- Example:

[{'x': x, 'y': y, 'z':z}, {'x': x1, 'y': y1, 'z':z1}, ..., {'x': xn, 'y': yn, 'z':zn}]

annotation_color - color to display annotations
Default 0x111111

sharkViewer.swcParser(swcText)

Parse SWC files into a JSON format for loading into the viewer.

Arguments

swcText string: An SWC file based on the format described at http://research.mssm.edu/cnic/swc.html

sharkViewer.loadNeuron(name, color, swcJSON, updateCamera)

Load a neuron SWC JSON object into the viewer and center the camera around it.

Arguments

name string: A simple text string used to identify the object. Used by other functions to remove or hide it.
color string: Hexadecimal string to determine the color of the neuron.
swcJSON JSON: JSON string representation of the SWC file. A description of the expected format is shown below.

swc json object: {
    id : {
        type: <type number of node (string)>,
        x: <x position of node (float)>,
        y: <y position of node (float)>,
        z: <z position of node (float)>,
        parent: <id number of node parent (-1 if no parent)>,
        radius: <radius of node (float)>,
    }
}