Add demo3 settings source code for cluster mode.icefish_8.99.5icefish_8.99.4icefish_8.99.3icefish_8.99.2icefish_8.99.1icefish/8.99.5icefish/8.99.4icefish/8.99.3icefish/8.99.2icefish/8.99.1halibut_8.0.6halibut_8.0.5halibut_8.0.4halibut_8.0.3halibut_8.0.2halibut_8.0.1halibut_8.0.0halibut_7.99.3halibut_7.99.2halibut_7.99.1halibut/8.0.6halibut/8.0.5halibut/8.0.4halibut/8.0.3halibut/8.0.2halibut/8.0.1halibut/8.0.0halibut/7.99.3halibut/7.99.2halibut/7.99.18.99.58.99.48.99.38.99.28.99.18.0.68.0.58.0.48.0.38.0.28.0.18.0.07.99.37.99.27.99.1halibut

Add demo3 settings source code for cluster mode.

[Patch Set 2] Update LICENSE file.
Change-Id: I586a211bb55e5017de62e36edd0bbba6968de1b8
BUG-AGL: SPEC-2261
Signed-off-by: zheng_wenlong <wenlong_zheng@nexty-ele.com>

53 files changed, 3656 insertions, 0 deletions

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..684dcbc
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+build
+*.pro.user
+app/config.tests
diff --git a/.gitreview b/.gitreview
new file mode 100644
index 0000000..dbb1919
--- /dev/null
+++ b/.gitreview
@@ -0,0 +1,6 @@
+[gerrit]
+host=gerrit.automotivelinux.org
+port=29418
+project=apps/demo3-settings
+defaultbranch=master
+
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..b3201ab
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,204 @@
+
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don`t include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   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.
+
diff --git a/app/SettingPage.qml b/app/SettingPage.qml
new file mode 100644
index 0000000..c8072de
--- /dev/null
+++ b/app/SettingPage.qml
@@ -0,0 +1,65 @@
+/*
+ * Copyright (C) 2016 The Qt Company Ltd.
+ * Copyright (c) 2019 TOYOTA MOTOR CORPORATION
+ *
+ * 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 AGL.Demo.Controls 1.0
+
+Page {
+    id: root
+    readonly property bool isSetting: true
+    property string icon
+    property bool checkable: false
+    property bool checked: false
+    function done() {
+        parent.pop()
+    }
+
+    function setStatusIcon(index, icon) {
+        dbus.setStatusIcon(index, icon)
+    }
+
+    Connections {
+        target: root
+        onCheckedChanged: {
+            checkedSwitch.checked = checked
+        }
+    }
+
+    Row {
+        anchors.right: parent.right
+        anchors.rightMargin: 100
+        anchors.bottom: parent.top
+        anchors.bottomMargin: 10
+        spacing: 20
+
+        Switch {
+            id: checkedSwitch
+            visible: root.checkable
+            onCheckedChanged: root.checked = checked
+        }
+
+        ImageButton {
+            id: back
+            anchors.bottom: parent.bottom
+            offImage: '../images/HMI_Settings_X.svg'
+            onClicked: root.done()
+        }
+    }
+
+}
diff --git a/app/Settings.qml b/app/Settings.qml
new file mode 100644
index 0000000..9369066
--- /dev/null
+++ b/app/Settings.qml
@@ -0,0 +1,78 @@
+/*
+ * 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 'datetime'
+import 'bluetooth'
+import 'wifi'
+import 'example'
+import 'version'
+
+ApplicationWindow {
+    id: root
+    width: container.width * container.scale
+    height: container.height * container.scale
+
+    onVisibleChanged: {
+        if (!visible)
+            stack.pop(settings)
+    }
+
+    Item {
+        id: container
+        anchors.centerIn: parent
+        width: 1920
+        height: 720
+        scale: screenInfo.scale_factor()
+
+    StackView {
+        id: stack
+        anchors.fill: parent
+        initialItem: settings
+
+        SettingsLauncher {
+            id: settings
+            onLaunch: {
+                stack.push(app)
+            }
+
+            Component.onCompleted: {
+                for (var a in stack.children) {
+                    var app = stack.children[a]
+                    if (!app.isSetting) continue
+                    settingsModel.append({'icon': app.icon, 'title': app.title, 'checkable': app.checkable, 'app': app})
+                    app.visible = false
+                }
+            }
+
+            model: ListModel { id: settingsModel }
+        }
+
+        DateTime {}
+
+        Bluetooth {}
+
+        Wifi {}
+
+//        Example {}
+
+        Version {}
+    }
+}
+}
diff --git a/app/SettingsLauncher.qml b/app/SettingsLauncher.qml
new file mode 100644
index 0000000..c62627a
--- /dev/null
+++ b/app/SettingsLauncher.qml
@@ -0,0 +1,83 @@
+/*
+ * Copyright (C) 2016 The Qt Company Ltd.
+ * Copyright (c) 2019 TOYOTA MOTOR CORPORATION
+ *
+ * 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
+
+Page {
+    id: root
+    title: 'Settings'
+    property alias model: view.model
+    signal launch(var app)
+    signal toggled(var app, bool on)
+
+    ListView {
+        id: view
+        anchors.fill: parent
+        anchors.margins: root.width * 0.075
+        clip: true
+
+        delegate: MouseArea {
+            id: delegate
+            width: ListView.view.width
+            height: width / 15
+            RowLayout {
+                anchors.fill: parent
+                Item {
+                    Layout.preferredWidth: 100
+                    Layout.preferredHeight: 100
+                    Image {
+                        anchors.fill: parent
+                        source: model.icon
+                    }
+                }
+                Label {
+                    Layout.fillWidth: true
+                    text: model.title.toUpperCase()
+                    color: '#00ADDC'
+                }
+                Switch {
+                    id: checkedSwitch
+                    visible: model.checkable
+                    onCheckedChanged: model.app.checked = checked
+                }
+                Connections {
+                    target: model.app
+                    onCheckableChanged: {
+                        checkedSwitch.visible = model.app.checkable
+                    }
+                    onCheckedChanged: {
+                        checkedSwitch.checked = model.app.checked
+                    }
+                }
+
+                Component.onCompleted: {
+                    checkedSwitch.checked = model.app.checked
+                }
+            }
+            Image {
+                source: '../images/HMI_Settings_DividingLine.svg'
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.top: parent.top
+                visible: model.index > 0
+            }
+
+            onClicked: launch(model.app)
+        }
+    }
+}
diff --git a/app/app.pri b/app/app.pri
new file mode 100644
index 0000000..014646f
--- /dev/null
+++ b/app/app.pri
@@ -0,0 +1,12 @@
+TEMPLATE = app
+
+load(configure)
+qtCompileTest(libhomescreen)
+
+config_libhomescreen {
+    CONFIG += link_pkgconfig
+    PKGCONFIG += homescreen
+    DEFINES += HAVE_LIBHOMESCREEN
+}
+
+DESTDIR = $${OUT_PWD}/../package/root/bin
diff --git a/app/app.pro b/app/app.pro
new file mode 100644
index 0000000..df45be1
--- /dev/null
+++ b/app/app.pro
@@ -0,0 +1,19 @@
+TARGET = settings
+QT = quickcontrols2 websockets dbus
+
+SOURCES = main.cpp
+
+CONFIG += link_pkgconfig
+PKGCONFIG += libhomescreen qlibwindowmanager qtappfw
+
+RESOURCES += \
+    settings.qrc \
+    images/images.qrc \
+    datetime/datetime.qrc \
+    wifi/wifi.qrc \
+    bluetooth/bluetooth.qrc \
+    example/example.qrc \
+    version/version.qrc
+
+
+include(app.pri)
diff --git a/app/bluetooth/Bluetooth.qml b/app/bluetooth/Bluetooth.qml
new file mode 100644
index 0000000..7a63e84
--- /dev/null
+++ b/app/bluetooth/Bluetooth.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 QtWebSockets 1.0
+import '..'
+
+SettingPage {
+    id: root
+    icon: '/bluetooth/images/HMI_Settings_BluetoothIcon.svg'
+    title: 'Bluetooth'
+    checkable: true
+    readonly property bool isBluetooth: true
+    property int pairedDeviceCount: 0
+
+    Connections {
+        target: bluetooth
+        onRequestConfirmationEvent: {
+            bluetooth.send_confirmation()
+        }
+
+        onDeviceAddedEvent: {
+            if (data.Paired === "True") {
+                pairedDeviceList.append({
+                    deviceAddress: data.Address,
+                    deviceName: data.Name,
+                    devicePairable: data.Paired,
+                    deviceConnect: data.Connected,
+                    connectAVP: data.AVPConnected,
+                    connectHFP: data.HFPConnected,
+                    textToShow: ""
+                })
+                pairedDeviceCount = pairedDeviceCount + 1
+            } else {
+                btDeviceList.append({
+                    deviceAddress: data.Address,
+                    deviceName: data.Name,
+                    devicePairable: data.Paired,
+                    deviceConnect: data.Connected,
+                    connectAVP: data.AVPConnected,
+                    connectHFP: data.HFPConnected,
+                    textToShow: ""
+                })
+            }
+        }
+
+        onDeviceRemovedEvent: {
+            if (findDevice(data.Address) >= 0) {
+                btDeviceList.remove(findDevice(data.Address))
+            } else if(findPairDevice(data.Address) >= 0) {
+                pairedDeviceList.remove(findPairDevice(data.Address))
+                pairedDeviceCount = pairedDeviceCount - 1
+            }
+        }
+
+        onDeviceUpdatedEvent: {
+            updateDeviceAttribute(data)
+        }
+
+        onDeviceListEvent: {
+            for (var i = 0; i < data.list.length; i++) {
+                var value = data.list[i]
+                if (value.Paired==="True") {
+                    if(findPairDevice(value.Address) == -1) {
+                      pairedDeviceList.append({
+                                      deviceAddress: value.Address,
+                                      deviceName: value.Name,
+                                      devicePairable:value.Paired,
+                                      deviceConnect: value.Connected,
+                                      connectAVP: value.AVPConnected,
+                                      connectHFP: value.HFPConnected,
+                                      textToShow: ""
+                                  })
+                      pairedDeviceCount = pairedDeviceCount + 1
+                    }
+                  }
+                else
+                  if (findDevice(value.Address) == -1) {
+                      btDeviceList.append({
+                                       deviceAddress: value.Address,
+                                       deviceName: value.Name,
+                                       devicePairable:value.Paired,
+                                       deviceConnect: value.Connected,
+                                       connectAVP: value.AVPConnected,
+                                       connectHFP: value.HFPConnected,
+                                       textToShow: ""
+                                  })
+                  }
+            }
+        }
+
+        onPowerChanged: {
+            root.checked = bluetooth.power
+        }
+    }
+
+    Text {
+        id: log
+        anchors.fill: parent
+        anchors.margins: 10
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    onCheckedChanged: {
+        console.log("Bluetooth set to", checked)
+
+        pairedDeviceCount = 0
+        bluetooth.power = checked;
+        bluetooth.discoverable = checked;
+
+        if (checked == true) {
+            bluetooth.start_discovery()
+        } else {
+            btDeviceList.clear()
+            pairedDeviceList.clear()
+            bluetooth.stop_discovery()
+        }
+    }
+
+    ListModel {
+      id: pairedDeviceList
+    }
+    ListModel {
+      id: btDeviceList
+    }
+
+
+    Rectangle {
+      anchors.horizontalCenter: parent.horizontalCenter
+      anchors.bottom: parent.bottom
+      anchors.margins: 80
+      width: buttonScan.width + 10
+      height: buttonScan.height + 10
+      color: "#222"
+      border.color: "white"
+
+                Button {
+                    id: buttonScan
+                    anchors.centerIn: parent
+                    width: 100
+                    text: bluetooth.discoverable ? "STOP" :"SEARCH"
+
+                    MouseArea {
+                        //id: mouseArea
+                        anchors.fill: parent
+
+                        onClicked: {
+                            if (bluetooth.discoverable === false && bluetooth.power === true) {
+                                    bluetooth.start_discovery()
+                                    bluetooth.discoverable = true;
+                            } else {
+                                    bluetooth.stop_discovery()
+                                    bluetooth.discoverable = false;
+                            }
+                        }
+                    }
+                }
+      }
+
+      Component {
+         id:blueToothDevice
+         Rectangle {
+         height: 120
+         width: parent.width
+         color: "transparent"
+             MouseArea {
+               anchors.fill: parent
+                 Column {
+                     anchors.left: parent.left
+                     anchors.leftMargin: 80
+                     TextMetrics {
+                        id: textMetrics
+                        font.family: "Arial"
+                        elide: Text.ElideRight
+                        elideWidth: 140
+                        text: deviceName
+                     }
+                     Text {
+                        id: btName
+                        text: textMetrics.elidedText
+                        color: '#66FF99'
+                        font.pixelSize: 48
+                     }
+                     Text {
+                        id: btStatus
+                        property string connectionState:""
+                        text: {
+                           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 = connectionState
+
+                            text = deviceAddress + text
+                        }
+                        font.pixelSize: 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.horizontalCenter: btName.horizontalCenter
+                     anchors.right: parent.right
+                     anchors.rightMargin: 100
+
+                     text: "Remove"
+                     MouseArea {
+                         anchors.fill: parent
+                         onClicked: {
+                             bluetooth.remove_device(deviceAddress);
+                             if (findDevice(deviceAddress) != -1) {
+                                btDeviceList.remove(findDevice(deviceAddress))
+                             } else if (findPairDevice(deviceAddress) != -1) {
+                                pairedDeviceList.remove(findPairDevice(deviceAddress))
+                                pairedDeviceCount = pairedDeviceCount - 1
+                             }
+                         }
+                     }
+                 }
+
+                 Button {
+                  id: connectButton
+                  anchors.top:parent.top
+                  anchors.topMargin: 15
+                  anchors.right: removeButton.left
+                  anchors.rightMargin: 10
+
+                  text: (deviceConnect == "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 (connectButton.text == "Pair"){
+                             connectButton.text = "Connect"
+                             bluetooth.pair(deviceAddress)
+                             btPairable.text = "True"
+                         }
+                         else if (connectButton.text == "Connect"){
+                                  connectButton.text = "Disconnect"
+                                  bluetooth.connect(deviceAddress)
+                         }
+                         else if (connectButton.text == "Disconnect"){
+                                  bluetooth.disconnect(deviceAddress)
+                                  connectButton.text = "Connect"
+                          }
+                      }
+                    }
+                }
+             }
+          }
+      }
+      Text {
+          id: pairedlabel
+          width: parent.width
+          anchors.top: parent.top
+          anchors.topMargin: 50
+          anchors.left: parent.left
+          anchors.leftMargin: 80
+          height: 80
+          color:'grey'
+          font.pixelSize: 30
+          text:{
+              if (bluetooth.power == true && pairedDeviceCount != 0)
+                    "LIST OF PAIRED DEVICES"
+              else
+                    ""
+          }
+      }
+      ListView{
+          id: pairedListView
+          width: parent.width
+          anchors.top: pairedlabel.bottom
+          anchors.bottom: pairedlabel.bottom
+          anchors.bottomMargin: (-120*pairedDeviceCount)
+          model: pairedDeviceList
+          delegate: blueToothDevice
+          clip: true
+      }
+      Image {
+          anchors.bottom: pairedListView.bottom
+          anchors.left: parent.left
+          anchors.leftMargin: 80
+          height: 5
+          source: (bluetooth.power === true && pairedDeviceCount != 0) ? '../images/HMI_Settings_DividingLine.svg':''
+      }
+      Text {
+          id: detectedlabel
+          width: parent.width
+          anchors.top: pairedListView.bottom
+          anchors.topMargin: (pairedDeviceCount != 0) ? 80:-80
+          anchors.left: parent.left
+          anchors.leftMargin: 80
+          height: 80
+          color:'grey'
+          font.pixelSize: 30
+          text: {
+              if (bluetooth.power === true)
+                  "LIST OF DETECTED DEVICES"
+              else
+                  ""
+          }
+      }
+      ListView {
+          id:listView2
+          width: parent.width
+          anchors.top: detectedlabel.bottom
+          anchors.bottom: parent.bottom
+          anchors.bottomMargin: 150
+          model: btDeviceList
+          delegate: blueToothDevice
+          clip: true
+      }
+
+      function findDevice(address) {
+          for (var i = 0; i < btDeviceList.count; i++) {
+              if (address === btDeviceList.get(i).deviceAddress)
+                  return i
+          }
+          return -1
+      }
+      function findPairDevice(address){
+          for (var i = 0; i < pairedDeviceList.count; i++) {
+              if (address === pairedDeviceList.get(i).deviceAddress)
+                  return i
+          }
+          return -1
+      }
+
+      function updateDeviceAttribute(data){
+            var text = ""
+            for (var i = 0; i < btDeviceList.count; i++) {
+                if (data.Address === btDeviceList.get(i).deviceAddress){
+                    btDeviceList.get(i).devicePairable = data.Paired
+                    if (data.Paired === "True")
+                    {
+                        pairedDeviceList.append({
+                                        deviceAddress: btDeviceList.get(i).deviceAddress,
+                                        deviceName: btDeviceList.get(i).deviceName,
+                                        devicePairable:btDeviceList.get(i).devicePairable,
+                                        deviceConnect: btDeviceList.get(i).deviceConnect,
+                                        connectAVP: btDeviceList.get(i).connectAVP,
+                                        connectHFP: btDeviceList.get(i).connectHFP,
+                                        textToShow: ""
+                                    })
+                        pairedDeviceCount = pairedDeviceCount + 1
+                        btDeviceList.remove(i, 1)
+                    }
+                    else{
+                        text=deviceConnectionAttribute(data)
+                        btDeviceList.set(i, {
+                                            textToShow: " " + text
+                                        })
+
+                        btDeviceList.get(i).deviceConnect = data.Connected
+                        console.log(data.Connected)
+                    }
+
+              }
+          }
+            for (var i = 0; i < pairedDeviceList.count; i++) {
+               if(data.Address === pairedDeviceList.get(i).deviceAddress){
+                    pairedDeviceList.get(i).devicePairable = data.Paired
+
+                    text=deviceConnectionAttribute(data)
+                    pairedDeviceList.set(i, { textToShow: " " + text })
+
+                    pairedDeviceList.get(i).deviceConnect = data.Connected
+               }
+            }
+        }
+
+      function deviceConnectionAttribute(data){
+          var text = ""
+          if ((data.Paired === "True")
+                     && (data.Connected === "True")
+                     && (data.AVPConnected === "True")
+                     && (data.HFPConnected === "False"))
+              text = "AV Connection, "
+          else if ((data.Paired === "True")
+                      && (data.Connected === "True")
+                      && (data.HFPConnected === "True")
+                      && (data.AVPConnected === "False"))
+              text = "Handsfree Connection, "
+          else if ((data.Paired === "True")
+                      && (data.Connected === "True")
+                      && (data.HFPConnected === "True")
+                      && (data.AVPConnected === "True")) {
+              console.log("all connected!!")
+              text = ", Handsfree & AV Connection"}
+          else
+              text = ""
+          return text
+      }
+}
diff --git a/app/bluetooth/bluetooth.qrc b/app/bluetooth/bluetooth.qrc
new file mode 100644
index 0000000..bc8b70a
--- /dev/null
+++ b/app/bluetooth/bluetooth.qrc
@@ -0,0 +1,8 @@
+<RCC>
+    <qresource prefix="/bluetooth">
+        <file>Bluetooth.qml</file>
+        <file>images/HMI_Pair_Button.svg</file>
+        <file>images/HMI_Paired_Button.svg</file>
+        <file>images/HMI_Settings_BluetoothIcon.svg</file>
+    </qresource>
+</RCC>
diff --git a/app/bluetooth/images/HMI_Pair_Button.svg b/app/bluetooth/images/HMI_Pair_Button.svg
new file mode 100644
index 0000000..9d3f626
--- /dev/null
+++ b/app/bluetooth/images/HMI_Pair_Button.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 151 51"
+	 style="enable-background:new 0 0 151 51;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:url(#SVGID_1_);stroke-miterlimit:10;}
+	.st1{opacity:0.3;fill:url(#SVGID_2_);}
+	.st2{fill:#FFFFFF;}
+	.st3{font-family:'Roboto-Regular';}
+	.st4{font-size:19.7348px;}
+	.st5{letter-spacing:3;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g>
+			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="24.7258" y1="75.9063" x2="126.2742" y2="-24.9063">
+				<stop  offset="0" style="stop-color:#00ADDC"/>
+				<stop  offset="1" style="stop-color:#6BFBFF"/>
+			</linearGradient>
+			<rect x="0.5" y="0.5" class="st0" width="150" height="50"/>
+			<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-25.8746" y1="126.14" x2="190.2191" y2="-88.3878">
+				<stop  offset="0" style="stop-color:#00ADDC"/>
+				<stop  offset="1" style="stop-color:#6BFBFF"/>
+			</linearGradient>
+			<rect x="0.5" y="0.5" class="st1" width="150" height="50"/>
+			<g>
+				<text transform="matrix(1 0 0 1 46.5699 33.9046)" class="st2 st3 st4 st5">Pair</text>
+			</g>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/bluetooth/images/HMI_Paired_Button.svg b/app/bluetooth/images/HMI_Paired_Button.svg
new file mode 100644
index 0000000..6e1f57a
--- /dev/null
+++ b/app/bluetooth/images/HMI_Paired_Button.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 151 51"
+	 style="enable-background:new 0 0 151 51;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:url(#SVGID_1_);stroke-miterlimit:10;}
+	.st1{opacity:0.84;fill:url(#SVGID_2_);}
+	.st2{fill:#27232B;}
+	.st3{font-family:'Roboto-Regular';}
+	.st4{font-size:19.7348px;}
+	.st5{letter-spacing:2.9;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g>
+			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="24.7258" y1="75.9063" x2="126.2742" y2="-24.9063">
+				<stop  offset="0" style="stop-color:#00ADDC"/>
+				<stop  offset="1" style="stop-color:#6BFBFF"/>
+			</linearGradient>
+			<rect x="0.5" y="0.5" class="st0" width="150" height="50"/>
+			<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-25.8746" y1="126.14" x2="190.2191" y2="-88.3878">
+				<stop  offset="0" style="stop-color:#00ADDC"/>
+				<stop  offset="1" style="stop-color:#6BFBFF"/>
+			</linearGradient>
+			<rect x="0.5" y="0.5" class="st1" width="150" height="50"/>
+			<g>
+				<text transform="matrix(1.0252 0 0 1 33.1099 33.9038)" class="st2 st3 st4 st5">PairED</text>
+			</g>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/bluetooth/images/HMI_Settings_BluetoothIcon.svg b/app/bluetooth/images/HMI_Settings_BluetoothIcon.svg
new file mode 100644
index 0000000..d41de2a
--- /dev/null
+++ b/app/bluetooth/images/HMI_Settings_BluetoothIcon.svg
@@ -0,0 +1,55 @@
+<?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_BluetoothIcon.svg"><metadata
+     id="metadata16"><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="defs14" /><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="namedview12"
+     showgrid="false"
+     inkscape:zoom="2.36"
+     inkscape:cx="-130.29661"
+     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="Bluetooth_Icon"><path
+           class="st0"
+           d="M48.3,86.9V53.4L30.9,69.7l-1.4-1.5l18.8-17.6v-0.2L27.9,36.4l1.1-1.6L48.3,48v-35l23.6,18.2l-20.3,19     l20.5,14.1L48.3,86.9z M50.3,51.8v30.5l18.6-17.6L50.3,51.8z M50.3,17.1v31.6l18.5-17.3L50.3,17.1z"
+           id="path10" /></g></g></switch></svg>
\ No newline at end of file
diff --git a/app/datetime/DateEdit.qml b/app/datetime/DateEdit.qml
new file mode 100644
index 0000000..f9f75fd
--- /dev/null
+++ b/app/datetime/DateEdit.qml
@@ -0,0 +1,122 @@
+/*
+ * 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 AGL.Demo.Controls 1.0
+
+GridLayout {
+    id: root
+    flow: GridLayout.TopToBottom
+    rows: 3
+
+    property int year: yearControl.model[yearControl.currentIndex]
+    property int month: monthControl.currentIndex + 1
+    property int day: dayControl.currentIndex + 1
+
+    ImageButton {
+        Layout.alignment: Layout.Center
+        offImage: './images/HMI_Settings_TimeDate_Arrow_Up.svg'
+        onClicked: monthControl.currentIndex++
+    }
+    Tumbler {
+        id: monthControl
+        implicitWidth: 200
+        model: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
+        onCurrentIndexChanged: dayControl.regenerateModel()
+
+        EditSeparator { anchors.fill: parent }
+    }
+    ImageButton {
+        Layout.alignment: Layout.Center
+        offImage: './images/HMI_Settings_TimeDate_Arrow_Down.svg'
+        onClicked: monthControl.currentIndex--
+    }
+
+    Item { width: 10; height: 10 }
+    Label { text: ':' }
+    Item { width: 10; height: 10 }
+
+    ImageButton {
+        Layout.alignment: Layout.Center
+        offImage: './images/HMI_Settings_TimeDate_Arrow_Up.svg'
+        onClicked: dayControl.currentIndex++
+    }
+
+    Tumbler {
+        id: dayControl
+        model: ListModel{
+            id: monthModel
+        }
+        Component.onCompleted: regenerateModel()
+        function regenerateModel() {
+            var eom = 0
+            var y = yearControl.model[yearControl.currentIndex]
+            var m = monthControl.currentIndex + 1
+            switch (m) {
+            case 2:
+                eom = 28 + parseInt(1 / (y % 4 + 1)) - parseInt(1 - 1 / (y % 100 + 1)) + parseInt(1 / (y % 400 + 1))
+                break
+            case 4:
+            case 6:
+            case 9:
+            case 11:
+                eom = 30
+                break
+            default:
+                eom = 31
+                break
+            }
+            while (monthModel.count < eom)
+                monthModel.append({modelData: monthModel.count + 1})
+            while (monthModel.count > eom)
+                monthModel.remove(monthModel.count - 1, 1)
+        }
+        EditSeparator { anchors.fill: parent }
+    }
+
+    ImageButton {
+        Layout.alignment: Layout.Center
+        offImage: './images/HMI_Settings_TimeDate_Arrow_Down.svg'
+        onClicked: dayControl.currentIndex--
+    }
+
+    ImageButton {
+        Layout.alignment: Layout.Center
+        offImage: './images/HMI_Settings_TimeDate_Arrow_Up.svg'
+        onClicked: yearControl.currentIndex++
+    }
+
+    Tumbler {
+        id: yearControl
+        Component.onCompleted: {
+            var arr = new Array
+            for (var i = 2010; i < 2050; i++) {
+                arr.push(i)
+            }
+            yearControl.model = arr
+        }
+        onCurrentIndexChanged: dayControl.regenerateModel()
+        EditSeparator { anchors.fill: parent }
+    }
+
+    ImageButton {
+        Layout.alignment: Layout.Center
+        offImage: './images/HMI_Settings_TimeDate_Arrow_Down.svg'
+        onClicked: yearControl.currentIndex--
+    }
+}
diff --git a/app/datetime/DateTime.qml b/app/datetime/DateTime.qml
new file mode 100644
index 0000000..5030b1e
--- /dev/null
+++ b/app/datetime/DateTime.qml
@@ -0,0 +1,50 @@
+/*
+ * 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 AGL.Demo.Controls 1.0
+import '..'
+
+SettingPage {
+    id: root
+    icon: '/datetime/images/HMI_Settings_TimeIcon.svg'
+    title: 'Date & Time'
+
+    ColumnLayout {
+        anchors.fill: parent
+        anchors.margins: 100
+        Label { text: 'Date'}
+        DateEdit {}
+        Image {
+            source: '../images/HMI_Settings_DividingLine.svg'
+        }
+        Label { text: 'Time'}
+        TimeEdit {}
+        RowLayout {
+            anchors.right: parent.right
+            Button {
+                text: 'OK'
+                highlighted: true
+                onClicked: root.done()
+            }
+        }
+        Item {
+            Layout.fillHeight: true
+        }
+    }
+}
diff --git a/app/datetime/EditSeparator.qml b/app/datetime/EditSeparator.qml
new file mode 100644
index 0000000..e833b52
--- /dev/null
+++ b/app/datetime/EditSeparator.qml
@@ -0,0 +1,40 @@
+/*
+ * 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
+
+ColumnLayout {
+    anchors.fill: parent
+    z: -1
+    Item {
+        Layout.fillHeight: true
+        Layout.preferredHeight: 1
+    }
+    Repeater {
+        model: 2
+        Image {
+            Layout.fillHeight: true
+            Layout.preferredHeight: 2
+            Layout.alignment: Layout.Center
+            source: './images/HMI_Settings_TimeDate_Arrow_DividingLine.svg'
+        }
+    }
+    Item {
+        Layout.fillHeight: true
+        Layout.preferredHeight: 1
+    }
+}
diff --git a/app/datetime/TimeEdit.qml b/app/datetime/TimeEdit.qml
new file mode 100644
index 0000000..69a049b
--- /dev/null
+++ b/app/datetime/TimeEdit.qml
@@ -0,0 +1,86 @@
+/*
+ * 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 AGL.Demo.Controls 1.0
+
+GridLayout {
+    id: root
+    flow: GridLayout.TopToBottom
+    rows: 3
+
+    property int hour: hourControl.currentIndex
+    property int minutes: minutesControl.currentIndex
+    property string ampm: ampmControl.model[ampmControl.currentIndex]
+
+    ImageButton {
+        Layout.alignment: Layout.Center
+        offImage: './images/HMI_Settings_TimeDate_Arrow_Up.svg'
+        onClicked: hourControl.currentIndex++
+    }
+    Tumbler {
+        id: hourControl
+        model: 12
+        EditSeparator { anchors.fill: parent }
+    }
+    ImageButton {
+        Layout.alignment: Layout.Center
+        offImage: './images/HMI_Settings_TimeDate_Arrow_Down.svg'
+        onClicked: hourControl.currentIndex--
+    }
+
+    Item { width: 10; height: 10 }
+    Label { text: ':' }
+    Item { width: 10; height: 10 }
+
+    ImageButton {
+        Layout.alignment: Layout.Center
+        offImage: './images/HMI_Settings_TimeDate_Arrow_Up.svg'
+        onClicked: minutesControl.currentIndex++
+    }
+
+    Tumbler {
+        id: minutesControl
+        model: 60
+        EditSeparator { anchors.fill: parent }
+    }
+
+    ImageButton {
+        Layout.alignment: Layout.Center
+        offImage: './images/HMI_Settings_TimeDate_Arrow_Down.svg'
+        onClicked: minutesControl.currentIndex--
+    }
+
+    ImageButton {
+        Layout.alignment: Layout.Center
+        offImage: './images/HMI_Settings_TimeDate_Arrow_Up.svg'
+        onClicked: ampmControl.currentIndex++
+    }
+
+    Tumbler {
+        id: ampmControl
+        model: ['AM', 'PM', 'AM', 'PM']
+        EditSeparator { anchors.fill: parent }
+    }
+
+    ImageButton {
+        Layout.alignment: Layout.Center
+        offImage: './images/HMI_Settings_TimeDate_Arrow_Down.svg'
+        onClicked: ampmControl.currentIndex--
+    }
+}
diff --git a/app/datetime/datetime.qrc b/app/datetime/datetime.qrc
new file mode 100644
index 0000000..c60c626
--- /dev/null
+++ b/app/datetime/datetime.qrc
@@ -0,0 +1,14 @@
+<RCC>
+    <qresource prefix="/datetime">
+        <file>DateEdit.qml</file>
+        <file>DateTime.qml</file>
+        <file>TimeEdit.qml</file>
+        <file>EditSeparator.qml</file>
+        <file>images/HMI_Settings_TimeDate_Arrow_DividingLine.svg</file>
+        <file>images/HMI_Settings_TimeDate_Arrow_Down.svg</file>
+        <file>images/HMI_Settings_TimeDate_Arrow_Up.svg</file>
+        <file>images/HMI_Settings_TimeDate_Button_Cancel.svg</file>
+        <file>images/HMI_Settings_TimeDate_Button_Set.svg</file>
+        <file>images/HMI_Settings_TimeIcon.svg</file>
+    </qresource>
+</RCC>
diff --git a/app/datetime/images/HMI_Settings_TimeDate_Arrow_DividingLine.svg b/app/datetime/images/HMI_Settings_TimeDate_Arrow_DividingLine.svg
new file mode 100644
index 0000000..f311d6a
--- /dev/null
+++ b/app/datetime/images/HMI_Settings_TimeDate_Arrow_DividingLine.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 93 20"
+	 style="enable-background:new 0 0 93 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<line class="st0" x1="0.3" y1="10" x2="92.7" y2="10"/>
+	</g>
+</switch>
+</svg>
diff --git a/app/datetime/images/HMI_Settings_TimeDate_Arrow_Down.svg b/app/datetime/images/HMI_Settings_TimeDate_Arrow_Down.svg
new file mode 100644
index 0000000..18ae1f5
--- /dev/null
+++ b/app/datetime/images/HMI_Settings_TimeDate_Arrow_Down.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 90 70"
+	 style="enable-background:new 0 0 90 70;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#0DF9FF;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g id="previous_11_">
+			<g>
+				<path class="st0" d="M61.9,23.6c0,0-16.9,16.5-16.9,16.5c0,0-16.8-16.5-16.8-16.5c-0.1,0-4.3,2.1-4.3,2.1L45,46.4l21.1-20.7
+					C66.1,25.7,61.8,23.6,61.9,23.6z"/>
+			</g>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/datetime/images/HMI_Settings_TimeDate_Arrow_Up.svg b/app/datetime/images/HMI_Settings_TimeDate_Arrow_Up.svg
new file mode 100644
index 0000000..7eba43d
--- /dev/null
+++ b/app/datetime/images/HMI_Settings_TimeDate_Arrow_Up.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 90 70"
+	 style="enable-background:new 0 0 90 70;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#0DF9FF;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g id="previous_11_">
+			<g>
+				<path class="st0" d="M45,23.6L23.9,44.3c0,0,4.2,2.1,4.3,2.1c0,0,16.8-16.5,16.8-16.5c0,0,16.9,16.5,16.9,16.5
+					c0,0,4.2-2.1,4.2-2.1L45,23.6z"/>
+			</g>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/datetime/images/HMI_Settings_TimeDate_Button_Cancel.svg b/app/datetime/images/HMI_Settings_TimeDate_Button_Cancel.svg
new file mode 100644
index 0000000..14a7edc
--- /dev/null
+++ b/app/datetime/images/HMI_Settings_TimeDate_Button_Cancel.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 151 51"
+	 style="enable-background:new 0 0 151 51;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+	.st1{opacity:0.3;fill:url(#SVGID_1_);stroke:#0DF9FF;stroke-miterlimit:10;}
+	.st2{fill:#FFFFFF;}
+	.st3{font-family:'Roboto-Regular';}
+	.st4{font-size:20px;}
+	.st5{letter-spacing:3;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g>
+			<rect x="0.5" y="0.5" class="st0" width="150" height="50"/>
+			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-25.8746" y1="126.14" x2="190.2191" y2="-88.3878">
+				<stop  offset="0" style="stop-color:#00ADDC"/>
+				<stop  offset="1" style="stop-color:#6BFBFF"/>
+			</linearGradient>
+			<rect x="0.5" y="0.5" class="st1" width="150" height="50"/>
+			<g>
+				<text transform="matrix(1 0 0 1 29.5984 34.017)" class="st2 st3 st4 st5">CANCEL</text>
+			</g>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/datetime/images/HMI_Settings_TimeDate_Button_Set.svg b/app/datetime/images/HMI_Settings_TimeDate_Button_Set.svg
new file mode 100644
index 0000000..e258e1e
--- /dev/null
+++ b/app/datetime/images/HMI_Settings_TimeDate_Button_Set.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
+	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
+	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
+	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
+	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
+	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
+	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
+	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
+]>
+<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 151 51"
+	 style="enable-background:new 0 0 151 51;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.84;fill:url(#SVGID_1_);}
+	.st1{fill:none;stroke:#0DF9FF;stroke-miterlimit:10;}
+	.st2{fill:#27232B;}
+	.st3{font-family:'Roboto-Regular';}
+	.st4{font-size:20px;}
+	.st5{letter-spacing:3;}
+</style>
+<switch>
+	<g i:extraneous="self">
+		<g>
+			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-25.8746" y1="125.9981" x2="190.2191" y2="-88.5298">
+				<stop  offset="0" style="stop-color:#00ADDC"/>
+				<stop  offset="1" style="stop-color:#6BFBFF"/>
+			</linearGradient>
+			<rect x="0.5" y="0.4" class="st0" width="150" height="50"/>
+			<rect x="0.5" y="0.4" class="st1" width="150" height="50"/>
+			<g>
+				<text transform="matrix(1 0 0 1 53.2699 33.8749)" class="st2 st3 st4 st5">SET</text>
+			</g>
+		</g>
+	</g>
+</switch>
+</svg>
diff --git a/app/datetime/images/HMI_Settings_TimeIcon.svg b/app/datetime/images/HMI_Settings_TimeIcon.svg
new file mode 100644
index 0000000..d4b2ef6
--- /dev/null
+++ b/app/datetime/images/HMI_Settings_TimeIcon.svg
@@ -0,0 +1,59 @@
+<?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_TimeIcon.svg"><metadata
+     id="metadata21"><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="defs19" /><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="namedview17"
+     showgrid="false"
+     inkscape:zoom="2.36"
+     inkscape:cx="-145.55085"
+     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="g9"><g
+           id="g11"><path
+             class="st0"
+             d="M50,81.2c-17.3,0-31.4-14-31.4-31.2c0-1.3,0.1-2.7,0.3-4l1.9,0.2c-0.2,1.3-0.2,2.5-0.2,3.8      c0,16.2,13.2,29.3,29.5,29.3S79.5,66.2,79.5,50c0-16.2-13.2-29.3-29.5-29.3c-7.2,0-14.1,2.6-19.5,7.3l-1.2-1.4      c5.7-5,13.1-7.8,20.7-7.8c17.3,0,31.4,14,31.4,31.2C81.4,67.2,67.3,81.2,50,81.2z"
+             id="path13" /></g><polygon
+           class="st0"
+           points="51,49.8 51,33.7 49,33.7 49,51.7 50,51.7 51,51.7 60,51.7 60,49.8    "
+           id="polygon15" /></g></g></switch></svg>
\ No newline at end of file
diff --git a/app/example/Example.qml b/app/example/Example.qml
new file mode 100644
index 0000000..283b76b
--- /dev/null
+++ b/app/example/Example.qml
@@ -0,0 +1,114 @@
+/*
+ * 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 AGL.Demo.Controls 1.0
+import '..'
+
+SettingPage {
+    id: root
+    icon: '/example/images/HMI_Settings_Example.svg'
+    title: 'Example'
+    checkable: true
+
+    ColumnLayout {
+        anchors.fill: parent
+        anchors.margins: 100
+        RowLayout {
+            spacing: 20
+            Button {
+                text: 'Wifi'
+                highlighted: true
+                property int index: 0
+                property var icons: ['HMI_Status_Wifi_NoBars-01', 'HMI_Status_Wifi_1Bar-01', 'HMI_Status_Wifi_2Bars-01', 'HMI_Status_Wifi_3Bars-01', 'HMI_Status_Wifi_Full-01']
+                onClicked: {
+                    index = (index + 1) % icons.length
+                    setStatusIcon(0, 'qrc:/images/Status/%1.png'.arg(icons[index]))
+                }
+            }
+            Button {
+                text: 'Bluetooth'
+                property int index: 0
+                property var icons: ['HMI_Status_Bluetooth_Inactive-01', 'HMI_Status_Bluetooth_On-01']
+                onClicked: {
+                    index = (index + 1) % icons.length
+                    setStatusIcon(1, 'qrc:/images/Status/%1.png'.arg(icons[index]))
+                }
+            }
+            Button {
+                text: 'Signal'
+                property int index: 0
+                property var icons: ['HMI_Status_Signal_NoBars-01', 'HMI_Status_Signal_1Bars-01', 'HMI_Status_Signal_2Bars-01', 'HMI_Status_Signal_3Bars-01', 'HMI_Status_Signal_4Bars-01', 'HMI_Status_Signal_Full-01']
+                onClicked: {
+                    index = (index + 1) % icons.length
+                    setStatusIcon(2, 'qrc:/images/Status/%1.png'.arg(icons[index]))
+                }
+            }
+        }
+
+        Image {
+            source: '../images/HMI_Settings_DividingLine.svg'
+        }
+
+        ListView {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            clip: true
+            model: 10
+            delegate: MouseArea {
+                width: ListView.view.width
+                height: 110
+                RowLayout {
+                    anchors.fill: parent
+                    anchors.margins: 5
+                    spacing: 30
+                    Image {
+                        source: './images/HMI_Settings_Example.svg'
+                    }
+
+                    ColumnLayout {
+                        Label {
+                            id: title
+                            Layout.fillWidth: true
+                            text: 'Title'
+                            font.pixelSize: 48
+                        }
+                        Label {
+                            id: subtitle
+                            Layout.fillWidth: true
+                            text: 'Subtitle'
+                            color: '#66FF99'
+                            font.pixelSize: 24
+                        }
+                    }
+
+                    Button {
+                        text: 'Go'
+                    }
+                }
+
+                Image {
+                    source: '../images/HMI_Settings_DividingLine.svg'
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors.top: parent.top
+                    visible: model.index > 0
+                }
+            }
+        }
+    }
+}
diff --git a/app/example/example.qrc b/app/example/example.qrc
new file mode 100644
index 0000000..5739f8e
--- /dev/null
+++ b/app/example/example.qrc
@@ -0,0 +1,6 @@
+<RCC>
+    <qresource prefix="/example">
+        <file>Example.qml</file>
+        <file>images/HMI_Settings_Example.svg</file>
+    </qresource>
+</RCC>
diff --git a/app/example/images/HMI_Settings_Example.svg b/app/example/images/HMI_Settings_Example.svg
new file mode 100644
index 0000000..5ad9479
--- /dev/null
+++ b/app/example/images/HMI_Settings_Example.svg
@@ -0,0 +1,72 @@
+<?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;#38;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"
+   x="0px"
+   y="0px"
+   viewBox="0 0 45 45"
+   style="enable-background:new 0 0 45 45;"
+   xml:space="preserve"
+   id="svg2"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="HMI_ContactScreen_X-01.svg"><metadata
+     id="metadata66"><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="defs64" /><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="namedview62"
+     showgrid="false"
+     inkscape:zoom="5.2444444"
+     inkscape:cx="-132.61653"
+     inkscape:cy="22.5"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" /><style
+     type="text/css"
+     id="style4">
+	.st0{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;}
+	.st1{display:none;}
+	.st2{display:inline;opacity:0.15;fill:url(#SVGID_1_);}
+	.st3{display:inline;opacity:0.35;fill:url(#SVGID_2_);}
+	.st4{display:inline;}
+	.st5{opacity:0.15;fill:url(#SVGID_3_);}
+	.st6{opacity:0.15;fill:url(#SVGID_4_);stroke:url(#SVGID_5_);stroke-miterlimit:10;}
+	.st7{fill:url(#SVGID_6_);}
+</style><switch
+     id="switch6"><g
+       i:extraneous="self"
+       id="g8"><g
+         id="Inactive"><g
+           id="g11"><line
+             class="st0"
+             x1="44.8"
+             y1="44.8"
+             x2="0.2"
+             y2="0.2"
+             id="line13" /><line
+             class="st0"
+             x1="45"
+             y1="0"
+             x2="0"
+             y2="45"
+             id="line15" /></g></g></g></switch></svg>
\ No newline at end of file
diff --git a/app/images/HMI_Settings_DividingLine.svg b/app/images/HMI_Settings_DividingLine.svg
new file mode 100644
index 0000000..d63589c
--- /dev/null
+++ b/app/images/HMI_Settings_DividingLine.svg
@@ -0,0 +1,58 @@
+<?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 932.8 1"
+   style="enable-background:new 0 0 932.8 1;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="HMI_Settings_DividingLine.svg"><metadata
+     id="metadata18"><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="defs16" /><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="namedview14"
+     showgrid="false"
+     inkscape:zoom="0.72041167"
+     inkscape:cx="-116.6"
+     inkscape:cy="0.5"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><style
+     type="text/css"
+     id="style3">
+	.st0{opacity:0.302;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#A8A8A8;}
+</style><switch
+     id="switch5"><g
+       i:extraneous="self"
+       id="g7"><g
+         id="Divider_2_"
+         class="st0"><g
+           id="g10"><polygon
+             class="st1"
+             points="719.7,0 0,0 0,1 932.8,1     "
+             id="polygon12" /></g></g></g></switch></svg>
\ No newline at end of file
diff --git a/app/images/HMI_Settings_X.svg b/app/images/HMI_Settings_X.svg
new file mode 100644
index 0000000..5ad9479
--- /dev/null
+++ b/app/images/HMI_Settings_X.svg
@@ -0,0 +1,72 @@
+<?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;#38;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"
+   x="0px"
+   y="0px"
+   viewBox="0 0 45 45"
+   style="enable-background:new 0 0 45 45;"
+   xml:space="preserve"
+   id="svg2"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="HMI_ContactScreen_X-01.svg"><metadata
+     id="metadata66"><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="defs64" /><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="namedview62"
+     showgrid="false"
+     inkscape:zoom="5.2444444"
+     inkscape:cx="-132.61653"
+     inkscape:cy="22.5"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" /><style
+     type="text/css"
+     id="style4">
+	.st0{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;}
+	.st1{display:none;}
+	.st2{display:inline;opacity:0.15;fill:url(#SVGID_1_);}
+	.st3{display:inline;opacity:0.35;fill:url(#SVGID_2_);}
+	.st4{display:inline;}
+	.st5{opacity:0.15;fill:url(#SVGID_3_);}
+	.st6{opacity:0.15;fill:url(#SVGID_4_);stroke:url(#SVGID_5_);stroke-miterlimit:10;}
+	.st7{fill:url(#SVGID_6_);}
+</style><switch
+     id="switch6"><g
+       i:extraneous="self"
+       id="g8"><g
+         id="Inactive"><g
+           id="g11"><line
+             class="st0"
+             x1="44.8"
+             y1="44.8"
+             x2="0.2"
+             y2="0.2"
+             id="line13" /><line
+             class="st0"
+             x1="45"
+             y1="0"
+             x2="0"
+             y2="45"
+             id="line15" /></g></g></g></switch></svg>
\ No newline at end of file
diff --git a/app/images/images.qrc b/app/images/images.qrc
new file mode 100644
index 0000000..0bb2c0d
--- /dev/null
+++ b/app/images/images.qrc
@@ -0,0 +1,6 @@
+<RCC>
+    <qresource prefix="/images">
+        <file>HMI_Settings_DividingLine.svg</file>
+        <file>HMI_Settings_X.svg</file>
+    </qresource>
+</RCC>
diff --git a/app/main.cpp b/app/main.cpp
new file mode 100644
index 0000000..026f932
--- /dev/null
+++ b/app/main.cpp
@@ -0,0 +1,147 @@
+/*
+ * Copyright (C) 2016 The Qt Company Ltd.
+ * Copyright (C) 2017 Konsulko Group
+ *
+ * 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.
+ */
+
+#include <QtCore/QDebug>
+#include <QtCore/QCommandLineParser>
+#include <QtCore/QUrlQuery>
+#include <QtCore/QFile>
+#include <QtDBus/QDBusInterface>
+#include <QtDBus/QDBusReply>
+#include <QtGui/QGuiApplication>
+#include <QtQml/QQmlApplicationEngine>
+#include <QtQml/QQmlContext>
+#include <QtQuickControls2/QQuickStyle>
+#include <QQuickWindow>
+#include <libhomescreen.hpp>
+#include <bluetooth.h>
+#include <network.h>
+#include <qlibwindowmanager.h>
+
+class DBus : public QObject
+{
+    Q_OBJECT
+public:
+    DBus(QObject *parent = nullptr)
+        : QObject(parent)
+        , interface("org.agl.homescreen", "/StatusBar", "org.agl.statusbar", QDBusConnection::sessionBus())
+    {}
+
+    Q_INVOKABLE void setStatusIcon(int index, const QString &url) {
+        interface.call("setStatusIcon", index, url);
+    }
+
+private:
+    QDBusInterface interface;
+};
+
+int main(int argc, char *argv[])
+{
+    QString myname = QString("Settings");
+
+    QGuiApplication app(argc, argv);
+    app.setApplicationName(myname);
+    app.setApplicationVersion(QStringLiteral("0.1.0"));
+    app.setOrganizationDomain(QStringLiteral("automotivelinux.org"));
+    app.setOrganizationName(QStringLiteral("AutomotiveGradeLinux"));
+
+    QQuickStyle::setStyle("AGL");
+
+    QCommandLineParser parser;
+    parser.addPositionalArgument("port", app.translate("main", "port for binding"));
+    parser.addPositionalArgument("secret", app.translate("main", "secret for binding"));
+    parser.addHelpOption();
+    parser.addVersionOption();
+    parser.process(app);
+    QStringList positionalArguments = parser.positionalArguments();
+
+    QQmlApplicationEngine engine;
+    if (positionalArguments.length() != 2) {
+        exit(EXIT_FAILURE);
+    }
+    int port = positionalArguments.takeFirst().toInt();
+    QString secret = positionalArguments.takeFirst();
+    QUrlQuery query;
+    query.addQueryItem(QStringLiteral("token"), secret);
+
+    QUrl bindingAddressWS;
+    bindingAddressWS.setScheme(QStringLiteral("ws"));
+    bindingAddressWS.setHost(QStringLiteral("localhost"));
+    bindingAddressWS.setPort(port);
+    bindingAddressWS.setPath(QStringLiteral("/api"));
+    bindingAddressWS.setQuery(query);
+    QQmlContext *context = engine.rootContext();
+    context->setContextProperty(QStringLiteral("bindingAddressWS"), bindingAddressWS);
+    context->setContextProperty("network", new Network(bindingAddressWS, context));
+
+    std::string token = secret.toStdString();
+    LibHomeScreen* hs = new LibHomeScreen();
+    QLibWindowmanager* qwm = new QLibWindowmanager();
+
+    // WindowManager
+    if(qwm->init(port,secret) != 0) {
+        exit(EXIT_FAILURE);
+    }
+    AGLScreenInfo screenInfo(qwm->get_scale_factor());
+    // Request a surface as described in layers.json windowmanager’s file
+    if(qwm->requestSurface(myname) != 0) {
+        exit(EXIT_FAILURE);
+    }
+    // Create an event callback against an event type. Here a lambda is called when SyncDraw event occurs
+    qwm->set_event_handler(QLibWindowmanager::Event_SyncDraw, [qwm, myname](json_object *object) {
+	  fprintf(stderr, "Surface got syncDraw!\n");
+	  qwm->endDraw(myname);
+      });
+
+    // HomeScreen
+    hs->init(port, token.c_str());
+    // Set the event handler for Event_TapShortcut which will activate the surface for windowmanager
+    hs->set_event_handler(LibHomeScreen::Event_TapShortcut, [qwm, myname](json_object *object){
+        qwm->activateSurface(myname);
+    });
+
+    QFile version("/proc/version");
+    if (version.open(QFile::ReadOnly)) {
+        QStringList data = QString::fromLocal8Bit(version.readAll()).split(QLatin1Char(' '));
+        engine.rootContext()->setContextProperty("kernel", data.at(2));
+        version.close();
+    } else {
+        qWarning() << version.errorString();
+    }
+
+    QFile aglversion("/etc/os-release");
+    if (aglversion.open(QFile::ReadOnly)) {
+        QStringList data = QString::fromLocal8Bit(aglversion.readAll()).split(QLatin1Char('\n'));
+        QStringList data2 = data.at(2).split(QLatin1Char('"'));
+        engine.rootContext()->setContextProperty("ucb", data2.at(1));
+        aglversion.close();
+    } else {
+        qWarning() << aglversion.errorString();
+    }
+
+    DBus dbus;
+    engine.rootContext()->setContextProperty("dbus", &dbus);
+    engine.rootContext()->setContextProperty("bluetooth", new Bluetooth(bindingAddressWS));
+    engine.rootContext()->setContextProperty(QStringLiteral("screenInfo"), &screenInfo);
+    engine.load(QUrl(QStringLiteral("qrc:/Settings.qml")));
+    QObject *root = engine.rootObjects().first();
+    QQuickWindow *window = qobject_cast<QQuickWindow *>(root);
+    QObject::connect(window, SIGNAL(frameSwapped()), qwm, SLOT(slotActivateSurface()));
+
+    return app.exec();
+}
+
+#include "main.moc"
diff --git a/app/settings.qrc b/app/settings.qrc
new file mode 100644
index 0000000..189f441
--- /dev/null
+++ b/app/settings.qrc
@@ -0,0 +1,7 @@
+<RCC>
+    <qresource prefix="/">
+        <file>Settings.qml</file>
+        <file>SettingsLauncher.qml</file>
+        <file>SettingPage.qml</file>
+    </qresource>
+</RCC>
diff --git a/app/version/Version.qml b/app/version/Version.qml
new file mode 100644
index 0000000..8d47ad5
--- /dev/null
+++ b/app/version/Version.qml
@@ -0,0 +1,78 @@
+/*
+ * 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 QtQuick.Window 2.2
+import AGL.Demo.Controls 1.0
+import '..'
+
+SettingPage {
+    id: root
+    icon: '/version/images/icon.svg'
+    title: 'Version Info'
+
+    ColumnLayout {
+        id: container
+        anchors.fill: parent
+        anchors.margins: 100
+        Label {
+            Layout.fillWidth: true
+            Layout.preferredHeight: 500
+            text: 'Automotive\nGrade Linux'
+            font.pixelSize: 128
+            horizontalAlignment: Label.AlignHCenter
+            verticalAlignment: Label.AlignVCenter
+            clip: true
+            Image {
+                anchors.centerIn: parent
+                source: './images/agl_slide_0.png'
+                z: -1
+                opacity: 0.5
+            }
+        }
+
+        GridLayout {
+            columns: 2
+            rowSpacing: 20
+            columnSpacing: 20
+            Label {
+                text: 'AGL:'
+                font.pixelSize: 48
+            }
+            Label {
+                text: ucb
+                font.pixelSize: 48
+                Layout.fillWidth: true
+            }
+            Label {
+                text: 'Kernel:'
+                font.pixelSize: 48
+            }
+            Label {
+                text: kernel
+                font.pixelSize: 48
+                Layout.fillWidth: true
+            }
+        }
+
+        Item {
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+        }
+    }
+}
diff --git a/app/version/images/agl_slide_0.png b/app/version/images/agl_slide_0.png
new file mode 100644
index 0000000..6fd062d
--- /dev/null
+++ b/app/version/images/agl_slide_0.png
diff --git a/app/version/images/icon.svg b/app/version/images/icon.svg
new file mode 100644
index 0000000..97758e9
--- /dev/null
+++ b/app/version/images/icon.svg
@@ -0,0 +1,182 @@
+<?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 215 215"
+   style="enable-background:new 0 0 215 215;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="icon.svg"><metadata
+     id="metadata83"><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="defs81" /><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="namedview79"
+     showgrid="false"
+     inkscape:zoom="1.0976744"
+     inkscape:cx="-373.06144"
+     inkscape:cy="107.5"
+     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:#8BC53F;}
+	.st1{fill:#FFFFFF;}
+</style><switch
+     id="switch5"><g
+       i:extraneous="self"
+       id="g7"><g
+         id="g9"><path
+           class="st0"
+           d="M113.3,150.3h4.2v15.3h9.5v3.8h-13.7V150.3z"
+           id="path11" /><path
+           class="st0"
+           d="M130.4,150.3h4.2v19.1h-4.2V150.3z"
+           id="path13" /><path
+           class="st0"
+           d="M139.4,150.3h3.9l9,11.8v-11.8h4.2v19.1h-3.6l-9.3-12.2v12.2h-4.2V150.3z"
+           id="path15" /><path
+           class="st0"
+           d="M168.9,169.7c-2.6,0-4.6-0.7-6.1-2.1c-1.5-1.4-2.2-3.5-2.2-6.4v-10.9h4.2v10.8c0,1.6,0.4,2.7,1.1,3.5     c0.7,0.8,1.7,1.2,3,1.2c1.3,0,2.3-0.4,3-1.1c0.7-0.8,1.1-1.9,1.1-3.4v-11h4.2v10.8c0,1.5-0.2,2.7-0.6,3.8c-0.4,1.1-1,2-1.7,2.7     c-0.7,0.7-1.6,1.3-2.7,1.6C171.4,169.5,170.2,169.7,168.9,169.7z"
+           id="path17" /><path
+           class="st0"
+           d="M186.8,159.7l-6.4-9.4h4.9l4,6.2l4-6.2h4.8l-6.4,9.3l6.7,9.8h-4.9l-4.3-6.6l-4.3,6.6h-4.8L186.8,159.7z"
+           id="path19" /><path
+           class="st1"
+           d="M24.1,126.9h2l8.4,18.6h-2.2l-2.2-4.9H20l-2.2,4.9h-2.1L24.1,126.9z M29.2,138.7l-4.2-9.4l-4.2,9.4H29.2z"
+           id="path21" /><path
+           class="st1"
+           d="M37.2,137.7V127h2.1v10.6c0,4,2.1,6.2,5.6,6.2c3.4,0,5.6-2.1,5.6-6.1V127h2.1v10.6c0,5.4-3.1,8.2-7.7,8.2     C40.3,145.7,37.2,142.9,37.2,137.7z"
+           id="path23" /><path
+           class="st1"
+           d="M62.4,128.9h-6.2V127h14.5v1.9h-6.2v16.5h-2.1V128.9z"
+           id="path25" /><path
+           class="st1"
+           d="M72.5,136.3L72.5,136.3c0-5.1,3.8-9.6,9.4-9.6c5.6,0,9.4,4.4,9.4,9.5c0,0,0,0,0,0.1c0,5.1-3.8,9.5-9.4,9.5     C76.3,145.8,72.5,141.4,72.5,136.3z M89.2,136.3L89.2,136.3c0-4.2-3.1-7.7-7.3-7.7c-4.2,0-7.2,3.4-7.2,7.6v0.1     c0,4.2,3.1,7.6,7.3,7.6C86.1,143.8,89.2,140.5,89.2,136.3z"
+           id="path27" /><path
+           class="st1"
+           d="M95.7,127h2.1l6.7,10.1l6.7-10.1h2.1v18.5h-2.1v-15l-6.7,9.9h-0.1l-6.7-9.9v14.9h-2V127z"
+           id="path29" /><path
+           class="st1"
+           d="M144.7,128.9h-6.2V127H153v1.9h-6.2v16.5h-2.1V128.9z"
+           id="path31" /><path
+           class="st1"
+           d="M157.1,127h2.1v18.5h-2.1V127z"
+           id="path33" /><path
+           class="st1"
+           d="M163,127h2.3l6.6,15.9l6.6-15.9h2.2l-7.9,18.6h-1.8L163,127z"
+           id="path35" /><path
+           class="st1"
+           d="M184.3,127h13.3v1.9h-11.3v6.3h10.1v1.9h-10.1v6.5h11.4v1.9h-13.5V127z"
+           id="path37" /><rect
+           x="105.1"
+           y="55.1"
+           class="st1"
+           width="3.8"
+           height="16.8"
+           id="rect39" /><rect
+           x="68.8"
+           y="69.6"
+           transform="matrix(0.707 -0.7072 0.7072 0.707 -34.4212 72.8166)"
+           class="st1"
+           width="3.8"
+           height="16.8"
+           id="rect41" /><rect
+           x="154.6"
+           y="104.5"
+           class="st1"
+           width="16.8"
+           height="3.8"
+           id="rect43" /><rect
+           x="46.9"
+           y="104.5"
+           class="st1"
+           width="16.8"
+           height="3.8"
+           id="rect45" /><path
+           class="st1"
+           d="M43.2,113.9c2.1-34.7,31-62.4,66.2-62.4c35.2,0,64.2,27.6,66.2,62.4h6.4c-2.1-38.3-33.8-68.8-72.6-68.8     s-70.5,30.5-72.6,68.8H43.2z"
+           id="path47" /><circle
+           class="st0"
+           cx="107"
+           cy="114.9"
+           r="6.7"
+           id="circle49" /><rect
+           x="106.6"
+           y="88.5"
+           transform="matrix(0.7071 -0.7071 0.7071 0.7071 -25.0917 120.249)"
+           class="st0"
+           width="52"
+           height="3.8"
+           id="rect51" /><rect
+           x="86.4"
+           y="78"
+           class="st0"
+           width="9.2"
+           height="9.2"
+           id="rect53" /><rect
+           x="97.1"
+           y="78"
+           class="st0"
+           width="9.2"
+           height="9.2"
+           id="rect55" /><rect
+           x="107.8"
+           y="78"
+           class="st0"
+           width="9.2"
+           height="9.2"
+           id="rect57" /><rect
+           x="118.4"
+           y="78"
+           class="st0"
+           width="9.2"
+           height="9.2"
+           id="rect59" /><g
+           id="g61"><path
+             class="st1"
+             d="M34.6,153.7l-1.5,1.4c-1.1-1-2.2-1.8-3.5-2.4c-1.3-0.5-2.5-0.8-3.7-0.8c-1.5,0-2.9,0.4-4.2,1.1      c-1.3,0.7-2.4,1.7-3.1,3c-0.7,1.2-1.1,2.6-1.1,4c0,1.4,0.4,2.8,1.1,4.1c0.8,1.3,1.8,2.3,3.2,3c1.3,0.7,2.8,1.1,4.4,1.1      c1.9,0,3.6-0.5,4.9-1.6c1.3-1.1,2.1-2.5,2.4-4.3h-6v-1.8h8.2c0,2.9-0.9,5.2-2.6,7c-1.7,1.7-4,2.6-6.9,2.6      c-3.5,0-6.3-1.2-8.3-3.6c-1.6-1.8-2.4-4-2.4-6.4c0-1.8,0.5-3.5,1.4-5c0.9-1.5,2.1-2.8,3.7-3.6c1.6-0.9,3.3-1.3,5.3-1.3      c1.6,0,3.1,0.3,4.5,0.9C31.9,151.5,33.3,152.4,34.6,153.7z"
+             id="path63" /><path
+             class="st1"
+             d="M39.4,150.5h3.8c2.1,0,3.5,0.1,4.3,0.3c1.1,0.3,2,0.8,2.7,1.7c0.7,0.8,1.1,1.9,1.1,3.1c0,1-0.2,1.9-0.7,2.7      c-0.5,0.8-1.2,1.4-2.1,1.8c-0.9,0.4-2.1,0.6-3.7,0.6l6.8,8.8h-2.3l-6.8-8.8h-1.1v8.8h-1.9V150.5z M41.3,152.3v6.4l3.3,0      c1.3,0,2.2-0.1,2.8-0.4c0.6-0.2,1.1-0.6,1.4-1.2c0.3-0.5,0.5-1.1,0.5-1.8c0-0.6-0.2-1.2-0.5-1.7s-0.8-0.9-1.4-1.1      c-0.6-0.2-1.5-0.3-2.8-0.3H41.3z"
+             id="path65" /><path
+             class="st1"
+             d="M63.1,150.5l8.8,18.9h-2l-3-6.2h-8.2l-2.9,6.2h-2.1l8.9-18.9H63.1z M62.8,154.5l-3.2,6.9H66L62.8,154.5z"
+             id="path67" /><path
+             class="st1"
+             d="M74.8,169.4v-18.9h3.9c2.8,0,4.9,0.2,6.2,0.7c1.8,0.6,3.3,1.8,4.3,3.3c1,1.6,1.6,3.5,1.6,5.7      c0,1.9-0.4,3.6-1.2,5c-0.8,1.4-1.9,2.5-3.2,3.2c-1.3,0.7-3.1,1-5.5,1H74.8z M76.6,167.6h2.2c2.6,0,4.4-0.2,5.4-0.5      c1.4-0.5,2.5-1.3,3.4-2.5c0.8-1.2,1.2-2.7,1.2-4.4c0-1.8-0.4-3.4-1.3-4.7c-0.9-1.3-2.1-2.2-3.7-2.7c-1.2-0.4-3.1-0.5-5.9-0.5      h-1.3V167.6z"
+             id="path69" /><path
+             class="st1"
+             d="M94.5,150.5h10.9v1.9h-9v5.9h8.9v1.9h-8.9v7.4h8.9v1.9H94.5V150.5z"
+             id="path71" /></g><g
+           id="g73"><polygon
+             class="st1"
+             points="120.9,141.8 120.9,134.4 117.2,134.4 117.2,145.4 128.2,145.4 128.2,141.8     "
+             id="polygon75" /><polygon
+             class="st1"
+             points="135.6,127 117.2,127 117.2,132.6 120.9,132.6 120.9,130.7 131.9,130.7 131.9,141.8 130.1,141.8       130.1,145.4 135.6,145.4     "
+             id="polygon77" /></g></g></g></switch></svg>
\ No newline at end of file
diff --git a/app/version/version.qrc b/app/version/version.qrc
new file mode 100644
index 0000000..0453cc0
--- /dev/null
+++ b/app/version/version.qrc
@@ -0,0 +1,7 @@
+<RCC>
+    <qresource prefix="/version">
+        <file>Version.qml</file>
+        <file>images/icon.svg</file>
+        <file>images/agl_slide_0.png</file>
+    </qresource>
+</RCC>
diff --git a/app/wifi/Wifi.qml b/app/wifi/Wifi.qml
new file mode 100644
index 0000000..85e8b60
--- /dev/null
+++ b/app/wifi/Wifi.qml
@@ -0,0 +1,175 @@
+/*
+ * Copyright (C) 2016 The Qt Company Ltd.
+ * Copyright (C) 2018 Konsulko Group
+ *
+ * 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 AGL.Demo.Controls 1.0
+import ".."
+
+SettingPage {
+    id: root
+    icon: '/wifi/images/HMI_Settings_WifiIcon.svg'
+    title: 'Wifi'
+    checkable: true
+    checked: network.wifiEnabled
+    readonly property bool isWifi: true
+
+    onCheckedChanged: {
+        network.power(checked)
+    }
+
+    Component {
+        id: wifiDevice
+        MouseArea {
+            height: 120
+            width: ListView.view.width
+            Image {
+                anchors.left: parent.left
+                id: icon
+                source: {
+                    var svg
+                    if (strength < 30)
+                        svg = "1Bar"
+                    else if (strength < 50)
+                        svg = "2Bars"
+                    else if (strength < 70)
+                        svg = "3Bars"
+                    else
+                        svg = "Full"
+                    if (security === "Open") {
+                        return 'images/HMI_Settings_Wifi_%1.svg'.arg(svg)
+                    } else {
+                        return 'images/HMI_Settings_Wifi_Locked_%1.svg'.arg(svg)
+                    }
+                }
+            }
+            Column {
+                anchors.left: icon.right
+                anchors.leftMargin: 5
+                Label {
+                    id: networkNameText
+                    text: ssid
+                    color: '#66FF99'
+                    font.pixelSize: 48
+                    font.bold: sstate === "ready"
+                               || sstate === "online"
+                }
+                Label {
+                    visible: sstate === "ready"
+                             || sstate === "online"
+                    text: "connected, " + address
+                    font.pixelSize: 18
+                    color: "white"
+                }
+            }
+
+            onClicked: {
+                if ((sstate === "ready") || sstate === "online") {
+                    console.log("Disconnecting from ", ssid, " (", service, ")")
+                    networkNameText.font.italic = 1
+                    network.disconnect(service)
+                } else {
+                    console.log("Connecting to ", ssid, " (", service, ")")
+                    networkNameText.font.italic = 1
+                    network.connect(service)
+                }
+            }
+
+            Image {
+                source: '../images/HMI_Settings_DividingLine.svg'
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.top: parent.top
+                anchors.topMargin: -15
+                visible: model.index > 0
+            }
+        }
+    }
+
+    ListView {
+        id: view
+        anchors.fill: parent
+        anchors.margins: 100
+        model: WifiNetworkModel
+        delegate: wifiDevice
+        clip: true
+    }
+
+    MouseArea {
+        id: dialog
+        anchors.fill: parent
+        visible: false
+        z: 1
+        onVisibleChanged: {
+            if (visible) {
+                password.forceActiveFocus()
+            } else {
+                password.text = ''
+            }
+        }
+
+        ColumnLayout {
+            anchors.fill: parent
+            Item {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                Layout.preferredHeight: 1
+                Rectangle {
+                    anchors.fill: parent
+                    color: 'black'
+                    opacity: 0.5
+                }
+                RowLayout {
+                    anchors.centerIn: parent
+                    TextField {
+                        id: password
+                        property int reqid: 0
+                        placeholderText: 'Password'
+                    }
+                    Button {
+                        text: 'Connect'
+                        highlighted: true
+                        onClicked: {
+                            network.input(password.reqid, password.text)
+                            dialog.visible = false
+                        }
+                    }
+                    Button {
+                        text: 'Cancel'
+                        onClicked: dialog.visible = false
+                    }
+                }
+            }
+
+            Keyboard {
+                id: keyboard
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                Layout.preferredHeight: 1
+                target: activeFocusControl
+            }
+        }
+    }
+
+    Connections {
+        target: network
+        onInputRequest: {
+            password.reqid = id
+            dialog.visible = true
+        }
+    }
+}
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>
diff --git a/package/config.xml b/package/config.xml
new file mode 100644
index 0000000..4ca6eaa
--- /dev/null
+++ b/package/config.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<widget xmlns="http://www.w3.org/ns/widgets" id="settings" version="0.1">
+  <name>Settings</name>
+  <icon src="icon.svg"/>
+  <content src="bin/settings" type="application/vnd.agl.native"/>
+  <description>This is the settings application for date &amp; time, wifi and bluetooth</description>
+  <author>Tasuku Suzuki &lt;tasuku.suzuki@qt.io&gt;</author>
+  <license>APL 2.0</license>
+  <feature name="urn:AGL:widget:required-api">
+    <param name="windowmanager" value="ws" />
+    <param name="homescreen" value="ws" />
+    <param name="network-manager" value="ws" />
+    <param name="Bluetooth-Manager" value="ws" />
+  </feature>
+  <feature name="urn:AGL:widget:required-permission">
+    <param name="urn:AGL:permission::public:no-htdocs" value="required" />
+  </feature>
+</widget>
+
+
diff --git a/package/icon.svg b/package/icon.svg
new file mode 100644
index 0000000..6628784
--- /dev/null
+++ b/package/icon.svg
@@ -0,0 +1,283 @@
+<?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"
+   x="0px"
+   y="0px"
+   viewBox="0 0 320 320"
+   style="enable-background:new 0 0 320 320;"
+   xml:space="preserve"
+   id="svg2"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="icon.svg"><metadata
+     id="metadata1292"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs1290" /><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="namedview1288"
+     showgrid="false"
+     inkscape:zoom="0.7375"
+     inkscape:cx="-697.62712"
+     inkscape:cy="160"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" /><style
+     type="text/css"
+     id="style4">
+	.st0{display:none;}
+	.st1{display:inline;}
+	.st2{opacity:0.4;fill:url(#SVGID_1_);}
+	.st3{fill:url(#SVGID_2_);}
+	.st4{fill:#FFFFFF;}
+	.st5{font-family:'Roboto-Regular';}
+	.st6{font-size:25px;}
+	.st7{letter-spacing:6;}
+	.st8{fill:url(#SVGID_3_);}
+	.st9{fill:url(#SVGID_4_);}
+	.st10{fill:url(#SVGID_5_);}
+	.st11{fill:url(#SVGID_6_);}
+	.st12{fill:url(#SVGID_7_);}
+	.st13{fill:url(#SVGID_8_);}
+	.st14{fill:url(#SVGID_9_);}
+	.st15{fill:url(#SVGID_10_);}
+	.st16{fill:url(#SVGID_11_);}
+	.st17{fill:url(#SVGID_12_);}
+	.st18{fill:url(#SVGID_13_);}
+	.st19{fill:url(#SVGID_14_);}
+	.st20{fill:url(#SVGID_15_);}
+	.st21{fill:url(#SVGID_16_);}
+	.st22{fill:url(#SVGID_17_);}
+	.st23{fill:url(#SVGID_18_);}
+	.st24{opacity:0.29;}
+	.st25{fill:url(#SVGID_19_);}
+	.st26{fill:url(#SVGID_20_);}
+	.st27{fill:url(#SVGID_21_);}
+	.st28{fill:url(#SVGID_22_);}
+	.st29{fill:url(#SVGID_23_);}
+	.st30{fill:url(#SVGID_24_);}
+	.st31{fill:url(#SVGID_25_);}
+	.st32{fill:url(#SVGID_26_);}
+	.st33{fill:url(#SVGID_27_);}
+	.st34{fill:url(#SVGID_28_);}
+	.st35{fill:url(#SVGID_29_);}
+	.st36{fill:url(#SVGID_30_);}
+	.st37{fill:url(#SVGID_31_);}
+	.st38{fill:url(#SVGID_32_);}
+	.st39{fill:url(#SVGID_33_);}
+	.st40{fill:url(#SVGID_34_);}
+	.st41{fill:url(#SVGID_35_);}
+	.st42{fill:url(#SVGID_36_);}
+	.st43{opacity:0.4;fill:url(#SVGID_37_);}
+	.st44{fill:url(#SVGID_38_);}
+	.st45{fill:url(#SVGID_39_);}
+	.st46{fill:url(#SVGID_40_);}
+	.st47{fill:url(#SVGID_41_);}
+	.st48{fill:url(#SVGID_42_);}
+	.st49{fill:url(#SVGID_43_);}
+	.st50{fill:url(#SVGID_44_);}
+	.st51{display:inline;opacity:0.29;}
+	.st52{display:inline;fill:url(#SVGID_45_);}
+	.st53{display:inline;fill:url(#SVGID_46_);}
+	.st54{display:inline;fill:#FFFFFF;}
+	.st55{display:inline;fill:url(#SVGID_47_);}
+	.st56{display:inline;fill:url(#SVGID_48_);}
+	.st57{display:inline;fill:url(#SVGID_49_);}
+	.st58{display:inline;fill:url(#SVGID_50_);}
+	.st59{display:inline;fill:url(#SVGID_51_);}
+	.st60{display:inline;fill:url(#SVGID_52_);}
+	.st61{opacity:0.4;fill:url(#SVGID_53_);}
+	.st62{fill:url(#SVGID_54_);}
+	.st63{fill:url(#SVGID_55_);}
+	.st64{fill:url(#SVGID_56_);}
+	.st65{fill:url(#SVGID_57_);}
+	.st66{fill:url(#SVGID_58_);}
+	.st67{opacity:0.4;fill:url(#SVGID_59_);}
+	.st68{fill:url(#SVGID_60_);}
+	.st69{fill:url(#SVGID_61_);}
+	.st70{fill:url(#SVGID_62_);}
+	.st71{fill:url(#SVGID_63_);}
+	.st72{fill:url(#SVGID_64_);}
+	.st73{fill:url(#SVGID_65_);}
+	.st74{fill:url(#SVGID_66_);}
+	.st75{fill:url(#SVGID_67_);}
+	.st76{fill:url(#SVGID_68_);}
+	.st77{fill:url(#SVGID_69_);}
+	.st78{fill:url(#SVGID_70_);}
+	.st79{fill:url(#SVGID_71_);}
+	.st80{fill:url(#SVGID_72_);}
+	.st81{fill:url(#SVGID_73_);}
+	.st82{fill:url(#SVGID_74_);}
+	.st83{fill:url(#SVGID_75_);}
+	.st84{fill:url(#SVGID_76_);}
+	.st85{fill:url(#SVGID_77_);}
+	.st86{fill:url(#SVGID_78_);}
+	.st87{fill:url(#SVGID_79_);}
+	.st88{fill:url(#SVGID_80_);}
+	.st89{fill:url(#SVGID_81_);}
+	.st90{fill:url(#SVGID_82_);}
+	.st91{fill:url(#SVGID_83_);}
+	.st92{fill:url(#SVGID_84_);}
+	.st93{fill:url(#SVGID_85_);}
+	.st94{fill:url(#SVGID_86_);}
+	.st95{opacity:0.4;fill:url(#SVGID_87_);}
+	.st96{fill:url(#SVGID_88_);}
+	.st97{fill:url(#SVGID_89_);}
+	.st98{fill:url(#SVGID_90_);}
+	.st99{display:inline;fill:url(#SVGID_91_);}
+	.st100{display:inline;fill:url(#SVGID_92_);}
+	.st101{fill:url(#SVGID_93_);}
+	.st102{fill:url(#SVGID_94_);}
+	.st103{opacity:0.4;fill:url(#SVGID_95_);}
+	.st104{fill:url(#SVGID_96_);}
+	.st105{fill:url(#SVGID_97_);}
+	.st106{fill:url(#SVGID_98_);}
+	.st107{fill:url(#SVGID_99_);}
+	.st108{fill:url(#SVGID_100_);}
+	.st109{fill:url(#SVGID_101_);}
+	.st110{display:inline;fill:url(#SVGID_102_);}
+	.st111{display:inline;fill:url(#SVGID_103_);}
+	.st112{fill:url(#SVGID_104_);}
+	.st113{fill:url(#SVGID_105_);}
+	.st114{fill:url(#SVGID_106_);}
+	.st115{fill:url(#SVGID_107_);}
+	.st116{fill:url(#SVGID_108_);}
+	.st117{opacity:0.4;fill:url(#SVGID_109_);}
+	.st118{fill:url(#SVGID_110_);}
+	.st119{fill:url(#SVGID_111_);}
+	.st120{fill:url(#SVGID_112_);}
+	.st121{fill:url(#SVGID_113_);}
+	.st122{fill:url(#SVGID_114_);}
+	.st123{opacity:0.4;fill:url(#SVGID_115_);}
+	.st124{fill:url(#SVGID_116_);}
+	.st125{fill:url(#SVGID_117_);}
+	.st126{fill:url(#SVGID_118_);}
+	.st127{fill:url(#SVGID_119_);}
+	.st128{fill:url(#SVGID_120_);}
+	.st129{fill:url(#SVGID_121_);}
+	.st130{fill:url(#SVGID_122_);}
+</style><switch
+     id="switch6"><g
+       i:extraneous="self"
+       id="g8"><g
+         id="Settings_Active"><circle
+           class="st24"
+           cx="159.7"
+           cy="133.4"
+           r="101.9"
+           id="circle1230" /><linearGradient
+           id="SVGID_119_"
+           gradientUnits="userSpaceOnUse"
+           x1="115.9317"
+           y1="254.1836"
+           x2="256.3852"
+           y2="-133.5267"><stop
+             offset="0"
+             style="stop-color:#8BC53F"
+             id="stop1233" /><stop
+             offset="2.015080e-02"
+             style="stop-color:#7CCB56;stop-opacity:0.9678"
+             id="stop1235" /><stop
+             offset="6.089833e-02"
+             style="stop-color:#62D67D;stop-opacity:0.9028"
+             id="stop1237" /><stop
+             offset="0.1057"
+             style="stop-color:#4BDFA0;stop-opacity:0.8312"
+             id="stop1239" /><stop
+             offset="0.1543"
+             style="stop-color:#38E7BE;stop-opacity:0.7537"
+             id="stop1241" /><stop
+             offset="0.2077"
+             style="stop-color:#28EED6;stop-opacity:0.6684"
+             id="stop1243" /><stop
+             offset="0.2681"
+             style="stop-color:#1CF3E8;stop-opacity:0.572"
+             id="stop1245" /><stop
+             offset="0.3394"
+             style="stop-color:#13F6F5;stop-opacity:0.4581"
+             id="stop1247" /><stop
+             offset="0.4323"
+             style="stop-color:#0EF8FD;stop-opacity:0.3098"
+             id="stop1249" /><stop
+             offset="0.6264"
+             style="stop-color:#0DF9FF;stop-opacity:0"
+             id="stop1251" /></linearGradient><circle
+           class="st127"
+           cx="159.7"
+           cy="133.4"
+           r="101.9"
+           id="circle1253" /><linearGradient
+           id="SVGID_120_"
+           gradientUnits="userSpaceOnUse"
+           x1="4.0481"
+           y1="287.9492"
+           x2="320.4859"
+           y2="-15.4029"
+           gradientTransform="matrix(1 5.464556e-03 -5.464556e-03 1 -2.0192 -3.0212)"><stop
+             offset="0"
+             style="stop-color:#59FF7F"
+             id="stop1256" /><stop
+             offset="1"
+             style="stop-color:#6BFBFF"
+             id="stop1258" /></linearGradient><path
+           class="st128"
+           d="M160,238.8c-0.2,0-0.4,0-0.6,0c-58-0.3-104.9-47.7-104.6-105.7C55.2,75.3,102.3,28.5,160,28.5     c0.2,0,0.4,0,0.6,0c58,0.3,104.9,47.7,104.6,105.7l0,0C264.8,192,217.7,238.8,160,238.8z M160,32.2     c-55.7,0-101.2,45.2-101.5,100.9c-0.3,55.9,45,101.7,100.9,102c0.2,0,0.4,0,0.6,0c55.7,0,101.2-45.2,101.5-100.9     c0.3-55.9-45-101.7-100.9-102C160.4,32.2,160.2,32.2,160,32.2z"
+           id="path1260" /><g
+           id="g1262"><text
+             transform="matrix(1 0 0 1 75.4379 284.7129)"
+             class="st4 st5 st6 st7"
+             id="text1264">SETTINGS</text>
+<g
+             id="g1266"><g
+               id="g1268"><g
+                 id="g1270"><linearGradient
+                   id="SVGID_121_"
+                   gradientUnits="userSpaceOnUse"
+                   x1="79.1804"
+                   y1="226.0817"
+                   x2="282.752"
+                   y2="-4.8609"><stop
+                     offset="0"
+                     style="stop-color:#59FF7F"
+                     id="stop1273" /><stop
+                     offset="1"
+                     style="stop-color:#6BFBFF"
+                     id="stop1275" /></linearGradient><path
+                   class="st129"
+                   d="M159.9,163.9c-16.3,0-29.5-13.2-29.5-29.4s13.2-29.4,29.5-29.4v3.9c-14.1,0-25.5,11.4-25.5,25.5         c0,14,11.5,25.5,25.5,25.5c14.1,0,25.6-11.4,25.6-25.5h3.9C189.4,150.7,176.2,163.9,159.9,163.9z"
+                   id="path1277" /></g><g
+                 id="g1279"><linearGradient
+                   id="SVGID_122_"
+                   gradientUnits="userSpaceOnUse"
+                   x1="79.2457"
+                   y1="226.1393"
+                   x2="282.8174"
+                   y2="-4.8033"><stop
+                     offset="0"
+                     style="stop-color:#59FF7F"
+                     id="stop1282" /><stop
+                     offset="1"
+                     style="stop-color:#6BFBFF"
+                     id="stop1284" /></linearGradient><path
+                   class="st130"
+                   d="M171.7,197.4h-23.4c-2.2,0-4-1.8-4-3.9V181c-2-0.7-4-1.5-6-2.5l-8.8,8.8c-1.5,1.5-4,1.5-5.6-0.1         l-16.6-16.6c-1.6-1.6-1.6-4.1-0.1-5.6l8.7-8.7c-1-2-1.8-4-2.5-6.1h-12.3c-2.2,0-3.9-1.8-3.9-4v-23.4c0-2.2,1.8-4,3.9-4h12.3         c0.9-2.6,1.9-5.1,3.2-7.4l3.5,1.8c-1.4,2.6-2.5,5.3-3.4,8.1l-0.4,1.4h-15.2l0,23.5l15.2,0.1l0.4,1.4c0.9,2.8,2,5.5,3.4,8         l0.7,1.3L110,167.8l16.6,16.6l10.9-10.8l1.3,0.7c2.6,1.4,5.2,2.5,8,3.3l1.4,0.4v15.4l23.5,0l0.1-15.4l1.4-0.4         c2.7-0.8,5.4-1.9,7.9-3.3l1.3-0.7l10.9,10.9l16.6-16.6l-10.8-11l0.7-1.3c1.4-2.6,2.5-5.2,3.3-7.9l0.4-1.4h15.4l0-23.5         l-15.3-0.1l-0.4-1.4c-0.8-2.8-1.9-5.5-3.3-8l-0.7-1.3l10.8-10.8l-16.6-16.6l-10.8,10.7l-1.3-0.7c-2.6-1.4-5.3-2.5-8.1-3.4         l-1.4-0.4V75.6l-23.5,0l-0.1,15.1l-1.4,0.4c-2.8,0.9-5.6,2-8.1,3.4l-1.3,0.7l-10.7-10.7L107.2,104c-1.5-1.5-1.5-4,0.1-5.6         l16.5-16.5c0.8-0.8,1.8-1.3,2.9-1.2c1,0,2,0.4,2.7,1.1l8.7,8.6c2-1,4-1.8,6.2-2.5V75.6c0-2.2,1.8-3.9,4-3.9h23.4         c2.2,0,4,1.8,4,3.9v12.3c2.1,0.7,4.1,1.6,6.1,2.5l8.7-8.7c0.7-0.7,1.7-1.1,2.7-1.1h0c1.1,0,2.1,0.4,2.9,1.2l16.6,16.6         c0.8,0.8,1.2,1.8,1.2,2.9c0,1-0.4,2-1.1,2.7l-8.8,8.8c1,2,1.8,4,2.5,6h12.4c2.2,0,3.9,1.8,3.9,4v23.4c0,2.2-1.8,4-3.9,4         h-12.5c-0.7,2-1.5,4-2.5,6l8.9,8.9c1.5,1.5,1.5,4-0.1,5.6l-16.6,16.6c-0.8,0.8-1.8,1.2-2.9,1.2h0c-1,0-2-0.4-2.7-1.1         l-8.9-8.9c-1.9,1-3.9,1.8-5.9,2.5v12.5C175.7,195.6,173.9,197.4,171.7,197.4z"
+                   id="path1286" /></g></g></g></g></g></g></switch></svg>
\ No newline at end of file
diff --git a/package/package.pro b/package/package.pro
new file mode 100644
index 0000000..125a378
--- /dev/null
+++ b/package/package.pro
@@ -0,0 +1,21 @@
+
+DISTFILES = icon.svg config.xml
+
+!equals($$_PRO_FILE_PWD_, $$OUT_PWD) {
+    copy_icon.target = $$OUT_PWD/root/icon.svg
+    copy_icon.depends = $$_PRO_FILE_PWD_/icon.svg
+    copy_icon.commands = $(COPY_FILE) \"$$replace(copy_icon.depends, /, $$QMAKE_DIR_SEP)\" \"$$replace(copy_icon.target, /, $$QMAKE_DIR_SEP)\"
+    QMAKE_EXTRA_TARGETS += copy_icon
+    PRE_TARGETDEPS += $$copy_icon.target
+
+    copy_config.target = $$OUT_PWD/root/config.xml
+    copy_config.depends = $$_PRO_FILE_PWD_/config.xml
+    copy_config.commands = $(COPY_FILE) \"$$replace(copy_config.depends, /, $$QMAKE_DIR_SEP)\" \"$$replace(copy_config.target, /, $$QMAKE_DIR_SEP)\"
+    QMAKE_EXTRA_TARGETS += copy_config
+    PRE_TARGETDEPS += $$copy_config.target
+}
+
+wgt.target = package
+wgt.commands = wgtpkg-pack -f -o settings.wgt root
+
+QMAKE_EXTRA_TARGETS += wgt
diff --git a/settings.pro b/settings.pro
new file mode 100644
index 0000000..579a952
--- /dev/null
+++ b/settings.pro
@@ -0,0 +1,3 @@
+TEMPLATE = subdirs
+SUBDIRS = app package
+package.depends += app