Qt5-Webview-on-a-Raspberry-Pi

Tutorial code about the usage and instalation of QtWebKit in a PyQt5 app running on a Raspberry Pi (probably working in any armhf device) (Tested on Raspberry Pi 3B+, Raspbian Stretch (directly in the Stretch and in a Docker container))

Definition

PyQt5 is a GUI Python framework that works fine in almost every situation and device. Almost. Showing a web viewer inside your code can be a necessity sometimes, and with the "brand new" QWebEngine we have a powerfull and easy way to insert a webviewer in our applications.

The problem is: armhf devices do not support QWebEngine yet, so is it impossible to run a webviewer in a Raspberry Pi based app?

The short answer: No, It's possible!

The long answer: Oh god why no one makes a good tutorial teaching how to make it easily?

Solutions

Counterpointing QWebEngine, we have the deprecated and misterious QtWebKit, the QWebKit turned deprecated at Qt 5.5, but it still possible to use it if you download the packages... And the best part: It works in armhf based devices.

Setup

Well, first, you need a Raspberry Pi. I used a model 3B+. Follow this tutorial to setup a ready-to-work Raspbian Raspberry Pi.

Then to run our code, you need to download PyQt5 and all the packages that you'll need using the following commands:

sudo apt-get install python3-pyqt5
sudo apt-get install python3-pyqt5.webkit
sudo apt-get install python3-pyqt5.svg

Explaining the code

Well, in this example, I used QtDesigner (that you can download for Windows here) You can watch some tutorials here and you'll build your GUI (I recommend you to use my UI file inside the /uis folder). You probbably will notice that is impossible to add a QWebView widget in the QtDesigner. But to overcome this problem, I use a hint.

Build your Main Window
Setup inside your Window a QGraphicsView widget in the place that you want your webviewer.
Save your UI file
Compile it in a .py file (my compiled .py file is available on /script folder)

After that, we will edit the compiled-to-python UI file (I know that this is not practical, but It works). Please open yout compiled UI file in your favorite text editor and follow this steps:

Add these imports to the file: (pay attention, do not delete any original import)

from PyQt5.QtWebKitWidgets import *
import sip
from PyQt5.QtCore import QUrl
from PyQt5.QtWebKit import *
from PyQt5.QtNetwork import *

Search your QwebGraphics object declaration and switch it to a QWebView object declaration:

before:

        self.web = QGraphicsView(self.centralwidget)
        self.web.setGeometry(QtCore.QRect(361, 51, 1011, 721))
        self.web.setObjectName("web")

after:

        self.web = QWebView(self.centralwidget)
        self.web.setGeometry(QtCore.QRect(361, 51, 1011, 721))
        self.web.setObjectName("web")

Now you can focuses on your main code ;)

Additional information

The main code (available on /script folder) working with the compiled UI file is a full working example of how to run a window built with the designer, how to use a Qthread, how to setup signals and slots, how to change the UI view from inside the Qthread, and the most hard thing with almost 0 documentation on internet: how to use all this things together to change the URL of your webviewer while your program runs.

Please pay attention to the main code example, and try to learn the things that I've said before (if you're in the right way, you'll need this information soon)

Important: just the UI.py file can't be executed. The main.py file should be runned to execute this program.