Painting App

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