merge the Settings in CES2017 and bindings from ALPS

Change-Id: I00a7a6c5dae1cd579f91d543b0f5fba4616a633b
Signed-off-by: Tasuku Suzuki <tasuku.suzuki@qt.io>

13 files changed, 1255 insertions, 0 deletions

diff --git a/app/wifi/Wifi.qml b/app/wifi/Wifi.qml
new file mode 100644
index 0000000..7851967
--- /dev/null
+++ b/app/wifi/Wifi.qml
@@ -0,0 +1,435 @@
+/*
+ * 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()
+        }
+    }
+}
diff --git a/app/wifi/images/HMI_Settings_WifiIcon.svg b/app/wifi/images/HMI_Settings_WifiIcon.svg
new file mode 100644
index 0000000..4314729
--- /dev/null
+++ b/app/wifi/images/HMI_Settings_WifiIcon.svg
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:i="&amp;ns_ai;"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 100 100"
+   style="enable-background:new 0 0 100 100;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="HMI_Settings_WifiIcon.svg"><metadata
+     id="metadata20"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs18" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1464"
+     id="namedview16"
+     showgrid="false"
+     inkscape:zoom="2.36"
+     inkscape:cx="-191.52542"
+     inkscape:cy="50"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><style
+     type="text/css"
+     id="style3">
+	.st0{fill:#FFFFFF;}
+</style><switch
+     id="switch5"><g
+       i:extraneous="self"
+       id="g7"><g
+         id="Wifi_Icon"><path
+           class="st0"
+           d="M49.6,32.8c10.8-0.2,21.2,4.3,31,13.4l1.6-1.6C72,35,61,30.2,49.6,30.5c-15.2,0.4-26.9,9.4-31.8,13.9     l1.6,1.6C24.1,41.7,35.4,33.1,49.6,32.8z"
+           id="path10" /><path
+           class="st0"
+           d="M29,55.8l1.6,1.6c2.9-2.7,10.1-8.2,19.1-8.4c6.9-0.2,13.4,2.7,19.6,8.5L71,56c-6.7-6.3-13.9-9.4-21.3-9.2     C39.7,47,32.1,52.9,29,55.8z"
+           id="path12" /><path
+           class="st0"
+           d="M49.8,63.5c-4.7,0.1-8.2,3.3-9,4.2l1.6,1.6c0.7-0.7,3.6-3.4,7.5-3.5c2.6,0,5.3,1.2,7.7,3.7l1.6-1.6     C56.3,64.9,53.2,63.5,49.8,63.5z"
+           id="path14" /></g></g></switch></svg>
\ No newline at end of file
diff --git a/app/wifi/images/HMI_Settings_Wifi_1Bar.svg b/app/wifi/images/HMI_Settings_Wifi_1Bar.svg
new file mode 100644
index 0000000..e692c69
--- /dev/null
+++ b/app/wifi/images/HMI_Settings_Wifi_1Bar.svg
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:i="&amp;ns_ai;"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 80 80"
+   style="enable-background:new 0 0 80 80;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="HMI_Settings_Wifi_1Bar.svg"><metadata
+     id="metadata29"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs27" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1464"
+     id="namedview25"
+     showgrid="false"
+     inkscape:zoom="2.95"
+     inkscape:cx="-129.15254"
+     inkscape:cy="40"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><style
+     type="text/css"
+     id="style3">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#545157;}
+</style><switch
+     id="switch5"><g
+       i:extraneous="self"
+       id="g7"><g
+         id="g9"><ellipse
+           class="st0"
+           cx="39.3"
+           cy="64.2"
+           rx="5.2"
+           ry="5"
+           id="ellipse11" /><g
+           id="g13"><path
+             class="st1"
+             d="M7.9,39.8c7.7-8.3,18.9-13.6,31.4-13.6c13.7,0,25.8,6.3,33.5,16.1l5.3-4.8c-9.1-11.2-23.1-18.3-38.9-18.3      C25,19.1,12,25.1,3,34.6L7.9,39.8z"
+             id="path15" /></g><g
+           id="g17"><path
+             class="st1"
+             d="M17.1,49.3c5.3-6.2,13.3-10.2,22.2-10.2c9.8,0,18.4,4.8,23.7,12l5.3-4.8c-6.6-8.6-17.1-14.2-29-14.2      c-10.9,0-20.6,4.7-27.2,12L17.1,49.3z"
+             id="path19" /></g><g
+           id="g21"><path
+             class="st1"
+             d="M27.1,59.8c2.6-4,7.1-6.6,12.2-6.6c5.6,0,10.5,3.1,12.9,7.7l5.4-4.9c-3.8-5.9-10.6-9.8-18.3-9.8      c-7.1,0-13.3,3.3-17.3,8.4L27.1,59.8z"
+             id="path23" /></g></g></g></switch></svg>
\ No newline at end of file
diff --git a/app/wifi/images/HMI_Settings_Wifi_2Bars.svg b/app/wifi/images/HMI_Settings_Wifi_2Bars.svg
new file mode 100644
index 0000000..f7cf642
--- /dev/null
+++ b/app/wifi/images/HMI_Settings_Wifi_2Bars.svg
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:i="&amp;ns_ai;"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 80 80"
+   style="enable-background:new 0 0 80 80;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="HMI_Settings_Wifi_2Bars.svg"><metadata
+     id="metadata29"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs27" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1464"
+     id="namedview25"
+     showgrid="false"
+     inkscape:zoom="2.95"
+     inkscape:cx="-131.86441"
+     inkscape:cy="40"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><style
+     type="text/css"
+     id="style3">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#545157;}
+</style><switch
+     id="switch5"><g
+       i:extraneous="self"
+       id="g7"><g
+         id="g9"><ellipse
+           class="st0"
+           cx="39.3"
+           cy="64.2"
+           rx="5.2"
+           ry="5"
+           id="ellipse11" /><g
+           id="g13"><path
+             class="st1"
+             d="M7.9,39.8c7.7-8.3,18.9-13.6,31.4-13.6c13.7,0,25.8,6.3,33.5,16.1l5.3-4.8c-9.1-11.2-23.1-18.3-38.9-18.3      C25,19.1,12,25.1,3,34.6L7.9,39.8z"
+             id="path15" /></g><g
+           id="g17"><path
+             class="st1"
+             d="M17.1,49.3c5.3-6.2,13.3-10.2,22.2-10.2c9.8,0,18.4,4.8,23.7,12l5.3-4.8c-6.6-8.6-17.1-14.2-29-14.2      c-10.9,0-20.6,4.7-27.2,12L17.1,49.3z"
+             id="path19" /></g><g
+           id="g21"><path
+             class="st0"
+             d="M27.1,59.8c2.6-4,7.1-6.6,12.2-6.6c5.6,0,10.5,3.1,12.9,7.7l5.4-4.9c-3.8-5.9-10.6-9.8-18.3-9.8      c-7.1,0-13.3,3.3-17.3,8.4L27.1,59.8z"
+             id="path23" /></g></g></g></switch></svg>
\ No newline at end of file
diff --git a/app/wifi/images/HMI_Settings_Wifi_3Bars.svg b/app/wifi/images/HMI_Settings_Wifi_3Bars.svg
new file mode 100644
index 0000000..8a26f3f
--- /dev/null
+++ b/app/wifi/images/HMI_Settings_Wifi_3Bars.svg
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:i="&amp;ns_ai;"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 80 80"
+   style="enable-background:new 0 0 80 80;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="HMI_Settings_Wifi_3Bars.svg"><metadata
+     id="metadata29"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs27" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1464"
+     id="namedview25"
+     showgrid="false"
+     inkscape:zoom="2.95"
+     inkscape:cx="-135.76271"
+     inkscape:cy="40"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><style
+     type="text/css"
+     id="style3">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#545157;}
+</style><switch
+     id="switch5"><g
+       i:extraneous="self"
+       id="g7"><g
+         id="g9"><ellipse
+           class="st0"
+           cx="39.3"
+           cy="64.2"
+           rx="5.2"
+           ry="5"
+           id="ellipse11" /><g
+           id="g13"><path
+             class="st1"
+             d="M7.9,39.8c7.7-8.3,18.9-13.6,31.4-13.6c13.7,0,25.8,6.3,33.5,16.1l5.3-4.8c-9.1-11.2-23.1-18.3-38.9-18.3      C25,19.1,12,25.1,3,34.6L7.9,39.8z"
+             id="path15" /></g><g
+           id="g17"><path
+             class="st0"
+             d="M17.1,49.3c5.3-6.2,13.3-10.2,22.2-10.2c9.8,0,18.4,4.8,23.7,12l5.3-4.8c-6.6-8.6-17.1-14.2-29-14.2      c-10.9,0-20.6,4.7-27.2,12L17.1,49.3z"
+             id="path19" /></g><g
+           id="g21"><path
+             class="st0"
+             d="M27.1,59.8c2.6-4,7.1-6.6,12.2-6.6c5.6,0,10.5,3.1,12.9,7.7l5.4-4.9c-3.8-5.9-10.6-9.8-18.3-9.8      c-7.1,0-13.3,3.3-17.3,8.4L27.1,59.8z"
+             id="path23" /></g></g></g></switch></svg>
\ No newline at end of file
diff --git a/app/wifi/images/HMI_Settings_Wifi_Full.svg b/app/wifi/images/HMI_Settings_Wifi_Full.svg
new file mode 100644
index 0000000..9ad1869
--- /dev/null
+++ b/app/wifi/images/HMI_Settings_Wifi_Full.svg
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:i="&amp;ns_ai;"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 80 80"
+   style="enable-background:new 0 0 80 80;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="HMI_Settings_Wifi_Full.svg"><metadata
+     id="metadata29"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs27" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1464"
+     id="namedview25"
+     showgrid="false"
+     inkscape:zoom="2.95"
+     inkscape:cx="-164.40678"
+     inkscape:cy="40"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><style
+     type="text/css"
+     id="style3">
+	.st0{fill:#FFFFFF;}
+</style><switch
+     id="switch5"><g
+       i:extraneous="self"
+       id="g7"><g
+         id="g9"><ellipse
+           class="st0"
+           cx="39.3"
+           cy="64.2"
+           rx="5.2"
+           ry="5"
+           id="ellipse11" /><g
+           id="g13"><path
+             class="st0"
+             d="M7.9,39.8c7.7-8.3,18.9-13.6,31.4-13.6c13.7,0,25.8,6.3,33.5,16.1l5.3-4.8c-9.1-11.2-23.1-18.3-38.9-18.3      C25,19.1,12,25.1,3,34.6L7.9,39.8z"
+             id="path15" /></g><g
+           id="g17"><path
+             class="st0"
+             d="M17.1,49.3c5.3-6.2,13.3-10.2,22.2-10.2c9.8,0,18.4,4.8,23.7,12l5.3-4.8c-6.6-8.6-17.1-14.2-29-14.2      c-10.9,0-20.6,4.7-27.2,12L17.1,49.3z"
+             id="path19" /></g><g
+           id="g21"><path
+             class="st0"
+             d="M27.1,59.8c2.6-4,7.1-6.6,12.2-6.6c5.6,0,10.5,3.1,12.9,7.7l5.4-4.9c-3.8-5.9-10.6-9.8-18.3-9.8      c-7.1,0-13.3,3.3-17.3,8.4L27.1,59.8z"
+             id="path23" /></g></g></g></switch></svg>
\ No newline at end of file
diff --git a/app/wifi/images/HMI_Settings_Wifi_Locked_1Bar.svg b/app/wifi/images/HMI_Settings_Wifi_Locked_1Bar.svg
new file mode 100644
index 0000000..5da957f
--- /dev/null
+++ b/app/wifi/images/HMI_Settings_Wifi_Locked_1Bar.svg
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:i="&amp;ns_ai;"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 90 90"
+   style="enable-background:new 0 0 90 90;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="HMI_Settings_Wifi_Locked_1Bar.svg"><metadata
+     id="metadata35"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs33" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1464"
+     id="namedview31"
+     showgrid="false"
+     inkscape:zoom="2.6222222"
+     inkscape:cx="-164.74576"
+     inkscape:cy="45"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><style
+     type="text/css"
+     id="style3">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#545157;}
+</style><switch
+     id="switch5"><g
+       i:extraneous="self"
+       id="g7"><ellipse
+         class="st0"
+         cx="39.3"
+         cy="69"
+         rx="5.2"
+         ry="5"
+         id="ellipse9" /><g
+         id="g11"><path
+           class="st1"
+           d="M7.9,44.6C15.7,36.3,26.9,31,39.3,31c13.7,0,25.8,6.3,33.5,16.1l5.3-4.8C69.1,31.2,55.1,24,39.3,24     C25,24,12,29.9,3,39.4L7.9,44.6z"
+           id="path13" /></g><g
+         id="g15"><path
+           class="st1"
+           d="M17.1,54.2C22.4,48,30.4,44,39.3,44c9.8,0,18.4,4.8,23.7,12l5.3-4.8C61.8,42.6,51.2,37,39.3,37     c-10.9,0-20.6,4.7-27.2,12L17.1,54.2z"
+           id="path17" /></g><g
+         id="g19"><path
+           class="st1"
+           d="M27.1,64.7c2.6-4,7.1-6.6,12.2-6.6c5.6,0,10.5,3.1,12.9,7.7l5.4-4.9C53.8,54.9,47,51,39.3,51     c-7.1,0-13.3,3.3-17.3,8.4L27.1,64.7z"
+           id="path21" /></g><g
+         id="g23"><path
+           class="st0"
+           d="M87.9,74H75.4c-0.7,0-1.2-0.6-1.2-1.2v-6.6h2V72h10.9v-9H75.4c0.1,0,0.1,0,0.2,0h-1.4v-0.7     c0-0.7,0.6-1.2,1.2-1.2h12.4c0.7,0,1.2,0.6,1.2,1.2v10.5C89.1,73.4,88.5,74,87.9,74z"
+           id="path25" /></g><g
+         id="g27"><path
+           class="st0"
+           d="M87.2,60h-2v-3.5c0-1.9-1.6-3.5-3.5-3.5s-3.5,1.6-3.5,3.5V60h-2v-3.5c0-3,2.5-5.5,5.5-5.5s5.5,2.5,5.5,5.5     V60z"
+           id="path29" /></g></g></switch></svg>
\ No newline at end of file
diff --git a/app/wifi/images/HMI_Settings_Wifi_Locked_2Bars.svg b/app/wifi/images/HMI_Settings_Wifi_Locked_2Bars.svg
new file mode 100644
index 0000000..7f180aa
--- /dev/null
+++ b/app/wifi/images/HMI_Settings_Wifi_Locked_2Bars.svg
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:i="&amp;ns_ai;"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 90 90"
+   style="enable-background:new 0 0 90 90;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="HMI_Settings_Wifi_Locked_2Bars.svg"><metadata
+     id="metadata35"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs33" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1464"
+     id="namedview31"
+     showgrid="false"
+     inkscape:zoom="2.6222222"
+     inkscape:cx="-135.38136"
+     inkscape:cy="45"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><style
+     type="text/css"
+     id="style3">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#545157;}
+</style><switch
+     id="switch5"><g
+       i:extraneous="self"
+       id="g7"><ellipse
+         class="st0"
+         cx="39.3"
+         cy="69"
+         rx="5.2"
+         ry="5"
+         id="ellipse9" /><g
+         id="g11"><path
+           class="st1"
+           d="M7.9,44.6C15.7,36.3,26.9,31,39.3,31c13.7,0,25.8,6.3,33.5,16.1l5.3-4.8C69.1,31.2,55.1,24,39.3,24     C25,24,12,29.9,3,39.4L7.9,44.6z"
+           id="path13" /></g><g
+         id="g15"><path
+           class="st1"
+           d="M17.1,54.2C22.4,48,30.4,44,39.3,44c9.8,0,18.4,4.8,23.7,12l5.3-4.8C61.8,42.6,51.2,37,39.3,37     c-10.9,0-20.6,4.7-27.2,12L17.1,54.2z"
+           id="path17" /></g><g
+         id="g19"><path
+           class="st0"
+           d="M27.1,64.7c2.6-4,7.1-6.6,12.2-6.6c5.6,0,10.5,3.1,12.9,7.7l5.4-4.9C53.8,54.9,47,51,39.3,51     c-7.1,0-13.3,3.3-17.3,8.4L27.1,64.7z"
+           id="path21" /></g><g
+         id="g23"><path
+           class="st0"
+           d="M87.9,74H75.4c-0.7,0-1.2-0.6-1.2-1.2v-6.6h2V72h10.9v-9H75.4c0.1,0,0.1,0,0.2,0h-1.4v-0.7     c0-0.7,0.6-1.2,1.2-1.2h12.4c0.7,0,1.2,0.6,1.2,1.2v10.5C89.1,73.4,88.5,74,87.9,74z"
+           id="path25" /></g><g
+         id="g27"><path
+           class="st0"
+           d="M87.2,60h-2v-3.5c0-1.9-1.6-3.5-3.5-3.5s-3.5,1.6-3.5,3.5V60h-2v-3.5c0-3,2.5-5.5,5.5-5.5s5.5,2.5,5.5,5.5     V60z"
+           id="path29" /></g></g></switch></svg>
\ No newline at end of file
diff --git a/app/wifi/images/HMI_Settings_Wifi_Locked_3Bars.svg b/app/wifi/images/HMI_Settings_Wifi_Locked_3Bars.svg
new file mode 100644
index 0000000..276c758
--- /dev/null
+++ b/app/wifi/images/HMI_Settings_Wifi_Locked_3Bars.svg
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:i="&amp;ns_ai;"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 90 90"
+   style="enable-background:new 0 0 90 90;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="HMI_Settings_Wifi_Locked_3Bars.svg"><metadata
+     id="metadata35"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs33" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1464"
+     id="namedview31"
+     showgrid="false"
+     inkscape:zoom="2.6222222"
+     inkscape:cx="-125.65678"
+     inkscape:cy="45"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><style
+     type="text/css"
+     id="style3">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#545157;}
+</style><switch
+     id="switch5"><g
+       i:extraneous="self"
+       id="g7"><ellipse
+         class="st0"
+         cx="39.3"
+         cy="69"
+         rx="5.2"
+         ry="5"
+         id="ellipse9" /><g
+         id="g11"><path
+           class="st1"
+           d="M7.9,44.6C15.7,36.3,26.9,31,39.3,31c13.7,0,25.8,6.3,33.5,16.1l5.3-4.8C69.1,31.2,55.1,24,39.3,24     C25,24,12,29.9,3,39.4L7.9,44.6z"
+           id="path13" /></g><g
+         id="g15"><path
+           class="st0"
+           d="M17.1,54.2C22.4,48,30.4,44,39.3,44c9.8,0,18.4,4.8,23.7,12l5.3-4.8C61.8,42.6,51.2,37,39.3,37     c-10.9,0-20.6,4.7-27.2,12L17.1,54.2z"
+           id="path17" /></g><g
+         id="g19"><path
+           class="st0"
+           d="M27.1,64.7c2.6-4,7.1-6.6,12.2-6.6c5.6,0,10.5,3.1,12.9,7.7l5.4-4.9C53.8,54.9,47,51,39.3,51     c-7.1,0-13.3,3.3-17.3,8.4L27.1,64.7z"
+           id="path21" /></g><g
+         id="g23"><path
+           class="st0"
+           d="M87.9,74H75.4c-0.7,0-1.2-0.6-1.2-1.2v-6.6h2V72h10.9v-9H75.4c0.1,0,0.1,0,0.2,0h-1.4v-0.7     c0-0.7,0.6-1.2,1.2-1.2h12.4c0.7,0,1.2,0.6,1.2,1.2v10.5C89.1,73.4,88.5,74,87.9,74z"
+           id="path25" /></g><g
+         id="g27"><path
+           class="st0"
+           d="M87.2,60h-2v-3.5c0-1.9-1.6-3.5-3.5-3.5s-3.5,1.6-3.5,3.5V60h-2v-3.5c0-3,2.5-5.5,5.5-5.5s5.5,2.5,5.5,5.5     V60z"
+           id="path29" /></g></g></switch></svg>
\ No newline at end of file
diff --git a/app/wifi/images/HMI_Settings_Wifi_Locked_Full.svg b/app/wifi/images/HMI_Settings_Wifi_Locked_Full.svg
new file mode 100644
index 0000000..9058511
--- /dev/null
+++ b/app/wifi/images/HMI_Settings_Wifi_Locked_Full.svg
@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:i="&amp;ns_ai;"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 90 90"
+   style="enable-background:new 0 0 90 90;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="HMI_Settings_Wifi_Locked_Full.svg"><metadata
+     id="metadata35"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs33" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1464"
+     id="namedview31"
+     showgrid="false"
+     inkscape:zoom="2.6222222"
+     inkscape:cx="-130.80508"
+     inkscape:cy="45"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><style
+     type="text/css"
+     id="style3">
+	.st0{fill:#FFFFFF;}
+</style><switch
+     id="switch5"><g
+       i:extraneous="self"
+       id="g7"><ellipse
+         class="st0"
+         cx="39.3"
+         cy="69"
+         rx="5.2"
+         ry="5"
+         id="ellipse9" /><g
+         id="g11"><path
+           class="st0"
+           d="M7.9,44.6C15.7,36.3,26.9,31,39.3,31c13.7,0,25.8,6.3,33.5,16.1l5.3-4.8C69.1,31.2,55.1,24,39.3,24     C25,24,12,29.9,3,39.4L7.9,44.6z"
+           id="path13" /></g><g
+         id="g15"><path
+           class="st0"
+           d="M17.1,54.2C22.4,48,30.4,44,39.3,44c9.8,0,18.4,4.8,23.7,12l5.3-4.8C61.8,42.6,51.2,37,39.3,37     c-10.9,0-20.6,4.7-27.2,12L17.1,54.2z"
+           id="path17" /></g><g
+         id="g19"><path
+           class="st0"
+           d="M27.1,64.7c2.6-4,7.1-6.6,12.2-6.6c5.6,0,10.5,3.1,12.9,7.7l5.4-4.9C53.8,54.9,47,51,39.3,51     c-7.1,0-13.3,3.3-17.3,8.4L27.1,64.7z"
+           id="path21" /></g><g
+         id="g23"><path
+           class="st0"
+           d="M87.9,74H75.4c-0.7,0-1.2-0.6-1.2-1.2v-6.6h2V72h10.9v-9H75.4c0.1,0,0.1,0,0.2,0h-1.4v-0.7     c0-0.7,0.6-1.2,1.2-1.2h12.4c0.7,0,1.2,0.6,1.2,1.2v10.5C89.1,73.4,88.5,74,87.9,74z"
+           id="path25" /></g><g
+         id="g27"><path
+           class="st0"
+           d="M87.2,60h-2v-3.5c0-1.9-1.6-3.5-3.5-3.5s-3.5,1.6-3.5,3.5V60h-2v-3.5c0-3,2.5-5.5,5.5-5.5s5.5,2.5,5.5,5.5     V60z"
+           id="path29" /></g></g></switch></svg>
\ No newline at end of file
diff --git a/app/wifi/images/HMI_Settings_Wifi_Locked_NoBars.svg b/app/wifi/images/HMI_Settings_Wifi_Locked_NoBars.svg
new file mode 100644
index 0000000..6f389c6
--- /dev/null
+++ b/app/wifi/images/HMI_Settings_Wifi_Locked_NoBars.svg
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:i="&amp;ns_ai;"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 90 90"
+   style="enable-background:new 0 0 90 90;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="HMI_Settings_Wifi_Locked_NoBars.svg"><metadata
+     id="metadata39"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs37" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1464"
+     id="namedview35"
+     showgrid="false"
+     inkscape:zoom="2.6222222"
+     inkscape:cx="-110.21186"
+     inkscape:cy="45"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><style
+     type="text/css"
+     id="style3">
+	.st0{fill:#545157;}
+</style><switch
+     id="switch5"><g
+       i:extraneous="self"
+       id="g7"><g
+         id="g9"><ellipse
+           class="st0"
+           cx="39.3"
+           cy="69"
+           rx="5.2"
+           ry="5"
+           id="ellipse11" /><g
+           id="g13"><path
+             class="st0"
+             d="M7.9,44.6C15.7,36.3,26.9,31,39.3,31c13.7,0,25.8,6.3,33.5,16.1l5.3-4.8C69.1,31.2,55.1,24,39.3,24      C25,24,12,29.9,3,39.4L7.9,44.6z"
+             id="path15" /></g><g
+           id="g17"><path
+             class="st0"
+             d="M17.1,54.2C22.4,48,30.4,44,39.3,44c9.8,0,18.4,4.8,23.7,12l5.3-4.8C61.8,42.6,51.2,37,39.3,37      c-10.9,0-20.6,4.7-27.2,12L17.1,54.2z"
+             id="path19" /></g><g
+           id="g21"><path
+             class="st0"
+             d="M27.1,64.7c2.6-4,7.1-6.6,12.2-6.6c5.6,0,10.5,3.1,12.9,7.7l5.4-4.9C53.8,54.9,47,51,39.3,51      c-7.1,0-13.3,3.3-17.3,8.4L27.1,64.7z"
+             id="path23" /></g></g><g
+         id="g25"><g
+           id="g27"><path
+             class="st0"
+             d="M87.9,74H75.4c-0.7,0-1.2-0.6-1.2-1.2v-6.6h2V72h10.9v-9H75.4c0.1,0,0.1,0,0.2,0h-1.4v-0.7      c0-0.7,0.6-1.2,1.2-1.2h12.4c0.7,0,1.2,0.6,1.2,1.2v10.5C89.1,73.4,88.5,74,87.9,74z"
+             id="path29" /></g><g
+           id="g31"><path
+             class="st0"
+             d="M87.2,60h-2v-3.5c0-1.9-1.6-3.5-3.5-3.5s-3.5,1.6-3.5,3.5V60h-2v-3.5c0-3,2.5-5.5,5.5-5.5s5.5,2.5,5.5,5.5      V60z"
+             id="path33" /></g></g></g></switch></svg>
\ No newline at end of file
diff --git a/app/wifi/images/HMI_Settings_Wifi_NoBars.svg b/app/wifi/images/HMI_Settings_Wifi_NoBars.svg
new file mode 100644
index 0000000..e23fc1d
--- /dev/null
+++ b/app/wifi/images/HMI_Settings_Wifi_NoBars.svg
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:i="&amp;ns_ai;"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 80 80"
+   style="enable-background:new 0 0 80 80;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="HMI_Settings_Wifi_NoBars.svg"><metadata
+     id="metadata29"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs27" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1464"
+     id="namedview25"
+     showgrid="false"
+     inkscape:zoom="2.95"
+     inkscape:cx="-152.20339"
+     inkscape:cy="40"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><style
+     type="text/css"
+     id="style3">
+	.st0{fill:#545157;}
+</style><switch
+     id="switch5"><g
+       i:extraneous="self"
+       id="g7"><g
+         id="g9"><ellipse
+           class="st0"
+           cx="39.3"
+           cy="64.2"
+           rx="5.2"
+           ry="5"
+           id="ellipse11" /><g
+           id="g13"><path
+             class="st0"
+             d="M7.9,39.8c7.7-8.3,18.9-13.6,31.4-13.6c13.7,0,25.8,6.3,33.5,16.1l5.3-4.8c-9.1-11.2-23.1-18.3-38.9-18.3      C25,19.1,12,25.1,3,34.6L7.9,39.8z"
+             id="path15" /></g><g
+           id="g17"><path
+             class="st0"
+             d="M17.1,49.3c5.3-6.2,13.3-10.2,22.2-10.2c9.8,0,18.4,4.8,23.7,12l5.3-4.8c-6.6-8.6-17.1-14.2-29-14.2      c-10.9,0-20.6,4.7-27.2,12L17.1,49.3z"
+             id="path19" /></g><g
+           id="g21"><path
+             class="st0"
+             d="M27.1,59.8c2.6-4,7.1-6.6,12.2-6.6c5.6,0,10.5,3.1,12.9,7.7l5.4-4.9c-3.8-5.9-10.6-9.8-18.3-9.8      c-7.1,0-13.3,3.3-17.3,8.4L27.1,59.8z"
+             id="path23" /></g></g></g></switch></svg>
\ No newline at end of file
diff --git a/app/wifi/wifi.qrc b/app/wifi/wifi.qrc
new file mode 100644
index 0000000..063088a
--- /dev/null
+++ b/app/wifi/wifi.qrc
@@ -0,0 +1,16 @@
+<RCC>
+    <qresource prefix="/wifi">
+        <file>Wifi.qml</file>
+        <file>images/HMI_Settings_Wifi_1Bar.svg</file>
+        <file>images/HMI_Settings_Wifi_2Bars.svg</file>
+        <file>images/HMI_Settings_Wifi_3Bars.svg</file>
+        <file>images/HMI_Settings_Wifi_Full.svg</file>
+        <file>images/HMI_Settings_Wifi_Locked_1Bar.svg</file>
+        <file>images/HMI_Settings_Wifi_Locked_2Bars.svg</file>
+        <file>images/HMI_Settings_Wifi_Locked_3Bars.svg</file>
+        <file>images/HMI_Settings_Wifi_Locked_Full.svg</file>
+        <file>images/HMI_Settings_Wifi_Locked_NoBars.svg</file>
+        <file>images/HMI_Settings_Wifi_NoBars.svg</file>
+        <file>images/HMI_Settings_WifiIcon.svg</file>
+    </qresource>
+</RCC>