How to set QWebEngineView on QQuickView

[wysota]

That's not what anda_skoa had in mind. You were supposed to set "accepted" property of the event object to false.

onPressed: { mouse.accepted = false }

onPressed: { mouse.accepted = false }

To copy to clipboard, switch view to plain text mode 

[ejoshva]

after including this code, the mousearea itself is not enabled.

Please let me know, how to capture enable text selection through MouseArea and this MouseArea to be always enabled.

[anda_skoa]

text selection is done by the web view element, not by the mouse area.
the idea was to pass the events through to the view for its selection handling.

Cheers,
_

[ejoshva]

text selection is done by the web view element, not by the mouse area.
the idea was to pass the events through to the view for its selection handling.

Cheers,
_

In that case, the control doesn't reach the mousearea when I include the mouse.accept = false.

if it's handled by the webview element, on which signal of the webview element I can catch the selection

[wysota]

In that case, the control doesn't reach the mousearea when I include the mouse.accept = false.

You mean this doesn't work?

WebEngineView {
  anchors.fill: parent
 
  MouseArea {
    anchors.fill: parent
 
    onClicked: {
      console.log("I was clicked at "+mouse.x+"x"+mouse.y)
      mouse.accepted = false
    }
  }
}

WebEngineView {
  anchors.fill: parent

  MouseArea {
    anchors.fill: parent

    onClicked: {
      console.log("I was clicked at "+mouse.x+"x"+mouse.y)
      mouse.accepted = false
    }
  }
}

To copy to clipboard, switch view to plain text mode 

if it's handled by the webview element, on which signal of the webview element I can catch the selection

WebEngineView does not have such signal, I think I already said so a couple of posts ago.

[ejoshva]

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 : "XAndYAxis"
                active: true
            }
 
            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 )
                {
                    mouse.accepted = false
                    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 : "XAndYAxis"
                active: true
            }

            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 )
                {
                    mouse.accepted = false
                    currentWebview.runJavaScript("window.getSelection()", function(result) { console.log("selected Text=" + result);} )
                }
            }

        }
    }

To copy to clipboard, switch view to plain text mode 

The code is as above and logs got are
qml: PressPoint : QPointF(513, 101)
qml: releasePoint : QPointF(716, 99)
qml: selected Text=[object Object]


the selected text is just object because text selection was disabled.

how do I get the text there.

[wysota]

drag {
                target: currentWebview
                axis : "XAndYAxis"
                active: true
            }

drag {
                target: currentWebview
                axis : "XAndYAxis"
                active: true
            }

To copy to clipboard, switch view to plain text mode 

Why do you insist on keeping this code? It doesn't do what you think it does.

the selected text is just object because text selection was disabled.

The selected text is an object because everything in JavaScript is an object.

https://developer.mozilla.org/en-US/...w/getSelection

[anda_skoa]

In that case, the control doesn't reach the mousearea when I include the mouse.accept = false.

Which of the events do you get and do not accept and which ones do you not get at all?

Cheers,
_

[ejoshva]

Which of the events do you get and do not accept and which ones do you not get at all?

Cheers,
_

none of the events defined in mousearea was caught when selection is enabled.

When selection is disabled, all the events of the mousearea are got

[wysota]

Please show the exact code you used for testing this.

This works for me without problems:

import QtWebEngine 1.0
import QtQuick 2.4
 
 
WebEngineView {
  url: "http://www.google.com"
 
  MouseArea {
    anchors.fill: parent
 
    onPressed: {
      console.log("Pressed: "+mouse.x+"x"+mouse.y)
      mouse.accepted = false
    }
 
  }
}

import QtWebEngine 1.0
import QtQuick 2.4


WebEngineView {
  url: "http://www.google.com"

  MouseArea {
    anchors.fill: parent

    onPressed: {
      console.log("Pressed: "+mouse.x+"x"+mouse.y)
      mouse.accepted = false
    }

  }
}

To copy to clipboard, switch view to plain text mode 

[ejoshva]

Why do you insist on keeping this code? It doesn't do what you think it does.


The selected text is an object because everything in JavaScript is an object.

https://developer.mozilla.org/en-US/...w/getSelection

thanks for pointing it out Wysota.
Will remove that code.

Now I am not able to select any text. Just that I drag it over the text area.

---

Added after 33 minutes:

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
 
            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 )
                {
                    mouse.accepted = false
                    currentWebview.runJavaScript("window.getSelection()", function(result) { console.log("selected Text =" + result.toString());} )
                }
            }
 
        }
    }

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

            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 )
                {
                    mouse.accepted = false
                    currentWebview.runJavaScript("window.getSelection()", function(result) { console.log("selected Text =" + result.toString());} )
                }
            }

        }
    }

To copy to clipboard, switch view to plain text mode 

This is the code used for testing that.

Now I get the signals onPressed, onReleased in the mousearea.


but the text selection is unavailable. Just that I can drag the mouse.

[anda_skoa]

Now I get the signals onPressed, onReleased in the mousearea.


but the text selection is unavailable. Just that I can drag the mouse.

What if you do not accept the events?

Cheers,
_

[wysota]

Now I get the signals onPressed, onReleased in the mousearea.


but the text selection is unavailable. Just that I can drag the mouse.

You are not ignoring the events. Only an ignored event will be propagated to an item below the mouse area. This is all in the docs, please read it instead of wasting your time for meaningless problems.

[ejoshva]

What if you do not accept the events?

Cheers,
_

I am not able to find any difference.

the problem I face here is that the text selection is not available. I don't find the cursor itself, just the mouse pointer which means only clicks are allowed and selection is not allowed.

Yes, there has been quite a few posts about me stating selection not available . But I am not able to understand what you are trying to convery

---

Added after 4 minutes:

You are not ignoring the events. Only an ignored event will be propagated to an item below the mouse area. This is all in the docs, please read it instead of wasting your time for meaningless problems.

All I need here is the text selection, can you please tell me. how do I do that. There has quite a few posts, you stating it's handled by WebEngineView itself. But after implementing MouseArea, there is only mouse pointer and not cursor that means only clicks are allowed and not selection. can you please tell me how to make text selection available.

[wysota]

All I need here is the text selection, can you please tell me. how do I do that.

I already told you, I even gave you a working example (post #90) which you silently ignored and another one earlier (#85) which you didn't comment as well.

can you please tell me how to make text selection available.

Don't do anything. It works by default. However I think you want something else -- you want a mouse area over an item and still have items reach the webview. For that, as said many times already, events need to be ignored (accepted = false) in the mouse area. Nobody will do that for you -- you have to decide yourself which events to consume in the mouse area and which to pass to the underlying item.

Wow... we are going to reach 100 posts in this thread...

[ejoshva]

I already told you, I even gave you a working example (post #90) which you silently ignored and another one earlier (#85) which you didn't comment as well.

I didn't intend to ignore you post.
For the post#90, I replied with the code which you asked for.
Also post #85 I have included.

Below is the current code and have also attached the screen of what I trying to do.

//ContextMenu.qml
import QtQuick 2.0
 
Rectangle {
    id : cxtMenu
    width: 140
    height: 24
    radius: width*0.5
    color: "#222222"
    Image {
        id: triangle
        height: 15
        width: 15
        anchors.top: parent.top
        anchors.topMargin: 24
        anchors.horizontalCenter: parent.horizontalCenter
        smooth: true
        source: "qrc:/images/triangle.png"
        visible: true
    }
    Rectangle {
        id:hglt
        height: 24
        width: 60
        radius: width*0.1
        anchors.top : parent.top     
        anchors.left: parent.left
        border.color: "#000000"
        border.width: 0
        color: "#222222"
 
        Text {
            id:hglttext
            text: qsTr("Highlight")
            font.pointSize: 11
            font.family: "san-serif"
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.top: parent.top
            anchors.topMargin: 5
            smooth: true
            color: "#CFCFCF"
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    browserwindow.cxtMenu()
                }
            }
        }
    }
    Rectangle {
        id:verticalline
        height: parent.height
        width: 1
        anchors.top :parent.top
        anchors.left: parent.left
        anchors.leftMargin: 70
        color: "#CFCFCF"
    }
 
    Rectangle {
        id:annot
        height: 24
        width: 80
        radius: width*0.1
        anchors.top : parent.top
        anchors.left: parent.left
        anchors.leftMargin: 71
        border.color: "#000000"
        border.width: 0
        color: "#222222"
 
        Text {
            id:annottext
            text: qsTr("Annotation")
            font.pointSize: 11
            font.family: "san-serif"
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.top: parent.top
            anchors.topMargin: 5
            smooth: true
            color: "#CFCFCF"
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    browserwindow.newnotes()
                }
            }
        }
    }
}
 
 
//BrowserWindow.qml
import QtQuick 2.0
import QtQuick.Controls 1.3
import QtWebEngine 1.0
 
 
Rectangle {
    id:flick
    height: parent.height
    width: parent.width - 5
    property variant mypoint: Qt.point(10,10)
    property variant pressPoint: Qt.point(10,10)
    property variant releasePoint: Qt.point(10,10)
    property string pagecontents: ""
    property string url: ""
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
 
            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 )
                {
                    mouse.accepted = false
                    currentWebview.runJavaScript("window.getSelection()", function(result) { console.log("selected Text =" + result.toString());} )                    
                    cntxtMenu.visible = true
                    cntxtMenu.x = mouseX - 80
                    cntxtMenu.y = mouseY - 38
                }
            }
 
        }
    }
}

//ContextMenu.qml
import QtQuick 2.0

Rectangle {
    id : cxtMenu
    width: 140
    height: 24
    radius: width*0.5
    color: "#222222"
    Image {
        id: triangle
        height: 15
        width: 15
        anchors.top: parent.top
        anchors.topMargin: 24
        anchors.horizontalCenter: parent.horizontalCenter
        smooth: true
        source: "qrc:/images/triangle.png"
        visible: true
    }
    Rectangle {
        id:hglt
        height: 24
        width: 60
        radius: width*0.1
        anchors.top : parent.top     
        anchors.left: parent.left
        border.color: "#000000"
        border.width: 0
        color: "#222222"

        Text {
            id:hglttext
            text: qsTr("Highlight")
            font.pointSize: 11
            font.family: "san-serif"
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.top: parent.top
            anchors.topMargin: 5
            smooth: true
            color: "#CFCFCF"
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    browserwindow.cxtMenu()
                }
            }
        }
    }
    Rectangle {
        id:verticalline
        height: parent.height
        width: 1
        anchors.top :parent.top
        anchors.left: parent.left
        anchors.leftMargin: 70
        color: "#CFCFCF"
    }

    Rectangle {
        id:annot
        height: 24
        width: 80
        radius: width*0.1
        anchors.top : parent.top
        anchors.left: parent.left
        anchors.leftMargin: 71
        border.color: "#000000"
        border.width: 0
        color: "#222222"

        Text {
            id:annottext
            text: qsTr("Annotation")
            font.pointSize: 11
            font.family: "san-serif"
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.top: parent.top
            anchors.topMargin: 5
            smooth: true
            color: "#CFCFCF"
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    browserwindow.newnotes()
                }
            }
        }
    }
}


//BrowserWindow.qml
import QtQuick 2.0
import QtQuick.Controls 1.3
import QtWebEngine 1.0


Rectangle {
    id:flick
    height: parent.height
    width: parent.width - 5
    property variant mypoint: Qt.point(10,10)
    property variant pressPoint: Qt.point(10,10)
    property variant releasePoint: Qt.point(10,10)
    property string pagecontents: ""
    property string url: ""
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

            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 )
                {
                    mouse.accepted = false
                    currentWebview.runJavaScript("window.getSelection()", function(result) { console.log("selected Text =" + result.toString());} )                    
                    cntxtMenu.visible = true
                    cntxtMenu.x = mouseX - 80
                    cntxtMenu.y = mouseY - 38
                }
            }

        }
    }
}

To copy to clipboard, switch view to plain text mode 

Screen Shot 2015-07-09 at 11.45.18 AM.jpg
What I am trying to do is. on mouse release will bring in a context menu to highlight the selected text or add annotation to selected text

Don't do anything. It works by default. However I think you want something else -- you want a mouse area over an item and still have items reach the webview. For that, as said many times already, events need to be ignored (accepted = false) in the mouse area. Nobody will do that for you -- you have to decide yourself which events to consume in the mouse area and which to pass to the underlying item

Yes, without including the mousearea selection was available. After including the mousearea only selection is unavailable.
I am confused to choose which event needs to be ignored to make the text selection available.

Wow... we are going to reach 100 posts in this thread...

Thx Wysota and anda_skoa for your continuous guidance and help. Without you both, I wouldn't have been able to reach where I am now. Thanks a ton.
Hope, I would be able to complete what I am trying with your help.

[anda_skoa]

Below is the current code and have also attached the screen of what I trying to do.

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

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

            }

To copy to clipboard, switch view to plain text mode 

Can you point out in which of these lines you are calling mouse.accept = false?

I keep looking at the code and can't find it. Is it in some invisible font in the line after console.log?

Cheers,
_

[wysota]

Can you point out in which of these lines you are calling mouse.accept = false?

I keep looking at the code and can't find it. Is it in some invisible font in the line after console.log?

I was meaning to ask the same thing.

[ejoshva]

I was meaning to ask the same thing.

I have included in OnReleased

onReleased: {
                releasePoint.x = mouseX
                releasePoint.y = mouseY
                console.log("releasePoint : "+releasePoint)
                if(pressPoint != releasePoint )
                {
              [B]      mouse.accepted = false[/B]
                    currentWebview.runJavaScript("window.getSelection()", function(result) { console.log("selected Text =" + result.toString());} )                    
                    cntxtMenu.visible = true
                    cntxtMenu.x = mouseX - 80
                    cntxtMenu.y = mouseY - 38
                }
            }

onReleased: {
                releasePoint.x = mouseX
                releasePoint.y = mouseY
                console.log("releasePoint : "+releasePoint)
                if(pressPoint != releasePoint )
                {
              [B]      mouse.accepted = false[/B]
                    currentWebview.runJavaScript("window.getSelection()", function(result) { console.log("selected Text =" + result.toString());} )                    
                    cntxtMenu.visible = true
                    cntxtMenu.x = mouseX - 80
                    cntxtMenu.y = mouseY - 38
                }
            }

To copy to clipboard, switch view to plain text mode 

I understood as only I am doing something customised alone I will have to include mouse.accepted = false. In mousePressed, I am not doing anything customised, just storing the value.,

[anda_skoa]

Well, if you don't pass the press event to the web view, how is the web view supposed to start drag selection?

Cheers,
_