Skip to content

Instantly share code, notes, and snippets.

@keithel
Created December 4, 2022 18:10
Show Gist options
  • Select an option

  • Save keithel/cccd4729331cd9db10484c975a15f511 to your computer and use it in GitHub Desktop.

Select an option

Save keithel/cccd4729331cd9db10484c975a15f511 to your computer and use it in GitHub Desktop.
Qt webui example in Python (ported by me)
<!DOCTYPE html>
<html>
<head>
<title>Qt WebEngine WebUI Example</title>
<style>
html {
background: #f0f0f0;
color: #303030;
font: 16px system-ui;
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
}
body > * {
padding-left: 20px;
padding-right: 20px;
}
header {
flex: none;
display: flex;
align-items: center;
background: #f0fff0;
border-bottom: 1px solid #e0e0e0;
padding-top: 20px;
padding-bottom: 20px;
}
header > h1 {
font: bold 20px system-ui;
margin-left: 18px;
}
main {
flex: auto;
}
footer {
flex: none;
display: flex;
justify-content: center;
padding-bottom: 20px;
}
button {
background: #41cd52;
color: #f0f0f0;
font: 16px system-ui;
border: 0;
box-shadow: 0px 1px 3px rgb(0,0,0,0.5);
cursor: pointer;
margin: 0 0 1px;
padding: 10px 24px;
}
button:hover {
background: #50dc61;
}
button:active {
background: #50dc61;
box-shadow: 0px 1px 2px rgb(0,0,0,0.5);
margin: 1px 0 0;
}
button:focus {
outline: 0;
}
</style>
</head>
<body>
<header>
<img width="48px" height="48px"
src="qrc:/qt-project.org/qmessagebox/images/qtlogo-64.png">
<h1>WebEngine Widgets<br>WebUI Example</h1>
</header>
<main>
<p>
Aside from the built-in schemes, such as <code>http</code> and
<code>qrc</code>, Qt WebEngine may be extended with <em>custom
schemes</em> by creating <em>custom scheme handlers</em>.
</p>
<p>
This is a simple HTML page loaded from a custom scheme and
displayed by a <code>QWebEngineView</code>. Even the Quit button
below is a standard HTML <code>&lt;button&gt;</code> element.
</p>
<p>
Read the documentation to find out
</p>
<ul>
<li>
<p>
How to create a custom scheme handler which serves HTML
and handles HTML form submissions.
</p>
</li>
<li>
<p>
How to prevent ordinary web content from accessing the
custom scheme.
</p>
</li>
<li>
<p>
How to prevent any other scheme from submitting HTML
form data.
</p>
</li>
</ul>
</main>
<footer>
<form action="" method="post">
<button name="quit">Quit</button>
</form>
</footer>
</body>
</html>
# Copyright (C) 2022 The Qt Company Ltd.
# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
"""PySide6 Markdown Editor Example"""
import sys
print(sys.version)
from PySide2.QtWebEngineCore import QWebEngineUrlSchemeHandler, QWebEngineUrlRequestJob
from PySide2.QtWebEngineCore import QWebEngineUrlScheme
from PySide2.QtWebEngineWidgets import QWebEngineView, QWebEngineProfile, QWebEnginePage
from PySide2.QtCore import QByteArray, QUrl, QFile, QIODevice, QCoreApplication, Qt, QObject
from PySide2.QtWidgets import QApplication, QWidget
import rc_webui
class WebUiHandler(QWebEngineUrlSchemeHandler):
SCHEMENAME : QByteArray = QByteArray(b'webui')
schemeName : str = bytearray(SCHEMENAME).decode()
aboutUrl : QUrl = QUrl(f"{schemeName}:about")
webUiOrigin : QUrl = QUrl(f"{schemeName}:")
GET : str = 'GET'
POST : str = 'POST'
def __init__(self, parent=None):
super().__init__(parent)
def requestStarted(self, job):
method : QByteArray = job.requestMethod()
url : QUrl = job.requestUrl()
initiator : QUrl = job.initiator()
if method == WebUiHandler.GET and url == WebUiHandler.aboutUrl:
file : QFile = QFile(":/about.html", job)
file.open(QIODevice.ReadOnly)
job.reply(b'text/html', file)
elif method == WebUiHandler.POST and url == WebUiHandler.aboutUrl and initiator == WebUiHandler.webUiOrigin:
job.fail(QWebEngineUrlRequestJob.RequestAborted)
QApplication.exit()
else:
job.fail(QWebEngineUrlRequestJob.UrlNotFound)
@classmethod
def registerUrlScheme(cls):
webUiScheme = QWebEngineUrlScheme(QByteArray(cls.SCHEMENAME))
webUiScheme.setFlags(QWebEngineUrlScheme.SecureScheme |
QWebEngineUrlScheme.LocalScheme |
QWebEngineUrlScheme.LocalAccessAllowed)
QWebEngineUrlScheme.registerScheme(webUiScheme)
if __name__ == '__main__':
QCoreApplication.setOrganizationName("QtExamples")
WebUiHandler.registerUrlScheme()
app : QApplication = QApplication(sys.argv)
profile : QWebEngineProfile = QWebEngineProfile(app)
handler : WebUiHandler = WebUiHandler(app)
profile.installUrlSchemeHandler(WebUiHandler.SCHEMENAME, handler)
page : QWebEnginePage = QWebEnginePage(profile)
view : QWebEngineView = QWebEngineView()
super(QObject, view).depth()#setParent(app)
view.setPage(page)
page.load(WebUiHandler.aboutUrl)
#view.setUrl(QUrl("file:///home/t_kyzik/Build/Autodesk/maya/builds/main/maya/build/RelWithDebInfo/runTime/resources/AppHome/index.html"))
view.setContextMenuPolicy(Qt.NoContextMenu)
view.resize(500, 600)
view.show()
sys.exit(app.exec_())
<RCC>
<qresource prefix="/">
<file>about.html</file>
</qresource>
</RCC>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment