summaryrefslogtreecommitdiffstats
path: root/sample/phone/app
diff options
context:
space:
mode:
Diffstat (limited to 'sample/phone/app')
-rw-r--r--sample/phone/app/ContactsView.qml89
-rw-r--r--sample/phone/app/Dialer.qml280
-rw-r--r--sample/phone/app/Phone.qml43
-rw-r--r--sample/phone/app/Phone.wavbin0 -> 4062608 bytes
-rw-r--r--sample/phone/app/api/BindingSoundManager.qml154
-rw-r--r--sample/phone/app/api/Telephony.qml106
-rw-r--r--sample/phone/app/app.pri12
-rw-r--r--sample/phone/app/app.pro13
-rw-r--r--sample/phone/app/audio.qrc5
-rw-r--r--sample/phone/app/config.tests/libhomescreen/libhomescreen.cpp8
-rw-r--r--sample/phone/app/config.tests/libhomescreen/libhomescreen.pro5
-rw-r--r--sample/phone/app/images/HMI_ContactScreen_ImageHolder-01.svg66
-rw-r--r--sample/phone/app/images/HMI_ContactScreen_SearchIcon-01.svg85
-rw-r--r--sample/phone/app/images/HMI_ContactScreen_X-01.svg72
-rw-r--r--sample/phone/app/images/HMI_Phone_Back_Icon.svg54
-rw-r--r--sample/phone/app/images/HMI_Phone_Button_0_Active-01.svg170
-rw-r--r--sample/phone/app/images/HMI_Phone_Button_0_Inactive-01.svg134
-rw-r--r--sample/phone/app/images/HMI_Phone_Button_1_Active-01.svg154
-rw-r--r--sample/phone/app/images/HMI_Phone_Button_1_Inactive-01.svg135
-rw-r--r--sample/phone/app/images/HMI_Phone_Button_2_Active-01.svg170
-rw-r--r--sample/phone/app/images/HMI_Phone_Button_2_Inactive-01.svg134
-rw-r--r--sample/phone/app/images/HMI_Phone_Button_3_Active-01.svg170
-rw-r--r--sample/phone/app/images/HMI_Phone_Button_3_Inactive-01.svg134
-rw-r--r--sample/phone/app/images/HMI_Phone_Button_4_Active-01.svg170
-rw-r--r--sample/phone/app/images/HMI_Phone_Button_4_Inactive-01.svg134
-rw-r--r--sample/phone/app/images/HMI_Phone_Button_5_Active-01.svg170
-rw-r--r--sample/phone/app/images/HMI_Phone_Button_5_Inactive-01.svg134
-rw-r--r--sample/phone/app/images/HMI_Phone_Button_6_Active-01.svg170
-rw-r--r--sample/phone/app/images/HMI_Phone_Button_6_Inactive-01.svg134
-rw-r--r--sample/phone/app/images/HMI_Phone_Button_7_Active-01.svg170
-rw-r--r--sample/phone/app/images/HMI_Phone_Button_7_Inactive-01.svg134
-rw-r--r--sample/phone/app/images/HMI_Phone_Button_8_Active-01.svg170
-rw-r--r--sample/phone/app/images/HMI_Phone_Button_8_Inactive-01.svg134
-rw-r--r--sample/phone/app/images/HMI_Phone_Button_9_Active-01.svg170
-rw-r--r--sample/phone/app/images/HMI_Phone_Button_9_Inactive-01.svg134
-rw-r--r--sample/phone/app/images/HMI_Phone_Button_Blank_Active-01.svg165
-rw-r--r--sample/phone/app/images/HMI_Phone_Button_Blank_Inactive-01.svg126
-rw-r--r--sample/phone/app/images/HMI_Phone_Button_NumberSign_Active-01.svg170
-rw-r--r--sample/phone/app/images/HMI_Phone_Button_NumberSign_Inactive-01.svg134
-rw-r--r--sample/phone/app/images/HMI_Phone_Button_asterisk_Active-01.svg170
-rw-r--r--sample/phone/app/images/HMI_Phone_Button_asterisk_Inactive-01.svg134
-rw-r--r--sample/phone/app/images/HMI_Phone_Call.svg106
-rw-r--r--sample/phone/app/images/HMI_Phone_Contact_BlankPhoto.svg58
-rw-r--r--sample/phone/app/images/HMI_Phone_Contact_DividingLine.svg57
-rw-r--r--sample/phone/app/images/HMI_Phone_Contacts-01.svg88
-rw-r--r--sample/phone/app/images/HMI_Phone_Hangup.svg106
-rw-r--r--sample/phone/app/images/images.qrc39
-rw-r--r--sample/phone/app/libsmwrapper.cpp155
-rw-r--r--sample/phone/app/libsmwrapper.h58
-rw-r--r--sample/phone/app/main.cpp80
-rw-r--r--sample/phone/app/models/CallHistoryModel.qml34
-rwxr-xr-xsample/phone/app/models/ContactsModel.qml68
-rw-r--r--sample/phone/app/models/qmldir8
-rw-r--r--sample/phone/app/phone.qrc12
54 files changed, 5785 insertions, 0 deletions
diff --git a/sample/phone/app/ContactsView.qml b/sample/phone/app/ContactsView.qml
new file mode 100644
index 0000000..2a00cf5
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/Dialer.qml b/sample/phone/app/Dialer.qml
new file mode 100644
index 0000000..1314826
--- /dev/null
+++ b/sample/phone/app/Dialer.qml
@@ -0,0 +1,280 @@
+/*
+ * 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'
+import 'api' as API
+
+Item {
+ id: root
+
+ function getTime() {
+ return new Date().getTime()
+ }
+
+ // Elapsed time in hh:mm:ss format
+ function getElapsedTimeString(startTime) {
+ var seconds = Math.floor((getTime() - startTime) / 1000);
+ var time = new Date(null);
+ time.setSeconds(seconds);
+ return time.toISOString().substr(11, 8);
+ }
+
+ Timer {
+ id: callTimer
+ interval: 1000
+ repeat: true
+ property var startTime
+ onTriggered: callStatusLabel.text = getElapsedTimeString(startTime)
+ }
+
+ API.Telephony {
+ id: telephony
+ url: bindingAddress
+ property string callStatus: "disconnected"
+ property string callClipColp: ""
+
+ onCallStatusChanged: {
+ if (callStatus == "incoming") {
+ soundmgr.connect("calling")
+ //ringtone.active = true
+ //rejectButton.active = true
+ //callStatusLabel.text = "Incoming call from " + callClipColp
+ } else if (callStatus == "dialing") {
+ callStatusLabel.text = "Dialing " + callClipColp
+ } else if (callStatus == "active") {
+ rejectButton.active = false
+ callTimer.startTime = getTime()
+ callTimer.restart()
+ } else if (callStatus == "disconnected") {
+ ringtone.active = false
+ rejectButton.active = false
+ callButton.checked = false
+ callTimer.stop()
+ callStatusLabel.text = ""
+ soundmgr.disconnect()
+ }
+ }
+ }
+ API.BindingSoundManager {
+ id: soundmgr
+ onApproved: {
+ console.log("Sound Right Approved")
+ switch(telephony.callStatus){
+ case "dialing":
+ case "active":
+ case "disconnected":
+ telephony.dial(number.text)
+ break; // WARNING! these cases are not tested excluding incomming
+ case "incoming":
+ ringtone.active = true
+ rejectButton.active = true
+ callStatusLabel.text = "Incoming call from " + telephony.callClipColp
+
+ break;
+ default:
+ break;
+ }
+ }
+ onDenied: {
+ console.log("Sound Right Denyed due to emergency")
+ }
+ onPaused:{
+ console.log("paused") // this doesn't come maybe
+ }
+ }
+
+ Loader {
+ id: ringtone
+ active: false
+ sourceComponent: Component {
+ SoundEffect {
+ loops: SoundEffect.Infinite
+ source: './Phone.wav'
+ category: 'phone'
+ Component.onCompleted: play()
+ }
+ }
+ }
+
+ 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
+ }
+ }
+ }
+ }
+
+ Label {
+ id: callStatusLabel
+ Layout.alignment: Qt.AlignHCenter
+ text: ""
+ }
+
+ ToggleButton {
+ id: callButton
+ Layout.alignment: Qt.AlignHCenter
+ onImage: './images/HMI_Phone_Hangup.svg'
+ offImage: './images/HMI_Phone_Call.svg'
+ property var active: (number.text.length > 0) || (telephony.callStatus == "incoming") || (telephony.callStatus == "active")
+ opacity: active ? 1 : 0.25
+
+ onCheckedChanged: {
+ if (checked) {
+ if (!active) {
+ callButton.checked = false
+ return
+ }
+
+ var contact = {'name': name.text, 'number': number.text}
+ if (contact.name === '')
+ contact.name = 'Unknown'
+ history.insert(0, contact)
+ if (telephony.callStatus == "incoming") {
+ telephony.answer()
+ ringtone.active = false;
+ } else {
+ soundmgr.connect()
+ //telephony.dial(number.text)
+ }
+ } else {
+ name.text = ''
+ number.text = ''
+ telephony.hangup()
+ soundmgr.disconnect()
+ }
+ }
+ }
+
+ Loader {
+ id: rejectButton
+ Layout.alignment: Qt.AlignHCenter
+ active: false
+ sourceComponent: ImageButton {
+ offImage: './images/HMI_Phone_Hangup.svg'
+ onClicked: {
+ telephony.hangup()
+ soundmgr.disconnect()
+ }
+ }
+ }
+
+ 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/sample/phone/app/Phone.qml b/sample/phone/app/Phone.qml
new file mode 100644
index 0000000..0a23f2a
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/Phone.wav b/sample/phone/app/Phone.wav
new file mode 100644
index 0000000..804f95f
--- /dev/null
+++ b/sample/phone/app/Phone.wav
Binary files differ
diff --git a/sample/phone/app/api/BindingSoundManager.qml b/sample/phone/app/api/BindingSoundManager.qml
new file mode 100644
index 0000000..849c2ff
--- /dev/null
+++ b/sample/phone/app/api/BindingSoundManager.qml
@@ -0,0 +1,154 @@
+/*
+ * Copyright (c) 2017 TOYOTA MOTOR CORPORATION
+ *
+ * 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 QtWebSockets 1.0
+
+WebSocket {
+ id: root
+ active: true
+ url: bindingAddressSM
+ property int connectionID
+ property int sourceID_base // this demo uses only interrupt mode
+ property int sourceID_calling
+
+ property string apiString: "soundmanager"
+ property string payloadLength: "9999"
+
+ signal approved()
+ signal denied()
+ signal paused()
+
+ readonly property var msgid: {
+ "call": 2,
+ "retok": 3,
+ "reterr": 4,
+ "event": 5
+ }
+
+ onTextMessageReceived: {
+ var json = JSON.parse(message);
+ console.log("Raw response: " + message)
+ var request = json[2].request
+ var response = json[2].response
+
+ switch (json[0]) {
+ case msgid.call:
+ break
+ case msgid.retok:
+ var verb = response.verb
+ var err = response.error
+ switch(verb){
+ case "connect":
+ console.log("phone: replied by connect")
+ if(err == 0){
+ connectionID = response.mainConnectionID
+ console.log("phone: mainConnectionID is " + connectionID)
+ }
+ break;
+ case "registerSource":
+ console.log("phone: replied by registerSource")
+ if(err == 0){
+ sourceID_calling = response.sourceID
+ }
+ default:
+ break;
+ }
+ break
+ case msgid.event:
+ var content = JSON.parse(JSON.stringify(json[2]));
+ var eventName = content.event
+ switch(eventName){
+ case "soundmanager\/asyncSetSourceState":
+ if(sourceID_calling == content.data.sourceID){
+ console.log("phone: call ackSetSourceState")
+ sendSocketMessage("ackSetSourceState", {handle:content.data.handle, error:0})
+ switch(content.data.sourceState){
+ case "on":
+ approved()
+ break;
+ case "off":
+ denied()
+ break;
+ case "paused":
+ paused()
+ break;
+ }
+ }
+ break;
+ case "soundmanager\/asyncConnect":
+ // In reality, device shall be opened in this timing
+ if(connectionID == content.data.connectionID){
+ }
+ break;
+ case "soundmanager\/asyncDisconnect":
+ // In reality, device shall be closed in this timing
+ if(connectionID == content.data.connectionID){
+ connectionID = 0
+ }
+ break;
+ default:
+ break;
+ }
+ break
+ case msgid.reterr:
+ console.debug("Bad return value, binding probably not installed")
+ break
+ }
+ }
+
+ onStatusChanged: {
+ switch (status) {
+ case WebSocket.Open:
+ // Initialize band values now that we're connected to the
+ // binding
+ sendSocketMessage("subscribe", { event: "asyncSetSourceState" })
+ sendSocketMessage("subscribe", { event: "asyncConnect" })
+ sendSocketMessage("subscribe", { event: "asyncDisconnect" })
+ // registerSource("phone-base","base") // if using base such as push sound
+ registerSource("phone", "interrupt")
+ break
+ case WebSocket.Error:
+ console.debug("WebSocket error: " + root.errorString)
+ break
+ }
+ }
+
+ function sendSocketMessage(verb, parameter) {
+ var requestJson = [ msgid.call, payloadLength, apiString + '/'
+ + verb, parameter ]
+ console.debug("sendSocketMessage: " + JSON.stringify(requestJson))
+ sendTextMessage(JSON.stringify(requestJson))
+ }
+
+ function connect(mode) {
+ if(mode == "calling"){
+ //sendSocketMessage("connect", {sourceID:sourceID_calling,sinkID:"DRIVER-ZONE"}) // sink ID should be abstracted , but for now, uses fixed number as trial
+ sendSocketMessage("connect", {sourceID:sourceID_calling,sinkID:1}) // sink ID should be abstracted , but for now, uses fixed number as trial
+ } else{
+ //sendSocketMessage("connect", {sourceID:sourceID_base,sinkID:"DRIVER-PASSENGER-ZONE"})
+ sendSocketMessage("connect", {sourceID:sourceID_base,sinkID:1})
+ }
+ }
+
+ function disconnect() {
+ sendSocketMessage("disconnect", {mainConnectionID:connectionID})
+ }
+
+ function registerSource(app, sourceClass) {
+ //sendSocketMessage("registerSource", {appname :app, sourceClassID:sourceClass})
+ sendSocketMessage("registerSource", {appname :app})
+ }
+}
diff --git a/sample/phone/app/api/Telephony.qml b/sample/phone/app/api/Telephony.qml
new file mode 100644
index 0000000..c7d9218
--- /dev/null
+++ b/sample/phone/app/api/Telephony.qml
@@ -0,0 +1,106 @@
+/*
+ * Copyright (C) 2016 The Qt Company Ltd.
+ * Copyright (C) 2017 Konsulko Group
+ *
+ * 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 QtWebSockets 1.0
+
+WebSocket {
+ id: root
+ active: true
+ url: bindingAddress
+
+ property string statusString: "waiting..."
+ property string apiString: "telephony"
+ property var verbs: []
+ property string payloadLength: "9999"
+
+ readonly property var msgid: {
+ "call": 2,
+ "retok": 3,
+ "reterr": 4,
+ "event": 5
+ }
+
+ onTextMessageReceived: {
+ var json = JSON.parse(message)
+ var request = json[2].request
+ var response = json[2].response
+ switch (json[0]) {
+ case msgid.call:
+ break
+ case msgid.retok:
+ root.statusString = request.status
+ var verb = verbs.shift()
+ if (verb == "dial") {
+ console.debug("Dial response")
+ } else if (verb == "hangup") {
+ console.debug("Hangup response")
+ }
+ break
+ case msgid.reterr:
+ root.statusString = "Bad return value, binding probably not installed"
+ break
+ case msgid.event:
+ var payload = JSON.parse(JSON.stringify(json[2]))
+ var event = payload.event
+ var data = payload.data
+ if (event == "telephony/incomingCall") {
+ callClipColp = data.clip
+ callStatus = "incoming"
+ } else if (event == "telephony/dialingCall") {
+ callClipColp = data.colp
+ callStatus = "dialing"
+ } else if (event == "telephony/terminatedCall") {
+ callStatus = "disconnected"
+ } else if (event == "telephony/callStateChanged") {
+ callStatus = data.state
+ }
+ break
+ }
+ }
+
+ onStatusChanged: {
+ switch (status) {
+ case WebSocket.Open:
+ break
+ case WebSocket.Error:
+ root.statusString = "WebSocket error: " + root.errorString
+ break
+ }
+ }
+
+ function sendSocketMesage(verb, parameter) {
+ var requestJson = [ msgid.call, payloadLength, apiString + '/' + verb, parameter ]
+ verbs.push(verb)
+ sendTextMessage(JSON.stringify(requestJson))
+ }
+
+ function dial(number) {
+ var parameterJson = { value: number }
+ sendSocketMesage("dial", parameterJson)
+ }
+
+ function answer() {
+ var parameterJson = 'None'
+ sendSocketMesage("answer", parameterJson)
+ }
+
+ function hangup() {
+ var parameterJson = 'None'
+ sendSocketMesage("hangup", parameterJson)
+ }
+}
diff --git a/sample/phone/app/app.pri b/sample/phone/app/app.pri
new file mode 100644
index 0000000..014646f
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/app.pro b/sample/phone/app/app.pro
new file mode 100644
index 0000000..cc400a9
--- /dev/null
+++ b/sample/phone/app/app.pro
@@ -0,0 +1,13 @@
+TARGET = phone
+QT = quickcontrols2
+
+SOURCES = main.cpp
+
+SUBDIRS = telephony-binding
+
+RESOURCES += \
+ phone.qrc \
+ images/images.qrc \
+ audio.qrc
+
+include(app.pri)
diff --git a/sample/phone/app/audio.qrc b/sample/phone/app/audio.qrc
new file mode 100644
index 0000000..82ff48e
--- /dev/null
+++ b/sample/phone/app/audio.qrc
@@ -0,0 +1,5 @@
+<RCC>
+ <qresource prefix="/">
+ <file>Phone.wav</file>
+ </qresource>
+</RCC>
diff --git a/sample/phone/app/config.tests/libhomescreen/libhomescreen.cpp b/sample/phone/app/config.tests/libhomescreen/libhomescreen.cpp
new file mode 100644
index 0000000..d698b05
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/config.tests/libhomescreen/libhomescreen.pro b/sample/phone/app/config.tests/libhomescreen/libhomescreen.pro
new file mode 100644
index 0000000..eb4e8f3
--- /dev/null
+++ b/sample/phone/app/config.tests/libhomescreen/libhomescreen.pro
@@ -0,0 +1,5 @@
+SOURCES = libhomescreen.cpp
+
+CONFIG -= qt
+CONFIG += link_pkgconfig
+PKGCONFIG += homescreen
diff --git a/sample/phone/app/images/HMI_ContactScreen_ImageHolder-01.svg b/sample/phone/app/images/HMI_ContactScreen_ImageHolder-01.svg
new file mode 100644
index 0000000..16d2f65
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_ContactScreen_SearchIcon-01.svg b/sample/phone/app/images/HMI_ContactScreen_SearchIcon-01.svg
new file mode 100644
index 0000000..f45a3c7
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_ContactScreen_X-01.svg b/sample/phone/app/images/HMI_ContactScreen_X-01.svg
new file mode 100644
index 0000000..5ad9479
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Back_Icon.svg b/sample/phone/app/images/HMI_Phone_Back_Icon.svg
new file mode 100644
index 0000000..ee96db0
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Button_0_Active-01.svg b/sample/phone/app/images/HMI_Phone_Button_0_Active-01.svg
new file mode 100644
index 0000000..27c55d6
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Button_0_Inactive-01.svg b/sample/phone/app/images/HMI_Phone_Button_0_Inactive-01.svg
new file mode 100644
index 0000000..f5bc78f
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Button_1_Active-01.svg b/sample/phone/app/images/HMI_Phone_Button_1_Active-01.svg
new file mode 100644
index 0000000..b13c772
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Button_1_Inactive-01.svg b/sample/phone/app/images/HMI_Phone_Button_1_Inactive-01.svg
new file mode 100644
index 0000000..e70f5bf
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Button_2_Active-01.svg b/sample/phone/app/images/HMI_Phone_Button_2_Active-01.svg
new file mode 100644
index 0000000..a84f089
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Button_2_Inactive-01.svg b/sample/phone/app/images/HMI_Phone_Button_2_Inactive-01.svg
new file mode 100644
index 0000000..5b665fd
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Button_3_Active-01.svg b/sample/phone/app/images/HMI_Phone_Button_3_Active-01.svg
new file mode 100644
index 0000000..d5524d9
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Button_3_Inactive-01.svg b/sample/phone/app/images/HMI_Phone_Button_3_Inactive-01.svg
new file mode 100644
index 0000000..9cb9553
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Button_4_Active-01.svg b/sample/phone/app/images/HMI_Phone_Button_4_Active-01.svg
new file mode 100644
index 0000000..8952bd0
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Button_4_Inactive-01.svg b/sample/phone/app/images/HMI_Phone_Button_4_Inactive-01.svg
new file mode 100644
index 0000000..6085cc4
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Button_5_Active-01.svg b/sample/phone/app/images/HMI_Phone_Button_5_Active-01.svg
new file mode 100644
index 0000000..bdab1cb
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Button_5_Inactive-01.svg b/sample/phone/app/images/HMI_Phone_Button_5_Inactive-01.svg
new file mode 100644
index 0000000..585ed25
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Button_6_Active-01.svg b/sample/phone/app/images/HMI_Phone_Button_6_Active-01.svg
new file mode 100644
index 0000000..9ae45d9
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Button_6_Inactive-01.svg b/sample/phone/app/images/HMI_Phone_Button_6_Inactive-01.svg
new file mode 100644
index 0000000..7205ce8
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Button_7_Active-01.svg b/sample/phone/app/images/HMI_Phone_Button_7_Active-01.svg
new file mode 100644
index 0000000..8db028b
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Button_7_Inactive-01.svg b/sample/phone/app/images/HMI_Phone_Button_7_Inactive-01.svg
new file mode 100644
index 0000000..9df3155
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Button_8_Active-01.svg b/sample/phone/app/images/HMI_Phone_Button_8_Active-01.svg
new file mode 100644
index 0000000..9cd4800
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Button_8_Inactive-01.svg b/sample/phone/app/images/HMI_Phone_Button_8_Inactive-01.svg
new file mode 100644
index 0000000..2eb2e60
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Button_9_Active-01.svg b/sample/phone/app/images/HMI_Phone_Button_9_Active-01.svg
new file mode 100644
index 0000000..51883b1
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Button_9_Inactive-01.svg b/sample/phone/app/images/HMI_Phone_Button_9_Inactive-01.svg
new file mode 100644
index 0000000..c70e475
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Button_Blank_Active-01.svg b/sample/phone/app/images/HMI_Phone_Button_Blank_Active-01.svg
new file mode 100644
index 0000000..2e4fe6a
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Button_Blank_Inactive-01.svg b/sample/phone/app/images/HMI_Phone_Button_Blank_Inactive-01.svg
new file mode 100644
index 0000000..cc001ab
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Button_NumberSign_Active-01.svg b/sample/phone/app/images/HMI_Phone_Button_NumberSign_Active-01.svg
new file mode 100644
index 0000000..ce48926
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Button_NumberSign_Inactive-01.svg b/sample/phone/app/images/HMI_Phone_Button_NumberSign_Inactive-01.svg
new file mode 100644
index 0000000..80e834e
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Button_asterisk_Active-01.svg b/sample/phone/app/images/HMI_Phone_Button_asterisk_Active-01.svg
new file mode 100644
index 0000000..4116466
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Button_asterisk_Inactive-01.svg b/sample/phone/app/images/HMI_Phone_Button_asterisk_Inactive-01.svg
new file mode 100644
index 0000000..51f1812
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Call.svg b/sample/phone/app/images/HMI_Phone_Call.svg
new file mode 100644
index 0000000..2328737
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Contact_BlankPhoto.svg b/sample/phone/app/images/HMI_Phone_Contact_BlankPhoto.svg
new file mode 100644
index 0000000..5aae13c
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Contact_DividingLine.svg b/sample/phone/app/images/HMI_Phone_Contact_DividingLine.svg
new file mode 100644
index 0000000..f7f3695
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Contacts-01.svg b/sample/phone/app/images/HMI_Phone_Contacts-01.svg
new file mode 100644
index 0000000..5e66219
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/HMI_Phone_Hangup.svg b/sample/phone/app/images/HMI_Phone_Hangup.svg
new file mode 100644
index 0000000..f848286
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/images/images.qrc b/sample/phone/app/images/images.qrc
new file mode 100644
index 0000000..80fa584
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/libsmwrapper.cpp b/sample/phone/app/libsmwrapper.cpp
new file mode 100644
index 0000000..e75fa03
--- /dev/null
+++ b/sample/phone/app/libsmwrapper.cpp
@@ -0,0 +1,155 @@
+/*
+ * Copyright (c) 2017 TOYOTA MOTOR CORPORATION
+ *
+ * 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 "libsmwrapper.h"
+using namespace std;
+
+static int create_json_object(const QJsonObject& obj, struct json_object* jobj);
+static bool put_val_to_jobj(const char* key, const QJsonValue& val, struct json_object* jobj);
+static bool put_array_to_jobj(const char* key, const QJsonArray& qarray, struct json_object* jobj);
+
+LibSMWrapper::LibSMWrapper(QObject *parent) :
+ QObject(parent)
+{
+ /* This is not enabled */
+ //libsm = new LibSoundmanager();
+}
+
+LibSMWrapper::LibSMWrapper(const int port, const QString& token, QObject *parent) :
+ QObject(parent)
+{
+ libsm = new LibSoundmanager(port, token.toStdString());
+}
+
+LibSMWrapper::~LibSMWrapper()
+{
+ delete libsm;
+}
+
+int LibSMWrapper::call(const QString &verb, const QJsonObject &arg)
+{
+ // translate QJsonObject to struct json_object
+ struct json_object* jobj = json_object_new_object();
+ int ret = create_json_object(arg, jobj);
+ if(ret < 0)
+ {
+ return -1;
+ }
+ return libsm->call(verb.toStdString().c_str(), jobj);
+}
+
+static int create_json_object(const QJsonObject& obj, struct json_object* jobj)
+{
+ try{
+ for(auto itr = obj.begin(); itr != obj.end();++itr)
+ {
+ string key = itr.key().toStdString();
+ //const char* key = itr.key().toStdString().c_str(); // Do not code like this. string is removed if size is over 16!!
+
+ bool ret = put_val_to_jobj(key.c_str(), itr.value(),jobj);
+ if(!ret){
+ /*This is not implemented*/
+ qDebug("JsonArray can't parse for now");
+ return -1;
+ // ToDo
+ // For now, array may not be inputted for soundmanager
+ // But use case absolutely exists
+ /*QJsonArray qarray = itr.value().toArray();
+ ret = put_array_to_jobj(key, qarray, jobj);*/
+ }
+ }
+ }
+ catch(...){
+ qDebug("Json parse error occured");
+ return -1;
+ }
+ return 0;
+}
+
+static bool put_val_to_jobj(const char* key, const QJsonValue& val, struct json_object* jobj)
+{
+ if(val.isArray()){
+ return false; // Array can't input
+ }
+ if(val.isString()){
+ string value = val.toString().toStdString();
+ json_object_object_add(jobj, key, json_object_new_string(value.c_str()));
+ }
+ else{
+ const int value = val.toInt();
+ json_object_object_add(jobj, key, json_object_new_int(value));
+ }
+ return true;
+}
+
+static bool put_array_to_jobj(const char* key, const QJsonArray& qarray, struct json_object* jobj)
+{
+ // ToDo Fix this !!
+/* struct json_object* jarray = json_object_new_array();
+
+ bool ret;
+ for(auto jitr = qarray.begin(); jitr != qarray.end(); ++jitr){
+ struct json_object* tmp = json_object_new_object();
+ ret = put_val_to_jobj(key,jitr,tmp);
+ if(!ret)
+ {
+ put_array_to_jobj(key,jitr,tmp);
+ }
+ json_object_array_add(jarray, tmp);
+ }
+ json_object_object_add(jobj, key, jarray);
+ return true;*/
+}
+
+void LibSMWrapper::wrapper_registerCallback(
+ void (*event_func)(const string& event, struct json_object* event_contents),
+ void (*reply_func)(struct json_object* reply_contents))
+{
+ libsm->register_callback(event_func, reply_func);
+}
+
+void LibSMWrapper::subscribe(const QString event_name)
+{
+ std::string str = event_name.toStdString();
+ libsm->subscribe(str);
+}
+
+void LibSMWrapper::unsubscribe(const QString event_name)
+{
+ std::string str = event_name.toStdString();
+ libsm->unsubscribe(str);
+}
+
+void LibSMWrapper::run_eventloop()
+{
+ libsm->run_eventloop();
+}
+
+void LibSMWrapper::print(const QString &str)
+{
+ qDebug("%s is called", str.toStdString().c_str());
+}
+
+void LibSMWrapper::emit_event(const QString &event, const QJsonObject &msg)
+{
+ qDebug("emit smEvent signal @%s", __FUNCTION__);
+ emit smEvent(event, msg);
+}
+void LibSMWrapper::emit_reply(const QJsonObject &msg)
+{
+ qDebug("emit smReply signal @%s", __FUNCTION__);
+ emit smReply(msg);
+} \ No newline at end of file
diff --git a/sample/phone/app/libsmwrapper.h b/sample/phone/app/libsmwrapper.h
new file mode 100644
index 0000000..2c3ba3e
--- /dev/null
+++ b/sample/phone/app/libsmwrapper.h
@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2017 TOYOTA MOTOR CORPORATION
+ *
+ * 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.
+ */
+#ifndef SIGNALER_H
+#define SIGNALER_H
+
+ #include <QObject>
+ #include <QVariant>
+ #include <QJsonDocument>
+ #include <QtCore/QJsonObject>
+ #include <libsoundmanager/libsoundmanager.hpp>
+ #include <QString>
+ #include <string>
+
+
+class LibSMWrapper : public QObject
+{
+ Q_OBJECT
+public: // method
+ explicit LibSMWrapper(QObject *parent = nullptr);
+ LibSMWrapper(const int port, const QString& token, QObject *parent = nullptr);
+ ~LibSMWrapper();
+
+ void wrapper_registerCallback(
+ void (*event_func)(const std::string& event, struct json_object* event_contents),
+ void (*reply_func)(struct json_object* reply_contents)
+ );
+ void subscribe(const QString event_name);
+ void unsubscribe(const QString event_name);
+ void run_eventloop();
+
+ void emit_event(const QString &event, const QJsonObject &msg);
+ void emit_reply(const QJsonObject &msg);
+public slots:
+ int call(const QString &verb, const QJsonObject &arg);
+ void print(const QString &str);
+signals:
+ void smEvent(const QVariant &event, const QVariant &msg);
+ void smReply(const QVariant &msg);
+
+private:
+ LibSoundmanager* libsm;
+};
+
+
+#endif /*SIGNALER_H*/ \ No newline at end of file
diff --git a/sample/phone/app/main.cpp b/sample/phone/app/main.cpp
new file mode 100644
index 0000000..96f84cf
--- /dev/null
+++ b/sample/phone/app/main.cpp
@@ -0,0 +1,80 @@
+/*
+ * 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 <QtCore/QCommandLineParser>
+#include <QtCore/QUrlQuery>
+#include <QtGui/QGuiApplication>
+#include <QtQml/QQmlApplicationEngine>
+#include <QtQml/QQmlContext>
+#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;
+
+ QCommandLineParser parser;
+ parser.addPositionalArgument("port", app.translate("main", "port for binding"));
+ parser.addPositionalArgument("secret", app.translate("main", "secret for binding"));
+ parser.addHelpOption();
+ parser.addVersionOption();
+ parser.process(app);
+ QStringList positionalArguments = parser.positionalArguments();
+ if (positionalArguments.length() == 2) {
+ int port = positionalArguments.takeFirst().toInt();
+ QString secret = positionalArguments.takeFirst();
+ QUrl bindingAddress;
+ bindingAddress.setScheme(QStringLiteral("ws"));
+ bindingAddress.setHost(QStringLiteral("localhost"));
+ bindingAddress.setPort(port);
+ bindingAddress.setPath(QStringLiteral("/api"));
+ QUrlQuery query;
+ query.addQueryItem(QStringLiteral("token"), secret);
+ bindingAddress.setQuery(query);
+
+ QUrl bindingAddressSM;
+ bindingAddressSM.setScheme(QStringLiteral("ws"));
+ bindingAddressSM.setHost(QStringLiteral("localhost"));
+ bindingAddressSM.setPort(port);
+ bindingAddressSM.setPath(QStringLiteral("/api"));
+ bindingAddressSM.setQuery(query);
+
+ QQmlContext *context = engine.rootContext();
+ context->setContextProperty(QStringLiteral("bindingAddress"), bindingAddress);
+ context->setContextProperty(QStringLiteral("bindingAddressSM"), bindingAddressSM);
+ }
+ engine.load(QUrl(QStringLiteral("qrc:/Phone.qml")));
+
+ return app.exec();
+}
+
diff --git a/sample/phone/app/models/CallHistoryModel.qml b/sample/phone/app/models/CallHistoryModel.qml
new file mode 100644
index 0000000..ee11799
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/models/ContactsModel.qml b/sample/phone/app/models/ContactsModel.qml
new file mode 100755
index 0000000..f8419ee
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/models/qmldir b/sample/phone/app/models/qmldir
new file mode 100644
index 0000000..0b87a56
--- /dev/null
+++ b/sample/phone/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/sample/phone/app/phone.qrc b/sample/phone/app/phone.qrc
new file mode 100644
index 0000000..cfa53c2
--- /dev/null
+++ b/sample/phone/app/phone.qrc
@@ -0,0 +1,12 @@
+<RCC>
+ <qresource prefix="/">
+ <file>Phone.qml</file>
+ <file>Dialer.qml</file>
+ <file>api/Telephony.qml</file>
+ <file>api/BindingSoundManager.qml</file>
+ <file>models/CallHistoryModel.qml</file>
+ <file>models/ContactsModel.qml</file>
+ <file>models/qmldir</file>
+ <file>ContactsView.qml</file>
+ </qresource>
+</RCC>