How to create a text box with images in python

Development
1

Hi everyone,

as part of a slicer extension I am working on I was hoping to create a section where I could place demonstration images and text to serve as sort of tutorial to people using the modules, something like the “Acknowledgement” section, but wasn’t sure which QT widget I should be using to achieve that result? Any advice would be appreciated!

The effect that I want is similar to this image:
SlicerAcknowledgement

2

The simplest is to use QTextEdit:

html="""
<p>This is an image:</p>
<p><img src="file:Markups-copy-paste.png" width="100"></p>
<p>Another image:</p>
<p><img src="file:ClippingFanMask.png" width="100"></p>
<p>And some more text.</p>
"""

resourceFolder = "c:/tmp/20211221/"

resourceFiles = [
    "Markups-copy-paste.png",
    "ClippingFanMask.png"
]

textEdit = qt.QTextEdit()
textEdit.readOnly=True
textEdit.setHtml(html)
textDocument = textEdit.document
for resourceFile in resourceFiles:
    resourceFilePath = resourceFolder+resourceFile
    uri = qt.QUrl().fromLocalFile(resourceFile)
    image = qt.QImage()
    image.load(resourceFilePath)
    textDocument.addResource(qt.QTextDocument.ImageResource, uri, image)

textEdit.show()

image
image430×697 30.1 KB

For rendering complex tables, videos, using dynamic content (Javascript), etc. you can use the heavyweight slicer.qSlicerWebWidget(), which is a thin wrapper over QWebEngineView.

1 Like