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>

11 files changed, 531 insertions, 0 deletions

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