Port the cluster-refgui demo supports both Qt5 and Qt6HEADmaster

This demo can now run on both Qt5 and Qt6, also added a macro to switch with or without the backend so that it can be developed easily on the Windows desktop.

Bug-AGL: SPEC-5243
Change-Id: I99b12ad9779a477784df13b83a850387747bb588
Signed-off-by: Jiu Shanheng <shanheng.jiu@qt.io>

37 files changed, 2031 insertions, 1898 deletions

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..2cd9fa3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+CMakeLists.txt.user*
+build-*
+build*
\ No newline at end of file
diff --git a/Application/cluster-service.cpp b/Application/cluster-service.cpp
index 1bc86ad..37bd8cb 100644
--- a/Application/cluster-service.cpp
+++ b/Application/cluster-service.cpp
@@ -1,9 +1,12 @@
 #include "cluster-service.hxx"
-#include <cluster_api.h>
-#include <cluster-api-sdevent.h>
 
+#if ENABLE_CLUSTER_BACKEND
+#include <climits>
+#include <cluster-api-sdevent.h>
+#include <cluster_api.h>
 #include <systemd/sd-daemon.h>
 #include <systemd/sd-event.h>
+#endif
 
 //-----------------------------------------------------------------------------------
 QClusterService::QClusterService()
@@ -21,8 +24,9 @@ Q_INVOKABLE int QClusterService::getSpAnalogVal()
 {
     uint32_t speed_u32 = 0;
     int retval = 0;
-
+#if ENABLE_CLUSTER_BACKEND
     speed_u32 = ::getSpAnalogVal();
+#endif
     if (speed_u32 > (uint32_t)INT_MAX)
         retval = INT_MAX;
     else
@@ -35,8 +39,9 @@ Q_INVOKABLE int QClusterService::getTaAnalogVal()
 {
     uint32_t ta_u32 = 0;
     int retval = 0;
-
+#if ENABLE_CLUSTER_BACKEND
     ta_u32 = ::getTaAnalogVal();
+#endif
     if (ta_u32 > (uint32_t)INT_MAX)
         retval = INT_MAX;
     else
@@ -49,8 +54,9 @@ Q_INVOKABLE int QClusterService::getTrcomTripAVal()
 {
     uint32_t tripa_u32 = 0;
     int retval = 0;
-
+#if ENABLE_CLUSTER_BACKEND
     tripa_u32 = ::getTrcomTripAVal();
+#endif
     if (tripa_u32 > (uint32_t)INT_MAX)
         retval = INT_MAX;
     else
@@ -63,8 +69,9 @@ Q_INVOKABLE int QClusterService::getOTempVal()
 {
     int16_t tmp_val = -40;
     int retval = -40;
-
+#if ENABLE_CLUSTER_BACKEND
     tmp_val = ::getOTempVal();
+#endif
     retval = (int)tmp_val;
 
     return retval;
@@ -72,272 +79,292 @@ Q_INVOKABLE int QClusterService::getOTempVal()
 //-----------------------------------------------------------------------------------
 Q_INVOKABLE bool QClusterService::getTurnR()
 {
-    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
     bool retval = false;
+#if ENABLE_CLUSTER_BACKEND
+    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
 
     on_off_flag = ::getTurnR();
     if (on_off_flag == IC_HMI_OFF)
         retval = false;
     else
         retval = true;
-
+#endif
     return retval;
 }
 //-----------------------------------------------------------------------------------
 Q_INVOKABLE bool QClusterService::getTurnL()
 {
-    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
     bool retval = false;
+#if ENABLE_CLUSTER_BACKEND
+    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
 
     on_off_flag = ::getTurnL();
     if (on_off_flag == IC_HMI_OFF)
         retval = false;
     else
         retval = true;
-
+#endif
     return retval;
 }
 //-----------------------------------------------------------------------------------
 Q_INVOKABLE bool QClusterService::getFrontRightSeatbelt()
 {
-    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
     bool retval = false;
+#if ENABLE_CLUSTER_BACKEND
+    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
 
     on_off_flag = ::getFrontRightSeatbelt();
     if (on_off_flag == IC_HMI_OFF)
         retval = false;
     else
         retval = true;
-
+#endif
     return retval;
 }
 //-----------------------------------------------------------------------------------
 Q_INVOKABLE bool QClusterService::getFrontLeftSeatbelt()
 {
-    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
     bool retval = false;
+#if ENABLE_CLUSTER_BACKEND
+    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
 
     on_off_flag = ::getFrontLeftSeatbelt();
     if (on_off_flag == IC_HMI_OFF)
         retval = false;
     else
         retval = true;
-
+#endif
     return retval;
 }
 //-----------------------------------------------------------------------------------
 Q_INVOKABLE bool QClusterService::getGeneralWarn()
 {
-    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
     bool retval = false;
+#if ENABLE_CLUSTER_BACKEND
+    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
 
     on_off_flag = ::getGeneralWarn();
     if (on_off_flag == IC_HMI_OFF)
         retval = false;
     else
         retval = true;
-
+#endif
     return retval;
 }
 //-----------------------------------------------------------------------------------
 Q_INVOKABLE bool QClusterService::getEngine()
 {
-    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
     bool retval = false;
+#if ENABLE_CLUSTER_BACKEND
+    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
 
     on_off_flag = ::getEngine();
     if (on_off_flag == IC_HMI_OFF)
         retval = false;
     else
         retval = true;
-
+#endif
     return retval;
 }
 //-----------------------------------------------------------------------------------
 Q_INVOKABLE bool QClusterService::getLowBattery()
 {
-    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
     bool retval = false;
+#if ENABLE_CLUSTER_BACKEND
+    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
 
     on_off_flag = ::getLowBattery();
     if (on_off_flag == IC_HMI_OFF)
         retval = false;
     else
         retval = true;
-
+#endif
     return retval;
 }
 //-----------------------------------------------------------------------------------
 Q_INVOKABLE bool QClusterService::getLdwOff()
 {
-    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
     bool retval = false;
+#if ENABLE_CLUSTER_BACKEND
+    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
 
     on_off_flag = ::getLdwOff();
     if (on_off_flag == IC_HMI_OFF)
         retval = false;
     else
         retval = true;
-
+#endif
     return retval;
 }
 //-----------------------------------------------------------------------------------
 Q_INVOKABLE bool QClusterService::getSrsAirbag()
 {
-    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
     bool retval = false;
+#if ENABLE_CLUSTER_BACKEND
+    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
 
     on_off_flag = ::getSrsAirbag();
     if (on_off_flag == IC_HMI_OFF)
         retval = false;
     else
         retval = true;
-
+#endif
     return retval;
 }
 //-----------------------------------------------------------------------------------
 Q_INVOKABLE bool QClusterService::getEspOff()
 {
-    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
     bool retval = false;
+#if ENABLE_CLUSTER_BACKEND
+    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
 
     on_off_flag = ::getEspOff();
     if (on_off_flag == IC_HMI_OFF)
         retval = false;
     else
         retval = true;
-
+#endif
     return retval;
 }
 //-----------------------------------------------------------------------------------
 Q_INVOKABLE bool QClusterService::getBrake()
 {
-    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
     bool retval = false;
+#if ENABLE_CLUSTER_BACKEND
+    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
 
     on_off_flag = ::getBrake();
     if (on_off_flag == IC_HMI_OFF)
         retval = false;
     else
         retval = true;
-
+#endif
     return retval;
 }
 //-----------------------------------------------------------------------------------
 Q_INVOKABLE bool QClusterService::getAbs()
 {
-    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
     bool retval = false;
+#if ENABLE_CLUSTER_BACKEND
+    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
 
     on_off_flag = ::getAbs();
     if (on_off_flag == IC_HMI_OFF)
         retval = false;
     else
         retval = true;
-
+#endif
     return retval;
 }
 //-----------------------------------------------------------------------------------
 Q_INVOKABLE bool QClusterService::getEspAct()
 {
-    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
     bool retval = false;
+#if ENABLE_CLUSTER_BACKEND
+    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
 
     on_off_flag = ::getEspAct();
     if (on_off_flag == IC_HMI_OFF)
         retval = false;
     else
         retval = true;
-
+#endif
     return retval;
 }
 //-----------------------------------------------------------------------------------
 Q_INVOKABLE bool QClusterService::getHillDescent()
 {
-    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
     bool retval = false;
+#if ENABLE_CLUSTER_BACKEND
+    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
 
     on_off_flag = ::getHillDescent();
     if (on_off_flag == IC_HMI_OFF)
         retval = false;
     else
         retval = true;
-
+#endif
     return retval;
 }
 //-----------------------------------------------------------------------------------
 Q_INVOKABLE bool QClusterService::getImmobi()
 {
-    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
     bool retval = false;
+#if ENABLE_CLUSTER_BACKEND
+    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
 
     on_off_flag = ::getImmobi();
     if (on_off_flag == IC_HMI_OFF)
         retval = false;
     else
         retval = true;
-
+#endif
     return retval;
 }
 //-----------------------------------------------------------------------------------
 Q_INVOKABLE bool QClusterService::getDoor()
 {
-    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
     bool retval = false;
+#if ENABLE_CLUSTER_BACKEND
+    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
 
     on_off_flag = ::getDoor();
     if (on_off_flag == IC_HMI_OFF)
         retval = false;
     else
         retval = true;
-
+#endif
     return retval;
 }
 //-----------------------------------------------------------------------------------
 Q_INVOKABLE bool QClusterService::getEps()
 {
-    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
     bool retval = false;
+#if ENABLE_CLUSTER_BACKEND
+    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
 
     on_off_flag = ::getEps();
     if (on_off_flag == IC_HMI_OFF)
         retval = false;
     else
         retval = true;
-
+#endif
     return retval;
 }
 //-----------------------------------------------------------------------------------
 Q_INVOKABLE bool QClusterService::getAutoHiBeamGreen()
 {
-    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
     bool retval = false;
+#if ENABLE_CLUSTER_BACKEND
+    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
 
     on_off_flag = ::getAutoHiBeamGreen();
     if (on_off_flag == IC_HMI_OFF)
         retval = false;
     else
         retval = true;
-
+#endif
     return retval;
 }
 //-----------------------------------------------------------------------------------
 Q_INVOKABLE bool QClusterService::getHighbeam()
 {
-    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
     bool retval = false;
+#if ENABLE_CLUSTER_BACKEND
+    IC_HMI_ON_OFF on_off_flag = IC_HMI_OFF;
 
     on_off_flag = ::getHighbeam();
     if (on_off_flag == IC_HMI_OFF)
         retval = false;
     else
         retval = true;
-
+#endif
     return retval;
 }
 //-----------------------------------------------------------------------------------
 Q_INVOKABLE QString QClusterService::getGearAtVal()
 {
+#if ENABLE_CLUSTER_BACKEND
     IC_HMI_GEAR_AT_VAL gear_val = IC_HMI_AT_UNUSED;
     QString gear_string = QString("");
 
@@ -385,6 +412,9 @@ Q_INVOKABLE QString QClusterService::getGearAtVal()
     }
 
     return gear_string;
+#else
+    return QStringLiteral("Test");
+#endif
 }
 //-----------------------------------------------------------------------------------
 /*
@@ -395,6 +425,7 @@ static void ic_notify(uint64_t signal, IC_HMI_ON_OFF val)ui
 */
 void QClusterService::run()
 {
+#if ENABLE_CLUSTER_BACKEND
     sd_event *event = NULL;
     data_pool_client_handle_sdevent handle = NULL;
     int ret = -1;
@@ -421,6 +452,7 @@ finish:
     (void) data_pool_client_cleanup_sdevent(handle);
     event = sd_event_unref(event);
 
+#endif
     return;
 }
 
diff --git a/Application/main.cpp b/Application/main.cpp
index 51b0c39..1593d25 100644
--- a/Application/main.cpp
+++ b/Application/main.cpp
@@ -14,17 +14,21 @@
  * limitations under the License.
  */
 
+#include <QDebug>
+#include <QDir>
+#include <QDirIterator>
 #include <QGuiApplication>
 #include <QQmlApplicationEngine>
-#include <QSurfaceFormat>
-#include <QDir>
 #include <QQmlContext>
-#include <QDebug>
-
+#include <QSurfaceFormat>
+#if QT_VERSION >= 0x060000
+#include <QQuickWindow>
+#endif
 #include "cluster-service.hxx"
 
 int main(int argc, char *argv[])
 {
+#ifdef CROSSCOMPILING
     QSurfaceFormat defaultFormat;
     defaultFormat.setSwapBehavior(QSurfaceFormat::TripleBuffer);
     defaultFormat.setRenderableType(QSurfaceFormat::OpenGLES);
@@ -34,6 +38,17 @@ int main(int argc, char *argv[])
     defaultFormat.setDepthBufferSize(8);
     defaultFormat.setAlphaBufferSize(8);
     QSurfaceFormat::setDefaultFormat(defaultFormat);
+#endif
+
+#if QT_VERSION >= 0x060000
+    QQuickWindow::setGraphicsApi(QSGRendererInterface::OpenGL);
+    qputenv("QT_ENABLE_HIGHDPI_SCALING", "0");
+#endif
+
+    QDirIterator it(":", QDirIterator::Subdirectories);
+    while (it.hasNext()) {
+        qDebug() << it.next();
+    }
 
     QGuiApplication app(argc, argv);
 
diff --git a/Assets/Common/Shaders/Qt6/guageMask.frag b/Assets/Common/Shaders/Qt6/guageMask.frag
new file mode 100644
index 0000000..28c8784
--- /dev/null
+++ b/Assets/Common/Shaders/Qt6/guageMask.frag
@@ -0,0 +1,17 @@
+#version 440
+layout(location = 0) in vec2 coord;
+layout(location = 0) out vec4 fragColor;
+layout(std140, binding = 0) uniform buf {
+    mat4 qt_Matrix;
+    float qt_Opacity;
+    float angleBase;
+    float angle;
+};
+layout(binding = 1) uniform sampler2D src;
+
+void main(){
+    mediump vec2 d=2.0*coord-vec2(1.0,1.0);
+    mediump float a=atan(d.x,-d.y);
+    mediump vec4 tex = texture(src, coord);
+    fragColor = (angleBase<=a && a<=angle) ?  tex * qt_Opacity : tex * 0.0;
+}
diff --git a/Assets/Common/Shaders/Qt6/guageMask.vert b/Assets/Common/Shaders/Qt6/guageMask.vert
new file mode 100644
index 0000000..481dc61
--- /dev/null
+++ b/Assets/Common/Shaders/Qt6/guageMask.vert
@@ -0,0 +1,13 @@
+#version 440
+layout(location = 0) in vec4 qt_Vertex;
+layout(location = 1) in vec2 qt_MultiTexCoord0;
+layout(location = 0) out vec2 coord;
+layout(std140, binding = 0) uniform buf {
+    mat4 qt_Matrix;
+    float qt_Opacity;
+};
+
+void main(){
+    coord = qt_MultiTexCoord0;
+    gl_Position = qt_Matrix * qt_Vertex;
+}
diff --git a/CMakeLists.txt b/CMakeLists.txt
index 79b168e..593534e 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -1,57 +1,85 @@
-cmake_minimum_required(VERSION 3.10.0)
-project(cluster VERSION 1.0.0)
+cmake_minimum_required(VERSION 3.16.0)
+project(cluster VERSION 1.0.0 LANGUAGES CXX)
+
+set(CMAKE_CXX_STANDARD 17)
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
 
-set(CMAKE_CXX_STANDARD 11)
 set(CMAKE_AUTOMOC ON)
 set(CMAKE_AUTORCC ON)
 set(CMAKE_AUTOUIC ON)
 set(CMAKE_INCLUDE_CURRENT_DIR ON)
 set(INSTALL_DIRECTORY "/opt/apps")
 
-find_package(PkgConfig REQUIRED)
-find_package(Qt5Core REQUIRED)
-find_package(Qt5Qml REQUIRED)
-find_package(Qt5Gui REQUIRED)
-find_package(Qt5QuickCompiler REQUIRED)
-
-pkg_check_modules(CLUSTERAPI REQUIRED cluster-api-systemd)
+find_package(QT NAMES Qt6 Qt5 REQUIRED COMPONENTS Core Quick)
+find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS Core Quick)
 
-include_directories(
-    "${Qt5Core_INCLUDE_DIRS}"
-    "${Qt5Qml_INCLUDE_DIRS}"
-    "${Qt5Gui_INCLUDE_DIRS}"
-)
+if (CMAKE_CROSSCOMPILING)
+    find_package(PkgConfig REQUIRED)
+    pkg_check_modules(CLUSTERAPI REQUIRED cluster-api-systemd)
+endif()
 
 set(SOURCES
     Application/main.cpp
     Application/cluster-service.cpp
     Application/cluster-service.hxx
-    )
-
-qt5_add_resources(
-    RESOURCES
-    GUIModel/GUIModel.qrc
-    Assets/Common/3DModelData.qrc
-    Assets/Common/3DModelTexture.qrc
-    Assets/Common/Fonts.qrc
-    Assets/Common/Images.qrc
-    Assets/Common/Shaders.qrc
 )
 
-add_executable(
-    ${PROJECT_NAME}
-    ${SOURCES}
-    ${RESOURCES}
-)
+if(${QT_VERSION_MAJOR} GREATER_EQUAL 6)
+    find_package(Qt6 COMPONENTS ShaderTools)
 
-target_link_libraries(
-    ${PROJECT_NAME}
-    Qt5::Core
-    Qt5::Qml
-    Qt5::Gui
+    qt_add_executable(${PROJECT_NAME}
+        MANUAL_FINALIZATION
+        ${SOURCES}
+        GUIModel/GUIModel.qrc
+        Assets/Common/3DModelData.qrc
+        Assets/Common/3DModelTexture.qrc
+        Assets/Common/Fonts.qrc
+        Assets/Common/Images.qrc
+        Assets/Common/Shaders.qrc
+        GUIModel/MeterEffect/Effect.qrc
+    )
+    qt6_add_shaders(${PROJECT_NAME} "${PROJECT_NAME}"
+        PREFIX
+            "/"
+        FILES
+            "Assets/Common/Shaders/Qt6/guageMask.frag"
+            "Assets/Common/Shaders/Qt6/guageMask.vert"
+    )
+else()
+    qt5_add_resources(RESOURCES
+        GUIModel/GUIModel.qrc
+        Assets/Common/3DModelData.qrc
+        Assets/Common/3DModelTexture.qrc
+        Assets/Common/Fonts.qrc
+        Assets/Common/Images.qrc
+        Assets/Common/Shaders.qrc
+        GUIModel/MeterEffect/Qt5/Effect.qrc
+    )
+
+    add_executable(
+        ${PROJECT_NAME}
+        ${SOURCES}
+        ${RESOURCES}
+    )
+endif()
+
+target_link_libraries(${PROJECT_NAME} PRIVATE
+    Qt${QT_VERSION_MAJOR}::Core
+    Qt${QT_VERSION_MAJOR}::Quick
+    Qt${QT_VERSION_MAJOR}::Gui
     ${CLUSTERAPI_LIBRARIES}
 )
 
+if(CMAKE_CROSSCOMPILING)
+    target_compile_definitions(${PROJECT_NAME} PRIVATE
+        ENABLE_CLUSTER_BACKEND=1 CROSSCOMPILING=1
+    )
+else()
+    target_compile_definitions(${PROJECT_NAME} PRIVATE
+        ENABLE_CLUSTER_BACKEND=0
+    )
+endif()
+
 link_directories( ${CLUSTERAPI_LIBRARY_DIRS} )
 set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} ${CLUSTERAPI_CXX_FLAGS} ${CLUSTERAPI_C_FLAGS}")
 set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} ${CLUSTERAPI_C_FLAGS}")
@@ -64,3 +92,7 @@ file(GLOB VIDEOS ${CMAKE_CURRENT_SOURCE_DIR}/Assets/Common/Videos/*)
 install(FILES ${VIDEOS} DESTINATION ${APPS_INST_DIR})
 install(TARGETS ${PROJECT_NAME} DESTINATION ${APPS_INST_DIR})
 
+if(QT_VERSION_MAJOR EQUAL 6)
+    qt_import_qml_plugins(${PROJECT_NAME})
+    qt_finalize_executable(${PROJECT_NAME})
+endif()
diff --git a/GUIModel/Map/Map.qml b/GUIModel/Map/Map.qml
index d9ab347..1d4fa90 100644
--- a/GUIModel/Map/Map.qml
+++ b/GUIModel/Map/Map.qml
@@ -16,55 +16,59 @@
 
 import QtQuick 2.14
 import QtMultimedia 5.14
-import QtGraphicalEffects 1.14
 
 Item {
     id: map
-    x:1920 - 1200
-    y:0
-    width : 1200
-    height : 720
+    x: 1920 - 1200
+    y: 0
+    width: 1200
+    height: 720
     Component.onCompleted: {
-        mapVideo.play()
+        mapVideo.play();
     }
 
-    Connections{
+    Connections {
         target: rootItem
-        onTransNormalToAdas:{
-        }
+        onTransNormalToAdas: {}
 
-        onTransAdasToMap:{
-            adasToMapAnimationMap.start()
+        onTransAdasToMap: {
+            adasToMapAnimationMap.start();
         }
 
-        onTransMapToNormal:{
-            mapToNormalAnimationMap.start()
+        onTransMapToNormal: {
+            mapToNormalAnimationMap.start();
         }
     }
 
-    Item{
+    Item {
         id: mapParts
-        visible:false
+        visible: false
         anchors.fill: parent
 
-        Item{
-            id:mapMask
+        Item {
+            id: mapMask
             x: 0
             y: 0
-            Image{
+            Image {
                 width: 1200
                 height: 720
                 source: "qrc:/Images/ADASView/MAP/map_mask.ktx"
             }
 
-            Image{ source:"qrc:/Images/ADASView/MAP/acc_cover.ktx"; width:1412; height:98; x:508-map.x; y:622 }
+            Image {
+                source: "qrc:/Images/ADASView/MAP/acc_cover.ktx"
+                width: 1412
+                height: 98
+                x: 508 - map.x
+                y: 622
+            }
         }
-   }
+    }
 
-    SequentialAnimation{
-        id:adasToMapAnimationMap
-        onStarted: rootItem.focus=false
-        onStopped: rootItem.focus=true
+    SequentialAnimation {
+        id: adasToMapAnimationMap
+        onStarted: rootItem.focus = false
+        onStopped: rootItem.focus = true
 
         PauseAnimation {
             duration: 330
@@ -77,24 +81,23 @@ Item {
             to: true
         }
 
-        PropertyAnimation{
+        PropertyAnimation {
             target: mapParts
             property: "opacity"
             duration: 330
-            from:0
-            to:1
+            from: 0
+            to: 1
         }
     }
 
-    SequentialAnimation{
-        id:mapToNormalAnimationMap
-        onStarted: rootItem.focus=false
+    SequentialAnimation {
+        id: mapToNormalAnimationMap
+        onStarted: rootItem.focus = false
         PauseAnimation {
             duration: 254
         }
 
-
-        PropertyAnimation{
+        PropertyAnimation {
             target: mapParts
             property: "opacity"
             duration: 330
@@ -109,6 +112,4 @@ Item {
             to: false
         }
     }
-
-
 }
diff --git a/GUIModel/Menu/Menu.qml b/GUIModel/Menu/Menu.qml
index 9610b49..7a6d534 100644
--- a/GUIModel/Menu/Menu.qml
+++ b/GUIModel/Menu/Menu.qml
@@ -15,65 +15,63 @@
  */
 
 import QtQuick 2.0
-import QtGraphicalEffects 1.0
 import QtQuick.Shapes 1.11
 
-
-Item{
+Item {
     id: menuRoot
 
-    Connections{
+    Connections {
         target: rootItem
-        onTransNormalToAdas:{
-            menuMain.startAnimationNormalToAdas()
-            menuContents.startAnimationNormalToAdas()
-            menuShade.startAnimationNormalToAdas()
+        onTransNormalToAdas: {
+            menuMain.startAnimationNormalToAdas();
+            menuContents.startAnimationNormalToAdas();
+            menuShade.startAnimationNormalToAdas();
         }
 
-        onKeyPressed_Up:{
-            if(menu.state === "open"){
-                menuMain.incrementIndex()
+        onKeyPressed_Up: {
+            if (menu.state === "open") {
+                menuMain.incrementIndex();
             }
         }
 
-        onKeyPressed_Down:{
-            if(menu.state === "open"){
-                menuMain.decrementIndex()
+        onKeyPressed_Down: {
+            if (menu.state === "open") {
+                menuMain.decrementIndex();
             }
         }
 
-        onKeyPressed_Left:{
-            if(menu.state === "close"){
-                menuContents.decrementIndex()
+        onKeyPressed_Left: {
+            if (menu.state === "close") {
+                menuContents.decrementIndex();
             }
         }
 
-        onKeyPressed_Right:{
-            if(menu.state === "close"){
-                menuContents.incrementIndex()
+        onKeyPressed_Right: {
+            if (menu.state === "close") {
+                menuContents.incrementIndex();
             }
         }
 
-        onKeyPressed_Enter:{
-            if(menu.state === "close"){
-                menuContents.enter()
-            }else if(menu.state === "open"){
-                menuContents.close()
-                menuMain.close()
-                menu.state = "close"
+        onKeyPressed_Enter: {
+            if (menu.state === "close") {
+                menuContents.enter();
+            } else if (menu.state === "open") {
+                menuContents.close();
+                menuMain.close();
+                menu.state = "close";
             }
         }
 
-        onKeyPressed_Menu:{
-            if(menu.state === "close"){
-                menuContents.open()
-                menuMain.open()
-                menu.state = "open"
+        onKeyPressed_Menu: {
+            if (menu.state === "close") {
+                menuContents.open();
+                menuMain.open();
+                menu.state = "open";
             }
         }
     }
 
-    Item{
+    Item {
         id: menu
 
         property var mode: "normal" /* Normal or Adas */
@@ -92,8 +90,4 @@ Item{
             id: menuShade
         }
     }
-
-
-
-
 }
diff --git a/GUIModel/Menu/MenuAdas.qml b/GUIModel/Menu/MenuAdas.qml
index 4d031d2..493cb2c 100644
--- a/GUIModel/Menu/MenuAdas.qml
+++ b/GUIModel/Menu/MenuAdas.qml
@@ -14,175 +14,175 @@
  * limitations under the License.
  */
 
-import QtQuick 2.0

-import QtGraphicalEffects 1.0

-import QtQuick.Shapes 1.11

-

-Item{

-    id:menuAdasRoot

-    visible: false

-

-    /* public properties */

-    property alias mode:menuAdas.mode

-

-    /* public functions */

-    function incrementIndex(){

-        menuAdas.incrementIndex()

-    }

-

-    function decrementIndex(){

-        menuAdas.decrementIndex()

-    }

-

-    function changeEnabled(){

-        menuAdas.changeEnabled()

-    }

-

-

-    Item {

-        id: menuAdas

-        visible:true

-        width: 826

-        height: 358

-

-        property var mode: "normal" /* normal or adas */

-

-        property int  index : 0

-        property bool icon0Enabled : false

-        property bool icon1Enabled : false

-        property bool icon2Enabled : false

-

-        property bool icon0Focused : true

-        property bool icon1Focused : false

-        property bool icon2Focused : false

-

-        onModeChanged: {

-            if(mode === "normal"){

-                menuAdasNormal.visible = true

-                menuAdasAdas.visible = false

-            }else if(mode === "adas"){

-                menuAdasNormal.visible = false

-                menuAdasAdas.visible = true

-            }else{

-                menuAdasNormal.visible = true

-                menuAdasAdas.visible = false

-            }

-        }

-

-        function incrementIndex(){

-            index++

-            if(index === 3) index = 0

-

-            if(index == 0){

-                icon0Focused = true

-                icon1Focused = false

-                icon2Focused = false

-            }

-            else if(index == 1){

-                icon0Focused = false

-                icon1Focused = true

-                icon2Focused = false

-            }

-            else if(index == 2){

-                icon0Focused = false

-                icon1Focused = false

-                icon2Focused = true

-            }

-        }

-        function decrementIndex(){

-            index--

-            if(index === -1) index = 2

-

-            if(index == 0){

-                icon0Focused = true

-                icon1Focused = false

-                icon2Focused = false

-            }

-            else if(index == 1){

-                icon0Focused = false

-                icon1Focused = true

-                icon2Focused = false

-            }

-            else if(index == 2){

-                icon0Focused = false

-                icon1Focused = false

-                icon2Focused = true

-            }

-        }

-        function changeEnabled(){

-            if(index === 0){ // left

-                icon0Enabled = !(icon0Enabled)

-            }

-            if(index === 1) { //center

-                icon1Enabled = !(icon1Enabled)

-            }

-            if(index === 2) { //right

-                icon2Enabled = !(icon2Enabled)

-            }

-        }

-

-        /**************adas image******************/

-        Item{

-            id: menuAdasNormal

-

-            MenuAdasIconNormal {

-                enabled: menuAdas.icon0Enabled

-                focused: menuAdas.icon0Focused

-                offImage: "qrc:/Images/NormalView/ADAS/adas_icon1_off.png"

-                onImage: "qrc:/Images/NormalView/ADAS/adas_icon1_on.png"

-                textImage: "qrc:/Images/NormalView/ADAS/adas_text1.png"

-            }

-

-            MenuAdasIconNormal {

-                x:130

-                enabled: menuAdas.icon1Enabled

-                focused: menuAdas.icon1Focused

-                offImage: "qrc:/Images/NormalView/ADAS/adas_icon2_off.png"

-                onImage: "qrc:/Images/NormalView/ADAS/adas_icon2_on.png"

-                textImage: "qrc:/Images/NormalView/ADAS/adas_text2.png"

-            }

-

-            MenuAdasIconNormal {

-                x:260

-                enabled: menuAdas.icon2Enabled

-                focused: menuAdas.icon2Focused

-                offImage: "qrc:/Images/NormalView/ADAS/adas_icon3_off.png"

-                onImage: "qrc:/Images/NormalView/ADAS/adas_icon3_on.png"

-                textImage: "qrc:/Images/NormalView/ADAS/adas_text3.png"

-            }

-        }

-

-

-        Item{

-            id: menuAdasAdas

-            visible: false

-

-            MenuAdasIconAdas {

-                enabled: menuAdas.icon0Enabled

-                focused: menuAdas.icon0Focused

-                offImage: "qrc:/Images/ADASView/MENU/adas_icon1_off.png"

-                onImage: "qrc:/Images/ADASView/MENU/adas_icon1_on.png"

-                textImage: "qrc:/Images/ADASView/MENU/adas_text1.png"

-            }

-

-            MenuAdasIconAdas {

-                x:120

-                enabled: menuAdas.icon1Enabled

-                focused: menuAdas.icon1Focused

-                offImage: "qrc:/Images/ADASView/MENU/adas_icon2_off.png"

-                onImage: "qrc:/Images/ADASView/MENU/adas_icon2_on.png"

-                textImage: "qrc:/Images/ADASView/MENU/adas_text2.png"

-            }

-

-            MenuAdasIconAdas {

-                x:240

-                enabled: menuAdas.icon2Enabled

-                focused: menuAdas.icon2Focused

-                offImage: "qrc:/Images/ADASView/MENU/adas_icon3_off.png"

-                onImage: "qrc:/Images/ADASView/MENU/adas_icon3_on.png"

-                textImage: "qrc:/Images/ADASView/MENU/adas_text3.png"

-            }

-

-        }

-    }

-}

+import QtQuick 2.0
+
+import QtQuick.Shapes 1.11
+
+Item{
+    id:menuAdasRoot
+    visible: false
+
+    /* public properties */
+    property alias mode:menuAdas.mode
+
+    /* public functions */
+    function incrementIndex(){
+        menuAdas.incrementIndex()
+    }
+
+    function decrementIndex(){
+        menuAdas.decrementIndex()
+    }
+
+    function changeEnabled(){
+        menuAdas.changeEnabled()
+    }
+
+
+    Item {
+        id: menuAdas
+        visible:true
+        width: 826
+        height: 358
+
+        property var mode: "normal" /* normal or adas */
+
+        property int  index : 0
+        property bool icon0Enabled : false
+        property bool icon1Enabled : false
+        property bool icon2Enabled : false
+
+        property bool icon0Focused : true
+        property bool icon1Focused : false
+        property bool icon2Focused : false
+
+        onModeChanged: {
+            if(mode === "normal"){
+                menuAdasNormal.visible = true
+                menuAdasAdas.visible = false
+            }else if(mode === "adas"){
+                menuAdasNormal.visible = false
+                menuAdasAdas.visible = true
+            }else{
+                menuAdasNormal.visible = true
+                menuAdasAdas.visible = false
+            }
+        }
+
+        function incrementIndex(){
+            index++
+            if(index === 3) index = 0
+
+            if(index == 0){
+                icon0Focused = true
+                icon1Focused = false
+                icon2Focused = false
+            }
+            else if(index == 1){
+                icon0Focused = false
+                icon1Focused = true
+                icon2Focused = false
+            }
+            else if(index == 2){
+                icon0Focused = false
+                icon1Focused = false
+                icon2Focused = true
+            }
+        }
+        function decrementIndex(){
+            index--
+            if(index === -1) index = 2
+
+            if(index == 0){
+                icon0Focused = true
+                icon1Focused = false
+                icon2Focused = false
+            }
+            else if(index == 1){
+                icon0Focused = false
+                icon1Focused = true
+                icon2Focused = false
+            }
+            else if(index == 2){
+                icon0Focused = false
+                icon1Focused = false
+                icon2Focused = true
+            }
+        }
+        function changeEnabled(){
+            if(index === 0){ // left
+                icon0Enabled = !(icon0Enabled)
+            }
+            if(index === 1) { //center
+                icon1Enabled = !(icon1Enabled)
+            }
+            if(index === 2) { //right
+                icon2Enabled = !(icon2Enabled)
+            }
+        }
+
+        /**************adas image******************/
+        Item{
+            id: menuAdasNormal
+
+            MenuAdasIconNormal {
+                enabled: menuAdas.icon0Enabled
+                focused: menuAdas.icon0Focused
+                offImage: "qrc:/Images/NormalView/ADAS/adas_icon1_off.png"
+                onImage: "qrc:/Images/NormalView/ADAS/adas_icon1_on.png"
+                textImage: "qrc:/Images/NormalView/ADAS/adas_text1.png"
+            }
+
+            MenuAdasIconNormal {
+                x:130
+                enabled: menuAdas.icon1Enabled
+                focused: menuAdas.icon1Focused
+                offImage: "qrc:/Images/NormalView/ADAS/adas_icon2_off.png"
+                onImage: "qrc:/Images/NormalView/ADAS/adas_icon2_on.png"
+                textImage: "qrc:/Images/NormalView/ADAS/adas_text2.png"
+            }
+
+            MenuAdasIconNormal {
+                x:260
+                enabled: menuAdas.icon2Enabled
+                focused: menuAdas.icon2Focused
+                offImage: "qrc:/Images/NormalView/ADAS/adas_icon3_off.png"
+                onImage: "qrc:/Images/NormalView/ADAS/adas_icon3_on.png"
+                textImage: "qrc:/Images/NormalView/ADAS/adas_text3.png"
+            }
+        }
+
+
+        Item{
+            id: menuAdasAdas
+            visible: false
+
+            MenuAdasIconAdas {
+                enabled: menuAdas.icon0Enabled
+                focused: menuAdas.icon0Focused
+                offImage: "qrc:/Images/ADASView/MENU/adas_icon1_off.png"
+                onImage: "qrc:/Images/ADASView/MENU/adas_icon1_on.png"
+                textImage: "qrc:/Images/ADASView/MENU/adas_text1.png"
+            }
+
+            MenuAdasIconAdas {
+                x:120
+                enabled: menuAdas.icon1Enabled
+                focused: menuAdas.icon1Focused
+                offImage: "qrc:/Images/ADASView/MENU/adas_icon2_off.png"
+                onImage: "qrc:/Images/ADASView/MENU/adas_icon2_on.png"
+                textImage: "qrc:/Images/ADASView/MENU/adas_text2.png"
+            }
+
+            MenuAdasIconAdas {
+                x:240
+                enabled: menuAdas.icon2Enabled
+                focused: menuAdas.icon2Focused
+                offImage: "qrc:/Images/ADASView/MENU/adas_icon3_off.png"
+                onImage: "qrc:/Images/ADASView/MENU/adas_icon3_on.png"
+                textImage: "qrc:/Images/ADASView/MENU/adas_text3.png"
+            }
+
+        }
+    }
+}
diff --git a/GUIModel/Menu/MenuAdasIconAdas.qml b/GUIModel/Menu/MenuAdasIconAdas.qml
index d1b8fef..0988cb8 100644
--- a/GUIModel/Menu/MenuAdasIconAdas.qml
+++ b/GUIModel/Menu/MenuAdasIconAdas.qml
@@ -14,54 +14,54 @@
  * limitations under the License.
  */
 
-import QtQuick 2.0

-import QtGraphicalEffects 1.0

-import QtQuick.Shapes 1.11

-

-Item{

-    id: adasIconAdas

-

-    property bool enabled: false

-    property bool focused: false

-

-    property alias onImage: onImage.source

-    property alias offImage: offImage.source

-    property alias textImage: textImage.source

-

-    Image{

-        id: offImage

-        source: "qrc:/Images/ADASView/MENU/adas_icon1_off.png"

-        x:170

-        y:186

-        width:104

-        height:90

-        visible: !(adasIconAdas.enabled)

-    }

-    Image{

-        id: onImage

-        source: "qrc:/Images/ADASView/MENU/adas_icon1_on.png"

-        x:170

-        y:186

-        width:104

-        height:90

-        visible: adasIconAdas.enabled

-    }

-    Image{

-        id: textImage

-        source: "qrc:/Images/ADASView/MENU/adas_text1.png"

-        x:202

-        y:278

-        width:40

-        height:18

-        visible:true

-    }

-    Image{

-        source: "qrc:/Images/ADASView/MENU/adas_panel1.png"

-        x:165

-        y:170

-        width:114

-        height:144

-        visible: adasIconAdas.focused

-    }

-    

-}

+import QtQuick 2.0
+
+import QtQuick.Shapes 1.11
+
+Item{
+    id: adasIconAdas
+
+    property bool enabled: false
+    property bool focused: false
+
+    property alias onImage: onImage.source
+    property alias offImage: offImage.source
+    property alias textImage: textImage.source
+
+    Image{
+        id: offImage
+        source: "qrc:/Images/ADASView/MENU/adas_icon1_off.png"
+        x:170
+        y:186
+        width:104
+        height:90
+        visible: !(adasIconAdas.enabled)
+    }
+    Image{
+        id: onImage
+        source: "qrc:/Images/ADASView/MENU/adas_icon1_on.png"
+        x:170
+        y:186
+        width:104
+        height:90
+        visible: adasIconAdas.enabled
+    }
+    Image{
+        id: textImage
+        source: "qrc:/Images/ADASView/MENU/adas_text1.png"
+        x:202
+        y:278
+        width:40
+        height:18
+        visible:true
+    }
+    Image{
+        source: "qrc:/Images/ADASView/MENU/adas_panel1.png"
+        x:165
+        y:170
+        width:114
+        height:144
+        visible: adasIconAdas.focused
+    }
+    
+}
diff --git a/GUIModel/Menu/MenuAdasIconNormal.qml b/GUIModel/Menu/MenuAdasIconNormal.qml
index 8442c5d..78ddf20 100644
--- a/GUIModel/Menu/MenuAdasIconNormal.qml
+++ b/GUIModel/Menu/MenuAdasIconNormal.qml
@@ -14,53 +14,53 @@
  * limitations under the License.
  */
 
-import QtQuick 2.0

-import QtGraphicalEffects 1.0

-import QtQuick.Shapes 1.11

-

-Item{

-    id: adasIconNormal

-    property bool enabled: false

-    property bool focused: false

-

-    property alias onImage: onImage.source

-    property alias offImage: offImage.source

-    property alias textImage: textImage.source

-

-    Image{

-        id: offImage

-        source: "qrc:/Images/NormalView/ADAS/adas_icon1_off.png"

-        x: 171

-        y: 186

-        width: 102

-        height: 90

-        visible: !(adasIconNormal.enabled)

-    }

-    Image{

-        id: onImage

-        source: "qrc:/Images/NormalView/ADAS/adas_icon1_on.png"

-        x: 171

-        y: 186

-        width: 102

-        height: 90

-        visible: adasIconNormal.enabled

-    }

-    Image{

-        id: textImage

-        source: "qrc:/Images/NormalView/ADAS/adas_text1.png"

-        x: 202

-        y: 278

-        width: 40

-        height: 18

-        visible: true

-    }

-    Image{

-        id: focusImage

-        source: "qrc:/Images/NormalView/ADAS/adas_panel1.png"

-        x: 160

-        y: 164

-        width: 124

-        height: 158

-        visible: adasIconNormal.focused

-    }

-}

+import QtQuick 2.0
+
+import QtQuick.Shapes 1.11
+
+Item{
+    id: adasIconNormal
+    property bool enabled: false
+    property bool focused: false
+
+    property alias onImage: onImage.source
+    property alias offImage: offImage.source
+    property alias textImage: textImage.source
+
+    Image{
+        id: offImage
+        source: "qrc:/Images/NormalView/ADAS/adas_icon1_off.png"
+        x: 171
+        y: 186
+        width: 102
+        height: 90
+        visible: !(adasIconNormal.enabled)
+    }
+    Image{
+        id: onImage
+        source: "qrc:/Images/NormalView/ADAS/adas_icon1_on.png"
+        x: 171
+        y: 186
+        width: 102
+        height: 90
+        visible: adasIconNormal.enabled
+    }
+    Image{
+        id: textImage
+        source: "qrc:/Images/NormalView/ADAS/adas_text1.png"
+        x: 202
+        y: 278
+        width: 40
+        height: 18
+        visible: true
+    }
+    Image{
+        id: focusImage
+        source: "qrc:/Images/NormalView/ADAS/adas_panel1.png"
+        x: 160
+        y: 164
+        width: 124
+        height: 158
+        visible: adasIconNormal.focused
+    }
+}
diff --git a/GUIModel/Menu/MenuAudio.qml b/GUIModel/Menu/MenuAudio.qml
index e02ba24..e55ca51 100644
--- a/GUIModel/Menu/MenuAudio.qml
+++ b/GUIModel/Menu/MenuAudio.qml
@@ -14,89 +14,89 @@
  * limitations under the License.
  */
 
-import QtQuick 2.0

-import QtGraphicalEffects 1.0

-import QtQuick.Shapes 1.11

-

-Item {

-    id: menuAudio

-    visible:false

-    width: 826

-    height: 358

-    property string mode: "normal"

-    

-    function incrementIndex(){

-        audioPanels.incrementIndex()

-    }

-    

-    function decrementIndex(){

-        audioPanels.decrementIndex()

-    }

-    

-    Item{

-        id: audioPanels

-        height: 358

-        

-        property int index: 0

-        

-        function incrementIndex(){

-            index++

-            if(index === 3) index = 0

-            

-            if(index === 0){

-                audioPanel2.slideOut(+1) /*Slide out to right*/

-                audioPanel0.slideIn(+1)  /*Slide in from left*/

-            }else if(index === 1){

-                audioPanel0.slideOut(+1)

-                audioPanel1.slideIn(+1)

-            }else if(index === 2){

-                audioPanel1.slideOut(+1)

-                audioPanel2.slideIn(+1)

-            }

-        }

-        

-        function decrementIndex(){

-            index--

-            if(index === -1) index = 2

-            

-            if(index === 2){

-                audioPanel0.slideOut(-1) /*Slide out to left*/

-                audioPanel2.slideIn(-1)  /*Slide in from right*/

-            }else if(index === 1){

-                audioPanel2.slideOut(-1)

-                audioPanel1.slideIn(-1)

-            }else if(index === 0){

-                audioPanel1.slideOut(-1)

-                audioPanel0.slideIn(-1)

-            }

-        }

-

-        MenuAudioPanel{

-            id:     audioPanel0

-            mode:   menuAudio.mode

-            icon:   "qrc:/Images/ADASView/MENU/jacket1.png"

-            title:  "You Don't Know Me"

-            artist: "Martin Crown"

-            bg:     "qrc:/Images/ADASView/MENU/jacket_blur1.png"

-            panelVisible: true

-       }

-        MenuAudioPanel{

-            id:     audioPanel1

-            mode:   menuAudio.mode

-            icon:   "qrc:/Images/ADASView/MENU/jacket2.png"

-            title:  "LIGHT"

-            artist: "Amelia Sedgwick"

-            bg:     "qrc:/Images/ADASView/MENU/jacket_blur2.png"

-            panelVisible: false

-       }

-        MenuAudioPanel{

-            id:     audioPanel2

-            mode:   menuAudio.mode

-            icon:   "qrc:/Images/ADASView/MENU/jacket3.png"

-            title:  "Ocean Power"

-            artist: "Oceania Poseidon"

-            bg:     "qrc:/Images/ADASView/MENU/jacket_blur3.png"

-            panelVisible: false

-        }

-    }

-}

+import QtQuick 2.0
+
+import QtQuick.Shapes 1.11
+
+Item {
+    id: menuAudio
+    visible:false
+    width: 826
+    height: 358
+    property string mode: "normal"
+    
+    function incrementIndex(){
+        audioPanels.incrementIndex()
+    }
+    
+    function decrementIndex(){
+        audioPanels.decrementIndex()
+    }
+    
+    Item{
+        id: audioPanels
+        height: 358
+        
+        property int index: 0
+        
+        function incrementIndex(){
+            index++
+            if(index === 3) index = 0
+            
+            if(index === 0){
+                audioPanel2.slideOut(+1) /*Slide out to right*/
+                audioPanel0.slideIn(+1)  /*Slide in from left*/
+            }else if(index === 1){
+                audioPanel0.slideOut(+1)
+                audioPanel1.slideIn(+1)
+            }else if(index === 2){
+                audioPanel1.slideOut(+1)
+                audioPanel2.slideIn(+1)
+            }
+        }
+        
+        function decrementIndex(){
+            index--
+            if(index === -1) index = 2
+            
+            if(index === 2){
+                audioPanel0.slideOut(-1) /*Slide out to left*/
+                audioPanel2.slideIn(-1)  /*Slide in from right*/
+            }else if(index === 1){
+                audioPanel2.slideOut(-1)
+                audioPanel1.slideIn(-1)
+            }else if(index === 0){
+                audioPanel1.slideOut(-1)
+                audioPanel0.slideIn(-1)
+            }
+        }
+
+        MenuAudioPanel{
+            id:     audioPanel0
+            mode:   menuAudio.mode
+            icon:   "qrc:/Images/ADASView/MENU/jacket1.png"
+            title:  "You Don't Know Me"
+            artist: "Martin Crown"
+            bg:     "qrc:/Images/ADASView/MENU/jacket_blur1.png"
+            panelVisible: true
+       }
+        MenuAudioPanel{
+            id:     audioPanel1
+            mode:   menuAudio.mode
+            icon:   "qrc:/Images/ADASView/MENU/jacket2.png"
+            title:  "LIGHT"
+            artist: "Amelia Sedgwick"
+            bg:     "qrc:/Images/ADASView/MENU/jacket_blur2.png"
+            panelVisible: false
+       }
+        MenuAudioPanel{
+            id:     audioPanel2
+            mode:   menuAudio.mode
+            icon:   "qrc:/Images/ADASView/MENU/jacket3.png"
+            title:  "Ocean Power"
+            artist: "Oceania Poseidon"
+            bg:     "qrc:/Images/ADASView/MENU/jacket_blur3.png"
+            panelVisible: false
+        }
+    }
+}
diff --git a/GUIModel/Menu/MenuContents.qml b/GUIModel/Menu/MenuContents.qml
index 136c790..e35f76e 100644
--- a/GUIModel/Menu/MenuContents.qml
+++ b/GUIModel/Menu/MenuContents.qml
@@ -14,285 +14,280 @@
  * limitations under the License.
  */
 
-import QtQuick 2.0

-import QtGraphicalEffects 1.0

-import QtQuick.Shapes 1.11

-

-

-Item{

-    /* public functions */

-    function open(){

-        menuContentsClear.open()

-    }

-

-    function close(){

-        menuContentsClear.close()

-    }

-

-    function incrementIndex(){

-        if(menuMain.index === 0){

-            menuRadio.incrementIndex()

-        }else if(menuMain.index === 1){

-            menuAdas.incrementIndex()

-        }else if(menuMain.index === 2){

-            menuAudio.incrementIndex()

-        }

-    }

-

-    function decrementIndex(){

-        if(menuMain.index === 0){

-            menuRadio.decrementIndex()

-        }else if(menuMain.index === 1){

-            menuAdas.decrementIndex()

-        }else if(menuMain.index === 2){

-            menuAudio.decrementIndex()

-        }

-    }

-

-    function enter(){

-        if(menuMain.index === 0){

-            /* nop */

-        }else if(menuMain.index === 1){

-            menuAdas.changeEnabled()

-        }else if(menuMain.index === 2){

-            /* nop */

-        }

-    }

-

-    function startAnimationNormalToAdas(){

-        normalToAdasAnimation.start()

-    }

-

-    function startAnimationMapToNormal(){

-        mapToNormalAnimation.start()

-    }

-

-

-    Item{

-        id: menuContentsClear

-        width:826

-        height: 358

-        visible: false

-        x: 52

-        y: 298

-

-        function open(){

-            menuContentsClear.visible = false

-            menuContentsBlur.visible = true

-        }

-

-        function close(){

-            checkVisibleMenuContent()

-

-            menuContentsClear.visible = true

-            menuContentsBlur.visible = false

-        }

-

-        function checkVisibleMenuContent(){

-            if(menuMain.index === 0){//radio

-                menuAudio.visible = false

-                menuAdas.visible = false

-                menuRadio.visible = true

-            }

-            else if(menuMain.index === 1){//adas

-                menuAudio.visible = false

-                menuRadio.visible = false

-                menuAdas.visible = true

-            }

-            else if(menuMain.index === 2){//music

-                menuRadio.visible = false

-                menuAdas.visible = false

-                menuAudio.visible = true

-            }

-            else{

-                //NOP

-            }

-        }

-        

-        MenuAdas {

-            id: menuAdas

-        }

-        

-        MenuAudio {

-            id: menuAudio

-        }

-        

-        MenuRadio {

-            id: menuRadio

-        }

-        

-    }

-    

-    GaussianBlur {

-        id:menuContentsBlur

-        anchors.fill:menuContentsClear

-        source: menuContentsClear

-        deviation: 4

-        radius: 8

-        samples: 16

-        visible: true

-    }

-

-    SequentialAnimation{

-        id:normalToAdasAnimation

-        onStarted: rootItem.focus=false

-        ParallelAnimation{

-            NumberAnimation {

-                target: menuContentsClear

-                property: "opacity"

-                duration: 330

-                from:1

-                to:0

-            }

-

-            NumberAnimation {

-                target: menuContentsBlur

-                property: "opacity"

-                duration: 330

-                from:1

-                to:0

-            }

-        }

-

-        NumberAnimation{

-            target: menuContentsClear

-            property: "x"

-            duration:0

-            from:52

-            to:582

-        }

-        NumberAnimation{

-            target: menuContentsClear

-            property: "y"

-            duration:0

-            from:298

-            to:362

-        }

-

-        PropertyAnimation{

-            target: menuAudio

-            property: "mode"

-            duration:0

-            to:"adas"

-        }

-

-        PropertyAnimation{

-            target: menuRadio

-            property: "mode"

-            duration:0

-            to:"adas"

-        }

-

-        PropertyAnimation{

-            target: menuAdas

-            property: "mode"

-            duration:0

-            to:"adas"

-        }

-

-        PauseAnimation {

-            duration:891

-        }

-

-        ParallelAnimation{

-            NumberAnimation {

-                target: menuContentsClear

-                property: "opacity"

-                duration: 330

-                from:0

-                to:1

-            }

-            NumberAnimation {

-                target: menuContentsBlur

-                property: "opacity"

-                duration: 330

-                from:0

-                to:1

-            }

-        }

-    }

-

-    SequentialAnimation{

-        id:mapToNormalAnimation

-        onStarted: rootItem.focus=false

-

-        PauseAnimation {

-            duration: 254

-        }

-

-        ParallelAnimation{

-            NumberAnimation {

-                target: menuContentsClear

-                property: "opacity"

-                duration: 330

-                from: 1

-                to: 0

-            }

-

-            NumberAnimation {

-                target: menuContentsBlur

-                property: "opacity"

-                duration: 330

-                from: 1

-                to: 0

-            }

-        }

-

-        PauseAnimation {

-            duration: 891

-        }

-

-        NumberAnimation{

-            target: menuContentsClear

-            property: "x"

-            duration: 0

-            from: 582

-            to: 52

-        }

-        NumberAnimation{

-            target: menuContentsClear

-            property: "y"

-            duration: 0

-            from: 362

-            to: 298

-        }

-

-        PropertyAnimation{

-            target: menuAdas

-            property: "mode"

-            duration: 0

-            to: "normal"

-        }

-

-        PropertyAnimation{

-            target: menuRadio

-            property: "mode"

-            duration: 0

-            to: "normal"

-        }

-

-        PropertyAnimation{

-            target: menuAudio

-            property: "mode"

-            duration: 0

-            to: "normal"

-        }

-

-        ParallelAnimation{

-            NumberAnimation {

-                target: menuContentsClear

-                property: "opacity"

-                duration: 330

-                from: 0

-                to: 1

-            }

-            NumberAnimation {

-                target: menuContentsBlur

-                property: "opacity"

-                duration: 330

-                from: 0

-                to: 1

-            }

-        }

-    }

-}

+import QtQuick 2.0
+import "qrc:/MeterEffect"
+
+Item {
+    /* public functions */
+    function open() {
+        menuContentsClear.open();
+    }
+
+    function close() {
+        menuContentsClear.close();
+    }
+
+    function incrementIndex() {
+        if (menuMain.index === 0) {
+            menuRadio.incrementIndex();
+        } else if (menuMain.index === 1) {
+            menuAdas.incrementIndex();
+        } else if (menuMain.index === 2) {
+            menuAudio.incrementIndex();
+        }
+    }
+
+    function decrementIndex() {
+        if (menuMain.index === 0) {
+            menuRadio.decrementIndex();
+        } else if (menuMain.index === 1) {
+            menuAdas.decrementIndex();
+        } else if (menuMain.index === 2) {
+            menuAudio.decrementIndex();
+        }
+    }
+
+    function enter() {
+        if (menuMain.index === 0)
+        /* nop */
+        {} else if (menuMain.index === 1) {
+            menuAdas.changeEnabled();
+        } else if (menuMain.index === 2)
+        /* nop */
+        {}
+    }
+
+    function startAnimationNormalToAdas() {
+        normalToAdasAnimation.start();
+    }
+
+    function startAnimationMapToNormal() {
+        mapToNormalAnimation.start();
+    }
+
+    Item {
+        id: menuContentsClear
+        width: 826
+        height: 358
+        visible: false
+        x: 52
+        y: 298
+
+        function open() {
+            menuContentsClear.visible = false;
+            menuContentsBlur.visible = true;
+        }
+
+        function close() {
+            checkVisibleMenuContent();
+            menuContentsClear.visible = true;
+            menuContentsBlur.visible = false;
+        }
+
+        function checkVisibleMenuContent() {
+            if (menuMain.index === 0) {
+                //radio
+                menuAudio.visible = false;
+                menuAdas.visible = false;
+                menuRadio.visible = true;
+            } else if (menuMain.index === 1) {
+                //adas
+                menuAudio.visible = false;
+                menuRadio.visible = false;
+                menuAdas.visible = true;
+            } else if (menuMain.index === 2) {
+                //music
+                menuRadio.visible = false;
+                menuAdas.visible = false;
+                menuAudio.visible = true;
+            } else
+            //NOP
+            {}
+        }
+
+        MenuAdas {
+            id: menuAdas
+        }
+
+        MenuAudio {
+            id: menuAudio
+        }
+
+        MenuRadio {
+            id: menuRadio
+        }
+    }
+
+    GaussianBlur {
+        id: menuContentsBlur
+        anchors.fill: menuContentsClear
+        source: menuContentsClear
+        deviation: 4
+        radius: 8
+        samples: 16
+        visible: true
+    }
+
+    SequentialAnimation {
+        id: normalToAdasAnimation
+        onStarted: rootItem.focus = false
+        ParallelAnimation {
+            NumberAnimation {
+                target: menuContentsClear
+                property: "opacity"
+                duration: 330
+                from: 1
+                to: 0
+            }
+
+            NumberAnimation {
+                target: menuContentsBlur
+                property: "opacity"
+                duration: 330
+                from: 1
+                to: 0
+            }
+        }
+
+        NumberAnimation {
+            target: menuContentsClear
+            property: "x"
+            duration: 0
+            from: 52
+            to: 582
+        }
+        NumberAnimation {
+            target: menuContentsClear
+            property: "y"
+            duration: 0
+            from: 298
+            to: 362
+        }
+
+        PropertyAnimation {
+            target: menuAudio
+            property: "mode"
+            duration: 0
+            to: "adas"
+        }
+
+        PropertyAnimation {
+            target: menuRadio
+            property: "mode"
+            duration: 0
+            to: "adas"
+        }
+
+        PropertyAnimation {
+            target: menuAdas
+            property: "mode"
+            duration: 0
+            to: "adas"
+        }
+
+        PauseAnimation {
+            duration: 891
+        }
+
+        ParallelAnimation {
+            NumberAnimation {
+                target: menuContentsClear
+                property: "opacity"
+                duration: 330
+                from: 0
+                to: 1
+            }
+            NumberAnimation {
+                target: menuContentsBlur
+                property: "opacity"
+                duration: 330
+                from: 0
+                to: 1
+            }
+        }
+    }
+
+    SequentialAnimation {
+        id: mapToNormalAnimation
+        onStarted: rootItem.focus = false
+
+        PauseAnimation {
+            duration: 254
+        }
+
+        ParallelAnimation {
+            NumberAnimation {
+                target: menuContentsClear
+                property: "opacity"
+                duration: 330
+                from: 1
+                to: 0
+            }
+
+            NumberAnimation {
+                target: menuContentsBlur
+                property: "opacity"
+                duration: 330
+                from: 1
+                to: 0
+            }
+        }
+
+        PauseAnimation {
+            duration: 891
+        }
+
+        NumberAnimation {
+            target: menuContentsClear
+            property: "x"
+            duration: 0
+            from: 582
+            to: 52
+        }
+        NumberAnimation {
+            target: menuContentsClear
+            property: "y"
+            duration: 0
+            from: 362
+            to: 298
+        }
+
+        PropertyAnimation {
+            target: menuAdas
+            property: "mode"
+            duration: 0
+            to: "normal"
+        }
+
+        PropertyAnimation {
+            target: menuRadio
+            property: "mode"
+            duration: 0
+            to: "normal"
+        }
+
+        PropertyAnimation {
+            target: menuAudio
+            property: "mode"
+            duration: 0
+            to: "normal"
+        }
+
+        ParallelAnimation {
+            NumberAnimation {
+                target: menuContentsClear
+                property: "opacity"
+                duration: 330
+                from: 0
+                to: 1
+            }
+            NumberAnimation {
+                target: menuContentsBlur
+                property: "opacity"
+                duration: 330
+                from: 0
+                to: 1
+            }
+        }
+    }
+}
diff --git a/GUIModel/Menu/MenuFrame.qml b/GUIModel/Menu/MenuFrame.qml
index 430439e..27a6402 100644
--- a/GUIModel/Menu/MenuFrame.qml
+++ b/GUIModel/Menu/MenuFrame.qml
@@ -15,9 +15,8 @@
  */
 
 import QtQuick 2.0
-import QtGraphicalEffects 1.0
 
-Item{
+Item {
     /* public properties */
     property alias icon: menuFrame.icon
     property alias txt: menuFrame.txt
@@ -25,25 +24,24 @@ Item{
     property alias mode: menuFrame.mode
 
     /* public functions */
-    function upScroll(){
-        menuFrame.upScroll()
+    function upScroll() {
+        menuFrame.upScroll();
     }
 
-    function downScroll(){
-        menuFrame.downScroll()
+    function downScroll() {
+        menuFrame.downScroll();
     }
 
-    function open(){
-        menuFrame.open()
+    function open() {
+        menuFrame.open();
     }
 
-    function close(){
-        menuFrame.close()
+    function close() {
+        menuFrame.close();
     }
 
-
-    Item{
-        id:menuFrame
+    Item {
+        id: menuFrame
 
         property string icon: ""
         property string txt: ""
@@ -53,212 +51,200 @@ Item{
         property double direction: +1   /* +1:Left -1:Right */
         property int margin: 0
 
-        FontLoader { id: localFont; source: "qrc:/Fonts/Inter-Regular.ttf" }
+        FontLoader {
+            id: localFont
+            source: "qrc:/Fonts/Inter-Regular.ttf"
+        }
 
         onModeChanged: {
-            if(mode === "normal"){
-                direction = +1
-                margin = 0
-            } else if(mode === "adas"){
-                direction = -1
-                margin = 380
+            if (mode === "normal") {
+                direction = +1;
+                margin = 0;
+            } else if (mode === "adas") {
+                direction = -1;
+                margin = 380;
             } else {
-                direction = +1
-                margin = 0
+                direction = +1;
+                margin = 0;
             }
-
-            menuFrame.x = 0
-            menuFrameItem.resetPosition()
+            menuFrame.x = 0;
+            menuFrameItem.resetPosition();
         }
 
-         onPositionChanged: {
-            if(menuFrameItem.isInited === 0){
-                menuFrameItem.resetPosition()
-                menuFrameItem.isInited = 1
+        onPositionChanged: {
+            if (menuFrameItem.isInited === 0) {
+                menuFrameItem.resetPosition();
+                menuFrameItem.isInited = 1;
             }
         }
 
-
-        function upScroll(){
-            if(position === 0){
-                position = 5
-            }
-            else if(position === 1){
-                animationMenuScrollTo0.start()
-                position = 0
-            }
-            else if(position === 2){
-                animationMenuScrollTo1.start()
-                position = 1
-            }
-            else if(position === 3){
-                animationMenuScrollTo2.start()
-                position = 2
-            }
-            else if(position === 4){
-                animationMenuScrollTo3.start()
-                position = 3
-            }
-            else if(position === 5){
-                animationMenuScrollTo4.start()
-                position = 4
+        function upScroll() {
+            if (position === 0) {
+                position = 5;
+            } else if (position === 1) {
+                animationMenuScrollTo0.start();
+                position = 0;
+            } else if (position === 2) {
+                animationMenuScrollTo1.start();
+                position = 1;
+            } else if (position === 3) {
+                animationMenuScrollTo2.start();
+                position = 2;
+            } else if (position === 4) {
+                animationMenuScrollTo3.start();
+                position = 3;
+            } else if (position === 5) {
+                animationMenuScrollTo4.start();
+                position = 4;
             }
         }
 
-        function downScroll(){
-            if(position === 0){
-                animationMenuScrollTo1.start()
-                position = 1
-            }
-            else if(position === 1){
-                animationMenuScrollTo2.start()
-                position = 2
-            }
-            else if(position === 2){
-                animationMenuScrollTo3.start()
-                position = 3
-            }
-            else if(position === 3){
-                animationMenuScrollTo4.start()
-                position = 4
-            }
-            else if(position === 4){
-                position = 5
-            }
-            else if(position === 5){
-                animationMenuScrollTo0.start()
-                position = 0
+        function downScroll() {
+            if (position === 0) {
+                animationMenuScrollTo1.start();
+                position = 1;
+            } else if (position === 1) {
+                animationMenuScrollTo2.start();
+                position = 2;
+            } else if (position === 2) {
+                animationMenuScrollTo3.start();
+                position = 3;
+            } else if (position === 3) {
+                animationMenuScrollTo4.start();
+                position = 4;
+            } else if (position === 4) {
+                position = 5;
+            } else if (position === 5) {
+                animationMenuScrollTo0.start();
+                position = 0;
             }
         }
 
-        function open(){
-            animationMenuOpen.start()
+        function open() {
+            animationMenuOpen.start();
         }
 
-        function close(){
-            animationMenuClose.start()
+        function close() {
+            animationMenuClose.start();
         }
 
-
-        Item{
+        Item {
             id: menuFrameItem
 
-            property double direction: menuFrame.direction
+            property alias direction: menuFrame.direction
             property int margin: menuFrame.margin
             property int isInited: 0
 
-            function resetPosition(){
-                if(position === 0){
-                    menuFrameBgTop.opacity = 1.0
-                    menuFrameBg.width = 460
-                    menuFrameBg.height = 116*0.4
-                    menuIcon.scale = 0.4
-                    menuFrameBg.x = 0
-                    menuIcon.x = 26 * 0.4 * menuFrameItem.direction + menuFrameItem.margin
-                    menuText.scale = 0.4
-                    menuText.x = 122 * 0.4 * menuFrameItem.direction + menuFrameItem.margin
-                    menuFrameItem.opacity = 0
-                    menuFrameItem.x = 100 * menuFrameItem.direction
-                    menuFrameItem.y = -68
+            function resetPosition() {
+                if (position === 0) {
+                    menuFrameBgTop.opacity = 1.0;
+                    menuFrameBg.width = 460;
+                    menuFrameBg.height = 116 * 0.4;
+                    menuIcon.scale = 0.4;
+                    menuFrameBg.x = 0;
+                    menuIcon.x = 26 * 0.4 * menuFrameItem.direction + menuFrameItem.margin;
+                    menuText.scale = 0.4;
+                    menuText.x = 122 * 0.4 * menuFrameItem.direction + menuFrameItem.margin;
+                    menuFrameItem.opacity = 0;
+                    menuFrameItem.x = 100 * menuFrameItem.direction;
+                    menuFrameItem.y = -68;
                 }
-                if(position === 1){
-                    menuFrameBgTop.opacity = 1.0
-                    menuFrameBg.width = 460
-                    menuFrameBg.height = 116*0.5
-                    menuFrameBg.x = 0
-                    menuIcon.scale = 0.5
-                    menuIcon.x = 26 * 0.5 * menuFrameItem.direction + menuFrameItem.margin
-                    menuText.scale = 0.5
-                    menuText.x = 122 * 0.5 * menuFrameItem.direction + menuFrameItem.margin
-                    menuFrameItem.opacity = 1
-                    menuFrameItem.x = 50 * menuFrameItem.direction
-                    menuFrameItem.y = -48
+                if (position === 1) {
+                    menuFrameBgTop.opacity = 1.0;
+                    menuFrameBg.width = 460;
+                    menuFrameBg.height = 116 * 0.5;
+                    menuFrameBg.x = 0;
+                    menuIcon.scale = 0.5;
+                    menuIcon.x = 26 * 0.5 * menuFrameItem.direction + menuFrameItem.margin;
+                    menuText.scale = 0.5;
+                    menuText.x = 122 * 0.5 * menuFrameItem.direction + menuFrameItem.margin;
+                    menuFrameItem.opacity = 1;
+                    menuFrameItem.x = 50 * menuFrameItem.direction;
+                    menuFrameItem.y = -48;
                 }
-                if(position === 2){
-                    menuFrameBgCenter.opacity = 1.0
-                    menuFrameBg.width = 460
-                    menuFrameBg.height = 116
-                    menuFrameBg.x = 0
-                    menuIcon.x = 26 * menuFrameItem.direction + menuFrameItem.margin
-                    menuText.x = 122 * menuFrameItem.direction + menuFrameItem.margin
-                    menuFrameItem.opacity = 1
-                    menuFrameItem.x = 0
-                    menuFrameItem.y = 0
+                if (position === 2) {
+                    menuFrameBgCenter.opacity = 1.0;
+                    menuFrameBg.width = 460;
+                    menuFrameBg.height = 116;
+                    menuFrameBg.x = 0;
+                    menuIcon.x = 26 * menuFrameItem.direction + menuFrameItem.margin;
+                    menuText.x = 122 * menuFrameItem.direction + menuFrameItem.margin;
+                    menuFrameItem.opacity = 1;
+                    menuFrameItem.x = 0;
+                    menuFrameItem.y = 0;
                 }
-
-                if(position === 3){
-                    menuFrameBgBottom.opacity = 1.0
-                    menuFrameBg.width = 460 - 50
-                    menuFrameBg.height = 74
-                    if(menuFrameItem.direction === +1) {
-                        menuFrameBg.x = 0
+                if (position === 3) {
+                    menuFrameBgBottom.opacity = 1.0;
+                    menuFrameBg.width = 460 - 50;
+                    menuFrameBg.height = 74;
+                    if (menuFrameItem.direction === +1) {
+                        menuFrameBg.x = 0;
                     } else {
-                        menuFrameBg.x = 50
+                        menuFrameBg.x = 50;
                     }
-                    menuIcon.scale = (74/116)
-                    menuIcon.x = 26 * (74/116) * menuFrameItem.direction + menuFrameItem.margin
-                    menuText.scale = (74/116)
-                    menuText.x = 122 * (74/116) * menuFrameItem.direction + menuFrameItem.margin
-                    menuFrameItem.opacity = 1
-                    menuFrameItem.x = 100 * menuFrameItem.direction
-                    menuFrameItem.y = 104
+                    menuIcon.scale = (74 / 116);
+                    menuIcon.x = 26 * (74 / 116) * menuFrameItem.direction + menuFrameItem.margin;
+                    menuText.scale = (74 / 116);
+                    menuText.x = 122 * (74 / 116) * menuFrameItem.direction + menuFrameItem.margin;
+                    menuFrameItem.opacity = 1;
+                    menuFrameItem.x = 100 * menuFrameItem.direction;
+                    menuFrameItem.y = 104;
                 }
-                if(position === 4){
-                    menuFrameBgBottom.opacity = 1.0
-                    menuFrameBg.width = 460 - 50
-                    menuFrameBg.height = 116*(0.7)
-                    if(menuFrameItem.direction === +1) {
-                        menuFrameBg.x = 0
+                if (position === 4) {
+                    menuFrameBgBottom.opacity = 1.0;
+                    menuFrameBg.width = 460 - 50;
+                    menuFrameBg.height = 116 * (0.7);
+                    if (menuFrameItem.direction === +1) {
+                        menuFrameBg.x = 0;
                     } else {
-                        menuFrameBg.x = 50
+                        menuFrameBg.x = 50;
                     }
-                    menuIcon.scale = (0.7)
-                    menuIcon.x = 26 * (0.7) * menuFrameItem.direction + menuFrameItem.margin
-                    menuText.scale = (0.7)
-                    menuText.x = 122 * (0.7) *menuFrameItem.direction + menuFrameItem.margin
-                    menuFrameItem.opacity = 0
-                    menuFrameItem.x = 160 * menuFrameItem.direction
-                    menuFrameItem.y = 140
+                    menuIcon.scale = (0.7);
+                    menuIcon.x = 26 * (0.7) * menuFrameItem.direction + menuFrameItem.margin;
+                    menuText.scale = (0.7);
+                    menuText.x = 122 * (0.7) * menuFrameItem.direction + menuFrameItem.margin;
+                    menuFrameItem.opacity = 0;
+                    menuFrameItem.x = 160 * menuFrameItem.direction;
+                    menuFrameItem.y = 140;
                 }
-                if(position === 5){
-                    menuFrameBgBottom.opacity = 1.0
-                    menuFrameBg.width = 460 - 50
-                    menuFrameBg.height = 116*(0.7)
-                    if(menuFrameItem.direction === +1) {
-                        menuFrameBg.x = 0
+                if (position === 5) {
+                    menuFrameBgBottom.opacity = 1.0;
+                    menuFrameBg.width = 460 - 50;
+                    menuFrameBg.height = 116 * (0.7);
+                    if (menuFrameItem.direction === +1) {
+                        menuFrameBg.x = 0;
                     } else {
-                        menuFrameBg.x = 50
+                        menuFrameBg.x = 50;
                     }
-                    menuIcon.scale = (0.7)
-                    menuIcon.x = 26 * (0.7) * menuFrameItem.direction + menuFrameItem.margin
-                    menuText.scale = (0.7)
-                    menuText.x = 122 * (0.7) * menuFrameItem.direction + menuFrameItem.margin
-                    menuFrameItem.opacity = 0
-                    menuFrameItem.x = 160 * menuFrameItem.direction
-                    menuFrameItem.y = 140
+                    menuIcon.scale = (0.7);
+                    menuIcon.x = 26 * (0.7) * menuFrameItem.direction + menuFrameItem.margin;
+                    menuText.scale = (0.7);
+                    menuText.x = 122 * (0.7) * menuFrameItem.direction + menuFrameItem.margin;
+                    menuFrameItem.opacity = 0;
+                    menuFrameItem.x = 160 * menuFrameItem.direction;
+                    menuFrameItem.y = 140;
                 }
             }
 
-
-            Item{
+            Item {
                 id: menuFrameBg
-                x:0
-                y:0
+                x: 0
+                y: 0
                 width: 460
                 height: 116
-                Image{
+                Image {
                     id: menuFrameBgTop
                     anchors.fill: parent
                     source: "qrc:/Images/NormalView/MENU/menu_panel1.png"
                     opacity: 0
                 }
-                Image{
+                Image {
                     id: menuFrameBgCenter
                     anchors.fill: parent
                     source: "qrc:/Images/NormalView/MENU/menu_panel2.png"
                     opacity: 0
                 }
-                Image{
+                Image {
                     id: menuFrameBgBottom
                     anchors.fill: parent
                     source: "qrc:/Images/NormalView/MENU/menu_panel3.png"
@@ -266,10 +252,10 @@ Item{
                 }
             }
 
-            Image{
+            Image {
                 id: menuIcon
-                source:menuFrame.icon
-                x: 26 * direction + margin
+                source: menuFrame.icon
+                x: 26 * parent.direction + parent.margin
                 width: 76
                 height: 90
                 anchors.verticalCenter: menuFrameBg.verticalCenter
@@ -277,79 +263,81 @@ Item{
 
             Text {
                 id: menuText
-                x: 122 * direction + margin
+                x: 122 * parent.direction + parent.margin
                 width: 68
                 height: 26
-                y:46
+                y: 46
                 text: menuFrame.txt
-                font { family: localFont.name; pointSize: 20; capitalization: Font.Capitalize }
+                font {
+                    family: localFont.name
+                    pointSize: 20
+                    capitalization: Font.Capitalize
+                }
                 anchors.verticalCenter: menuFrameBg.verticalCenter
                 color: "white"
-
             }
 
-            MenuFrameScrollTo0{
-                id:animationMenuScrollTo0
+            MenuFrameScrollTo0 {
+                id: animationMenuScrollTo0
                 scrollDuration: 330
             }
 
-            MenuFrameScrollTo1{
-                id:animationMenuScrollTo1
+            MenuFrameScrollTo1 {
+                id: animationMenuScrollTo1
                 scrollDuration: 330
             }
 
             MenuFrameScrollTo2 {
-                id:animationMenuScrollTo2
+                id: animationMenuScrollTo2
                 scrollDuration: 330
             }
 
             MenuFrameScrollTo3 {
-                id:animationMenuScrollTo3
+                id: animationMenuScrollTo3
                 scrollDuration: 330
             }
 
-            MenuFrameScrollTo4{
-                id:animationMenuScrollTo4
+            MenuFrameScrollTo4 {
+                id: animationMenuScrollTo4
                 scrollDuration: 330
             }
 
-
             /* Open */
-            SequentialAnimation{
-                id:animationMenuOpen
+            SequentialAnimation {
+                id: animationMenuOpen
 
-                NumberAnimation{
+                NumberAnimation {
                     target: menuFrame
                     property: "x"
                     to: 360 * menuFrameItem.direction
                     duration: 0
                 }
 
-                PropertyAnimation{
+                PropertyAnimation {
                     target: menuFrame
                     property: "visible"
-                    from:false
+                    from: false
                     to: true
                     duration: 0
                 }
 
                 PauseAnimation {
-                    duration: if(position === 0){
-                                  0
-                              }else if(position === 1){
-                                  48
-                              }else if(position === 2){
-                                  96
-                              }else if(position === 3){
-                                  144
-                              }else if(position === 4){
-                                  0
-                              }else if(position === 5){
-                                  0
-                              }
+                    duration: if (menuFrame.position === 0) {
+                        0;
+                    } else if (menuFrame.position === 1) {
+                        48;
+                    } else if (menuFrame.position === 2) {
+                        96;
+                    } else if (menuFrame.position === 3) {
+                        144;
+                    } else if (menuFrame.position === 4) {
+                        0;
+                    } else if (menuFrame.position === 5) {
+                        0;
+                    }
                 }
 
-                NumberAnimation{
+                NumberAnimation {
                     target: menuFrame
                     property: "x"
                     from: 360 * menuFrameItem.direction
@@ -357,13 +345,12 @@ Item{
                     duration: 260
                     easing.type: Easing.InQuad
                 }
-
             }
 
-            SequentialAnimation{
-                id:animationMenuClose
+            SequentialAnimation {
+                id: animationMenuClose
 
-                NumberAnimation{
+                NumberAnimation {
                     target: menuFrame
                     property: "x"
                     to: 0
@@ -371,22 +358,22 @@ Item{
                 }
 
                 PauseAnimation {
-                    duration: if(position === 0){
-                                  0
-                              }else if(position === 1){
-                                  48
-                              }else if(position === 2){
-                                  96
-                              }else if(position === 3){
-                                  144
-                              }else if(position === 4){
-                                  0
-                              }else if(position === 5){
-                                  0
-                              }
+                    duration: if (position === 0) {
+                        0;
+                    } else if (position === 1) {
+                        48;
+                    } else if (position === 2) {
+                        96;
+                    } else if (position === 3) {
+                        144;
+                    } else if (position === 4) {
+                        0;
+                    } else if (position === 5) {
+                        0;
+                    }
                 }
 
-                NumberAnimation{
+                NumberAnimation {
                     target: menuFrame
                     property: "x"
                     from: 0
@@ -395,7 +382,7 @@ Item{
                     easing.type: Easing.OutQuad
                 }
 
-                PropertyAnimation{
+                PropertyAnimation {
                     target: menuFrame
                     property: "visible"
                     from: true
@@ -403,9 +390,6 @@ Item{
                     duration: 0
                 }
             }
-
         }
-
-
     }
 }
diff --git a/GUIModel/Menu/MenuMain.qml b/GUIModel/Menu/MenuMain.qml
index 8f662c6..3fd7ee7 100644
--- a/GUIModel/Menu/MenuMain.qml
+++ b/GUIModel/Menu/MenuMain.qml
@@ -14,227 +14,227 @@
  * limitations under the License.
  */
 
-import QtQuick 2.0

-import QtGraphicalEffects 1.0

-import QtQuick.Shapes 1.11

-

-Item{

-    id: menuMain

-

-    /* public propeties */

-    readonly property alias index: menuFrames.index

-

-    /* public functions */

-    function incrementIndex(){

-        menuFrames.incrementIndex()

-    }

-

-    function decrementIndex(){

-        menuFrames.decrementIndex()

-    }

-

-    function open(){

-        menuFrames.open()

-    }

-

-    function close(){

-        menuFrames.close()

-    }

-

-    function startAnimationNormalToAdas(){

-        normalToAdasAnimation.start()

-    }

-

-    function startAnimationMapToNormal(){

-        mapToNormalAnimation.start()

-    }

-

-    Item {

-        id: menuFrames

-        x: 326

-        y: 468

-        width: 500; height:280

-        layer.textureMirroring: ShaderEffectSource.MirrorVertically

-        property int index: 0 /* 0:radio 1:ADAS 2:audio */

-        property var mode: "normal" /* normal or adas */

-

-

-        function incrementIndex(){

-            menuFrame0.upScroll()

-            menuFrame1.upScroll()

-            menuFrame2.upScroll()

-            menuFrame3.upScroll()

-            menuFrame4.upScroll()

-            menuFrame5.upScroll()

-

-            index++

-            if(index === 3) index = 0

-        }

-

-        function decrementIndex(){

-            menuFrame0.downScroll()

-            menuFrame1.downScroll()

-            menuFrame2.downScroll()

-            menuFrame3.downScroll()

-            menuFrame4.downScroll()

-            menuFrame5.downScroll()

-

-            index--

-            if(index === -1) index = 2

-        }

-

-        function open(){

-            menuFrame0.open()

-            menuFrame1.open()

-            menuFrame2.open()

-            menuFrame3.open()

-            menuFrame4.open()

-            menuFrame5.open()

-        }

-

-        function close(){

-            menuFrame0.close()

-            menuFrame1.close()

-            menuFrame2.close()

-            menuFrame3.close()

-            menuFrame4.close()

-            menuFrame5.close()

-        }

-

-        MenuFrame{

-            id: menuFrame0

-            position: 0

-            mode: menuFrames.mode

-            icon: "qrc:/Images/NormalView/MENU/ADAS/L_icon_adas.png"

-            txt: "ADAS"

-        }

-

-        MenuFrame{

-            id: menuFrame1

-            position: 1

-            mode: menuFrames.mode

-            icon: "qrc:/Images/NormalView/MENU/MUSIC/L_icon_music.png"

-            txt: "MUSIC"

-        }

-

-        MenuFrame{

-            id: menuFrame2

-            position: 2

-            mode: menuFrames.mode

-            icon: "qrc:/Images/NormalView/MENU/RADIO/L_icon_radio.png"

-            txt: "RADIO"

-        }

-

-        MenuFrame{

-            id: menuFrame3

-            position: 3

-            mode: menuFrames.mode

-            icon: "qrc:/Images/NormalView/MENU/ADAS/L_icon_adas.png"

-            txt: "ADAS"

-        }

-

-        MenuFrame{

-            id: menuFrame4

-            position: 4

-            mode: menuFrames.mode

-            icon: "qrc:/Images/NormalView/MENU/MUSIC/L_icon_music.png"

-            txt: "MUSIC"

-        }

-

-        MenuFrame{

-            id: menuFrame5

-            position: 5

-            mode: menuFrames.mode

-            icon: "qrc:/Images/NormalView/MENU/RADIO/L_icon_radio.png"

-            txt: "RADIO"

-        }

-

-        SequentialAnimation{

-            id:normalToAdasAnimation

-            onStarted: rootItem.focus=false

-            NumberAnimation {

-                target: menuFrames

-                property: "opacity"

-                duration: 330

-                from:1

-                to:0

-            }

-            PauseAnimation {

-                duration:891

-            }

-            PropertyAnimation {

-                target: menuFrames

-                property: "mode"

-                duration: 0

-                to: "adas"

-            }

-            NumberAnimation {

-                target: menuFrames

-                property: "x"

-                duration: 0

-                to:80 + 444

-            }

-            NumberAnimation {

-                target: menuFrames

-                property: "y"

-                duration: 0

-                to:498

-            }

-            NumberAnimation {

-                target: menuFrames

-                property: "opacity"

-                duration: 330

-                from:0

-                to:1

-            }

-        }

-

-        SequentialAnimation{

-            id:mapToNormalAnimation

-            onStarted: rootItem.focus=false

-

-            PauseAnimation {

-                duration: 254

-            }

-            ParallelAnimation{

-                NumberAnimation {

-                    target: menuFrames

-                    property: "opacity"

-                    duration: 330

-                    from:1

-                    to:0

-                }

-                PauseAnimation {

-                    duration:891

-                }

-            }

-

-            PropertyAnimation {

-                target: menuFrames

-                property: "mode"

-                duration: 0

-                to: "normal"

-            }

-            NumberAnimation {

-                target: menuFrames

-                property: "x"

-                duration: 0

-                to:326

-            }

-            NumberAnimation {

-                target: menuFrames

-                property: "y"

-                duration: 0

-                to:468

-            }

-

-            NumberAnimation {

-                target: menuFrames

-                property: "opacity"

-                duration: 330

-                from:0

-                to:1

-            }

-        }

-    }

-}

+import QtQuick 2.0
+
+import QtQuick.Shapes 1.11
+
+Item{
+    id: menuMain
+
+    /* public propeties */
+    readonly property alias index: menuFrames.index
+
+    /* public functions */
+    function incrementIndex(){
+        menuFrames.incrementIndex()
+    }
+
+    function decrementIndex(){
+        menuFrames.decrementIndex()
+    }
+
+    function open(){
+        menuFrames.open()
+    }
+
+    function close(){
+        menuFrames.close()
+    }
+
+    function startAnimationNormalToAdas(){
+        normalToAdasAnimation.start()
+    }
+
+    function startAnimationMapToNormal(){
+        mapToNormalAnimation.start()
+    }
+
+    Item {
+        id: menuFrames
+        x: 326
+        y: 468
+        width: 500; height:280
+        layer.textureMirroring: ShaderEffectSource.MirrorVertically
+        property int index: 0 /* 0:radio 1:ADAS 2:audio */
+        property var mode: "normal" /* normal or adas */
+
+
+        function incrementIndex(){
+            menuFrame0.upScroll()
+            menuFrame1.upScroll()
+            menuFrame2.upScroll()
+            menuFrame3.upScroll()
+            menuFrame4.upScroll()
+            menuFrame5.upScroll()
+
+            index++
+            if(index === 3) index = 0
+        }
+
+        function decrementIndex(){
+            menuFrame0.downScroll()
+            menuFrame1.downScroll()
+            menuFrame2.downScroll()
+            menuFrame3.downScroll()
+            menuFrame4.downScroll()
+            menuFrame5.downScroll()
+
+            index--
+            if(index === -1) index = 2
+        }
+
+        function open(){
+            menuFrame0.open()
+            menuFrame1.open()
+            menuFrame2.open()
+            menuFrame3.open()
+            menuFrame4.open()
+            menuFrame5.open()
+        }
+
+        function close(){
+            menuFrame0.close()
+            menuFrame1.close()
+            menuFrame2.close()
+            menuFrame3.close()
+            menuFrame4.close()
+            menuFrame5.close()
+        }
+
+        MenuFrame{
+            id: menuFrame0
+            position: 0
+            mode: menuFrames.mode
+            icon: "qrc:/Images/NormalView/MENU/ADAS/L_icon_adas.png"
+            txt: "ADAS"
+        }
+
+        MenuFrame{
+            id: menuFrame1
+            position: 1
+            mode: menuFrames.mode
+            icon: "qrc:/Images/NormalView/MENU/MUSIC/L_icon_music.png"
+            txt: "MUSIC"
+        }
+
+        MenuFrame{
+            id: menuFrame2
+            position: 2
+            mode: menuFrames.mode
+            icon: "qrc:/Images/NormalView/MENU/RADIO/L_icon_radio.png"
+            txt: "RADIO"
+        }
+
+        MenuFrame{
+            id: menuFrame3
+            position: 3
+            mode: menuFrames.mode
+            icon: "qrc:/Images/NormalView/MENU/ADAS/L_icon_adas.png"
+            txt: "ADAS"
+        }
+
+        MenuFrame{
+            id: menuFrame4
+            position: 4
+            mode: menuFrames.mode
+            icon: "qrc:/Images/NormalView/MENU/MUSIC/L_icon_music.png"
+            txt: "MUSIC"
+        }
+
+        MenuFrame{
+            id: menuFrame5
+            position: 5
+            mode: menuFrames.mode
+            icon: "qrc:/Images/NormalView/MENU/RADIO/L_icon_radio.png"
+            txt: "RADIO"
+        }
+
+        SequentialAnimation{
+            id:normalToAdasAnimation
+            onStarted: rootItem.focus=false
+            NumberAnimation {
+                target: menuFrames
+                property: "opacity"
+                duration: 330
+                from:1
+                to:0
+            }
+            PauseAnimation {
+                duration:891
+            }
+            PropertyAnimation {
+                target: menuFrames
+                property: "mode"
+                duration: 0
+                to: "adas"
+            }
+            NumberAnimation {
+                target: menuFrames
+                property: "x"
+                duration: 0
+                to:80 + 444
+            }
+            NumberAnimation {
+                target: menuFrames
+                property: "y"
+                duration: 0
+                to:498
+            }
+            NumberAnimation {
+                target: menuFrames
+                property: "opacity"
+                duration: 330
+                from:0
+                to:1
+            }
+        }
+
+        SequentialAnimation{
+            id:mapToNormalAnimation
+            onStarted: rootItem.focus=false
+
+            PauseAnimation {
+                duration: 254
+            }
+            ParallelAnimation{
+                NumberAnimation {
+                    target: menuFrames
+                    property: "opacity"
+                    duration: 330
+                    from:1
+                    to:0
+                }
+                PauseAnimation {
+                    duration:891
+                }
+            }
+
+            PropertyAnimation {
+                target: menuFrames
+                property: "mode"
+                duration: 0
+                to: "normal"
+            }
+            NumberAnimation {
+                target: menuFrames
+                property: "x"
+                duration: 0
+                to:326
+            }
+            NumberAnimation {
+                target: menuFrames
+                property: "y"
+                duration: 0
+                to:468
+            }
+
+            NumberAnimation {
+                target: menuFrames
+                property: "opacity"
+                duration: 330
+                from:0
+                to:1
+            }
+        }
+    }
+}
diff --git a/GUIModel/Menu/MenuRadio.qml b/GUIModel/Menu/MenuRadio.qml
index e13f47d..6c05524 100644
--- a/GUIModel/Menu/MenuRadio.qml
+++ b/GUIModel/Menu/MenuRadio.qml
@@ -14,89 +14,89 @@
  * limitations under the License.
  */
 
-import QtQuick 2.0

-import QtGraphicalEffects 1.0

-import QtQuick.Shapes 1.11

-

-Item {

-    id: menuRadio

-    visible:false

-    width: 826

-    height: 358

-    property string mode: "normal"

-    

-    function incrementIndex(){

-        radioPanels.incrementIndex()

-    }

-    

-    function decrementIndex(){

-        radioPanels.decrementIndex()

-    }

-    

-    Item{

-        id:radioPanels

-        

-        property int index: 0

-        

-        function incrementIndex(){

-            index++

-            if(index === 3) index = 0

-            

-            if(index === 0){

-                radioPanel2.slideOut(+1) /*Slide out to right*/

-                radioPanel0.slideIn(+1)  /*Slide in from left*/

-            }else if(index === 1){

-                radioPanel0.slideOut(+1)

-                radioPanel1.slideIn(+1)

-            }else if(index === 2){

-                radioPanel1.slideOut(+1)

-                radioPanel2.slideIn(+1)

-            }

-        }

-        

-        function decrementIndex(){

-            index--

-            if(index === -1) index = 2

-            

-            if(index === 2){

-                radioPanel0.slideOut(-1) /*Slide out to left*/

-                radioPanel2.slideIn(-1)  /*Slide in from right*/

-            }else if(index === 1){

-                radioPanel2.slideOut(-1)

-                radioPanel1.slideIn(-1)

-            }else if(index === 0){

-                radioPanel1.slideOut(-1)

-                radioPanel0.slideIn(-1)

-            }

-        }

-        

-        

-        MenuRadioPanel{

-            id:      radioPanel0

-            mode:    menuRadio.mode

-            icon:    "qrc:/Images/ADASView/MENU/radio_icon_FM.png"

-            title:   "InterFM"

-            channel: "89.7MHz"

-            bg:      "qrc:/Images/ADASView/MENU/radio_blur_FM.png"

-            panelVisible: true

-        }

-        MenuRadioPanel{

-            id:      radioPanel1

-            mode:    menuRadio.mode

-            icon:    "qrc:/Images/ADASView/MENU/radio_icon_FM.png"

-            title:   "J-WAVE"

-            channel: "81.3MHz"

-            bg:      "qrc:/Images/ADASView/MENU/radio_blur_FM.png"

-            panelVisible: false

-        }

-        MenuRadioPanel{

-            id:      radioPanel2

-            mode:    menuRadio.mode

-            icon:    "qrc:/Images/ADASView/MENU/radio_icon_AM.png"

-            title:   "TBS Radio"

-            channel: "954kHz"

-            bg:      "qrc:/Images/ADASView/MENU/radio_blur_AM.png"

-            panelVisible: false

-        }

-    }

-}

+import QtQuick 2.0
+
+import QtQuick.Shapes 1.11
+
+Item {
+    id: menuRadio
+    visible:false
+    width: 826
+    height: 358
+    property string mode: "normal"
+    
+    function incrementIndex(){
+        radioPanels.incrementIndex()
+    }
+    
+    function decrementIndex(){
+        radioPanels.decrementIndex()
+    }
+    
+    Item{
+        id:radioPanels
+        
+        property int index: 0
+        
+        function incrementIndex(){
+            index++
+            if(index === 3) index = 0
+            
+            if(index === 0){
+                radioPanel2.slideOut(+1) /*Slide out to right*/
+                radioPanel0.slideIn(+1)  /*Slide in from left*/
+            }else if(index === 1){
+                radioPanel0.slideOut(+1)
+                radioPanel1.slideIn(+1)
+            }else if(index === 2){
+                radioPanel1.slideOut(+1)
+                radioPanel2.slideIn(+1)
+            }
+        }
+        
+        function decrementIndex(){
+            index--
+            if(index === -1) index = 2
+            
+            if(index === 2){
+                radioPanel0.slideOut(-1) /*Slide out to left*/
+                radioPanel2.slideIn(-1)  /*Slide in from right*/
+            }else if(index === 1){
+                radioPanel2.slideOut(-1)
+                radioPanel1.slideIn(-1)
+            }else if(index === 0){
+                radioPanel1.slideOut(-1)
+                radioPanel0.slideIn(-1)
+            }
+        }
+        
+        
+        MenuRadioPanel{
+            id:      radioPanel0
+            mode:    menuRadio.mode
+            icon:    "qrc:/Images/ADASView/MENU/radio_icon_FM.png"
+            title:   "InterFM"
+            channel: "89.7MHz"
+            bg:      "qrc:/Images/ADASView/MENU/radio_blur_FM.png"
+            panelVisible: true
+        }
+        MenuRadioPanel{
+            id:      radioPanel1
+            mode:    menuRadio.mode
+            icon:    "qrc:/Images/ADASView/MENU/radio_icon_FM.png"
+            title:   "J-WAVE"
+            channel: "81.3MHz"
+            bg:      "qrc:/Images/ADASView/MENU/radio_blur_FM.png"
+            panelVisible: false
+        }
+        MenuRadioPanel{
+            id:      radioPanel2
+            mode:    menuRadio.mode
+            icon:    "qrc:/Images/ADASView/MENU/radio_icon_AM.png"
+            title:   "TBS Radio"
+            channel: "954kHz"
+            bg:      "qrc:/Images/ADASView/MENU/radio_blur_AM.png"
+            panelVisible: false
+        }
+    }
+}
diff --git a/GUIModel/Menu/MenuShade.qml b/GUIModel/Menu/MenuShade.qml
index c3b9aa5..61825d7 100644
--- a/GUIModel/Menu/MenuShade.qml
+++ b/GUIModel/Menu/MenuShade.qml
@@ -14,146 +14,146 @@
  * limitations under the License.
  */
 
-import QtQuick 2.0

-import QtGraphicalEffects 1.0

-import QtQuick.Shapes 1.11

-

-Item{

-    /* public function */

-    function startAnimationNormalToAdas(){

-        normalToAdasAnimation.start()

-    }

-

-    function startAnimationMapToNormal(){

-        mapToNormalAnimation.start()

-    }

-

-    Item{

-        id: menuShades

-        Item{

-            id: menuShadeNormal

-            visible: true

-

-            Image{

-                source: "qrc:/Images/NormalView/MENU/menu_shade.png"

-                x: 522

-                y: 390

-                width: 444

-                height: 330

-            }

-

-            Rectangle{

-                color: "black"

-                x: 960

-                y: 390

-                width: 300

-                height: 300

-            }

-        }

-

-        Item{

-            id: menuShadeAdas

-            visible: false

-

-            Image{

-                source: "qrc:/Images/ADASView/MENU/menu_shade.png"

-                x: 436

-                y: 360

-                width: 444

-                height: 332

-

-            }

-

-            Rectangle{

-                color: "black"

-                x: 100

-                y: 400

-                width: 440

-                height: 300

-            }

-        }

-

-        SequentialAnimation{

-            id:normalToAdasAnimation

-            onStarted: rootItem.focus=false

-            NumberAnimation {

-                target: menuShades

-                property: "opacity"

-                duration: 330

-                from:1

-                to:  0

-            }

-            PropertyAnimation{

-                target: menuShadeNormal

-                property: "visible"

-                duration: 0

-                from: true

-                to: false

-            }

-            PropertyAnimation{

-                target: menuShadeAdas

-                property:"visible"

-                duration: 0

-                from: false

-                to: true

-            }

-

-            PauseAnimation {

-                duration: 891

-            }

-

-            NumberAnimation {

-                target: menuShades

-                property: "opacity"

-                duration: 330

-                from: 0

-                to: 1

-            }

-        }

-

-

-        SequentialAnimation{

-            id: mapToNormalAnimation

-            onStarted: rootItem.focus=false

-

-            PauseAnimation {

-                duration: 254

-            }

-

-            NumberAnimation {

-                target: menuShades

-                property: "opacity"

-                duration: 330

-                from: 1

-                to: 0

-            }

-            PropertyAnimation{

-                target: menuShadeNormal

-                property: "visible"

-                duration: 0

-                from: false

-                to: true

-            }

-            PropertyAnimation{

-                target: menuShadeAdas

-                property: "visible"

-                duration: 0

-                from: true

-                to: false

-            }

-

-            PauseAnimation {

-                duration: 891

-            }

-

-            NumberAnimation {

-                target: menuShades

-                property: "opacity"

-                duration: 330

-                from: 0

-                to: 1

-            }

-        }

-    }

-

-}

+import QtQuick 2.0
+
+import QtQuick.Shapes 1.11
+
+Item{
+    /* public function */
+    function startAnimationNormalToAdas(){
+        normalToAdasAnimation.start()
+    }
+
+    function startAnimationMapToNormal(){
+        mapToNormalAnimation.start()
+    }
+
+    Item{
+        id: menuShades
+        Item{
+            id: menuShadeNormal
+            visible: true
+
+            Image{
+                source: "qrc:/Images/NormalView/MENU/menu_shade.png"
+                x: 522
+                y: 390
+                width: 444
+                height: 330
+            }
+
+            Rectangle{
+                color: "black"
+                x: 960
+                y: 390
+                width: 300
+                height: 300
+            }
+        }
+
+        Item{
+            id: menuShadeAdas
+            visible: false
+
+            Image{
+                source: "qrc:/Images/ADASView/MENU/menu_shade.png"
+                x: 436
+                y: 360
+                width: 444
+                height: 332
+
+            }
+
+            Rectangle{
+                color: "black"
+                x: 100
+                y: 400
+                width: 440
+                height: 300
+            }
+        }
+
+        SequentialAnimation{
+            id:normalToAdasAnimation
+            onStarted: rootItem.focus=false
+            NumberAnimation {
+                target: menuShades
+                property: "opacity"
+                duration: 330
+                from:1
+                to:  0
+            }
+            PropertyAnimation{
+                target: menuShadeNormal
+                property: "visible"
+                duration: 0
+                from: true
+                to: false
+            }
+            PropertyAnimation{
+                target: menuShadeAdas
+                property:"visible"
+                duration: 0
+                from: false
+                to: true
+            }
+
+            PauseAnimation {
+                duration: 891
+            }
+
+            NumberAnimation {
+                target: menuShades
+                property: "opacity"
+                duration: 330
+                from: 0
+                to: 1
+            }
+        }
+
+
+        SequentialAnimation{
+            id: mapToNormalAnimation
+            onStarted: rootItem.focus=false
+
+            PauseAnimation {
+                duration: 254
+            }
+
+            NumberAnimation {
+                target: menuShades
+                property: "opacity"
+                duration: 330
+                from: 1
+                to: 0
+            }
+            PropertyAnimation{
+                target: menuShadeNormal
+                property: "visible"
+                duration: 0
+                from: false
+                to: true
+            }
+            PropertyAnimation{
+                target: menuShadeAdas
+                property: "visible"
+                duration: 0
+                from: true
+                to: false
+            }
+
+            PauseAnimation {
+                duration: 891
+            }
+
+            NumberAnimation {
+                target: menuShades
+                property: "opacity"
+                duration: 330
+                from: 0
+                to: 1
+            }
+        }
+    }
+
+}
diff --git a/GUIModel/Meter/ChargeGuage.qml b/GUIModel/Meter/ChargeGuage.qml
index 038df02..ad0c5ac 100644
--- a/GUIModel/Meter/ChargeGuage.qml
+++ b/GUIModel/Meter/ChargeGuage.qml
@@ -15,14 +15,14 @@
  */
 
 import QtQuick 2.14
-import QtGraphicalEffects 1.14
+import "qrc:/MeterEffect/"
 
 Item {
     id: chargeGuage
-    x:666
-    y:97
-    width:588
-    height:588
+    x: 666
+    y: 97
+    width: 588
+    height: 588
     property real chargeValue
 
     readonly property real chargeGuageMax: 100
@@ -30,40 +30,40 @@ Item {
 
     onChargeValueChanged: {
         limitChargeValue();
-        effectChr.angleBase = (-0.45 * chargeValue*Math.PI/180)+effectChr.angle
+        effectChr.angleBase = (-0.45 * chargeValue * Math.PI / 180) + effectChr.angle;
     }
 
-    Connections{
+    Connections {
         target: rootItem
-        onTransNormalToAdas:{
-            normalToAdasAnimation.start()
+        onTransNormalToAdas: {
+            normalToAdasAnimation.start();
         }
     }
 
-    function limitChargeValue(){
-        if(chargeValue > chargeGuageMax){
-            chargeValue = chargeGuageMax
-        }else if(chargeValue < chargeGuageMin){
-            chargeValue = chargeGuageMin
+    function limitChargeValue() {
+        if (chargeValue > chargeGuageMax) {
+            chargeValue = chargeGuageMax;
+        } else if (chargeValue < chargeGuageMin) {
+            chargeValue = chargeGuageMin;
         }
     }
 
-    Item{
+    Item {
         id: chrGuageGroup
-        width:588
-        height:588
+        width: 588
+        height: 588
         Item {
             id: chrGuage
-            width:588
-            height:588
+            width: 588
+            height: 588
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.verticalCenter: parent.verticalCenter
             visible: false
-            Image{
+            Image {
                 id: chrGuageImg
                 source: "qrc:/Images/NormalView/METER/charge_guage.ktx"
-                width:588
-                height:588
+                width: 588
+                height: 588
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.verticalCenter: parent.verticalCenter
                 visible: true
@@ -71,119 +71,123 @@ Item {
             Image {
                 id: chrEffect
                 source: ""
-                width:588
-                height:588
+                width: 588
+                height: 588
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.verticalCenter: parent.verticalCenter
                 visible: true
             }
         }
-        ShaderEffect{
+        ShaderEffect {
             id: effectChr
             anchors.fill: parent
             visible: true
             blending: true
             supportsAtlasTextures: true
-            property real angleBase: -pi*1/2
-            property real angle:-pi*1/2
-            property var src: ShaderEffectSource{
+            property real angleBase: -pi * 1 / 2
+            property real angle: -pi * 1 / 2
+            property var src: ShaderEffectSource {
                 sourceItem: chrGuage
                 live: false
             }
 
             readonly property real pi: 3.1415926535
 
-            vertexShader: "qrc:/Shaders/vert/guageMask.vert"
-            fragmentShader:"qrc:/Shaders/frag/guageMask.frag"
+            vertexShader: ShaderPath.guageMaskVert
+            fragmentShader: ShaderPath.guageMaskFrag
         }
     }
-    SequentialAnimation{
+    SequentialAnimation {
         id: normalToAdasAnimation
-        onStarted: rootItem.focus=false
-        SequentialAnimation{
-            NumberAnimation{
+        onStarted: rootItem.focus = false
+        SequentialAnimation {
+            NumberAnimation {
                 target: chrGuageGroup
                 property: "opacity"
                 duration: 330
                 easing.type: Easing.InOutSine
-                from:1.0
-                to:0.0
+                from: 1.0
+                to: 0.0
             }
-            PropertyAnimation{
+            PropertyAnimation {
                 target: chrGuageGroup
                 property: "visible"
                 duration: 0
                 easing.type: Easing.InOutSine
-                from:true
-                to:false
+                from: true
+                to: false
             }
         }
-        
-        ParallelAnimation{
+
+        ParallelAnimation {
             /* down size */
-            NumberAnimation{
+            NumberAnimation {
                 target: chargeGuage
                 property: "scale"
                 duration: 891
                 easing.type: meterParts.easing
-                from:1
-                to:0.75
+                from: 1
+                to: 0.75
             }
-            
+
             /* translation */
-            PathAnimation{
+            PathAnimation {
                 target: chargeGuage
-                anchorPoint: Qt.point(chargeGuage.width/2, chargeGuage.height/2)
+                anchorPoint: Qt.point(chargeGuage.width / 2, chargeGuage.height / 2)
                 orientation: PathAnimation.Fixed
                 duration: 891
                 easing.type: meterParts.easing
-                
+
                 path: Path {
-                    startX: 960; startY: 391
-                    PathLine { x: 540; y: 402 }
+                    startX: 960
+                    startY: 391
+                    PathLine {
+                        x: 540
+                        y: 402
+                    }
                 }
             }
-            PropertyAnimation{
+            PropertyAnimation {
                 target: chrGuageImg
                 property: "source"
                 to: "qrc:/Images/ADASView/METER/chr_wave.png"
                 duration: 0
             }
-            PropertyAnimation{
+            PropertyAnimation {
                 target: chrEffect
                 property: "source"
                 to: "qrc:/Images/ADASView/METER/chr_glow.png"
                 duration: 0
             }
         }
-        PauseAnimation{
+        PauseAnimation {
             duration: 396
         }
-        PropertyAnimation{
+        PropertyAnimation {
             target: chrGuageGroup
             property: "visible"
             to: true
             duration: 0
         }
-        PropertyAnimation{
+        PropertyAnimation {
             target: chrGuageGroup
             property: "opacity"
             to: 1
             duration: 198
         }
     }
-    
-    SequentialAnimation{
+
+    SequentialAnimation {
         id: mapToNormalAnimation
-        onStarted: rootItem.focus=false
-        onStopped: rootItem.focus=true
-        PropertyAnimation{
+        onStarted: rootItem.focus = false
+        onStopped: rootItem.focus = true
+        PropertyAnimation {
             target: chrGuageGroup
             property: "opacity"
             to: 0
             duration: 198
         }
-        PropertyAnimation{
+        PropertyAnimation {
             target: chrGuageGroup
             property: "visible"
             to: true
@@ -192,63 +196,66 @@ Item {
         PauseAnimation {
             duration: 254 + 330
         }
-        
-        
-        ParallelAnimation{
+
+        ParallelAnimation {
             /* scaling */
-            NumberAnimation{
+            NumberAnimation {
                 target: chargeGuage
                 property: "scale"
                 duration: 891
                 easing.type: meterParts.easing
-                from:0.75
-                to:1.0
+                from: 0.75
+                to: 1.0
             }
-            
+
             /* slide */
-            PathAnimation{
+            PathAnimation {
                 target: chargeGuage
-                anchorPoint: Qt.point(chargeGuage.width/2, chargeGuage.height/2)
+                anchorPoint: Qt.point(chargeGuage.width / 2, chargeGuage.height / 2)
                 orientation: PathAnimation.Fixed
                 duration: 891
                 easing.type: meterParts.easing
-                
+
                 path: Path {
-                    startX: 540; startY: 402
-                    PathLine { x: 960; y: 391 }
+                    startX: 540
+                    startY: 402
+                    PathLine {
+                        x: 960
+                        y: 391
+                    }
                 }
             }
-            PropertyAnimation{
+            PropertyAnimation {
                 target: chrGuageImg
                 property: "source"
                 to: "qrc:/Images/NormalView/METER/charge_guage.ktx"
                 duration: 0
             }
-            PropertyAnimation{
+            PropertyAnimation {
                 target: chrEffect
                 property: "source"
                 to: ""
                 duration: 0
             }
         }
-        
-        SequentialAnimation{
-            PropertyAnimation{
+
+        SequentialAnimation {
+            PropertyAnimation {
                 target: chrGuageGroup
                 property: "visible"
                 duration: 0
                 easing.type: Easing.InOutSine
-                from:false
-                to:true
+                from: false
+                to: true
             }
-            
-            NumberAnimation{
+
+            NumberAnimation {
                 target: chrGuageGroup
                 property: "opacity"
                 duration: 330
                 easing.type: Easing.InOutSine
-                from:0.0
-                to:1.0
+                from: 0.0
+                to: 1.0
             }
         }
         PauseAnimation {
diff --git a/GUIModel/Meter/DigitalSpeed.qml b/GUIModel/Meter/DigitalSpeed.qml
index 7d9534b..1cbf56a 100644
--- a/GUIModel/Meter/DigitalSpeed.qml
+++ b/GUIModel/Meter/DigitalSpeed.qml
@@ -15,7 +15,7 @@
  */
 
 import QtQuick 2.14
-import QtGraphicalEffects 1.14
+
 
 Item{
     id: digitalSpeed
diff --git a/GUIModel/Meter/Mask.qml b/GUIModel/Meter/Mask.qml
index 56a7497..31dcb47 100644
--- a/GUIModel/Meter/Mask.qml
+++ b/GUIModel/Meter/Mask.qml
@@ -15,7 +15,7 @@
  */
 
 import QtQuick 2.14
-import QtGraphicalEffects 1.14
+
 
 Item{
     id:mask
diff --git a/GUIModel/Meter/Meter.qml b/GUIModel/Meter/Meter.qml
index 7c2d5dd..d79d36f 100644
--- a/GUIModel/Meter/Meter.qml
+++ b/GUIModel/Meter/Meter.qml
@@ -15,75 +15,71 @@
  */
 
 import QtQuick 2.14
-import QtGraphicalEffects 1.14
 
 Item {
     id: meter
     property real speedValue: 0
     property real tachoValue: 0
-    property real chargeValue:100
+    property real chargeValue: 100
 
     onSpeedValueChanged: {
-        speedGuage.speedValue = speedValue
-        speedNeedle.speedValue = speedValue
-        digitalSpeed.speedValue = speedValue
+        speedGuage.speedValue = speedValue;
+        speedNeedle.speedValue = speedValue;
+        digitalSpeed.speedValue = speedValue;
     }
 
     onTachoValueChanged: {
-        tachometer.tachoValue = tachoValue
+        tachometer.tachoValue = tachoValue;
     }
     onChargeValueChanged: {
-        chargeGuage.chargeValue = chargeValue
+        chargeGuage.chargeValue = chargeValue;
     }
 
-
     Item {
-       id: meterParts
-       property var easing: Easing.InOutQuad
-
-       Connections{
-           target: rootItem
-           onTransNormalToAdas:{
-               / *nop */
-           }
-       }
-
-       Sideline {
-           id: sideline
-       }
-
-       Ring {
-           id: ring
-       }
-
-       ChargeGuage {
-           id: chargeGuage
-       }
-
-       SpeedGuage {
-           id: speedGuage
-       }
-
-       SpeedNeedle {
-           id: speedNeedle
-       }
-
-       Tachometer {
-           id: tachometer
-       }
-
-       Ready {
-           id: ready
-       }
-
-       Mask {
-           id: mask
-       }
-
-       DigitalSpeed {
-           id: digitalSpeed
-       }
+        id: meterParts
+        property var easing: Easing.InOutQuad
+
+        Connections {
+            target: rootItem
+            onTransNormalToAdas: {
+                / *nop */;
+            }
+        }
+
+        Sideline {
+            id: sideline
+        }
+
+        Ring {
+            id: ring
+        }
+
+        ChargeGuage {
+            id: chargeGuage
+        }
+
+        SpeedGuage {
+            id: speedGuage
+        }
+
+        SpeedNeedle {
+            id: speedNeedle
+        }
+
+        Tachometer {
+            id: tachometer
+        }
+
+        Ready {
+            id: ready
+        }
+
+        Mask {
+            id: mask
+        }
+
+        DigitalSpeed {
+            id: digitalSpeed
+        }
     }
 }
-
-
diff --git a/GUIModel/Meter/Ready.qml b/GUIModel/Meter/Ready.qml
index fd2bde0..11f1a11 100644
--- a/GUIModel/Meter/Ready.qml
+++ b/GUIModel/Meter/Ready.qml
@@ -15,7 +15,7 @@
  */
 
 import QtQuick 2.14
-import QtGraphicalEffects 1.14
+
 
 Item {
     id: ready
diff --git a/GUIModel/Meter/Ring.qml b/GUIModel/Meter/Ring.qml
index c41188b..abc34f2 100644
--- a/GUIModel/Meter/Ring.qml
+++ b/GUIModel/Meter/Ring.qml
@@ -15,7 +15,7 @@
  */
 
 import QtQuick 2.14
-import QtGraphicalEffects 1.14
+
 
 Item {
     id: ring
diff --git a/GUIModel/Meter/Sideline.qml b/GUIModel/Meter/Sideline.qml
index 0da9931..fe903a6 100644
--- a/GUIModel/Meter/Sideline.qml
+++ b/GUIModel/Meter/Sideline.qml
@@ -15,138 +15,144 @@
  */
 
 import QtQuick 2.14
-import QtGraphicalEffects 1.14
 
 Item {
     id: sideline
     width: 1780
     height: 1780
-    x:70
-    y:-499
-    
-    Connections{
+    x: 70
+    y: -499
+
+    Connections {
         target: rootItem
-        onTransNormalToAdas:{
-            normalToAdasAnimation.start()
+        onTransNormalToAdas: {
+            normalToAdasAnimation.start();
         }
     }
 
-    Image{
-        id:meterLineR
+    Image {
+        id: meterLineR
         source: "qrc:/Images/NormalView/METER/meter_line_r.ktx"
-        x:980
-        y:0
-        width:800
-        height:636
+        x: 980
+        y: 0
+        width: 800
+        height: 636
         anchors.verticalCenter: parent.verticalCenter
         anchors.right: parent.right
         anchors.rightMargin: 0
     }
-    
-    Image{
-        id:meterLineL
+
+    Image {
+        id: meterLineL
         source: "qrc:/Images/NormalView/METER/meter_line_l.ktx"
-        y:0
-        width:800
-        height:636
+        y: 0
+        width: 800
+        height: 636
         anchors.verticalCenter: parent.verticalCenter
         anchors.left: parent.left
         anchors.leftMargin: 0
     }
-    
+
     transform: Rotation {
-        id:sidelineRotation
-        origin.x: sideline.width/2;
-        origin.y: sideline.height/2;
+        id: sidelineRotation
+        origin.x: sideline.width / 2
+        origin.y: sideline.height / 2
         angle: 0
     }
-    
-    SequentialAnimation{
+
+    SequentialAnimation {
         id: normalToAdasAnimation
-        onStarted: rootItem.focus=false
+        onStarted: rootItem.focus = false
         PauseAnimation {
             duration: 330
         }
-        
-        ParallelAnimation{
+
+        ParallelAnimation {
             /* down size */
-            NumberAnimation{
+            NumberAnimation {
                 target: sideline
                 property: "scale"
                 duration: 891
                 easing.type: meterParts.easing
-                from:1
-                to:0.75
+                from: 1
+                to: 0.75
             }
-            
+
             /* rotation */
-            PropertyAnimation{
+            PropertyAnimation {
                 target: sidelineRotation
                 property: "angle"
                 duration: 891
                 easing.type: meterParts.easing
-                from:0
-                to:-90
+                from: 0
+                to: -90
             }
-            
+
             /* translation */
-            PathAnimation{
+            PathAnimation {
                 target: sideline
-                anchorPoint: Qt.point(sideline.width/2, sideline.height/2)
+                anchorPoint: Qt.point(sideline.width / 2, sideline.height / 2)
                 orientation: PathAnimation.Fixed
                 duration: 891
                 easing.type: meterParts.easing
-                
+
                 path: Path {
-                    startX: 960; startY: 391
-                    PathLine { x: 540; y: 402 }
+                    startX: 960
+                    startY: 391
+                    PathLine {
+                        x: 540
+                        y: 402
+                    }
                 }
             }
         }
     }
-    
-    SequentialAnimation{
+
+    SequentialAnimation {
         id: mapToNormalAnimation
-        onStarted: rootItem.focus=false
+        onStarted: rootItem.focus = false
         PauseAnimation {
             duration: 254 + 330
         }
-        
-        ParallelAnimation{
+
+        ParallelAnimation {
             /* down size */
-            NumberAnimation{
+            NumberAnimation {
                 target: sideline
                 property: "scale"
                 duration: 891
                 easing.type: meterParts.easing
-                from:0.75
-                to:1.0
+                from: 0.75
+                to: 1.0
             }
-            
+
             /* rotation */
-            PropertyAnimation{
+            PropertyAnimation {
                 target: sidelineRotation
                 property: "angle"
                 duration: 891
                 easing.type: meterParts.easing
-                from:-90
-                to:0
+                from: -90
+                to: 0
             }
-            
+
             /* translation */
-            PathAnimation{
+            PathAnimation {
                 target: sideline
-                anchorPoint: Qt.point(sideline.width/2, sideline.height/2)
+                anchorPoint: Qt.point(sideline.width / 2, sideline.height / 2)
                 orientation: PathAnimation.Fixed
                 duration: 891
                 easing.type: meterParts.easing
-                
+
                 path: Path {
-                    startX: 540; startY: 402
-                    PathLine { x: 960; y: 391 }
+                    startX: 540
+                    startY: 402
+                    PathLine {
+                        x: 960
+                        y: 391
+                    }
                 }
             }
         }
     }
-    
 }
diff --git a/GUIModel/Meter/SpeedGuage.qml b/GUIModel/Meter/SpeedGuage.qml
index 6667cad..c268f61 100644
--- a/GUIModel/Meter/SpeedGuage.qml
+++ b/GUIModel/Meter/SpeedGuage.qml
@@ -15,15 +15,15 @@
  */
 
 import QtQuick 2.14
-import QtGraphicalEffects 1.14
 import QtQuick.Shapes 1.14
+import "qrc:/MeterEffect/"
 
 Item {
     id: speedGuage
-    x:666
-    y:97
-    width:588
-    height:588
+    x: 666
+    y: 97
+    width: 588
+    height: 588
     property real speedValue
 
     readonly property real speedGuageMax: 100
@@ -31,85 +31,84 @@ Item {
 
     onSpeedValueChanged: {
         limitSpeedValue();
-        effectPwr.angle = (2.25 * speedValue*Math.PI/180)+effectPwr.angleBase
+        effectPwr.angle = (2.25 * speedValue * Math.PI / 180) + effectPwr.angleBase;
     }
 
-    Connections{
+    Connections {
         target: rootItem
-        onTransNormalToAdas:{
-            normalToAdasAnimation.start()
+        onTransNormalToAdas: {
+            normalToAdasAnimation.start();
         }
     }
 
-    function limitSpeedValue(){
-        if(speedGuageMax < speedValue){
-            speedValue = speedGuageMax
-        }else if(speedValue < speedGuageMin){
-            speedValue = speedGuageMin
+    function limitSpeedValue() {
+        if (speedGuageMax < speedValue) {
+            speedValue = speedGuageMax;
+        } else if (speedValue < speedGuageMin) {
+            speedValue = speedGuageMin;
         }
     }
 
     /* Guage - visible in Normal mode */
     Item {
-        id:pwrGuageGroup
-        width:588
-        height:588
-        
-        Image{
-            id:pwrGuage
+        id: pwrGuageGroup
+        width: 588
+        height: 588
+
+        Image {
+            id: pwrGuage
             source: "qrc:/Images/NormalView/METER/pwr_guage.png"
-            width:588
-            height:588
+            width: 588
+            height: 588
 
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.verticalCenter: parent.verticalCenter
             opacity: 1
             visible: false
         }
-        ShaderEffect{
+        ShaderEffect {
             id: effectPwr
             anchors.fill: parent
             visible: true
             blending: true
             supportsAtlasTextures: true
-            property real angleBase: -pi*1/2
-            property real angle:-pi*1/2
-            property var src: ShaderEffectSource{
+            property real angleBase: -pi * 1 / 2
+            property real angle: -pi * 1 / 2
+            property var src: ShaderEffectSource {
                 sourceItem: pwrGuage
                 live: false
             }
 
             readonly property real pi: 3.1415926535
 
-            vertexShader: "qrc:/Shaders/vert/guageMask.vert"
-            fragmentShader:"qrc:/Shaders/frag/guageMask.frag"
+            vertexShader: ShaderPath.guageMaskVert
+            fragmentShader: ShaderPath.guageMaskFrag
         }
     }
-    
-    
-    Image{
-        id:ringLine
+
+    Image {
+        id: ringLine
         source: "qrc:/Images/NormalView/METER/ring_line.ktx"
-        width:588
-        height:588
+        width: 588
+        height: 588
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.verticalCenter: parent.verticalCenter
     }
-    
-    Image{
-        id:speedTxt
+
+    Image {
+        id: speedTxt
         source: "qrc:/Images/NormalView/SPEED/speed_txt.png"
-        width:588
-        height:588
+        width: 588
+        height: 588
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.verticalCenter: parent.verticalCenter
     }
-    
-    Image{
-        id:ring5
+
+    Image {
+        id: ring5
         source: "qrc:/Images/NormalView/METER/ring5.png"
         width: 34
-        height:24
+        height: 24
         anchors.left: parent.left
         anchors.leftMargin: -11
         anchors.verticalCenter: parent.verticalCenter
diff --git a/GUIModel/Meter/SpeedNeedle.qml b/GUIModel/Meter/SpeedNeedle.qml
index b2153ae..f04ecfa 100644
--- a/GUIModel/Meter/SpeedNeedle.qml
+++ b/GUIModel/Meter/SpeedNeedle.qml
@@ -15,12 +15,12 @@
  */
 
 import QtQuick 2.14
-import QtGraphicalEffects 1.14
+import "qrc:/MeterEffect/"
 
 Item {
     id: speedNeedle
-    width:444
-    height:444
+    width: 444
+    height: 444
     x: 318
     y: 180
     visible: false
@@ -31,165 +31,160 @@ Item {
 
     onSpeedValueChanged: {
         setNeedleAngle();
-        effectPwrNeedle.angle = (2.25 * speedValue*Math.PI/180)+effectPwrNeedle.angleBase
+        effectPwrNeedle.angle = (2.25 * speedValue * Math.PI / 180) + effectPwrNeedle.angleBase;
     }
-    
-    Connections{
+
+    Connections {
         target: rootItem
-        onTransNormalToAdas:{
-            normalToAdasAnimation.start()
+        onTransNormalToAdas: {
+            normalToAdasAnimation.start();
         }
     }
 
-    function setNeedleAngle(){
-        if(speedNeedleMax < speedValue){
-            speedValue = speedNeedleMax
-        }else if( speedValue < speedNeedleMin){
-            speedValue = speedNeedleMin
+    function setNeedleAngle() {
+        if (speedNeedleMax < speedValue) {
+            speedValue = speedNeedleMax;
+        } else if (speedValue < speedNeedleMin) {
+            speedValue = speedNeedleMin;
         }
-        rotateNeedle.angle = 2.25 * speedValue
+        rotateNeedle.angle = 2.25 * speedValue;
     }
 
     /* Needle - visible in ADAS/Map mode */
     Item {
-        id:needleGroup
-        width:444
-        height:444
-        
-        Image{
+        id: needleGroup
+        width: 444
+        height: 444
+
+        Image {
             id: pwrNeedle
             source: "qrc:/Images/ADASView/METER/needle.png"
             x: 28
             y: 220
-            width:182
-            height:4
+            width: 182
+            height: 4
             visible: false
         }
-        
-        Item{
+
+        Item {
             id: needleMask
             visible: false
-            anchors.fill:pwrNeedle
+            anchors.fill: pwrNeedle
             property double maskPercent: 0
-            
-            Rectangle{
+
+            Rectangle {
                 id: needleMaskInvisible
                 color: "red"
                 opacity: 0
                 anchors.left: parent.left
-                width: pwrNeedle.width * (1.0 - needleMask.maskPercent/100.0)
+                width: pwrNeedle.width * (1.0 - needleMask.maskPercent / 100.0)
                 height: pwrNeedle.height
                 visible: true
             }
-            Rectangle{
+            Rectangle {
                 id: needleMaskVisible
                 color: "blue"
                 anchors.right: parent.right
                 opacity: 1
-                width: pwrNeedle.width * (needleMask.maskPercent/100.0)
+                width: pwrNeedle.width * (needleMask.maskPercent / 100.0)
                 height: pwrNeedle.height
                 visible: true
             }
         }
-        
-        
+
         OpacityMask {
             id: maskedPwrNeedle
             cached: false
             width: pwrNeedle.x
-            height:pwrNeedle.y
-            anchors.fill:pwrNeedle
+            height: pwrNeedle.y
+            anchors.fill: pwrNeedle
             source: pwrNeedle
             maskSource: needleMask
         }
-        
-        transform: Rotation{
-            id:rotateNeedle
+
+        transform: Rotation {
+            id: rotateNeedle
             origin.x: needleGroup.width / 2
             origin.y: needleGroup.height / 2
-            angle : 0
+            angle: 0
         }
-        
-        
     }
-    
-    Item{
+
+    Item {
         id: centerCircleGroup
-        width:124
-        height:126
-        x:160
-        y:166
-        Image{
+        width: 124
+        height: 126
+        x: 160
+        y: 166
+        Image {
             id: centerCircle
             source: "qrc:/Images/ADASView/METER/center_circle.png"
-            width:124
-            height:126
+            width: 124
+            height: 126
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.verticalCenter: parent.verticalCenter
             visible: true
         }
     }
-    
+
     Item {
         id: pwrNeedleEffect
-        width:444
-        height:444
+        width: 444
+        height: 444
         x: 0
         y: 0
         visible: false
-        
-        Image{
+
+        Image {
             source: "qrc:/Images/ADASView/METER/pwr_wave.png"
-            width:444
-            height:442
+            width: 444
+            height: 442
             visible: true
         }
-        
-        Image{
+
+        Image {
             source: "qrc:/Images/ADASView/METER/pwr_glow.png"
-            width:444
-            height:442
+            width: 444
+            height: 442
             visible: true
         }
     }
-    
 
-    ShaderEffect{
+    ShaderEffect {
         id: effectPwrNeedle
         anchors.fill: pwrNeedleEffect
         visible: false
         blending: true
         supportsAtlasTextures: true
-        property real angleBase: -pi*1/2
-        property real angle:-pi*1/2
-        property var src: ShaderEffectSource{
+        property real angleBase: -pi * 1 / 2
+        property real angle: -pi * 1 / 2
+        property var src: ShaderEffectSource {
             sourceItem: pwrNeedleEffect
         }
 
         readonly property real pi: 3.1415926535
 
-        vertexShader: "qrc:/Shaders/vert/guageMask.vert"
-        fragmentShader:"qrc:/Shaders/frag/guageMask.frag"
+        vertexShader: ShaderPath.guageMaskVert
+        fragmentShader: ShaderPath.guageMaskFrag
     }
-    
-    
-    SequentialAnimation{
+
+    SequentialAnimation {
         id: normalToAdasAnimation
-        onStarted: rootItem.focus=false
-        onStopped: rootItem.focus=true
+        onStarted: rootItem.focus = false
+        onStopped: rootItem.focus = true
         PauseAnimation {
             duration: 330 + 891
         }
-        
-        PropertyAnimation{
+
+        PropertyAnimation {
             target: speedNeedle
             property: "visible"
             duration: 0
-            from:false
-            to:true
+            from: false
+            to: true
         }
-        
-        NumberAnimation{
+
+        NumberAnimation {
             target: centerCircle
             property: "scale"
             duration: 396
@@ -197,68 +192,67 @@ Item {
             from: 0
             to: 1
         }
-        
-        PropertyAnimation{
-            target:effectPwrNeedle
-            property:"visible"
-            duration:0
-            from:false
-            to:true
+
+        PropertyAnimation {
+            target: effectPwrNeedle
+            property: "visible"
+            duration: 0
+            from: false
+            to: true
         }
-        
-        ParallelAnimation{
+
+        ParallelAnimation {
             NumberAnimation {
-                target:needleMask
+                target: needleMask
                 property: "maskPercent"
                 duration: 198
-                from:0.0
-                to:100.0
+                from: 0.0
+                to: 100.0
             }
-            
-            NumberAnimation{
-                target:effectPwrNeedle
-                property:"opacity"
-                duration:198
-                from:0
-                to:1
+
+            NumberAnimation {
+                target: effectPwrNeedle
+                property: "opacity"
+                duration: 198
+                from: 0
+                to: 1
             }
         }
         PauseAnimation {
             duration: 330
         }
-        
     }
-    
-    SequentialAnimation{
+
+    SequentialAnimation {
         id: mapToNormalAnimation
-        onStarted: rootItem.focus=false
-        ParallelAnimation{
+        onStarted: rootItem.focus = false
+        ParallelAnimation {
             NumberAnimation {
-                target:needleMask
+                target: needleMask
                 property: "maskPercent"
                 duration: 198
-                from:100.0
-                to:0.0
+                from: 100.0
+                to: 0.0
             }
-            
-            NumberAnimation{
-                target:effectPwrNeedle
-                property:"opacity"
-                duration:198
-                from:1
-                to:0
+
+            NumberAnimation {
+                target: effectPwrNeedle
+                property: "opacity"
+                duration: 198
+                from: 1
+                to: 0
             }
         }
-        
-        PropertyAnimation{
-            target:effectPwrNeedle
-            property:"visible"
-            duration:0
-            from:true
-            to:false
+
+        PropertyAnimation {
+            target: effectPwrNeedle
+            property: "visible"
+            duration: 0
+            from: true
+            to: false
         }
-        
-        NumberAnimation{
+
+        NumberAnimation {
             target: centerCircle
             property: "scale"
             duration: 396
@@ -266,14 +260,13 @@ Item {
             from: 1
             to: 0
         }
-        
-        PropertyAnimation{
+
+        PropertyAnimation {
             target: speedNeedle
             property: "visible"
             duration: 0
-            from:true
-            to:false
+            from: true
+            to: false
         }
     }
-    
 }
diff --git a/GUIModel/Meter/Tachometer.qml b/GUIModel/Meter/Tachometer.qml
index 9ad0d7a..9974eea 100644
--- a/GUIModel/Meter/Tachometer.qml
+++ b/GUIModel/Meter/Tachometer.qml
@@ -15,7 +15,7 @@
  */
 
 import QtQuick 2.14
-import QtGraphicalEffects 1.14
+import "qrc:/MeterEffect/"
 
 Item {
     id: tachometer
@@ -26,103 +26,100 @@ Item {
 
     onTachoValueChanged: {
         limitTachoValue();
-        effectRpm.angle = (0.03375 * tachoValue*Math.PI/180)+effectRpm.angleBase
+        effectRpm.angle = (0.03375 * tachoValue * Math.PI / 180) + effectRpm.angleBase;
     }
 
-    Connections{
+    Connections {
         target: rootItem
-        onTransNormalToAdas:{
-            normalToAdasAnimation.start()
+        onTransNormalToAdas: {
+            normalToAdasAnimation.start();
         }
     }
 
-    function limitTachoValue(){
-        if(tachoValue > tachoValueMax){
-            tachoValue = tachoValueMax
-        }else if(tachoValue < tachoValueMin){
-            tachoValue = tachoValueMin
+    function limitTachoValue() {
+        if (tachoValue > tachoValueMax) {
+            tachoValue = tachoValueMax;
+        } else if (tachoValue < tachoValueMin) {
+            tachoValue = tachoValueMin;
         }
     }
 
-    Image{
-        id:rpmGuage
+    Image {
+        id: rpmGuage
         source: "qrc:/Images/NormalView/METER/prm_guage.ktx"
-        x:770
-        y:200
-        width:380
-        height:382
+        x: 770
+        y: 200
+        width: 380
+        height: 382
         visible: false
     }
-    ShaderEffect{
+    ShaderEffect {
         id: effectRpm
         anchors.fill: rpmGuage
         visible: true
         blending: true
         supportsAtlasTextures: true
-        property real angleBase: -pi*3/4
-        property real angle:-pi*3/4
-        property var src: ShaderEffectSource{
+        property real angleBase: -pi * 3 / 4
+        property real angle: -pi * 3 / 4
+        property var src: ShaderEffectSource {
             sourceItem: rpmGuage
             live: false
         }
 
-
         readonly property real pi: 3.1415926535
 
-        vertexShader: "qrc:/Shaders/vert/guageMask.vert"
-        fragmentShader:"qrc:/Shaders/frag/guageMask.frag"
+        vertexShader: ShaderPath.guageMaskVert
+        fragmentShader: ShaderPath.guageMaskFrag
     }
 
-    
-    Image{
-        id:rpmTxt
+    Image {
+        id: rpmTxt
         source: "qrc:/Images/NormalView/METER/prm_txt.png"
-        x:770
-        y:190
-        width:379
-        height:401
+        x: 770
+        y: 190
+        width: 379
+        height: 401
     }
-    
-    SequentialAnimation{
-        id:normalToAdasAnimation
-        onStarted: rootItem.focus=false
-        PropertyAnimation{
-            target:tachometer
-            property:"opacity"
+
+    SequentialAnimation {
+        id: normalToAdasAnimation
+        onStarted: rootItem.focus = false
+        PropertyAnimation {
+            target: tachometer
+            property: "opacity"
             duration: 330
             easing.type: Easing.Linear
-            to:0
+            to: 0
         }
-        PropertyAnimation{
+        PropertyAnimation {
             target: tachometer
             property: "visible"
             duration: 0
-            to:false
+            to: false
         }
     }
-    
-    SequentialAnimation{
-        id:mapToNormalAnimation
-        onStarted: rootItem.focus=false
-        
+
+    SequentialAnimation {
+        id: mapToNormalAnimation
+        onStarted: rootItem.focus = false
+
         PauseAnimation {
             duration: 891 + 330 + 254
         }
-        
-        PropertyAnimation{
+
+        PropertyAnimation {
             target: tachometer
             property: "visible"
             duration: 0
-            to:true
+            to: true
         }
-        
-        PropertyAnimation{
-            target:tachometer
-            property:"opacity"
+
+        PropertyAnimation {
+            target: tachometer
+            property: "opacity"
             duration: 330
             easing.type: Easing.Linear
-            to:1
+            to: 1
         }
     }
-    
 }
diff --git a/GUIModel/MeterEffect/Effect.qrc b/GUIModel/MeterEffect/Effect.qrc
new file mode 100644
index 0000000..776f80d
--- /dev/null
+++ b/GUIModel/MeterEffect/Effect.qrc
@@ -0,0 +1,8 @@
+<RCC>
+    <qresource prefix="/MeterEffect">
+        <file>qmldir</file>
+        <file>GaussianBlur.qml</file>
+        <file>OpacityMask.qml</file>
+        <file>ShaderPath.qml</file>
+    </qresource>
+</RCC>
diff --git a/GUIModel/MeterEffect/GaussianBlur.qml b/GUIModel/MeterEffect/GaussianBlur.qml
new file mode 100644
index 0000000..f729329
--- /dev/null
+++ b/GUIModel/MeterEffect/GaussianBlur.qml
@@ -0,0 +1,4 @@
+//import QtGraphicalEffects 1.0 as E
+import Qt5Compat.GraphicalEffects as E
+
+E.GaussianBlur {}
diff --git a/GUIModel/MeterEffect/OpacityMask.qml b/GUIModel/MeterEffect/OpacityMask.qml
new file mode 100644
index 0000000..18a8ec4
--- /dev/null
+++ b/GUIModel/MeterEffect/OpacityMask.qml
@@ -0,0 +1,3 @@
+import Qt5Compat.GraphicalEffects as E
+
+E.OpacityMask {}
diff --git a/GUIModel/MeterEffect/Qt5/Effect.qrc b/GUIModel/MeterEffect/Qt5/Effect.qrc
new file mode 100644
index 0000000..776f80d
--- /dev/null
+++ b/GUIModel/MeterEffect/Qt5/Effect.qrc
@@ -0,0 +1,8 @@
+<RCC>
+    <qresource prefix="/MeterEffect">
+        <file>qmldir</file>
+        <file>GaussianBlur.qml</file>
+        <file>OpacityMask.qml</file>
+        <file>ShaderPath.qml</file>
+    </qresource>
+</RCC>
diff --git a/GUIModel/MeterEffect/Qt5/GaussianBlur.qml b/GUIModel/MeterEffect/Qt5/GaussianBlur.qml
new file mode 100644
index 0000000..3a4b1ba
--- /dev/null
+++ b/GUIModel/MeterEffect/Qt5/GaussianBlur.qml
@@ -0,0 +1,3 @@
+import QtGraphicalEffects 1.0 as E
+
+E.GaussianBlur {}
diff --git a/GUIModel/MeterEffect/Qt5/OpacityMask.qml b/GUIModel/MeterEffect/Qt5/OpacityMask.qml
new file mode 100644
index 0000000..73df0a3
--- /dev/null
+++ b/GUIModel/MeterEffect/Qt5/OpacityMask.qml
@@ -0,0 +1,3 @@
+import QtGraphicalEffects 1.0 as E
+
+E.OpacityMask {}
diff --git a/GUIModel/MeterEffect/Qt5/ShaderPath.qml b/GUIModel/MeterEffect/Qt5/ShaderPath.qml
new file mode 100644
index 0000000..bdafa05
--- /dev/null
+++ b/GUIModel/MeterEffect/Qt5/ShaderPath.qml
@@ -0,0 +1,7 @@
+pragma Singleton
+import QtQuick 2.15
+
+QtObject {
+    readonly property string guageMaskVert: "qrc:/Shaders/vert/guageMask.vert"
+    readonly property string guageMaskFrag: "qrc:/Shaders/frag/guageMask.frag"
+}
diff --git a/GUIModel/MeterEffect/Qt5/qmldir b/GUIModel/MeterEffect/Qt5/qmldir
new file mode 100644
index 0000000..f0a0d1e
--- /dev/null
+++ b/GUIModel/MeterEffect/Qt5/qmldir
@@ -0,0 +1,3 @@
+singleton ShaderPath 1.0 ShaderPath.qml
+GaussianBlur 1.0 GaussianBlur.qml
+OpacityMask 1.0 OpacityMask.qml
diff --git a/GUIModel/MeterEffect/ShaderPath.qml b/GUIModel/MeterEffect/ShaderPath.qml
new file mode 100644
index 0000000..ebf1f9d
--- /dev/null
+++ b/GUIModel/MeterEffect/ShaderPath.qml
@@ -0,0 +1,7 @@
+pragma Singleton
+import QtQuick 2.15
+
+QtObject {
+    readonly property string guageMaskVert: "qrc:/Assets/Common/Shaders/Qt6/guageMask.vert.qsb"
+    readonly property string guageMaskFrag: "qrc:/Assets/Common/Shaders/Qt6/guageMask.frag.qsb"
+}
diff --git a/GUIModel/MeterEffect/qmldir b/GUIModel/MeterEffect/qmldir
new file mode 100644
index 0000000..f0a0d1e
--- /dev/null
+++ b/GUIModel/MeterEffect/qmldir
@@ -0,0 +1,3 @@
+singleton ShaderPath 1.0 ShaderPath.qml
+GaussianBlur 1.0 GaussianBlur.qml
+OpacityMask 1.0 OpacityMask.qml