canvas-controller/main.qml

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtWebSockets 1.0

import "./simplify.js" as Simplify

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    WebSocket {
        id: socket
        url: "wss://ws.especificosba.com.ar"
        onTextMessageReceived: {
            console.log("\nReceived message: " + message)
        }
        onStatusChanged: if (socket.status == WebSocket.Error) {
                             console.log("Error: " + socket.errorString)
                         } else if (socket.status == WebSocket.Open) {
                             socket.sendTextMessage("Hello World")
                         } else if (socket.status == WebSocket.Closed) {
                             console.log("\nSocket closed")
                         }
        active: true
    }

    Item {
        id: item1
        width: 640
        height: 480
        //property alias gridLayout1: gridLayout1
        property alias button4: button4
        property alias mouseArea1: mouseArea1
        property alias button2: button2
        property alias button3: button3
        property alias button1: button1
        property int curImage: 1
        anchors.fill: parent

        onCurImageChanged: {
            canvas.change_image("EBA", curImage)
        }

        Column {
            id: canvasCol
            spacing: 6
            anchors.fill: parent
            anchors.topMargin: 12
            width: 400

            Canvas {
            id: canvas
            antialiasing: true
            renderTarget: Canvas.Image

            property color strokeStyle: Qt.darker(fillStyle, 1.2)
            property color fillStyle: "#6400aa"

            property int lineWidth: 2
            property real px: width / 2
            property real py: height / 2 + 10
            property real alpha: 1.0
            property variant points_array: []
            property string curImageUrl: "https://plataforma.especificosba.com.ar/diapo/EBA/1.png"
            width: 300
            height: 300

            onPaint: paint_canvas()
            onLineWidthChanged: requestPaint()
            onImageLoaded: requestPaint()

            function start_path() {
                points_array.push([])
            }

            function finish_path() {
                points_array[points_array.length - 1] = Simplify.simplify(
                            points_array[points_array.length - 1], 3)
                requestPaint()
                //ws.send()..
            }

            function change_image(pdf, number) {
                curImageUrl = "https://plataforma.especificosba.com.ar/diapo/"
                        + pdf + "/" + number + ".png"
                requestPaint()
            }

            function add_point(p) {
                points_array[points_array.length - 1].push(p)
                requestPaint()
            }

            function paint_canvas() {
                var curColor = '#ff0000'
                var ctx = canvas.getContext("2d")
                canvas.loadImage(curImageUrl)
                if (canvas.isImageLoaded(curImageUrl)) {
                    ctx.drawImage(curImageUrl, 0, 0, canvas.width,
                                  canvas.height)
                }
                ctx.lineCap = 'square'
                ctx.lineWidth = 2
                ctx.strokeStyle = curColor

                ctx.beginPath()
                var i = 0, j = 0
                for (j = 0; j < points_array.length; j++) {
                    var points = points_array[j]
                    ctx.moveTo(points[0].x, points[0].y)
                    for (i = 0; i < points.length - 1; i++) {
                        ctx.moveTo(points[i].x, points[i].y)
                        ctx.lineTo(points[i + 1].x, points[i + 1].y)
                    }
                }
                ctx.stroke()
            }
        }

            MouseArea {
            id: mouseArea1
            x: 0
            y: 0
            width: canvas.width
            height: canvas.height
            onPressed: {
                if (!socket.active)
                    return
                canvas.start_path()
            }
            onPositionChanged: {
                if (!socket.active)
                    return

                canvas.add_point({
                                     x: mouse.x,
                                     y: mouse.y
                                 })
            }
            onReleased: {
                if (!socket.active)
                    return
                canvas.finish_path()
            }
        }
        }
        Column {
            id: columnLayout1
            spacing: 6
            anchors.fill: parent
            anchors.leftMargin: canvasCol.right

            Button {
                id: button2
                text: qsTr("Anterior")
                enabled: socket.active
                onClicked: item1.curImage = Math.max(item1.curImage - 1, 1)
            }

            Button {
                id: button1
                text: qsTr("Siguiente")
                enabled: socket.active
                onClicked: item1.curImage = Math.min(item1.curImage + 1, 5)
            }

            Button {
                id: button4
                text: qsTr("Limpiar")
                enabled: socket.active
            }
        }

        Column {
            id: columnLayout2
            x: 337
            y: 108
            width: 100
            height: 100

            Button {
                id: button3
                text: qsTr("Break")
                isDefault: false
                checkable: false
                onClicked: canvas.paint_canvas()
            }
        }
    }
}