# We assembled a widget from 3D Slicer in the browser

**URL:** <https://discourse.vtk.org/t/we-assembled-a-widget-from-3d-slicer-in-the-browser/11756>\
**Category:** Development\
**Tags:** vtkwasm\
**Created:** [June 19, 2023, 1:34am UTC](https://discourse.vtk.org/t/we-assembled-a-widget-from-3d-slicer-in-the-browser/11756 "2023-06-19T01:34:39Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![mazurkin.daniel](https://discourse.vtk.org/user_avatar/discourse.vtk.org/mazurkin.daniel/32/7277_2.png) [@mazurkin.daniel](https://discourse.vtk.org/u/mazurkin.daniel)\
**Post date:** [June 19, 2023, 1:34am UTC](https://discourse.vtk.org/t/we-assembled-a-widget-from-3d-slicer-in-the-browser/11756/1 "2023-06-19T01:34:39Z")

</div>

We assembled a widget from 3D Slicer in the browser, and if you’re interested, we can share the instructions.

 ![demo_1](https://discourse.vtk.org/uploads/default/original/2X/5/547edaa30c22f0689056b32bc595f0e743c12a28.jpeg)  
 ![demo_2](https://discourse.vtk.org/uploads/default/original/2X/0/09e728bd38e21a115ee8bd7ae7910e10eb5965a0.jpeg)

---

<div class="post-metadata">

**Author:** ![phong](https://discourse.vtk.org/user_avatar/discourse.vtk.org/phong/32/6887_2.png) [@phong](https://discourse.vtk.org/u/phong)\
**Post date:** [June 19, 2023, 6:45am UTC](https://discourse.vtk.org/t/we-assembled-a-widget-from-3d-slicer-in-the-browser/11756/2 "2023-06-19T06:45:27Z")

</div>

Hi Daniel,  
Would you mind share the instructions how to assemble a widget from 3D Slicer in the browser ?

Thanks

---

<div class="post-metadata">

**Author:** ![mazurkin.daniel](https://discourse.vtk.org/user_avatar/discourse.vtk.org/mazurkin.daniel/32/7277_2.png) [@mazurkin.daniel](https://discourse.vtk.org/u/mazurkin.daniel)\
**Post date:** [June 21, 2023, 2:55am UTC](https://discourse.vtk.org/t/we-assembled-a-widget-from-3d-slicer-in-the-browser/11756/3 "2023-06-21T02:55:38Z")

</div>

Hi, link to instruction and source code [Instruction by 3dSlicer - Google Docs](https://docs.google.com/document/d/1dXtK01DpxkANEJEbvwo1Dnph-B_XpNmor3kCTDFklp0/edit?usp=sharing)

---

<div class="post-metadata">

**Author:** ![phong](https://discourse.vtk.org/user_avatar/discourse.vtk.org/phong/32/6887_2.png) [@phong](https://discourse.vtk.org/u/phong)\
**Post date:** [June 21, 2023, 3:48am UTC](https://discourse.vtk.org/t/we-assembled-a-widget-from-3d-slicer-in-the-browser/11756/4 "2023-06-21T03:48:33Z")

</div>

I follow the instructions, but when I execute command, it throws error as below

```auto
~/workingspace/example_for_community/Cone on  master! ⌚ 10:46:32
$ npx itk-wasm -i my-vtk-wasm -b ./build-emscripten -s . build

Build environment image not found, pulling my-vtk-wasm...
Using default tag: latest
Error response from daemon: pull access denied for my-vtk-wasm, repository does not exist or may require 'docker login': denied: requested access to the resource is denied
Could not pull docker image my-vtk-wasm

```

Does it need to build image my-vtk-wasm ? How to do that ?

---

<div class="post-metadata">

**Author:** ![mazurkin.daniel](https://discourse.vtk.org/user_avatar/discourse.vtk.org/mazurkin.daniel/32/7277_2.png) [@mazurkin.daniel](https://discourse.vtk.org/u/mazurkin.daniel)\
**Post date:** [June 21, 2023, 4:19am UTC](https://discourse.vtk.org/t/we-assembled-a-widget-from-3d-slicer-in-the-browser/11756/5 "2023-06-21T04:19:33Z")

</div>

To build a Docker container from the root directory, you need to use the command: `docker build -t my-vtk-wasm .`

---

<div class="post-metadata">

**Author:** ![mazurkin.daniel](https://discourse.vtk.org/user_avatar/discourse.vtk.org/mazurkin.daniel/32/7277_2.png) [@mazurkin.daniel](https://discourse.vtk.org/u/mazurkin.daniel)\
**Post date:** [June 22, 2023, 1:02am UTC](https://discourse.vtk.org/t/we-assembled-a-widget-from-3d-slicer-in-the-browser/11756/6 "2023-06-22T01:02:05Z")

</div>

Did you build the project?

---

<div class="post-metadata">

**Author:** ![phong](https://discourse.vtk.org/user_avatar/discourse.vtk.org/phong/32/6887_2.png) [@phong](https://discourse.vtk.org/u/phong)\
**Post date:** [June 22, 2023, 3:19am UTC](https://discourse.vtk.org/t/we-assembled-a-widget-from-3d-slicer-in-the-browser/11756/7 "2023-06-22T03:19:04Z")

</div>

> [@phong](#):
>
> `npx itk-wasm -i my-vtk-wasm -b ./build-emscripten -s . build`

Yes, I did build. However I got this error where executing command

> ➜ Cone git:(master) ✗ npx itk-wasm -i my-vtk-wasm -b ./build-emscripten -s . build

```auto
VTK_OPENGL_USE_GLES: 
emscripten_link_options = SHELL:-s EXPORT_NAME=vtkRenderingApplicationExport-lembindSHELL:-s ALLOW_MEMORY_GROWTH=1SHELL:-s DEMANGLE_SUPPORT=1SHELL:-s MODULARIZE=1SHELL:-s WASM=1SHELL:-s DEMANGLE_SUPPORT=1--closure 1
emscripten_optimizations = -Oz
emscripten_debug_options = -g2
-- Configuring done
CMake Warning (dev) at CMakeLists.txt:376 (add_library):
  Policy CMP0115 is not set: Source file extensions must be explicit. Run
  "cmake --help-policy CMP0115" for policy details. Use the cmake_policy
  command to set the policy and suppress this warning.

  File:

    /work/slicer_mrml_repository/Core/vtkMRMLDisplayNode.cxx
This warning is for project developers. Use -Wno-dev to suppress it.

-- Generating done
-- Build files have been written to: /work/build-emscripten
[1/3] Building CXX object CMakeFiles/mrml_core.dir/src/Line/Line.cxx.o
FAILED: CMakeFiles/mrml_core.dir/src/Line/Line.cxx.o 
/emsdk/upstream/emscripten/em++ -DDIY_NO_THREADS -DGLEW_STATIC -DVTK_ENABLE_WEBGPU -DVTK_HAS_OGGTHEORA_SUPPORT -Dkiss_fft_scalar=double -I/work/./slicer_mrml_repository/teem -I/work/./slicer_mrml_repository -I/work/./slicer_mrml_repository/MRML -I/work/./slicer_mrml_repository/vtkTeem -I/work/./slicer_mrml_repository/Core -I/work/./slicer_mrml_repository/ITK-5.3 -I/work/./slicer_mrml_repository/libarchive -I/work/./slicer_mrml_repository/vtkSegmentationCore -I/work/./slicer_mrml_repository/vtkITK -I/work/./slicer_mrml_repository/slicerITK/ITK/Modules/Core/Common -I/work/./slicer_mrml_repository/slicerITK/ITK/Modules/Core/Common/src -I/work/./slicer_mrml_repository/CMake -I/work/./vtk_new/ThirdParty/freetype/vtkfreetype/include -I/work/./slicer_mrml_repository/VTK -I/work/./slicer_mrml_repository/GL -I/work/./slicer_mrml_repository/Qt5CoreConfig -I/work/./slicer_mrml_repository/config_qt/Qt5 -I/work/./slicer_mrml_repository/qt5/QtCore -I/work/./slicer_mrml_repository/qt5 -I/work/./slicer_mrml_repository/qt5/QtWidgets -I/work/./slicer_mrml_repository/qt5/QtGui -I/work/install/include/vtk-9.2 -I/work/./vtk_new/Utilities/KWSys/vtksys -I/work/./vtk_new/Utilities/KWSys -I/work/./vtk_new/Rendering/Core -I/work/./build-vtk-wasm-2/Common/Core -I/work/./build-vtk-wasm-2/Rendering/FreeType -I/work/./vtk_new/Common/ExecutionModel -I/work/./vtk_new/IO/Export -I/work/./vtk_new/Utilities/KWIML -I/work/./build-vtk-wasm-2/Common/ExecutionModel -I/work/./build-vtk-wasm-2/Filters/Sources -I/work/./build-vtk-wasm-2/Filters/Parallel -I/work/./vtk_new/cmake-build-debug/IO/Geometry -I/work/./vtk_new/IO

```

---

<div class="post-metadata">

**Author:** ![mazurkin.daniel](https://discourse.vtk.org/user_avatar/discourse.vtk.org/mazurkin.daniel/32/7277_2.png) [@mazurkin.daniel](https://discourse.vtk.org/u/mazurkin.daniel)\
**Post date:** [June 22, 2023, 3:36am UTC](https://discourse.vtk.org/t/we-assembled-a-widget-from-3d-slicer-in-the-browser/11756/8 "2023-06-22T03:36:03Z")

</div>

It full error?

---

<div class="post-metadata">

**Author:** ![phong](https://discourse.vtk.org/user_avatar/discourse.vtk.org/phong/32/6887_2.png) [@phong](https://discourse.vtk.org/u/phong)\
**Post date:** [June 22, 2023, 3:40am UTC](https://discourse.vtk.org/t/we-assembled-a-widget-from-3d-slicer-in-the-browser/11756/9 "2023-06-22T03:40:41Z")

</div>

The attachment is the full log . I am using node version : 14.x  
[error.txt](https://discourse.vtk.org/uploads/short-url/2qLdIdyWcXPrstVzmlxoVRcGSif.txt) (39.2 KB)

---

<div class="post-metadata">

**Author:** ![mazurkin.daniel](https://discourse.vtk.org/user_avatar/discourse.vtk.org/mazurkin.daniel/32/7277_2.png) [@mazurkin.daniel](https://discourse.vtk.org/u/mazurkin.daniel)\
**Post date:** [June 22, 2023, 10:33am UTC](https://discourse.vtk.org/t/we-assembled-a-widget-from-3d-slicer-in-the-browser/11756/10 "2023-06-22T10:33:48Z")

</div>

Sorry, there was an error in the source code, upload example with fixes. [without\_error.tar.gz - Google Drive](https://drive.google.com/file/d/1ezosYJE0vEp1IkC88umceueTi-hCssJf/view)

---

<div class="post-metadata">

**Author:** ![mazurkin.daniel](https://discourse.vtk.org/user_avatar/discourse.vtk.org/mazurkin.daniel/32/7277_2.png) [@mazurkin.daniel](https://discourse.vtk.org/u/mazurkin.daniel)\
**Post date:** [June 22, 2023, 3:22pm UTC](https://discourse.vtk.org/t/we-assembled-a-widget-from-3d-slicer-in-the-browser/11756/11 "2023-06-22T15:22:50Z")

</div>

Please tell me if you fix error 🙂

---

<div class="post-metadata">

**Author:** ![phong](https://discourse.vtk.org/user_avatar/discourse.vtk.org/phong/32/6887_2.png) [@phong](https://discourse.vtk.org/u/phong)\
**Post date:** [June 23, 2023, 1:30am UTC](https://discourse.vtk.org/t/we-assembled-a-widget-from-3d-slicer-in-the-browser/11756/12 "2023-06-23T01:30:33Z")

</div>

H Daniel,  
Yes, I run the new source code without errors.

```auto
VTK_LIB: VTK::CommonCore
Current project directory: /work
INTERFACE_INCLUDE_DIRECTORIES. 
VTK_OPENGL_USE_GLES: 
emscripten_link_options = SHELL:-s EXPORT_NAME=vtkRenderingApplicationExport-lembindSHELL:-s ALLOW_MEMORY_GROWTH=1SHELL:-s DEMANGLE_SUPPORT=1SHELL:-s MODULARIZE=1SHELL:-s WASM=1SHELL:-s DEMANGLE_SUPPORT=1--closure 1
emscripten_optimizations = -Oz
emscripten_debug_options = -g2
-- Configuring done
CMake Warning (dev) at CMakeLists.txt:376 (add_library):
  Policy CMP0115 is not set: Source file extensions must be explicit. Run
  "cmake --help-policy CMP0115" for policy details. Use the cmake_policy
  command to set the policy and suppress this warning.

  File:

    /work/slicer_mrml_repository/Core/vtkMRMLDisplayNode.cxx
This warning is for project developers. Use -Wno-dev to suppress it.

-- Generating done
-- Build files have been written to: /work/build-emscripten
ninja: no work to do.

```

What is the next step to run app in browser ?

---

<div class="post-metadata">

**Author:** ![mazurkin.daniel](https://discourse.vtk.org/user_avatar/discourse.vtk.org/mazurkin.daniel/32/7277_2.png) [@mazurkin.daniel](https://discourse.vtk.org/u/mazurkin.daniel)\
**Post date:** [June 23, 2023, 1:49am UTC](https://discourse.vtk.org/t/we-assembled-a-widget-from-3d-slicer-in-the-browser/11756/13 "2023-06-23T01:49:27Z")

</div>

Hi, you need run server (for example python3 -m http.server 8000) in folder build-emscripten. Please tell me about results this

---

<div class="post-metadata">

**Author:** ![phong](https://discourse.vtk.org/user_avatar/discourse.vtk.org/phong/32/6887_2.png) [@phong](https://discourse.vtk.org/u/phong)\
**Post date:** [June 23, 2023, 1:52am UTC](https://discourse.vtk.org/t/we-assembled-a-widget-from-3d-slicer-in-the-browser/11756/14 "2023-06-23T01:52:21Z")

</div>

I see a black screen,

 ![image](https://discourse.vtk.org/uploads/default/original/2X/7/78a2577114a3acac2065d405916ed7123db664fd.png)

---

<div class="post-metadata">

**Author:** ![mazurkin.daniel](https://discourse.vtk.org/user_avatar/discourse.vtk.org/mazurkin.daniel/32/7277_2.png) [@mazurkin.daniel](https://discourse.vtk.org/u/mazurkin.daniel)\
**Post date:** [June 23, 2023, 1:53am UTC](https://discourse.vtk.org/t/we-assembled-a-widget-from-3d-slicer-in-the-browser/11756/15 "2023-06-23T01:53:10Z")

</div>

Click by second button in row please

---

<div class="post-metadata">

**Author:** ![phong](https://discourse.vtk.org/user_avatar/discourse.vtk.org/phong/32/6887_2.png) [@phong](https://discourse.vtk.org/u/phong)\
**Post date:** [June 23, 2023, 1:59am UTC](https://discourse.vtk.org/t/we-assembled-a-widget-from-3d-slicer-in-the-browser/11756/16 "2023-06-23T01:59:35Z")

</div>

Still got a black screen, I opened the devtool and see many error like these ones

 ![image](https://discourse.vtk.org/uploads/default/original/2X/a/a5fe8417368132b3cf630ba2ac8d86e7dedb1aae.png)

---

<div class="post-metadata">

**Author:** ![mazurkin.daniel](https://discourse.vtk.org/user_avatar/discourse.vtk.org/mazurkin.daniel/32/7277_2.png) [@mazurkin.daniel](https://discourse.vtk.org/u/mazurkin.daniel)\
**Post date:** [June 23, 2023, 2:07am UTC](https://discourse.vtk.org/t/we-assembled-a-widget-from-3d-slicer-in-the-browser/11756/17 "2023-06-23T02:07:32Z")

</div>

It is strange behavior, need to reaserch beacuse problems with WebGL lost