summaryrefslogtreecommitdiffstats
path: root/app/datetime
diff options
context:
space:
mode:
Diffstat (limited to 'app/datetime')
-rw-r--r--app/datetime/DateEdit.qml122
-rw-r--r--app/datetime/DateTime.qml50
-rw-r--r--app/datetime/EditSeparator.qml40
-rw-r--r--app/datetime/TimeEdit.qml86
-rw-r--r--app/datetime/datetime.qrc14
-rw-r--r--app/datetime/images/HMI_Settings_TimeDate_Arrow_DividingLine.svg57
-rw-r--r--app/datetime/images/HMI_Settings_TimeDate_Arrow_Down.svg56
-rw-r--r--app/datetime/images/HMI_Settings_TimeDate_Arrow_Up.svg56
-rw-r--r--app/datetime/images/HMI_Settings_TimeDate_Button_Cancel.svg98
-rw-r--r--app/datetime/images/HMI_Settings_TimeDate_Button_Set.svg98
-rw-r--r--app/datetime/images/HMI_Settings_TimeIcon.svg59
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