/*
* Copyright (C) 2016 The Qt Company Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import QtQuick 2.6
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.0
import '..'
SettingPage {
id: root
icon: '/wifi/images/HMI_Settings_WifiIcon.svg'
title: 'Wifi'
checkable: true
property string protocol: 'http://'
property string ipAddress: '127.0.0.1'
property string portNumber: Qt.application.arguments[1]
property string tokenString: Qt.application.arguments[2]
property string wifiAPI: '/api/wifi-manager/'
property string wifiAPIpath: protocol + ipAddress + ':' + portNumber + wifiAPI
Text {
id: log
anchors.fill: parent
anchors.margins: 10
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
//text: "log"
}
onCheckedChanged: {
console.log("Wifi set to", checked)
if (checked == true) {
periodicRefresh.start()
request(wifiAPIpath + 'activate', function (o) {
// log the json response
console.log(o.responseText)
})
} else {
//console.log(networkPath)
networkList.clear()
request(wifiAPIpath + 'deactivate', function (o) {
// log the json response
console.log(o.responseText)
})
}
}
function listWifiNetworks() {
console.log("test #4")
}
ListModel {
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) {
return function () {
if (xhr.readyState == 4 && xhr.status == 200)
callback(myxhr)
}
})
(xhr)
xhr.open('GET', url, false)
xhr.send('')
}
function securityType(security) {
if (security === "Open")
return "unsecured"
else
return "secured"
}
Component {
id: wifiDevice
Rectangle {
height: 150
width: parent.width
color: "#222"
Image {
anchors.top: parent.top
anchors.topMargin: 7
anchors.left: parent.left
width: 70
height: 50
id: icon
source: {
if (securityType(security) === "unsecured") {
if (strength < 30)
source = "images/HMI_Settings_Wifi_1Bar.svg"
else if (strength >= 30 && strength < 50)
source = "images/HMI_Settings_Wifi_2Bars.svg"
else if (strength >= 50 && strength < 70)
source = "images/HMI_Settings_Wifi_3Bars.svg"
else
source = "images/HMI_Settings_Wifi_Full.svg"
} else {
if (strength < 30)
source = "images/HMI_Settings_Wifi_Locked_1Bar.svg"
else if (strength >= 30 && strength < 50)
source = "images/HMI_Settings_Wifi_Locked_2Bars.svg"
else if (strength >= 50 && strength < 70)
source = "images/HMI_Settings_Wifi_Locked_3Bars.svg"
else
source = "images/HMI_Settings_Wifi_Locked_Full.svg"
}
}
}
Column {
anchors.left: icon.right
anchors.leftMargin: 10
Text {
text: name
font.pointSize: 30
font.bold: {
if ((serviceState === "ready")
|| serviceState === "online")
font.bold = true
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
}
}
Button {
id: connectButton
anchors.top: parent.top
anchors.right: parent.right
anchors.rightMargin: 5
width: 250
MouseArea {
anchors.fill: parent
Text {
anchors.fill: parent
id: buttonTextLabel
font.pixelSize: 15
font.bold: true
color: "black"
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text: {
if ((serviceState === "ready")
|| serviceState === "online")
text = "Forget"
else
text = "Connect"
}
}
onClicked: {
//connectButton.border.color = "steelblue"
if ((serviceState === "ready")
|| serviceState === "online") {
//means we are connected
console.log("Disconnecting from", index, " ,", name)
request(wifiAPIpath + 'disconnect?network=' + index,
function (o) {
//showRequestInfo(o.responseText)
console.log(o.responseText)
})
} else {
console.log("Conect to", index, " ,", name)
//passwordDialog.open()
request(wifiAPIpath + 'connect?network=' + index,
function (o) {
// log the json response
//showRequestInfo(o.responseText)
console.log(o.responseText)
})
}
}
}
}
Button {
id: passwordButton
anchors.top: parent.top
anchors.right: parent.right
width: 40
visible: (securityType(security) === "unsecured") ? false : true
//anchors.rightMargin: connectButton.width + 5
//buttonText: "Connect"
text: {
"Key" //or some icon?
}
MouseArea {
anchors.fill: parent
onClicked: {
//connectButton.border.color = "steelblue"
passwordInputText.visible = true
connectButton.visible = false
passwordValidateButton.visible = true
//passwordInputText.o
periodicRefresh.stop()
var passkey = passwordInputText.text.valueOf()
//var passkey = 'randompassword'
console.log("Disconnecting from", index, " ,", name)
}
}
}
Button {
id: passwordValidateButton
anchors.top: parent.top
anchors.right: parent.right
anchors.rightMargin: connectButton.width + 5
width: 40
visible: false
//anchors.rightMargin: connectButton.width + 5
//buttonText: "Connect"
text: {
"ok" //or some icon?
}
MouseArea {
anchors.fill: parent
onClicked: {
//passwordInputText = ""
var passkey = passwordInputText.text.valueOf()
console.log("Validating", passkey)
console.log("Passkey is", passkey)
request(wifiAPIpath + 'security?passkey=' + passkey,
function (o) {
//showRequestInfo(o.responseText)
console.log(o.responseText)
})
passwordValidateButton.visible = false
passwordInputText.visible = false
connectButton.visible = true
periodicRefresh.start()
}
}
}
TextInput {
id: passwordInputText
anchors.top: parent.top
anchors.right: parent.right
anchors.rightMargin: 5
font.pointSize: 15
color: "#ffffff"
width: connectButton.width
visible: false
text: "password"
/*hardcore until virtual keyboard works*/
}
}
}
ListView {
width: parent.width
anchors.top: parent.top
anchors.topMargin: 70
anchors.bottom: parent.bottom
anchors.bottomMargin: 150
model: networkList //WifiList {}
delegate: wifiDevice
clip: true
}
//Timer for periodic refresh; this is BAD solution, need to figure out how to subscribe for events
Timer {
id: periodicRefresh
interval: 5000 // 5seconds
onTriggered: {
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("WiFi list refreshed")
//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
})
}
})
start()
}
}
}