How to set QWebEngineView on QQuickView

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.

Quote:

---

Originally Posted by 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.

---

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.

@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.

Code:

---

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();

---

What I am doing wrong here.

Quote:

---

Originally Posted by anda_skoa

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

So on C++ side just

Code:

---

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

---

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

Code:

---

ApplicationWindow {
    toolBar: ReaderToolBar { ... }
}

---

Cheers,
_

---

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

Code:

---

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 }
 
     }
}

---

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.

Quote:

---

Originally Posted by ejoshva

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,
_

Quote:

---

Originally Posted by anda_skoa

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.

Code:

---

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")
        }
    }
}

---

How is ReaderToolBar defined?

Quote:

---

Originally Posted by ejoshva

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,
_

Quote:

---

Originally Posted by wysota

How is ReaderToolBar defined?

---

Code:

---

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()
}

---

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

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()

Code:

---

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"
    }
}

---

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

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

Then you can do something like

Code:

---

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

---

Cheers,
_

Code:

---

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);
}

---

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

What is the base class of ReaderView?

Quote:

---

Originally Posted by ejoshva

Code:

---

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

---

---

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,
_

Quote:

---

Originally Posted by wysota

What is the base class of ReaderView?

---

QQuickWidgets

---

Added after 15 minutes:

@anda_skoa
you mean to set a property in qml like

Code:

---

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());
        }

---

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

Quote:

---

Originally Posted by ejoshva

QQuickWidgets

---

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

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

Code:

---

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());
        }

---

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.

Code:

---

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"));
}

---

Thanks anda_skoa

Quote:

---

Originally Posted by ejoshva

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.

Code:

---

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();
};

---

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,
_