Page 1 of 6 123 ... LastLast
Results 1 to 20 of 113

Thread: How to set QWebEngineView on QQuickView

  1. #1
    Join Date
    Feb 2015
    Posts
    185
    Thanks
    5
    Qt products
    Qt5
    Platforms
    MacOS X Windows

    Default How to set QWebEngineView on QQuickView

    I am porting from QGraphicsView to QQuickView.

    Like we load QGraphicsWebView on QGraphicsView, how to load QWebEngineView on QQuickView.

    currently I am setting it like below but it's not getting loaded.
    Qt Code:
    1. QuickViewReader::QuickViewReader(QWindow *parent): QQuickView(parent)
    2. {
    3. WebView = new WebEngineView();
    4. root = new QQmlContext(engine.rootContext());
    5. qmlRegisterType<WebEngineView>("WebView", 1,0, "WebEngineView");
    6.  
    7. /* Setting the current object into context of QML source */
    8. root->setContextProperty("rw", this);
    9. this->rootContext()->setContextProperty("rw", this);
    10. /* Setting the webview object into context of QML source */
    11. root->setContextProperty("webView",this->WebView);
    12.  
    13. QQmlComponent component(&engine);
    14. component.loadUrl(QUrl("qrc:/ReaderView.qml"));
    15. object = component.create(root);
    16.  
    17. setSource(QUrl("qrc:/ReaderView.qml"));
    18. setResizeMode(QQuickView::SizeRootObjectToView);
    19. }
    To copy to clipboard, switch view to plain text mode 
    The page is blank.
    When I explicitly call WebView.show(), the page is displayed.

    How to overlay QWebEngineView on QQuickView
    Last edited by ejoshva; 8th May 2015 at 14:22.

  2. #2
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,359
    Thanks
    3
    Thanked 5,015 Times in 4,792 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: How to set QWebEngineView on QQuickView

    What is this WebEngineView class?
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  3. #3
    Join Date
    Feb 2015
    Posts
    185
    Thanks
    5
    Qt products
    Qt5
    Platforms
    MacOS X Windows

    Default Re: How to set QWebEngineView on QQuickView

    I find that QQuickView is QWindow type and QWebEngineView is QWidget type.

    QQuickView , I am making use of extensively to enable the QML functionalities.

    To display the page alone, QWebEngineView I am using and also for actions made on that page like highlight, annotation, search, mouseWheelRoll etc.


    Added after 14 minutes:


    Also found that, there is QQuickWidget which is of QWidget type.

    So I will have to use QQuickWidget only?? or I can proceed with using QQuickView.

    Basically I use this QQuickView for QML functionality only.
    Last edited by ejoshva; 8th May 2015 at 14:38.

  4. #4
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,359
    Thanks
    3
    Thanked 5,015 Times in 4,792 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: How to set QWebEngineView on QQuickView

    You didn't answer my question.
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  5. #5
    Join Date
    Feb 2015
    Posts
    185
    Thanks
    5
    Qt products
    Qt5
    Platforms
    MacOS X Windows

    Default Re: How to set QWebEngineView on QQuickView

    its inherited class from QWebEngineView

  6. #6
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: How to set QWebEngineView on QQuickView

    No need to register anything, QtWebEngine has a QML module:
    http://doc.qt.io/qt-5/qtwebengine-index.html

    Cheers,
    _

  7. #7
    Join Date
    Feb 2015
    Posts
    185
    Thanks
    5
    Qt products
    Qt5
    Platforms
    MacOS X Windows

    Default Re: How to set QWebEngineView on QQuickView

    Actually I am porting from QDeclarativeView to QWebEngineView, So QGraphicsWebView is placed inside QDeclarativeView. I wanted to implement a similar thing.

    I have modified QDeclarativeView to QQuickWidget and QGraphicsWebView to QWebEngine.

    QDeclarativeView has toolbar , next/prev button to navigate and pageslider bar. QGraphicsWebView is to display the page and capture events on the page and do related functionality like Highlight,Annnotations.....

    How to implement a similar in QQuickWidget and QWebEngineView.
    Last edited by ejoshva; 9th May 2015 at 08:04.

  8. #8
    Join Date
    Feb 2015
    Posts
    185
    Thanks
    5
    Qt products
    Qt5
    Platforms
    MacOS X Windows

    Default Re: How to set QWebEngineView on QQuickView

    Quote Originally Posted by anda_skoa View Post
    No need to register anything, QtWebEngine has a QML module:
    http://doc.qt.io/qt-5/qtwebengine-index.html

    Cheers,
    _
    In the example provided in the link,
    Qt Code:
    1. import QtQuick 2.1
    2. import QtQuick.Controls 1.1
    3. import QtWebEngine 1.0
    4.  
    5. ApplicationWindow {
    6. width: 1280
    7. height: 720
    8. visible: true
    9. WebEngineView {
    10. id: webview
    11. url: "http://www.qt-project.org"
    12. anchors.fill: parent
    13. }
    14. }
    To copy to clipboard, switch view to plain text mode 

    How is this accessed in WebEngineView.cpp (inherited from QWebEngineView)
    or How to set these elements from WebEngineView onto QML

  9. #9
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,359
    Thanks
    3
    Thanked 5,015 Times in 4,792 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: How to set QWebEngineView on QQuickView

    Quote Originally Posted by ejoshva View Post
    How to implement a similar in QQuickWidget and QWebEngineView.
    It will be extremely difficult to do that. However you can start with what anda_skoa suggested -- instead of registering your own custom web engine view, use the one that is already available.

    How is this accessed in WebEngineView.cpp (inherited from QWebEngineView)
    "This"? As in "current object"?

    or How to set these elements from WebEngineView onto QML
    "These" elements? What elements?
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  10. #10
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: How to set QWebEngineView on QQuickView

    Quote Originally Posted by ejoshva View Post
    How to set these elements from WebEngineView onto QML
    The example is QML code, there no need to set any element.
    The WebEngineView element is provided by the QtWebEngine module without any effort needed on the application developer's side.

    Just use it as any other QtQuick item.

    Cheers,
    _

  11. #11
    Join Date
    Feb 2015
    Posts
    185
    Thanks
    5
    Qt products
    Qt5
    Platforms
    MacOS X Windows

    Default Re: How to set QWebEngineView on QQuickView

    Thanks for your replies @ anda_skoa and @ wysota

    Let me try implement your suggestions.

  12. #12
    Join Date
    Feb 2015
    Posts
    185
    Thanks
    5
    Qt products
    Qt5
    Platforms
    MacOS X Windows

    Default Re: How to set QWebEngineView on QQuickView

    I have done as below and I am able to invoke.
    Qt Code:
    1. Main.qml
    2.  
    3. ApplicationWindow {
    4. title: qsTr("diacritech")
    5. width: 1200
    6. height: 800
    7. visible: true
    8. WebEngineView {
    9. id: webview
    10. url: "http://www.google.co.in"
    11. anchors.fill: parent
    12. }
    13. }
    14.  
    15. WebEngineView.cpp
    16. WebEngineView::WebEngineView()
    17. {
    18. QQmlEngine engine;
    19. QQmlContext *objectContext = new QQmlContext(engine.rootContext());
    20. objectContext->setContextProperty("we",this);
    21. QQmlComponent component(&engine);
    22. component.loadUrl(QUrl("qrc:/main.qml"));
    23. QObject *object = component.create(objectContext);
    24.  
    25. }
    26.  
    27. main.cpp
    28. int main(int argc, char *argv[])
    29. {
    30. QApplication app(argc, argv);
    31. WebEngineView *weView = new WebEngineView();
    32. weView->show();
    33.  
    34. return app.exec();
    35. }
    To copy to clipboard, switch view to plain text mode 

    Here I get 2 windows, 1. WebEngienView() 2. QML -> WebEngineView

    When I comment the webengineview.show() in main.cpp, I am getting only one window.
    Is this the way, this is to be done?

    Also I am including another components of another QML file (ReaderToolBar.qml). The tool bar is displayed but I am not able to capture the mouseclick events


    Main.qml (included below component)
    Qt Code:
    1. ReaderToolBar {
    2. id: tb
    3. width: parent.width
    4. height: 50
    5. anchors.top: parent.top
    6. color: "transparent"
    7. }
    To copy to clipboard, switch view to plain text mode 

    Is there something I am missing, which enables to capture the mouse click events?

  13. #13
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,359
    Thanks
    3
    Thanked 5,015 Times in 4,792 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: How to set QWebEngineView on QQuickView

    What is it exactly that you are trying to achieve?
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  14. #14
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: How to set QWebEngineView on QQuickView

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

    So on C++ side just
    Qt Code:
    1. int main(int argc, char **argv)
    2. {
    3. QApplication app(argc, argv);
    4.  
    5. QQuickView view;
    6. view.setSource(QUrl("qrc:/main.qml");
    7. view.show();
    8.  
    9. return app.exec();
    10. }
    To copy to clipboard, switch view to plain text mode 

    And you can set your toolbar directly as the ApplicationWindow's toolBar property
    Qt Code:
    1. ApplicationWindow {
    2. toolBar: ReaderToolBar { ... }
    3. }
    To copy to clipboard, switch view to plain text mode 

    Cheers,
    _

  15. #15
    Join Date
    Feb 2015
    Posts
    185
    Thanks
    5
    Qt products
    Qt5
    Platforms
    MacOS X Windows

    Default Re: How to set QWebEngineView on QQuickView

    I am porting from QGraphicsView to QWebEngineView. Already there are QMLs written for tool bar and other related functions like highlight list, annotations list, searchilist etc

    Now I have to include those QML components in the WebEngineView QML.

  16. #16
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,359
    Thanks
    3
    Thanked 5,015 Times in 4,792 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: How to set QWebEngineView on QQuickView

    Quote Originally Posted by ejoshva View Post
    I am porting from QGraphicsView to QWebEngineView.
    Yes, we already know that. And that's actually the only thing we know. But what are you porting?

    Now I have to include those QML components in the WebEngineView QML.
    What do you mean that you have to include them in WebEngineView? Did you implement them in HTML? What do you use QML for?
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  17. #17
    Join Date
    Feb 2015
    Posts
    185
    Thanks
    5
    Qt products
    Qt5
    Platforms
    MacOS X Windows

    Default Re: How to set QWebEngineView on QQuickView

    What I am porting is actually a e-book reader (where in each page will be html/xhtml).

    The page is displayed with WebEngineView, tool bar is super imposed on the WebEngineView.
    The images for each functions like highlights, annotations, library etc are images on the tool bar. Onclick of the image, the onlick event is captured in corresponding QML component and respective functions in CPP file is called to process them.

  18. #18
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,359
    Thanks
    3
    Thanked 5,015 Times in 4,792 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: How to set QWebEngineView on QQuickView

    I still fail to see what you are using QML for.
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  19. #19
    Join Date
    Feb 2015
    Posts
    185
    Thanks
    5
    Qt products
    Qt5
    Platforms
    MacOS X Windows

    Default Re: How to set QWebEngineView on QQuickView

    QML is used to display tool bar , list box etc which will be superimposed on the QWebEngineView.

    QML basically acts like an intermediate between the user input( like mouse onlick event) and the QWebEngineView.

    Qt Code:
    1. WebEngineView::WebEngineView()
    2. {
    3. QQmlEngine engine;
    4. QQmlContext *objectContext = new QQmlContext(engine.rootContext());
    5. objectContext->setContextProperty("we",this);
    6.  
    7. QQmlComponent component(&engine);
    8. component.loadUrl(QUrl("qrc:/ToolBar.qml"));
    9.  
    10. QObject *object = component.create(objectContext);
    11.  
    12. this->setUrl(QUrl("http://www.google.co.in"));
    13.  
    14. }
    To copy to clipboard, switch view to plain text mode 

    In the above code, I have set the Url for the QWebEngineView.
    I want to display the toolbar using the QML (QML component) over this QWebEngineView page. (just like adding layers in photoshop)

  20. #20
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,359
    Thanks
    3
    Thanked 5,015 Times in 4,792 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: How to set QWebEngineView on QQuickView

    Your above code makes no sense, you create a local qml engine that immediately goes out of scope.

    If you want to super-impose two qml objects then position them in the same area:

    javascript Code:
    1. Item {
    2. WebEngineView {
    3. anchors.fill: parent
    4. }
    5.  
    6. ReaderToolBar {
    7. anchors: { left: parent.left; right: parent.right; top: parent.top }
    8. }
    9.  
    10. }
    To copy to clipboard, switch view to plain text mode 
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


Similar Threads

  1. Loading QDeclarativeView in QWebEngineView
    By ejoshva in forum Newbie
    Replies: 8
    Last Post: 7th May 2015, 10:38
  2. Replies: 8
    Last Post: 23rd April 2015, 13:17
  3. QQuickView or QQmlApplicationEngine or QQuickWidget
    By ustulation in forum Qt Quick
    Replies: 0
    Last Post: 18th January 2015, 14:16
  4. Repaint a QML Scene (QQuickView)
    By alizadeh91 in forum Qt Programming
    Replies: 0
    Last Post: 23rd July 2013, 10:54
  5. Set fixed window size with QQuickView
    By cristeab in forum Qt Quick
    Replies: 1
    Last Post: 31st January 2013, 11:25

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.