How to set QWebEngineView on QQuickView

Code:

---

ReaderView.h
class ReaderView : public QQuickWidget
{
    Q_OBJECT
    Q_PROPERTY(QString content READ content NOTIFY contentChanged)
public:
    ReaderView();
    ~ReaderView();
    QString content() const;
    void setContent(const QString &value) {
            if (value != htmlContent) {
                htmlContent = value;
                emit contentChanged();
            }
        }
signals:
    void contentChanged();
public slots:
    QUrl getBaseUrl() const;
    void setBaseUrl(const QUrl &value);
 
private :
    QString htmlContent;
    QUrl baseUrl;
};
 
ReaderView.cpp
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);   
   setSource(QUrl("qrc:/Main.qml"));
}
 
Main.qml
 WebEngineView {
            id: currentWebView
           // url: "http://www.google.co.in"
            anchors.fill: parent
            readonly property string htmlContent: rdView.content
            onHtmlContentChanged: loadHtml(htmlContent, rdView.getBaseUrl());
        }

---

Now getting error as
UUndefined symbols for architecture x86_64:
"vtable for ReaderView", referenced from:
ReaderView::ReaderView() in ReaderView.o
ReaderView::~ReaderView() in ReaderView.o
NOTE: a missing vtable usually means the first non-inline virtual member function has no definition.
ld: symbol(s) not found for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

---

Added after 10 minutes:

Got the issue resolved.

Issue was with .pro file.

Missed adding QT += gui

Quote:

---

Originally Posted by ejoshva

Got the issue resolved.

Issue was with .pro file.

Missed adding QT += gui

---

Are you sure it wasn't that you didn't define body for constructor and destructor?

@wysota: I am sure, missing "gui" in pro file was the issue. Constructor and destructor body I have added. Even in the code sample pasted here is constructor.

The vtable error usually means that you did not re-run qmake after adding Q_OBJECT to a class that had already been part of the project.

Btw, why not make the baseUrl a property as well?

Cheers,
_

Yes, I have to make base url property as well.

Thanks anda_skoa and wysota for your values inputs.

I have implemented mouseMoveEvent in WebEngineView class.

But after reading from the internet QTBUG-43602 and from one of your posts got to know that QWebEngineView doesn't capture mouseEvents and it's a limitation.

Also suggestion was given as to monitor QObject::childEvent of the QWebEngineView and install an event filter when a new child QWidget appear during page loads

how do I do this?

I tried implement eventfilter by installing it. But mouse events are not captured in the event()->type.

How to capture the mouseevent in qwebengineview

What did you install the event filter on?

Code:

---

ReaderMain::ReaderMain(QWidget *parent)
    : QQuickWidget(parent)
{
    webView = new WebEngineView(this);
    tool = new toolbar(this);   
    this->installEventFilter(webView);
}
 
bool WebEngineView::eventFilter(QObject *obj, QEvent *event)
{
    qDebug()<<obj->metaObject()->className() <<" : "<<event->type();
 
    if(event->type() == QEvent::MouseButtonPress)
    {
        qDebug()<<"mouse press";
    }
}

---

The mouse events are of value 2,3,4,5. But I dont receive these events only window focus, window enable, window disable events (12,25,25) events are received.

What I want to actually do is on click drag and release (meaning some text), I want to display a menu where option will be shown as to highlight or annotation.

Are you sure you know what you are doing? How is your webView object related to WebEngineView declaration you have (or at least had yesterday) in your QML document?

Yesterday I was trying out with QML for WebEngineView.

Now the code is different, I will be using that QML WebEngineView at later point of time.

Currently I am doing as bellow

Code:

---

WebEngineView::WebEngineView(QWidget *parent)
              : QWebEngineView(parent)
{
    setEnabled(true);
    setGeometry(0,0,dw.width(),dw.height());
    decrypt = new Decrypt();
    setPageContent(decrypt->decryptFile("/Users/user/learnOnContent/LifeSciences_Grade1020151518_1963/Pages/pag002.html", 'A'));
    setUrl(QUrl("file:///Users/user/ssparklBookStore/LifeSciences_Grade1020151518_1963/Pages/pag002.html"));
    loadCurrentPage();
    prev = new QPushButton(this);
    prev->setGeometry(30,(dw.height()/2)-50,50,50);
    prev->setStyleSheet("border:1px");
    prev->setIcon(QIcon(QString::fromUtf8(":/images/prev_button.png")));
    prev->setIconSize(QSize(50, 50));
 
    next = new QPushButton(this);
    next->setGeometry(dw.width()-90,(dw.height()/2)-50,50,50);
    next->setStyleSheet("border:1px");
    next->setIcon(QIcon(QString::fromUtf8(":/images/next_button.png")));
    next->setIconSize(QSize(50, 50));
    connect(prev,SIGNAL(clicked()),this,SLOT(loadPreviousPage()));
    connect(next,SIGNAL(clicked()),this,SLOT(loadNextPage()));
 
}
 
 
toolbar::toolbar(QWidget *parent) : QQuickWidget(parent)
{
    QQmlContext *objectContext = this->rootContext();
    objectContext->setContextProperty("tb", this); 
    setSource(QUrl("qrc:/ReaderToolBar.qml"));
    setResizeMode(QQuickWidget::SizeRootObjectToView);
}
 
 
ReaderMain::ReaderMain(QWidget *parent)
    : QQuickWidget(parent)
{
    webView = new WebEngineView(this);
    tool = new toolbar(this);
 
   // this->installEventFilter(webView);
 
    this->hideToolBarWid(true);
    tool->setStyleSheet("background-color: transparent;");
    connect(tool, SIGNAL(s_showlib()), this, SLOT(showlibrary()));
    connect(tool,SIGNAL(s_showTOCFromTB()), this, SLOT(showtocinwebview()));
    connect(tool,SIGNAL(s_fixLayout()),this,SLOT(loadfxlayout()));
    connect(tool, SIGNAL(s_showreflow()), this, SLOT(loadflowpage()));
    connect(tool, SIGNAL(s_hideToolBar(bool)), this, SLOT(hideToolBarWid(bool)));
}

---

currently I am using this way.

Here I would want to capture the mouse events on the WebEngineView

Installing an event filter on the webview doesn't make sense. The bug report you mentioned said you had to do it on a child of the view.

Yes Wysota. But I am not sure how to implement that. :(

I believe it is described in the report.

childEvent link gives details regarding QWebEngineView::childEvent.
But I am not getting how to implement this.
Please provide some sample code, how to implement this childEvent().

Quote:

---

Originally Posted by ejoshva

childEvent link gives details regarding QWebEngineView::childEvent.
But I am not getting how to implement this.
Please provide some sample code, how to implement this childEvent().

---

Do you understand what you need to do? Or is the next question you ask going to be "what do I put there?" and the next one "please provide me with a sample code of an event filter"?

I have written the code for event filter, What I am not clear is how to implement as child of the WebEngineView.
I have said this in few post earlier as well.

Now I have written the eventFilter() in the class which as inherited QWebEngineView, so that makes it the child class. But I don't get the events for mouse.
So what is this child class supposed to be?

Quote:

---

Originally Posted by ejoshva

I have written the code for event filter, What I am not clear is how to implement as child of the WebEngineView.

---

What do you not understand? Did you read the docs on what childEvent() does? Did you go through the docs of QChildEvent? What options does it present?

Quote:

---

Now I have written the eventFilter() in the class which as inherited QWebEngineView, so that makes it the child class. But I don't get the events for mouse.

---

Which clearly indicates you have no idea what the problem is and what you are supposed to do with it.

Child of object A is an object B for whom A is set as its QObject::parent(). childEvent lets you be notified when a child object (B) is added or removed from a particular object (A) which lets you install an event filter (on B).

Below is the code in which I have implemented the childEvent.
I am able to catch the mouse events

Code:

---

#include "WebEngineView.h"
 
WebEngineView::WebEngineView(QWidget *parent)
    : QWebEngineView(parent)
{
    installEventFilter(this);
    setEnabled(true);
    setGeometry(0,0,dw.width(),dw.height());
    load(QUrl("http://www.thehindu.com"));
}
 
WebEngineView::~WebEngineView()
{
 
}
 
bool WebEngineView::eventFilter(QObject *obj, QEvent *event)
{
 
 switch(event->type())
    {
        case QEvent::ChildAdded:
        {
            QChildEvent* ce = static_cast<QChildEvent*>(event);
            // Install the filter to each new child object created
            ce->child()->installEventFilter(this);
            break;
        }
        case QEvent::ChildRemoved:
        {
            QChildEvent* ce = static_cast<QChildEvent*>(event);
            // Remove the the filter from each new child object removed
            ce->child()->removeEventFilter(this);
            break;
        }
        case QEvent::MouseButtonPress:
        {
            QMouseEvent* me = static_cast<QMouseEvent*>(event);
            if (me->button() == Qt::LeftButton)
            {
                event->accept();
            }
            if (me->button() == Qt::RightButton)
            {
                event->accept();
            }
            break;
        }
        case QEvent::MouseButtonRelease:
        {
            QMouseEvent* me = static_cast<QMouseEvent*>(event);
            qDebug()<<"selected Text : "<<this->selectedText();
            break;
        }
        case QEvent::MouseMove:
        {
            QMouseEvent* me = static_cast<QMouseEvent*>(event);
            break;
        }
        case QEvent::MouseButtonDblClick:
        {
            QMouseEvent *mouseEvent = static_cast<QMouseEvent*>(event);
            if (mouseEvent && mouseEvent->button() == Qt::LeftButton)
            {
                qDebug()<<"clicked position : " << mouseEvent->pos();
            }
            else if (event->type() == QEvent::Wheel)
            {
                QWheelEvent *wheelEvent = static_cast<QWheelEvent*>(event);
                if (wheelEvent->buttons() == Qt::RightButton)
                {
                    event->ignore();
                    return false;
                }
                if (wheelEvent->modifiers().testFlag(Qt::ControlModifier))
                {
                    event->accept();
                    break;
                }
            }
        }
    default:
 
    }
    return QWidget::eventFilter(obj, event);
}

---

How to get the selected text from page loaded in the WebEngineView which is loaded as QML element.
(i.e.) just as we get page()->selectedText() from the QWebEngineView.

Code:

---

//ReaderView.qml
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtWebEngine 1.0
 
Rectangle {
    id: rect1
    height: 600
    color: "white"
 
 
 WebEngineView {
        id: currentWebview
        objectName: "webView"
        url: "http://www.google.co.in"
        anchors.fill: parent
        readonly property string htmlContent: content
        onHtmlContentChanged: loadHtml(htmlContent, baseUrl);
        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.log("clicked")
            }
            onPressed: {
                console.log("x="+mouseX)
                console.log("y="+mouseY)
            }
            onReleased: {
                console.log("release x: "+mouseX)
                console.log("release y: "+mouseY)                
            }
 
        }
    }
}
 
//ReadWidget.cpp
readwidget::readwidget(QWidget *parent) : QQuickWidget(parent)
{
    engine = QQuickWidget::engine();
    root = this->rootContext();
 
    /* Setting the current object into context of QML source */
    root->setContextProperty("rw", this);
 
    /*Initializing the variables for the usage in QML*/
    Decrypt *decrypt = new Decrypt();
    QString content = decrypt->decryptFile("/Users/user/ssparklContent/LifeSciences_Grade1020151518_1963/Pages/10_chap05.html", 'A');
 
    QUrl baseUrl = QUrl("file:///Users/user/ssparklContent/LifeSciences_Grade1020151518_1963/Pages/10_chap05.html");
    QVariant pgContent(content);
 
    root->setContextProperty("content",pgContent);
    root->setContextProperty("baseUrl",baseUrl);
 
 
    /* Setting the QML source as ReaderView.qml to be executed from
     * current object */
     setSource(QUrl("qrc:/ReaderView.qml"));
    QQmlComponent component(engine);
    component.loadUrl(QUrl("qrc:/ReaderView.qml"));
    object = component.create(root);
 
    setResizeMode(QQuickWidget::SizeRootObjectToView);
 
}

---

Maybe there is a way to do that through running JavaScript in the Web context?
I.e. calling runJavaScript() with some script code that uses "browser" methods of getting the selected text?

Something like

Code:

---

runJavaScript("window.getSelection()", function(result) { console.log("selected Text=" + result);} );

---

Cheers,
_