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 {
        property int total_slides: 5
        id: socket
        url: "wss://wscasa.especificosba.com.ar"
        onTextMessageReceived: {
            console.log("\nReceived message: " + message)
            var obj = JSON.parse(message)
            switch (obj.type) {
            case "diapo":
                canvas.clean_path()
                item1.curPDF = obj.PDF
                item1.curImage = obj.slide //automagically change_image
                total_slides = obj.total_slides
            }
        }
        function send_obj(obj) {
            sendTextMessage(JSON.stringify(obj))
        }

        function prev_diapo() {
            var curImage = Math.max(item1.curImage - 1, 1)
            send_obj({
                         type: "command",
                         commandtype: "diapo",
                         PDF: item1.curPDF,
                         slide: curImage
                     })
        }

        function next_diapo() {
            var curImage = Math.min(item1.curImage + 1, total_slides)
            send_obj({
                         type: "command",
                         commandtype: "diapo",
                         PDF: item1.curPDF,
                         slide: curImage
                     })
        }
        function clear_path() {
            send_obj({
                         type: "clean"
                     })
            canvas.clean_path()
        }
        function send_drawing(d) {
            send_obj({
                         type: "command",
                         commandtype: "draw",
                         points: d,
                         color: canvas.curColor
                     })
        }

        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
        property string curPDF: "EBA"
        anchors.fill: parent

        onCurPDFChanged: {
            canvas.change_image(curPDF, curImage)
        }

        onCurImageChanged: {
            canvas.change_image(curPDF, 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 string curColor: "#ff0000"

                    property int lineWidth: 3
                    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], 2.2)
                        requestPaint()
                        //normalized to 800x600
                        var ar = points_array[points_array.length - 1].map(
                                    function(el){
                                        return {x: el.x*800/canvas.width, y:el.y*600/canvas.height}
                                    }
                            );
                        socket.send_drawing(ar)
                    }

                    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: socket.prev_diapo()
                }

                Button {
                    height: 80
                    width: parent.width
                    id: button1
                    text: qsTr("Siguiente")
                    enabled: socket.active
                    onClicked: socket.next_diapo()
                }

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