# How to display web page in a dialog using Python?

**URL:** <https://discourse.slicer.org/t/how-to-display-web-page-in-a-dialog-using-python/17112>\
**Category:** Development\
**Created:** [April 12, 2021, 5:34pm UTC](https://discourse.slicer.org/t/how-to-display-web-page-in-a-dialog-using-python/17112 "2021-04-12T17:34:34Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![spycolyf](https://avatars.discourse-cdn.com/v4/letter/s/f17d59/32.png) [@spycolyf](https://discourse.slicer.org/u/spycolyf)\
**Post date:** [April 12, 2021, 5:34pm UTC](https://discourse.slicer.org/t/how-to-display-web-page-in-a-dialog-using-python/17112/1 "2021-04-12T17:34:34Z")

</div>

Good afternoon @pieper@jcfr @lassoan,

I am working on issue, Help Link Button [#65](https://github.com/KitwareMedical/SlicerQReads/issues/65). I would like to launch a help webpage when the user pushes the “Help” button. This seems fairly simple I know, but I finally have a little time to start learning. Is this something I can do in qreads.py? How do I associate launching my URL with the button?

Thanks!

---

<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:** [April 12, 2021, 5:50pm UTC](https://discourse.slicer.org/t/how-to-display-web-page-in-a-dialog-using-python/17112/2 "2021-04-12T17:50:12Z")

</div>

You can open a link in the default web browser like this:

```
qt.QDesktopServices.openUrl(qt.QUrl('http://www.slicer.org'))

```

You can show a webpage embedded in the module GUI (or in a popup window within Slicer) like this:

```python
webWidget = slicer.qSlicerWebWidget()
webWidget.url = qt.QUrl('http://www.slicer.org')
webWidget.show()

# Manually reposition the widget
slicerGeometry = slicer.util.mainWindow().geometry
webWidget.size = qt.QSize(300, 300)
webWidget.pos = qt.QPoint(slicerGeometry.x() + 20, slicerGeometry.y() + 50)

```

---

<div class="post-metadata">

**Author:** ![spycolyf](https://avatars.discourse-cdn.com/v4/letter/s/f17d59/32.png) [@spycolyf](https://discourse.slicer.org/u/spycolyf)\
**Post date:** [April 15, 2021, 9:11pm UTC](https://discourse.slicer.org/t/how-to-display-web-page-in-a-dialog-using-python/17112/3 "2021-04-15T21:11:16Z")

</div>

Hello @lassoan

I’m trying to use my HelpButton to launch a web page. HelpButton is defined in my qreads.ui file.

I’m getting this error after pushing the help button.  
“TypeError: showSlicerQREADSHelp() takes 0 positional arguments but 1 was given”

Here is my code…

```python
  self.ui.HelpButton.connect("clicked()", self.logic.showSlicerQREADSHelp)
  .
  .
  .

def showSlicerQREADSHelp():
    webWidget = slicer.qSlicerWebWidget()
    webWidget.url = qt.QUrl('http://www.google.com')
    webWidget.show()

    # Manually reposition the widget
    slicerGeometry = slicer.util.mainWindow().geometry
    webWidget.size = qt.QSize(300, 300)
    webWidget.pos = qt.QPoint(slicerGeometry.x() + 20, slicerGeometry.y() + 50)

```

---

<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:** [April 15, 2021, 9:15pm UTC](https://discourse.slicer.org/t/how-to-display-web-page-in-a-dialog-using-python/17112/4 "2021-04-15T21:15:06Z")

</div>

You need to add `self` as the first argument to all non-static methods in a class.

---

<div class="post-metadata">

**Author:** ![spycolyf](https://avatars.discourse-cdn.com/v4/letter/s/f17d59/32.png) [@spycolyf](https://discourse.slicer.org/u/spycolyf)\
**Post date:** [April 15, 2021, 9:43pm UTC](https://discourse.slicer.org/t/how-to-display-web-page-in-a-dialog-using-python/17112/5 "2021-04-15T21:43:38Z")

</div>

I did that and after pushed the Help button, Slicer flashed up something, paused and then aborted.

---

<div class="post-metadata">

**Author:** ![jamesobutler](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/jamesobutler/32/7511_2.png) [@jamesobutler](https://discourse.slicer.org/u/jamesobutler)\
**Post date:** [April 15, 2021, 9:56pm UTC](https://discourse.slicer.org/t/how-to-display-web-page-in-a-dialog-using-python/17112/6 "2021-04-15T21:56:30Z")

</div>

Your local variable `webWidget` is getting destroyed at the end of the method. You can instead define a `self.web_widget = None` in the ` __init__ ` method of your class and then use it in your `showSlicerQREADSHelp` and then your window should be persistent.

---

<div class="post-metadata">

**Author:** ![spycolyf](https://avatars.discourse-cdn.com/v4/letter/s/f17d59/32.png) [@spycolyf](https://discourse.slicer.org/u/spycolyf)\
**Post date:** [April 16, 2021, 12:17am UTC](https://discourse.slicer.org/t/how-to-display-web-page-in-a-dialog-using-python/17112/7 "2021-04-16T00:17:09Z")

</div>

@jamesobutler  
,  
Thank you so much. Took me a while to experiment until I understood scope, but I finally got it.

I’m getting there thanks to all of the help…

```python
def setup(self):

  # Create Web Widget for HelpButton press event
  self.helpButtonWebWidget = None
  .
  .
  .
  self.ui.HelpButton.connect("clicked()", self.showSlicerQREADSHelp)
  .
  . 
  .
  def showSlicerQREADSHelp(self):
    # Create the SlicerQREADS Help webpage object
    self.helpButtonWebWidget = slicer.qSlicerWebWidget()
    self.helpButtonWebWidget.url = qt.QUrl('http://www.google.com')
    self.helpButtonWebWidget.show()

```

---

<div class="post-metadata">

**Author:** ![jcfr](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.slicer.org/jcfr/32/17825_2.png) [@jcfr](https://discourse.slicer.org/u/jcfr)\
**Post date:** [April 16, 2021, 12:54am UTC](https://discourse.slicer.org/t/how-to-display-web-page-in-a-dialog-using-python/17112/8 "2021-04-16T00:54:01Z")

</div>

Few comments:

- Instead of using the name `helpButtonWebWidget`, consider using `helpWebWidget`, the fact a button is used to display it is not relevant.

- consider using properly formatted docstring for the function:

- to ensure the existing widget is updated if the user click multiple time on the button, consider doing something like this:

- To reference code block in discourse, consider using the backtick. For example, here is a screenshot of how I edited your last comment:

---

<div class="post-metadata">

**Author:** ![spycolyf](https://avatars.discourse-cdn.com/v4/letter/s/f17d59/32.png) [@spycolyf](https://discourse.slicer.org/u/spycolyf)\
**Post date:** [April 16, 2021, 2:06am UTC](https://discourse.slicer.org/t/how-to-display-web-page-in-a-dialog-using-python/17112/9 "2021-04-16T02:06:15Z")

</div>

OK. Thanks JC. I want to follow the Slicer coding standards. Thanks for sharing.

---

<div class="post-metadata">

**Author:** ![spycolyf](https://avatars.discourse-cdn.com/v4/letter/s/f17d59/32.png) [@spycolyf](https://discourse.slicer.org/u/spycolyf)\
**Post date:** [April 16, 2021, 2:09am UTC](https://discourse.slicer.org/t/how-to-display-web-page-in-a-dialog-using-python/17112/10 "2021-04-16T02:09:57Z")

</div>

1. How do I show that ruler ![Ruler](https://us1.discourse-cdn.com/flex002/uploads/slicer/original/3X/8/7/87501d3841b9d13f6cf2306572b0951b236cf8e6.png) which is displayed at the bottom of the images? And then how do I set the sizes and colors?

2. How you set the button icons? Are you placing them  
in resources somehow outside of QT?

Thanks.