canvas-controller/main.qml

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtWebSockets 1.0

import "./simplify.js" as Simplify

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

    property alias canvas: canvas
    Timer {
        interval: 800; running: true; repeat: true
        onTriggered: {
            if (socket.status != WebSocket.Open){//Reconnect
                socket.active = false
                socket.active = true
                console.log(Date().toString())
            }
        }
    }

    WebSocket {

        property int total_slides: 5

        id: socket
        url: "wss://wscasa.especificosba.com.ar"
        onTextMessageReceived: {
            var obj = JSON.parse(message)
            switch (obj.type) {
            case "diapo":
                canvas.clean_path()
                item1.curPDF = obj.PDF
                item1.curImage = obj.slide //automagically change_image
                if (obj.total_slides === undefined)
                    total_slides = 3
                else
                    total_slides = obj.total_slides

                break
            case "preg":
                item1.addPreg(obj.text)
                break
            case "deletepreg":
                item1.pregs = []
                break
            case "draw":
                break
            default:
                console.log(JSON.stringify(obj))
            }
        }
        function send_obj(obj) {
            sendTextMessage(JSON.stringify(obj))
        }

        function set_preg() {
            send_obj({
                         type: "initpreg"
                     })
        }
        function unset_preg() {
            send_obj({
                         type: "stoppreg"
                     })
        }

        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.Open) {
                wsStatus.text = qsTr("Conectado")
            } else {
                wsStatus.text = qsTr("Desconectado\nReconectando..")
            }
        }
        active: true
    }

    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(
                        socket.total_slides).arg(pregs.length)
        }
        onPregsChanged: {
            diapoStatus.text = qsTr("%1/%2 (%3 preg)").arg(curImage).arg(
                        socket.total_slides).arg(pregs.length)
        }

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

            pregs.push(p)
        }

        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: Math.round(
                                                   el.x * 800 / canvas.width),
                                            y: Math.round(
                                                   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) {
                        var pts = points_array[points_array.length - 1].points
                        pts.push(p)
                        if (pts.length > 60) {
                            //FIXME
                            finish_path()
                            start_path()
                            pts.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

                            if (points.length === 0)
                                continue
                            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.status !== WebSocket.Open)
                            return
                        canvas.start_path()
                    }
                    onPositionChanged: {
                        if (socket.status !== WebSocket.Open)
                            return

                        canvas.add_point({
                                             x: mouse.x,
                                             y: mouse.y
                                         })
                    }
                    onReleased: {
                        if (socket.status !== WebSocket.Open)
                            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 - 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.status == WebSocket.Open && (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.status == WebSocket.Open
                                     && (item1.curImage < socket.total_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.status == WebSocket.Open
                        onClicked: socket.clear_path()
                    }

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

                    Text {
                        id: diapoStatus
                        text: qsTr("test123")
                    }


                }

            }
        }
    }
}