Refine UI of MainPage.

diff --git a/QZeeControl.pro.user b/QZeeControl.pro.user
index 6f471b0..2be7fa8 100644 (file)
--- a/QZeeControl.pro.user
+++ b/QZeeControl.pro.user
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE QtCreatorProject>
-<!-- Written by Qt Creator 2.4.1, 2012-04-13T00:17:00. -->
+<!-- Written by Qt Creator 2.4.1, 2012-04-15T00:34:47. -->
 <qtcreator>
  <data>
   <variable>ProjectExplorer.Project.ActiveTarget</variable>

diff --git a/qml/QZeeControl/MainPage.qml b/qml/QZeeControl/MainPage.qml
index 8a7f8c9..03f55c8 100644 (file)
--- a/qml/QZeeControl/MainPage.qml
+++ b/qml/QZeeControl/MainPage.qml
@@ -88,8 +88,61 @@ Page {
                 target: labelD
                 color: "blue"
             }
+        },
+        State {
+            name: "connecting"
+            PropertyChanges {
+                target: scanButton
+                enabled: false
+            }
+            PropertyChanges {
+                target: addressField
+                enabled: false
+            }
+            PropertyChanges {
+                target: portField
+                enabled: false
+            }
+            PropertyChanges {
+                target: connectButton
+                enabled: false
+            }
+            PropertyChanges {
+                target: disconnectButton
+                enabled: false
+            }
+            PropertyChanges {
+                target: infoText
+                text: "Connecting..."
+            }
+        },
+        State {
+            name: "disconnected"
+            PropertyChanges {
+                target: scanButton
+                enabled: true
+            }
+            PropertyChanges {
+                target: addressField
+                enabled: true
+            }
+            PropertyChanges {
+                target: portField
+                enabled: true
+            }
+            PropertyChanges {
+                target: connectButton
+                enabled: true
+            }
+            PropertyChanges {
+                target: disconnectButton
+                enabled: false
+            }
+            PropertyChanges {
+                target: infoText
+                text: "Press \"Connect\" to connect to the device."
+            }
         }
-
     ]
 
     Connections {
@@ -105,15 +158,16 @@ Page {
     }
 
     Item {
-        anchors.fill: parent
+        id: headerItem
+        anchors{top: parent.top; left: parent.left; right: parent.right}
+        height: header.height
+        z: 1
 
         Image {
             id: header
             height: 72
             source: "image://theme/color8-meegotouch-view-header-fixed"
-            anchors.left: parent.left
-            anchors.top: parent.top
-            anchors.right: parent.right
+            anchors.fill: parent
 
             Text {
                 text: "QZeeControl"
@@ -125,134 +179,150 @@ Page {
                 anchors.verticalCenter: parent.verticalCenter
             }
         }
+    }
 
-        Button{
-            id: scanButton
-            anchors{bottom: addressRow.top; bottomMargin: 10; horizontalCenter: parent.horizontalCenter}
-            enabled: true
+    Flickable {
+        anchors{top: headerItem.bottom; bottom: parent.bottom; left: parent.left; right: parent.right}
+        contentHeight: contentColumn.height
 
-            text: "Scan"
+            Column{
+                id: contentColumn
+                spacing: 10
+                anchors{top: parent.top; left: parent.left; right: parent.right; topMargin: 10}
 
-            onClicked: {
-                btDiscovery.discovery = true
-            }
-        }
+            Button{
+                id: scanButton
+                enabled: true
 
-        Row{
-            id: addressRow
-            spacing: 5
-            anchors{bottom: infoText.top; bottomMargin: 10; horizontalCenter: parent.horizontalCenter}
+                anchors.horizontalCenter: parent.horizontalCenter
+                text: "Scan"
 
-            TextField{
-                id: addressField
-                text: "No device found yet."
-
-                onTextChanged: {
-                    if(text === "No device found yet.")
-                        return
-
-                    connectButton.enabled = true
-                    infoText.text = "Press \"Connect\" to connect to the device."
-                    console.log("Storing address in DB: " + text)
-                    SettingsStorage.setSetting("address", text)
+                onClicked: {
+                    btDiscovery.discovery = true
                 }
             }
-            TextField{
-                id: portField
-                text: "na"
-                width: 60
-                validator: IntValidator{}
 
-                onTextChanged: {
-                    if(text === "na")
-                        return
+            Row{
+                id: addressRow
+                anchors.horizontalCenter: parent.horizontalCenter
+                spacing: 5
+
+                TextField{
+                    id: addressField
+                    text: "No device found yet."
 
-                    console.log("Storing port in DB: " + text)
-                    SettingsStorage.setSetting("port", text)
+                    onTextChanged: {
+                        if(text === "No device found yet.")
+                            return
+
+                        connectButton.enabled = true
+                        infoText.text = "Press \"Connect\" to connect to the device."
+                        console.log("Storing address in DB: " + text)
+                        SettingsStorage.setSetting("address", text)
+                    }
+                }
+                TextField{
+                    id: portField
+                    text: "na"
+                    width: 60
+                    validator: IntValidator{}
+
+                    onTextChanged: {
+                        if(text === "na")
+                            return
+
+                        console.log("Storing port in DB: " + text)
+                        SettingsStorage.setSetting("port", text)
+                    }
                 }
             }
-        }
 
-        Label {
-            id: infoText
-            anchors{bottom: connectButton.top; bottomMargin: 10; horizontalCenter: parent.horizontalCenter}
-            width: parent.width
+            Label {
+                id: infoText
+                width: parent.width
 
-            text: "Please scan for a device first."
-            horizontalAlignment: Text.AlignHCenter
-            wrapMode: Text.WordWrap
-        }
+                text: "Please scan for a device first."
+                horizontalAlignment: Text.AlignHCenter
+                wrapMode: Text.WordWrap
+            }
 
-        Button{
-            id: connectButton
-            anchors{bottom: disconnectButton.top; bottomMargin: 10; horizontalCenter: parent.horizontalCenter}
-            enabled: false
+            Button{
+                id: connectButton
+                anchors.horizontalCenter: parent.horizontalCenter
+                enabled: false
 
-            text: "Connect"
+                text: "Connect"
 
-            onClicked: {
-                enabled = false
-                btConn.connect(addressField.text, parseInt(portField.text))
+                onClicked: {
+                    mainPage.state = "connecting"
+                    btConn.connect(addressField.text, parseInt(portField.text))
+                }
             }
-        }
 
-        Button{
-            id: disconnectButton
-            anchors.centerIn: parent
+            Button{
+                id: disconnectButton
+                anchors.horizontalCenter: parent.horizontalCenter
 
-            text: "Disconnect"
+                text: "Disconnect"
 
-            onClicked: {
-                btConn.disconnect()
+                onClicked: {
+                    btConn.disconnect()
 
+                }
             }
-        }
 
-        Row{
-            id: buttonRow
-            anchors{top: disconnectButton.bottom; bottomMargin: 10; horizontalCenter: parent.horizontalCenter}
+            Row{
+                id: buttonRow
+                anchors.horizontalCenter: parent.horizontalCenter
 
-            spacing: 20
+                spacing: 20
 
-            Label{
-                id: labelA
-                text: "A"
-                color: btConn.a ? "red" : "blue"
-            }
-            Label{
-                id: labelB
-                text: "B"
-                color: btConn.b ? "red" : "blue"
-            }
-            Label{
-                id: labelC
-                text: "C"
-                color: btConn.c ? "red" : "blue"
-            }
-            Label{
-                id: labelD
-                text: "D"
-                color: btConn.d ? "red" : "blue"
+                Label{
+                    id: labelA
+                    text: "A"
+                    color: btConn.a ? "red" : "blue"
+                }
+                Label{
+                    id: labelB
+                    text: "B"
+                    color: btConn.b ? "red" : "blue"
+                }
+                Label{
+                    id: labelC
+                    text: "C"
+                    color: btConn.c ? "red" : "blue"
+                }
+                Label{
+                    id: labelD
+                    text: "D"
+                    color: btConn.d ? "red" : "blue"
+                }
             }
-        }
 
-        Rectangle{
-            id: moveArea
-            anchors{top: buttonRow.bottom; topMargin: 10; horizontalCenter: parent.horizontalCenter}
-            color: "gray"
+            Item{
+                id: testArea
+                anchors.horizontalCenter: parent.horizontalCenter
+                height: moveArea.height
+                width: moveArea.width
 
-            width: 256
-            height: 256
-        }
+                Rectangle{
+                    id: moveArea
+                    color: "gray"
+
+                    width: 256
+                    height: 256
+                }
 
-        Rectangle{
-            id: cursorRectangle
-            width: 10
-            height: 10
-            color: "red"
+                Rectangle{
+                    id: cursorRectangle
+                    width: 10
+                    height: 10
+                    color: "red"
 
-            x: moveArea.x + (moveArea.width * 0.5) + btConn.x - (cursorRectangle.width * 0.5)
-            y: moveArea.y + (moveArea.height * 0.5) + btConn.y - (cursorRectangle.height * 0.5)
+                    x: moveArea.x + (moveArea.width * 0.5) + btConn.x - (cursorRectangle.width * 0.5)
+                    y: moveArea.y + (moveArea.height * 0.5) + btConn.y - (cursorRectangle.height * 0.5)
+                }
+            }
         }
     }
 
@@ -268,12 +338,18 @@ Page {
                 scanButton.enabled = false
                 connectButton.enabled = false
                 disconnectButton.enabled = false
+                addressField.enabled = false
+                portField.enabled = false
             }else{
                 scanButton.enabled = true
                 disconnectButton.enabled = false
+                addressField.enabled = true
+                portField.enabled = true
 
-                if(addressField.text !== "No device found yet." && portField.text !== "na")
+                if(addressField.text !== "No device found yet." && portField.text !== "na"){
+                    infoText.text = "Device found. You can now connect."
                     connectButton.enabled = true
+                }
             }
         }
 
@@ -299,9 +375,7 @@ Page {
         }
 
         onDisconnected: {
-            connectButton.enabled = true
-            disconnectButton.enabled = false
-            infoText.text = "Press \"Connect\" to connect to the device."
+            mainPage.state = "disconnected"
         }
 
 //        onStickMoved: {