# Embed html file into the scripted module

**URL:** <https://discourse.slicer.org/t/embed-html-file-into-the-scripted-module/18975>\
**Category:** Support\
**Tags:** python\
**Created:** [July 29, 2021, 4:54pm UTC](https://discourse.slicer.org/t/embed-html-file-into-the-scripted-module/18975 "2021-07-29T16:54:19Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hualin](https://avatars.discourse-cdn.com/v4/letter/h/f6c823/32.png) [@Hualin](https://discourse.slicer.org/u/Hualin)\
**Post date:** [July 29, 2021, 4:54pm UTC](https://discourse.slicer.org/t/embed-html-file-into-the-scripted-module/18975/1 "2021-07-29T16:54:19Z")

</div>

Operating system: Ubuntu18.04  
Slicer version: 4.13.0-2021-07-21 r3042 / 2a223c0

Hello，  
I am trying to generate a scripted module with embed html. Then I use webEngineView and set the webEngineView url to my html file. Since I want html js to interact with slicer, I use websockets to allow the two to interact, but whether I use multi-process or Cli Module to run websockets server, I can’t operate view node in Slicer. So, is there any good solution to implement the interaction between the embedded HTML components and the Slicer scene?

Thank you

---

<div class="post-metadata">

**Author:** ![pieper](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/pieper/32/8_2.png) [@pieper](https://discourse.slicer.org/u/pieper)\
**Post date:** [July 29, 2021, 10:07pm UTC](https://discourse.slicer.org/t/embed-html-file-into-the-scripted-module/18975/2 "2021-07-29T22:07:15Z")

</div>

Hi -

No need for a websocket, you can communicate directly from python to javascript or javascript to python using the `qSlicerWebWidget`. See the test code linked below for examples. It’s all asynchronous and smooth.

Here’s an example of some demo code that mixes a web graph with the segment editor.

[![](https://img.youtube.com/vi/Y4MyThyeIPs/maxresdefault.jpg "MultidimensionalExplorer 2020 01 24 at 2 39 37 PM") ](https://www.youtube.com/watch?v=Y4MyThyeIPs)

> **[GitHub - pieper/SlicerMultiMapper: Tools for creating parametric maps from...](https://github.com/pieper/SlicerMultiMapper)**
>
> Tools for creating parametric maps from multidimensional MRI - GitHub - pieper/SlicerMultiMapper: Tools for creating parametric maps from multidimensional MRI

> <https://github.com/Slicer/Slicer/blob/4483cc0e6f288b0816b6329f1829d9ef8c5aa81a/Applications/SlicerApp/Testing/Python/WebEngine.py#L130-L225>

If you communicate via the web widget data is passed in ascii, which is usually fast enough but if it’s not you can communicate asynchronously by integrating the sockets with the Qt event loop using tools like the QSocketNotifier, which is used in [the SlicerWeb code](https://github.com/pieper/SlicerWeb).

---

<div class="post-metadata">

**Author:** ![Hualin](https://avatars.discourse-cdn.com/v4/letter/h/f6c823/32.png) [@Hualin](https://discourse.slicer.org/u/Hualin)\
**Post date:** [July 30, 2021, 9:44am UTC](https://discourse.slicer.org/t/embed-html-file-into-the-scripted-module/18975/3 "2021-07-30T09:44:27Z")

</div>

Thanks for the reply pieper.

It works for me. I use `qSlicerWebWidget` and set html like this:

> <https://github.com/pieper/SlicerMultiMapper/blob/master/MultiMapper/MultiMapper.py#L383>

and in html, import the [js](https://cdn.jsdelivr.net/npm/parcoord-es@2.2.10/dist/parcoords.standalone.js) to enable window.slicerPython,  
then I can use `window.slicerPython.evalPython` and `self.webWidget.evalJS` to communicate from python to javascript and javascript to python.

Thanks a lot 😀

---

<div class="post-metadata">

**Author:** ![lassoan](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/lassoan/32/13_2.png) [@lassoan](https://discourse.slicer.org/u/lassoan)\
**Post date:** [July 31, 2021, 10:08pm UTC](https://discourse.slicer.org/t/embed-html-file-into-the-scripted-module/18975/4 "2021-07-31T22:08:20Z")

</div>

Note that you can use JavaScript widgets via [Jupyter notebooks](https://github.com/Slicer/SlicerJupyter/). There are tons of reusable widgets for interactive plotting and many other purposes.

---

<div class="post-metadata">

**Author:** ![Hualin](https://avatars.discourse-cdn.com/v4/letter/h/f6c823/32.png) [@Hualin](https://discourse.slicer.org/u/Hualin)\
**Post date:** [August 13, 2021, 2:48am UTC](https://discourse.slicer.org/t/embed-html-file-into-the-scripted-module/18975/5 "2021-08-13T02:48:41Z")

</div>

So sorry, it’s no need to import the js file 😅
