有关Qt的WebEngine模块与JS交互的研究(二)



  • 0_1524459226096_131313.gif
    大家上午好哦,上一篇文章简单介绍了我对WebEngine和JS交互相关的理解,这篇文章则是介绍了如何实验如何制作一个小例子,实现WebEngine和JS的交互。

    这个例子的截图是这样的:
    0_1524455742527_eb728e46-d777-4d39-b620-52a5d7e6c991-image.png

    我们看一下文件的结构:

    webengine_2.pro
    main.cpp
    html/libs/bootstrap.min.css
    html/index.html
    qml/main.qml
    html.qrc
    qml.qrc

    文件的结构还是非常简单的。由于我们对按钮实行了美化,因此需要依赖bootstrap.min.css文件,除此之外,就是普通的html文件了。这里需要关注的核心就是index.html文件和main.qml文件了。因为我们的通信主要是借助Chromium和Qt的C++代码,在QML环境和html环境中做通信。

    首先是index.html文件:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>bootsrap按钮</title>
        <link rel="stylesheet" href="libs/bootstrap.min.css">
        <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
    </head>
    <body class="vert-center-parent">
        <div class="container text-center vert-center">
            <button id="deleteButton" class="btn btn-danger">删除所有文件</button>
        </div>
    </body>
    <style>
    .vert-center
    {
        line-height: 600px;
    }
    .vert-center-parent
    {
        height: 600px;
    }
    </style>
    <script type="text/javascript">
    window.onload = function ( )
    {
        new QWebChannel( qt.webChannelTransport, function( channel ) {
            //makedialogobjectaccessibleglobally
            var fileField = channel.objects.fileField;
            var deleteButton = document.getElementById( "deleteButton" );
            deleteButton.onclick = function( ) {
                alert( "删除了" + fileField.text + "文件。" );
            }
        } );
    }
    </script>
    </html>
    

    因为我们需要使用WebChannel来找到QML环境中的变量,因此需要通过

    <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
    

    的方式引入Qt自己搭建的JS方法。如果想在纯Chrome或者是其它浏览器上运行这个网页,那么src属性不能是以qrc为前缀了,需要将Qt这个文件复制到合适的位置才行。



  • 在页面加载的过程中,通过设置window.onload回调函数来执行我们自己的逻辑。其内容主要是创建QWebChannel对象,并且在回调函数中拿到QML对象的Id,这样就像QML环境中使用该对象了。我为了演示的便利,使用alert方法删除一个文件。文件的内容包含的是fileField的属性text,这和QML环境中访问同名属性一致。
    还有一点值得注意的是,因为我们确信网页是执行在WebEngineView中的,因此我们在建立QWebChannel的时候使用Qt在WebEngine中默认的传输管道qt.webChannelTransport就行了,内部看文档介绍是使用进程间通信(IPC)的方法。如果是在纯浏览器中建立QWebChannel,那么就需要使用WebSocket来达到目的了,查一查目标浏览器是否支持WebSocket

    接下来介绍的就是main.qml文件。

    import QtQuick 2.10
    import QtQuick.Window 2.10
    import QtQuick.Controls 2.3
    import QtQuick.Layouts 1.3
    import QtWebEngine 1.5
    import QtWebChannel 1.0
    
    Window
    {
        id: window
        width: 640
        height: 480
        visible: true
        title: "WebEngine的例子 2"
    
        RowLayout
        {
            anchors.fill: parent
            ColumnLayout
            {
                Layout.fillHeight: true
                Button
                {
                    text: "进入一个地址"
                    onClicked:
                    {
                        webEngineView.url = urlField.text;
                    }
                }
                TextField
                {
                    id: urlField
                    selectByMouse: true
                    text: "qrc:///html/index.html"
                }
                Label
                {
                    text: "服务器中的文件"
                }
                TextField
                {
                    id: fileField
                    WebChannel.id: "fileField"
                    text: "HelloWorld.txt"
                    selectByMouse: true
                }
            }
            WebEngineView
            {
                id: webEngineView
                Layout.fillWidth: true
                Layout.fillHeight: true
                url: "qrc:///html/index.html"
                webChannel: WebChannel
                {
                    registeredObjects: [ fileField ]
                }
            }
        }
    }
    

    Window代码块前面是一些控件,不必多言。注意的是id名为fileField的控件。这个控件有一个附加属性:WebChannel.id。这个id就是我们需要从html中拿到的id或者说属性,不这么设定的话,我们是无法在html中找到这个对象的。
    最后则是WebEngineView,它的后端使用的是WebEngine,并且指定了webChannel,它有一个属性registeredObjects,指向的是已经注册过的对象。这里的对象就包含了fileField,也只有注册过的对象才能暴露在html环境中。



  • 其余的文件则是初始化必要的文件。也不必多言,除了main.cpp,它里面要使用QtWebEngine::initialize( )初始化一下。main.cpp的内容是:

    #include <QGuiApplication>
    #include <QQmlApplicationEngine>
    #include <QQuickWindow>
    #include <QtWebEngine>
    
    int main( int argc, char *argv[] )
    {
        QGuiApplication a( argc, argv );
    
        QtWebEngine::initialize( );
    
        // 设置字体渲染方式
        QQuickWindow::setTextRenderType( QQuickWindow::NativeTextRendering );
    
        QQmlApplicationEngine engine;
        engine.load( QUrl( "qrc:///qml/main.qml" ) );
    
        return a.exec();
    }
    

    很简单吧。程序运行的时候,我们点击“删除所有文件”按钮,就会弹出一个对话框,里面显示的是我们在TextField中设定的文字。运行符合预期,说明我们的尝试成功了。
    0_1524459184313_a783721a-2141-4627-b374-b969da346699-image.png



  • 今天没有时间弄了,明天试试



  • @大黄老鼠 嗯,也是非常简单的一个例子啦。



  • @jiangcaiyang 博主您好 谢谢您的贡献,按照您的代码可以运行,但是如果 我想调用qml 页面中的一个函数 function 该怎么办呢,谢谢博主



  • @倦鸟归巢 WebChannel可以让双端解耦。这样的话,通过QML调用Html的JS函数以及JS函数调用QML的函数都是可行的。


Log in to reply
 

最近的回复

  • 由于我们在二次开发的过程中,需要采用调试来测试开发的效果,而使用cmake生成的Visual Studio项目,代码都是O2优化的,不太符合我们的需求,而我们必须每次都要载入Visual Studio 2017手动修改代码优化到禁用,这的确有一些麻烦,于是我们需要找一个更加便利的方法达到效果。我在稍微研究了一下之后得到结论:其实很好解决。

    准备环境

    Windows 10
    Visual Studio 2017
    Notepad++

    随便打开一个vcxproj文件,然后按下快捷键:Ctrl + F,转到文件查找一栏。按照下面的要求填写:

    文件类型 *.vcxproj 查找目标 <Optimization>MaxSpeed</Optimization> 替换为 <Optimization>Disabled</Optimization>

    然后点击“在文件中替换”,等待一会儿,就可以看到优化全部去掉了。这样就可以顺利地单步调试而不会出现断点下不了或者是其它问题了。
    替换代码优化

    read more
  • 惊讶图.jpg
    USD是一个正在发展过程中的文件格式,最基础的,能够支持网格、简单的材质、简单的光照。稍微复杂一点,就可能要借助后续的插件支持了。比如说骨骼动画,这个在USD之前的版本都是没有的,后面慢慢地得到了支持。它是通过UsdSkel这个模块支持的。这个算是和USD核心代码平级的,所以算是USD的外围插件。其实看USDSkel的发展,USDSkel其实是打算做一个动画的最小集,即仅仅支持骨骼和约束的功能,后面更加复杂的功能,通过修改UsdSkel的特性来实现。

    USD已经有一套完善的机制可以很方便地添加自定义的类型。这主要通过USD内置的usdGenSchema.py脚本来达到效果。usdGenSchema.py脚本所在的位置是:

    D:\Develop\USD\pxr\usd\lib\usd

    所以要让USD支持约束,可以选择自己通过Schema来规划一下约束这个类型,包括哪些属性。USD的说明符(specifier)包括class、def和over。其中class和C++的类很相似。我们要自己写一个Schema,大致的内容是这样:

    #usda 1.0 ( """ This file constains schema for supporting skeletal animations in USD. """ subLayers = [ @usdGeom/schema.usda@ ] ) over "GLOBAL" ( customData = { string libraryName = "usdRig" string libraryPath = "qtdream/usd/usdRig" } ) { } class Constraint "Constraint" ( inherits = </Imageable> ) { uniform asset target ( doc = """Target represent affectors whom the constraint will affect to.""" ) uniform asset[] targets ( doc = """The parent targets representing this constraint tied to.""" ) uniform float[] weights ( doc = """Optionally, weights can control the percentage the constraint is affected.""" ) uniform vector3f[] targetOffsetTranslates ( doc = """Optionally, we can specify translate offset to precisely adjust.""" ) uniform vector3f[] targetOffsetRotates ( doc = """Optionally, we can specify rotate offset to precisely adjust.""" ) uniform vector3f rotationDecompositionTarget ( doc = """Used in parentConsstraint.""" ) uniform bool useDecompositionTarget ( doc = """Used in parentConstraint.""" ) }

    接着要根据这个schema产生一大堆的代码,于是,编写以下的脚本:

    :: 运行UsdView插件.bat set Path=^ D:\Develop\Python27;^ D:\Develop\Python27\Scripts;^ D:\Develop\USD_Build\lib;^ D:\Develop\USD_Build\bin;^ D:\Develop\USD_Build\third_party\maya\lib;^ D:\Develop\Autodesk\Maya2018\bin;^ %Path% set MAYA_PLUG_IN_PATH=%MAYA_PLUG_IN_PATH%;^ D:\Develop\USD_Build\third_party\maya\plugin set PYTHONPATH=%PYTHONPATH%;^ D:\Develop\USD_Build\lib\python;^ D:\Develop\Autodesk\Maya2018\Python\Lib\site-packages set MAYA_SCRIPT_PATH=%MAYA_SCRIPT_PATH%;^ D:\Develop\USD_Build\third_party\maya\lib\usd\usdMaya\resources;^ D:\Develop\USD_Build\third_party\maya\plugin\pxrUsdPreviewSurface\resources set XBMLANGPATH=%XBMLANGPATH%;^ D:\Develop\USD_Build\third_party\maya\lib\usd\usdMaya\resources :: 需要安装Jinja2,否则会报错 pip install Jinja2 :: 开始定位到D盘目标位置上,然后执行脚本。 pushd D:\Develop\USD\qtdream\usd\lib\usdRig python D:\Develop\USD\pxr\usd\lib\usd\usdGenSchema.py schema.usda . popd

    如果出现了

    Traceback (most recent call last):
    File "D:\Develop\USD\pxr\usd\lib\usd\usdGenSchema.py", line 43, in <module>
    from jinja2 import Environment, FileSystemLoader
    ImportError: No module named jinja2
    错误,那么可能要想办法让python寻找到Jinja2。于是脚本中添加了:

    pip install Jinja2

    最后很高兴,顺利地生成了想要的C++文件,和产生的Schema文件。

    read more
  • USDView推出了插件的框架,可以顺利地编写Python脚本,作为插件让USDView载入。网上有一个高手,他在他的github上发布了自己的USDView插件。这个插件可不简单,他将USDView推出的插件架构活灵活用,并且添加了一些值得赞赏的效果:支持了USDView不曾支持的节点编辑功能。这个插件的名称叫usdNodeGraph。

    他的github地址在这里:

    https://github.com/1xinghuan/usdNodeGraph.git

    下面介绍一下如何使用吧。

    首先当然是把他的库拿下来了。推荐安装git,并且执行git clone放在本地。

    git clone git@github.com:1xinghuan/usdNodeGraph.git

    获取Qt.py库
    Qt.py库是统一Qt的版本用的。大家知道Qt4的时候有PySide,而Qt5有PySide2。我们在使用Python的时候,通常要执行 from PySide2.QtWidgets import QWidget

    等等脚本,而Qt.py将其统一起来了。不用你写PySide还是PySide2了。所以要执行下面的脚本:

    sudo pip install qt.py

    编写脚本支持其载入
    这个脚本和普通载入USDView插件差不多,唯一的不同是需要设置PYTHONPATH。因为它还要引入其它的库。脚本的内容是: #!/bin/sh export LD_LIBRARY_PATH=/usr/local/USD/lib64:$LD_LIBRARY_PATH export PYTHONPATH=$PYTHONPATH:/usr/local/USD/lib/python # 让usdView能够顺利地载入usdNodeGraph的地址 currentDir=$(cd `dirname $0`; pwd) export PXR_PLUGINPATH_NAME=$currentDir/usdNodeGraph/plugin export PYTHONPATH=$PYTHONPATH:/$currentDir/usdNodeGraph/lib/python:$currentDir/usdNodeGraph/plugin /usr/local/USD/bin/usdview $currentDir/model/7_29_1.usda

    保存文件,就可以顺利地执行了。其实还是挺简单的。执行后的效果如下:
    USDView结合usdNodeGraph.gif

    read more
  • 首先这是一个未知的旅程,有安装Maya软件有风险,一是因为它是商业软件,可能会有版权纠纷,二是Maya软件非常大,安装不慎,可能会出现各种奇怪的问题。我也是参考国外一篇文章才敢开始自己的Maya之路。至于遇到的问题,的确非常多,Maya依赖的版本太多,一些版本不一致的问题可能会导致很多诡异的问题,这时找Maya,找Autodesk是无济于事的。

    安装Maya的运行必备项

    tbb:Intel库,支持并行计算用,典型的是paralell_for用法。
    tiff:图像格式支持
    ssl:加密用
    png:图像格式支持
    gcc:编译器套件

    sudo apt-get install -y libtbb-dev libtiff5-dev libssl-dev libpng12-dev libssl1.0.0 gcc libjpeg62

    安装Alien

    因为Maya是rpm包,要转为deb包,就要借助alien了。alien的安装如下:

    sudo apt-get install -y alien elfutils

    安装多媒体库

    Maya的多媒体编辑功能依赖多媒体库,Linux最常见的就是gstreamer了。

    sudo apt-get install -y libaudiofile-dev libgstreamer-plugins-base0.10-0

    安装图形库

    Maya在Linux中,只有OpenGL是支持的(Maya这么古老的软件是不会这么快支持Vulkan的啦),所以也要安装。目前OpenGL的Linux实现是mesa。命令是:

    sudo apt-get install -y libglw1-mesa libglw1-mesa-dev mesa-utils

    这和安装Qt支持的图形库差不多,事实上Maya的GUI也是大部分依赖Qt。

    安装字体库

    Maya是极度依赖字体的,试想一下,在Linux字体那么丑,能看吗?当然不能。所以还是要安装合适的字体才行。命令是:

    sudo apt-get install -y xfonts-100dpi xfonts-75dpi ttf-mscorefonts-installer fonts-liberation

    在配置ttf-mscorefonts的时候,点击Ok和Yes就可以了。

    同时安装其它依赖Maya的包

    其余依赖Maya的包可以通过下面的命令安装。
    csh:c外壳命令行程序
    fam:Linux中计算机文件或者目录改变的观察者。一旦改变了执行通知操作。

    sudo apt-get install -y csh tcsh libfam0 libfam-dev xfstt

    安装xp6包

    cd /tmp
    wget http://launchpadlibrarian.net/183708483/libxp6_1.0.2-2_amd64.deb
    sudo dpkg -i libxp6_1.0.2-2_amd64.deb

    下载Maya2018

    你可以去Maya官网下载Maya2018,它有给出链接,下载应该不会遇到太多问题。
    然后解压Maya2018到合适的位置。
    我这里是:/media/jiangcaiyang/Data/软件安装包/Linux安装包/Maya2018

    安装Maya2018

    现在需要利用alien将所有rpm包转为deb包。

    sudo alien -cv *.rpm

    接着安装deb包

    udo dpkg -i *.deb

    掉包rpm,欺骗Maya并且让安装通过

    因为Maya的Linux安装包是给Redhat或者是CentOS开发的,所以默认rpm作为安装包的程序。对于debian系,它一直不认的,所以在运行带界面的程序的时候,总是出错。于是我们要执行一下欺骗,让rpm一直返回正确,这样才能欺骗Maya的安装包,让其安装通过。

    编写一个简单的C程序:

    echo "int main (void) {return 0;}" > mayainstall.c

    编译C程序

    gcc mayainstall.c

    备份rpm

    sudo mv /usr/bin/rpm /usr/bin/rpm_backup

    替换掉rpm

    sudo cp -v a.out /usr/bin/rpm

    对一些库位置建立软连接,让Maya识别到

    因为Maya的安装程序在Redhat或者是CentOS测试成功,而在Debian系不成功,对于处于Debian系的Deepin来说,还是挺麻烦的呢。因此还是要重新建立链接才行。

    sudo ln -s /usr/lib/x86_64-linux-gnu/libtbb.so /usr/lib/x86_64-linux-gnu/libtbb_preview.so.2
    sudo ln -s /usr/lib/x86_64-linux-gnu/libtiff.so /usr/lib/libtiff.so.3
    sudo ln -s /usr/lib/x86_64-linux-gnu/libssl.so /usr/autodesk/maya2018/lib/libssl.so.10
    sudo ln -s /usr/lib/x86_64-linux-gnu/libcrypto.so /usr/autodesk/maya2018/lib/libcrypto.so.10

    启动Maya 2018的安装包并且进行安装

    Maya 2018的安装包名称是setup,需要为此添加可执行的权限,因此要执行以下的命令:

    chmod +x setup
    然后执行之
    sudo ./setup
    之后就出现了Maya安装的界面了。久违了哈。
    Maya安装界面

    选择单机版,并且全部输入1。
    Maya安装全部输入1

    下个界面选择【继续】,然后就顺利地完成啦。点击【完成】
    Maya安装完成
    还没有完呢,还需要继续进行下一步的操作才行。

    对已经安装的Maya执行额外的操作

    首先是创建目录。

    sudo mkdir -p /usr/tmp
    给新建立的目录满权限
    sudo chmod 777 /usr/tmp

    为Maya创建一些配置目录。

    mkdir -p ~/maya/2018 ~/maya/2018/syncColor/Shared

    添加一句配置,解决Maya段错误

    echo "MAYA_DISABLE_CIP=1" >> ~/maya/2018/Maya.en

    运行命令解决颜色管理错误

    echo "LC_ALL=C" >> ~/maya/2018/Maya.env

    执行命令,递归地强制让~/maya给满权限。

    chmod -Rfv 777 ~/maya

    恢复扫尾工作

    还记得我们将rpm掉包了吗?现在恢复回来。

    sudo rm -v /usr/bin/rpm
    sudo mv -v /usr/bin/rpm_backup /usr/bin/rpm

    替换正版的Maya2018(选用)

    因为我们安装Maya2018的时候,序列号和产品密钥都是随便填写的1,但是如果是换用正版的Maya2018,我们需要将序列号填写为666-69696969,密钥填写为657J1,并且我们需要用正版的库替换掉我们自己安装的库。因此要执行下面的操作:

    sudo mv /usr/autodesk/maya2018/lib/libadlmint.so.14.0.23 /usr/autodesk/maya2018/lib/libadlmint.so.14.0.23_old
    sudo cp libadlmint.so.14.0.23 /usr/autodesk/maya2018/lib

    最后出现我们喜闻乐见的结果~
    Maya 2018的运行效果

    read more

关注我们

微博
QQ群