Skip to main content

Atlas

Voxel Atlas

examples/vox.atlas.htmlOpen full pageSource

Code

vox.atlas.js
import NiiVue from '@niivue/niivue'

// Label volumes default to nearest (NIFTI_INTENT_LABEL or a label colormap);
// this overrides it for the atlas.
nearestCheck.onclick = function () {
nv1.setVolume(1, { isNearestInterpolation: this.checked })
}
darkCheck.onclick = function () {
nv1.volumeIsAlphaClipDark = this.checked
}
opacitySlider.oninput = function () {
nv1.setVolume(1, {
opacity: this.value * 0.01,
})
}
legendCheck.onchange = async function () {
await nv1.setVolume(1, { isLegendVisible: this.checked })
}
// On: a legend colour box hides/shows its region; the name still moves the
// crosshair.
legendToggleCheck.onchange = function () {
nv1.isLegendToggleEnabled = this.checked
}
outlineSlider.oninput = function () {
// 0 fills each region; a positive value is the neighbour probe distance in
// the atlas' own voxels, so a wider setting draws a thicker border.
nv1.setAtlasOutline(parseInt(this.value, 10), 1)
}
colorbarCheck.onclick = function () {
nv1.isColorbarVisible = this.checked
}
colorBtn.addEventListener('input', (event) => {
const input = event.target
const hex = input.value
const r = parseInt(hex.slice(1, 3), 16) / 255
const g = parseInt(hex.slice(3, 5), 16) / 255
const b = parseInt(hex.slice(5, 7), 16) / 255
nv1.backgroundColor = [r, g, b, 1.0]
})
webgpuCheck.onclick = function () {
nv1.reinitializeView({ backend: this.checked ? 'webgpu' : 'webgl2' })
}
aboutBtn.onclick = () => {
window.alert('The Automated Anatomical Labeling atlas PMID: 11771995.')
}

function handleLocationChange(data) {
document.getElementById('location').innerHTML = `  ${data.string}`
}
const nv1 = new NiiVue({ backgroundColor: [0.3, 0.3, 0.5, 1] })
nv1.addEventListener('locationChange', (e) => handleLocationChange(e.detail))
await nv1.attachToCanvas(gl1)

nv1.showRender = 1
var volumeList = [
{ url: '/volumes/mni152.nii.gz', calMin: 30, calMax: 80 },
{ url: '/volumes/aal.nii.gz' },
]
await nv1.loadVolumes(volumeList)
// Registered under its file name; a `labels` array makes it a label map.
await nv1.addColormapFromUrl('/volumes/aal.json')
await nv1.setVolume(1, { colormap: 'aal' })
darkCheck.onclick()
nearestCheck.onclick()
opacitySlider.oninput()