realtime drawing

components/WebSocket.qml

@@ -9,14 +9,10 @@ Item {
     }
 
     function set_preg() {
-        send_obj({
-                     type: "initpreg"
-                 })
+        send_obj({ type: "initpreg" })
     }
     function unset_preg() {
-        send_obj({
-                     type: "stoppreg"
-                 })
+        send_obj({ type: "stoppreg" })
     }
 
     function prev_diapo() {
@@ -44,21 +40,25 @@ Item {
                      commandtype: "clean"
                  })
     }
-    function send_drawing(d) {
+    function send_point(p) {
 
         send_obj({
                      type: "command",
                      commandtype: "draw",
-                     points: d,
+                     points: [p],
                      color: canvas.curColor
                  })
     }
+    function finish_path() {
+        send_obj({ type: "endPath" })
+    }
 
     WebSocket {
         property int total_slides: 150
 
         id: socket
-        url: "wss://wscasa.especificosba.com.ar"
+        //url: "wss://wscasa.especificosba.com.ar"
+        url: "ws://192.168.1.7:9001"
         active: true
         property bool isOpen: false
 
@@ -72,7 +72,7 @@ Item {
                 item1.curPDF = obj.PDF
                 item1.curImage = obj.slide //automagically change_image
                 if (obj.total_slides === undefined){
-                    console.log(obj);
+                    console.log(message);
                     total_slides = 300
                 } else {
                     total_slides = obj.total_slides
@@ -86,10 +86,9 @@ Item {
             case "deletepreg":
                 item1.pregs = []
                 break
+            case "endPath":
             case "draw":
-                break
             case "clean":
-                break
             case "snowmix":
                 break
             default:

main.qml

@@ -41,6 +41,7 @@ ApplicationWindow {
         }
 
         onCurImageChanged: {
+            console.log("curimage changed");
             canvas.change_image(curPDF, curImage)
             diapoStatus.text = qsTr("%1/%2 (%3 preg)").arg(curImage).arg(
                         t_slides).arg(pregs.length)
@@ -75,31 +76,29 @@ ApplicationWindow {
                     antialiasing: false
                     renderTarget: Canvas.Image
                     renderStrategy: Canvas.Immediate
-                    //defaults
-                    //renderStrategy: Canvas.Cooperative
-
-                    //renderTarget: Canvas.FramebufferObject
-                    //renderStrategy
 
                     property color strokeStyle: Qt.darker(fillStyle, 1.2)
                     property color fillStyle: "#6400aa"
-                    property string curColor: "#f00"
+                    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"
-                    property var ctx: canvas.getContext("2d")
+                    property var ctx : null
                     width: parent.width
                     height: parent.height
 
-                    onPaint: paint_canvas()
+                    onPaint: full_repaint()
+                    //paint_canvas()
                     onImageLoaded: {
                         clean_path()
+                        if (ctx === null)
+                            ctx = canvas.getContext("2d");
                         ctx.lineCap = 'square'
                         ctx.lineWidth = 4
-                        ctx.strokeStyle = "#000000"
+                        console.log("Full repaint, img loaded");
                         full_repaint()
                     }
 
@@ -115,36 +114,22 @@ ApplicationWindow {
                                           })
                     }
 
-                    function finish_path() {
-                        points_array[points_array.length - 1].points = Simplify.simplify(
-                                    points_array[points_array.length - 1].points,
-                                    2.2)
-
-                        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)
-                                        }
-                                    })
-
-                        var MAX_ELEMS=65;
-                        while (ar.length > MAX_ELEMS) {
-                            socket.send_drawing(ar.splice(0, MAX_ELEMS-1));
+                    function normalizeTo800by600(point) {
+                        return {
+                            x: Math.round(
+                                   point.x * 800 / canvas.width),
+                            y: Math.round(
+                                   point.y * 600 / canvas.height)
                         }
-                        socket.send_drawing(ar);
                     }
 
                     function change_image(pdf, number) {
                         curImageUrl = "https://plataforma.especificosba.com.ar/diapo/"
                                 + pdf + "/" + number + ".png"
+                        canvas.loadImage(curImageUrl)
                     }
 
+
                     function add_point(p) {
                         var pts = points_array[points_array.length - 1].points
                         var lastpoint;
@@ -152,12 +137,7 @@ ApplicationWindow {
                             lastpoint = pts[pts.length-1];
 
                         pts.push(p)
-                        if (pts.length > 150) {
-                            //FIXME
-                            finish_path()
-                            start_path()
-                            pts.push(p)
-                        }
+                        socket.send_point(p);
                         if (lastpoint)
                             markDirty(Qt.rect(Math.min(p.x,lastpoint.x),Math.min(p.y,lastpoint.y), Math.abs(p.x-lastpoint.x)+4, Math.abs(p.y-lastpoint.y)+1))
                     }
@@ -182,7 +162,8 @@ ApplicationWindow {
 
                     function full_repaint(){
                         //console.log("Fullpaint")
-                        canvas.loadImage(curImageUrl)
+                        if (ctx === null )
+                            ctx = canvas.getContext("2d");
                         if (canvas.isImageLoaded(curImageUrl)) {
                             ctx.drawImage(curImageUrl, 0, 0, canvas.width,
                                           canvas.height)
@@ -197,13 +178,12 @@ ApplicationWindow {
                     }
 
                     function paint_canvas() {
-                        //full_repaint();
-                        //return;
-                        if (points_array.length==0)
+                        if (ctx === null )
+                            ctx = canvas.getContext("2d");
+                        if (points_array.length === 0)
                             return;
                         var ar = points_array[points_array.length -1];
                         stroke(ar.points,ar.color);
-
                     }
                 }
 
@@ -226,7 +206,7 @@ ApplicationWindow {
                         if (!socket.isOpen)
                             return
                         var point = { x: mouse.x, y: mouse.y }
-                        if (distance(last_point, point) <= 81) //distance returns squared dsitance
+                        if (distance(last_point, point) <= 61) //distance returns squared dsitance
                             return;
                         last_point = point
                         canvas.add_point(point)
@@ -234,7 +214,7 @@ ApplicationWindow {
                     onReleased: {
                         if (!socket.isOpen)
                             return
-                        canvas.finish_path()
+                        socket.finish_path()
                     }
                     function distance(p1,p2){
                         return (p1.x-p2.x)*(p1.x-p2.x)+(p1.y-p2.y)*(p1.y-p2.y)
@@ -319,7 +299,7 @@ ApplicationWindow {
                     width: parent.width
                     height: parent.height / 2 - 60
                     Repeater{
-                        model: [ ["#00f", "#0f0", "#f00"], ["#ff0", "#0ff", "#000"] ]
+                        model: [ ["#0000ff", "#00ff00", "#ff0000"], ["#ffff00", "#00ffff", "#000000"] ]
                         Row {
                             width: parent.width
                             height: 70