Painting App

[Sierra117]

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!

[jsulm]

Hi!
You can set that attribute via

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

[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.

[Sierra117]

@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.

[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.

[Sierra117]

@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.

[SGaist]

Do you mean something like UITouch for iOS ?

[Sierra117]

@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()

[SGaist]

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

[Sierra117]

@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.

[SGaist]

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

[Sierra117]

@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).

[SGaist]

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.

[Sierra117]

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()
            }
        }