Merge "Modify UI design of Wifi and Bluetooth"

2 files changed, 192 insertions, 231 deletions

diff --git a/app/bluetooth/Bluetooth.qml b/app/bluetooth/Bluetooth.qml
index e8cca1a..3a4d50f 100644
--- a/app/bluetooth/Bluetooth.qml
+++ b/app/bluetooth/Bluetooth.qml
@@ -33,6 +33,7 @@ SettingPage {
     property string btAPIpath: protocol + ipAddress + ':' + portNumber + btAPI
     property var jsonObjectBT
     property string currentState: 'idle'
+    property string btState: 'off' //add property to indicate the bt status
 
     Text {
         id: log
@@ -53,7 +54,9 @@ SettingPage {
             request(btAPIpath + 'start_discovery', function (o) {
                console.log(o.responseText)
             })
+            buttonScan.text = "STOP"		//when power on and after send the discovery command, button set to STOP
             currentState = 'discovering'
+            btState = 'on'	//bt is on
             //search_device()
             periodicRefresh.start()
 
@@ -70,7 +73,9 @@ SettingPage {
                 //showRequestInfo(o.responseText)
                 console.log(o.responseText)
             })
+            buttonScan.text = "SEARCH"	//when power off the button should be set to SEARCH
             currentState = 'idle'
+            btState = 'off'	//bt off
         }
     }
 
@@ -91,7 +96,7 @@ SettingPage {
                     id: buttonScan
                     anchors.centerIn: parent
                     width: 100
-                    text: "SEARCH"
+                    text: "SEARCH"	//default value is SEARCH
 
                     MouseArea {
                         //id: mouseArea
@@ -99,15 +104,18 @@ SettingPage {
 
                         onClicked: {
                             if (buttonScan.text == "SEARCH"){
-                                request(btAPIpath + 'start_discovery', function (o) {
+                                if (btState == 'on'){	//only response to the requirement when bt is on
+                                    request(btAPIpath + 'start_discovery', function (o) {
 
                                     // log the json response
                                     //showRequestInfo(o.responseText)
                                     console.log(o.responseText)
                                 })
-                                buttonScan.text = "CANCEL"
-                                currentState = 'discovering'
-                                periodicRefresh.start()
+                                    buttonScan.text = "STOP"
+                                    currentState = 'discovering'
+                                    periodicRefresh.start()
+                                }
+
                             }else{
                                 request(btAPIpath + 'stop_discovery', function (o) {
 
@@ -140,127 +148,154 @@ SettingPage {
       Component {
          id:blueToothDevice
          Rectangle {
-         height: 150
+         height: 120
          width: parent.width
-         color: "#222"
-
-         Column {
-             Text {
-                id: btName
-                text: deviceName
-                font.pointSize: 36
-                color: "#ffffff"
-             }
-             Text {
-                id: btAddr
-                text: deviceAddress
-                visible: false
-             }
-             Text {
-                text: {
-                  if ((devicePairable === "True")
-                         && (deviceConnect === "False"))
-                         text = "paired"
-                  else if ((devicePairable === "True")
-                           && (deviceConnect === "True")
-                           && (connectAVP) === "True")
-                           text = "AV Connection"
-                  else if ((devicePairable === "True")
-                            && (deviceConnect === "True")
-                            && (connectHFP) === "True")
-                            text = "Handsfree Connection"
-                  else
-                     text = ""
-                }
-                font.pointSize: 18
-                color: "#ffffff"
-                font.italic: true
-             }
-             Text {
-               id: btPairable
-               text: devicePairable
-               visible: false
-             }
-             Text {
-               id: btConnectstatus
-               text: deviceConnect
-               visible: false
-             }
-
-         }
-         Button {
-             id: removeButton
-             anchors.top:parent.top
-             anchors.topMargin: 15
-             anchors.right: parent.right
-             text: "Unpair"
+         color: "transparent"
              MouseArea {
-                 anchors.fill: parent
-                 onClicked: {
-                     request(btAPIpath + 'remove_device?value=' + btAddr.text, function (o) {
-                         console.log(o.responseText)
-                     })
-                     btDeviceList.remove(findDevice(btAddr.text))
-                 }
-             }
+               anchors.fill: parent
+                 Column {
+                     anchors.left: parent.left
+                     anchors.leftMargin: 80
+                     Text {
+                        id: btName
+                        text: deviceName
+                        color: '#66FF99'
+                        font.pixelSize: 48
+                     }
+//                     Text {
+//                        id: btAddr
+//                        text: deviceAddress
+//                        font.pixelSize: 24
+//                        color: 'white'
+//                     }
+                     Text {
+                        text: {
+                          if ((devicePairable === "True")
+                                 && (deviceConnect === "False"))
+                                 text = "paired, "
+                          else if ((devicePairable === "True")
+                                   && (deviceConnect === "True")
+                                   && (connectAVP === "True")
+                                   && (connectHFP === "False"))
+                                   text = "AV Connection, "
+                          else if ((devicePairable === "True")
+                                    && (deviceConnect === "True")
+                                    && (connectHFP === "True")
+                                    && (connectAVP === "False"))
+                                    text = "Handsfree Connection, "
+                          else if ((devicePairable === "True")
+                                   && (deviceConnect === "True")
+                                   && (connectHFP === "True")
+                                   && (connectAVP === "True"))
+                                   text = "Handsfree & AV Connection, "
+                          else
+                             text = ""
+                          text = text + deviceAddress
+                        }
+                        font.pointSize: 18
+                        color: "#ffffff"
+                        font.italic: true
+                     }
+                     Text {
+                       id: btPairable
+                       text: devicePairable
+                       visible: false
+                     }
+                     Text {
+                       id: btConnectstatus
+                       text: deviceConnect
+                       visible: false
+                     }
 
-         }
-
-         Button {
-          id: connectButton
-          anchors.top:parent.top
-          anchors.topMargin: 15
-          anchors.right: removeButton.left
-          anchors.rightMargin: 10
-
-          text:(btConnectstatus.text == "True")? "Disconnect":((btPairable.text == "True")? "Connect":"Pair")
-          MouseArea {
-             anchors.fill: parent
-             onClicked: {
-                if (currentState == 'discovering'){
-                     request(btAPIpath + 'stop_discovery', function (o) {
-                       currentState = "idle"
-                       console.log(o.responseText)
-                     })
-                   }
-                if (connectButton.text == "Pair"){
-                     connectButton.text = "Connect"
-                     request(btAPIpath + 'pair?value=' + btAddr.text, function (o) {
-                     btPairable.text = "True"
-                        console.log(o.responseText)
-                     })
-                     request(btAPIpath + 'set_property?Address=' + btAddr.text + '\&Property=Trusted\&value=true', function (o) {
-                        console.log(o.responseText)
-                     })
                  }
-                 else if (connectButton.text == "Connect"){
-                          connectButton.text = "Disconnect"
-                          request(btAPIpath + 'connect?value=' + btAddr.text, function (o) {
-                            console.log(o.responseText)
-                          })
+                 Button {
+                     id: removeButton
+                     anchors.top:parent.top
+                     anchors.topMargin: 15
+                     //anchors.horizontalCenter: btName.horizontalCenter
+                     anchors.right: parent.right
+                     anchors.rightMargin: 100
+
+                     text: "Unpair"
+                     MouseArea {
+                         anchors.fill: parent
+                         onClicked: {
+                             request(btAPIpath + 'remove_device?value=' + deviceAddress, function (o) {
+                                 console.log(o.responseText)
+                             })
+                             btDeviceList.remove(findDevice(deviceAddress))
+                         }
+                     }
+
                  }
-                 else if (connectButton.text == "Disconnect"){
-                          request(btAPIpath + 'disconnect?value=' + btAddr.text, function (o) {
-                            console.log(o.responseText)
-                          })
-                          connectButton.text = "Connect"
-                          btDeviceList.remove(findDevice(btAddr.text))
-                  }
-              }
-            }
+
+                 Button {
+                  id: connectButton
+                  anchors.top:parent.top
+                  anchors.topMargin: 15
+                  //anchors.horizontalCenter: btName.horizontalCenter
+                  anchors.right: removeButton.left
+                  anchors.rightMargin: 10
+
+                  text:((connectHFP === "True") || (connectAVP === "True"))? "Disconnect":((btPairable.text == "True")? "Connect":"Pair")
+                  // only when HFP or AVP is connected, button will be shown as Disconnect
+		  MouseArea {
+                     anchors.fill: parent
+                     onClicked: {
+                        if (currentState == 'discovering'){
+                             request(btAPIpath + 'stop_discovery', function (o) {
+                               currentState = "idle"
+                               console.log(o.responseText)
+                             })
+                           }
+                        if (connectButton.text == "Pair"){
+                             connectButton.text = "Connect"
+                             request(btAPIpath + 'pair?value=' + deviceAddress, function (o) {
+                             btPairable.text = "True"
+                                console.log(o.responseText)
+                             })
+                             request(btAPIpath + 'set_property?Address=' + deviceAddress + '\&Property=Trusted\&value=true', function (o) {
+                                console.log(o.responseText)
+                             })
+                         }
+                         else if (connectButton.text == "Connect"){
+                                  connectButton.text = "Disconnect"
+                                  request(btAPIpath + 'connect?value=' + deviceAddress, function (o) {
+                                    console.log(o.responseText)
+                                  })
+                         }
+                         else if (connectButton.text == "Disconnect"){
+                                  request(btAPIpath + 'disconnect?value=' + deviceAddress, function (o) {
+                                    console.log(o.responseText)
+                                  })
+                                  connectButton.text = "Connect"
+                                  btDeviceList.remove(findDevice(deviceAddress))
+                          }
+                      }
+                    }
+                }
+             }
+
+             Image {
+                 source: '../images/HMI_Settings_DividingLine.svg'
+                 anchors.horizontalCenter: parent.horizontalCenter
+                 anchors.top: parent.top
+                 anchors.topMargin: -15
+
+                 visible: model.index > 0
+             }
           }
-        }
       }
 
       ListView {
-                width: parent.width
-                anchors.top: parent.top
-                anchors.topMargin: 200
-                anchors.bottom: parent.bottom
-                anchors.bottomMargin: 150
-                model: btDeviceList
-                delegate: blueToothDevice
-                clip: true
+          width: parent.width
+          anchors.top: parent.top
+          anchors.topMargin: 70
+          anchors.bottom: parent.bottom
+          anchors.bottomMargin: 150
+          model: btDeviceList
+          delegate: blueToothDevice
+          clip: true
       }
 
       function findDevice(address){
diff --git a/app/wifi/Wifi.qml b/app/wifi/Wifi.qml
index e0ae950..f5fdae1 100644
--- a/app/wifi/Wifi.qml
+++ b/app/wifi/Wifi.qml
@@ -66,96 +66,6 @@ SettingPage {
         id: networkList
     }
 
-    Rectangle {
-        id: buttonNetworkList
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.bottom: parent.bottom
-        anchors.margins: 10
-        width: buttonNetworkListText.width + 10
-        height: buttonScanText.height + 10
-        border.width: buttonNetworkListMouseArea.pressed ? 2 : 1
-        radius: 5
-        antialiasing: true
-        color: "#222"
-        border.color: "white"
-        Text {
-            color: "white"
-            id: buttonNetworkListText
-            anchors.centerIn: parent
-            text: "GET NETWORK LIST"
-            font.pixelSize: 40
-        }
-        ListModel {
-            id: listModel
-        }
-        MouseArea {
-            id: buttonNetworkListMouseArea
-            anchors.fill: parent
-            onClicked: {
-                log.text = ""
-                console.log("\n")
-                networkList.clear()
-                request(wifiAPIpath + 'scan_result', function (o) {
-                    // log the json response
-                    console.log(o.responseText)
-                    // translate response into object
-                    var jsonObject = eval('(' + o.responseText + ')')
-                    var jsonObjectNetworks = eval(
-                                '(' + JSON.stringify(jsonObject.response) + ')')
-                    //console.log(jsonObject.response)
-                    for (var i = 0; i < jsonObjectNetworks.length; i++) {
-                        networkList.append({
-                                               number: jsonObjectNetworks[i].Number,
-                                               name: jsonObjectNetworks[i].ESSID,
-                                               strength: jsonObjectNetworks[i].Strength,
-                                               serviceState: jsonObjectNetworks[i].State,
-                                               security: jsonObjectNetworks[i].Security,
-                                               address: jsonObjectNetworks[i].IPAddress
-                                           })
-                        console.log(jsonObjectNetworks[i].Number,
-                                    jsonObjectNetworks[i].ESSID,
-                                    jsonObjectNetworks[i].Strength,
-                                    jsonObjectNetworks[i].State,
-                                    jsonObjectNetworks[i].Security,
-                                    jsonObjectNetworks[i].IPAddress)
-                    }
-                })
-            }
-        }
-    }
-    Rectangle {
-        id: buttonScan
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.bottom: parent.bottom
-        anchors.margins: 80
-        width: buttonScanText.width + 10
-        height: buttonScanText.height + 10
-        border.width: mouseArea.pressed ? 2 : 1
-        //radius: 5
-        //antialiasing: true
-        //color: "black"
-        color: "#222"
-        border.color: "white"
-        Text {
-              id: buttonScanText
-              anchors.centerIn: parent
-              text: "SCAN"
-              color: "white"
-              font.pixelSize: 40
-        }
-        MouseArea {
-            id: mouseArea
-            anchors.fill: parent
-            onClicked: {
-                log.text = ""
-                console.log("\n")
-                request(wifiAPIpath + 'scan', function (o) {
-                    // log the json response
-                    console.log(o.responseText)
-                })
-            }
-        }
-    }
     function request(url, callback) {
         var xhr = new XMLHttpRequest()
         xhr.onreadystatechange = (function (myxhr) {
@@ -179,15 +89,15 @@ SettingPage {
     Component {
         id: wifiDevice
         Rectangle {
-            height: 150
+            height: 120
             width: parent.width
-            color: "#222"
+            color: "transparent"
             Image {
-                anchors.top: parent.top
-                anchors.topMargin: 7
+
                 anchors.left: parent.left
-                width: 70
-                height: 50
+                anchors.leftMargin: 80
+                //width: 70
+                //height: 50
                 id: icon
                 source: {
                     if (securityType(security) === "unsecured") {
@@ -213,10 +123,12 @@ SettingPage {
             }
             Column {
                 anchors.left: icon.right
-                anchors.leftMargin: 10
+                anchors.leftMargin: 5
                 Text {
+                    id: networkNameText
                     text: name
-                    font.pointSize: 30
+                    color: '#66FF99'
+                    font.pixelSize: 48
                     font.bold: {
                         if ((serviceState === "ready")
                                 || serviceState === "online")
@@ -224,28 +136,23 @@ SettingPage {
                         else
                             font.bold = false
                     }
-                    color: {
-                        if ((serviceState === "ready")
-                                || serviceState === "online")
-                            color = "#00ff00"
-                        else
-                            color = "#ffffff"
-                    }
                 }
                 Text {
                     visible: ((serviceState === "ready")
                               || serviceState === "online") ? true : false
                     text: "connected, " + address
                     font.pointSize: 18
-                    color: "#ffffff"
-                    font.italic: true
+                    color: "white"
+                    //font.italic: true
                 }
             }
             Button {
                 id: connectButton
                 anchors.top: parent.top
+                anchors.topMargin: 5
+                //anchors.horizontalCenter: networkNameText.horizontalCenter
+                anchors.rightMargin: 50
                 anchors.right: parent.right
-                anchors.rightMargin: 5
                 width: 250
 
                 MouseArea {
@@ -301,14 +208,13 @@ SettingPage {
             Button {
                 id: passwordButton
                 anchors.top: parent.top
-                anchors.right: parent.right
+                anchors.topMargin: 5
+                anchors.right: connectButton.right
                 width: 40
                 visible: (securityType(security) === "unsecured") ? false : true
 
-                //anchors.rightMargin: connectButton.width + 5
-                //buttonText: "Connect"
                 text: {
-                    "Key" //or some icon?
+                    "Key"
                 }
 
                 MouseArea {
@@ -335,6 +241,7 @@ SettingPage {
             Button {
                 id: passwordValidateButton
                 anchors.top: parent.top
+                anchors.topMargin: 5
                 anchors.right: parent.right
                 anchors.rightMargin: connectButton.width + 5
                 width: 40
@@ -373,17 +280,35 @@ SettingPage {
             TextInput {
                 id: passwordInputText
                 anchors.top: parent.top
+                anchors.topMargin: 10
                 anchors.right: parent.right
-                anchors.rightMargin: 5
+                anchors.rightMargin: 0
+                readOnly: false
+                //horizontalAlignment: TextInput.AlignHCenter
+                //verticalAlignment: TextInput.AlignVCenter
+
 
                 font.pointSize: 15
                 color: "#ffffff"
 
                 width: connectButton.width
                 visible: false
-                text: "nttdatamse"
+                text: "password"
+                /*hardcore until virtual keyboard works*/
+            }
+
+            Image {
+                source: '../images/HMI_Settings_DividingLine.svg'
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.top: parent.top
+                anchors.topMargin: -15
+
+                visible: model.index > 0
             }
+
         }
+
+
     }
     ListView {
         width: parent.width
@@ -396,6 +321,7 @@ SettingPage {
         clip: true
     }
 
+
     //Timer for periodic refresh; this is BAD solution, need to figure out how to subscribe for events
     Timer {
         id: periodicRefresh