canvas-controller/main.qml

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

import "./simplify.js" as Simplify
import "components" as Comps


ApplicationWindow {
    id: aw
    visible: true
    width: 960
    height: 540
    color: "#fffffe"

    Comps.WebSocket {
        id: socket
    }
    property alias t_slides: socket.tot_slides
    Item {
        id: item1
        width: parent.width
        height: parent.height


        property alias mouseArea1: mouseArea1
        property alias button3: button3
        property int curImage: 1
        property variant pregs: []

        property string curPDF: "EBA"
        anchors.fill: parent
        onCurPDFChanged: {
            canvas.change_image(curPDF, curImage)
            diapoStatus.text = qsTr("%1/%2 (%3 preg)").arg(curImage).arg(
                        t_slides).arg(pregs.length)
        }
        onPregsChanged: {
            diapoStatus.text = qsTr("%1/%2 (%3 preg)").arg(curImage).arg(
                        t_slides).arg(pregs.length)
        }

        onCurImageChanged: {
            canvas.change_image(curPDF, curImage)
            diapoStatus.text = qsTr("%1/%2 (%3 preg)").arg(curImage).arg(
                        t_slides).arg(pregs.length)
        }
        function addPreg(p) {
            if (pregs.indexOf(p) !== -1) {
                return
            }
            pregs.push(p)
            curImageChanged();
        }

        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 count: 0

                    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"
                    property var ctx: canvas.getContext("2d")
                    width: parent.width
                    height: parent.height

                    onPaint: paint_canvas()
                    onImageLoaded: {
                        clean_path()
                        ctx.lineCap = 'square'
                        ctx.lineWidth = 4
                        ctx.strokeStyle = "#000000"
                        requestPaint()
                    }

                    function clean_path() {
                        points_array = []
                        requestPaint()
                        canvas.count = 0
                    }

                    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()
                        if (points_array[points_array.length - 1].points.length <=1)
                            return;
                        //normalized to 800x600
                        var ar = points_array[points_array.length - 1].points.map(
                                    function (el) {
                                        return {
                                            x: Math.round(
                                                   el.x * 800 / canvas.width),
                                            y: Math.round(
                                                   el.y * 600 / canvas.height)
                                        }
                                    })

                        console.log(ar.length);
                        var MAX_ELEMS=65;
                        while (ar.length > MAX_ELEMS) {
                            socket.send_drawing(ar.splice(0, MAX_ELEMS-1));
                        }
                        socket.send_drawing(ar);
                    }

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

                    function add_point(p) {
                        var pts = points_array[points_array.length - 1].points
                        pts.push(p)
                        if (pts.length > 80) {
                            //FIXME
                            finish_path()
                            start_path()
                            pts.push(p)
                        }

                        requestPaint()
                    }


                    function stroke(points, color) {
                        ctx.strokeStyle = color;
                        ctx.beginPath()
                        ctx.moveTo(points[0].x, points[0].y)
                        var i = 0;
                        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()
                    }

                    function paint_canvas() {
                        canvas.loadImage(curImageUrl)
                        if (canvas.isImageLoaded(curImageUrl)) {
                            ctx.drawImage(curImageUrl, 0, 0, canvas.width,
                                          canvas.height)
                        }
                        var j = 0
                        for (j = 0; j < points_array.length; j++) {
                            if (points_array[j].points.length <= 1)
                                continue
                            //setTimeout( function() { }, 0);
                            stroke(points_array[j].points,points_array[j].color);
                        }
                    }
                }

                MouseArea {
                    id: mouseArea1
                    x: 0
                    y: 0
                    width: canvas.width
                    height: canvas.height
                    property var last_point;

                    onPressed: {
                        if (!socket.isOpen)
                            return
                        canvas.start_path()
                        last_point = { x: mouse.x, y: mouse.y }
                        canvas.add_point(last_point)
                    }
                    onPositionChanged: {
                        if (!socket.isOpen)
                            return
                        var point = { x: mouse.x, y: mouse.y }
                        if (distance(last_point, point) <= 81) //distance returns squared dsitance
                            return;
                        last_point = point
                        canvas.add_point(point)
                        canvas.count++
                        /*console.log(canvas.count)
                        console.log(canvas.points_array[canvas.points_array.length-1].length)*/
                    }
                    onReleased: {
                        if (!socket.isOpen)
                            return
                        canvas.finish_path()
                        canvas.requestPaint()
                    }
                    function distance(p1,p2){
                        return (p1.x-p2.x)*(p1.x-p2.x)+(p1.y-p2.y)*(p1.y-p2.y)
                    }
                }
            }
            Column {
                id: columnLayout1
                spacing: 10
                width: parent.width - canvasCol.width - parent.spacing * 2
                height: parent.height

                Column {
                    width: parent.width
                    height: parent.height / 2 - 60

                    Row {
                        id: row2
                        width: parent.width
                        height: 70

                        MouseArea {
                            id: image1
                            width: parent.width/2
                            height: 70
                            Image {
                                source: "qrc:///images/back.png"
                                height: parent.height
                                fillMode: Image.PreserveAspectFit

                            }
                            enabled: socket.isOpen && (item1.curImage > 1)
                            onClicked : socket.prev_diapo()
                        }
                        MouseArea {
                            id: image2
                            width: parent.width/2
                            height: 70
                            Image {
                                height: parent.height
                                source: "qrc:///images/fwd.png"
                                fillMode: Image.PreserveAspectFit
                            }
                            enabled: socket.isOpen && (item1.curImage < t_slides)
                            onClicked: socket.next_diapo()
                        }

                    }

                    Row {
                        id: row1
                        width: parent.width
                        height: 70

                        Button {
                            height: 70
                            width: parent.width / 2
                            id: preg
                            text: qsTr("Preg")
                            onClicked: {
                                socket.set_preg()
                            }
                        }

                        Button {
                            height: 70
                            width: parent.width / 2
                            id: nopreg
                            text: qsTr("No Preg")
                            onClicked: {
                                socket.unset_preg()
                            }
                        }
                    }
                }

                Column {
                    id: column1
                    width: parent.width
                    height: parent.height / 2 - 60

                    Row {
                        id: row3
                        width: parent.width
                        height: 70

                        Button {
                            height: 70
                            width: parent.width/3
                            id: color3
                            checkable: true
                            onClicked: {
                                color1.checked = false
                                color2.checked = false
                                checked = true
                                canvas.curColor = "#0000ff"
                            }
                            style: ButtonStyle {
                                background: Rectangle {
                                    implicitWidth: 100
                                    implicitHeight: 25
                                    border.width: 2
                                    border.color: color3.checked?"#000":"#FFF"
                                    radius: 8
                                    gradient: Gradient {
                                        GradientStop { position: 0 ; color: "#00f" }
                                        GradientStop { position: 1 ; color: "#00f" }
                                    }
                                }
                            }
                        }

                        Button {
                            height: 70
                            width: parent.width/3
                            id: color2
                            checkable: true
                            onClicked: {
                                color1.checked = false
                                color3.checked = false
                                checked = true
                                canvas.curColor = "#00ff00"
                            }
                            style: ButtonStyle {
                                background: Rectangle {
                                    implicitWidth: 100
                                    implicitHeight: 25
                                    border.width: 2
                                    border.color: color2.checked?"#000":"#FFF"
                                    radius: 8
                                    gradient: Gradient {
                                        GradientStop { position: 0 ; color: "#0f0" }
                                        GradientStop { position: 1 ; color: "#0f0" }
                                    }
                                }
                            }
                        }

                        Button {
                            width: parent.width/3
                            height: 70
                            id: color1
                            checked: true
                            checkable: true
                            onClicked: {
                                color2.checked = false
                                color3.checked = false
                                checked = true
                                canvas.curColor = "#ff0000"
                            }
                            style: ButtonStyle {
                                background: Rectangle {
                                    implicitWidth: 100
                                    implicitHeight: 25
                                    border.width: 2
                                    border.color: color1.checked?"#000":"#FFF"
                                    radius: 8
                                    gradient: Gradient {
                                        GradientStop { position: 0 ; color: "#f00" }
                                        GradientStop { position: 1 ; color: "#f00" }
                                    }
                                }
                            }
                        }


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

                    Text {
                        id: wsStatus
                        text: qsTr("WS Status")
                    }

                    Text {
                        id: diapoStatus
                        text: qsTr("Diapo status")
                    }


                }

            }
        }
    }
}