flechitas+colores

main.qml

@@ -1,5 +1,6 @@
 import QtQuick 2.5
 import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.4
 import QtWebSockets 1.0
 
 import "./simplify.js" as Simplify
@@ -13,8 +14,6 @@ ApplicationWindow {
     property alias text1: text1
     property alias text2: text2
 
-    property alias column2: column2
-
     WebSocket {
         property int total_slides: 5
 
@@ -113,9 +112,7 @@ ApplicationWindow {
         height: parent.height
 
         property alias mouseArea1: mouseArea1
-        property alias button2: button2
         property alias button3: button3
-        property alias button1: button1
         property int curImage: 1
         property variant pregs: []
 
@@ -303,83 +300,41 @@ ApplicationWindow {
                 Column {
                     width: parent.width
                     height: parent.height / 2 - 60
-                    Button {
-                        width: parent.width
-                        height: 70
-                        id: button1
-                        text: qsTr("Anterior")
-                        enabled: socket.status == WebSocket.Open
-                                 && (item1.curImage > 1)
-                        onClicked: socket.prev_diapo()
-                    }
 
-                    Button {
-                        height: 70
+                    Row {
+                        id: row2
                         width: parent.width
-                        id: button2
-                        text: qsTr("Siguiente")
-                        enabled: socket.status == WebSocket.Open
-                                 && (item1.curImage < socket.total_slides)
-                        onClicked: socket.next_diapo()
-                    }
-
-                    Button {
                         height: 70
-                        width: parent.width
-                        id: button3
-                        text: qsTr("Limpiar")
-                        enabled: socket.status == WebSocket.Open
-                        onClicked: socket.clear_path()
-                    }
-                }
 
-                Column {
-                    id: column1
-                    width: parent.width
-                    height: parent.height / 2 - 60
+                        MouseArea {
+                            id: image1
+                            width: parent.width/2
+                            height: 70
+                            Image {
+                                source: "qrc:///images/back.png"
+                                height: parent.height
+                                fillMode: Image.PreserveAspectFit
 
-                    Button {
-                        width: parent.width
-                        height: 70
-                        id: color1
-                        text: qsTr("Rojo")
-                        checked: true
-                        checkable: true
-                        onClicked: {
-                            color2.checked = false
-                            color3.checked = false
-                            checked = true
-                            canvas.curColor = "#ff0000"
+                            }
+                            enabled: socket.status == WebSocket.Open && (item1.curImage > 1)
+                            onClicked : socket.prev_diapo()
                         }
-                    }
-
-                    Button {
-                        height: 70
-                        width: parent.width
-                        id: color2
-                        text: qsTr("Verde")
-                        checkable: true
-                        onClicked: {
-                            color1.checked = false
-                            color3.checked = false
-                            checked = true
-                            canvas.curColor = "#00ff00"
+                        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()
                         }
-                    }
 
-                    Button {
-                        height: 70
-                        width: parent.width
-                        id: color3
-                        text: qsTr("Azul")
-                        checkable: true
-                        onClicked: {
-                            color1.checked = false
-                            color2.checked = false
-                            checked = true
-                            canvas.curColor = "#0000ff"
-                        }
                     }
+
                     Row {
                         id: row1
                         width: parent.width
@@ -405,15 +360,125 @@ ApplicationWindow {
                             }
                         }
                     }
+
+
+
+
+                }
+
+                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: text2
                         text: qsTr("WS")
                     }
+
                     Text {
                         id: text1
                         text: qsTr("test123")
                     }
+
+
                 }
+
             }
         }
     }