[SOLVED] QWebEngineView doesn't load HTML page

Discussion in 'Yocto' started by cyrilf, Nov 28, 2016.

  1. cyrilf

    cyrilf Active Member

    Joined:
    Feb 19, 2015
    Messages:
    167
    Likes Received:
    47
    Hi,

    I need to display an HTML UI using either QWebKit or QWebEngine. QWebKit is obsolete now (click here to see why) and even if it's still supported by the krogoth branch of meta-qt5, I have a lot of troubles to run my code on it.

    So to be up to date and to try to make my code work again (it used to work with Qt 4.8 on an other build), I decided to move forward to QWebEngine.

    Unfortunatelly, QWebEnginView doesn't load HTML at all. I tried with local HTML files and remote URL but all I get is a white screen.

    I added
    Code:
    QT += webenginewidgets
    to my project.

    The code to load a page in a QMainWindow is very simple:
    Code:
    #include <QtWebEngineWidgets>
    
    class MainWindow : public QMainWindow
    {
         MainWindow()
         {
             QWebEngineView *view  = new QWebEngineView(this);
             view->load("qrc:///view/index.html");
             setCentralWidget(view);
         }
    };
     
  2. graugans

    graugans Administrator Staff Member

    Joined:
    Sep 17, 2015
    Messages:
    328
    Likes Received:
    141
    I am definitely a QT5 GUI pro maybe @modjo have some advice
     
  3. modjo

    modjo Active Member

    Joined:
    Sep 29, 2014
    Messages:
    417
    Likes Received:
    127
    @cyrilf i'm looking about your problem but i think is not a problem wit Qt. Webengine and webkit work fine with Qt5.7 on my udoo quad but the page is not loaded (a problem with DNS i think) ...Try to launch the qt examples find in /usr/share/qt5/examples/webkitwidgets/browser/browser to test the connection (webkit here)
     
    cyrilf likes this.
  4. modjo

    modjo Active Member

    Joined:
    Sep 29, 2014
    Messages:
    417
    Likes Received:
    127
    @cyrilf ,@graugans after a test to ping google i saw that i have a problem with DNS resolve name --> If i try ping 8.8.8.8 it works ! after that i edit (on quad) the file /etc/resolv.conf and add :
    nameserver 8.8.8.8
    nameserver 8.8.4.4

    after that I lauch the example WebEngine Quick Nano Browser in qt creator, and now it works (i have just some warning with ssl certificate
    webengine.jpg
     
  5. cyrilf

    cyrilf Active Member

    Joined:
    Feb 19, 2015
    Messages:
    167
    Likes Received:
    47
    I don't have issue with QWebKit to load my page (a local HTML page). But QWebEngine (QWebEngine != QWebKit) doesn't load any kind of HTML locally (with load("qrc:/index.html") or setHtml("<html>...</html>")).

    Now I'm working with QWebKit but I still have trouble with SVG text that takes a VERY long time to refresh (as it repaints all the SVG) with JavaScript/jQuery. That's why I try to figure out how to move forward to QWebEngine because it uses a way faster web engine (Chromium) that, I hope, should better handle SVG and JavaScript.

    I had no issue repainting SVG previously with QWebKit 4.8 on a Buildroot based distribution.
     
    Last edited: Nov 30, 2016
  6. modjo

    modjo Active Member

    Joined:
    Sep 29, 2014
    Messages:
    417
    Likes Received:
    127
    Yes i know that QWebkit != QWebengine. The example that i compile is based on webengine and work fine on my card. Did you try to build the example that i pointed to my precedent post ?
     
  7. cyrilf

    cyrilf Active Member

    Joined:
    Feb 19, 2015
    Messages:
    167
    Likes Received:
    47
    I found the WebEngine Quick Nano Browser example here. But it doesn't compile.
    Code:
    quicknanobrowser/BrowserWindow.qml:53: error: QML module not found
    
    Import paths:
    /opt/poky/2.1.2/sysroots/cortexa9hf-neon-poky-linux-gnueabi/usr/lib/qt5/qml
    /opt/poky/2.1.2/sysroots/cortexa9hf-neon-poky-linux-gnueabi/usr/lib/qt5/imports
    
    For qmake projects, use the QML_IMPORT_PATH variable to add import paths.
    For qbs projects, declare and set a qmlImportPaths property in your product to add import paths.
    For qmlproject projects, use the importPaths property to add import paths.
    
    Edit:
    Well I downloaded the almost same example here and now it compiles. It still get QML error at run time.
    Code:
    root@udooneo:~# ./quicknanobrowser
    QML debugging is enabled. Only use this in a safe environment.
    QEglFSVivIntegration will set environment variable FB_MULTI_BUFFER=2 to enable double buffering and vsync.
     If this is not desired, you can override this via: export QT_EGLFS_IMX6_NO_FB_MULTI_BUFFER=1
    QQmlApplicationEngine failed to load component
    qrc:/quickwindow.qml:47 module "QtQuick.Controls.Private" is not installed
    qrc:/quickwindow.qml:44 module "QtQuick.Controls.Styles" is not installed
    qrc:/quickwindow.qml:43 module "QtQuick.Controls" is not installed
    qrc:/quickwindow.qml:47 module "QtQuick.Controls.Private" is not installed
    qrc:/quickwindow.qml:44 module "QtQuick.Controls.Styles" is not installed
    qrc:/quickwindow.qml:43 module "QtQuick.Controls" is not installed
    qrc:/quickwindow.qml:47 module "QtQuick.Controls.Private" is not installed
    qrc:/quickwindow.qml:44 module "QtQuick.Controls.Styles" is not installed
    qrc:/quickwindow.qml:43 module "QtQuick.Controls" is not installed
    Howerver I added those lines to my udoo-image-qt5.bb file:
    Code:
    QT_TOOLS = " \
        qtbase-fonts \
        qtbase-plugins \
        qtbase-tools \
        qtdeclarative \
        qtdeclarative-plugins \
        qtdeclarative-tools \
        qtdeclarative-qmlplugins \
        qtquick1 \
        qtquickcontrols \
        qtquickcontrols2 \
        qtmultimedia \
        qtmultimedia-plugins \
        qtmultimedia-qmlplugins \
        qtsvg \
        qtsvg-plugins \
        qtsensors \
        qtimageformats-plugins \
        qtsystems \
        qtsystems-tools \
        qtsystems-qmlplugins \
        qtscript \
        qtwebkit \
        qtwebkit-qmlplugins \
        qtwebkit-examples-examples \
        qtwebengine \
        qtwebengine-qmlplugins \
        qtwebchannel \
        qtwebsockets \
        qtgraphicaleffects-qmlplugins \
        qtconnectivity-qmlplugins \
        qt5-env \
    "
    Edit2:
    I tried the other project like this one but I still cannot load any page.
    [​IMG]
    Sorry for the bad quality :/
     
    Last edited: Dec 1, 2016
  8. modjo

    modjo Active Member

    Joined:
    Sep 29, 2014
    Messages:
    417
    Likes Received:
    127
    @cyrilf , yes the first error in your precedent post is because you don't build all the module (plugin) needed by webengine ... For information, WebEngine Quick Nano Browser is available in your qtcreator. See welcome/samples
    qtcreator.png
    See here the module i added to my install.
    Otherwise, it seems in your last example that qtwebengine is build. Do you check the file /etc/resolve.conf or ping google web site to check your DNS resolving ?
     
    cyrilf likes this.
  9. cyrilf

    cyrilf Active Member

    Joined:
    Feb 19, 2015
    Messages:
    167
    Likes Received:
    47
    OK, I'll build with qtquick-plugins to see what happens. But I compiled other examples that aren't Qt Quick projects and nothing appears either so this isn't related to this I guess.

    Your install probably doesn't compile as you don't provide qtserialbus and qtvirtualkeyboard recipes on your repository.

    I don't have examples in Qt Creator.
    [​IMG]

    I don't have Qt 5.7 installed, the Qt version compiled with Yocto is the 5.6.2.

    I checked my /etc/resolve.conf file and pinged google successully. I'm connected by ethernet to a good network. The resolve.conf is automatically set with the network DNS.

    Maybe it's related to the FSL GPU drivers.

    Edit:
    I added all the related Qt Quick modules but I still have the same error for the first example.

    Edit2:
    It seems that the FSL BSP Community has moved a lot. I found meta-freescale and meta-freescale-distro repositories and added them to my Poky. Those layers probably have replaced the meta-fsl-demos one.

    I also added those lines to my install:
    Code:
    FSL_TOOLS = " \
        packagegroup-fsl-tools-testapps \
        packagegroup-fsl-tools-benchmark \
        packagegroup-fsl-tools-gpu \
    "
    Unfortunately, I have very curious issues with licenses when compiling:
    Code:
    ERROR: poky/meta-freescale-distro/recipes-fsl/packagegroups/packagegroup-fsl-tools-testapps.bb: This recipe does not have the LICENSE field set (packagegroup-fsl-tools-testapps)
    ERROR: poky/meta-freescale-distro/recipes-fsl/packagegroups/packagegroup-fsl-tools-gpu.bb: This recipe does not have the LICENSE field set (packagegroup-fsl-tools-gpu)
    ERROR: poky/meta-freescale-distro/recipes-fsl/packagegroups/packagegroup-fsl-gstreamer1.0-full.bb: This recipe does not have the LICENSE field set (packagegroup-fsl-gstreamer1.0-full)
    ERROR: poky/meta-freescale-distro/recipes-fsl/packagegroups/packagegroup-fsl-tools-gpu-external.bb: This recipe does not have the LICENSE field set (packagegroup-fsl-tools-gpu-external)
    ERROR: poky/meta-freescale-distro/recipes-fsl/packagegroups/packagegroup-fsl-tools-benchmark.bb: This recipe does not have the LICENSE field set (packagegroup-fsl-tools-benchmark)
    ERROR: poky/meta-freescale-distro/recipes-fsl/packagegroups/packagegroup-fsl-gstreamer1.0-commercial.bb: This recipe does not have the LICENSE field set (packagegroup-fsl-gstreamer1.0-commercial)
    ERROR: poky/meta-freescale-distro/recipes-fsl/packagegroups/packagegroup-fsl-gstreamer1.0.bb: This recipe does not have the LICENSE field set (packagegroup-fsl-gstreamer1.0)
    ERROR: Failed to parse recipe: poky/meta-freescale-distro/recipes-fsl/packagegroups/packagegroup-fsl-tools-gpu.bb
     
    Last edited: Dec 5, 2016
  10. modjo

    modjo Active Member

    Joined:
    Sep 29, 2014
    Messages:
    417
    Likes Received:
    127
    About your installation of Qt, did you install a complete version of Qt (5.6/5.7 ...) or just Qtcreator (if you have just qtcreator it's normal that you don't have any examples) ? For qtserialbus and virtualkeyboard i use the master version of meta-qt5 (not krogoth) --> in 5.7 i have the recipe ...
    Perhaps for your problems with qtwebengine you can put a message on qt.io or irc channel !
    Otherwise for the changes on meta-freescale perhaps @graugans can help more ...
     
  11. cyrilf

    cyrilf Active Member

    Joined:
    Feb 19, 2015
    Messages:
    167
    Likes Received:
    47
    I installed the last version of QtCreator with Qt5.7 desktop. I can now see the examples.

    Could you compile an example from the meta-q5 layer and let me know if you can run it on your UDOO? If it runs, I don't have to care about QML or Qt Quick issues which are not related to QWebEngine.
     
  12. modjo

    modjo Active Member

    Joined:
    Sep 29, 2014
    Messages:
    417
    Likes Received:
    127
    tested and worked on neo , just an issue sith openssl :
    [1206/114254:ERROR:cert_verify_proc_openssl.cc(238)] X509 Verification error unable to get local issuer certificate : 20 : 2 : 4
    tomorrow i will post my image with qt5.7 if you want to test.
     
  13. cyrilf

    cyrilf Active Member

    Joined:
    Feb 19, 2015
    Messages:
    167
    Likes Received:
    47
    I moved forward to master branch of meta-qt5.

    Now I get a warning when running my app:
    Code:
    QFontDatabase: Cannot find font directory /usr/lib/fonts.
    Note that Qt no longer ships fonts. Deploy some (from http://dejavu-fonts.org for example) or switch to fontconfig.
    I tried to run fancybrowser without success
    Code:
    root@udooneo:~# ./fancybrowser
    QEglFSVivIntegration will set environment variable FB_MULTI_BUFFER=2 to enable double buffering and vsync.
     If this is not desired, you can override this via: export QT_EGLFS_IMX6_NO_FB_MULTI_BUFFER=1
    QFontDatabase: Cannot find font directory /usr/lib/fonts.
    Note that Qt no longer ships fonts. Deploy some (from http://dejavu-fonts.org for example) or switch to fontconfig.
    QFontDatabase: Cannot find font directory /usr/lib/fonts.
    Note that Qt no longer ships fonts. Deploy some (from http://dejavu-fonts.org for example) or switch to fontconfig.
    QFontDatabase: Cannot find font directory /usr/lib/fonts.
    Note that Qt no longer ships fonts. Deploy some (from http://dejavu-fonts.org for example) or switch to fontconfig.
    QFontDatabase: Cannot find font directory /usr/lib/fonts.
    Note that Qt no longer ships fonts. Deploy some (from http://dejavu-fonts.org for example) or switch to fontconfig.
    Received signal 4 <unknown> 000075fa7150
    [end of stack trace]
    But it's still motivating to know that you can run QWebEngineView based app. Let me know how you do that :)

    Is your repository up to date? If you want to continue in french, let me know in private.
     
    Last edited: Dec 8, 2016
  14. graugans

    graugans Administrator Staff Member

    Joined:
    Sep 17, 2015
    Messages:
    328
    Likes Received:
    141
    There is a issue on github related to this with some ideas

    Gesendet von meinem FP2 mit Tapatalk
     
    cyrilf likes this.
  15. modjo

    modjo Active Member

    Joined:
    Sep 29, 2014
    Messages:
    417
    Likes Received:
    127
    Nice to see a French on this forum ;)
    Otherwise the error on QFontDatabase is normal because 5.7 do not provide more the font. To resolve this you need to add fonts to the image and change the path where qt look for it !

    In your local.conf add :
    Code:
    IMAGE_INSTALL_append = "\
        ttf-dejavu-sans \
        ttf-dejavu-sans-mono \
        ttf-dejavu-sans-condensed \
        ttf-dejavu-serif \
        ttf-dejavu-serif-condensed \
        ttf-dejavu-common \
    and in qt5-env.sh :
    Code:
    export QT_QPA_FONTDIR=/usr/share/fonts/truetype
    Rebuild your image ...
    Otherwise, i have just update my repository for qt5.7 and neo udoo-tools ...
     
    cyrilf likes this.
  16. cyrilf

    cyrilf Active Member

    Joined:
    Feb 19, 2015
    Messages:
    167
    Likes Received:
    47
    Don't be so enthusiast, I'm not French ;)

    Well, I added the ttf-dejavu packages to my image.bb file and it seems to work pretty well! I also have the SSL certificate error I don't care about.

    It seems that updating from Qt 5.6 to Qt 5.7 solved the problem.

    Now I'm gonna test the SVG refresh issue I got with QWebKit using QWebEngine and see what's going on :)
     
    Last edited: Dec 9, 2016
    modjo and graugans like this.

Share This Page