itk-viewer-bootstrap-ui
Version:
[](https://badge.fury.io/js/itk-viewer-bootstrap-ui)  [ • 9.04 kB
Markdown
# User Guide
## Notebooks
Since July 2022, ITK Viewer Bootstrap UI is the default UI for ITKWidgets-1.0. However, you can control the UI by passing the `ui` argument to the view function:
For the reference UI:
```
view(image, ui='reference')
```
For the material UI:
```
view(image, ui='mui')
```
For more information about ITKWidgets 1.0, please visit the [documentation website](https://itkwidgets.readthedocs.io/en/latest/index.html).
### Launch ITKWidgets 1.0 using Jupyter Notebook
Install
```
$ pip install 'itkwidgets[notebook]>=1.0a8'
```
and then use it in your notebook:
```
from itkwidgets import view
```
### Launch ITKWidgets 1.0 using Jupyter Lab
Install
```
$ pip install 'itkwidgets[lab]>=1.0a8'
```
and then use it in your notebook:
```
from itkwidgets import view
```
### Launch ITKWidgets using Jupyter Lite
```
import piplite
await piplite.install("itkwidgets==1.0a8")
from itkwidgets import view
```
### Launch itkwidgets using Google Colab
Install and use it in your notebook:
```
import sys
!{sys.executable} -m pip install -q "itkwidgets>=1.0a8" imageio
from itkwidgets import view
```
Try the demo notebook [here](https://colab.research.google.com/github/InsightSoftwareConsortium/itkwidgets/blob/main/examples/Hello3DWorld.ipynb).
## Using the Web App
By default, the web app loads the files `./test-data/HeadMRVolume.nrrd` and `./test-data/HeadMRVolumeLabels.nrrd`. To visualize a different image, mesh, or point set file in your local system you can set the `image` and `labelImage` arguments in `index.html` to the desired URL.
Below, there are some examples to test the behavior of the UI by changing `index.html`:
### Point Sets
<details>
<summary>Click to expand!</summary>
```
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom itk-viewer Bootstrap UI Demo</title>
</head>
<body>
<div
class="content"
style="
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
overflow: hidden;
background: black;
margin: 0;
padding: 0;
"
></div>
<script
type="text/javascript"
src="https://unpkg.com/@babel/polyfill@7.0.0/dist/polyfill.js"
></script>
<script type="text/javascript" src="https://unpkg.com/vtk.js"></script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/itk-vtk-viewer@14/dist/itkVtkViewer.js"
></script>
<script>
const container = document.querySelector('.content')
const points = vtk({
vtkClass: 'vtkPolyData',
points: {
vtkClass: 'vtkPoints',
name: '_points',
numberOfComponents: 3,
dataType: 'Float32Array',
size: 2,
values: new Float32Array([
-0.44442534, -1.1349318, 0.8388769, 2.0538256, -1.9028517,
0.71276945
])
},
verts: {
vtkClass: 'vtkCellArray',
name: '_verts',
numberOfComponents: 1,
dataType: 'Uint32Array',
size: 4,
values: new Uint16Array([1, 0, 1, 1])
}
})
const uiMachineOptions = {
href: new URL(
'/src/bootstrapUIMachineOptions.js',
document.location.origin
).href
}
itkVtkViewer.createViewer(container, {
pointSets: [points],
rotate: false,
config: { uiMachineOptions }
})
</script>
</body>
</html>
```
</details>
### IPFS Image
<details>
<summary>Click to expand!</summary>
```
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom itk-viewer Bootstrap UI Demo</title>
</head>
<body>
<div class="content" style="
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
overflow: hidden;
background: black;
margin: 0;
padding: 0;
"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/itk-vtk-viewer@14/dist/itkVtkViewer.js"></script>
<script>
const container = document.querySelector('.content')
const ipfsImage = new URL(
'./test-data/HeadMRVolume.nrrd',
document.location.origin
)
const uiMachineOptions = {
href: new URL(
'/src/bootstrapUIMachineOptions.js',
document.location.origin
).href
}
itkVtkViewer.createViewer(container, {
image: ipfsImage,
rotate: false,
config: { uiMachineOptions }
})
</script>
</body>
</html>
```
</details>
### IPFS Image + Label
<details>
<summary>Click to expand!</summary>
```
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom itk-viewer Bootstrap UI Demo</title>
</head>
<body>
<div class="content" style="
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
overflow: hidden;
background: black;
margin: 0;
padding: 0;
"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/itk-vtk-viewer@14/dist/itkVtkViewer.js"></script>
<script>
const container = document.querySelector('.content')
const ipfsImage = new URL(
'./test-data/HeadMRVolume.nrrd',
document.location.origin
)
const labelImage = new URL(
'./test-data/HeadMRVolumeLabels.nrrd',
document.location.origin
)
const uiMachineOptions = {
href: new URL(
'/src/bootstrapUIMachineOptions.js',
document.location.origin
).href
}
itkVtkViewer.createViewer(container, {
image: ipfsImage,
labelImage,
rotate: false,
config: { uiMachineOptions }
})
</script>
</body>
</html>
```
</details>
### 2D Image with multiple color channels
You can introduce an extra argument to the `itkVtkViewer.createViewer` function to indicate your data set is bidimensional:
<details>
<summary>Click to expand!</summary>
```
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom itk-viewer Bootstrap UI Demo</title>
</head>
<body>
<div class="content" style="
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
overflow: hidden;
background: black;
margin: 0;
padding: 0;
"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/itk-vtk-viewer@14/dist/itkVtkViewer.js"></script>
<script>
const container = document.querySelector('.content')
const ipfsImage = new URL(
'http://localhost:8082/test-data/astronaut.zarr',
document.location.origin
)
const uiMachineOptions = {
href: new URL(
'/src/bootstrapUIMachineOptions.js',
document.location.origin
).href
}
itkVtkViewer.createViewer(container, {
image: ipfsImage,
rotate: false,
config: { uiMachineOptions },
use2D: true
})
</script>
</body>
</html>
```
</details>
### 3D Image with multiple color channels
<details>
<summary>Click to expand!</summary>
```
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom itk-viewer Bootstrap UI Demo</title>
</head>
<body>
<div
class="content"
style="
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
overflow: hidden;
background: black;
margin: 0;
padding: 0;
"
></div>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/itk-vtk-viewer@14/dist/itkVtkViewer.js"
></script>
<script>
const container = document.querySelector('.content')
const image = new URL(
'http://localhost:8082/test-data/ome-ngff-prototypes/single_image/v0.4/tczyx.ome.zarr',
document.location.origin
)
const uiMachineOptions = {
href: new URL(
'/src/bootstrapUIMachineOptions.js',
document.location.origin
).href
}
itkVtkViewer.createViewer(container, {
image,
rotate: false,
config: { uiMachineOptions }
})
</script>
</body>
</html>
```
</details>