この記事はTakumi Akashiro ひとり Advent Calendar 2020の2日目の記事になります。Yah!

前置き

どうも！皆さんは最近、PySide2を触ってますか？

あ、この質問、昨日の記事でもしましたね！

茶番はさておき、今日はホストアプリケーション、
すなわちPythonの処理をQtWebEngineのブラウザ側から呼び出す方法について説明いたします。

QWebChannel

本日使うのはこれ、QWebChannel！

QWebChannelはQtWebWidgetsにあるクラスです。

QWebChannelにQObjectに登録し、QWebEngine側に紐づけ、
ブラウザ側でQWebChannel.jsを使うことで
QWebChannelに登録していたQObjectの処理を呼び出すことが出来ます。

……字面だと分かりづらいですね。
シーケンス図で書くとざっくりこんな感じです。

こんな図見るより、コード読めば一発ですよ一発！

試してみた

#!python3
# encoding:utf-8

from PySide2 import QtCore
from PySide2 import QtWidgets
from PySide2 import QtWebEngineWidgets
from PySide2 import QtWebChannel

html_text = """
<!DOCTYPE html>
<html>
    <head>
        <!--Bootstrap (Option)-->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
        <!--QWebChannel-->
        <script src="qrc:///qtwebchannel/qwebchannel.js"></script>

        <script>
            window.onload = function() {
                new QWebChannel(qt.webChannelTransport, function(channel) {
                    window.manager = channel.objects.web_manager;

                    var $element = document.getElementById("HelloWorld_btn");
                    $element.onclick = function(e) {
                        manager.print_f(e.target.innerText);
                    };

                    var $element = document.getElementById("Number_input");
                    $element.onchange = function(e) {
                        manager.set_number(e.target.value);
                    };
                });
            }
        </script>
    </head>
    <body>
        <button class="btn w-100 btn-primary" id="HelloWorld_btn">Hello World!</button>
        <input class="form-control w-25" type="number" value="0" id="Number_input">
    </body>
</html>
"""


class WebDemo(QtWidgets.QWidget):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        self.setWindowTitle('Web Demo')

        hbox = QtWidgets.QHBoxLayout()

        self.webview = QtWebEngineWidgets.QWebEngineView()

        page = self.webview.page()

        self.channel = QtWebChannel.QWebChannel()
        web_manager = WebManager(self)
        self.channel.registerObject("web_manager", web_manager)
        page.setWebChannel(self.channel)

        page.setHtml(html_text)

        hbox.addWidget(self.webview)
        self.setLayout(hbox)


class WebManager(QtCore.QObject):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        self.number_ = 0

    @QtCore.Slot(str)
    def print_f(self, text):
        print(f"called: print_f() / text: {text} / number_: {self.number_}")

    @QtCore.Slot(int)
    def set_number(self, num):
        print(f"called: set_number() / number_: {self.number_}")
        self.number_ = num


if __name__ == "__main__":
    app = QtWidgets.QApplication()
    webdemo = WebDemo()
    webdemo.show()

    exit(app.exec_())

Mayaでも試してみた


#!python2
# encoding:utf-8

from PySide2 import QtCore
from PySide2 import QtWidgets
from PySide2 import QtWebEngineWidgets
from PySide2 import QtWebChannel

from maya import cmds
from maya import OpenMayaUI

from shiboken2 import wrapInstance

mayaMainWindowPtr = OpenMayaUI.MQtUtil.mainWindow()
mayaMainWindow = wrapInstance(long(mayaMainWindowPtr), QtWidgets.QWidget)

html_text = """
<!DOCTYPE html>
<html>
    <head>
        <!--Bootstrap (Option)-->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
        <!--QWebChannel-->
        <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
        <script>
            window.onload = function() {
                new QWebChannel(qt.webChannelTransport, function(channel) {
                    window.manager = channel.objects.web_manager;
                    var $element = document.getElementById("polycube_btn");
                    $element.onclick = function(e) {
                        var callback_print = function(nodename) {
                            var select_btn = document.getElementById("select_btn");
                            select_btn.removeAttribute("disabled");
                            select_btn.value = nodename;
                            select_btn.innerText = "Select: " + nodename
                        };
                        manager.gen_polycube(callback_print);
                    };
                    var $element = document.getElementById("select_btn");
                    $element.onclick = function(e) {
                        var node = e.target.value;
                        manager.select_node(node);
                    };
                    var $element = document.getElementById("select_clear_btn");
                    $element.onclick = function() {
                        manager.select_node("");
                    };
                });
            }
        </script>
    </head>
    <body class="m-3">
        <div class="container">
            <div class="row">
                <button class="col btn w-25 btn-primary m-1" id="polycube_btn">polycube!</button>
                <button class="col btn w-25 btn-secondary m-1" id="select_clear_btn">Select Clear</button>
                <button class="col btn w-25 btn-primary m-1" disabled id="select_btn">Select</button>
            </div>
        </div>
    </body>
</html>
"""


class MayaWebDemo(QtWidgets.QWidget):
    def __init__(self, *args, **kwargs):
        super(MayaWebDemo, self).__init__(*args, **kwargs)

        self.setWindowFlags(QtCore.Qt.Window)
        self.setWindowTitle('Maya Web Demo')

        hbox = QtWidgets.QHBoxLayout()

        self.webview = QtWebEngineWidgets.QWebEngineView()

        page = self.webview.page()
        self.channel = QtWebChannel.QWebChannel()
        web_manager = MayaWebManager(self)
        self.channel.registerObject("web_manager", web_manager)
        page.setWebChannel(self.channel)

        page.setHtml(html_text)

        hbox.addWidget(self.webview)
        self.setLayout(hbox)


class MayaWebManager(QtCore.QObject):
    def __init__(self, *args, **kwargs):
        super(MayaWebManager, self).__init__(*args, **kwargs)
        self.text_ = ""

    @QtCore.Slot(result=str)
    def gen_polycube(self):
        result = cmds.polyCube()[0]
        return result

    @QtCore.Slot(str)
    def select_node(self, name):
        if name:
            cmds.select(name)
        else:
            cmds.select(cl=True)


if __name__ == "__main__":
    demo = MayaWebDemo(mayaMainWindow)
    demo.show()

Houdiniでも試してみた

#!python2
# encoding:utf-8

from PySide2 import QtCore
from PySide2 import QtWidgets
from PySide2 import QtWebEngineWidgets
from PySide2 import QtWebChannel

html_text = """
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
        <script src=" qrc:///qtwebchannel/qwebchannel.js"></script>

        <script>
            window.onload = function() {
                new QWebChannel(qt.webChannelTransport, function(channel) {
                    window.manager = channel.objects.manager;

                    var $element = document.getElementById("create_box");
                    $element.onclick = function() {
                        manager.create_box();
                    };
                });
            }
        </script>

    </head>
    <body>
        <button class="btn w-100 btn-primary" id="create_box">create_box</button>
    </body>
</html>
"""

class HoudiniWebDemo(QtWidgets.QWidget):
    def __init__(self, *args, **kwargs):
        super(HoudiniWebDemo, self).__init__(*args, **kwargs)

        self.setGeometry(500, 300, 250, 110)
        self.setWindowTitle('Houdini Web Demo')

        hbox = QtWidgets.QHBoxLayout()

        self.webview = QtWebEngineWidgets.QWebEngineView()

        page = self.webview.page()
        manager = HoudiniWebManager(self)
        self.channel = QtWebChannel.QWebChannel()

        self.channel.registerObject("manager", manager)

        page.setWebChannel(self.channel)
        page.setHtml(html_text)


        hbox.addWidget(self.webview)

        self.setLayout(hbox)

class HoudiniWebManager(QtCore.QObject):
    def __init__(self, *args, **kwargs):
        super(HoudiniWebManager, self).__init__(*args, **kwargs)

    @QtCore.Slot()
    def create_box(self):
        geo = hou.node('/obj/').createNode('geo', 'geo1')
        geo.createNode('box', 'box1')
        geo.moveToGoodPosition()


demo = HoudiniWebDemo()
demo.show()

締め

というわけで、今回紹介した技術の評価としては以下の通りですね。

評価ラベル	ランク(5段階)
おすすめ度	★★★★
難易度	★★★
ニッチ	★★★★
汎用性	★★★
キュート度	★★★★★

Maya, Houdini共に割と簡単に使えたので、個人的にはおすすめ度が高いですね。
おそらく今回のAdventCalenderの中の記事の中で一番実用的かもしれません。

記事自体はスクリプトと画像でお茶を濁した感じですが、
使った感じ将来性がありそうな気がしたので、皆様もぜひ活用してみてください！

ではでは～