How to set QWebEngineView on QQuickView

[ejoshva]

Thanks anda_skoa.
But the problem now I am facing is that I am not able to select itself. only click events are detected in the WebEngineView (QML) after adding the mouse area to the WebEngineView
Is there some restriction as in QWebEngineView in detecting MouseEvents.

[anda_skoa]

I am afraid I don't understand.

Are you saying that the web view does not handle user mouse interaction such that the user can select text?

Cheers,
_

[ejoshva]

included the 'drag' in the mousearea and now I am able to select text

WebEngineView {
        id: currentWebview
        objectName: "webView"
        url: "http://www.google.co.in"
        anchors.fill: parent
        readonly property string htmlContent: content
        onHtmlContentChanged: loadHtml(htmlContent, baseUrl);
 
        MouseArea {
            id : mousearea
            anchors.fill: parent
            drag {
                target: currentWebview
                axis: Drag.XandYAxis
            }
 
            onPressed: {
                pressPoint.x = mouseX
                pressPoint.y = mouseY
 
            }
            onReleased: {
                releasePoint.x = mouseX
                releasePoint.y = mouseY
               console.log(releasePoint)
             }
        }
        onXChanged: {
            if(mousearea.drag.active){
                console.log("x : "+x)
                currentWebview.runJavaScript("window.getSelection()", function(result) { console.log("selected Text=" + result);} )
            }
        }
 
    }

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

        MouseArea {
            id : mousearea
            anchors.fill: parent
            drag {
                target: currentWebview
                axis: Drag.XandYAxis
            }

            onPressed: {
                pressPoint.x = mouseX
                pressPoint.y = mouseY

            }
            onReleased: {
                releasePoint.x = mouseX
                releasePoint.y = mouseY
               console.log(releasePoint)
             }
        }
        onXChanged: {
            if(mousearea.drag.active){
                console.log("x : "+x)
                currentWebview.runJavaScript("window.getSelection()", function(result) { console.log("selected Text=" + result);} )
            }
        }
        
    }

To copy to clipboard, switch view to plain text mode 

But I dont find any prints which I intended using console.log

I am not find the drag to be consistant. Since, for 2 executions, I am able to select the text and the next execution it's not selectable. When I execute again, it's selectable.

When the text is selected, no prints are got. when it's not selectable. prints are got.

[anda_skoa]

I don't understand your example.
You are dragging the web view? how is that related to selection of text?

Cheers,
_

[ejoshva]

I didn't intend to drag the webview instead, I want to capture the mouse drag event and the text selection.
So what should be the target in that case to enable selection.

[wysota]

Selection should work out of the box.

[ejoshva]

It was working before including the mousearea inside WebEngineView.
After including mousearea for WebEngineView, only clicks are available. Selection is non-existent.

---

Added after 1 2 minutes:

I am trying to use QWebEngineView as extended through qmlregistertype and not as QtWebEngine element WebEngineView as below

//ReaderView.qml
import QtQuick 2.4
import QtQuick.Controls 1.3
import WebView 1.0
 
Rectangle {
    id: rect1
    height: 800
   width : 1300
    color: "white"
 
 
 WebEngineView {
        id: currentWebview
        height : parent.height
        width : parent.width        
    }
}
 
//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);
    qmlRegisterType<webview>("WebView", 1,0, "WebEngineView");
 
    /* 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);
 
}

//ReaderView.qml
import QtQuick 2.4
import QtQuick.Controls 1.3
import WebView 1.0
 
Rectangle {
    id: rect1
    height: 800
   width : 1300
    color: "white"
 
 
 WebEngineView {
        id: currentWebview
        height : parent.height
        width : parent.width        
    }
}
 
//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);
    qmlRegisterType<webview>("WebView", 1,0, "WebEngineView");
 
    /* 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);
 
}

To copy to clipboard, switch view to plain text mode 

here getting error as below
Invalid property assignment: "height" is a read-only property
Invalid property assignment: "width" is a read-only property

[anda_skoa]

It was working before including the mousearea inside WebEngineView.
After including mousearea for WebEngineView, only clicks are available. Selection is non-existent.

What do you need the MouseArea for?
Your code snippet doesn't say much in that regard.

I
I am trying to use QWebEngineView as extended through qmlregistertype and not as QtWebEngine element WebEngineView as below

I think we've covered that in some other thread already (or it was someone with a very similar setup): QWebEngineView is a widget.
It can (a) not be embedded in a QtQuick2 scene and (b) has no writable x/y/width/height properties (only writable geometry).

Cheers,
_

[ejoshva]

What do you need the MouseArea for?
Your code snippet doesn't say much in that regard.

I want to replicate the mouseEvents that we have in the QWebEngineView (i.e.) highlight the selected text, scroll to view the searched text on the page.

Exact requirement is on mouse release, I will show a context Menu (highlight, annot). On selecting highlight, the selected text will be highlighted, on selecting annot, annot text box will open up for user input; also the selected text will be highlighted.

I will also be doing a search on the page by getting user input, upon finding the word on the page have to scroll that line to viewable part of the screen.

I think we've covered that in some other thread already (or it was someone with a very similar setup): QWebEngineView is a widget.
It can (a) not be embedded in a QtQuick2 scene and (b) has no writable x/y/width/height properties (only writable geometry).

by bad
missed the part. I remember this one.

[wysota]

Let's summarize the current situation. What exactly are you using as your web view? What exactly does the scene look like? What is the relation between the web view item and the MouseArea item (if any)? And finally, what is the ultimate goal you are trying to achieve?

[ejoshva]

Let's summarize the current situation. What exactly are you using as your web view?

QtWebEngine
QML WebEngineView

What exactly does the scene look like?

There is a QQuickWidget in which Qml is included using setSource().
this QML has the QtWebEngine's element WebEngineView defined in it.

What is the relation between the web view item and the MouseArea item (if any)?

I want to emulate the QMouseEvents of the WebView in the Qml WebEngineView.
So included the MouseArea to capture the mouse events.

And finally, what is the ultimate goal you are trying to achieve?

What I am trying to achieve is to show a context Menu (highlight, annot) on mouse drag release (selecting text on the page loaded on the WebEngineView). On selecting highlight, the selected text will be highlighted, on selecting annot, annot text box will open up for user input; also the selected text will be highlighted.

I will also be doing a search on the page by getting user input, upon finding the word on the page have to scroll that line to viewable part of the screen.

[wysota]

I want to emulate the QMouseEvents of the WebView in the Qml WebEngineView.
So included the MouseArea to capture the mouse events.

What do you mean by that? WebEngineView already handles mouse events without any additional items on top of it.

What I am trying to achieve is to show a context Menu (highlight, annot) on mouse drag release (selecting text on the page loaded on the WebEngineView).

On "mouse drag release" or rather when text selection on a page changes? What if someone selects text by double or tripple clicking?

Does that help you in any way?

http://forums.mozillazine.org/viewto...?f=25&t=198568

On selecting highlight, the selected text will be highlighted, on selecting annot, annot text box will open up for user input; also the selected text will be highlighted.

What is annot? What HTML element is used to display that on a web page?

I will also be doing a search on the page by getting user input, upon finding the word on the page have to scroll that line to viewable part of the screen.

I don't think WebEngineView contains API that could do it.

Tell me one more thing, why are you using Qt Quick at all if you just have a single static item on the scene? QWebEngineView has much richer API and subclassing it would probably let you use much more of its functionality.

[ejoshva]

What do you mean by that? WebEngineView already handles mouse events without any additional items on top of it.

In that case, how do I do the customized action like what can be done on mouseReleaseEvent(), mousePressEvent().

On "mouse drag release" or rather when text selection on a page changes? What if someone selects text by double or tripple clicking?
Does that help you in any way?
http://forums.mozillazine.org/viewto...?f=25&t=198568.

I am taking into account the text selection only on single click, hold, drag to select the text and release.

What is annot? What HTML element is used to display that on a web page?.

Annotation, I have the code to display the annotations.

I don't think WebEngineView contains API that could do it..

For search too, have implemented functions to do the same.

Tell me one more thing, why are you using Qt Quick at all if you just have a single static item on the scene? QWebEngineView has much richer API and subclassing it would probably let you use much more of its functionality.

I have much more items on the ReaderView.qml, WebEngineView is just an item.

In nutshell, I am trying to do a e-reader but in real it's browser where in html or xhtml pages are loaded. But the functionalities of the e-reader are implemented.

[wysota]

In that case, how do I do the customized action like what can be done on mouseReleaseEvent(), mousePressEvent().

You put a mouse area over the item and handle things there. But you don't have to repeat what the view already handles itself. Just pass in the events you are not handling yourself in the mouse area.

Annotation, I have the code to display the annotations.

Shouldn't you be implementing everything in HTML then?

For search too, have implemented functions to do the same.

Where did you implement that?

I have much more items on the ReaderView.qml, WebEngineView is just an item.

Telling one thing in one post and then telling a different thing in another post doesn't help to solve the problem:

What exactly does the scene look like?

There is a QQuickWidget in which Qml is included using setSource().
this QML has the QtWebEngine's element WebEngineView defined in it.

In nutshell, I am trying to do a e-reader but in real it's browser where in html or xhtml pages are loaded. But the functionalities of the e-reader are implemented.

IMO all you want can easily be done in HTML which you already have instead of struggling to do it in Qt Quick. You can equip your page with required facilities to communicate with Qt Quick (e.g. using QWebChannel), do the things which are simple to do in HTML and pass enough information to Qt Quick to do the rest there (e.g. show a context menu).

[ejoshva]

I have implemented that search in C++.

Regarding mouse Events, I am not able to find how to do this

You put a mouse area over the item and handle things there. But you don't have to repeat what the view already handles itself. Just pass in the events you are not handling yourself in the mouse area.

If I am doing everything in HTML, nativity will be a problem.

[wysota]

I have implemented that search in C++.

And how did you merge that with WebEngineView?

Regarding mouse Events, I am not able to find how to do this

Either ignore the events you don't handle yourself and/or configure MouseArea to only react to a subset of buttons. Events for remaining buttons will be ignored automatically.

If I am doing everything in HTML, nativity will be a problem.

I have no idea what you mean by that.

[anda_skoa]

Regarding mouse Events, I am not able to find how to do this

I think if you set the "accepted" property of the MouseEvent to "false" it will be passed onto the item below the mouse area.

Cheers,
_

[ejoshva]

Below is my WebEngineView (QML) . If the selection is enabled, then this mousearea is not considered. When the mousearea is active, selection is inactive.

I dont understand, why fewer times, mousearea defined inside WebEngineView is enabled and rest of times mousearea defined is not enabled.

WebEngineView {
        id: currentWebview
        objectName: "webView"
        url: "http://www.google.co.in"
        anchors.fill: parent
        readonly property string htmlContent: content
        onHtmlContentChanged: loadHtml(htmlContent, baseUrl);
 
        MouseArea {
            id : mousearea
            anchors.fill: parent
            drag {
                id : weDrag
                target: currentWebview
            }
 
            onPressed: {
                pressPoint.x = mouseX
                pressPoint.y = mouseY
                console.log("PressPoint : "+pressPoint)
            }
            onReleased: {
                releasePoint.x = mouseX
                releasePoint.y = mouseY
                console.log("releasePoint : "+releasePoint)
                if(pressPoint != releasePoint )
                {
                    currentWebview.runJavaScript("window.getSelection()", function(result) { console.log("selected Text=" + result);} )
                }
            }
        }
    }

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

        MouseArea {
            id : mousearea
            anchors.fill: parent
            drag {
                id : weDrag
                target: currentWebview
            }

            onPressed: {
                pressPoint.x = mouseX
                pressPoint.y = mouseY
                console.log("PressPoint : "+pressPoint)
            }
            onReleased: {
                releasePoint.x = mouseX
                releasePoint.y = mouseY
                console.log("releasePoint : "+releasePoint)
                if(pressPoint != releasePoint )
                {
                    currentWebview.runJavaScript("window.getSelection()", function(result) { console.log("selected Text=" + result);} )
                }
            }
        }
    }

To copy to clipboard, switch view to plain text mode 

---

Added after 10 minutes:

You put a mouse area over the item and handle things there. But you don't have to repeat what the view already handles itself. Just pass in the events you are not handling yourself in the mouse area.

how do pass in the events which I am not handling.
in QGraphicsWebView, we pass in the mouse events as QGraphicsWebView::mousePresses(event).

Here how do I do the same.

Also I am not able to capture the selected text.
how can I do that.

onReleased: {
                releasePoint.x = mouseX
                releasePoint.y = mouseY
                console.log("releasePoint : "+releasePoint)
                if(pressPoint != releasePoint )
                {
                    currentWebview.runJavaScript("window.getSelection()", function(result) { console.log("selected Text=" + result);} )
                }
            }

onReleased: {
                releasePoint.x = mouseX
                releasePoint.y = mouseY
                console.log("releasePoint : "+releasePoint)
                if(pressPoint != releasePoint )
                {
                    currentWebview.runJavaScript("window.getSelection()", function(result) { console.log("selected Text=" + result);} )
                }
            }

To copy to clipboard, switch view to plain text mode 

I tried something as above, when this signal is captured, selection is not enabled.
When selection is enabled, this signal (ie) mousearea defined is not enabled

[anda_skoa]

So letting the events pass by setting their accepted flag to false did not work?

Cheers,
_

[ejoshva]

onPressed: {
                pressPoint.x = mouseX
                pressPoint.y = mouseY
                console.log("PressPoint : "+pressPoint)
                acceptedButtons : false
 
            }

onPressed: {
                pressPoint.x = mouseX
                pressPoint.y = mouseY
                console.log("PressPoint : "+pressPoint)
                acceptedButtons : false

            }

To copy to clipboard, switch view to plain text mode 

This is how I did and it didn't work.