layout

main.qml

@@ -28,8 +28,8 @@ ApplicationWindow {
 
     Item {
         id: item1
-        width: 640
-        height: 480
+        width: parent.width
+        height: parent.height
         //property alias gridLayout1: gridLayout1
         property alias button4: button4
         property alias mouseArea1: mouseArea1
@@ -43,149 +43,154 @@ ApplicationWindow {
             canvas.change_image("EBA", curImage)
         }
 
-        Column {
-            id: canvasCol
-            spacing: 6
-            anchors.fill: parent
-            anchors.topMargin: 12
-            width: 400
-
-            Canvas {
-            id: canvas
-            antialiasing: true
-            renderTarget: Canvas.Image
-
-            property color strokeStyle: Qt.darker(fillStyle, 1.2)
-            property color fillStyle: "#6400aa"
-
-            property int lineWidth: 2
-            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: 300
-            height: 300
-
-            onPaint: paint_canvas()
-            onLineWidthChanged: requestPaint()
-            onImageLoaded: requestPaint()
-
-            function start_path() {
-                points_array.push([])
-            }
+        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
+                width: 400
+                height: 300
+
+                Canvas {
+                    id: canvas
+                    antialiasing: true
+                    renderTarget: Canvas.Image
+
+                    property color strokeStyle: Qt.darker(fillStyle, 1.2)
+                    property color fillStyle: "#6400aa"
+
+                    property int lineWidth: 2
+                    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: 300
+                    height: 300
+
+                    onPaint: paint_canvas()
+                    onLineWidthChanged: requestPaint()
+                    onImageLoaded: requestPaint()
+
+                    function start_path() {
+                        points_array.push([])
+                    }
 
-            function finish_path() {
-                points_array[points_array.length - 1] = Simplify.simplify(
-                            points_array[points_array.length - 1], 3)
-                requestPaint()
-                //ws.send()..
-            }
+                    function finish_path() {
+                        points_array[points_array.length - 1] = Simplify.simplify(
+                                    points_array[points_array.length - 1], 3)
+                        requestPaint()
+                        //ws.send()..
+                    }
 
-            function change_image(pdf, number) {
-                curImageUrl = "https://plataforma.especificosba.com.ar/diapo/"
-                        + pdf + "/" + number + ".png"
-                requestPaint()
-            }
+                    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].push(p)
-                requestPaint()
-            }
+                    function add_point(p) {
+                        points_array[points_array.length - 1].push(p)
+                        requestPaint()
+                    }
 
-            function paint_canvas() {
-                var curColor = '#ff0000'
-                var ctx = canvas.getContext("2d")
-                canvas.loadImage(curImageUrl)
-                if (canvas.isImageLoaded(curImageUrl)) {
-                    ctx.drawImage(curImageUrl, 0, 0, canvas.width,
-                                  canvas.height)
+                    function paint_canvas() {
+                        var curColor = '#ff0000'
+                        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 = 2
+                        ctx.strokeStyle = curColor
+
+                        ctx.beginPath()
+                        var i = 0, j = 0
+                        for (j = 0; j < points_array.length; j++) {
+                            var points = points_array[j]
+                            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.lineCap = 'square'
-                ctx.lineWidth = 2
-                ctx.strokeStyle = curColor
-
-                ctx.beginPath()
-                var i = 0, j = 0
-                for (j = 0; j < points_array.length; j++) {
-                    var points = points_array[j]
-                    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)
+
+                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()
                     }
                 }
-                ctx.stroke()
             }
-        }
+            Column {
+                id: columnLayout1
+                spacing: 6
+
+                Button {
+                    id: button2
+                    text: qsTr("Anterior")
+                    enabled: socket.active
+                    onClicked: item1.curImage = Math.max(item1.curImage - 1, 1)
+                }
 
-            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: 6
-            anchors.fill: parent
-            anchors.leftMargin: canvasCol.right
-
-            Button {
-                id: button2
-                text: qsTr("Anterior")
-                enabled: socket.active
-                onClicked: item1.curImage = Math.max(item1.curImage - 1, 1)
-            }
+                Button {
+                    id: button1
+                    text: qsTr("Siguiente")
+                    enabled: socket.active
+                    onClicked: item1.curImage = Math.min(item1.curImage + 1, 5)
+                }
 
-            Button {
-                id: button1
-                text: qsTr("Siguiente")
-                enabled: socket.active
-                onClicked: item1.curImage = Math.min(item1.curImage + 1, 5)
+                Button {
+                    id: button4
+                    text: qsTr("Limpiar")
+                    enabled: socket.active
+                }
             }
 
-            Button {
-                id: button4
-                text: qsTr("Limpiar")
-                enabled: socket.active
-            }
-        }
+            Column {
+                id: columnLayout2
+                transformOrigin: Item.Center
 
-        Column {
-            id: columnLayout2
-            x: 337
-            y: 108
-            width: 100
-            height: 100
-
-            Button {
-                id: button3
-                text: qsTr("Break")
-                isDefault: false
-                checkable: false
-                onClicked: canvas.paint_canvas()
+                Button {
+                    id: button3
+                    text: qsTr("Break")
+                    isDefault: false
+                    checkable: false
+                    onClicked: canvas.paint_canvas()
+                }
             }
         }
     }