From 91bc9fbdcf73222e5c000ad91e10d6e446cb5c55 Mon Sep 17 00:00:00 2001 From: srimaldia Date: Thu, 22 Dec 2016 16:43:06 +0900 Subject: Modify UI design of Wifi and Bluetooth Signed-off-by: srimaldia --- app/bluetooth/Bluetooth.qml | 269 +++++++++++++++++++++++++------------------- app/wifi/Wifi.qml | 154 +++++++------------------ 2 files changed, 192 insertions(+), 231 deletions(-) (limited to 'app') 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 -- cgit 1.2.3-korg