Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. C++ to change QML object properties
Forum Updated to NodeBB v4.3 + New Features

C++ to change QML object properties

Scheduled Pinned Locked Moved QML and Qt Quick
57 Posts 4 Posters 44.4k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • V Offline
    V Offline
    Vignes
    wrote on last edited by
    #29

    How do I use access mouse right click? I tried the following without success:
    @
    onClicked: {if(mouse.button == Qt.RightButton){if(menu.opacity == 0){opacity_1.running = true;}}}
    @
    and
    @
    onPressed: {if(mouse.button == Qt.RightButton){if(menu.opacity == 0){opacity_1.running = true;}}}
    @

    1 Reply Last reply
    0
    • V Offline
      V Offline
      Vignes
      wrote on last edited by
      #30

      Could you tell me how to set-up Git in QtCreator Option > Version Control: Configuration, Miscellaneous, Gitk and Repository Browser ?

      Thank you

      1 Reply Last reply
      0
      • V Offline
        V Offline
        Vignes
        wrote on last edited by
        #31

        What am I doing wrong here :
        I have included <QScreen>
        @
        QScreen *screen;
        qDebug() << "Information for screen:" << screen->name();
        qDebug() << " Available geometry:" << screen->availableGeometry().x() << screen->availableGeometry().y() << screen->availableGeometry().width() << "x" << screen->availableGeometry().height();
        qDebug() << " Available size:" << screen->availableSize().width() << "x" << screen->availableSize().height();
        qDebug() << " Available virtual geometry:" << screen->availableVirtualGeometry().x() << screen->availableVirtualGeometry().y() << screen->availableVirtualGeometry().width() << "x" << screen->availableVirtualGeometry().height();
        qDebug() << " Available virtual size:" << screen->availableVirtualSize().width() << "x" << screen->availableVirtualSize().height();
        qDebug() << " Depth:" << screen->depth() << "bits";
        qDebug() << " Geometry:" << screen->geometry().x() << screen->geometry().y() << screen->geometry().width() << "x" << screen->geometry().height();
        qDebug() << " Logical DPI:" << screen->logicalDotsPerInch();
        qDebug() << " Logical DPI X:" << screen->logicalDotsPerInchX();
        qDebug() << " Logical DPI Y:" << screen->logicalDotsPerInchY();
        @
        Help please

        1 Reply Last reply
        0
        • p3c0P Offline
          p3c0P Offline
          p3c0
          Moderators
          wrote on last edited by
          #32

          [quote author="Vignes" date="1406045743"]how do I fix the following issue
          @
          MouseArea {
          id: oneClick
          anchors.fill: parent
          onClicked: opacity_1.running = true;
          }
          MouseArea {
          id: twoClick
          anchors.fill: parent
          onDoubleClicked: window1.callCpp()
          }
          @

          Thank you[/quote]

          What is the problem ? You need to elaborate.

          bq. onClicked: {if(mouse.button == Qt.RightButton){if(menu.opacity == 0){opacity_1.running = true;}}}

          set acceptedButtons: Qt.LeftButton | Qt.RightButton for MouseArea

          bq.
          QScreen *screen;
          qDebug() << "Information for screen:" << screen->name();
          .
          .
          .

          @
          QScreen *screen = QGuiApplication::primaryScreen();
          qDebug() << screen->availableGeometry();
          @

          157

          1 Reply Last reply
          0
          • p3c0P Offline
            p3c0P Offline
            p3c0
            Moderators
            wrote on last edited by
            #33

            [quote author="Vignes" date="1406047246"]Could you tell me how to set-up Git in QtCreator Option > Version Control: Configuration, Miscellaneous, Gitk and Repository Browser ?

            Thank you[/quote]

            May be "this":https://qt-project.org/doc/qtcreator-2.8/creator-version-control.html#using-version-control-systems and a youtube tutorial "here":http://www.youtube.com/watch?v=3Dr05-bFMbw help you. I have never used git from Qt Creator, so can't help you that much on it. I normally do it through command line.

            157

            1 Reply Last reply
            0
            • V Offline
              V Offline
              Vignes
              wrote on last edited by
              #34

              I tried to add two mouse area function on main window: double clicked and a clicked like below:
              @
              MouseArea {
              id: oneClick
              anchors.fill: parent
              onClicked: opacity_1.running = true;
              }
              MouseArea {
              id: twoClick
              anchors.fill: parent
              onDoubleClicked: window1.callCpp()
              }
              @

              • Here only the last muse area function works. So I tried merging two and it works :
                @
                MouseArea {
                id: windowClicks
                anchors.fill: parent
                onClicked: if(menu.opacity == 0){opacity_1.running = true;}{opacity_1.running = true;}}}
                onDoubleClicked: window1.callCpp()
                }
                @

              I wanted a mouse area function for right mouse clicked, for this I tried the bellow:
              @
              onPressed: {if(mouse.button == Qt.RightButton){if(menu.opacity == 0){opacity_1.running = true;}}}
              @

              • Here it did not work, but if I change the "Qt.RightButton" to "Qt.LeftButton" it works

              Is there any other way to add multiple mouse event to one area?

              How do I use the Right click to run a function?

              Is it possible to add or modify or remove mouse event in cpp?

              Thanks

              1 Reply Last reply
              0
              • p3c0P Offline
                p3c0P Offline
                p3c0
                Moderators
                wrote on last edited by
                #35

                bq. Is there any other way to add multiple mouse event to one area?

                Yes. You just did it by adding onClicked and onDoubleClicked event handler to mousearea

                bq. How do I use the Right click to run a function?

                As I said earlier you need to set acceptedButtons
                @
                MouseArea {
                id: twoClick
                anchors.fill: parent
                acceptedButtons: Qt.LeftButton | Qt.RightButton
                onClicked: {
                if(mouse.button==Qt.RightButton) {
                console.log("Right Click")
                }
                }
                }
                @

                bq. Is it possible to add or modify or remove mouse event in cpp?

                You can set enabled property from C++ by finding child as shown earlier.

                157

                1 Reply Last reply
                0
                • V Offline
                  V Offline
                  Vignes
                  wrote on last edited by
                  #36

                  I want to open button that only opens "png" image file or "yuv or bin" video file and display it on fixed size stage (600 x 400).

                  How do I add open function to a QML item?

                  What library should I use?

                  Is canvas best for fast video processing or image processing (e.g. splitting, applying filters .. ) ?

                  Thank you

                  1 Reply Last reply
                  0
                  • p3c0P Offline
                    p3c0P Offline
                    p3c0
                    Moderators
                    wrote on last edited by
                    #37

                    bq. How do I add open function to a QML item?

                    You can use "FileDialog":http://qt-project.org/doc/qt-5/qml-qtquick-dialogs-filedialog.html to allow user to select a file and in return you get the file path. You can set "nameFilters":http://qt-project.org/doc/qt-5/qml-qtquick-dialogs-filedialog.html#nameFilters-prop to filter what kind of file you want to show.
                    Then after getting the file path of for eg. image you can set it to "Image":http://qt-project.org/doc/qt-5/qml-qtquick-image.html element which will display the image.

                    bq. Is canvas best for fast video processing or image processing (e.g. splitting, applying filters .. ) ?

                    I have not used canvas so can't comment on that. May be someone with greater knowledge would.
                    You can check "qmlvideofx":http://qt-project.org/doc/qt-5/qtmultimedia-video-qmlvideofx-example.html if it might help you in applying effects to videos.

                    157

                    1 Reply Last reply
                    0
                    • V Offline
                      V Offline
                      Vignes
                      wrote on last edited by
                      #38

                      One of the reason I chose Qt QML is "qmlvideofx" player example, But it uses "QtMultimedia 5.0" and it doesn't support "yuv" format. In terms of understanding the QML and Cpp, I'm way way off.

                      @
                      FileDialog {
                      id: fileDialog
                      title: "Please choose a file"
                      nameFilters: ["Image File (*.png *.jpg *.bmp)"]
                      onAccepted: {
                      console.log("You chose: " + fileDialog.fileUrls)
                      }
                      onRejected: {
                      console.log("Canceled")
                      }
                      }

                      Rectangle {
                          id: button
                          width: 100
                          height: 50
                          color: "blue"
                          anchors.right: parent.right
                          anchors.top: parent.top
                      
                      
                          MouseArea {
                              anchors.fill: parent
                              onClicked: {
                                  fileDialog.visible = true;
                              }
                          }
                      }
                      
                      Image {
                          id: imageViewer
                          source: fileDialog.fileUrls
                          width: parent.width
                          height: parent.height/0.8
                          anchors.bottom: parent.bottom
                          anchors.left: parent.left
                      }
                      

                      @

                      How do I pass the file Urls to image source, because above code didn't work?

                      Thanks

                      1 Reply Last reply
                      0
                      • p3c0P Offline
                        p3c0P Offline
                        p3c0
                        Moderators
                        wrote on last edited by
                        #39

                        bq. In terms of understanding the QML and Cpp, I’m way way off

                        I'd suggest you to read the concepts of QML and C++ integration instead of just directly going for examples.

                        Going to the code, Image element just displays a single image at a time and hence it won't take URL's but just a single URL.
                        So,
                        @
                        FileDialog {
                        id: fileDialog
                        title: "Please choose a file"
                        nameFilters: ["Image File (*.png *.jpg *.bmp)"]
                        onAccepted: {
                        console.log("You chose: " + fileDialog.fileUrls)
                        imageViewer.source = fileDialog.fileUrls[0]
                        }
                        onRejected: {
                        console.log("Canceled")
                        }
                        }

                        Image {
                        id: imageViewer
                        width: parent.width
                        height: parent.height/0.8
                        anchors.bottom: parent.bottom
                        anchors.left: parent.left
                        }
                        @

                        157

                        1 Reply Last reply
                        0
                        • V Offline
                          V Offline
                          Vignes
                          wrote on last edited by
                          #40

                          I red "Integrating QML and C++" in the start and I red it again. Now it made more sense, because I have done few example and as I red I could connect them. However, I still need to do more to understand the where and what fits e.g. "Separate the user interface code from the application logic code, by implementing the former with QML and JavaScript within QML documents, and the latter with C++". With your help, I'll understand it.

                          Now I have two issues in the following code
                          @
                          //Button.qml
                          import QtQuick 2.2

                          Rectangle {
                          id: btn
                          width: 100
                          height: 62
                          border.width: 2
                          Text{
                          id: btnLabel
                          anchors.centerIn: parent
                          text: btn.label
                          }

                          property string label: "Button Label"
                          property color newColor: "lightblue"
                          property color onHoverColor: "gold"
                          property color borderColor: "black"
                          property string gradColor : newColor
                          property bool gradOn : false
                          
                          signal buttonClick()
                          onButtonClick: {
                              console.log(btnLabel.text + " clicked" )
                          }
                          
                          MouseArea {
                              id: btnMouseArea
                              anchors.fill: parent
                              onClicked: buttonClick()
                              hoverEnabled: true
                              onEntered: {parent.border.color = onHoverColor; gradColor = Qt.darker(gradColor, 1.1)}
                              onExited:  {parent.border.color = borderColor; gradColor = Qt.darker(gradColor, 0.9)}
                          

                          // onPressed: {
                          // console.log("pressed", pressed)
                          // gradColor = Qt.darker(gradColor, 1.5)
                          // }
                          // onReleased: {
                          //// gradColor = Qt.darker(gradColor, 2/3)
                          // gradColor = newColor
                          // }
                          }
                          //determines the color of the button by using the conditional operator
                          color: btnMouseArea.pressed ? Qt.darker(newColor, 1.5) : newColor

                          gradColor: btnMouseArea.pressed ? Qt.darker(newColor, 1.5) : newColor
                          
                          gradient: Gradient {
                              GradientStop { position: 0.0; color: gradColor }
                              GradientStop { position: 0.17; color: "#6A6D6A" }
                              GradientStop { position: 0.77; color: gradColor }
                              GradientStop { position: 1.0; color: "#6A6D6A" }
                          }
                          

                          }
                          @

                          This code: "color: btnMouseArea.pressed ? Qt.darker(newColor, 1.5) : newColor" works but This code: "gradColor: btnMouseArea.pressed ? Qt.darker(newColor, 1.5) : newColor" doesn't works. Why?

                          I was trying to put a if statement to around gradient: to switch on and off using "gradOn" custom property. It is not allowed. Any other way of doing this?

                          Thank you

                          1 Reply Last reply
                          0
                          • p3c0P Offline
                            p3c0P Offline
                            p3c0
                            Moderators
                            wrote on last edited by
                            #41

                            bq. This code: “color: btnMouseArea.pressed ? Qt.darker(newColor, 1.5) : newColor” works but This code: “gradColor: btnMouseArea.pressed ? Qt.darker(newColor, 1.5) : newColor” doesn’t works. Why?

                            Since you are assigning gradColor a value twice, remove the latter one. You can assign an expression even when you declare a property.
                            @
                            property string gradColor : btnMouseArea.pressed ? Qt.darker(newColor, 1.5) : newColor

                            @

                            bq. I was trying to put a if statement to around gradient: to switch on and off using “gradOn” custom property. It is not allowed. Any other way of doing this?

                            Yes, AFAIK but you must create Gradient outside.
                            @
                            Gradient {
                            id: gradient
                            GradientStop { position: 0.0; color: gradColor }
                            GradientStop { position: 0.17; color: "#6A6D6A" }
                            GradientStop { position: 0.77; color: gradColor }
                            GradientStop { position: 1.0; color: "#6A6D6A" }
                            }
                            gradient: if(gradOn) { return gradient } else { return undefined }
                            @

                            I'd prefer a ternary one here.

                            157

                            1 Reply Last reply
                            0
                            • V Offline
                              V Offline
                              Vignes
                              wrote on last edited by
                              #42

                              I tried both, none of them are working for me (I cleaned and build it several times).

                              @property string gradColor : btnMouseArea.pressed ? Qt.darker(newColor, 1.5) : newColor@ has no complain, but doesn't darken the color

                              @gradient: if(gradOn)...@

                              complain with underline and doesn't build

                              1 Reply Last reply
                              0
                              • p3c0P Offline
                                p3c0P Offline
                                p3c0
                                Moderators
                                wrote on last edited by
                                #43

                                See if this works,
                                @
                                Item {
                                id: item
                                width: 200
                                height: 200
                                property bool gradOn: false
                                property color newColor: "red"
                                property string gradColor : mousearea.pressed ? Qt.darker(newColor, 1.5) : newColor

                                Rectangle {
                                    color: "red"
                                    anchors.fill: parent
                                    MouseArea {
                                        id: mousearea
                                        anchors.fill: parent
                                        onClicked: { gradOn = true }
                                    }
                                
                                    Gradient {
                                        id: gradient
                                        GradientStop { position: 0.0; color: gradColor }
                                        GradientStop { position: 0.17; color: "#6A6D6A" }
                                        GradientStop { position: 0.77; color: gradColor }
                                        GradientStop { position: 1.0; color: "#6A6D6A" }
                                    }
                                    gradient: if(gradOn) { return gradient } else { return undefined }
                                }
                                

                                }
                                @

                                157

                                1 Reply Last reply
                                0
                                • V Offline
                                  V Offline
                                  Vignes
                                  wrote on last edited by
                                  #44

                                  Yes this works, thanks, I thought "Rectangle" Inherits every things from "Item" and add its' additional properties.

                                  Is "mousearea" has ".entered" event (@gradColor : mousearea.entered ? Qt.darker(newColor, 1.5) : newColor@)

                                  Now the important part. I need to read a compressed file and create an Image on the screen. This image will be made of square block region of 64, 31, 16, 8, 4 pixels. When each square is clicked, an information window will display.

                                  I found these libraries can create pixel: #include <QGraphicsScene>, #include <QtOpenGL>, #include <QQuickImageProvider> and #include <QPainter>.

                                  But I don't know which one will be best for me (speed of image creation is very important and easy to implement)?

                                  The number of square block sizes differ from picture to picture. So is It easier to create from Cpp or QML ?

                                  Thank you

                                  1 Reply Last reply
                                  0
                                  • p3c0P Offline
                                    p3c0P Offline
                                    p3c0
                                    Moderators
                                    wrote on last edited by
                                    #45

                                    bq. Is “mousearea” has “.entered” event

                                    That won't work. AFAIK, you can use "containsMouse":http://qt-project.org/doc/qt-5/qml-qtquick-mousearea.html#containsMouse-prop to do that provided you must set hoverEnabled to true for MouseArea

                                    bq. I need to read a compressed file and create an Image on the screen

                                    Do you mean jpg, png etc.. ? And do you mean you have those images and you have to just set them using Image element with size you mentioned? You can have MouseArea for Image element.

                                    Since you are using QML, there would be no use of QGraphicsView, Scene etc..
                                    QQuickImageProvider allows you to provide an image from C++ to qml. Check its documentation for more details.
                                    Using QPainter you can draw acording to you needs, since you are using QML, to use QPainter you will have to use QQuickPaintedItem, override paint method and draw your contents. Have a look at it's docs for a basic idea.

                                    bq. But I don’t know which one will be best for me (speed of image creation is very important and easy to implement)?

                                    Do you mean you are creating your own image ? or you want to set an existing image in a QML

                                    bq. The number of square block sizes differ from picture to picture. So is It easier to create from Cpp or QML ?

                                    What do you intend to use for square blocks, Image element ?

                                    The best way IMO to help you would be if you would post codes like previous of what you done so that we get a clear understanding of what you intend to do.

                                    157

                                    1 Reply Last reply
                                    0
                                    • V Offline
                                      V Offline
                                      Vignes
                                      wrote on last edited by
                                      #46

                                      The images are from a compress video clip similar to H.264, but not same and file format is .BIN. Each frame in the compressed video is processed by splitting it into square blocks and doing several processes.

                                      I need to read this bin file, then extract a frame or picture at given point, then display its' compression processes details. E.g. the first picture in the compressed video is on the screen. This will be split into a combination of block regions like complex grids. When each block is clicked, a popup window will open next to it and display details of the compression process was done to it.

                                      I need to play this video file at the highest possible frame rate. I believe QML uses OpenGL. I also need to extract picture and display and able to play .YUV format video.

                                      The video file or picture size will go up to 4K resolution. If I'm successful, with your help I'll. Qt QML based next generation compressed video player with analytical tools and video editor will be built.

                                      (I may need to switch the display into Luma, Croma mode, which is filtering process.)

                                      1 Reply Last reply
                                      0
                                      • p3c0P Offline
                                        p3c0P Offline
                                        p3c0
                                        Moderators
                                        wrote on last edited by
                                        #47

                                        What i think is you need to do those processing i.e read this bin file, then extract a frame or picture at given point on C++ side and use a Grid element to place these pictures using may be an Image element. QML definitely uses OpenGL.
                                        Sorry, but i have never worked on Video using QML so i can't be useful there. And coming to image i think QML image element can handle that resolution.
                                        May be you should have look at "QtAV":https://github.com/wang-bin/QtAV if its useful.

                                        157

                                        1 Reply Last reply
                                        0
                                        • V Offline
                                          V Offline
                                          Vignes
                                          wrote on last edited by
                                          #48

                                          Hi, I want to detect .bin file on load and call a function in qml. I mange to do the follow code.
                                          @
                                          onAccepted: {
                                          var str = openFile.fileUrl;
                                          var rx = /.bin/;
                                          if(rx.test(str)){
                                          urlCpp(str);
                                          }
                                          else {
                                          imageViewer.source = str;
                                          }
                                          }
                                          @

                                          But I am looking for full QML RegExp reference list. I couldn't locate it on http://qt-project.org/. Could you let me know the url for QML RegExp reference please.
                                          Thank you.

                                          1 Reply Last reply
                                          0

                                          • Login

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Categories
                                          • Recent
                                          • Tags
                                          • Popular
                                          • Users
                                          • Groups
                                          • Search
                                          • Get Qt Extensions
                                          • Unsolved