Add sample application[phone]flounder_5.99.6flounder_5.99.5flounder_5.99.4flounder_5.99.3flounder_5.99.2flounder_5.99.1flounder/5.99.6flounder/5.99.5flounder/5.99.4flounder/5.99.3flounder/5.99.2flounder/5.99.1eel_5.1.0eel_5.0.3eel_5.0.2eel_5.0.1eel_5.0.0eel_4.99.5eel_4.99.4eel_4.99.3eel_4.99.2eel_4.99.1eel/5.1.0eel/5.0.3eel/5.0.2eel/5.0.1eel/5.0.0eel/4.99.5eel/4.99.4eel/4.99.3eel/4.99.2eel/4.99.15.99.65.99.55.99.45.99.35.99.25.99.15.1.05.0.35.0.25.0.15.0.04.99.54.99.44.99.34.99.24.99.1eel

The sample application that achieves the interrupt policy management
But an applications on background sometimes can't get events.
I guess this is caused by WorkerThread on Qt(QML)
So, the sequence sometimes stops

Change-Id: I8008872ccb4c3c8d3f838095ded118fb5fdf6a6f
Signed-off-by: Kazumasa Mitsunari <kazumasa_mitsunari_za@mail.toyota.co.jp>

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
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>