[companionapp] tabs rework

Task-number: AUTOSUITE-975
Change-Id: Ic2f488f59ed2f041958689135cfc7eb8ea27eb6f
Reviewed-by: Grigorii Zimin <gzimin@luxoft.com>

33 files changed, 1126 insertions, 294 deletions

diff --git a/src/remotesettings/app/ConnectionDialog.qml b/src/remotesettings/app/ConnectionDialog.qml
index a4ca82a1..7878a13a 100644
--- a/src/remotesettings/app/ConnectionDialog.qml
+++ b/src/remotesettings/app/ConnectionDialog.qml
@@ -73,7 +73,7 @@ Dialog {
 
 
             RowLayout {
-                spacing: sc(10)
+                spacing: neptuneScale(10)
                 Layout.fillWidth: true
                 Layout.alignment: Qt.AlignHCenter
 
diff --git a/src/remotesettings/app/DefaultNumberAnimation.qml b/src/remotesettings/app/DefaultNumberAnimation.qml
new file mode 100644
index 00000000..42599c5b
--- /dev/null
+++ b/src/remotesettings/app/DefaultNumberAnimation.qml
@@ -0,0 +1,67 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 Luxoft Sweden AB
+** Copyright (C) 2018 Pelagicore AG
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Neptune 3 IVI UI.
+**
+** $QT_BEGIN_LICENSE:GPL-QTAS$
+** Commercial License Usage
+** Licensees holding valid commercial Qt Automotive Suite licenses may use
+** this file in accordance with the commercial license agreement provided
+** with the Software or, alternatively, in accordance with the terms
+** contained in a written agreement between you and The Qt Company.  For
+** licensing terms and conditions see https://www.qt.io/terms-conditions.
+** For further information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+** SPDX-License-Identifier: GPL-3.0
+**
+****************************************************************************/
+
+import QtQuick 2.6
+
+/*!
+    \qmltype DefaultNumberAnimation
+    \inqmlmodule animations
+    \inherits NumberAnimation
+    \since 5.11
+    \brief The default number animation of a Neptune 3 application.
+
+
+    The DefaultNumberAnimation describes the default number animation being
+    used in Neptune 3.
+
+    \section2 Example Usage
+
+    The following example shows how to use \l{DefaultNumberAnimation}:
+
+    \qml
+    import QtQuick 2.10
+    import shared.animations 1.0
+
+    Rectangle {
+        id: root
+
+        width: 80
+        height: 80
+
+        Behavior on width { DefaultNumberAnimation {} }
+    }
+    \endqml
+*/
+NumberAnimation {
+    easing.type: Easing.InOutQuad
+    duration: 270
+}
diff --git a/src/remotesettings/app/ClusterPage.qml b/src/remotesettings/app/DevelopmentPage.qml
index edfb7157..91c72ba8 100644
--- a/src/remotesettings/app/ClusterPage.qml
+++ b/src/remotesettings/app/DevelopmentPage.qml
@@ -1,7 +1,6 @@
 /****************************************************************************
 **
 ** Copyright (C) 2019 Luxoft Sweden AB
-** Copyright (C) 2018 Pelagicore AG
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the Neptune 3 IVI UI.
@@ -38,18 +37,196 @@ Flickable {
     id: root
     flickableDirection: Flickable.VerticalFlick
     contentHeight: baseLayout.height
-
     ScrollIndicator.vertical: ScrollIndicator { }
 
     ColumnLayout {
         id: baseLayout
-        enabled: instrumentCluster.isInitialized && client.connected
-        spacing: 20
+
         anchors.centerIn: parent
 
+        ColumnLayout {
+            enabled: systemUI.isInitialized && client.connected
+            Layout.alignment: Qt.AlignHCenter
+
+            Label {
+                text: "System UI"
+                Layout.alignment: Qt.AlignHCenter
+                font.bold: true
+            }
+
+            Button {
+                Layout.alignment: Qt.AlignHCenter
+                text: qsTr("Show Next Application IC Window");
+                onClicked: {
+                    // This is a hack. See the documentation of this property for details
+                    systemUI.applicationICWindowSwitchCount =
+                                                    systemUI.applicationICWindowSwitchCount + 1
+                }
+            }
+
+            Label {
+                text: "Cluster"
+                Layout.alignment: Qt.AlignHCenter
+                font.bold: true
+            }
+
+            GridLayout {
+                Layout.alignment: Qt.AlignHCenter
+                columns: root.width < neptuneScale(100) ? 2 : 4
+
+                CheckBox {
+                    text: qsTr("Hide Gauges")
+                    checked: uiSettings.hideGauges
+                    onClicked: uiSettings.hideGauges = checked
+                }
+
+                CheckBox {
+                    text: qsTr("Navigation Mode")
+                    checked: uiSettings.navigationMode
+                    onClicked: uiSettings.navigationMode = checked
+                }
+            }
+        }
+
+
+        GridLayout {
+            enabled: instrumentCluster.isConnected
+            Layout.alignment: Qt.AlignHCenter
+            columns: root.width < neptuneScale(100) ? 2 : 4
+
+            //Outside Temperature
+            Label {
+                text: qsTr("Outside \n temperature: "
+                           + outsideTemperature.value.toFixed(1).padStart(6) + " °C")
+            }
+            Slider {
+                id: outsideTemperature
+                value: instrumentCluster.outsideTemperatureCelsius
+                from: -100
+                stepSize: 0.5
+                to: 100.0
+                onValueChanged: {
+                    if (pressed) {
+                        instrumentCluster.outsideTemperatureCelsius = value
+                    }
+                }
+            }
+
+            // Mileage in km
+            Label {
+                text: qsTr("Mileage, km")
+            }
+            Slider {
+                id: mileageKm
+                value: instrumentCluster.mileageKm
+                from: 0
+                stepSize: 0.5
+                to: 9E6
+                onValueChanged: if (pressed) { instrumentCluster.mileageKm = value }
+            }
+
+            // Route progress
+            Label {
+                text: qsTr("Route \n progress, %:")
+            }
+
+            Slider {
+                id: routeProgressSlider
+                from: 0
+                to: 1.0
+                stepSize: 0.01
+                value: instrumentCluster.navigationProgressPercents
+                onValueChanged: {
+                    if (pressed) {
+                        instrumentCluster.navigationProgressPercents = value
+                    }
+                }
+
+            }
+
+            // Route distance
+            Label {
+                text: qsTr("Route \n distance, km")
+            }
+            Slider {
+                id: routeDistance
+                value: instrumentCluster.navigationRouteDistanceKm
+                from: 0
+                stepSize: 0.5
+                to: 25000
+                onValueChanged: {
+                    if (pressed) {
+                        instrumentCluster.navigationRouteDistanceKm = value
+                    }
+                }
+            }
+        }//grid
+
         RowLayout {
-            spacing: sc(10)
+            enabled: instrumentCluster.isConnected
             Layout.alignment: Qt.AlignHCenter
+            // driveTrainState field
+            Label {
+                text: qsTr("Gear:")
+            }
+
+            ComboBox {
+                id: driveTrainStateComboBox
+                model: [qsTr("P"), qsTr("N"), qsTr("D"), qsTr("R")]
+                currentIndex: instrumentCluster.driveTrainState
+                onActivated: instrumentCluster.driveTrainState = currentIndex
+            }
+        }
+
+        GridLayout {
+            Layout.alignment: Qt.AlignHCenter
+            columns: root.width < neptuneScale(100) ? 2 : 4
+            enabled: false
+
+            // speedLimit Field
+            Dial {
+                id: speedLimitDial
+                from: 0
+                to: 260
+                stepSize: 1.0
+                value: instrumentCluster.speedLimit
+
+
+                Label {
+                    text: qsTr("Speed limit:")
+                    anchors.bottom: speedLimitDial.verticalCenter
+                    anchors.horizontalCenter: speedLimitDial.horizontalCenter
+                }
+
+                Label {
+                    id: speedLimitLabel
+                    text: Math.round(speedLimitDial.value)
+                    anchors.top: speedLimitDial.verticalCenter
+                    anchors.horizontalCenter: speedLimitDial.horizontalCenter
+                }
+            }
+
+            // speedCruise Field
+            Dial {
+                id: speedCruiseDial
+                from: 0
+                to: 260
+                stepSize: 1.0
+                value: instrumentCluster.speedCruise
+
+                Label {
+                    text: qsTr("Cruise speed:")
+                    anchors.bottom: speedCruiseDial.verticalCenter
+                    anchors.horizontalCenter: speedCruiseDial.horizontalCenter
+                }
+
+                Label {
+                    id: speedCruiseLabel
+                    text: Math.round(speedCruiseDial.value)
+                    anchors.top: speedCruiseDial.verticalCenter
+                    anchors.horizontalCenter: speedCruiseDial.horizontalCenter
+                }
+            }
 
             // speed Field
             Dial {
@@ -58,7 +235,6 @@ Flickable {
                 to: 260
                 stepSize: 1.0
                 value: instrumentCluster.speed
-                onMoved: instrumentCluster.speed = value
 
                 Label {
                     text: qsTr("Speed:")
@@ -81,8 +257,6 @@ Flickable {
                 to: 100
                 stepSize: 1.0
                 value: instrumentCluster.ePower
-                onMoved: instrumentCluster.ePower = value
-                enabled: false
 
                 Label {
                     text: qsTr("ePower:")
@@ -99,121 +273,11 @@ Flickable {
             }
         }
 
-        GridLayout {
+        RowLayout {
+            enabled: instrumentCluster.isConnected
             Layout.alignment: Qt.AlignHCenter
-            columns: root.width < sc(100) ? 2 : 4
-
-            // speedLimit Field
-            Label {
-                text: qsTr("Speed limit:")
-            }
-            Slider {
-                id: speedLimitSlider
-                value: instrumentCluster.speedLimit
-                from: 0.0
-                stepSize: 1.0
-                to: 120.0
-                onValueChanged: if (pressed) { instrumentCluster.speedLimit = value }
-            }
-
-            // speedCruise Field
-            Label {
-                text: qsTr("Cruise speed:")
-            }
-            Slider {
-                id: speedCruiseSlider
-                value: instrumentCluster.speedCruise
-                from: 0.0
-                stepSize: 1.0
-                to: 120.0
-                onValueChanged: if (pressed) { instrumentCluster.speedCruise = value }
-            }
-
-            // driveTrainState field
-            Label {
-                text: qsTr("Gear:")
-            }
-
-            ComboBox {
-                id: driveTrainStateComboBox
-                model: [qsTr("P"), qsTr("N"), qsTr("D"), qsTr("R")]
-                currentIndex: instrumentCluster.driveTrainState
-                onActivated: instrumentCluster.driveTrainState = currentIndex
-            }
-            Label {
-                text: qsTr("Navigation Mode:")
-            }
-            CheckBox {
-                checked: uiSettings.navigationMode
-                onClicked: uiSettings.navigationMode = checked
-            }
-
-            Label {
-                text: qsTr("Hide Gauges:")
-            }
-            CheckBox {
-                checked: uiSettings.hideGauges
-                onClicked: uiSettings.hideGauges = checked
-            }
-
-            Label {
-                text: qsTr("3D Gauges:")
-            }
-            CheckBox {
-                checked: uiSettings.threeDGauges
-                onClicked: uiSettings.threeDGauges = checked
-            }
-
-            /*!
-                Outside Temperature
-            */
-            Label {
-                text: qsTr("Outside temperature: " +  outsideTemperature.value.toFixed(1).padStart(6) + " °C")
-            }
-            Slider {
-                id: outsideTemperature
-                value: instrumentCluster.outsideTemperatureCelsius
-                from: -100
-                stepSize: 0.5
-                to: 100.0
-                onValueChanged: if (pressed) { instrumentCluster.outsideTemperatureCelsius = value }
-            }
-
-            /*!
-                Mileage in km
-            */
-            Label {
-                text: qsTr("Mileage km")
-            }
-            Slider {
-                id: mileageKm
-                value: instrumentCluster.mileageKm
-                from: 0
-                stepSize: 0.5
-                to: 9E6
-                onValueChanged: if (pressed) { instrumentCluster.mileageKm = value }
-            }
-
-            /*!
-                DrivingMode field
-            */
-            Label {
-                text: qsTr("Driving mode:")
-            }
-
-            ComboBox {
-                id: driveingModeComboBox
-                model: [qsTr("Normal"), qsTr("ECO"), qsTr("Sport")]
-                currentIndex: instrumentCluster.drivingMode
-                onActivated: instrumentCluster.drivingMode = currentIndex
-            }
 
-            /*!
-                Driving mode range Field
-            */
-            Label {
-                text: qsTr("Driving mode range:")
-            }
+            //Driving mode range Field
             Dial {
                 id: drivingModeRangeDial
                 from: 0
@@ -222,7 +286,11 @@ Flickable {
                 value: instrumentCluster.drivingModeRangeKm
                 onMoved: instrumentCluster.drivingModeRangeKm = value
 
-
+                Label {
+                    text: qsTr("Range:")
+                    anchors.bottom: parent.verticalCenter
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
 
                 Label {
                     text: Math.round(parent.value)
@@ -231,12 +299,7 @@ Flickable {
                 }
             }
 
-            /*!
-                ECO mode range Field
-            */
-            Label {
-                text: qsTr("ECO mode range:")
-            }
+            // ECO mode range Field
             Dial {
                 id: ecoModeRangeDial
                 from: 0
@@ -245,58 +308,31 @@ Flickable {
                 value: instrumentCluster.drivingModeECORangeKm
                 onMoved: instrumentCluster.drivingModeECORangeKm = value
 
-
-
                 Label {
-                    text: Math.round(parent.value)
-                    anchors.top: parent.verticalCenter
+                    text: qsTr("ECO Range:")
+                    anchors.bottom: parent.verticalCenter
                     anchors.horizontalCenter: parent.horizontalCenter
                 }
-            }
-
-            /*!
-               Route progress
-            */
-            Label {
-                text: qsTr("Route progress, %:")
-            }
-
-            Dial {
-                id: routeProgressDial
-                from: 0
-                to: 1.0
-                stepSize: 0.01
-                value: instrumentCluster.navigationProgressPercents
-                onMoved: instrumentCluster.navigationProgressPercents = value
-
 
 
                 Label {
-                    text: Math.round(parent.value * 100.0)
+                    text: Math.round(parent.value)
                     anchors.top: parent.verticalCenter
                     anchors.horizontalCenter: parent.horizontalCenter
                 }
             }
+        }
 
-            /*!
-                Route distance
-            */
-            Label {
-                text: qsTr("Route distance, km")
-            }
-            Slider {
-                id: routeDistance
-                value: instrumentCluster.navigationRouteDistanceKm
-                from: 0
-                stepSize: 0.5
-                to: 25000
-                onValueChanged: if (pressed) { instrumentCluster.navigationRouteDistanceKm = value }
-            }
+        Label {
+            text: "Telltales"
+            Layout.alignment: Qt.AlignHCenter
+            font.bold: true
         }
 
         GridLayout {
+            enabled: instrumentCluster.isConnected
             Layout.alignment: Qt.AlignHCenter
-            columns: root.width < sc(100) ? 2 : 4
+            columns: root.width < neptuneScale(100) ? 2 : 4
 
             // lowBeamHeadlight Field
             Label {
@@ -418,5 +454,30 @@ Flickable {
                 onClicked: instrumentCluster.airbagFailure = checked
             }
         }
+
+        ColumnLayout {
+            Layout.alignment: Qt.AlignHCenter
+
+            Label {
+                text: qsTr("Application Info")
+                Layout.alignment: Qt.AlignHCenter
+                font.bold: true
+            }
+
+            Label {
+                text: qsTr("Neptune Companion App Version: ") + Qt.application.version
+                Layout.alignment: Qt.AlignHCenter
+            }
+
+            Label {
+                text: qsTr("Neptune Revision: ") + neptuneInfo
+                Layout.alignment: Qt.AlignHCenter
+            }
+
+            Label {
+                text: qsTr("Qt IVI Version: ") + qtiviVersion
+                Layout.alignment: Qt.AlignHCenter
+            }
+        }
     }
 }
diff --git a/src/remotesettings/app/MediaPage.qml b/src/remotesettings/app/MediaPage.qml
new file mode 100644
index 00000000..ea503425
--- /dev/null
+++ b/src/remotesettings/app/MediaPage.qml
@@ -0,0 +1,95 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 Luxoft Sweden AB
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Neptune 3 IVI UI.
+**
+** $QT_BEGIN_LICENSE:GPL-QTAS$
+** Commercial License Usage
+** Licensees holding valid commercial Qt Automotive Suite licenses may use
+** this file in accordance with the commercial license agreement provided
+** with the Software or, alternatively, in accordance with the terms
+** contained in a written agreement between you and The Qt Company.  For
+** licensing terms and conditions see https://www.qt.io/terms-conditions.
+** For further information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+** SPDX-License-Identifier: GPL-3.0
+**
+****************************************************************************/
+import QtQuick 2.8
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.3
+
+
+Flickable {
+    id: root
+    flickableDirection: Flickable.VerticalFlick
+    contentHeight: baseLayout.height
+
+    ScrollIndicator.vertical: ScrollIndicator { }
+
+    ColumnLayout {
+        anchors.horizontalCenter: parent.horizontalCenter
+        Label {
+            text: qsTr("Music controls:")
+            Layout.alignment: Qt.AlignHCenter
+            font.bold: true
+        }
+
+        GridLayout {
+            id: baseLayout
+            enabled: uiSettings.isInitialized && client.connected
+            columns: 2
+
+            // Volume Field
+            Label {
+                text: qsTr("Volume:")
+            }
+            Slider {
+                id: volumeSlider
+                value: uiSettings.volume
+                from: 0.0
+                to: 1.0
+                onMoved: uiSettings.volume = value
+            }
+
+            // Balance Field
+            Label {
+                text: qsTr("Balance:")
+            }
+            Slider {
+                id: balanceSlider
+                value: uiSettings.balance
+                from: 1.0
+                to: -1.0
+                onValueChanged: {
+                    if (pressed) {
+                        uiSettings.balance = value
+                    }
+                }
+            }
+
+            // Mute Field
+            Label {
+                text: qsTr("Mute:")
+            }
+            CheckBox {
+                id: muteCheckbox
+                checked: uiSettings.muted
+                onClicked: uiSettings.muted = checked
+            }
+        }
+    }
+}
diff --git a/src/remotesettings/app/SystemUIPage.qml b/src/remotesettings/app/NaviPage.qml
index 6353caff..c9969db5 100644
--- a/src/remotesettings/app/SystemUIPage.qml
+++ b/src/remotesettings/app/NaviPage.qml
@@ -1,7 +1,6 @@
 /****************************************************************************
 **
 ** Copyright (C) 2019 Luxoft Sweden AB
-** Copyright (C) 2018 Pelagicore AG
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the Neptune 3 IVI UI.
@@ -33,6 +32,7 @@ import QtQuick 2.8
 import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.3
 
+
 Flickable {
     id: root
     flickableDirection: Flickable.VerticalFlick
@@ -42,16 +42,23 @@ Flickable {
 
     ColumnLayout {
         id: baseLayout
-        enabled: systemUI.isInitialized && client.connected
+        enabled: instrumentCluster.isConnected
+        spacing: 20
         anchors.centerIn: parent
 
-        Button {
-            text: qsTr("Show Next Application IC Window");
-            onClicked: {
-                // This is a hack. See the documentation of this property for details
-                systemUI.applicationICWindowSwitchCount = systemUI.applicationICWindowSwitchCount + 1
-            }
+        Label {
+            text: qsTr("Route info:")
+            Layout.alignment: Qt.AlignHCenter
+            font.bold: true
+        }
+
+        Label {
+            text: qsTr("Route progress: ")
+                  + Math.round(instrumentCluster.navigationProgressPercents * 100.0) + " %"
+        }
+
+        Label {
+            text: qsTr("Route distance: ") + instrumentCluster.navigationRouteDistanceKm + " km"
         }
     }
 }
-
diff --git a/src/remotesettings/app/SettingsPage.qml b/src/remotesettings/app/SettingsPage.qml
index 17c82c97..118b8742 100644
--- a/src/remotesettings/app/SettingsPage.qml
+++ b/src/remotesettings/app/SettingsPage.qml
@@ -41,105 +41,69 @@ Flickable {
 
     ScrollIndicator.vertical: ScrollIndicator { }
 
-    GridLayout {
+    ColumnLayout {
         id: baseLayout
-        columns: 2
         enabled: uiSettings.isInitialized && client.connected
-        anchors.centerIn: parent
+        spacing: 20
+        anchors.horizontalCenter: parent.horizontalCenter
 
-        // Language Field
         Label {
-            text: qsTr("Language:")
-        }
-        ComboBox {
-            id: languageComboBox
-            model: uiSettings.languages
-            currentIndex: uiSettings.languages.indexOf(uiSettings.language)
-            onActivated: uiSettings.language = currentText
+            text: qsTr("UI Settings:")
+            Layout.alignment: Qt.AlignHCenter
+            font.bold: true
         }
 
-        // 24h format Field
-        Label {
-            text: qsTr("24h time format:")
-        }
-        CheckBox {
-            checked: uiSettings.twentyFourHourTimeFormat
-            onToggled: uiSettings.twentyFourHourTimeFormat = checked
-        }
+        GridLayout {
+            columns: 2
 
-        // right hand drive mode
-        Label {
-            text: qsTr("Right-to-left mode:")
-        }
-        CheckBox {
-            checked: uiSettings.rtlMode
-            onToggled: uiSettings.rtlMode = checked
-        }
-
-        // Volume Field
-        Label {
-            text: qsTr("Volume:")
-        }
-        Slider {
-            id: volumeSlider
-            value: uiSettings.volume
-            from: 0.0
-            to: 1.0
-            onMoved: uiSettings.volume = value
-        }
-
-        // Balance Field
-        Label {
-            text: qsTr("Balance:")
-        }
-        Slider {
-            id: balanceSlider
-            value: uiSettings.balance
-            from: 1.0
-            to: -1.0
-            onValueChanged: if (pressed) { uiSettings.balance = value }
-        }
+            // Language Field
+            Label {
+                text: qsTr("Language:")
+            }
+            ComboBox {
+                id: languageComboBox
+                model: uiSettings.languages
+                currentIndex: uiSettings.languages.indexOf(uiSettings.language)
+                onActivated: uiSettings.language = currentText
+            }
 
-        // Mute Field
-        Label {
-            text: qsTr("Mute:")
-        }
-        CheckBox {
-            id: muteCheckbox
-            checked: uiSettings.muted
-            onClicked: uiSettings.muted = checked
-        }
+            // 24h format Field
+            Label {
+                text: qsTr("24h time format:")
+            }
+            CheckBox {
+                checked: uiSettings.twentyFourHourTimeFormat
+                onToggled: uiSettings.twentyFourHourTimeFormat = checked
+            }
 
-        // Theme Field
-        Label {
-            text: qsTr("Theme:")
-        }
+            // right hand drive mode
+            Label {
+                text: qsTr("Right-to-left mode:")
+            }
+            CheckBox {
+                checked: uiSettings.rtlMode
+                onToggled: uiSettings.rtlMode = checked
+            }
 
-        ComboBox {
-            id: themeComboBox
-            model: [qsTr("Light"), qsTr("Dark")]
-            currentIndex: uiSettings.theme
-            onActivated: uiSettings.theme = currentIndex
-        }
+            // Theme Field
+            Label {
+                text: qsTr("Theme:")
+            }
 
-        // Door 1 Field
-        Label {
-            text: qsTr("Door 1:")
-        }
-        CheckBox {
-            id: door1OpenCheckbox
-            checked: uiSettings.door1Open
-            onClicked: uiSettings.door1Open = checked
-        }
+            ComboBox {
+                id: themeComboBox
+                model: [qsTr("Light"), qsTr("Dark")]
+                currentIndex: uiSettings.theme
+                onActivated: uiSettings.theme = currentIndex
+            }
 
-        // Door 2 Field
-        Label {
-            text: qsTr("Door 2:")
-        }
-        CheckBox {
-            id: door2OpenCheckbox
-            checked: uiSettings.door2Open
-            onClicked: uiSettings.door2Open = checked
+            Label {
+                text: qsTr("3D Gauges:")
+            }
+            CheckBox {
+                checked: uiSettings.threeDGauges
+                onClicked: uiSettings.threeDGauges = checked
+            }
         }
     }
 }
diff --git a/src/remotesettings/app/Vehicle2DPanel.qml b/src/remotesettings/app/Vehicle2DPanel.qml
new file mode 100644
index 00000000..4ffa49d4
--- /dev/null
+++ b/src/remotesettings/app/Vehicle2DPanel.qml
@@ -0,0 +1,270 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 Luxoft Sweden AB
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Neptune 3 IVI UI.
+**
+** $QT_BEGIN_LICENSE:GPL-QTAS$
+** Commercial License Usage
+** Licensees holding valid commercial Qt Automotive Suite licenses may use
+** this file in accordance with the commercial license agreement provided
+** with the Software or, alternatively, in accordance with the terms
+** contained in a written agreement between you and The Qt Company.  For
+** licensing terms and conditions see https://www.qt.io/terms-conditions.
+** For further information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+** SPDX-License-Identifier: GPL-3.0
+**
+****************************************************************************/
+
+import QtQuick 2.9
+import QtGraphicalEffects 1.12
+
+
+Item {
+    id: root
+
+    property bool trunkOpen: false
+    property bool leftDoorOpen: false
+    property bool rightDoorOpen: false
+    property bool roofOpen: false
+
+    property var d: QtObject {
+        property real scaleFactor: root.height / base.sourceSize.height
+    }
+
+    SequentialAnimation {
+        running: trunkOpened || leftDoorOpened || roofOpen || rightDoorOpened
+        loops: Animation.Infinite
+
+        PropertyAnimation {
+            targets: [sunroofAlarm, trunkAlarm, leftDooralarm, rightDooralarm]
+            properties: "opacity"
+            from: 0.0
+            to: 1.0
+            duration: 1000
+        }
+
+        PropertyAnimation {
+            targets: [sunroofAlarm, trunkAlarm, leftDooralarm, rightDooralarm]
+            properties: "opacity"
+            from: 1.0
+            to: 0.0
+            duration: 1000
+        }
+    }
+
+    Image {
+        source: "qrc:/assets/ic_background.png"
+        fillMode: Image.PreserveAspectCrop
+        anchors.centerIn: parent
+        scale: d.scaleFactor
+
+        Rectangle {
+            anchors.top: parent.top
+            anchors.topMargin: -300
+            anchors.left: parent.left
+            anchors.leftMargin: 670
+            width: 400
+            height: 500
+            color: "transparent"
+
+            RadialGradient {
+                anchors.fill: parent
+                horizontalRadius: parent.width * .8
+                verticalRadius: parent.height * .8
+                angle: -20
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: "white" }
+                    GradientStop { position: 0.6; color: "transparent" }
+                }
+            }
+        }
+
+        Rectangle {
+            anchors.top: parent.top
+            anchors.topMargin: -300
+            anchors.left: parent.left
+            anchors.leftMargin: 850
+            width: 400
+            height: 500
+            color: "transparent"
+
+            RadialGradient {
+                anchors.fill: parent
+                horizontalRadius: parent.width * .8
+                verticalRadius: parent.height * .8
+                angle: 20
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: "white" }
+                    GradientStop { position: 0.6; color: "transparent" }
+                }
+            }
+        }
+    }
+
+    Image {
+        id: base
+
+        source: "qrc:/assets/ic_bodyVehicle.png"
+        fillMode: Image.PreserveAspectCrop
+        anchors.centerIn: parent
+        scale: d.scaleFactor
+    }
+
+    Image {
+        id: sunroof
+
+        source: "qrc:/assets/ic_roofClosedVehicle.png"
+        fillMode: Image.PreserveAspectCrop
+        anchors.centerIn: parent
+        scale: d.scaleFactor
+        visible: sunroofOpened.opacity !== 1.0
+    }
+
+    Image {
+        id: sunroofOpened
+
+        source: "qrc:/assets/ic_roofOpenedVehicle.png"
+        opacity: root.roofOpen ? 1.0 : 0.0
+        Behavior on opacity { DefaultNumberAnimation {} }
+        fillMode: Image.PreserveAspectCrop
+        anchors.centerIn: parent
+        scale: d.scaleFactor
+    }
+
+    Image {
+        id: sunroofAlarm
+
+        source: "qrc:/assets/ic_roofAlarmVehicle.png"
+        visible: roofOpen
+        fillMode: Image.PreserveAspectCrop
+        anchors.centerIn: parent
+        scale: d.scaleFactor
+    }
+
+    Image {
+        id: leftDoor
+
+        source: "qrc:/assets/ic_leftDoorClosedVehicle.png"
+        visible: root.leftDoorOpen ? 0.0 : 1.0
+        fillMode: Image.PreserveAspectCrop
+        anchors.centerIn: parent
+        scale: d.scaleFactor
+    }
+
+    Image {
+        id: leftDoorOpenedCarPart
+
+        source: "qrc:/assets/ic_leftDoorOpenedVehicleCarPart.png"
+        visible: root.leftDoorOpen ? 1.0 : 0.0
+        fillMode: Image.PreserveAspectCrop
+        anchors.centerIn: parent
+        scale: d.scaleFactor
+    }
+
+    Image {
+        id: leftDoorOpened
+
+        source: "qrc:/assets/ic_leftDoorOpenedVehicle.png"
+        opacity: root.leftDoorOpen ? 1.0 : 0.0
+        Behavior on opacity { DefaultNumberAnimation {} }
+        fillMode: Image.PreserveAspectCrop
+        anchors.centerIn: parent
+        scale: d.scaleFactor
+    }
+
+    Image {
+        id: leftDooralarm
+
+        source: "qrc:/assets/ic_leftDoorAlarmVehicle.png"
+        visible: leftDoorOpen
+        fillMode: Image.PreserveAspectCrop
+        anchors.centerIn: parent
+        scale: d.scaleFactor
+    }
+
+    Image {
+        id: rightDoor
+
+        source: "qrc:/assets/ic_rightDoorClosedVehicle.png"
+        visible: root.rightDoorOpen ? 0.0 : 1.0
+        fillMode: Image.PreserveAspectCrop
+        anchors.centerIn: parent
+        scale: d.scaleFactor
+    }
+
+    Image {
+        id: rightDoorOpenedCarPart
+
+        source: "qrc:/assets/ic_rightDoorOpenedVehicleCarPart.png"
+        visible: root.rightDoorOpen ? 1.0 : 0.0
+        fillMode: Image.PreserveAspectCrop
+        anchors.centerIn: parent
+        scale: d.scaleFactor
+    }
+
+    Image {
+        id: rightDoorOpened
+
+        source: "qrc:/assets/ic_rightDoorOpenedVehicle.png"
+        opacity: root.rightDoorOpen ? 1.0 : 0.0
+        Behavior on opacity { DefaultNumberAnimation {} }
+        fillMode: Image.PreserveAspectCrop
+        anchors.centerIn: parent
+        scale: d.scaleFactor
+    }
+
+    Image {
+        id: rightDooralarm
+
+        source: "qrc:/assets/ic_rightDoorAlarmVehicle.png"
+        visible: rightDoorOpen
+        fillMode: Image.PreserveAspectCrop
+        anchors.centerIn: parent
+        scale: d.scaleFactor
+    }
+
+    Image {
+        id: trunk
+
+        source: "qrc:/assets/ic_trunkClosedVehicle.png"
+        visible: trunkOpened.opacity !== 1.0
+        fillMode: Image.PreserveAspectCrop
+        anchors.centerIn: parent
+        scale: d.scaleFactor
+    }
+
+    Image {
+        id: trunkOpened
+
+        source: "qrc:/assets/ic_trunkOpenedVehicle.png"
+        opacity: root.trunkOpen ? 1.0 : 0.0
+        Behavior on opacity { DefaultNumberAnimation {} }
+        fillMode: Image.PreserveAspectCrop
+        anchors.centerIn: parent
+        scale: d.scaleFactor
+    }
+
+    Image {
+        id: trunkAlarm
+
+        source: "qrc:/assets/ic_trunkAlarmVehicle.png"
+        visible: trunkOpen
+        fillMode: Image.PreserveAspectCrop
+        anchors.centerIn: parent
+        scale: d.scaleFactor
+    }
+}
diff --git a/src/remotesettings/app/VehiclePage.qml b/src/remotesettings/app/VehiclePage.qml
new file mode 100644
index 00000000..cce6267b
--- /dev/null
+++ b/src/remotesettings/app/VehiclePage.qml
@@ -0,0 +1,212 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 Luxoft Sweden AB
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Neptune 3 IVI UI.
+**
+** $QT_BEGIN_LICENSE:GPL-QTAS$
+** Commercial License Usage
+** Licensees holding valid commercial Qt Automotive Suite licenses may use
+** this file in accordance with the commercial license agreement provided
+** with the Software or, alternatively, in accordance with the terms
+** contained in a written agreement between you and The Qt Company.  For
+** licensing terms and conditions see https://www.qt.io/terms-conditions.
+** For further information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+** SPDX-License-Identifier: GPL-3.0
+**
+****************************************************************************/
+import QtQuick 2.8
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.3
+
+Flickable {
+    id: root
+
+    flickableDirection: Flickable.VerticalFlick
+    contentHeight: baseLayout.height
+
+    ScrollIndicator.vertical: ScrollIndicator { }
+
+    ColumnLayout {
+        id: baseLayout
+
+        anchors.centerIn: parent
+
+        Vehicle2DPanel {
+            height: root.height / 3
+            width: 300
+            leftDoorOpen: uiSettings.door1Open
+            rightDoorOpen: uiSettings.door2Open
+            trunkOpen: uiSettings.trunkOpen
+            roofOpen: uiSettings.roofOpenProgress > 0.5
+            Layout.preferredHeight: root.height / 3
+            Layout.preferredWidth: neptuneScale(90)
+
+            Item {
+                width: parent.width / 2
+                height: parent.height / 3
+                ColumnLayout {
+                    anchors.fill: parent
+
+                    Label {
+                        text: instrumentCluster.isConnected ? instrumentCluster.speed : "--"
+                        font.pixelSize: root.height / 15
+                        Layout.alignment: Qt.AlignHCenter
+                        color: "white"
+                        style: Text.Outline
+                        styleColor: Qt.darker("white")
+                    }
+
+                    Label {
+                        text: qsTr("km/h")
+                        Layout.alignment: Qt.AlignHCenter
+                        color: "white"
+                        style: Text.Outline
+                        styleColor: Qt.darker("white")
+                    }
+                }
+            }
+
+            Item {
+                x: width
+                width: parent.width / 2
+                height: parent.height / 3
+                ColumnLayout {
+                    anchors.fill: parent
+
+                    Label {
+                        text: instrumentCluster.isConnected ? instrumentCluster.ePower : "--"
+                        font.pixelSize: root.height / 15
+                        Layout.alignment: Qt.AlignHCenter
+                        color: "white"
+                        style: Text.Outline
+                        styleColor: Qt.darker("white")
+                    }
+
+                    Label {
+                        text: qsTr("% power")
+                        Layout.alignment: Qt.AlignHCenter
+                        color: "white"
+                        style: Text.Outline
+                        styleColor: Qt.darker("white")
+                    }
+                }
+            }
+        }
+
+        ColumnLayout {
+            enabled: instrumentCluster.isConnected
+            Layout.alignment: Qt.AlignHCenter
+
+            Label {
+                text: qsTr("Climate:")
+                Layout.alignment: Qt.AlignHCenter
+                font.bold: true
+            }
+
+            Label {
+                text: instrumentCluster.outsideTemperatureCelsius + " °C" +
+                      qsTr(" outside")
+            }
+
+            Label {
+                text: qsTr("Status:")
+                Layout.alignment: Qt.AlignHCenter
+                font.bold: true
+            }
+
+            Label {
+                text: qsTr("Gear: ") + gears[instrumentCluster.driveTrainState]
+                readonly property var gears: [qsTr("P"), qsTr("N"), qsTr("D"), qsTr("R")]
+            }
+
+            Label {
+                text: qsTr("Range: ") + instrumentCluster.drivingModeRangeKm + " km"
+            }
+
+            Label {
+                text: qsTr("ECO Range: ") + instrumentCluster.drivingModeECORangeKm + " km"
+            }
+
+            Label {
+                text: qsTr("Mileage: ") + Math.round(instrumentCluster.mileageKm, -2) + " km"
+            }
+
+            RowLayout {
+                // DrivingMode field
+                Label {
+                    text: qsTr("Driving mode:")
+                }
+
+                ComboBox {
+                    id: driveingModeComboBox
+                    model: [qsTr("Normal"), qsTr("ECO"), qsTr("Sport")]
+                    currentIndex: instrumentCluster.drivingMode
+                    onActivated: instrumentCluster.drivingMode = currentIndex
+                }
+            }
+        }
+
+        Label {
+            text: qsTr("Doors & Locks:")
+            Layout.alignment: Qt.AlignHCenter
+            font.bold: true
+        }
+
+        GridLayout {
+            columns: 4
+            enabled: systemUI.isInitialized && client.connected
+            Layout.alignment: Qt.AlignHCenter
+
+            // Door 1 Field
+            Label {
+                text: qsTr("Left Door:")
+            }
+            CheckBox {
+                id: door1OpenCheckbox
+                checked: uiSettings.door1Open
+                onClicked: uiSettings.door1Open = checked
+            }
+
+            // Door 2 Field
+            Label {
+                text: qsTr("Right Door:")
+            }
+            CheckBox {
+                id: door2OpenCheckbox
+                checked: uiSettings.door2Open
+                onClicked: uiSettings.door2Open = checked
+            }
+
+            Label {
+                text: qsTr("Trunk:")
+            }
+            CheckBox {
+                checked: uiSettings.trunkOpen
+                onClicked: uiSettings.trunkOpen = checked
+            }
+
+            // Door 2 Field
+            Label {
+                text: qsTr("Roof:")
+            }
+            CheckBox {
+                checked: uiSettings.roofOpenProgress > 0.5
+                onClicked: uiSettings.roofOpenProgress = checked ? 1.0 : 0.0
+            }
+        }
+    }
+}
diff --git a/src/remotesettings/app/app.pro b/src/remotesettings/app/app.pro
index 9639c5c6..0c9083f4 100644
--- a/src/remotesettings/app/app.pro
+++ b/src/remotesettings/app/app.pro
@@ -1,3 +1,4 @@
+VERSION  = 5.13.0
 TARGET = neptune-companion-app
 DESTDIR = $$BUILD_DIR
 QT += quick ivicore
@@ -6,6 +7,18 @@ CONFIG -= app_bundle
 
 include($$SOURCE_DIR/config.pri)
 
+unix:exists($$SOURCE_DIR/.git):GIT_REVISION=$$system(cd "$$SOURCE_DIR" && git describe --tags --always 2>/dev/null)
+
+isEmpty(GIT_REVISION) {
+    GIT_REVISION="unknown revision"
+    GIT_COMMITTER_DATE="no date"
+} else {
+    GIT_COMMITTER_DATE=$$system(cd "$$SOURCE_DIR" && git show "$$GIT_REVISION" --pretty=format:"%ci" --no-patch 2>/dev/null)
+}
+
+DEFINES *= "NEPTUNE_COMPANION_APP_VERSION=$$VERSION"
+DEFINES *= NEPTUNE_INFO=\""\\\"$$GIT_REVISION, $$GIT_COMMITTER_DATE\\\""\"
+
 LIBS += -L$$LIB_DESTDIR -l$$qtLibraryTarget(remotesettings)
 
 INCLUDEPATH += $$OUT_PWD/../frontend
diff --git a/src/remotesettings/app/assets/development.png b/src/remotesettings/app/assets/development.png
new file mode 100644
index 00000000..313be35d
--- /dev/null
+++ b/src/remotesettings/app/assets/development.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0d2cb681563bca1baed619a0e070cfbf181e7a9baa0207b7dc47d24fd548bbce
+size 960
diff --git a/src/remotesettings/app/assets/ic_background.png b/src/remotesettings/app/assets/ic_background.png
new file mode 100644
index 00000000..b3c2228f
--- /dev/null
+++ b/src/remotesettings/app/assets/ic_background.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1abd5aa7ff61962c25ed7abd8fdf006513527d3e5688109c801f6e33e220b983
+size 2006118
diff --git a/src/remotesettings/app/assets/ic_bodyVehicle.png b/src/remotesettings/app/assets/ic_bodyVehicle.png
new file mode 100644
index 00000000..e073a734
--- /dev/null
+++ b/src/remotesettings/app/assets/ic_bodyVehicle.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1a7bae1ace4bb0aadb90c5f49cdc4adbbbd84eaccdc65c808a1225c86bb45635
+size 512144
diff --git a/src/remotesettings/app/assets/ic_leftDoorAlarmVehicle.png b/src/remotesettings/app/assets/ic_leftDoorAlarmVehicle.png
new file mode 100644
index 00000000..f842d030
--- /dev/null
+++ b/src/remotesettings/app/assets/ic_leftDoorAlarmVehicle.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8a2a2d379b2c4b9b1f7d7a86a439d1903d6b34f98e0c3b67aa77b54a3d05ba80
+size 21785
diff --git a/src/remotesettings/app/assets/ic_leftDoorClosedVehicle.png b/src/remotesettings/app/assets/ic_leftDoorClosedVehicle.png
new file mode 100644
index 00000000..9ee2ee68
--- /dev/null
+++ b/src/remotesettings/app/assets/ic_leftDoorClosedVehicle.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d3503b3e5e819e81acbd911dcd2fc52a8c0e4ca1e630cfc53f1ab4aa314f5fb6
+size 17413
diff --git a/src/remotesettings/app/assets/ic_leftDoorOpenedVehicle.png b/src/remotesettings/app/assets/ic_leftDoorOpenedVehicle.png
new file mode 100644
index 00000000..38dbd90e
--- /dev/null
+++ b/src/remotesettings/app/assets/ic_leftDoorOpenedVehicle.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b9c6465128a67ad4b3d5f824360ade07f2b2e2435ee29656d8d711bfec5db4e6
+size 28896
diff --git a/src/remotesettings/app/assets/ic_leftDoorOpenedVehicleCarPart.png b/src/remotesettings/app/assets/ic_leftDoorOpenedVehicleCarPart.png
new file mode 100644
index 00000000..78d39e32
--- /dev/null
+++ b/src/remotesettings/app/assets/ic_leftDoorOpenedVehicleCarPart.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3d644a0d270aeb8b714ec4817e0c548d5dd135d65d5ddffc65677821429fbc3e
+size 16172
diff --git a/src/remotesettings/app/assets/ic_rightDoorAlarmVehicle.png b/src/remotesettings/app/assets/ic_rightDoorAlarmVehicle.png
new file mode 100644
index 00000000..cf7f3df6
--- /dev/null
+++ b/src/remotesettings/app/assets/ic_rightDoorAlarmVehicle.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e904cc9f549160e0b1e0776b3dfca656747b2f79f50d10c80881b2be475b8641
+size 22053
diff --git a/src/remotesettings/app/assets/ic_rightDoorClosedVehicle.png b/src/remotesettings/app/assets/ic_rightDoorClosedVehicle.png
new file mode 100644
index 00000000..395edf52
--- /dev/null
+++ b/src/remotesettings/app/assets/ic_rightDoorClosedVehicle.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d7f0e0601161026dc854e87468e2e1d8df59352e559c7bc3022de7d7aa7cb80f
+size 17402
diff --git a/src/remotesettings/app/assets/ic_rightDoorOpenedVehicle.png b/src/remotesettings/app/assets/ic_rightDoorOpenedVehicle.png
new file mode 100644
index 00000000..61ab3378
--- /dev/null
+++ b/src/remotesettings/app/assets/ic_rightDoorOpenedVehicle.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:68e5a6494e414814a6df5ff4b7e12b66e111ebc50f76730637928a253e3badca
+size 21292
diff --git a/src/remotesettings/app/assets/ic_rightDoorOpenedVehicleCarPart.png b/src/remotesettings/app/assets/ic_rightDoorOpenedVehicleCarPart.png
new file mode 100644
index 00000000..057baa0c
--- /dev/null
+++ b/src/remotesettings/app/assets/ic_rightDoorOpenedVehicleCarPart.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4fef57fff1b565394e62f4cc2a546226823289c70ec7b25bb403d271b3b77513
+size 15670
diff --git a/src/remotesettings/app/assets/ic_roofAlarmVehicle.png b/src/remotesettings/app/assets/ic_roofAlarmVehicle.png
new file mode 100644
index 00000000..c64a9897
--- /dev/null
+++ b/src/remotesettings/app/assets/ic_roofAlarmVehicle.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b50192635b09c8a1f7e45436f0c7003e969a76bf9cda8a58e3d57822cb5da1ec
+size 13721
diff --git a/src/remotesettings/app/assets/ic_roofClosedVehicle.png b/src/remotesettings/app/assets/ic_roofClosedVehicle.png
new file mode 100644
index 00000000..58f9ba0d
--- /dev/null
+++ b/src/remotesettings/app/assets/ic_roofClosedVehicle.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7337bc5e8f9be8b0ce310a08d814c4c858f781f4f566f8d91bd312798d9f0527
+size 6878
diff --git a/src/remotesettings/app/assets/ic_roofOpenedVehicle.png b/src/remotesettings/app/assets/ic_roofOpenedVehicle.png
new file mode 100644
index 00000000..90cdef53
--- /dev/null
+++ b/src/remotesettings/app/assets/ic_roofOpenedVehicle.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:396d051cc3b93ac735b74d3809e1844dca2464e226e355fe4d4e4667d9de2295
+size 11458
diff --git a/src/remotesettings/app/assets/ic_trunkAlarmVehicle.png b/src/remotesettings/app/assets/ic_trunkAlarmVehicle.png
new file mode 100644
index 00000000..742c14e1
--- /dev/null
+++ b/src/remotesettings/app/assets/ic_trunkAlarmVehicle.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b91f424b814fa34ac49fd3b242e0a7fd99d83f0368c4f5cb9324bbd3898b16cc
+size 14342
diff --git a/src/remotesettings/app/assets/ic_trunkClosedVehicle.png b/src/remotesettings/app/assets/ic_trunkClosedVehicle.png
new file mode 100644
index 00000000..740c87b8
--- /dev/null
+++ b/src/remotesettings/app/assets/ic_trunkClosedVehicle.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6d0051a37851f265c3e5b7584f23ea1fe64bc5a57ebc025e9e792ee52bd03fd6
+size 18389
diff --git a/src/remotesettings/app/assets/ic_trunkOpenedVehicle.png b/src/remotesettings/app/assets/ic_trunkOpenedVehicle.png
new file mode 100644
index 00000000..b9784cc7
--- /dev/null
+++ b/src/remotesettings/app/assets/ic_trunkOpenedVehicle.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5697d8ae7158616b3d2f37a9728ac6a107d6073471db29c42aae5a43c4243028
+size 17216
diff --git a/src/remotesettings/app/assets/media.png b/src/remotesettings/app/assets/media.png
new file mode 100644
index 00000000..e0176b92
--- /dev/null
+++ b/src/remotesettings/app/assets/media.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:98297ae069ab8ac243aeedc49fb5a0c90e7c156803e3e9ba75ee1ff1a0ea7abe
+size 709
diff --git a/src/remotesettings/app/assets/navi.png b/src/remotesettings/app/assets/navi.png
new file mode 100644
index 00000000..807797da
--- /dev/null
+++ b/src/remotesettings/app/assets/navi.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5be35d0a4dab322c2d3238ccf3dd74995042ed42fa309e4d85645ff1bc0e67a0
+size 857
diff --git a/src/remotesettings/app/assets/settings.png b/src/remotesettings/app/assets/settings.png
new file mode 100644
index 00000000..2e1e8c84
--- /dev/null
+++ b/src/remotesettings/app/assets/settings.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:aea55c5e7b643c049fe61504c76819e32c59d34c7917f2ce903b1e505cc1c0a3
+size 1505
diff --git a/src/remotesettings/app/assets/vehicle.png b/src/remotesettings/app/assets/vehicle.png
new file mode 100644
index 00000000..af8279a9
--- /dev/null
+++ b/src/remotesettings/app/assets/vehicle.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:75bcba5d41450c075445b33342ee7129572ce04f89da3215256967837deec1e5
+size 2023
diff --git a/src/remotesettings/app/main.cpp b/src/remotesettings/app/main.cpp
index 367ed72c..271320f0 100644
--- a/src/remotesettings/app/main.cpp
+++ b/src/remotesettings/app/main.cpp
@@ -33,11 +33,17 @@
 #include <QQmlApplicationEngine>
 #include <QQmlContext>
 #include <QDir>
+#include <QtIviCore/QtIviCoreVersion>
 #include "client.h"
 
+// code to transform a macro into a string literal
+#define QUOTE(name) #name
+#define STR(macro) QUOTE(macro)
+
 int main(int argc, char *argv[])
 {
     QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+    QCoreApplication::setApplicationVersion(STR(NEPTUNE_COMPANION_APP_VERSION));
     QGuiApplication app(argc, argv);
 
     Client client;
@@ -45,6 +51,8 @@ int main(int argc, char *argv[])
     QQmlApplicationEngine engine;
     engine.addImportPath(QDir::currentPath()+QStringLiteral("/imports_shared/"));
     engine.rootContext()->setContextProperty(QStringLiteral("client"), &client);
+    engine.rootContext()->setContextProperty("neptuneInfo", STR(NEPTUNE_INFO));
+    engine.rootContext()->setContextProperty("qtiviVersion", QTIVICORE_VERSION_STR);
     engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
     if (engine.rootObjects().isEmpty())
         return -1;
diff --git a/src/remotesettings/app/main.qml b/src/remotesettings/app/main.qml
index 8b43441d..3e0385da 100644
--- a/src/remotesettings/app/main.qml
+++ b/src/remotesettings/app/main.qml
@@ -44,9 +44,12 @@ ApplicationWindow {
     visible: true
     width: 1280
     height: 800
-    title: qsTr("Settings app")
+    title: qsTr("Neptune Companion App")
 
-    function sc(value) {
+    readonly property color accentColor: "#FA9E54"
+    readonly property color disconnectedColor: "red"
+
+    function neptuneScale(value) {
         return value * Screen.pixelDensity;
     }
 
@@ -60,6 +63,20 @@ ApplicationWindow {
 
     InstrumentCluster {
         id: instrumentCluster
+
+        property bool isConnected: false
+
+        onIsInitializedChanged: {
+            isConnected = isInitialized;
+        }
+        onErrorChanged: {
+            if (error > 0) {
+                //Any other state then NoError=0
+                isConnected = false;
+            } else {
+                isConnected = isInitialized;
+            }
+        }
     }
 
     ConnectionMonitoring {
@@ -72,9 +89,9 @@ ApplicationWindow {
 
     ConnectionDialog {
         id: connectionDialog
+
         statusText: client.status
         lastUrls: client.lastUrls
-
         x: (parent.width-width) /2
         y: (parent.height-height) /2
 
@@ -108,17 +125,19 @@ ApplicationWindow {
                     connectionDialog.close();
             }
         }
-
     }
 
     header: ToolBar {
         leftPadding: 8
         rightPadding: 8
+
         RowLayout {
             anchors.fill: parent
+
             Label {
                 text: client.status
             }
+
             Item {
                 Layout.fillWidth: true
             }
@@ -130,30 +149,58 @@ ApplicationWindow {
         }
     }
 
-   StackLayout {
-       id: stack
-       anchors.fill: parent
-       anchors.margins: 16
-       SettingsPage {}
-       ClusterPage {}
-       SystemUIPage {}
-   }
-
-   footer: TabBar {
-       TabButton {
-           text: uiSettings.isInitialized && client.connected ?
-                     qsTr("Settings") : qsTr("Settings (Offline)")
-           onClicked: stack.currentIndex = 0
-       }
-       TabButton {
-           text: instrumentCluster.isInitialized && client.connected ?
-                     qsTr("Cluster") : qsTr("Cluster (Offline)")
-           onClicked: stack.currentIndex = 1
-       }
-       TabButton {
-           text: systemUI.isInitialized && client.connected ?
-                     qsTr("System UI") : qsTr("System UI (Offline)")
-           onClicked: stack.currentIndex = 2
-       }
-   }
+    StackLayout {
+        id: stack
+        anchors.fill: parent
+        anchors.margins: 16
+
+        VehiclePage {}
+        MediaPage {}
+        NaviPage {}
+        SettingsPage {}
+        DevelopmentPage {}
+    }
+
+    footer: TabBar {
+        TabButton {
+            icon.source: "qrc:/assets/vehicle.png"
+            text: qsTr("Vehicle")
+            icon.color: uiSettings.isInitialized && client.connected ? root.accentColor : root.disconnectedColor
+            display: AbstractButton.TextUnderIcon
+            font.capitalization: Font.MixedCase
+            onClicked: stack.currentIndex = 0
+        }
+        TabButton {
+            icon.source: "qrc:/assets/media.png"
+            text: qsTr("Media")
+            icon.color: uiSettings.isInitialized && client.connected ? root.accentColor : root.disconnectedColor
+            display: AbstractButton.TextUnderIcon
+            font.capitalization: Font.MixedCase
+            onClicked: stack.currentIndex = 1
+        }
+        TabButton {
+            icon.source: "qrc:/assets/navi.png"
+            text: qsTr("Navi")
+            icon.color: instrumentCluster.isConnected ? root.accentColor : root.disconnectedColor
+            display: AbstractButton.TextUnderIcon
+            font.capitalization: Font.MixedCase
+            onClicked: stack.currentIndex = 2
+        }
+        TabButton {
+            icon.source: "qrc:/assets/settings.png"
+            text: qsTr("Settings")
+            icon.color: systemUI.isInitialized && client.connected ? root.accentColor : root.disconnectedColor
+            display: AbstractButton.TextUnderIcon
+            font.capitalization: Font.MixedCase
+            onClicked: stack.currentIndex = 3
+        }
+        TabButton {
+            icon.source: "qrc:/assets/development.png"
+            text: qsTr("Dev")
+            icon.color: systemUI.isInitialized && client.connected ? "green" : root.disconnectedColor
+            display: AbstractButton.TextUnderIcon
+            font.capitalization: Font.MixedCase
+            onClicked: stack.currentIndex = 4
+        }
+    }
 }
diff --git a/src/remotesettings/app/qml.qrc b/src/remotesettings/app/qml.qrc
index ec50876c..5161fe5f 100644
--- a/src/remotesettings/app/qml.qrc
+++ b/src/remotesettings/app/qml.qrc
@@ -2,9 +2,34 @@
     <qresource prefix="/">
         <file>main.qml</file>
         <file>qtquickcontrols2.conf</file>
-        <file>ClusterPage.qml</file>
         <file>ConnectionDialog.qml</file>
         <file>SettingsPage.qml</file>
-        <file>SystemUIPage.qml</file>
+        <file>DevelopmentPage.qml</file>
+        <file>MediaPage.qml</file>
+        <file>VehiclePage.qml</file>
+        <file>NaviPage.qml</file>
+        <file>assets/vehicle.png</file>
+        <file>assets/media.png</file>
+        <file>assets/settings.png</file>
+        <file>assets/navi.png</file>
+        <file>assets/development.png</file>
+        <file>Vehicle2DPanel.qml</file>
+        <file>assets/ic_background.png</file>
+        <file>assets/ic_bodyVehicle.png</file>
+        <file>assets/ic_leftDoorAlarmVehicle.png</file>
+        <file>assets/ic_leftDoorClosedVehicle.png</file>
+        <file>assets/ic_leftDoorOpenedVehicle.png</file>
+        <file>assets/ic_leftDoorOpenedVehicleCarPart.png</file>
+        <file>assets/ic_rightDoorAlarmVehicle.png</file>
+        <file>assets/ic_rightDoorClosedVehicle.png</file>
+        <file>assets/ic_rightDoorOpenedVehicle.png</file>
+        <file>assets/ic_rightDoorOpenedVehicleCarPart.png</file>
+        <file>assets/ic_roofAlarmVehicle.png</file>
+        <file>assets/ic_roofClosedVehicle.png</file>
+        <file>assets/ic_roofOpenedVehicle.png</file>
+        <file>assets/ic_trunkAlarmVehicle.png</file>
+        <file>assets/ic_trunkClosedVehicle.png</file>
+        <file>assets/ic_trunkOpenedVehicle.png</file>
+        <file>DefaultNumberAnimation.qml</file>
     </qresource>
 </RCC>