merge the Settings in CES2017 and bindings from ALPS

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

11 files changed, 736 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..5a7fa7f
--- /dev/null
+++ b/app/datetime/images/HMI_Settings_TimeDate_Arrow_DividingLine.svg
@@ -0,0 +1,57 @@
+<?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 93 20"
+   style="enable-background:new 0 0 93 20;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="HMI_Settings_TimeDate_Arrow_DividingLine.svg"><metadata
+     id="metadata15"><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="defs13" /><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="namedview11"
+     showgrid="false"
+     inkscape:zoom="7.2258065"
+     inkscape:cx="-15.569196"
+     inkscape:cy="10"
+     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:none;stroke:#66FF99;stroke-miterlimit:10;}
+</style><switch
+     id="switch5"><g
+       i:extraneous="self"
+       id="g7"><line
+         class="st0"
+         x1="0.3"
+         y1="10"
+         x2="92.7"
+         y2="10"
+         id="line9" /></g></switch></svg>
\ No newline at end of file
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..a4fad6b
--- /dev/null
+++ b/app/datetime/images/HMI_Settings_TimeDate_Arrow_Down.svg
@@ -0,0 +1,56 @@
+<?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 70"
+   style="enable-background:new 0 0 90 70;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="HMI_Settings_TimeDate_Arrow_Down.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="3.3714286"
+     inkscape:cx="-85.95339"
+     inkscape:cy="35"
+     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-rule:evenodd;clip-rule:evenodd;fill:#66FF99;}
+</style><switch
+     id="switch5"><g
+       i:extraneous="self"
+       id="g7"><g
+         id="previous_11_"><g
+           id="g10"><path
+             class="st0"
+             d="M45,46.4L23.9,25.7c0,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,46.4z"
+             id="path12" /></g></g></g></switch></svg>
\ No newline at end of file
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..49b0c88
--- /dev/null
+++ b/app/datetime/images/HMI_Settings_TimeDate_Arrow_Up.svg
@@ -0,0 +1,56 @@
+<?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 70"
+   style="enable-background:new 0 0 90 70;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="HMI_Settings_TimeDate_Arrow_Up.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="3.3714286"
+     inkscape:cx="-118.4322"
+     inkscape:cy="35"
+     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-rule:evenodd;clip-rule:evenodd;fill:#66FF99;}
+</style><switch
+     id="switch5"><g
+       i:extraneous="self"
+       id="g7"><g
+         id="previous_11_"><g
+           id="g10"><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"
+             id="path12" /></g></g></g></switch></svg>
\ No newline at end of file
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..c04e11e
--- /dev/null
+++ b/app/datetime/images/HMI_Settings_TimeDate_Button_Cancel.svg
@@ -0,0 +1,98 @@
+<?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 151 51"
+   style="enable-background:new 0 0 151 51;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="HMI_Settings_TimeDate_Button_Cancel.svg"><metadata
+     id="metadata33"><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="defs31" /><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="namedview29"
+     showgrid="false"
+     inkscape:zoom="4.4503311"
+     inkscape:cx="-33.143601"
+     inkscape:cy="25.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: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:20px;}
+	.st5{letter-spacing:3;}
+</style><switch
+     id="switch5"><g
+       i:extraneous="self"
+       id="g7"><g
+         id="g9"><linearGradient
+           id="SVGID_1_"
+           gradientUnits="userSpaceOnUse"
+           x1="24.7258"
+           y1="75.9063"
+           x2="126.2742"
+           y2="-24.9063"><stop
+             offset="0"
+             style="stop-color:#59FF7F"
+             id="stop12" /><stop
+             offset="1"
+             style="stop-color:#6BFBFF"
+             id="stop14" /></linearGradient><rect
+           x="0.5"
+           y="0.5"
+           class="st0"
+           width="150"
+           height="50"
+           id="rect16" /><linearGradient
+           id="SVGID_2_"
+           gradientUnits="userSpaceOnUse"
+           x1="-25.8746"
+           y1="126.14"
+           x2="190.2191"
+           y2="-88.3878"><stop
+             offset="0"
+             style="stop-color:#59FF7F"
+             id="stop19" /><stop
+             offset="1"
+             style="stop-color:#6BFBFF"
+             id="stop21" /></linearGradient><rect
+           x="0.5"
+           y="0.5"
+           class="st1"
+           width="150"
+           height="50"
+           id="rect23" /><g
+           id="g25"><text
+             transform="matrix(1 0 0 1 29.5984 34.017)"
+             class="st2 st3 st4 st5"
+             id="text27">CANCEL</text>
+</g></g></g></switch></svg>
\ No newline at end of file
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..4b103cc
--- /dev/null
+++ b/app/datetime/images/HMI_Settings_TimeDate_Button_Set.svg
@@ -0,0 +1,98 @@
+<?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 151 51"
+   style="enable-background:new 0 0 151 51;"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="HMI_Settings_TimeDate_Button_Set.svg"><metadata
+     id="metadata33"><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="defs31" /><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="namedview29"
+     showgrid="false"
+     inkscape:zoom="4.4503311"
+     inkscape:cx="-24.941964"
+     inkscape:cy="25.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: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:20px;}
+	.st5{letter-spacing:3;}
+</style><switch
+     id="switch5"><g
+       i:extraneous="self"
+       id="g7"><g
+         id="g9"><linearGradient
+           id="SVGID_1_"
+           gradientUnits="userSpaceOnUse"
+           x1="24.7258"
+           y1="75.9063"
+           x2="126.2742"
+           y2="-24.9063"><stop
+             offset="0"
+             style="stop-color:#59FF7F"
+             id="stop12" /><stop
+             offset="1"
+             style="stop-color:#6BFBFF"
+             id="stop14" /></linearGradient><rect
+           x="0.5"
+           y="0.5"
+           class="st0"
+           width="150"
+           height="50"
+           id="rect16" /><linearGradient
+           id="SVGID_2_"
+           gradientUnits="userSpaceOnUse"
+           x1="-25.8746"
+           y1="126.14"
+           x2="190.2191"
+           y2="-88.3878"><stop
+             offset="0"
+             style="stop-color:#59FF7F"
+             id="stop19" /><stop
+             offset="1"
+             style="stop-color:#6BFBFF"
+             id="stop21" /></linearGradient><rect
+           x="0.5"
+           y="0.5"
+           class="st1"
+           width="150"
+           height="50"
+           id="rect23" /><g
+           id="g25"><text
+             transform="matrix(1 0 0 1 53.2699 34.0168)"
+             class="st2 st3 st4 st5"
+             id="text27">SET</text>
+</g></g></g></switch></svg>
\ No newline at end of file
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