Skip to content
This repository has been archived by the owner on Aug 16, 2021. It is now read-only.

hanayik/niivue

Repository files navigation

NiiVue

*** THIS REPO HAS BEEN MOVED ***

new location: https://github.com/niivue/niivue

Overview

NiiVue is a minimalist webgl nifti image viewer (for now).

The goal is to have a simple viewer component that can be embedded in an existing web page. The component can be simply embedded into any web page. Optionally, the component can be controlled by other widgets on the web page, for example controls that allow the user to set the contrast, color scheme and other properties.

Live View

Load a NiiVue web page

Requirements

  • WebGL2 enabled browser (Chrome, FireFox or Safari Technology Preview).
  • Several node modules should be automatically installed, including the NIFTI-Reader-JS.

Contributors

Acknowledgements

Alternatives

There are several open source JavaScript NIfTI viewers. What makes niivue unique is that it is a self contained Vue.js component. This makes it easy to integrate with Vue web pages. Unlike many alternatives, niivue does not use three.js. This means the WebGL calls are tuned for voxel display, and the screen is only refreshed when needed (preserving battery life and helping your computer do other tasks). On the other hand, niivue does not have access to the three.js user interface widgets, requiring the developer to use vue.js components. Since there are numerous free alternatives, you can choose the optimal tool for your task. Francesco Giorlando describes some of the differences between different tools.

Tool Live Demos
AMI live demo
BioImage Suite Web Project live demo
BrainBrowser live demo
nifti-drop live demo
Med3web live demo
MRIcroWeb live demo
Papaya live demo
VTK.js live demo

Development Environment

Development Installation

# You must install nodejs on your system FIRST!

# Use https protocol also if you want
git clone git@github.com:hanayik/niivue.git

cd niivue

npm install

Compiles and hot-reloads for development

# nifti files are stored in /public
npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Core data loading concepts

niivue.js functions should be designed to accept an overlayList (Array) such as:

overlayList: [
    {
      volumeURL: "./mni152.nii.gz",
      volume: {hdr: null, img: null},
      name: "mni152.nii.gz",
      intensityMin: 0,
      intensityMax: 100,
      intensityRange:[0, 100],
      colorMap: "gray", // gray
      opacity: 100,
    },
    {
      volumeURL: "./chris_T1.nii.gz",
      volume: {hdr: null, img: null},
      name: "chris_T1.nii.gz",
      intensityMin: 0,
      intensityMax: 100,
      intensityRange:[0, 100],
      colorMap: "gray", // gray
      opacity: 100,
    }
]

This overlayList informs niivue WebGL calls about most rendering related settings. For now, only the first item in the array is rendered until overlays (layering) is actually supported.