소스 검색

misc+drawing colors

David 10 년 전
부모
커밋
e786300da5
1개의 변경된 파일104개의 추가작업 그리고 61개의 파일을 삭제
  1. 104 61
      main.qml

+ 104 - 61
main.qml

@@ -9,7 +9,6 @@ ApplicationWindow {
     visible: true
     width: 800
     height: 480
-    title: qsTr("Hello World")
     color: "#fffffe"
 
     WebSocket {
@@ -17,7 +16,7 @@ ApplicationWindow {
         id: socket
         url: "wss://wscasa.especificosba.com.ar"
         onTextMessageReceived: {
-            console.log("\nReceived message: " + message)
+           // console.log("\nReceived message: " + message)
             var obj = JSON.parse(message)
             switch (obj.type) {
             case "diapo":
@@ -52,11 +51,13 @@ ApplicationWindow {
         }
         function clear_path() {
             send_obj({
-                         type: "clean"
+                         type: "command",
+                         commandtype: "clean"
                      })
             canvas.clean_path()
         }
         function send_drawing(d) {
+
             send_obj({
                          type: "command",
                          commandtype: "draw",
@@ -65,13 +66,17 @@ ApplicationWindow {
                      })
         }
 
-        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")
-                         }
+        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
     }
 
@@ -80,8 +85,6 @@ ApplicationWindow {
         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
@@ -125,7 +128,6 @@ ApplicationWindow {
                     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
@@ -135,7 +137,6 @@ ApplicationWindow {
                     height: parent.height
 
                     onPaint: paint_canvas()
-                    onLineWidthChanged: requestPaint()
                     onImageLoaded: {
                         clean_path()
                         requestPaint()
@@ -144,24 +145,29 @@ ApplicationWindow {
                     function clean_path() {
                         points_array = []
                         requestPaint()
-                        //ws.send()..
                     }
 
                     function start_path() {
-                        points_array.push([])
+                        points_array.push({points:[],color:curColor})
                     }
 
                     function finish_path() {
-                        points_array[points_array.length - 1] = Simplify.simplify(
-                                    points_array[points_array.length - 1], 2.2)
+                        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].map(
-                                    function(el){
-                                        return {x: el.x*800/canvas.width, y:el.y*600/canvas.height}
-                                    }
-                            );
-                        socket.send_drawing(ar)
+                        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) {
@@ -171,12 +177,18 @@ ApplicationWindow {
                     }
 
                     function add_point(p) {
-                        points_array[points_array.length - 1].push(p)
-                        requestPaint()
+                        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 curColor = '#ff0000'
                         var ctx = canvas.getContext("2d")
                         canvas.loadImage(curImageUrl)
                         if (canvas.isImageLoaded(curImageUrl)) {
@@ -184,20 +196,23 @@ ApplicationWindow {
                                           canvas.height)
                         }
                         ctx.lineCap = 'square'
-                        ctx.lineWidth = 2
-                        ctx.strokeStyle = curColor
+                        ctx.lineWidth = 3
+                        ctx.strokeStyle = "#000000"
 
                         ctx.beginPath()
                         var i = 0, j = 0
                         for (j = 0; j < points_array.length; j++) {
-                            var points = points_array[j]
+                            var points = points_array[j].points;
+                            ctx.strokeStyle= points_array[j].color;
+                            console.log(points_array[j].color);
                             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()
                         }
-                        ctx.stroke()
+
                     }
                 }
 
@@ -230,44 +245,72 @@ ApplicationWindow {
             }
             Column {
                 id: columnLayout1
-                spacing: 15
+                spacing: 10
                 width: parent.width - canvasCol.width - parent.spacing * 2
+                height: parent.height
 
-                Button {
+                Column {
                     width: parent.width
-                    height: 80
-                    id: button2
-                    text: qsTr("Anterior")
-                    enabled: socket.active
-                    onClicked: socket.prev_diapo()
-                }
+                    height: parent.height/2
+                    Button {
+                        width: parent.width
+                        height: 70
+                        id: button1
+                        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: 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()
+                    }
 
-                Button {
-                    height: 80
-                    width: parent.width
-                    id: button4
-                    text: qsTr("Limpiar")
-                    enabled: socket.active
-                    onClicked: socket.clear_path()
                 }
-                Button {
-                    height: 80
+                Column {
                     width: parent.width
-                    id: button3
-                    text: qsTr("Break")
-                    isDefault: false
-                    checkable: false
-                    onClicked: canvas.paint_canvas()
+                    height: parent.height/2
+
+                    Button {
+                        width: parent.width
+                        height: 70
+                        id: color1
+                        text: qsTr("Rojo")
+                        onClicked: canvas.curColor="#ff0000"
+                    }
+
+                    Button {
+                        height: 70
+                        width: parent.width
+                        id: color2
+                        text: qsTr("Verde")
+                        onClicked: canvas.curColor="#00ff00"
+                    }
+
+                    Button {
+                        height: 70
+                        width: parent.width
+                        id: color3
+                        text: qsTr("Azul")
+                        onClicked: canvas.curColor="#0000ff"
+                    }
+
                 }
+
+
             }
         }
     }