Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. Mobile and Embedded
  4. Painting App
Forum Updated to NodeBB v4.3 + New Features

Painting App

Scheduled Pinned Locked Moved Unsolved Mobile and Embedded
14 Posts 3 Posters 4.3k 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.
  • Sierra117S Offline
    Sierra117S Offline
    Sierra117
    wrote on last edited by
    #1

    Hi guys,

    I'm trying to build a painting app for my thesis that would be more "intuitive". I was introduced to Qt recently and I like it quite a lot, especially how it's cross-platform all using C++ (and QML if one wants).

    However, even though I'm a computer science graduate, I've always had a love-hate relationship with programming. I understand conceptually a lot of stuff but when it comes to writing it down, it's just a nightmare, unless it's visually explained and I have someone to guide me through.

    So I have this paintig app I'm trying to make. I was able to do so in QML because that's not even close to hard (still took me a long time ... ) but apparently QML's performance is pretty bad. So I'm trying to do it in C++. I know how events and all work conceptually, but in code I can't seem to make sense of it. To compound the problem, older examples don't work in newer versions of Qt. For example, Finger Paint from Qt 4.8 is the only one I found that makes use of touch to paint, but it doesn't compile nor can I seem to implement whatever I learned from it in the current version of Qt.

    I can certainly continue using mouse events instead of touch for the painting. I have one of those running, but what I want to do is make the painting more realistic. First by making the brush size dynamic (based on finger pressure) without using pressure-sensitive touchscreens and second by more realistic paint behaviour.

    So the solution to the first problem I thought of was calculating the shape of the contact area of the finger on the screen. The higher the pressure, the larger the brush size. Here is why I can't use mouse gestures because mouse is binary. I was able to find some way to calculate this in Qt but I can't find it anymore so I'm wondering if I made a mistake. I found some reference to do so in Android and Windows Phone as well. But I have no Android experience (only some Java experience) and I have a Windows Phone but I can't ask others to test without physically giving them my phone.

    For the paint behaviour, I found a few good research papers but considering I'm not even able to implement touch properly, I'm gonna leave that alone for now. But the basic idea would be to make a couple of layers of canvas that would store information like pigments and water and then somehow manipulate them to give watercolour behaviour, for example. But yeah ... if I haven't already said it, I'll say it now - I'm terrible at programming.

    So basically I need help first with just understanding how to implement this QTouchEvent Class | Qt GUI 5.6[^]. As aforementioned, I understand a high-level overview of how it works, but things like "To receive touch events, widgets have to have the Qt::WA_AcceptTouchEvents attribute set" leave me "lost at sea".

    I know it's probably very easy and all, but for me who just doesn't get a lot of things at first or a hundredth time especially in programming, it's pretty demoralising when the more I read and try to learn the more lost I get.

    Well, that's it for now. Thanks!

    1 Reply Last reply
    0
    • jsulmJ Offline
      jsulmJ Offline
      jsulm
      Lifetime Qt Champion
      wrote on last edited by
      #2

      Hi!
      You can set that attribute via

      QWidget::setAttribute() see http://doc.qt.io/qt-5/qwidget.html#setAttribute
      

      https://forum.qt.io/topic/113070/qt-code-of-conduct

      1 Reply Last reply
      0
      • SGaistS Offline
        SGaistS Offline
        SGaist
        Lifetime Qt Champion
        wrote on last edited by
        #3

        Hi and welcome to devnet,

        Out of curiosity, why write an application from scratch on that subject rather than taking one that exists and improve it ? Like Krita for example.

        Interested in AI ? www.idiap.ch
        Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

        Sierra117S 1 Reply Last reply
        0
        • SGaistS SGaist

          Hi and welcome to devnet,

          Out of curiosity, why write an application from scratch on that subject rather than taking one that exists and improve it ? Like Krita for example.

          Sierra117S Offline
          Sierra117S Offline
          Sierra117
          wrote on last edited by
          #4

          @SGaist Hey, thanks!

          Well, I don't really have much experience in extending or modifying open source projects. Most of the times I've tried to compile such programs, they end up with some error and don't compile. I really need someone to guide me through it because stuff in the tech world happens so fast you're left catching up the entire time (at least I am haha).

          I mean, if I use Krita, what would I need to run it on mobile devices?

          Also, my main concern is, is it possible to get the size or shape of the finger on the touchscreen? As in, how much skin is in contact with the screen.

          1 Reply Last reply
          0
          • SGaistS Offline
            SGaistS Offline
            SGaist
            Lifetime Qt Champion
            wrote on last edited by
            #5

            The usual way when having trouble is to contact the authors of the application you'd like to hack on generally through the mailing list of the project or directly to the author if it's a pretty small project.

            Most projects currently have a how to for new contributors.

            Size and shape of the finger ? Highly unlikely, you will rather get a list of pressure points.

            Interested in AI ? www.idiap.ch
            Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

            Sierra117S 1 Reply Last reply
            0
            • SGaistS SGaist

              The usual way when having trouble is to contact the authors of the application you'd like to hack on generally through the mailing list of the project or directly to the author if it's a pretty small project.

              Most projects currently have a how to for new contributors.

              Size and shape of the finger ? Highly unlikely, you will rather get a list of pressure points.

              Sierra117S Offline
              Sierra117S Offline
              Sierra117
              wrote on last edited by
              #6

              @SGaist I'll try to contact them!

              Regarding the finger shape, I mean just the shape of how much skin is touching the screen. I think me using "shape of finger" was a bit misleading. Correct me if I'm wrong, but I imagine that in order to get the point of touch, the screen will more or less detect an approximate shape that is in contact with the screen and then find the approx middle to get the touch point, right? I've read on some forums like SO and some Android blogs that it's possible in both iOS and Android (in Android you can just use the getSize function to get that size/shape but iOS is a bit trickier). If there's some way to get that very low-level operation of getting the touch point shape or size, that would be great. Hope that made sense lol.

              1 Reply Last reply
              0
              • SGaistS Offline
                SGaistS Offline
                SGaist
                Lifetime Qt Champion
                wrote on last edited by
                #7

                Do you mean something like UITouch for iOS ?

                Interested in AI ? www.idiap.ch
                Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

                Sierra117S 1 Reply Last reply
                0
                • SGaistS SGaist

                  Do you mean something like UITouch for iOS ?

                  Sierra117S Offline
                  Sierra117S Offline
                  Sierra117
                  wrote on last edited by
                  #8

                  @SGaist Exactly! "The approximate radius of the touch" <-- this is exactly what I'm looking for! I believe Android also has it with the getSize() function => https://developer.android.com/reference/android/view/MotionEvent.html#getSize()

                  1 Reply Last reply
                  0
                  • SGaistS Offline
                    SGaistS Offline
                    SGaist
                    Lifetime Qt Champion
                    wrote on last edited by
                    #9

                    For that part you'll have to write a bit of native code.

                    Interested in AI ? www.idiap.ch
                    Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

                    Sierra117S 1 Reply Last reply
                    0
                    • SGaistS SGaist

                      For that part you'll have to write a bit of native code.

                      Sierra117S Offline
                      Sierra117S Offline
                      Sierra117
                      wrote on last edited by
                      #10

                      @SGaist I'm up for that. But I don't even know where to start as I'm unable to find anything in documentation or elsewhere. Please do guide me if possible.

                      1 Reply Last reply
                      0
                      • SGaistS Offline
                        SGaistS Offline
                        SGaist
                        Lifetime Qt Champion
                        wrote on last edited by
                        #11

                        About which part ? How to integrate native API with your application ?

                        Interested in AI ? www.idiap.ch
                        Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

                        Sierra117S 1 Reply Last reply
                        0
                        • SGaistS SGaist

                          About which part ? How to integrate native API with your application ?

                          Sierra117S Offline
                          Sierra117S Offline
                          Sierra117
                          wrote on last edited by
                          #12

                          @SGaist I suppose so. Just what I need to do in order to write code that will manage to get all those touch coordinates that are not available through the qt c++ class. I'm assuming I'll have to include standard libraries or something like that, but even then, I can't think of how it would be possible which is why I'm asking.

                          On the other hand a friend advised using the QML touchpoint property called "area" (I strangely forgot about this property entirely, whose existence was what prompted me to do this project) by connecting it via slot to C++ drawing code. The area property is apparently the rectangle at the point of touch so I think this is exactly what I'm looking for, no? I do wonder about performance though, considering how drawing is slow in QML so maybe the points that are detected are slow too (as I would trace a curve with the finger).

                          1 Reply Last reply
                          0
                          • SGaistS Offline
                            SGaistS Offline
                            SGaist
                            Lifetime Qt Champion
                            wrote on last edited by
                            #13

                            For the iOS part, you can take a look a the QtMacExtras module, there you have code that uses Objective-C++ to make these APIs available to C++ application.

                            Interested in AI ? www.idiap.ch
                            Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

                            1 Reply Last reply
                            0
                            • Sierra117S Offline
                              Sierra117S Offline
                              Sierra117
                              wrote on last edited by Sierra117
                              #14

                              Well I've been trying with QML still as my friend reminded me of the "area" property that holds information like the width and height of the rectangle corresponding to the touchpoint. Yet I only get a zero reading. Since I have a Windows Phone and there is no debugger in Qt for it that I'm aware of, I'm writing the values to a textarea.

                              Window {
                                  visible: true
                                  width: 500
                                  height: 500
                                  id: root
                              
                                  Row {
                                      id: tools
                              
                                      Button {
                                          id: clear
                                          text: "Clear"
                                          onClicked: {
                                              canvas.clear()
                                          }
                                      }
                              
                                      TextArea {
                                          id: text
                                      }
                              
                              // Also been trying to test the touch.area.width with this rectangle - idea was to create this rectangle when a touch is registered and the dimensions of the rectangle would be those of the size of the touch. Keeping it simple by using just width. But still, didn't work.
                                      Rectangle {
                                          id: touchbox
                                          x: 100
                                          y: 100
                                          color: "red"
                                          width: canvas.w
                                          height: canvas.w
                                      }
                                  }
                              
                                  Canvas {
                                      id: canvas
                                      anchors.top: tools.bottom
                                      width: 1000
                                      height: 1500
                                      property int lastX: 0
                                      property int lastY: 0
                                      property int lastX2: 0
                                      property int lastY2: 0
                              
                                      property int w: 0
                                      property int h: 0
                              
                                      property int thickness: 0
                              
                                      function clear() {
                                          var ctx = getContext("2d")
                                          ctx.reset()
                                          canvas.requestPaint()
                                          mouse.clear()
                                      }
                              
                                      onPaint: {
                                          var ctx = getContext("2d")
                                          ctx.lineWidth = 10 //(trying to make touch1.area.width or height work here)
                                          ctx.lineJoin = ctx.lineCap = 'round';
                                          ctx.strokeStyle = color.red
                                          ctx.beginPath()
                                          ctx.moveTo(lastX, lastY)
                                          lastX2 = touch2.x
                                          lastY2 = touch2.y
                                          lastX = touch1.x
                                          lastY = touch1.y
                              
                                          ctx.lineTo(lastX, lastY)
                                          ctx.stroke()
                                      }
                              
                                      //! [0]
                                      MultiPointTouchArea {
                                          id: toucharea
                                          anchors.fill: parent
                                          minimumTouchPoints: 1
                                          maximumTouchPoints: 2
                                          touchPoints: [
                                              TouchPoint { id: touch1 },
                                              TouchPoint { id: touch2 }
                                          ]
                                          onPressed:
                                          {
                                              canvas.lastX = touch1.x
                                              canvas.lastY = touch1.y
                              
                                              canvas.lastX2 = touch2.x
                                              canvas.lastY2 = touch2.y
                              
                                              text.append(touch1.area.height.toString())
                                              text.textColor = "red"
                              
                                              w = touch1.area.width
                                              h = touch1.area.height
                                          }
                                          onTouchUpdated:
                                          {
                                              canvas.requestPaint()
                                          }
                                      }
                              
                              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