canvas-controller/main.qml

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtWebSockets 1.0

import "./simplify.js" as Simplify

ApplicationWindow {
    id: aw
    visible: true
    width: 800
    height: 480
    title: qsTr("Hello World")
    color: "#fffffe"

    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: parent.width
        height: parent.height

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

        Grid {

            id: grid1
            width: parent.width
            height: parent.height
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            anchors.top: parent.top
            anchors.left: parent.left
            columns: 4
            spacing: 4

            Rectangle {
                id: canvasCol
                height: parent.height
                width: height*4/3
                color: aw.color

                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: parent.width
                    height: parent.height

                    onPaint: paint_canvas()
                    onLineWidthChanged: requestPaint()
                    onImageLoaded: {
                        clean_path()
                        requestPaint()
                    }

                    function clean_path() {
                        points_array = []
                        requestPaint()
                        //ws.send()..
                    }

                    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: 15
                width: parent.width - canvasCol.width - parent.spacing*2

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

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

                Button {
                    height:80
                    width:parent.width
                    id: button4
                    text: qsTr("Limpiar")
                    enabled: socket.active
                    onClicked: canvas.clean_path()
                }
                Button {
                    height:80
                    width:parent.width
                    id: button3
                    text: qsTr("Break")
                    isDefault: false
                    checkable: false
                    onClicked: canvas.paint_canvas()
                }
            }
        }
    }
}