summaryrefslogtreecommitdiffstats
path: root/app
diff options
context:
space:
mode:
authorScott Murray <scott.murray@konsulko.com>2017-02-28 19:31:02 -0500
committerScott Murray <scott.murray@konsulko.com>2017-02-28 19:31:02 -0500
commit27dbd46c4c73964a0fe61cddf30470b4587e17f2 (patch)
treed75dad773096f8864ea8106f3fb3ed95527632ca /app
parente5e26112bb44b62eaeadf1ec2e9b3253352f70f8 (diff)
Import latest code from CES2017 repo
Change-Id: Id7ad21f47ea50d15156171a7dfa139da46c4f977 Signed-off-by: Scott Murray <scott.murray@konsulko.com>
Diffstat (limited to 'app')
-rw-r--r--app/ContactsView.qml89
-rw-r--r--app/Dialer.qml176
-rw-r--r--app/Phone.qml43
-rw-r--r--app/Phone.wavbin0 -> 4062608 bytes
-rw-r--r--app/app.pri12
-rw-r--r--app/app.pro11
-rw-r--r--app/audio.qrc5
-rw-r--r--app/config.tests/libhomescreen/libhomescreen.cpp8
-rw-r--r--app/config.tests/libhomescreen/libhomescreen.pro5
-rw-r--r--app/images/HMI_ContactScreen_ImageHolder-01.svg66
-rw-r--r--app/images/HMI_ContactScreen_SearchIcon-01.svg85
-rw-r--r--app/images/HMI_ContactScreen_X-01.svg72
-rw-r--r--app/images/HMI_Phone_Back_Icon.svg54
-rw-r--r--app/images/HMI_Phone_Button_0_Active-01.svg170
-rw-r--r--app/images/HMI_Phone_Button_0_Inactive-01.svg134
-rw-r--r--app/images/HMI_Phone_Button_1_Active-01.svg154
-rw-r--r--app/images/HMI_Phone_Button_1_Inactive-01.svg135
-rw-r--r--app/images/HMI_Phone_Button_2_Active-01.svg170
-rw-r--r--app/images/HMI_Phone_Button_2_Inactive-01.svg134
-rw-r--r--app/images/HMI_Phone_Button_3_Active-01.svg170
-rw-r--r--app/images/HMI_Phone_Button_3_Inactive-01.svg134
-rw-r--r--app/images/HMI_Phone_Button_4_Active-01.svg170
-rw-r--r--app/images/HMI_Phone_Button_4_Inactive-01.svg134
-rw-r--r--app/images/HMI_Phone_Button_5_Active-01.svg170
-rw-r--r--app/images/HMI_Phone_Button_5_Inactive-01.svg134
-rw-r--r--app/images/HMI_Phone_Button_6_Active-01.svg170
-rw-r--r--app/images/HMI_Phone_Button_6_Inactive-01.svg134
-rw-r--r--app/images/HMI_Phone_Button_7_Active-01.svg170
-rw-r--r--app/images/HMI_Phone_Button_7_Inactive-01.svg134
-rw-r--r--app/images/HMI_Phone_Button_8_Active-01.svg170
-rw-r--r--app/images/HMI_Phone_Button_8_Inactive-01.svg134
-rw-r--r--app/images/HMI_Phone_Button_9_Active-01.svg170
-rw-r--r--app/images/HMI_Phone_Button_9_Inactive-01.svg134
-rw-r--r--app/images/HMI_Phone_Button_Blank_Active-01.svg165
-rw-r--r--app/images/HMI_Phone_Button_Blank_Inactive-01.svg126
-rw-r--r--app/images/HMI_Phone_Button_NumberSign_Active-01.svg170
-rw-r--r--app/images/HMI_Phone_Button_NumberSign_Inactive-01.svg134
-rw-r--r--app/images/HMI_Phone_Button_asterisk_Active-01.svg170
-rw-r--r--app/images/HMI_Phone_Button_asterisk_Inactive-01.svg134
-rw-r--r--app/images/HMI_Phone_Call.svg106
-rw-r--r--app/images/HMI_Phone_Contact_BlankPhoto.svg58
-rw-r--r--app/images/HMI_Phone_Contact_DividingLine.svg57
-rw-r--r--app/images/HMI_Phone_Contacts-01.svg88
-rw-r--r--app/images/HMI_Phone_Hangup.svg106
-rw-r--r--app/images/images.qrc39
-rw-r--r--app/main.cpp46
-rw-r--r--app/models/CallHistoryModel.qml34
-rwxr-xr-xapp/models/ContactsModel.qml68
-rw-r--r--app/models/qmldir8
-rw-r--r--app/phone.qrc10
50 files changed, 5170 insertions, 0 deletions
diff --git a/app/ContactsView.qml b/app/ContactsView.qml
new file mode 100644
index 0000000..2a00cf5
--- /dev/null
+++ b/app/ContactsView.qml
@@ -0,0 +1,89 @@
+/*
+ * 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 'models'
+
+Item {
+ id: root
+
+ signal call(var contact)
+ signal cancel
+
+ ListView {
+ anchors.fill: parent
+ header: Item {
+ width: parent.width
+ height: 200
+ RowLayout {
+ anchors.fill: parent
+ anchors.margins: 50
+ Label {
+ Layout.fillWidth: true
+ text: 'Contacts'
+ }
+ ImageButton {
+ offImage: './images/HMI_ContactScreen_X-01.svg'
+ onClicked: root.cancel()
+ }
+ }
+ }
+ model: ContactsModel {}
+ delegate: MouseArea {
+ width: ListView.view.width
+ height: width / 5
+ RowLayout {
+ anchors.fill: parent
+ anchors.leftMargin: 200
+ spacing: 20
+ Image {
+ source: './images/HMI_ContactScreen_ImageHolder-01.svg'
+ }
+ ColumnLayout {
+ Label {
+ Layout.fillWidth: true
+ color: '#59FF7F'
+ text: model.name
+ }
+
+ Label {
+ Layout.fillWidth: true
+ font.pixelSize: 30
+ text: model.number
+ }
+ }
+ }
+ onClicked: {
+ root.call(model)
+ }
+ }
+ section.property: 'name'
+ section.criteria: ViewSection.FirstCharacter
+ section.delegate: Item {
+ Label {
+ width: root.width / 5
+ height: width
+ horizontalAlignment: Text.AlignHCenter
+ verticalAlignment: Text.AlignVCenter
+ color: '#59FF7F'
+ text: section
+ }
+ }
+ }
+}
diff --git a/app/Dialer.qml b/app/Dialer.qml
new file mode 100644
index 0000000..8937f0d
--- /dev/null
+++ b/app/Dialer.qml
@@ -0,0 +1,176 @@
+/*
+ * 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 QtMultimedia 5.5
+import AGL.Demo.Controls 1.0
+import 'models'
+
+Item {
+ id: root
+
+ signal showContacts
+ function call(contact) {
+ name.text = contact.name
+ number.text = contact.number
+ callButton.checked = true
+ }
+
+ ImageButton {
+ anchors.left: parent.left
+ anchors.top: parent.top
+ anchors.margins: 60
+ width: 172
+ height: 172
+ offImage: './images/HMI_Phone_Contacts-01.svg'
+ onClicked: root.showContacts()
+ }
+
+ ColumnLayout {
+ anchors.fill: parent
+ anchors.topMargin: 50
+ anchors.bottomMargin: 50
+ spacing: 20
+ ColumnLayout {
+ Layout.alignment: Qt.AlignHCenter
+ Label {
+ id: name
+ font.pixelSize: 40
+ color: '#59FF7F'
+ }
+ TextField {
+ id: number
+ readOnly: true
+
+ ImageButton {
+ anchors.right: parent.right
+ anchors.verticalCenter: parent.verticalCenter
+ offImage: './images/HMI_Phone_Back_Icon.svg'
+ onClicked: {
+ if (number.text.length > 0)
+ number.text = number.text.substring(0, number.text.length - 1)
+ }
+ }
+ }
+ }
+
+ GridLayout {
+ Layout.alignment: Qt.AlignHCenter
+ columns: 3
+ columnSpacing: 30
+ rowSpacing: 30
+ Repeater {
+ model: ListModel {
+ ListElement { value: '1'; image: '1' }
+ ListElement { value: '2'; image: '2' }
+ ListElement { value: '3'; image: '3' }
+ ListElement { value: '4'; image: '4' }
+ ListElement { value: '5'; image: '5' }
+ ListElement { value: '6'; image: '6' }
+ ListElement { value: '7'; image: '7' }
+ ListElement { value: '8'; image: '8' }
+ ListElement { value: '9'; image: '9' }
+ ListElement { value: '*'; image: 'asterisk' }
+ ListElement { value: '0'; image: '0' }
+ ListElement { value: '#'; image: 'NumberSign' }
+ }
+ ImageButton {
+ onImage: './images/HMI_Phone_Button_%1_Active-01.svg'.arg(model.image)
+ offImage: './images/HMI_Phone_Button_%1_Inactive-01.svg'.arg(model.image)
+ onClicked: {
+ number.text += model.value
+ }
+ }
+ }
+ }
+
+ ToggleButton {
+ id: callButton
+ Layout.alignment: Qt.AlignHCenter
+ onImage: './images/HMI_Phone_Hangup.svg'
+ offImage: './images/HMI_Phone_Call.svg'
+ opacity: number.text.length > 0 ? 1 : 0.25
+
+ Loader {
+ id: ringtone
+ active: false
+ sourceComponent: Component {
+ SoundEffect {
+ loops: SoundEffect.Infinite
+ source: './Phone.wav'
+ category: 'phone'
+ Component.onCompleted: play()
+ }
+ }
+ }
+
+ onCheckedChanged: {
+ if (checked) {
+ if (number.text.length === 0) {
+ callButton.checked = false
+ return
+ }
+
+ var contact = {'name': name.text, 'number': number.text}
+ if (contact.name === '')
+ contact.name = 'Unknown'
+ history.insert(0, contact)
+ ringtone.active = true
+ } else {
+ name.text = ''
+ number.text = ''
+ ringtone.active = false
+ }
+ }
+ }
+
+ ListView {
+ Layout.fillWidth: true
+ Layout.preferredHeight: 130
+ orientation: Qt.Horizontal
+ clip: true
+ model: CallHistoryModel { id: history }
+
+ delegate: MouseArea {
+ width: root.width / 2.5
+ height: ListView.view.height
+ RowLayout {
+ anchors.fill: parent
+ spacing: 20
+ Image {
+ source: './images/HMI_Phone_Contact_BlankPhoto.svg'
+ }
+ ColumnLayout {
+ Label {
+ Layout.fillWidth: true
+ color: '#59FF7F'
+ text: model.name
+ }
+
+ Label {
+ Layout.fillWidth: true
+ font.pixelSize: 30
+ text: model.number
+ }
+ }
+ }
+ onClicked: root.call(model)
+ }
+ }
+ }
+}
diff --git a/app/Phone.qml b/app/Phone.qml
new file mode 100644
index 0000000..0a23f2a
--- /dev/null
+++ b/app/Phone.qml
@@ -0,0 +1,43 @@
+/*
+ * 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
+
+ApplicationWindow {
+ id: root
+
+ StackView {
+ id: stack
+ anchors.fill: parent
+ initialItem: dialer
+ }
+ Dialer {
+ id: dialer
+ onShowContacts: stack.push(contacts)
+ }
+ Component {
+ id: contacts
+ ContactsView {
+ onCancel: stack.pop()
+ onCall: {
+ dialer.call(contact)
+ stack.pop()
+ }
+ }
+ }
+}
diff --git a/app/Phone.wav b/app/Phone.wav
new file mode 100644
index 0000000..804f95f
--- /dev/null
+++ b/app/Phone.wav
Binary files differ
diff --git a/app/app.pri b/app/app.pri
new file mode 100644
index 0000000..014646f
--- /dev/null
+++ b/app/app.pri
@@ -0,0 +1,12 @@
+TEMPLATE = app
+
+load(configure)
+qtCompileTest(libhomescreen)
+
+config_libhomescreen {
+ CONFIG += link_pkgconfig
+ PKGCONFIG += homescreen
+ DEFINES += HAVE_LIBHOMESCREEN
+}
+
+DESTDIR = $${OUT_PWD}/../package/root/bin
diff --git a/app/app.pro b/app/app.pro
new file mode 100644
index 0000000..2117c8c
--- /dev/null
+++ b/app/app.pro
@@ -0,0 +1,11 @@
+TARGET = phone
+QT = quickcontrols2
+
+SOURCES = main.cpp
+
+RESOURCES += \
+ phone.qrc \
+ images/images.qrc \
+ audio.qrc
+
+include(app.pri)
diff --git a/app/audio.qrc b/app/audio.qrc
new file mode 100644
index 0000000..82ff48e
--- /dev/null
+++ b/app/audio.qrc
@@ -0,0 +1,5 @@
+<RCC>
+ <qresource prefix="/">
+ <file>Phone.wav</file>
+ </qresource>
+</RCC>
diff --git a/app/config.tests/libhomescreen/libhomescreen.cpp b/app/config.tests/libhomescreen/libhomescreen.cpp
new file mode 100644
index 0000000..d698b05
--- /dev/null
+++ b/app/config.tests/libhomescreen/libhomescreen.cpp
@@ -0,0 +1,8 @@
+#include <libhomescreen.hpp>
+
+int main(int argc,char **argv)
+{
+ LibHomeScreen libHomeScreen;
+ return 0;
+}
+
diff --git a/app/config.tests/libhomescreen/libhomescreen.pro b/app/config.tests/libhomescreen/libhomescreen.pro
new file mode 100644
index 0000000..eb4e8f3
--- /dev/null
+++ b/app/config.tests/libhomescreen/libhomescreen.pro
@@ -0,0 +1,5 @@
+SOURCES = libhomescreen.cpp
+
+CONFIG -= qt
+CONFIG += link_pkgconfig
+PKGCONFIG += homescreen
diff --git a/app/images/HMI_ContactScreen_ImageHolder-01.svg b/app/images/HMI_ContactScreen_ImageHolder-01.svg
new file mode 100644
index 0000000..16d2f65
--- /dev/null
+++ b/app/images/HMI_ContactScreen_ImageHolder-01.svg
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;#38;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 160 160"
+ style="enable-background:new 0 0 160 160;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_ContactScreen_ImageHolder-01.svg"><metadata
+ id="metadata66"><rdf:RDF><cc:Work
+ rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+ id="defs64" /><sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="2560"
+ inkscape:window-height="1464"
+ id="namedview62"
+ showgrid="false"
+ inkscape:zoom="1.475"
+ inkscape:cx="-597.28814"
+ inkscape:cy="80"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{fill:#FFFFFF;}
+ .st1{display:none;}
+ .st2{display:inline;opacity:0.15;fill:url(#SVGID_1_);}
+ .st3{display:inline;opacity:0.35;fill:url(#SVGID_2_);}
+ .st4{display:inline;}
+ .st5{opacity:0.15;fill:url(#SVGID_3_);}
+ .st6{opacity:0.15;fill:url(#SVGID_4_);stroke:url(#SVGID_5_);stroke-miterlimit:10;}
+ .st7{fill:url(#SVGID_6_);}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Inactive"><g
+ id="g11"><path
+ class="st0"
+ d="M80.4,0L80,0C36.1,0,0.2,35.7,0,79.6c-0.2,33.1,19.9,61.7,48.6,74c0.9,0.4,1.8,0.8,2.8,1.1 c0.9,0.3,1.7,0.6,2.6,0.9c0,0,0,0,0,0c8,2.8,16.6,4.3,25.6,4.4l0.4,0c9.1,0,17.8-1.5,26-4.4c0,0,0,0,0,0 c0.8-0.3,1.7-0.6,2.5-0.9c0.3-0.1,0.6-0.2,0.9-0.3c0.7-0.3,1.3-0.5,2-0.8c0,0,0,0,0,0c28.4-12.2,48.5-40.4,48.7-73.1 C160.2,36.3,124.5,0.2,80.4,0z M80,157.2l-0.4,0c-8.9,0-17.4-1.6-25.4-4.5l2.8-43.4c2.1-1.9,9.5-7.3,22.9-7.3c0,0,0,0,0.1,0 c13.3,0,20.7,5.4,22.8,7.2l3,43.5C97.7,155.7,89,157.2,80,157.2z M111.1,150.6l-2.9-42.8c0-0.6-0.3-1.2-0.7-1.7 c-0.4-0.4-9.2-9.6-27.5-9.6c0,0-0.1,0-0.1,0c-18.4,0-27.2,9.3-27.6,9.7c-0.4,0.5-0.7,1.1-0.7,1.7l-2.8,42.7 C21.6,138.6,2.6,111.2,2.8,79.6C3,37.2,37.6,2.8,80,2.8l0.4,0C123,3,157.5,37.8,157.2,80.4C157.1,111.7,138.1,138.7,111.1,150.6 z"
+ id="path13" /><path
+ class="st0"
+ d="M79.1,36.1C79.1,36.1,79.1,36.1,79.1,36.1c-13.2,0-24,10.8-24,24c0,12.3,10.1,30.6,24,30.6c0,0,0,0,0,0 c13.9,0,23.9-18.3,23.9-30.7C103.1,46.8,92.3,36.1,79.1,36.1z M79.2,85.2C79.2,85.2,79.2,85.2,79.2,85.2 c-9.5,0-18.5-14.1-18.5-25.1c0-10.2,8.3-18.5,18.4-18.5c0,0,0,0,0,0c10.2,0,18.4,8.3,18.4,18.4C97.6,71,88.7,85.1,79.2,85.2z"
+ id="path15" /></g></g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_ContactScreen_SearchIcon-01.svg b/app/images/HMI_ContactScreen_SearchIcon-01.svg
new file mode 100644
index 0000000..f45a3c7
--- /dev/null
+++ b/app/images/HMI_ContactScreen_SearchIcon-01.svg
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;#38;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 92 92"
+ style="enable-background:new 0 0 92 92;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_ContactScreen_SearchIcon-01.svg"><metadata
+ id="metadata77"><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="defs75" /><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="namedview73"
+ showgrid="false"
+ inkscape:zoom="2.5652174"
+ inkscape:cx="-276.97458"
+ inkscape:cy="-16.372881"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}
+ .st1{fill:url(#SVGID_1_);}
+ .st2{display:none;}
+ .st3{display:inline;opacity:0.15;fill:url(#SVGID_2_);}
+ .st4{display:inline;opacity:0.35;fill:url(#SVGID_3_);}
+ .st5{display:inline;}
+ .st6{opacity:0.15;fill:url(#SVGID_4_);}
+ .st7{opacity:0.15;fill:url(#SVGID_5_);stroke:url(#SVGID_6_);stroke-miterlimit:10;}
+ .st8{fill:url(#SVGID_7_);}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Inactive"><g
+ id="g11"><g
+ id="g13"><path
+ class="st0"
+ d="M51.5,22.8c-9.6,0-17.4,7.7-17.4,17.3c0,3.5,1,6.7,2.8,9.4L23.4,62.9c-0.3,0.3-0.4,0.9-0.1,1.2l2.5,2.5 l2.4,2.4c0.3,0.3,0.8,0.3,1.2-0.1l13.7-13.7c2.5,1.3,5.3,2.1,8.3,2.1c9.6,0,17.4-7.7,17.4-17.3C68.9,30.5,61.1,22.8,51.5,22.8z "
+ id="path15" /><path
+ class="st0"
+ d="M63.6,40.2c0,6.7-5.4,12.1-12.1,12.1c-6.7,0-12.1-5.4-12.1-12.1c0-6.7,5.4-12.1,12.1-12.1"
+ id="path17" /></g><g
+ id="g19"><linearGradient
+ id="SVGID_1_"
+ gradientUnits="userSpaceOnUse"
+ x1="-20.5235"
+ y1="114.6983"
+ x2="117.909"
+ y2="-18.0096"
+ gradientTransform="matrix(1 5.464556e-03 -5.464556e-03 1 -2.6463 -2.4025)"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop22" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop24" /></linearGradient><path
+ class="st1"
+ d="M46,92c-0.1,0-0.2,0-0.3,0C20.4,91.9-0.1,71.1,0,45.7C0.1,20.5,20.7,0,46,0c0.1,0,0.2,0,0.3,0 C71.6,0.1,92.1,20.9,92,46.3l0,0C91.9,71.5,71.3,92,46,92z M46,1.6C21.6,1.6,1.7,21.4,1.6,45.8C1.5,70.2,21.3,90.3,45.8,90.4 c0.1,0,0.2,0,0.2,0c24.4,0,44.3-19.8,44.4-44.1C90.5,21.8,70.7,1.7,46.2,1.6C46.2,1.6,46.1,1.6,46,1.6z"
+ id="path26" /></g></g></g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_ContactScreen_X-01.svg b/app/images/HMI_ContactScreen_X-01.svg
new file mode 100644
index 0000000..5ad9479
--- /dev/null
+++ b/app/images/HMI_ContactScreen_X-01.svg
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;#38;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 45 45"
+ style="enable-background:new 0 0 45 45;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_ContactScreen_X-01.svg"><metadata
+ id="metadata66"><rdf:RDF><cc:Work
+ rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+ id="defs64" /><sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="2560"
+ inkscape:window-height="1464"
+ id="namedview62"
+ showgrid="false"
+ inkscape:zoom="5.2444444"
+ inkscape:cx="-132.61653"
+ inkscape:cy="22.5"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;}
+ .st1{display:none;}
+ .st2{display:inline;opacity:0.15;fill:url(#SVGID_1_);}
+ .st3{display:inline;opacity:0.35;fill:url(#SVGID_2_);}
+ .st4{display:inline;}
+ .st5{opacity:0.15;fill:url(#SVGID_3_);}
+ .st6{opacity:0.15;fill:url(#SVGID_4_);stroke:url(#SVGID_5_);stroke-miterlimit:10;}
+ .st7{fill:url(#SVGID_6_);}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Inactive"><g
+ id="g11"><line
+ class="st0"
+ x1="44.8"
+ y1="44.8"
+ x2="0.2"
+ y2="0.2"
+ id="line13" /><line
+ class="st0"
+ x1="45"
+ y1="0"
+ x2="0"
+ y2="45"
+ id="line15" /></g></g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Back_Icon.svg b/app/images/HMI_Phone_Back_Icon.svg
new file mode 100644
index 0000000..ee96db0
--- /dev/null
+++ b/app/images/HMI_Phone_Back_Icon.svg
@@ -0,0 +1,54 @@
+<?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 53 32"
+ style="enable-background:new 0 0 53 32;"
+ xml:space="preserve"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Back_Icon.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.375"
+ inkscape:cx="-31.262712"
+ inkscape:cy="16"
+ 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"><path
+ class="st0"
+ d="M51.2,0H16.1c-0.5,0-0.9,0.2-1.3,0.5L0.5,14.7C0.2,15.1,0,15.5,0,16c0,0.5,0.2,0.9,0.5,1.3l14.3,14.2 c0.3,0.3,0.8,0.5,1.3,0.5h35.1c1,0,1.8-0.8,1.8-1.8V1.8C53,0.8,52.2,0,51.2,0z M38.5,20.3c0.8,0.8,0.9,2.2,0,3 c-0.8,0.8-2.2,0.8-3.1,0L31.1,19l-4.3,4.3c-0.8,0.8-2.2,0.8-3.1,0c-0.8-0.8-0.8-2.2,0-3l4.3-4.3l-4.3-4.3c-0.8-0.8-0.8-2.2,0-3 c0.8-0.8,2.2-0.8,3.1,0l4.3,4.3l4.3-4.3c0.8-0.8,2.2-0.8,3.1,0c0.8,0.8,0.8,2.2,0,3L34.2,16L38.5,20.3z"
+ id="path9" /></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Button_0_Active-01.svg b/app/images/HMI_Phone_Button_0_Active-01.svg
new file mode 100644
index 0000000..27c55d6
--- /dev/null
+++ b/app/images/HMI_Phone_Button_0_Active-01.svg
@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;#38;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 172 172"
+ style="enable-background:new 0 0 172 172;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Button_0_Active-01.svg"><metadata
+ id="metadata94"><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="defs92" /><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="namedview90"
+ showgrid="false"
+ inkscape:zoom="1.372093"
+ inkscape:cx="-515.27118"
+ inkscape:cy="85.999999"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{display:none;}
+ .st1{display:inline;}
+ .st2{opacity:0.15;fill:url(#SVGID_1_);}
+ .st3{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+ .st4{fill:url(#SVGID_4_);}
+ .st5{display:inline;fill:#66FF99;}
+ .st6{font-family:'Roboto-Light';}
+ .st7{font-size:78.8169px;}
+ .st8{opacity:0.15;fill:url(#SVGID_5_);}
+ .st9{opacity:0.35;fill:url(#SVGID_6_);}
+ .st10{opacity:0.15;fill:url(#SVGID_7_);}
+ .st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
+ .st12{fill:url(#SVGID_10_);}
+ .st13{fill:#FFFFFF;}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Active"><linearGradient
+ id="SVGID_5_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop45" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop47" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st8"
+ width="169.5"
+ height="169.5"
+ id="rect49" /><linearGradient
+ id="SVGID_6_"
+ gradientUnits="userSpaceOnUse"
+ x1="-0.9569"
+ y1="168.4538"
+ x2="172.9569"
+ y2="3.5462"><stop
+ offset="0.136"
+ style="stop-color:#5DFE9F;stop-opacity:0.94"
+ id="stop52" /><stop
+ offset="0.6043"
+ style="stop-color:#6BFBFF;stop-opacity:0.6"
+ id="stop54" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st9"
+ width="169.5"
+ height="169.5"
+ id="rect56" /><g
+ id="g58"><linearGradient
+ id="SVGID_7_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop61" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop63" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st10"
+ width="169.5"
+ height="169.5"
+ id="rect65" /><linearGradient
+ id="SVGID_8_"
+ gradientUnits="userSpaceOnUse"
+ x1="1"
+ y1="171"
+ x2="171"
+ y2="1"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop68" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop70" /></linearGradient><linearGradient
+ id="SVGID_9_"
+ gradientUnits="userSpaceOnUse"
+ x1="-1.7107"
+ y1="169.1686"
+ x2="173.7107"
+ y2="2.8314"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop73" /><stop
+ offset="1"
+ style="stop-color:#0DF9FF"
+ id="stop75" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st11"
+ width="170"
+ height="170"
+ id="rect77" /><g
+ id="g79"><linearGradient
+ id="SVGID_10_"
+ gradientUnits="userSpaceOnUse"
+ x1="-2.2236"
+ y1="169.6549"
+ x2="174.2236"
+ y2="2.3451"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop82" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop84" /></linearGradient><path
+ class="st12"
+ d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
+ id="path86" /></g></g><text
+ transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
+ class="st13 st6 st7"
+ id="text88">0</text>
+</g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Button_0_Inactive-01.svg b/app/images/HMI_Phone_Button_0_Inactive-01.svg
new file mode 100644
index 0000000..f5bc78f
--- /dev/null
+++ b/app/images/HMI_Phone_Button_0_Inactive-01.svg
@@ -0,0 +1,134 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;#38;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 172 172"
+ style="enable-background:new 0 0 172 172;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Button_0_Inactive-01.svg"><metadata
+ id="metadata94"><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="defs92" /><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="namedview90"
+ showgrid="false"
+ inkscape:zoom="1.372093"
+ inkscape:cx="-513.08474"
+ inkscape:cy="85.999999"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{opacity:0.15;fill:url(#SVGID_1_);}
+ .st1{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+ .st2{fill:url(#SVGID_4_);}
+ .st3{fill:#66FF99;}
+ .st4{font-family:'Roboto-Light';}
+ .st5{font-size:78.8169px;}
+ .st6{display:none;}
+ .st7{display:inline;opacity:0.15;fill:url(#SVGID_5_);}
+ .st8{display:inline;opacity:0.35;fill:url(#SVGID_6_);}
+ .st9{display:inline;}
+ .st10{opacity:0.15;fill:url(#SVGID_7_);}
+ .st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
+ .st12{fill:url(#SVGID_10_);}
+ .st13{display:inline;fill:#FFFFFF;}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Inactive"><g
+ id="g11"><linearGradient
+ id="SVGID_1_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop14" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop16" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st0"
+ width="169.5"
+ height="169.5"
+ id="rect18" /><linearGradient
+ id="SVGID_2_"
+ gradientUnits="userSpaceOnUse"
+ x1="1"
+ y1="171"
+ x2="171"
+ y2="1"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop21" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop23" /></linearGradient><linearGradient
+ id="SVGID_3_"
+ gradientUnits="userSpaceOnUse"
+ x1="-1.7107"
+ y1="169.1686"
+ x2="173.7107"
+ y2="2.8314"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop26" /><stop
+ offset="1"
+ style="stop-color:#0DF9FF"
+ id="stop28" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st1"
+ width="170"
+ height="170"
+ id="rect30" /><g
+ id="g32"><linearGradient
+ id="SVGID_4_"
+ gradientUnits="userSpaceOnUse"
+ x1="-2.2236"
+ y1="169.6549"
+ x2="174.2236"
+ y2="2.3451"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop35" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop37" /></linearGradient><path
+ class="st2"
+ d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
+ id="path39" /></g></g><text
+ transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
+ class="st3 st4 st5"
+ id="text41">0</text>
+</g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Button_1_Active-01.svg b/app/images/HMI_Phone_Button_1_Active-01.svg
new file mode 100644
index 0000000..b13c772
--- /dev/null
+++ b/app/images/HMI_Phone_Button_1_Active-01.svg
@@ -0,0 +1,154 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;#38;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 172 172"
+ style="enable-background:new 0 0 172 172;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Button_1_Active-01.svg"><metadata
+ id="metadata89"><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="defs87" /><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="namedview85"
+ showgrid="false"
+ inkscape:zoom="1.372093"
+ inkscape:cx="-405.22034"
+ inkscape:cy="85.999999"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{opacity:0.15;fill:url(#SVGID_1_);}
+ .st1{display:none;}
+ .st2{font-family:'Roboto-Light';}
+ .st3{font-size:78.8169px;}
+ .st4{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+ .st5{display:none;fill:#66FF99;}
+ .st6{fill:url(#SVGID_4_);}
+ .st7{opacity:0.35;fill:url(#SVGID_5_);}
+ .st8{opacity:0.15;fill:url(#SVGID_6_);}
+ .st9{opacity:0.15;fill:url(#SVGID_7_);stroke:url(#SVGID_8_);stroke-miterlimit:10;}
+ .st10{fill:#FFFFFF;}
+ .st11{fill:url(#SVGID_9_);}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Active"><linearGradient
+ id="SVGID_5_"
+ gradientUnits="userSpaceOnUse"
+ x1="-0.9569"
+ y1="168.4538"
+ x2="172.9569"
+ y2="3.5462"><stop
+ offset="0.136"
+ style="stop-color:#5DFE9F;stop-opacity:0.94"
+ id="stop45" /><stop
+ offset="0.6043"
+ style="stop-color:#6BFBFF;stop-opacity:0.6"
+ id="stop47" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st7"
+ width="169.5"
+ height="169.5"
+ id="rect49" /><g
+ id="g51"><linearGradient
+ id="SVGID_6_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop54" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop56" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st8"
+ width="169.5"
+ height="169.5"
+ id="rect58" /><text
+ transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
+ class="st2 st3"
+ id="text60">1</text>
+<linearGradient
+ id="SVGID_7_"
+ gradientUnits="userSpaceOnUse"
+ x1="1"
+ y1="171"
+ x2="171"
+ y2="1"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop63" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop65" /></linearGradient><linearGradient
+ id="SVGID_8_"
+ gradientUnits="userSpaceOnUse"
+ x1="-1.7107"
+ y1="169.1686"
+ x2="173.7107"
+ y2="2.8314"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop68" /><stop
+ offset="1"
+ style="stop-color:#0DF9FF"
+ id="stop70" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st9"
+ width="170"
+ height="170"
+ id="rect72" /><text
+ transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
+ class="st10 st2 st3"
+ id="text74">1</text>
+<g
+ id="g76"><linearGradient
+ id="SVGID_9_"
+ gradientUnits="userSpaceOnUse"
+ x1="-2.2236"
+ y1="169.6549"
+ x2="174.2236"
+ y2="2.3451"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop79" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop81" /></linearGradient><path
+ class="st11"
+ d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
+ id="path83" /></g></g></g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Button_1_Inactive-01.svg b/app/images/HMI_Phone_Button_1_Inactive-01.svg
new file mode 100644
index 0000000..e70f5bf
--- /dev/null
+++ b/app/images/HMI_Phone_Button_1_Inactive-01.svg
@@ -0,0 +1,135 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;#38;#38;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 172 172"
+ style="enable-background:new 0 0 172 172;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Button_1_Inactive-01.svg"><metadata
+ id="metadata94"><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="defs92" /><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="namedview90"
+ showgrid="false"
+ inkscape:zoom="1.372093"
+ inkscape:cx="-124.77488"
+ inkscape:cy="85.999998"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{display:none;}
+ .st1{display:inline;}
+ .st2{opacity:0.15;fill:url(#SVGID_1_);}
+ .st3{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+ .st4{fill:url(#SVGID_4_);}
+ .st5{display:inline;fill:#66FF99;}
+ .st6{font-family:'Roboto-Light';}
+ .st7{font-size:78.8169px;}
+ .st8{opacity:0.15;fill:url(#SVGID_5_);}
+ .st9{opacity:0.35;fill:url(#SVGID_6_);}
+ .st10{opacity:0.15;fill:url(#SVGID_7_);}
+ .st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
+ .st12{fill:url(#SVGID_10_);}
+ .st13{fill:#66FF99;}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Active"><g
+ id="g58"><linearGradient
+ id="SVGID_7_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop61" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop63" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st10"
+ width="169.5"
+ height="169.5"
+ id="rect65" /><linearGradient
+ id="SVGID_8_"
+ gradientUnits="userSpaceOnUse"
+ x1="1"
+ y1="171"
+ x2="171"
+ y2="1"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop68" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop70" /></linearGradient><linearGradient
+ id="SVGID_9_"
+ gradientUnits="userSpaceOnUse"
+ x1="-1.7107"
+ y1="169.1686"
+ x2="173.7107"
+ y2="2.8314"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop73" /><stop
+ offset="1"
+ style="stop-color:#0DF9FF"
+ id="stop75" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st11"
+ width="170"
+ height="170"
+ id="rect77" /><g
+ id="g79"><linearGradient
+ id="SVGID_10_"
+ gradientUnits="userSpaceOnUse"
+ x1="-2.2236"
+ y1="169.6549"
+ x2="174.2236"
+ y2="2.3451"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop82" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop84" /></linearGradient><path
+ class="st12"
+ d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
+ id="path86" /></g></g><text
+ transform="matrix(1,0.00546,-0.00546,1,64.0738,111.6182)"
+ class="st13 st6 st7"
+ id="text88"
+ style="font-size:78.81690216px;font-family:Roboto-Light;display:inline;fill:#66ff99">1</text>
+</g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Button_2_Active-01.svg b/app/images/HMI_Phone_Button_2_Active-01.svg
new file mode 100644
index 0000000..a84f089
--- /dev/null
+++ b/app/images/HMI_Phone_Button_2_Active-01.svg
@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;#38;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 172 172"
+ style="enable-background:new 0 0 172 172;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Button_2_Active-01.svg"><metadata
+ id="metadata94"><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="defs92" /><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="namedview90"
+ showgrid="false"
+ inkscape:zoom="1.372093"
+ inkscape:cx="-466.07627"
+ inkscape:cy="85.999999"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{display:none;}
+ .st1{display:inline;}
+ .st2{opacity:0.15;fill:url(#SVGID_1_);}
+ .st3{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+ .st4{fill:url(#SVGID_4_);}
+ .st5{display:inline;fill:#66FF99;}
+ .st6{font-family:'Roboto-Light';}
+ .st7{font-size:78.8169px;}
+ .st8{opacity:0.15;fill:url(#SVGID_5_);}
+ .st9{opacity:0.35;fill:url(#SVGID_6_);}
+ .st10{opacity:0.15;fill:url(#SVGID_7_);}
+ .st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
+ .st12{fill:url(#SVGID_10_);}
+ .st13{fill:#FFFFFF;}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Active"><linearGradient
+ id="SVGID_5_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop45" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop47" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st8"
+ width="169.5"
+ height="169.5"
+ id="rect49" /><linearGradient
+ id="SVGID_6_"
+ gradientUnits="userSpaceOnUse"
+ x1="-0.9569"
+ y1="168.4538"
+ x2="172.9569"
+ y2="3.5462"><stop
+ offset="0.136"
+ style="stop-color:#5DFE9F;stop-opacity:0.94"
+ id="stop52" /><stop
+ offset="0.6043"
+ style="stop-color:#6BFBFF;stop-opacity:0.6"
+ id="stop54" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st9"
+ width="169.5"
+ height="169.5"
+ id="rect56" /><g
+ id="g58"><linearGradient
+ id="SVGID_7_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop61" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop63" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st10"
+ width="169.5"
+ height="169.5"
+ id="rect65" /><linearGradient
+ id="SVGID_8_"
+ gradientUnits="userSpaceOnUse"
+ x1="1"
+ y1="171"
+ x2="171"
+ y2="1"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop68" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop70" /></linearGradient><linearGradient
+ id="SVGID_9_"
+ gradientUnits="userSpaceOnUse"
+ x1="-1.7107"
+ y1="169.1686"
+ x2="173.7107"
+ y2="2.8314"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop73" /><stop
+ offset="1"
+ style="stop-color:#0DF9FF"
+ id="stop75" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st11"
+ width="170"
+ height="170"
+ id="rect77" /><g
+ id="g79"><linearGradient
+ id="SVGID_10_"
+ gradientUnits="userSpaceOnUse"
+ x1="-2.2236"
+ y1="169.6549"
+ x2="174.2236"
+ y2="2.3451"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop82" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop84" /></linearGradient><path
+ class="st12"
+ d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
+ id="path86" /></g></g><text
+ transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
+ class="st13 st6 st7"
+ id="text88">2</text>
+</g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Button_2_Inactive-01.svg b/app/images/HMI_Phone_Button_2_Inactive-01.svg
new file mode 100644
index 0000000..5b665fd
--- /dev/null
+++ b/app/images/HMI_Phone_Button_2_Inactive-01.svg
@@ -0,0 +1,134 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;#38;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 172 172"
+ style="enable-background:new 0 0 172 172;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Button_2_Inactive-01.svg"><metadata
+ id="metadata94"><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="defs92" /><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="namedview90"
+ showgrid="false"
+ inkscape:zoom="1.372093"
+ inkscape:cx="-469.35593"
+ inkscape:cy="85.999999"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{opacity:0.15;fill:url(#SVGID_1_);}
+ .st1{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+ .st2{fill:url(#SVGID_4_);}
+ .st3{fill:#66FF99;}
+ .st4{font-family:'Roboto-Light';}
+ .st5{font-size:78.8169px;}
+ .st6{display:none;}
+ .st7{display:inline;opacity:0.15;fill:url(#SVGID_5_);}
+ .st8{display:inline;opacity:0.35;fill:url(#SVGID_6_);}
+ .st9{display:inline;}
+ .st10{opacity:0.15;fill:url(#SVGID_7_);}
+ .st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
+ .st12{fill:url(#SVGID_10_);}
+ .st13{display:inline;fill:#FFFFFF;}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Inactive"><g
+ id="g11"><linearGradient
+ id="SVGID_1_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop14" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop16" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st0"
+ width="169.5"
+ height="169.5"
+ id="rect18" /><linearGradient
+ id="SVGID_2_"
+ gradientUnits="userSpaceOnUse"
+ x1="1"
+ y1="171"
+ x2="171"
+ y2="1"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop21" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop23" /></linearGradient><linearGradient
+ id="SVGID_3_"
+ gradientUnits="userSpaceOnUse"
+ x1="-1.7107"
+ y1="169.1686"
+ x2="173.7107"
+ y2="2.8314"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop26" /><stop
+ offset="1"
+ style="stop-color:#0DF9FF"
+ id="stop28" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st1"
+ width="170"
+ height="170"
+ id="rect30" /><g
+ id="g32"><linearGradient
+ id="SVGID_4_"
+ gradientUnits="userSpaceOnUse"
+ x1="-2.2236"
+ y1="169.6549"
+ x2="174.2236"
+ y2="2.3451"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop35" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop37" /></linearGradient><path
+ class="st2"
+ d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
+ id="path39" /></g></g><text
+ transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
+ class="st3 st4 st5"
+ id="text41">2</text>
+</g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Button_3_Active-01.svg b/app/images/HMI_Phone_Button_3_Active-01.svg
new file mode 100644
index 0000000..d5524d9
--- /dev/null
+++ b/app/images/HMI_Phone_Button_3_Active-01.svg
@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;#38;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 172 172"
+ style="enable-background:new 0 0 172 172;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Button_3_Active-01.svg"><metadata
+ id="metadata94"><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="defs92" /><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="namedview90"
+ showgrid="false"
+ inkscape:zoom="1.372093"
+ inkscape:cx="-591.06779"
+ inkscape:cy="85.999999"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{display:none;}
+ .st1{display:inline;}
+ .st2{opacity:0.15;fill:url(#SVGID_1_);}
+ .st3{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+ .st4{fill:url(#SVGID_4_);}
+ .st5{display:inline;fill:#66FF99;}
+ .st6{font-family:'Roboto-Light';}
+ .st7{font-size:78.8169px;}
+ .st8{opacity:0.15;fill:url(#SVGID_5_);}
+ .st9{opacity:0.35;fill:url(#SVGID_6_);}
+ .st10{opacity:0.15;fill:url(#SVGID_7_);}
+ .st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
+ .st12{fill:url(#SVGID_10_);}
+ .st13{fill:#FFFFFF;}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Active"><linearGradient
+ id="SVGID_5_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop45" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop47" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st8"
+ width="169.5"
+ height="169.5"
+ id="rect49" /><linearGradient
+ id="SVGID_6_"
+ gradientUnits="userSpaceOnUse"
+ x1="-0.9569"
+ y1="168.4538"
+ x2="172.9569"
+ y2="3.5462"><stop
+ offset="0.136"
+ style="stop-color:#5DFE9F;stop-opacity:0.94"
+ id="stop52" /><stop
+ offset="0.6043"
+ style="stop-color:#6BFBFF;stop-opacity:0.6"
+ id="stop54" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st9"
+ width="169.5"
+ height="169.5"
+ id="rect56" /><g
+ id="g58"><linearGradient
+ id="SVGID_7_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop61" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop63" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st10"
+ width="169.5"
+ height="169.5"
+ id="rect65" /><linearGradient
+ id="SVGID_8_"
+ gradientUnits="userSpaceOnUse"
+ x1="1"
+ y1="171"
+ x2="171"
+ y2="1"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop68" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop70" /></linearGradient><linearGradient
+ id="SVGID_9_"
+ gradientUnits="userSpaceOnUse"
+ x1="-1.7107"
+ y1="169.1686"
+ x2="173.7107"
+ y2="2.8314"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop73" /><stop
+ offset="1"
+ style="stop-color:#0DF9FF"
+ id="stop75" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st11"
+ width="170"
+ height="170"
+ id="rect77" /><g
+ id="g79"><linearGradient
+ id="SVGID_10_"
+ gradientUnits="userSpaceOnUse"
+ x1="-2.2236"
+ y1="169.6549"
+ x2="174.2236"
+ y2="2.3451"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop82" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop84" /></linearGradient><path
+ class="st12"
+ d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
+ id="path86" /></g></g><text
+ transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
+ class="st13 st6 st7"
+ id="text88">3</text>
+</g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Button_3_Inactive-01.svg b/app/images/HMI_Phone_Button_3_Inactive-01.svg
new file mode 100644
index 0000000..9cb9553
--- /dev/null
+++ b/app/images/HMI_Phone_Button_3_Inactive-01.svg
@@ -0,0 +1,134 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;#38;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 172 172"
+ style="enable-background:new 0 0 172 172;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Button_3_Inactive-01.svg"><metadata
+ id="metadata94"><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="defs92" /><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="namedview90"
+ showgrid="false"
+ inkscape:zoom="1.372093"
+ inkscape:cx="-555.35593"
+ inkscape:cy="85.999999"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{opacity:0.15;fill:url(#SVGID_1_);}
+ .st1{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+ .st2{fill:url(#SVGID_4_);}
+ .st3{fill:#66FF99;}
+ .st4{font-family:'Roboto-Light';}
+ .st5{font-size:78.8169px;}
+ .st6{display:none;}
+ .st7{display:inline;opacity:0.15;fill:url(#SVGID_5_);}
+ .st8{display:inline;opacity:0.35;fill:url(#SVGID_6_);}
+ .st9{display:inline;}
+ .st10{opacity:0.15;fill:url(#SVGID_7_);}
+ .st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
+ .st12{fill:url(#SVGID_10_);}
+ .st13{display:inline;fill:#FFFFFF;}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Inactive"><g
+ id="g11"><linearGradient
+ id="SVGID_1_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop14" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop16" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st0"
+ width="169.5"
+ height="169.5"
+ id="rect18" /><linearGradient
+ id="SVGID_2_"
+ gradientUnits="userSpaceOnUse"
+ x1="1"
+ y1="171"
+ x2="171"
+ y2="1"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop21" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop23" /></linearGradient><linearGradient
+ id="SVGID_3_"
+ gradientUnits="userSpaceOnUse"
+ x1="-1.7107"
+ y1="169.1686"
+ x2="173.7107"
+ y2="2.8314"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop26" /><stop
+ offset="1"
+ style="stop-color:#0DF9FF"
+ id="stop28" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st1"
+ width="170"
+ height="170"
+ id="rect30" /><g
+ id="g32"><linearGradient
+ id="SVGID_4_"
+ gradientUnits="userSpaceOnUse"
+ x1="-2.2236"
+ y1="169.6549"
+ x2="174.2236"
+ y2="2.3451"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop35" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop37" /></linearGradient><path
+ class="st2"
+ d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
+ id="path39" /></g></g><text
+ transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
+ class="st3 st4 st5"
+ id="text41">3</text>
+</g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Button_4_Active-01.svg b/app/images/HMI_Phone_Button_4_Active-01.svg
new file mode 100644
index 0000000..8952bd0
--- /dev/null
+++ b/app/images/HMI_Phone_Button_4_Active-01.svg
@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;#38;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 172 172"
+ style="enable-background:new 0 0 172 172;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Button_4_Active-01.svg"><metadata
+ id="metadata94"><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="defs92" /><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="namedview90"
+ showgrid="false"
+ inkscape:zoom="1.372093"
+ inkscape:cx="-556.81356"
+ inkscape:cy="85.999999"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{display:none;}
+ .st1{display:inline;}
+ .st2{opacity:0.15;fill:url(#SVGID_1_);}
+ .st3{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+ .st4{fill:url(#SVGID_4_);}
+ .st5{display:inline;fill:#66FF99;}
+ .st6{font-family:'Roboto-Light';}
+ .st7{font-size:78.8169px;}
+ .st8{opacity:0.15;fill:url(#SVGID_5_);}
+ .st9{opacity:0.35;fill:url(#SVGID_6_);}
+ .st10{opacity:0.15;fill:url(#SVGID_7_);}
+ .st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
+ .st12{fill:url(#SVGID_10_);}
+ .st13{fill:#FFFFFF;}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Active"><linearGradient
+ id="SVGID_5_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop45" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop47" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st8"
+ width="169.5"
+ height="169.5"
+ id="rect49" /><linearGradient
+ id="SVGID_6_"
+ gradientUnits="userSpaceOnUse"
+ x1="-0.9569"
+ y1="168.4538"
+ x2="172.9569"
+ y2="3.5462"><stop
+ offset="0.136"
+ style="stop-color:#5DFE9F;stop-opacity:0.94"
+ id="stop52" /><stop
+ offset="0.6043"
+ style="stop-color:#6BFBFF;stop-opacity:0.6"
+ id="stop54" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st9"
+ width="169.5"
+ height="169.5"
+ id="rect56" /><g
+ id="g58"><linearGradient
+ id="SVGID_7_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop61" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop63" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st10"
+ width="169.5"
+ height="169.5"
+ id="rect65" /><linearGradient
+ id="SVGID_8_"
+ gradientUnits="userSpaceOnUse"
+ x1="1"
+ y1="171"
+ x2="171"
+ y2="1"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop68" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop70" /></linearGradient><linearGradient
+ id="SVGID_9_"
+ gradientUnits="userSpaceOnUse"
+ x1="-1.7107"
+ y1="169.1686"
+ x2="173.7107"
+ y2="2.8314"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop73" /><stop
+ offset="1"
+ style="stop-color:#0DF9FF"
+ id="stop75" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st11"
+ width="170"
+ height="170"
+ id="rect77" /><g
+ id="g79"><linearGradient
+ id="SVGID_10_"
+ gradientUnits="userSpaceOnUse"
+ x1="-2.2236"
+ y1="169.6549"
+ x2="174.2236"
+ y2="2.3451"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop82" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop84" /></linearGradient><path
+ class="st12"
+ d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
+ id="path86" /></g></g><text
+ transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
+ class="st13 st6 st7"
+ id="text88">4</text>
+</g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Button_4_Inactive-01.svg b/app/images/HMI_Phone_Button_4_Inactive-01.svg
new file mode 100644
index 0000000..6085cc4
--- /dev/null
+++ b/app/images/HMI_Phone_Button_4_Inactive-01.svg
@@ -0,0 +1,134 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;#38;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 172 172"
+ style="enable-background:new 0 0 172 172;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Button_4_Inactive-01.svg"><metadata
+ id="metadata94"><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="defs92" /><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="namedview90"
+ showgrid="false"
+ inkscape:zoom="1.372093"
+ inkscape:cx="-458.42373"
+ inkscape:cy="85.999999"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{opacity:0.15;fill:url(#SVGID_1_);}
+ .st1{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+ .st2{fill:url(#SVGID_4_);}
+ .st3{fill:#66FF99;}
+ .st4{font-family:'Roboto-Light';}
+ .st5{font-size:78.8169px;}
+ .st6{display:none;}
+ .st7{display:inline;opacity:0.15;fill:url(#SVGID_5_);}
+ .st8{display:inline;opacity:0.35;fill:url(#SVGID_6_);}
+ .st9{display:inline;}
+ .st10{opacity:0.15;fill:url(#SVGID_7_);}
+ .st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
+ .st12{fill:url(#SVGID_10_);}
+ .st13{display:inline;fill:#FFFFFF;}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Inactive"><g
+ id="g11"><linearGradient
+ id="SVGID_1_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop14" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop16" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st0"
+ width="169.5"
+ height="169.5"
+ id="rect18" /><linearGradient
+ id="SVGID_2_"
+ gradientUnits="userSpaceOnUse"
+ x1="1"
+ y1="171"
+ x2="171"
+ y2="1"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop21" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop23" /></linearGradient><linearGradient
+ id="SVGID_3_"
+ gradientUnits="userSpaceOnUse"
+ x1="-1.7107"
+ y1="169.1686"
+ x2="173.7107"
+ y2="2.8314"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop26" /><stop
+ offset="1"
+ style="stop-color:#0DF9FF"
+ id="stop28" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st1"
+ width="170"
+ height="170"
+ id="rect30" /><g
+ id="g32"><linearGradient
+ id="SVGID_4_"
+ gradientUnits="userSpaceOnUse"
+ x1="-2.2236"
+ y1="169.6549"
+ x2="174.2236"
+ y2="2.3451"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop35" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop37" /></linearGradient><path
+ class="st2"
+ d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
+ id="path39" /></g></g><text
+ transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
+ class="st3 st4 st5"
+ id="text41">4</text>
+</g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Button_5_Active-01.svg b/app/images/HMI_Phone_Button_5_Active-01.svg
new file mode 100644
index 0000000..bdab1cb
--- /dev/null
+++ b/app/images/HMI_Phone_Button_5_Active-01.svg
@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;#38;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 172 172"
+ style="enable-background:new 0 0 172 172;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Button_5_Active-01.svg"><metadata
+ id="metadata94"><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="defs92" /><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="namedview90"
+ showgrid="false"
+ inkscape:zoom="1.372093"
+ inkscape:cx="-554.2627"
+ inkscape:cy="85.999999"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{display:none;}
+ .st1{display:inline;}
+ .st2{opacity:0.15;fill:url(#SVGID_1_);}
+ .st3{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+ .st4{fill:url(#SVGID_4_);}
+ .st5{display:inline;fill:#66FF99;}
+ .st6{font-family:'Roboto-Light';}
+ .st7{font-size:78.8169px;}
+ .st8{opacity:0.15;fill:url(#SVGID_5_);}
+ .st9{opacity:0.35;fill:url(#SVGID_6_);}
+ .st10{opacity:0.15;fill:url(#SVGID_7_);}
+ .st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
+ .st12{fill:url(#SVGID_10_);}
+ .st13{fill:#FFFFFF;}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Active"><linearGradient
+ id="SVGID_5_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop45" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop47" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st8"
+ width="169.5"
+ height="169.5"
+ id="rect49" /><linearGradient
+ id="SVGID_6_"
+ gradientUnits="userSpaceOnUse"
+ x1="-0.9569"
+ y1="168.4538"
+ x2="172.9569"
+ y2="3.5462"><stop
+ offset="0.136"
+ style="stop-color:#5DFE9F;stop-opacity:0.94"
+ id="stop52" /><stop
+ offset="0.6043"
+ style="stop-color:#6BFBFF;stop-opacity:0.6"
+ id="stop54" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st9"
+ width="169.5"
+ height="169.5"
+ id="rect56" /><g
+ id="g58"><linearGradient
+ id="SVGID_7_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop61" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop63" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st10"
+ width="169.5"
+ height="169.5"
+ id="rect65" /><linearGradient
+ id="SVGID_8_"
+ gradientUnits="userSpaceOnUse"
+ x1="1"
+ y1="171"
+ x2="171"
+ y2="1"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop68" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop70" /></linearGradient><linearGradient
+ id="SVGID_9_"
+ gradientUnits="userSpaceOnUse"
+ x1="-1.7107"
+ y1="169.1686"
+ x2="173.7107"
+ y2="2.8314"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop73" /><stop
+ offset="1"
+ style="stop-color:#0DF9FF"
+ id="stop75" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st11"
+ width="170"
+ height="170"
+ id="rect77" /><g
+ id="g79"><linearGradient
+ id="SVGID_10_"
+ gradientUnits="userSpaceOnUse"
+ x1="-2.2236"
+ y1="169.6549"
+ x2="174.2236"
+ y2="2.3451"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop82" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop84" /></linearGradient><path
+ class="st12"
+ d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
+ id="path86" /></g></g><text
+ transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
+ class="st13 st6 st7"
+ id="text88">5</text>
+</g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Button_5_Inactive-01.svg b/app/images/HMI_Phone_Button_5_Inactive-01.svg
new file mode 100644
index 0000000..585ed25
--- /dev/null
+++ b/app/images/HMI_Phone_Button_5_Inactive-01.svg
@@ -0,0 +1,134 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;#38;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 172 172"
+ style="enable-background:new 0 0 172 172;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Button_5_Inactive-01.svg"><metadata
+ id="metadata94"><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="defs92" /><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="namedview90"
+ showgrid="false"
+ inkscape:zoom="1.372093"
+ inkscape:cx="-502.88136"
+ inkscape:cy="85.999999"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{opacity:0.15;fill:url(#SVGID_1_);}
+ .st1{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+ .st2{fill:url(#SVGID_4_);}
+ .st3{fill:#66FF99;}
+ .st4{font-family:'Roboto-Light';}
+ .st5{font-size:78.8169px;}
+ .st6{display:none;}
+ .st7{display:inline;opacity:0.15;fill:url(#SVGID_5_);}
+ .st8{display:inline;opacity:0.35;fill:url(#SVGID_6_);}
+ .st9{display:inline;}
+ .st10{opacity:0.15;fill:url(#SVGID_7_);}
+ .st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
+ .st12{fill:url(#SVGID_10_);}
+ .st13{display:inline;fill:#FFFFFF;}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Inactive"><g
+ id="g11"><linearGradient
+ id="SVGID_1_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop14" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop16" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st0"
+ width="169.5"
+ height="169.5"
+ id="rect18" /><linearGradient
+ id="SVGID_2_"
+ gradientUnits="userSpaceOnUse"
+ x1="1"
+ y1="171"
+ x2="171"
+ y2="1"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop21" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop23" /></linearGradient><linearGradient
+ id="SVGID_3_"
+ gradientUnits="userSpaceOnUse"
+ x1="-1.7107"
+ y1="169.1686"
+ x2="173.7107"
+ y2="2.8314"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop26" /><stop
+ offset="1"
+ style="stop-color:#0DF9FF"
+ id="stop28" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st1"
+ width="170"
+ height="170"
+ id="rect30" /><g
+ id="g32"><linearGradient
+ id="SVGID_4_"
+ gradientUnits="userSpaceOnUse"
+ x1="-2.2236"
+ y1="169.6549"
+ x2="174.2236"
+ y2="2.3451"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop35" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop37" /></linearGradient><path
+ class="st2"
+ d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
+ id="path39" /></g></g><text
+ transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
+ class="st3 st4 st5"
+ id="text41">5</text>
+</g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Button_6_Active-01.svg b/app/images/HMI_Phone_Button_6_Active-01.svg
new file mode 100644
index 0000000..9ae45d9
--- /dev/null
+++ b/app/images/HMI_Phone_Button_6_Active-01.svg
@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;#38;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 172 172"
+ style="enable-background:new 0 0 172 172;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Button_6_Active-01.svg"><metadata
+ id="metadata94"><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="defs92" /><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="namedview90"
+ showgrid="false"
+ inkscape:zoom="1.372093"
+ inkscape:cx="-562.64406"
+ inkscape:cy="85.999999"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{display:none;}
+ .st1{display:inline;}
+ .st2{opacity:0.15;fill:url(#SVGID_1_);}
+ .st3{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+ .st4{fill:url(#SVGID_4_);}
+ .st5{display:inline;fill:#66FF99;}
+ .st6{font-family:'Roboto-Light';}
+ .st7{font-size:78.8169px;}
+ .st8{opacity:0.15;fill:url(#SVGID_5_);}
+ .st9{opacity:0.35;fill:url(#SVGID_6_);}
+ .st10{opacity:0.15;fill:url(#SVGID_7_);}
+ .st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
+ .st12{fill:url(#SVGID_10_);}
+ .st13{fill:#FFFFFF;}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Active"><linearGradient
+ id="SVGID_5_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop45" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop47" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st8"
+ width="169.5"
+ height="169.5"
+ id="rect49" /><linearGradient
+ id="SVGID_6_"
+ gradientUnits="userSpaceOnUse"
+ x1="-0.9569"
+ y1="168.4538"
+ x2="172.9569"
+ y2="3.5462"><stop
+ offset="0.136"
+ style="stop-color:#5DFE9F;stop-opacity:0.94"
+ id="stop52" /><stop
+ offset="0.6043"
+ style="stop-color:#6BFBFF;stop-opacity:0.6"
+ id="stop54" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st9"
+ width="169.5"
+ height="169.5"
+ id="rect56" /><g
+ id="g58"><linearGradient
+ id="SVGID_7_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop61" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop63" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st10"
+ width="169.5"
+ height="169.5"
+ id="rect65" /><linearGradient
+ id="SVGID_8_"
+ gradientUnits="userSpaceOnUse"
+ x1="1"
+ y1="171"
+ x2="171"
+ y2="1"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop68" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop70" /></linearGradient><linearGradient
+ id="SVGID_9_"
+ gradientUnits="userSpaceOnUse"
+ x1="-1.7107"
+ y1="169.1686"
+ x2="173.7107"
+ y2="2.8314"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop73" /><stop
+ offset="1"
+ style="stop-color:#0DF9FF"
+ id="stop75" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st11"
+ width="170"
+ height="170"
+ id="rect77" /><g
+ id="g79"><linearGradient
+ id="SVGID_10_"
+ gradientUnits="userSpaceOnUse"
+ x1="-2.2236"
+ y1="169.6549"
+ x2="174.2236"
+ y2="2.3451"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop82" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop84" /></linearGradient><path
+ class="st12"
+ d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
+ id="path86" /></g></g><text
+ transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
+ class="st13 st6 st7"
+ id="text88">6</text>
+</g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Button_6_Inactive-01.svg b/app/images/HMI_Phone_Button_6_Inactive-01.svg
new file mode 100644
index 0000000..7205ce8
--- /dev/null
+++ b/app/images/HMI_Phone_Button_6_Inactive-01.svg
@@ -0,0 +1,134 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;#38;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 172 172"
+ style="enable-background:new 0 0 172 172;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Button_6_Inactive-01.svg"><metadata
+ id="metadata94"><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="defs92" /><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="namedview90"
+ showgrid="false"
+ inkscape:zoom="1.372093"
+ inkscape:cx="-540.41524"
+ inkscape:cy="85.999999"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{opacity:0.15;fill:url(#SVGID_1_);}
+ .st1{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+ .st2{fill:url(#SVGID_4_);}
+ .st3{fill:#66FF99;}
+ .st4{font-family:'Roboto-Light';}
+ .st5{font-size:78.8169px;}
+ .st6{display:none;}
+ .st7{display:inline;opacity:0.15;fill:url(#SVGID_5_);}
+ .st8{display:inline;opacity:0.35;fill:url(#SVGID_6_);}
+ .st9{display:inline;}
+ .st10{opacity:0.15;fill:url(#SVGID_7_);}
+ .st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
+ .st12{fill:url(#SVGID_10_);}
+ .st13{display:inline;fill:#FFFFFF;}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Inactive"><g
+ id="g11"><linearGradient
+ id="SVGID_1_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop14" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop16" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st0"
+ width="169.5"
+ height="169.5"
+ id="rect18" /><linearGradient
+ id="SVGID_2_"
+ gradientUnits="userSpaceOnUse"
+ x1="1"
+ y1="171"
+ x2="171"
+ y2="1"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop21" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop23" /></linearGradient><linearGradient
+ id="SVGID_3_"
+ gradientUnits="userSpaceOnUse"
+ x1="-1.7107"
+ y1="169.1686"
+ x2="173.7107"
+ y2="2.8314"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop26" /><stop
+ offset="1"
+ style="stop-color:#0DF9FF"
+ id="stop28" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st1"
+ width="170"
+ height="170"
+ id="rect30" /><g
+ id="g32"><linearGradient
+ id="SVGID_4_"
+ gradientUnits="userSpaceOnUse"
+ x1="-2.2236"
+ y1="169.6549"
+ x2="174.2236"
+ y2="2.3451"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop35" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop37" /></linearGradient><path
+ class="st2"
+ d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
+ id="path39" /></g></g><text
+ transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
+ class="st3 st4 st5"
+ id="text41">6</text>
+</g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Button_7_Active-01.svg b/app/images/HMI_Phone_Button_7_Active-01.svg
new file mode 100644
index 0000000..8db028b
--- /dev/null
+++ b/app/images/HMI_Phone_Button_7_Active-01.svg
@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 172 172"
+ style="enable-background:new 0 0 172 172;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Button_7_Active-01.svg"><metadata
+ id="metadata94"><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="defs92" /><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="namedview90"
+ showgrid="false"
+ inkscape:zoom="1.372093"
+ inkscape:cx="-350.92373"
+ inkscape:cy="86"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{display:none;}
+ .st1{display:inline;}
+ .st2{opacity:0.15;fill:url(#SVGID_1_);}
+ .st3{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+ .st4{fill:url(#SVGID_4_);}
+ .st5{display:inline;fill:#66FF99;}
+ .st6{font-family:'Roboto-Light';}
+ .st7{font-size:78.8169px;}
+ .st8{opacity:0.15;fill:url(#SVGID_5_);}
+ .st9{opacity:0.35;fill:url(#SVGID_6_);}
+ .st10{opacity:0.15;fill:url(#SVGID_7_);}
+ .st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
+ .st12{fill:url(#SVGID_10_);}
+ .st13{fill:#FFFFFF;}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Active"><linearGradient
+ id="SVGID_5_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop45" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop47" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st8"
+ width="169.5"
+ height="169.5"
+ id="rect49" /><linearGradient
+ id="SVGID_6_"
+ gradientUnits="userSpaceOnUse"
+ x1="-0.9569"
+ y1="168.4538"
+ x2="172.9569"
+ y2="3.5462"><stop
+ offset="0.136"
+ style="stop-color:#5DFE9F;stop-opacity:0.94"
+ id="stop52" /><stop
+ offset="0.6043"
+ style="stop-color:#6BFBFF;stop-opacity:0.6"
+ id="stop54" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st9"
+ width="169.5"
+ height="169.5"
+ id="rect56" /><g
+ id="g58"><linearGradient
+ id="SVGID_7_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop61" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop63" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st10"
+ width="169.5"
+ height="169.5"
+ id="rect65" /><linearGradient
+ id="SVGID_8_"
+ gradientUnits="userSpaceOnUse"
+ x1="1"
+ y1="171"
+ x2="171"
+ y2="1"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop68" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop70" /></linearGradient><linearGradient
+ id="SVGID_9_"
+ gradientUnits="userSpaceOnUse"
+ x1="-1.7107"
+ y1="169.1686"
+ x2="173.7107"
+ y2="2.8314"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop73" /><stop
+ offset="1"
+ style="stop-color:#0DF9FF"
+ id="stop75" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st11"
+ width="170"
+ height="170"
+ id="rect77" /><g
+ id="g79"><linearGradient
+ id="SVGID_10_"
+ gradientUnits="userSpaceOnUse"
+ x1="-2.2236"
+ y1="169.6549"
+ x2="174.2236"
+ y2="2.3451"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop82" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop84" /></linearGradient><path
+ class="st12"
+ d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
+ id="path86" /></g></g><text
+ transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
+ class="st13 st6 st7"
+ id="text88">7</text>
+</g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Button_7_Inactive-01.svg b/app/images/HMI_Phone_Button_7_Inactive-01.svg
new file mode 100644
index 0000000..9df3155
--- /dev/null
+++ b/app/images/HMI_Phone_Button_7_Inactive-01.svg
@@ -0,0 +1,134 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 172 172"
+ style="enable-background:new 0 0 172 172;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Button_7_Inactive-01.svg"><metadata
+ id="metadata94"><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="defs92" /><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="namedview90"
+ showgrid="false"
+ inkscape:zoom="1.372093"
+ inkscape:cx="-196.41525"
+ inkscape:cy="86"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{opacity:0.15;fill:url(#SVGID_1_);}
+ .st1{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+ .st2{fill:url(#SVGID_4_);}
+ .st3{fill:#66FF99;}
+ .st4{font-family:'Roboto-Light';}
+ .st5{font-size:78.8169px;}
+ .st6{display:none;}
+ .st7{display:inline;opacity:0.15;fill:url(#SVGID_5_);}
+ .st8{display:inline;opacity:0.35;fill:url(#SVGID_6_);}
+ .st9{display:inline;}
+ .st10{opacity:0.15;fill:url(#SVGID_7_);}
+ .st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
+ .st12{fill:url(#SVGID_10_);}
+ .st13{display:inline;fill:#FFFFFF;}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Inactive"><g
+ id="g11"><linearGradient
+ id="SVGID_1_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop14" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop16" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st0"
+ width="169.5"
+ height="169.5"
+ id="rect18" /><linearGradient
+ id="SVGID_2_"
+ gradientUnits="userSpaceOnUse"
+ x1="1"
+ y1="171"
+ x2="171"
+ y2="1"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop21" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop23" /></linearGradient><linearGradient
+ id="SVGID_3_"
+ gradientUnits="userSpaceOnUse"
+ x1="-1.7107"
+ y1="169.1686"
+ x2="173.7107"
+ y2="2.8314"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop26" /><stop
+ offset="1"
+ style="stop-color:#0DF9FF"
+ id="stop28" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st1"
+ width="170"
+ height="170"
+ id="rect30" /><g
+ id="g32"><linearGradient
+ id="SVGID_4_"
+ gradientUnits="userSpaceOnUse"
+ x1="-2.2236"
+ y1="169.6549"
+ x2="174.2236"
+ y2="2.3451"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop35" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop37" /></linearGradient><path
+ class="st2"
+ d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
+ id="path39" /></g></g><text
+ transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
+ class="st3 st4 st5"
+ id="text41">7</text>
+</g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Button_8_Active-01.svg b/app/images/HMI_Phone_Button_8_Active-01.svg
new file mode 100644
index 0000000..9cd4800
--- /dev/null
+++ b/app/images/HMI_Phone_Button_8_Active-01.svg
@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 172 172"
+ style="enable-background:new 0 0 172 172;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Button_8_Active-01.svg"><metadata
+ id="metadata94"><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="defs92" /><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="namedview90"
+ showgrid="false"
+ inkscape:zoom="1.372093"
+ inkscape:cx="-284.60169"
+ inkscape:cy="86"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{display:none;}
+ .st1{display:inline;}
+ .st2{opacity:0.15;fill:url(#SVGID_1_);}
+ .st3{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+ .st4{fill:url(#SVGID_4_);}
+ .st5{display:inline;fill:#66FF99;}
+ .st6{font-family:'Roboto-Light';}
+ .st7{font-size:78.8169px;}
+ .st8{opacity:0.15;fill:url(#SVGID_5_);}
+ .st9{opacity:0.35;fill:url(#SVGID_6_);}
+ .st10{opacity:0.15;fill:url(#SVGID_7_);}
+ .st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
+ .st12{fill:url(#SVGID_10_);}
+ .st13{fill:#FFFFFF;}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Active"><linearGradient
+ id="SVGID_5_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop45" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop47" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st8"
+ width="169.5"
+ height="169.5"
+ id="rect49" /><linearGradient
+ id="SVGID_6_"
+ gradientUnits="userSpaceOnUse"
+ x1="-0.9569"
+ y1="168.4538"
+ x2="172.9569"
+ y2="3.5462"><stop
+ offset="0.136"
+ style="stop-color:#5DFE9F;stop-opacity:0.94"
+ id="stop52" /><stop
+ offset="0.6043"
+ style="stop-color:#6BFBFF;stop-opacity:0.6"
+ id="stop54" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st9"
+ width="169.5"
+ height="169.5"
+ id="rect56" /><g
+ id="g58"><linearGradient
+ id="SVGID_7_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop61" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop63" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st10"
+ width="169.5"
+ height="169.5"
+ id="rect65" /><linearGradient
+ id="SVGID_8_"
+ gradientUnits="userSpaceOnUse"
+ x1="1"
+ y1="171"
+ x2="171"
+ y2="1"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop68" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop70" /></linearGradient><linearGradient
+ id="SVGID_9_"
+ gradientUnits="userSpaceOnUse"
+ x1="-1.7107"
+ y1="169.1686"
+ x2="173.7107"
+ y2="2.8314"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop73" /><stop
+ offset="1"
+ style="stop-color:#0DF9FF"
+ id="stop75" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st11"
+ width="170"
+ height="170"
+ id="rect77" /><g
+ id="g79"><linearGradient
+ id="SVGID_10_"
+ gradientUnits="userSpaceOnUse"
+ x1="-2.2236"
+ y1="169.6549"
+ x2="174.2236"
+ y2="2.3451"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop82" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop84" /></linearGradient><path
+ class="st12"
+ d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
+ id="path86" /></g></g><text
+ transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
+ class="st13 st6 st7"
+ id="text88">8</text>
+</g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Button_8_Inactive-01.svg b/app/images/HMI_Phone_Button_8_Inactive-01.svg
new file mode 100644
index 0000000..2eb2e60
--- /dev/null
+++ b/app/images/HMI_Phone_Button_8_Inactive-01.svg
@@ -0,0 +1,134 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 172 172"
+ style="enable-background:new 0 0 172 172;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Button_8_Inactive-01.svg"><metadata
+ id="metadata94"><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="defs92" /><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="namedview90"
+ showgrid="false"
+ inkscape:zoom="1.372093"
+ inkscape:cx="-301.36441"
+ inkscape:cy="86"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{opacity:0.15;fill:url(#SVGID_1_);}
+ .st1{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+ .st2{fill:url(#SVGID_4_);}
+ .st3{fill:#66FF99;}
+ .st4{font-family:'Roboto-Light';}
+ .st5{font-size:78.8169px;}
+ .st6{display:none;}
+ .st7{display:inline;opacity:0.15;fill:url(#SVGID_5_);}
+ .st8{display:inline;opacity:0.35;fill:url(#SVGID_6_);}
+ .st9{display:inline;}
+ .st10{opacity:0.15;fill:url(#SVGID_7_);}
+ .st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
+ .st12{fill:url(#SVGID_10_);}
+ .st13{display:inline;fill:#FFFFFF;}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Inactive"><g
+ id="g11"><linearGradient
+ id="SVGID_1_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop14" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop16" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st0"
+ width="169.5"
+ height="169.5"
+ id="rect18" /><linearGradient
+ id="SVGID_2_"
+ gradientUnits="userSpaceOnUse"
+ x1="1"
+ y1="171"
+ x2="171"
+ y2="1"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop21" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop23" /></linearGradient><linearGradient
+ id="SVGID_3_"
+ gradientUnits="userSpaceOnUse"
+ x1="-1.7107"
+ y1="169.1686"
+ x2="173.7107"
+ y2="2.8314"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop26" /><stop
+ offset="1"
+ style="stop-color:#0DF9FF"
+ id="stop28" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st1"
+ width="170"
+ height="170"
+ id="rect30" /><g
+ id="g32"><linearGradient
+ id="SVGID_4_"
+ gradientUnits="userSpaceOnUse"
+ x1="-2.2236"
+ y1="169.6549"
+ x2="174.2236"
+ y2="2.3451"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop35" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop37" /></linearGradient><path
+ class="st2"
+ d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
+ id="path39" /></g></g><text
+ transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
+ class="st3 st4 st5"
+ id="text41">8</text>
+</g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Button_9_Active-01.svg b/app/images/HMI_Phone_Button_9_Active-01.svg
new file mode 100644
index 0000000..51883b1
--- /dev/null
+++ b/app/images/HMI_Phone_Button_9_Active-01.svg
@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 172 172"
+ style="enable-background:new 0 0 172 172;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Button_9_Active-01.svg"><metadata
+ id="metadata94"><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="defs92" /><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="namedview90"
+ showgrid="false"
+ inkscape:zoom="1.372093"
+ inkscape:cx="-266.38136"
+ inkscape:cy="86"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{display:none;}
+ .st1{display:inline;}
+ .st2{opacity:0.15;fill:url(#SVGID_1_);}
+ .st3{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+ .st4{fill:url(#SVGID_4_);}
+ .st5{display:inline;fill:#66FF99;}
+ .st6{font-family:'Roboto-Light';}
+ .st7{font-size:78.8169px;}
+ .st8{opacity:0.15;fill:url(#SVGID_5_);}
+ .st9{opacity:0.35;fill:url(#SVGID_6_);}
+ .st10{opacity:0.15;fill:url(#SVGID_7_);}
+ .st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
+ .st12{fill:url(#SVGID_10_);}
+ .st13{fill:#FFFFFF;}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Active"><linearGradient
+ id="SVGID_5_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop45" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop47" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st8"
+ width="169.5"
+ height="169.5"
+ id="rect49" /><linearGradient
+ id="SVGID_6_"
+ gradientUnits="userSpaceOnUse"
+ x1="-0.9569"
+ y1="168.4538"
+ x2="172.9569"
+ y2="3.5462"><stop
+ offset="0.136"
+ style="stop-color:#5DFE9F;stop-opacity:0.94"
+ id="stop52" /><stop
+ offset="0.6043"
+ style="stop-color:#6BFBFF;stop-opacity:0.6"
+ id="stop54" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st9"
+ width="169.5"
+ height="169.5"
+ id="rect56" /><g
+ id="g58"><linearGradient
+ id="SVGID_7_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop61" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop63" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st10"
+ width="169.5"
+ height="169.5"
+ id="rect65" /><linearGradient
+ id="SVGID_8_"
+ gradientUnits="userSpaceOnUse"
+ x1="1"
+ y1="171"
+ x2="171"
+ y2="1"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop68" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop70" /></linearGradient><linearGradient
+ id="SVGID_9_"
+ gradientUnits="userSpaceOnUse"
+ x1="-1.7107"
+ y1="169.1686"
+ x2="173.7107"
+ y2="2.8314"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop73" /><stop
+ offset="1"
+ style="stop-color:#0DF9FF"
+ id="stop75" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st11"
+ width="170"
+ height="170"
+ id="rect77" /><g
+ id="g79"><linearGradient
+ id="SVGID_10_"
+ gradientUnits="userSpaceOnUse"
+ x1="-2.2236"
+ y1="169.6549"
+ x2="174.2236"
+ y2="2.3451"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop82" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop84" /></linearGradient><path
+ class="st12"
+ d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
+ id="path86" /></g></g><text
+ transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
+ class="st13 st6 st7"
+ id="text88">9</text>
+</g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Button_9_Inactive-01.svg b/app/images/HMI_Phone_Button_9_Inactive-01.svg
new file mode 100644
index 0000000..c70e475
--- /dev/null
+++ b/app/images/HMI_Phone_Button_9_Inactive-01.svg
@@ -0,0 +1,134 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 172 172"
+ style="enable-background:new 0 0 172 172;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Button_9_Inactive-01.svg"><metadata
+ id="metadata94"><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="defs92" /><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="namedview90"
+ showgrid="false"
+ inkscape:zoom="1.372093"
+ inkscape:cx="-206.61864"
+ inkscape:cy="86"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{opacity:0.15;fill:url(#SVGID_1_);}
+ .st1{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+ .st2{fill:url(#SVGID_4_);}
+ .st3{fill:#66FF99;}
+ .st4{font-family:'Roboto-Light';}
+ .st5{font-size:78.8169px;}
+ .st6{display:none;}
+ .st7{display:inline;opacity:0.15;fill:url(#SVGID_5_);}
+ .st8{display:inline;opacity:0.35;fill:url(#SVGID_6_);}
+ .st9{display:inline;}
+ .st10{opacity:0.15;fill:url(#SVGID_7_);}
+ .st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
+ .st12{fill:url(#SVGID_10_);}
+ .st13{display:inline;fill:#FFFFFF;}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Inactive"><g
+ id="g11"><linearGradient
+ id="SVGID_1_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop14" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop16" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st0"
+ width="169.5"
+ height="169.5"
+ id="rect18" /><linearGradient
+ id="SVGID_2_"
+ gradientUnits="userSpaceOnUse"
+ x1="1"
+ y1="171"
+ x2="171"
+ y2="1"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop21" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop23" /></linearGradient><linearGradient
+ id="SVGID_3_"
+ gradientUnits="userSpaceOnUse"
+ x1="-1.7107"
+ y1="169.1686"
+ x2="173.7107"
+ y2="2.8314"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop26" /><stop
+ offset="1"
+ style="stop-color:#0DF9FF"
+ id="stop28" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st1"
+ width="170"
+ height="170"
+ id="rect30" /><g
+ id="g32"><linearGradient
+ id="SVGID_4_"
+ gradientUnits="userSpaceOnUse"
+ x1="-2.2236"
+ y1="169.6549"
+ x2="174.2236"
+ y2="2.3451"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop35" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop37" /></linearGradient><path
+ class="st2"
+ d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
+ id="path39" /></g></g><text
+ transform="matrix(1 5.460000e-03 -5.460000e-03 1 64.0738 111.6182)"
+ class="st3 st4 st5"
+ id="text41">9</text>
+</g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Button_Blank_Active-01.svg b/app/images/HMI_Phone_Button_Blank_Active-01.svg
new file mode 100644
index 0000000..2e4fe6a
--- /dev/null
+++ b/app/images/HMI_Phone_Button_Blank_Active-01.svg
@@ -0,0 +1,165 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 172 172"
+ style="enable-background:new 0 0 172 172;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Button_Blank_Active-01.svg"><metadata
+ id="metadata92"><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="defs90" /><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="namedview88"
+ showgrid="false"
+ inkscape:zoom="1.372093"
+ inkscape:cx="-293.34746"
+ inkscape:cy="86"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{display:none;}
+ .st1{display:inline;}
+ .st2{opacity:0.15;fill:url(#SVGID_1_);}
+ .st3{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+ .st4{fill:url(#SVGID_4_);}
+ .st5{display:inline;fill:#66FF99;}
+ .st6{font-family:'Roboto-Light';}
+ .st7{font-size:78.8169px;}
+ .st8{opacity:0.15;fill:url(#SVGID_5_);}
+ .st9{opacity:0.35;fill:url(#SVGID_6_);}
+ .st10{opacity:0.15;fill:url(#SVGID_7_);}
+ .st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
+ .st12{fill:url(#SVGID_10_);}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Active"><linearGradient
+ id="SVGID_5_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop45" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop47" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st8"
+ width="169.5"
+ height="169.5"
+ id="rect49" /><linearGradient
+ id="SVGID_6_"
+ gradientUnits="userSpaceOnUse"
+ x1="-0.9569"
+ y1="168.4538"
+ x2="172.9569"
+ y2="3.5462"><stop
+ offset="0.136"
+ style="stop-color:#5DFE9F;stop-opacity:0.94"
+ id="stop52" /><stop
+ offset="0.6043"
+ style="stop-color:#6BFBFF;stop-opacity:0.6"
+ id="stop54" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st9"
+ width="169.5"
+ height="169.5"
+ id="rect56" /><g
+ id="g58"><linearGradient
+ id="SVGID_7_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop61" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop63" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st10"
+ width="169.5"
+ height="169.5"
+ id="rect65" /><linearGradient
+ id="SVGID_8_"
+ gradientUnits="userSpaceOnUse"
+ x1="1"
+ y1="171"
+ x2="171"
+ y2="1"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop68" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop70" /></linearGradient><linearGradient
+ id="SVGID_9_"
+ gradientUnits="userSpaceOnUse"
+ x1="-1.7107"
+ y1="169.1686"
+ x2="173.7107"
+ y2="2.8314"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop73" /><stop
+ offset="1"
+ style="stop-color:#0DF9FF"
+ id="stop75" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st11"
+ width="170"
+ height="170"
+ id="rect77" /><g
+ id="g79"><linearGradient
+ id="SVGID_10_"
+ gradientUnits="userSpaceOnUse"
+ x1="-2.2236"
+ y1="169.6549"
+ x2="174.2236"
+ y2="2.3451"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop82" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop84" /></linearGradient><path
+ class="st12"
+ d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
+ id="path86" /></g></g></g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Button_Blank_Inactive-01.svg b/app/images/HMI_Phone_Button_Blank_Inactive-01.svg
new file mode 100644
index 0000000..cc001ab
--- /dev/null
+++ b/app/images/HMI_Phone_Button_Blank_Inactive-01.svg
@@ -0,0 +1,126 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 172 172"
+ style="enable-background:new 0 0 172 172;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Button_Blank_Inactive-01.svg"><metadata
+ id="metadata90"><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="defs88" /><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="namedview86"
+ showgrid="false"
+ inkscape:zoom="1.372093"
+ inkscape:cx="-225.9322"
+ inkscape:cy="86"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{opacity:0.15;fill:url(#SVGID_1_);}
+ .st1{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+ .st2{fill:url(#SVGID_4_);}
+ .st3{display:none;}
+ .st4{display:inline;opacity:0.15;fill:url(#SVGID_5_);}
+ .st5{display:inline;opacity:0.35;fill:url(#SVGID_6_);}
+ .st6{display:inline;}
+ .st7{opacity:0.15;fill:url(#SVGID_7_);}
+ .st8{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
+ .st9{fill:url(#SVGID_10_);}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Inactive"><g
+ id="g11"><linearGradient
+ id="SVGID_1_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop14" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop16" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st0"
+ width="169.5"
+ height="169.5"
+ id="rect18" /><linearGradient
+ id="SVGID_2_"
+ gradientUnits="userSpaceOnUse"
+ x1="1"
+ y1="171"
+ x2="171"
+ y2="1"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop21" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop23" /></linearGradient><linearGradient
+ id="SVGID_3_"
+ gradientUnits="userSpaceOnUse"
+ x1="-1.7107"
+ y1="169.1686"
+ x2="173.7107"
+ y2="2.8314"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop26" /><stop
+ offset="1"
+ style="stop-color:#0DF9FF"
+ id="stop28" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st1"
+ width="170"
+ height="170"
+ id="rect30" /><g
+ id="g32"><linearGradient
+ id="SVGID_4_"
+ gradientUnits="userSpaceOnUse"
+ x1="-2.2236"
+ y1="169.6549"
+ x2="174.2236"
+ y2="2.3451"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop35" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop37" /></linearGradient><path
+ class="st2"
+ d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
+ id="path39" /></g></g></g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Button_NumberSign_Active-01.svg b/app/images/HMI_Phone_Button_NumberSign_Active-01.svg
new file mode 100644
index 0000000..ce48926
--- /dev/null
+++ b/app/images/HMI_Phone_Button_NumberSign_Active-01.svg
@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;#38;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 172 172"
+ style="enable-background:new 0 0 172 172;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Button_#_Active-01.svg"><metadata
+ id="metadata94"><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="defs92" /><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="namedview90"
+ showgrid="false"
+ inkscape:zoom="1.372093"
+ inkscape:cx="-585.23729"
+ inkscape:cy="85.999999"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{display:none;}
+ .st1{display:inline;}
+ .st2{opacity:0.15;fill:url(#SVGID_1_);}
+ .st3{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+ .st4{fill:url(#SVGID_4_);}
+ .st5{display:inline;fill:#66FF99;}
+ .st6{font-family:'Roboto-Light';}
+ .st7{font-size:78.8169px;}
+ .st8{opacity:0.15;fill:url(#SVGID_5_);}
+ .st9{opacity:0.35;fill:url(#SVGID_6_);}
+ .st10{opacity:0.15;fill:url(#SVGID_7_);}
+ .st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
+ .st12{fill:url(#SVGID_10_);}
+ .st13{fill:#FFFFFF;}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Active"><linearGradient
+ id="SVGID_5_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop45" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop47" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st8"
+ width="169.5"
+ height="169.5"
+ id="rect49" /><linearGradient
+ id="SVGID_6_"
+ gradientUnits="userSpaceOnUse"
+ x1="-0.9569"
+ y1="168.4538"
+ x2="172.9569"
+ y2="3.5462"><stop
+ offset="0.136"
+ style="stop-color:#5DFE9F;stop-opacity:0.94"
+ id="stop52" /><stop
+ offset="0.6043"
+ style="stop-color:#6BFBFF;stop-opacity:0.6"
+ id="stop54" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st9"
+ width="169.5"
+ height="169.5"
+ id="rect56" /><g
+ id="g58"><linearGradient
+ id="SVGID_7_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop61" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop63" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st10"
+ width="169.5"
+ height="169.5"
+ id="rect65" /><linearGradient
+ id="SVGID_8_"
+ gradientUnits="userSpaceOnUse"
+ x1="1"
+ y1="171"
+ x2="171"
+ y2="1"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop68" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop70" /></linearGradient><linearGradient
+ id="SVGID_9_"
+ gradientUnits="userSpaceOnUse"
+ x1="-1.7107"
+ y1="169.1686"
+ x2="173.7107"
+ y2="2.8314"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop73" /><stop
+ offset="1"
+ style="stop-color:#0DF9FF"
+ id="stop75" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st11"
+ width="170"
+ height="170"
+ id="rect77" /><g
+ id="g79"><linearGradient
+ id="SVGID_10_"
+ gradientUnits="userSpaceOnUse"
+ x1="-2.2236"
+ y1="169.6549"
+ x2="174.2236"
+ y2="2.3451"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop82" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop84" /></linearGradient><path
+ class="st12"
+ d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
+ id="path86" /></g></g><text
+ transform="matrix(1 5.460000e-03 -5.460000e-03 1 61.4761 111.604)"
+ class="st13 st6 st7"
+ id="text88">#</text>
+</g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Button_NumberSign_Inactive-01.svg b/app/images/HMI_Phone_Button_NumberSign_Inactive-01.svg
new file mode 100644
index 0000000..80e834e
--- /dev/null
+++ b/app/images/HMI_Phone_Button_NumberSign_Inactive-01.svg
@@ -0,0 +1,134 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;#38;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 172 172"
+ style="enable-background:new 0 0 172 172;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Button_#_Inactive-01.svg"><metadata
+ id="metadata94"><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="defs92" /><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="namedview90"
+ showgrid="false"
+ inkscape:zoom="1.372093"
+ inkscape:cx="-429.99999"
+ inkscape:cy="85.999999"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{opacity:0.15;fill:url(#SVGID_1_);}
+ .st1{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+ .st2{fill:url(#SVGID_4_);}
+ .st3{fill:#66FF99;}
+ .st4{font-family:'Roboto-Light';}
+ .st5{font-size:78.8169px;}
+ .st6{display:none;}
+ .st7{display:inline;opacity:0.15;fill:url(#SVGID_5_);}
+ .st8{display:inline;opacity:0.35;fill:url(#SVGID_6_);}
+ .st9{display:inline;}
+ .st10{opacity:0.15;fill:url(#SVGID_7_);}
+ .st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
+ .st12{fill:url(#SVGID_10_);}
+ .st13{display:inline;fill:#FFFFFF;}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Inactive"><g
+ id="g11"><linearGradient
+ id="SVGID_1_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop14" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop16" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st0"
+ width="169.5"
+ height="169.5"
+ id="rect18" /><linearGradient
+ id="SVGID_2_"
+ gradientUnits="userSpaceOnUse"
+ x1="1"
+ y1="171"
+ x2="171"
+ y2="1"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop21" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop23" /></linearGradient><linearGradient
+ id="SVGID_3_"
+ gradientUnits="userSpaceOnUse"
+ x1="-1.7107"
+ y1="169.1686"
+ x2="173.7107"
+ y2="2.8314"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop26" /><stop
+ offset="1"
+ style="stop-color:#0DF9FF"
+ id="stop28" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st1"
+ width="170"
+ height="170"
+ id="rect30" /><g
+ id="g32"><linearGradient
+ id="SVGID_4_"
+ gradientUnits="userSpaceOnUse"
+ x1="-2.2236"
+ y1="169.6549"
+ x2="174.2236"
+ y2="2.3451"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop35" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop37" /></linearGradient><path
+ class="st2"
+ d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
+ id="path39" /></g></g><text
+ transform="matrix(1 5.460000e-03 -5.460000e-03 1 61.4761 111.604)"
+ class="st3 st4 st5"
+ id="text41">#</text>
+</g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Button_asterisk_Active-01.svg b/app/images/HMI_Phone_Button_asterisk_Active-01.svg
new file mode 100644
index 0000000..4116466
--- /dev/null
+++ b/app/images/HMI_Phone_Button_asterisk_Active-01.svg
@@ -0,0 +1,170 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 172 172"
+ style="enable-background:new 0 0 172 172;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Button_asterisk_Active-01.svg"><metadata
+ id="metadata94"><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="defs92" /><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="namedview90"
+ showgrid="false"
+ inkscape:zoom="1.372093"
+ inkscape:cx="-268.5678"
+ inkscape:cy="86"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{display:none;}
+ .st1{display:inline;}
+ .st2{opacity:0.15;fill:url(#SVGID_1_);}
+ .st3{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+ .st4{fill:url(#SVGID_4_);}
+ .st5{display:inline;fill:#66FF99;}
+ .st6{font-family:'Roboto-Light';}
+ .st7{font-size:78.8169px;}
+ .st8{opacity:0.15;fill:url(#SVGID_5_);}
+ .st9{opacity:0.35;fill:url(#SVGID_6_);}
+ .st10{opacity:0.15;fill:url(#SVGID_7_);}
+ .st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
+ .st12{fill:url(#SVGID_10_);}
+ .st13{fill:#FFFFFF;}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Active"><linearGradient
+ id="SVGID_5_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop45" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop47" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st8"
+ width="169.5"
+ height="169.5"
+ id="rect49" /><linearGradient
+ id="SVGID_6_"
+ gradientUnits="userSpaceOnUse"
+ x1="-0.9569"
+ y1="168.4538"
+ x2="172.9569"
+ y2="3.5462"><stop
+ offset="0.136"
+ style="stop-color:#5DFE9F;stop-opacity:0.94"
+ id="stop52" /><stop
+ offset="0.6043"
+ style="stop-color:#6BFBFF;stop-opacity:0.6"
+ id="stop54" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st9"
+ width="169.5"
+ height="169.5"
+ id="rect56" /><g
+ id="g58"><linearGradient
+ id="SVGID_7_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop61" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop63" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st10"
+ width="169.5"
+ height="169.5"
+ id="rect65" /><linearGradient
+ id="SVGID_8_"
+ gradientUnits="userSpaceOnUse"
+ x1="1"
+ y1="171"
+ x2="171"
+ y2="1"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop68" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop70" /></linearGradient><linearGradient
+ id="SVGID_9_"
+ gradientUnits="userSpaceOnUse"
+ x1="-1.7107"
+ y1="169.1686"
+ x2="173.7107"
+ y2="2.8314"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop73" /><stop
+ offset="1"
+ style="stop-color:#0DF9FF"
+ id="stop75" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st11"
+ width="170"
+ height="170"
+ id="rect77" /><g
+ id="g79"><linearGradient
+ id="SVGID_10_"
+ gradientUnits="userSpaceOnUse"
+ x1="-2.2236"
+ y1="169.6549"
+ x2="174.2236"
+ y2="2.3451"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop82" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop84" /></linearGradient><path
+ class="st12"
+ d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
+ id="path86" /></g></g><text
+ transform="matrix(1 5.460000e-03 -5.460000e-03 1 69.1924 111.6461)"
+ class="st13 st6 st7"
+ id="text88">*</text>
+</g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Button_asterisk_Inactive-01.svg b/app/images/HMI_Phone_Button_asterisk_Inactive-01.svg
new file mode 100644
index 0000000..51f1812
--- /dev/null
+++ b/app/images/HMI_Phone_Button_asterisk_Inactive-01.svg
@@ -0,0 +1,134 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 172 172"
+ style="enable-background:new 0 0 172 172;"
+ xml:space="preserve"
+ id="svg2"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Button_asterisk_Inactive-01.svg"><metadata
+ id="metadata94"><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="defs92" /><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="namedview90"
+ showgrid="false"
+ inkscape:zoom="1.372093"
+ inkscape:cx="-212.81356"
+ inkscape:cy="86"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg2" /><style
+ type="text/css"
+ id="style4">
+ .st0{opacity:0.15;fill:url(#SVGID_1_);}
+ .st1{opacity:0.15;fill:url(#SVGID_2_);stroke:url(#SVGID_3_);stroke-miterlimit:10;}
+ .st2{fill:url(#SVGID_4_);}
+ .st3{fill:#66FF99;}
+ .st4{font-family:'Roboto-Light';}
+ .st5{font-size:78.8169px;}
+ .st6{display:none;}
+ .st7{display:inline;opacity:0.15;fill:url(#SVGID_5_);}
+ .st8{display:inline;opacity:0.35;fill:url(#SVGID_6_);}
+ .st9{display:inline;}
+ .st10{opacity:0.15;fill:url(#SVGID_7_);}
+ .st11{opacity:0.15;fill:url(#SVGID_8_);stroke:url(#SVGID_9_);stroke-miterlimit:10;}
+ .st12{fill:url(#SVGID_10_);}
+ .st13{display:inline;fill:#FFFFFF;}
+</style><switch
+ id="switch6"><g
+ i:extraneous="self"
+ id="g8"><g
+ id="Inactive"><g
+ id="g11"><linearGradient
+ id="SVGID_1_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.2348"
+ y1="170.7652"
+ x2="170.7652"
+ y2="1.2348"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop14" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop16" /></linearGradient><rect
+ x="1.2"
+ y="1.2"
+ class="st0"
+ width="169.5"
+ height="169.5"
+ id="rect18" /><linearGradient
+ id="SVGID_2_"
+ gradientUnits="userSpaceOnUse"
+ x1="1"
+ y1="171"
+ x2="171"
+ y2="1"><stop
+ offset="0"
+ style="stop-color:#FFFFFF;stop-opacity:0"
+ id="stop21" /><stop
+ offset="1"
+ style="stop-color:#000000"
+ id="stop23" /></linearGradient><linearGradient
+ id="SVGID_3_"
+ gradientUnits="userSpaceOnUse"
+ x1="-1.7107"
+ y1="169.1686"
+ x2="173.7107"
+ y2="2.8314"><stop
+ offset="0"
+ style="stop-color:#8BC53F"
+ id="stop26" /><stop
+ offset="1"
+ style="stop-color:#0DF9FF"
+ id="stop28" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st1"
+ width="170"
+ height="170"
+ id="rect30" /><g
+ id="g32"><linearGradient
+ id="SVGID_4_"
+ gradientUnits="userSpaceOnUse"
+ x1="-2.2236"
+ y1="169.6549"
+ x2="174.2236"
+ y2="2.3451"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop35" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop37" /></linearGradient><path
+ class="st2"
+ d="M171,1v170H1V1H171 M172,0h-1H1H0v1v170v1h1h170h1v-1V1V0L172,0z"
+ id="path39" /></g></g><text
+ transform="matrix(1 5.460000e-03 -5.460000e-03 1 69.1924 111.6461)"
+ class="st3 st4 st5"
+ id="text41">*</text>
+</g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Call.svg b/app/images/HMI_Phone_Call.svg
new file mode 100644
index 0000000..2328737
--- /dev/null
+++ b/app/images/HMI_Phone_Call.svg
@@ -0,0 +1,106 @@
+<?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 585 109"
+ style="enable-background:new 0 0 585 109;"
+ xml:space="preserve"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Call.svg"><metadata
+ id="metadata37"><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="defs35" /><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="namedview33"
+ showgrid="false"
+ inkscape:zoom="1.1487179"
+ inkscape:cx="-182.8125"
+ inkscape:cy="54.5"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="Layer_1" /><style
+ type="text/css"
+ id="style3">
+ .st0{opacity:0.43;fill:url(#SVGID_1_);}
+ .st1{fill:none;stroke:url(#SVGID_2_);stroke-width:2;stroke-miterlimit:10;}
+ .st2{fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+</style><switch
+ id="switch5"><g
+ i:extraneous="self"
+ id="g7"><g
+ id="g9"><linearGradient
+ id="SVGID_1_"
+ gradientUnits="userSpaceOnUse"
+ x1="-326.4796"
+ y1="511.2228"
+ x2="922.6905"
+ y2="-410.4949"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop12" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop14" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st0"
+ width="583"
+ height="107"
+ id="rect16" /><linearGradient
+ id="SVGID_2_"
+ gradientUnits="userSpaceOnUse"
+ x1="54.1024"
+ y1="198.5423"
+ x2="530.8976"
+ y2="-89.5423"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop19" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop21" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st1"
+ width="583"
+ height="107"
+ id="rect23" /><g
+ id="g25"><path
+ class="st2"
+ d="M264.4,55c1.3-3.2,3.3-6.9,6.5-10.1c8-8,18.9-9.1,18.9-9.1c-0.5,1.7,0,3.5,1.3,4.9l6.2,6.2 c1.9,1.9,5.1,1.9,7,0l13.2-9.7c1.9-1.9,1.9-5.1,0-7l-8-8c-1.9-1.9-27.9-5.9-48,14.1c-22.6,22.6-15.2,45.2-13.3,47.2l7.6,7.6 c1.9,1.9,5.1,1.9,7,0l10-12.8c1.9-1.9,1.9-5.1,0-7l-6.2-6.2c-1.6-1.6-4.5-1.4-4.5-1.4"
+ id="path27" /><line
+ class="st2"
+ x1="262.2"
+ y1="63.7"
+ x2="256.5"
+ y2="69.4"
+ id="line29" /><line
+ class="st2"
+ x1="295.7"
+ y1="30.3"
+ x2="290"
+ y2="36"
+ id="line31" /></g></g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Contact_BlankPhoto.svg b/app/images/HMI_Phone_Contact_BlankPhoto.svg
new file mode 100644
index 0000000..5aae13c
--- /dev/null
+++ b/app/images/HMI_Phone_Contact_BlankPhoto.svg
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+
+<svg
+ xmlns:i="&amp;ns_ai;"
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ id="Layer_1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 116 116"
+ style="enable-background:new 0 0 116 116;"
+ xml:space="preserve"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Contact_BlankPhoto.svg"><metadata
+ id="metadata19"><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="defs17" /><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="namedview15"
+ showgrid="false"
+ inkscape:zoom="2.0344828"
+ inkscape:cx="-155.81356"
+ inkscape:cy="58"
+ 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:#ACACA5;}
+</style><switch
+ id="switch5"><g
+ i:extraneous="self"
+ id="g7"><g
+ id="g9"><path
+ class="st0"
+ d="M58.3,0L58,0C26.2,0,0.2,25.9,0,57.7c-0.1,24,14.4,44.8,35.2,53.7c0.7,0.3,1.3,0.5,2,0.8 c0.6,0.2,1.3,0.5,1.9,0.7c0,0,0,0,0,0c5.8,2,12,3.1,18.5,3.2l0.3,0c6.6,0,12.9-1.1,18.8-3.2c0,0,0,0,0,0c0.6-0.2,1.2-0.4,1.8-0.7 c0.2-0.1,0.4-0.2,0.6-0.3c0.5-0.2,1-0.4,1.5-0.6c0,0,0,0,0,0c20.6-8.8,35.1-29.3,35.3-53C116.2,26.3,90.3,0.2,58.3,0z M58,114 l-0.3,0c-6.5,0-12.6-1.2-18.4-3.2l2.1-31.5c1.6-1.3,6.9-5.3,16.6-5.3c0,0,0,0,0.1,0c9.7,0,15,3.9,16.5,5.3l2.2,31.6 C70.8,112.9,64.5,114,58,114z M80.6,109.2l-2.1-31c0-0.5-0.2-0.9-0.5-1.2c-0.3-0.3-6.7-7-19.9-7c0,0,0,0-0.1,0 c-13.3,0-19.7,6.7-20,7c-0.3,0.3-0.5,0.8-0.5,1.2l-2,31C15.6,100.5,1.9,80.6,2,57.7C2.2,27,27.3,2,58,2l0.3,0 c30.9,0.2,55.9,25.4,55.7,56.3C113.9,81,100.1,100.5,80.6,109.2z"
+ id="path11" /><path
+ class="st0"
+ d="M57.4,26.2C57.4,26.2,57.4,26.2,57.4,26.2C47.8,26.2,40,34,40,43.6c0,8.9,7.3,22.2,17.4,22.2c0,0,0,0,0,0 c10.1,0,17.3-13.3,17.3-22.2C74.7,33.9,66.9,26.2,57.4,26.2z M57.4,61.7C57.4,61.7,57.4,61.7,57.4,61.7 C50.5,61.7,44,51.5,44,43.6c0-7.4,6-13.4,13.4-13.4c0,0,0,0,0,0c7.4,0,13.4,6,13.4,13.4C70.8,51.5,64.3,61.7,57.4,61.7z"
+ id="path13" /></g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Contact_DividingLine.svg b/app/images/HMI_Phone_Contact_DividingLine.svg
new file mode 100644
index 0000000..f7f3695
--- /dev/null
+++ b/app/images/HMI_Phone_Contact_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 90.8 90.8"
+ style="enable-background:new 0 0 90.8 90.8;"
+ xml:space="preserve"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Contact_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="2.5991189"
+ inkscape:cx="-118.88644"
+ inkscape:cy="45.400002"
+ 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:#FFFFFF;stroke-miterlimit:10;}
+</style><switch
+ id="switch5"><g
+ i:extraneous="self"
+ id="g7"><line
+ class="st0"
+ x1="45.4"
+ y1="0.4"
+ x2="45.4"
+ y2="90.4"
+ id="line9" /></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Contacts-01.svg b/app/images/HMI_Phone_Contacts-01.svg
new file mode 100644
index 0000000..5e66219
--- /dev/null
+++ b/app/images/HMI_Phone_Contacts-01.svg
@@ -0,0 +1,88 @@
+<?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 105 105"
+ style="enable-background:new 0 0 105 105;"
+ xml:space="preserve"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Contacts-01.svg"><metadata
+ id="metadata31"><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="defs29" /><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="namedview27"
+ showgrid="false"
+ inkscape:zoom="2.247619"
+ inkscape:cx="-136.58898"
+ inkscape:cy="52.5"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="Layer_1" /><style
+ type="text/css"
+ id="style3">
+ .st0{opacity:0.8;fill:#1B1A1D;}
+ .st1{fill:url(#SVGID_1_);}
+ .st2{fill:url(#SVGID_2_);}
+</style><switch
+ id="switch5"><g
+ i:extraneous="self"
+ id="g7"><g
+ id="g9"><rect
+ class="st0"
+ width="105"
+ height="105"
+ id="rect11" /><linearGradient
+ id="SVGID_1_"
+ gradientUnits="userSpaceOnUse"
+ x1="25.8899"
+ y1="61.9762"
+ x2="91.819"
+ y2="17.6801"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop14" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop16" /></linearGradient><path
+ class="st1"
+ d="M52,58.8C52,58.8,52,58.8,52,58.8c5.6,0,12.3-7,12.3-15.6v0c0-6.8-5.5-12.3-12.3-12.3c0,0,0,0,0,0 c-6.8,0-12.3,5.5-12.3,12.3C39.7,51.8,46.4,58.8,52,58.8z M52,34.9C52,34.9,52,34.9,52,34.9c4.6,0,8.3,3.7,8.3,8.3 c0,4.9-4.1,11.5-8.3,11.6c0,0,0,0,0,0c-4.2,0-8.3-6.6-8.3-11.5C43.7,38.7,47.4,34.9,52,34.9z"
+ id="path18" /><linearGradient
+ id="SVGID_2_"
+ gradientUnits="userSpaceOnUse"
+ x1="1.4091"
+ y1="71.7406"
+ x2="96.8002"
+ y2="37.5399"><stop
+ offset="0"
+ style="stop-color:#59FF7F"
+ id="stop21" /><stop
+ offset="1"
+ style="stop-color:#6BFBFF"
+ id="stop23" /></linearGradient><path
+ class="st2"
+ d="M52.5,15.7c-20.8,0-37.7,16.9-37.7,37.7c0,15.1,8.9,28.2,21.8,34.2c1.3,0.6,2.6,1.1,3.9,1.6 c3.8,1.3,7.8,2,12,2c4.1,0,8.1-0.7,11.8-1.9c1.3-0.4,2.6-1,3.9-1.5c13-6,22-19.1,22-34.3C90.2,32.6,73.3,15.7,52.5,15.7z M52.5,90.1c-4.2,0-8.2-0.7-11.9-2l1.4-20.6c1.2-1,4.6-3.2,10.5-3.2c0,0,0,0,0,0c5.9,0,9.3,2.2,10.4,3.2l1.4,20.7 C60.6,89.5,56.6,90.1,52.5,90.1z M68.2,86.6l-1.4-20.2c0-0.5-0.2-0.9-0.5-1.2c-0.2-0.2-4.7-4.9-13.9-4.9c0,0,0,0,0,0 c-9.2,0-13.7,4.7-13.9,4.9C38.2,65.5,38,66,38,66.4l-1.3,20.1C24.3,80.6,15.8,68,15.8,53.4c0-20.2,16.5-36.7,36.7-36.7 c20.2,0,36.7,16.5,36.7,36.7C89.2,68.1,80.6,80.7,68.2,86.6z"
+ id="path25" /></g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/HMI_Phone_Hangup.svg b/app/images/HMI_Phone_Hangup.svg
new file mode 100644
index 0000000..f848286
--- /dev/null
+++ b/app/images/HMI_Phone_Hangup.svg
@@ -0,0 +1,106 @@
+<?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 585 109"
+ style="enable-background:new 0 0 585 109;"
+ xml:space="preserve"
+ inkscape:version="0.91 r13725"
+ sodipodi:docname="HMI_Phone_Hangup.svg"><metadata
+ id="metadata37"><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="defs35" /><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="namedview33"
+ showgrid="false"
+ inkscape:zoom="1.1487179"
+ inkscape:cx="-154.52009"
+ inkscape:cy="54.5"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="Layer_1" /><style
+ type="text/css"
+ id="style3">
+ .st0{opacity:0.43;fill:url(#SVGID_1_);}
+ .st1{fill:none;stroke:url(#SVGID_2_);stroke-width:2;stroke-miterlimit:10;}
+ .st2{fill:none;stroke:#FFFFFF;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+</style><switch
+ id="switch5"><g
+ i:extraneous="self"
+ id="g7"><g
+ id="g9"><linearGradient
+ id="SVGID_1_"
+ gradientUnits="userSpaceOnUse"
+ x1="-326.4796"
+ y1="511.2228"
+ x2="922.6905"
+ y2="-410.4949"><stop
+ offset="0"
+ style="stop-color:#ED1C24"
+ id="stop12" /><stop
+ offset="1"
+ style="stop-color:#F15A24"
+ id="stop14" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st0"
+ width="583"
+ height="107"
+ id="rect16" /><linearGradient
+ id="SVGID_2_"
+ gradientUnits="userSpaceOnUse"
+ x1="54.1024"
+ y1="198.5423"
+ x2="530.8976"
+ y2="-89.5423"><stop
+ offset="0"
+ style="stop-color:#ED1C24"
+ id="stop19" /><stop
+ offset="1"
+ style="stop-color:#F15A24"
+ id="stop21" /></linearGradient><rect
+ x="1"
+ y="1"
+ class="st1"
+ width="583"
+ height="107"
+ id="rect23" /><g
+ id="g25"><path
+ class="st2"
+ d="M264.4,55c1.3-3.2,3.3-6.9,6.5-10.1c8-8,18.9-9.1,18.9-9.1c-0.5,1.7,0,3.5,1.3,4.9l6.2,6.2 c1.9,1.9,5.1,1.9,7,0l13.2-9.7c1.9-1.9,1.9-5.1,0-7l-8-8c-1.9-1.9-27.9-5.9-48,14.1c-22.6,22.6-15.2,45.2-13.3,47.2l7.6,7.6 c1.9,1.9,5.1,1.9,7,0l10-12.8c1.9-1.9,1.9-5.1,0-7l-6.2-6.2c-1.6-1.6-4.5-1.4-4.5-1.4"
+ id="path27" /><line
+ class="st2"
+ x1="262.2"
+ y1="63.7"
+ x2="256.5"
+ y2="69.4"
+ id="line29" /><line
+ class="st2"
+ x1="295.7"
+ y1="30.3"
+ x2="290"
+ y2="36"
+ id="line31" /></g></g></g></switch></svg> \ No newline at end of file
diff --git a/app/images/images.qrc b/app/images/images.qrc
new file mode 100644
index 0000000..80fa584
--- /dev/null
+++ b/app/images/images.qrc
@@ -0,0 +1,39 @@
+<RCC>
+ <qresource prefix="/images">
+ <file>HMI_ContactScreen_ImageHolder-01.svg</file>
+ <file>HMI_ContactScreen_SearchIcon-01.svg</file>
+ <file>HMI_ContactScreen_X-01.svg</file>
+ <file>HMI_Phone_Back_Icon.svg</file>
+ <file>HMI_Phone_Button_NumberSign_Active-01.svg</file>
+ <file>HMI_Phone_Button_NumberSign_Inactive-01.svg</file>
+ <file>HMI_Phone_Button_0_Active-01.svg</file>
+ <file>HMI_Phone_Button_0_Inactive-01.svg</file>
+ <file>HMI_Phone_Button_1_Active-01.svg</file>
+ <file>HMI_Phone_Button_1_Inactive-01.svg</file>
+ <file>HMI_Phone_Button_2_Active-01.svg</file>
+ <file>HMI_Phone_Button_2_Inactive-01.svg</file>
+ <file>HMI_Phone_Button_3_Active-01.svg</file>
+ <file>HMI_Phone_Button_3_Inactive-01.svg</file>
+ <file>HMI_Phone_Button_4_Active-01.svg</file>
+ <file>HMI_Phone_Button_4_Inactive-01.svg</file>
+ <file>HMI_Phone_Button_5_Active-01.svg</file>
+ <file>HMI_Phone_Button_5_Inactive-01.svg</file>
+ <file>HMI_Phone_Button_6_Active-01.svg</file>
+ <file>HMI_Phone_Button_6_Inactive-01.svg</file>
+ <file>HMI_Phone_Button_7_Active-01.svg</file>
+ <file>HMI_Phone_Button_7_Inactive-01.svg</file>
+ <file>HMI_Phone_Button_8_Active-01.svg</file>
+ <file>HMI_Phone_Button_8_Inactive-01.svg</file>
+ <file>HMI_Phone_Button_9_Active-01.svg</file>
+ <file>HMI_Phone_Button_9_Inactive-01.svg</file>
+ <file>HMI_Phone_Button_asterisk_Active-01.svg</file>
+ <file>HMI_Phone_Button_asterisk_Inactive-01.svg</file>
+ <file>HMI_Phone_Button_Blank_Active-01.svg</file>
+ <file>HMI_Phone_Button_Blank_Inactive-01.svg</file>
+ <file>HMI_Phone_Call.svg</file>
+ <file>HMI_Phone_Contact_BlankPhoto.svg</file>
+ <file>HMI_Phone_Contact_DividingLine.svg</file>
+ <file>HMI_Phone_Contacts-01.svg</file>
+ <file>HMI_Phone_Hangup.svg</file>
+ </qresource>
+</RCC>
diff --git a/app/main.cpp b/app/main.cpp
new file mode 100644
index 0000000..952d222
--- /dev/null
+++ b/app/main.cpp
@@ -0,0 +1,46 @@
+/*
+ * 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.
+ */
+
+#include <QtCore/QDebug>
+#include <QtGui/QGuiApplication>
+#include <QtQml/QQmlApplicationEngine>
+#include <QtQuickControls2/QQuickStyle>
+
+#ifdef HAVE_LIBHOMESCREEN
+#include <libhomescreen.hpp>
+#endif
+
+int main(int argc, char *argv[])
+{
+#ifdef HAVE_LIBHOMESCREEN
+ LibHomeScreen libHomeScreen;
+
+ if (!libHomeScreen.renderAppToAreaAllowed(0, 1)) {
+ qWarning() << "renderAppToAreaAllowed is denied";
+ return -1;
+ }
+#endif
+
+ QGuiApplication app(argc, argv);
+
+ QQuickStyle::setStyle("AGL");
+
+ QQmlApplicationEngine engine;
+ engine.load(QUrl(QStringLiteral("qrc:/Phone.qml")));
+
+ return app.exec();
+}
+
diff --git a/app/models/CallHistoryModel.qml b/app/models/CallHistoryModel.qml
new file mode 100644
index 0000000..ee11799
--- /dev/null
+++ b/app/models/CallHistoryModel.qml
@@ -0,0 +1,34 @@
+/* Copyright (C) 2015, Jaguar Land Rover. All Rights Reserved.
+ * Copyright (C) 2016, The Qt Company. All Rights Reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import QtQml.Models 2.2
+
+ListModel {
+ ListElement {
+ name: "Droopy"
+ number: "8003451234"
+ time: "2015-01-05 07:15"
+ }
+
+ ListElement {
+ name: "Doc"
+ number: "8003451234"
+ time: "2015-01-05 07:15"
+ }
+
+ ListElement {
+ name: "Grumpy"
+ number: "8003451234"
+ time: "2015-01-05 07:15"
+ }
+
+ ListElement {
+ name: "Bashful"
+ number: "8003451234"
+ time: "2015-01-05 07:15"
+ }
+}
diff --git a/app/models/ContactsModel.qml b/app/models/ContactsModel.qml
new file mode 100755
index 0000000..f8419ee
--- /dev/null
+++ b/app/models/ContactsModel.qml
@@ -0,0 +1,68 @@
+/* Copyright (C) 2015, Jaguar Land Rover. All Rights Reserved.
+ * Copyright (C) 2015, The Qt Company. All Rights Reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import QtQml.Models 2.2
+
+ListModel {
+ function findName(number) {
+ for (var i = 0; i < count; i++) {
+ var o = get(i)
+ if (o.phone === number || o.mobile === number || o.work === number)
+ return o.name
+ }
+ return "Unknown number"
+ }
+
+ ListElement {
+ name: "Art McGee"
+ number: "503-616-4940"
+ mobile: "503-715-6618"
+ work: "972-256-9732"
+ }
+
+ ListElement {
+ name: "Dana Jonty"
+ number: "503-000-0000"
+ mobile: "503-209-3254"
+ work: "972-000-0000"
+ }
+
+ ListElement {
+ name: "Jojo Derick"
+ number: "503-000-0000"
+ mobile: "503-209-3254"
+ work: "972-000-0000"
+ }
+
+ ListElement {
+ name: "Kelly Johnson"
+ number: "503-000-0000"
+ mobile: "503-000-0000"
+ work: "972-000-0000"
+ }
+
+ ListElement {
+ name: "Marco Morales"
+ number: "503-000-0000"
+ mobile: "503-209-3254"
+ work: "972-000-0000"
+ }
+
+ ListElement {
+ name: "Rob Brad"
+ number: "503-000-0000"
+ mobile: "503-209-3254"
+ work: "972-000-0000"
+ }
+
+ ListElement {
+ name: "Ted Gilbert"
+ number: "503-000-0000"
+ mobile: "503-209-3254"
+ work: "972-000-0000"
+ }
+}
diff --git a/app/models/qmldir b/app/models/qmldir
new file mode 100644
index 0000000..0b87a56
--- /dev/null
+++ b/app/models/qmldir
@@ -0,0 +1,8 @@
+#/* Copyright (C) 2015, Jaguar Land Rover. All Rights Reserved.
+# *
+# * This Source Code Form is subject to the terms of the Mozilla Public
+# * License, v. 2.0. If a copy of the MPL was not distributed with this
+# * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+CallListModel 1.0 CallListModel.qml
+ContactsModel 1.0 ContactsModel.qml
diff --git a/app/phone.qrc b/app/phone.qrc
new file mode 100644
index 0000000..50b3140
--- /dev/null
+++ b/app/phone.qrc
@@ -0,0 +1,10 @@
+<RCC>
+ <qresource prefix="/">
+ <file>Phone.qml</file>
+ <file>Dialer.qml</file>
+ <file>models/CallHistoryModel.qml</file>
+ <file>models/ContactsModel.qml</file>
+ <file>models/qmldir</file>
+ <file>ContactsView.qml</file>
+ </qresource>
+</RCC>