How to set QWebEngineView on QQuickView

[ejoshva]

When I have the webengineview in QML, is it possible for SetHtml(). This is because the the html pages are in local storage and in encrypted format.
In the code, I will decrypt and set the page using SetHtml().

Otherwise, is it possible possible to superimpose the ReaderToolBar.qml over WebEngineView.cpp which will make the setHtml() easier.

[wysota]

When I have the webengineview in QML, is it possible for SetHtml(). This is because the the html pages are in local storage and in encrypted format.
In the code, I will decrypt and set the page using SetHtml().

Otherwise, is it possible possible to superimpose the ReaderToolBar.qml over WebEngineView.cpp which will make the setHtml() easier.

WebEngineView has a url method that takes the url of a resource to be loaded. The resource is loaded via QNetworkAccessManager bound to the QML engine. You can control that engine and there you can decrypt the data.

Remember that QWebEngineView is a widget, not a Qt Quick element, you cannot simply put it on a Qt Quick scene.

[ejoshva]

@wysota , I will try to implement just as u suggested

Meanwhile, I tried something like the below, here only the 2nd widget added (weview) alone is displayed. When I comment out, lay->addWidget(weView); ReaderToolBar is displayed.

WebEngineView *weView = new WebEngineView();
    weView->setGeometry(55,0,1000,750);
    weView->show();
    QQuickView view;
    view.setSource(QUrl("qrc:/ReaderToolBar.qml"));
     view.setGeometry(0,0,1200,50);
    view.show();
    QVBoxLayout *lay = new QVBoxLayout();
    lay->addWidget(QWidget::createWindowContainer(&view));
    lay->addWidget(weView);
    QWidget *wid = new QWidget();
    wid->setLayout(lay);
    wid->resize(1200,800);
    wid->show();

WebEngineView *weView = new WebEngineView();
    weView->setGeometry(55,0,1000,750);
    weView->show();
    QQuickView view;
    view.setSource(QUrl("qrc:/ReaderToolBar.qml"));
     view.setGeometry(0,0,1200,50);
    view.show();
    QVBoxLayout *lay = new QVBoxLayout();
    lay->addWidget(QWidget::createWindowContainer(&view));
    lay->addWidget(weView);
    QWidget *wid = new QWidget();
    wid->setLayout(lay);
    wid->resize(1200,800);
    wid->show();

To copy to clipboard, switch view to plain text mode 

What I am doing wrong here.

[ejoshva]

How about you start with the basic setup and then extend it once it works.

So on C++ side just

int main(int argc, char **argv)
{
    QApplication app(argc, argv);
 
    QQuickView view;
    view.setSource(QUrl("qrc:/main.qml");
    view.show();
 
    return app.exec();
}

int main(int argc, char **argv)
{
    QApplication app(argc, argv);

    QQuickView view;
    view.setSource(QUrl("qrc:/main.qml");
    view.show();

    return app.exec();
}

To copy to clipboard, switch view to plain text mode 

And you can set your toolbar directly as the ApplicationWindow's toolBar property

ApplicationWindow {
    toolBar: ReaderToolBar { ... }
}

ApplicationWindow {
    toolBar: ReaderToolBar { ... }
}

To copy to clipboard, switch view to plain text mode 

Cheers,
_

I am trying to implement this but I am getting error as
component errors : (qrc:/Main.qml:18:13: Invalid attached object assignment)

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtWebEngine 1.0
 
 
ApplicationWindow {
    title: qsTr("diacritech")
    width: 1200
    height: 800
    visible: true
 
    WebEngineView {
           id: currentwebview
           objectName: "webView"
           url: "http://www.google.co.in"
           anchors.fill: parent
 
            ToolBar :readTool
       }
    function showPage(content,baseUrl)
    {
        //console.log(content);
        //console.log(baseUrl)
        currentwebview.loadHtml(content,baseUrl)
    }
   ReaderToolBar {
        width: parent.width
        height: 50
        id : readTool
       // anchors: { left: parent.left; right: parent.right; top: parent.top }
 
     }
}

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtWebEngine 1.0


ApplicationWindow {
    title: qsTr("diacritech")
    width: 1200
    height: 800
    visible: true

    WebEngineView {
           id: currentwebview
           objectName: "webView"
           url: "http://www.google.co.in"
           anchors.fill: parent

            ToolBar :readTool
       }
    function showPage(content,baseUrl)
    {
        //console.log(content);
        //console.log(baseUrl)
        currentwebview.loadHtml(content,baseUrl)
    }
   ReaderToolBar {
        width: parent.width
        height: 50
        id : readTool
       // anchors: { left: parent.left; right: parent.right; top: parent.top }

     }
}

To copy to clipboard, switch view to plain text mode 

[wysota]

Line 18 doesn't make sense. Compare anda_skoa's code and yours. And look up functionality that you use in API docs instead of blindly trying things hoping it would work.

[anda_skoa]

This is because the the html pages are in local storage and in encrypted format.
In the code, I will decrypt and set the page using SetHtml().

Wouldn't it be a lot easier to just write the content to a temporary file and pass the URL to that to the view?

Cheers,
_

[ejoshva]

Wouldn't it be a lot easier to just write the content to a temporary file and pass the URL to that to the view?

Cheers,
_

if it's one or two pages, then its fine I guess. But I will have whole book say 500 pages to show. If I am showing only one page at a time then not a problem. I have reflow layout means , I will just keep scrolling and pages will be shown.

currently I have written the qml like below, it's displaying the tool bar over the webengineview and next /previous buttons are also displayed.
The issue now is that the click events are not detected for the next/previous or elements on tool bar. Is there something, I should include to capture the click events.

ApplicationWindow {
    title: qsTr("diacritech")
    width: 1200
    height: 800
    visible: true
 
    WebEngineView {
        id: currentwebview
        objectName: "webView"
        url: "http://www.google.co.in"
        anchors.fill: parent
 
    }
 
   toolBar: ReaderToolBar {
        id: tb
        width: 1400
        height: 50
        //anchors.top: parent
        // color: "transparent"
        MouseArea {
            anchors.fill: parent
            onClicked: console.log("clicked tool bar")
        }
    }
    function showPage(content,baseUrl)
    {
        currentwebview.loadHtml(content,baseUrl)
    }
 
    Image {
        id: prevPage
        width: 50
        height: 50
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.leftMargin: 20
        anchors.topMargin: (parent.height / 2 )  - 40
        source: "images/prev_button.png"
        visible: true
        MouseArea {
            anchors.fill: parent
            onClicked:{ console.log("Clicked previous page")}
        }
    }
 
    Image {
        id: nextPage
        width: 50
        height: 50
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.rightMargin: 1
        anchors.topMargin: (parent.height / 2 )  - 40
        source: "images/next_button.png"
        visible: true
        MouseArea {
            anchors.fill: parent
            onClicked: console.log("clicked nextpage")
        }
    }
}

ApplicationWindow {
    title: qsTr("diacritech")
    width: 1200
    height: 800
    visible: true

    WebEngineView {
        id: currentwebview
        objectName: "webView"
        url: "http://www.google.co.in"
        anchors.fill: parent

    }

   toolBar: ReaderToolBar {
        id: tb
        width: 1400
        height: 50
        //anchors.top: parent
        // color: "transparent"
        MouseArea {
            anchors.fill: parent
            onClicked: console.log("clicked tool bar")
        }
    }
    function showPage(content,baseUrl)
    {
        currentwebview.loadHtml(content,baseUrl)
    }
  
    Image {
        id: prevPage
        width: 50
        height: 50
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.leftMargin: 20
        anchors.topMargin: (parent.height / 2 )  - 40
        source: "images/prev_button.png"
        visible: true
        MouseArea {
            anchors.fill: parent
            onClicked:{ console.log("Clicked previous page")}
        }
    }

    Image {
        id: nextPage
        width: 50
        height: 50
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.rightMargin: 1
        anchors.topMargin: (parent.height / 2 )  - 40
        source: "images/next_button.png"
        visible: true
        MouseArea {
            anchors.fill: parent
            onClicked: console.log("clicked nextpage")
        }
    }
}

To copy to clipboard, switch view to plain text mode 

[wysota]

How is ReaderToolBar defined?

[anda_skoa]

if it's one or two pages, then its fine I guess. But I will have whole book say 500 pages to show. If I am showing only one page at a time then not a problem. I have reflow layout means , I will just keep scrolling and pages will be shown.

One other option might be to just load a basic HTML document with an embedded display section (frame, whatever) and get the content through a web sockets connection with the host application (or using QtWebChannel).

Cheers,
_

[ejoshva]

How is ReaderToolBar defined?

import QtQuick 2.0
 
Rectangle{
    id: tbrect
    width: 1200
    height: 50
//    color: "transparent"
    visible: true
 
    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
    }
function showicons()
    {       
        libicon.visible = true
    }
 Image {
        id: libicon
        x: 30
        smooth: true
        height: 36
        width: 36
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 8
        source: "qrc:/images/library.png"
        visible: true
 
        MouseArea {
            id: libiconma
            anchors.fill: parent
            onClicked: {
 
                //rw.showlibrary()
                console.log("library")
            }
        }
    }
Component.onCompleted: showicons()
}

import QtQuick 2.0

Rectangle{
    id: tbrect
    width: 1200
    height: 50
//    color: "transparent"
    visible: true

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
    }
function showicons()
    {       
        libicon.visible = true
    }
 Image {
        id: libicon
        x: 30
        smooth: true
        height: 36
        width: 36
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 8
        source: "qrc:/images/library.png"
        visible: true

        MouseArea {
            id: libiconma
            anchors.fill: parent
            onClicked: {

                //rw.showlibrary()
                console.log("library")
            }
        }
    }
Component.onCompleted: showicons()
}

To copy to clipboard, switch view to plain text mode 

[wysota]

You have covered your toolbar with another mouse area so events are not reaching the ones inside the tool bar.

[ejoshva]

click event in the prevpage/nextpage is also not caught

Actually the ones inside the tool bar is not detected so I wrote a mousearea in the main.qml, where it's used.

---

Added after 52 minutes:

When I have the QML as Application window, I am able to set the page to display for webengineview using setHtml().
But when it's Rectangle, I am not able to set the page using SetHtml().

I have used QQuickWidget and using setSource()

ReaderView.cpp ( inherits QQuickWidget)
ReaderView::ReaderView()
{
    setSource(QUrl("qrc:/Main.qml"));
    QQmlEngine engine;
    QQmlComponent component(&engine);
    component.loadUrl(QUrl("qrc:/Main.qml"));
    QObject *object = component.create();
   Decrypt *decrypt = new Decrypt();
    QString content = decrypt->decryptFile("/Users/user/learnOnContent/LifeSciences_Grade1020151518_1963/Pages/pag001.html", 'A');
    QUrl baseUrl = QUrl("file:///Users/user/ssparklBookStore/LifeSciences_Grade1020151518_1963/Pages/pag001.html");
    QMetaObject::invokeMethod(object, "showPage", Q_ARG(QVariant, content),Q_ARG(QVariant, baseUrl));
}
 
Main.qml
Rectangle {
    id : readview
    width: 1200
    height: 800
    visible: true
        WebEngineView {
            id: currentWebView
            url: "http://www.google.co.in"
            anchors.fill: parent
        }
        function showPage(content,baseUrl)
        {
            currentWebView.loadHtml(content,baseUrl)
        }
 
    ReaderToolBar {
        id: tb
        width: 1400
        height: 50
        //anchors.top: parent
        color: "transparent"
    }
}

ReaderView.cpp ( inherits QQuickWidget)
ReaderView::ReaderView()
{
    setSource(QUrl("qrc:/Main.qml"));
    QQmlEngine engine;
    QQmlComponent component(&engine);
    component.loadUrl(QUrl("qrc:/Main.qml"));
    QObject *object = component.create();
   Decrypt *decrypt = new Decrypt();
    QString content = decrypt->decryptFile("/Users/user/learnOnContent/LifeSciences_Grade1020151518_1963/Pages/pag001.html", 'A');
    QUrl baseUrl = QUrl("file:///Users/user/ssparklBookStore/LifeSciences_Grade1020151518_1963/Pages/pag001.html");
    QMetaObject::invokeMethod(object, "showPage", Q_ARG(QVariant, content),Q_ARG(QVariant, baseUrl));
}

Main.qml
Rectangle {
    id : readview
    width: 1200
    height: 800
    visible: true
        WebEngineView {
            id: currentWebView
            url: "http://www.google.co.in"
            anchors.fill: parent
        }
        function showPage(content,baseUrl)
        {
            currentWebView.loadHtml(content,baseUrl)
        }

    ReaderToolBar {
        id: tb
        width: 1400
        height: 50
        //anchors.top: parent
        color: "transparent"
    }
}

To copy to clipboard, switch view to plain text mode 

showPage(content,baseUrl) is getting called but webEngineView is displaying only google.com and not the page set by setHtml()

[anda_skoa]

I would recommend to expose the HTML as a property on a context object instead.

Then you can do something like

WebEngineView {
    readonly property string htmlContent: contextObject.htmlProperty
    onHtmlContentChanged: loadHtml(htmlContent, contextObject.baseUrl);
}

WebEngineView {
    readonly property string htmlContent: contextObject.htmlProperty
    onHtmlContentChanged: loadHtml(htmlContent, contextObject.baseUrl);
}

To copy to clipboard, switch view to plain text mode 

Cheers,
_

[ejoshva]

WebEngineView {
            id: currentWebView
            url: "http://www.google.co.in"
            anchors.fill: parent
            readonly property string htmlContent: readView.getHtmlContent()
            onHtmlContentChanged: loadHtml(htmlContent, readView.getBaseUrl());
        }
 
 
 
ReaderView::ReaderView()
{
    setSource(QUrl("qrc:/Main.qml"));
    QQmlEngine engine;
    QQmlContext *context = new QQmlContext(engine.rootContext());
    context->setContextProperty("readView",this);
    QQmlComponent component(&engine);
    component.loadUrl(QUrl("qrc:/Main.qml"));
    QObject *object = component.create(context);
}

WebEngineView {
            id: currentWebView
            url: "http://www.google.co.in"
            anchors.fill: parent
            readonly property string htmlContent: readView.getHtmlContent()
            onHtmlContentChanged: loadHtml(htmlContent, readView.getBaseUrl());
        }



ReaderView::ReaderView()
{
    setSource(QUrl("qrc:/Main.qml"));
    QQmlEngine engine;
    QQmlContext *context = new QQmlContext(engine.rootContext());
    context->setContextProperty("readView",this);
    QQmlComponent component(&engine);
    component.loadUrl(QUrl("qrc:/Main.qml"));
    QObject *object = component.create(context);
}

To copy to clipboard, switch view to plain text mode 

Getting error as
qrc:/Main.qml:18: ReferenceError: readView is not defined
qrc:/Main.qml:18: TypeError: Property 'getHtmlContent' of object QQuickWidget(0x7f9d5a49f7b0) is not a function

[wysota]

What is the base class of ReaderView?

[anda_skoa]

WebEngineView {
            id: currentWebView
            url: "http://www.google.co.in"
            anchors.fill: parent
            readonly property string htmlContent: readView.getHtmlContent()
            onHtmlContentChanged: loadHtml(htmlContent, readView.getBaseUrl());
        }

WebEngineView {
            id: currentWebView
            url: "http://www.google.co.in"
            anchors.fill: parent
            readonly property string htmlContent: readView.getHtmlContent()
            onHtmlContentChanged: loadHtml(htmlContent, readView.getBaseUrl());
        }

To copy to clipboard, switch view to plain text mode 

My recommendation is to use a property, not a function.
Otherwise this is a one time thing, the onHtmlContentChanged will only be invoked on the very first assignment.
You want to be able to push new HTML, which would be automatic with properties.

QML automatically reevaluates expressions that contain properties when any of these properties change, so called property bindings.

It also seems strange that you would want to destroy the QQmlEngine right after creating and using it. Don't you want to keep your QML parts running during the applicatino life time?

Cheers,
_

[ejoshva]

What is the base class of ReaderView?

QQuickWidgets

---

Added after 15 minutes:

@anda_skoa
you mean to set a property in qml like

property string htmldata : rdView.getHtmlContent()
WebEngineView {
            id: currentWebView
            url: "http://www.google.co.in"
            anchors.fill: parent
            readonly property string htmlContent: htmldata
            onHtmlContentChanged: loadHtml(htmlContent, readView.getBaseUrl());
        }

property string htmldata : rdView.getHtmlContent()
WebEngineView {
            id: currentWebView
            url: "http://www.google.co.in"
            anchors.fill: parent
            readonly property string htmlContent: htmldata
            onHtmlContentChanged: loadHtml(htmlContent, readView.getBaseUrl());
        }

To copy to clipboard, switch view to plain text mode 

or I will have to set the property in cpp and then use it over hear. In that case, how to set the property ?

Kindly pardon for my ignorance

[wysota]

QQuickWidgets

So why are you instantiating a new QML engine and loading the same QML document twice?

[ejoshva]

I didn't realize that. Thanks for pointing out that.
Now have modified it.

ReaderView::ReaderView()
{
 
QQmlContext *context = new QQmlContext(this->rootContext());
context->setContextProperty("rdView",this);
context->setContextProperty("content",content);
 setSource(QUrl("qrc:/Main.qml"));
}
 
 WebEngineView {
            id: currentWebView
            url: "http://www.google.co.in"
            anchors.fill: parent
            readonly property string htmlContent: content
            onHtmlContentChanged: loadHtml(htmlContent, rdView.getBaseUrl());
        }

ReaderView::ReaderView()
{

QQmlContext *context = new QQmlContext(this->rootContext());
context->setContextProperty("rdView",this);
context->setContextProperty("content",content);
 setSource(QUrl("qrc:/Main.qml"));
}

 WebEngineView {
            id: currentWebView
            url: "http://www.google.co.in"
            anchors.fill: parent
            readonly property string htmlContent: content
            onHtmlContentChanged: loadHtml(htmlContent, rdView.getBaseUrl());
        }

To copy to clipboard, switch view to plain text mode 

But I am getting error as
qrc:/Main.qml:18: ReferenceError: content is not defined
qrc:/Main.qml:19: TypeError: Property 'getBaseUrl' of object QQuickWidget(0x7fe328f0eb40) is not a function
qrc:/Main.qml:18: ReferenceError: content is not defined

Not sure, what I am missing

---

Added after 7 minutes:

Got it working by setting as property.

WebEngineView {
            id: currentWebView
            url: "http://www.google.co.in"
            anchors.fill: parent
            readonly property string htmlContent: content
            onHtmlContentChanged: loadHtml(htmlContent, baseUrl);
        }
 
ReaderView::ReaderView()
{
    Decrypt *decrypt = new Decrypt();
    QString content = decrypt->decryptFile("/Users/user/learnOnContent/LifeSciences_Grade1020151518_1963/Pages/pag001.html", 'A');
    setHtmlContent(content);
    QUrl baseUrl = QUrl("file:///Users/user/ssparklBookStore/LifeSciences_Grade1020151518_1963/Pages/pag001.html");
    setBaseUrl(baseUrl);
 
    QQmlContext *context = this->rootContext();
    context->setContextProperty("rdView",this);    
    QVariant qv(content);
    context->setContextProperty("content",qv);
    context->setContextProperty("baseUrl",baseUrl);
    setSource(QUrl("qrc:/Main.qml"));
}

WebEngineView {
            id: currentWebView
            url: "http://www.google.co.in"
            anchors.fill: parent
            readonly property string htmlContent: content
            onHtmlContentChanged: loadHtml(htmlContent, baseUrl);
        }

ReaderView::ReaderView()
{
    Decrypt *decrypt = new Decrypt();
    QString content = decrypt->decryptFile("/Users/user/learnOnContent/LifeSciences_Grade1020151518_1963/Pages/pag001.html", 'A');
    setHtmlContent(content);
    QUrl baseUrl = QUrl("file:///Users/user/ssparklBookStore/LifeSciences_Grade1020151518_1963/Pages/pag001.html");
    setBaseUrl(baseUrl);

    QQmlContext *context = this->rootContext();
    context->setContextProperty("rdView",this);    
    QVariant qv(content);
    context->setContextProperty("content",qv);
    context->setContextProperty("baseUrl",baseUrl);
    setSource(QUrl("qrc:/Main.qml"));
}

To copy to clipboard, switch view to plain text mode 

Thanks anda_skoa

[anda_skoa]

or I will have to set the property in cpp and then use it over hear. In that case, how to set the property ?

Have a Q_PROPERTY on the object you are exporting.

This is the easiest way of having changable content exported from C++ .
Whenever your C++ code needs QML to update its bindings, it just emits the property's change notification signal.
See comment #33 on how that looks from QML.

class ReaderView : // whatever your base class is
{
    Q_OBJECT
    Q_PROPERTY(QString content READ content NOTIFY contentChanged)
public:
 
    QString content() const: // that is the part after READ above
 
signals:
    void contentChanged();
};

class ReaderView : // whatever your base class is
{
    Q_OBJECT
    Q_PROPERTY(QString content READ content NOTIFY contentChanged)
public:

    QString content() const: // that is the part after READ above

signals:
    void contentChanged();
};

To copy to clipboard, switch view to plain text mode 

So whenever you emit contentChanged(), the property "content" (that's the part before READ) will be reevaluated, by QQmlEngine calling the property's READ function content().

Cheers,
_