[PYTHON] [QtDesigner] Implement WebView with PyQt5

Try implementing WebView with PyQt5

I came up with the idea of creating a simple browser using QtDesigner and PyQt5. I couldn't find a Japanese article about how to set up to display WebView, so I'll leave it here as a memorandum.

environment

• OS: MacOS Catalina 10.15.3

• QtDesigner: version 5.9.6

• PyQt5: version 5.15.0

Conclusion

--WebView was removed in ** Qt5.6 **.

--Instead, you need to use ** QwebEngineView **.

-** To use QWebEngineView **, you need to ** extend QWidget and create a QWebEngineView class **.

background

As I wrote briefly at the beginning, I decided to create a simple browser. As a result of various googles, it seems that if you use a library called PyQt5, you can implement a function to display a web page relatively easily even with Python. I decided to try using this library for the time being.

There is no widget called WebView

While researching PyQt5, I found out that there is a convenient layout tool called QtDesigner. I decided to use this tool as well to create a browser.

However, I can't find the WebView Widget needed to display the web page. In various tutorial articles, the web page was displayed with the feeling of "Installing the WebView Widget". But at least I couldn't find the WebView Widget or WebEngineView in the QtDesigner I'm using.

The introduction has become long, but I managed to solve it, so I will write the method below.

Install QWidget

First, create a new project with QtDesigner. This time, MainWindow is selected.

Next, place the widget in the created MainWindow.

Right-click on the installed widget and select "** Promote to **".

A dialog will appear. Enter the following and add.

• Base class name
  • QWidget
• Promoted class name
  • QWebEngineView
• Header file
  • qwebengineview.h
• Global include
• Put a check

That's all for the operation with QtDesigner. Save the UI you created. Next, convert the .ui file to a .py file and modify the code.

Use pyuic5 to convert .ui format files to .py format files.

pyuic5 is a tool that converts a .ui format file created on QtDesigner into a Python format file. It seems that it will be installed when you install PyQt5.

pyuic5 -o WebViewSample.py WebViewSample.ui

Modify the .py format UI file

Converting a .ui format file to a .py format file using pyuic5 will generate code similar to the following:

WebViewSample.py

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'WebViewSample.ui'
#
# Created by: PyQt5 UI code generator 5.15.0
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")

        #The following is the widget created earlier
        self.widget = QtWebEngineWidgets.QWebEngineView(self.centralwidget)
        self.widget.setGeometry(QtCore.QRect(20, 10, 761, 531))
        self.widget.setObjectName("widget")
        #Add up to here

        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 22))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
from PyQt5 import QtWebEngineWidgets

Add the following code inside the setupUi function above. For verification, specify the web page to access at startup.

addScipt.py

url = "https://www.google.co.jp"
self.widget.setUrl(QtCore.QUrl(url))

Create an execution file

BrowserSample.py

import sys
from PyQt5 import QtWidgets
from WebViewSample import Ui_MainWindow

class Browser(QtWidgets.QMainWindow):
  def __init__(self,parent=None):
    super(Browser, self).__init__(parent)
    self.ui = Ui_MainWindow()
    self.ui.setupUi(self)
 
if __name__ == '__main__':
  app = QtWidgets.QApplication(sys.argv)
  window = Browser()
  window.show()
  sys.exit(app.exec_())

Execute the above file.

I was able to display it for the time being. From here, I will customize it in various ways.

reference

QtForum: QWebEngineView in QtDesigner living-sun.com: Qt WebEngineView is not available for creators, but qt, qt-creator, qt-designer, qwebengineview