/* * 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 System.showKeyboard = visible //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) System.showKeyboard = false 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 keyboard.currentString = "" 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: keyboard.currentString } } } 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() } } }