new location: https://github.com/niivue/niivue
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.
- WebGL2 enabled browser (Chrome, FireFox or Safari Technology Preview).
- Several node modules should be automatically installed, including the NIFTI-Reader-JS.
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 |
# 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
# nifti files are stored in /public
npm run serve
npm run build
npm run lint
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.