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: 1280
    height: 720
    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: "command",
                         commandtype: "clean"
                     })
            canvas.clean_path()
        }
        function send_drawing(d) {

            send_obj({
                         type: "command",
                         commandtype: "draw",
                         points: d,
                         color: canvas.curColor
                     })
        }

        onStatusChanged: {
            //FIXME implement
            if (socket.status == WebSocket.Error) {
                console.log("Error: " + socket.errorString)
            } else if (socket.status == WebSocket.Open) {

                /*?*/
            } else if (socket.status == WebSocket.Closed) {
                console.log("\nSocket closed")
            }
        }
        active: true
    }

    Item {
        id: item1
        width: parent.width
        height: parent.height

        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 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()
                    onImageLoaded: {
                        clean_path()
                        requestPaint()
                    }

                    function clean_path() {
                        points_array = []
                        requestPaint()
                    }

                    function start_path() {
                        points_array.push({points:[],color:curColor})
                    }

                    function finish_path() {
                        points_array[points_array.length - 1].points = Simplify.simplify(
                                    points_array[points_array.length - 1].points, 2.2)
                        requestPaint()

                        //normalized to 800x600
                        var ar = points_array[points_array.length - 1].points.map(
                                    function (el) {
                                        return {
                                            x: el.x * 800 / canvas.width,
                                            y: el.y * 600 / canvas.height
                                        }
                                    })
                        while (ar.length > 30) {
                            socket.send_drawing(ar.splice(0,29));
                        }
                        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].points.push(p);
                        if (points_array[points_array.length - 1].length/ 3 > 40){ //FIXME
                            finish_path()
                            start_path()
                            points_array[points_array.length - 1].points.push(p)
                        } else {
                            requestPaint()
                        }

                    }

                    function paint_canvas() {
                        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 = 4
                        ctx.strokeStyle = "#000000"


                        var i = 0, j = 0
                        for (j = 0; j < points_array.length; j++) {
                            var points = points_array[j].points;
                            ctx.strokeStyle= points_array[j].color;
                            ctx.beginPath()
                            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: 10
                width: parent.width - canvasCol.width - parent.spacing * 2
                height: parent.height

                Column {
                    width: parent.width
                    height: parent.height/2
                    Button {
                        width: parent.width
                        height: 70
                        id: button1
                        text: qsTr("Anterior")
                        enabled: socket.active
                        onClicked: socket.prev_diapo()
                    }

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

                    Button {
                        height: 70
                        width: parent.width
                        id: button3
                        text: qsTr("Limpiar")
                        enabled: socket.active
                        onClicked: socket.clear_path()
                    }

                }
                Column {
                    id: column1
                    width: parent.width
                    height: parent.height/2

                    Button {
                        width: parent.width
                        height: 70
                        id: color1
                        text: qsTr("Rojo")
                        checked: true
                        checkable: true
                        onClicked: {
                            color2.checked=false
                            color3.checked=false
                            checked=true
                            canvas.curColor="#ff0000"
                        }
                    }

                    Button {
                        height: 70
                        width: parent.width
                        id: color2
                        text: qsTr("Verde")
                        checkable: true
                        onClicked: {
                            color1.checked=false
                            color3.checked=false
                            checked=true
                            canvas.curColor="#00ff00"
                        }
                    }

                    Button {
                        height: 70
                        width: parent.width
                        id: color3
                        text: qsTr("Azul")
                        checkable: true
                        onClicked: {
                            color1.checked=false
                            color2.checked=false
                            checked=true
                            canvas.curColor="#0000ff"
                        }
                    }

                }


            }
        }
    }
}