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.svg24
-rw-r--r--app/datetime/images/HMI_Settings_TimeDate_Arrow_Down.svg29
-rw-r--r--app/datetime/images/HMI_Settings_TimeDate_Arrow_Up.svg29
-rw-r--r--app/datetime/images/HMI_Settings_TimeDate_Button_Cancel.svg39
-rw-r--r--app/datetime/images/HMI_Settings_TimeDate_Button_Set.svg39
-rw-r--r--app/datetime/images/HMI_Settings_TimeIcon.svg59
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