initial commit

author: 0 <0> 2021-05-21 22:50:39 +0900
committer: 0 <0> 2021-05-21 22:50:39 +0900
commit: 32264925b9cc54b8b8b92fa40e0717095a1bb9d7 (patch)
tree: 640baf7342f30e5cfb6f39a5952a06a172bc75cd /GUIModel/Menu
parent: 5c0cca5b770cb30d547f3d7c56be9f46aa1a31b8 (diff)
17 files changed, 3123 insertions, 0 deletions
diff --git a/GUIModel/Menu/Menu.qml b/GUIModel/Menu/Menu.qml
new file mode 100644
index 0000000..ed81d36
--- /dev/null
+++ b/GUIModel/Menu/Menu.qml
@@ -0,0 +1,115 @@
+/*
+ * Copyright (c) 2020,2021 Panasonic Corporation
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+import QtQuick.Shapes 1.11
+
+
+Item{
+    id: menuRoot
+
+    Connections{
+        target: rootItem
+        onTransNormalToAdas:{
+            menuMain.startAnimationNormalToAdas()
+            menuContents.startAnimationNormalToAdas()
+            menuShade.startAnimationNormalToAdas()
+        }
+
+        onTransAdasToMap:{
+            /**/
+        }
+
+        onTransMapToNormal:{
+            menuMain.startAnimationMapToNormal()
+            menuContents.startAnimationMapToNormal()
+            menuShade.startAnimationMapToNormal()
+        }
+
+        onKeyPressed_Up:{
+            if(menu.state === "open"){
+                menuMain.incrementIndex()
+            }
+        }
+
+        onKeyPressed_Down:{
+            if(menu.state === "open"){
+                menuMain.decrementIndex()
+            }
+        }
+
+        onKeyPressed_Left:{
+            if(menu.state === "close"){
+                menuContents.decrementIndex()
+            }
+        }
+
+        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_Menu:{
+            if(menu.state === "close"){
+                menuContents.open()
+                menuMain.open()
+                menu.state = "open"
+            }
+        }
+    }
+
+    Item{
+        id: menu
+
+        property var mode: "normal" /* Normal or Adas */
+        property var state: "open" /* open or close  */
+
+        MenuContents {
+            id: menuContents
+        }
+
+        /************************************************menu_area****************************************************/
+        MenuMain {
+            id: menuMain
+        }
+
+        MenuShade {
+            id: menuShade
+        }
+    }
+
+
+
+
+}
diff --git a/GUIModel/Menu/MenuAdas.qml b/GUIModel/Menu/MenuAdas.qml
new file mode 100644
index 0000000..4efa772
--- /dev/null
+++ b/GUIModel/Menu/MenuAdas.qml
@@ -0,0 +1,194 @@
+/*
+ * Copyright (c) 2020,2021 Panasonic Corporation
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+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"
+            }
+
+        }
+    }
+}
diff --git a/GUIModel/Menu/MenuAdasIconAdas.qml b/GUIModel/Menu/MenuAdasIconAdas.qml
new file mode 100644
index 0000000..d519891
--- /dev/null
+++ b/GUIModel/Menu/MenuAdasIconAdas.qml
@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) 2020,2021 Panasonic Corporation
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+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
+    }
+    
+}
diff --git a/GUIModel/Menu/MenuAdasIconNormal.qml b/GUIModel/Menu/MenuAdasIconNormal.qml
new file mode 100644
index 0000000..f1c7621
--- /dev/null
+++ b/GUIModel/Menu/MenuAdasIconNormal.qml
@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) 2020,2021 Panasonic Corporation
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+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
+    }
+}
diff --git a/GUIModel/Menu/MenuAudio.qml b/GUIModel/Menu/MenuAudio.qml
new file mode 100644
index 0000000..647ba72
--- /dev/null
+++ b/GUIModel/Menu/MenuAudio.qml
@@ -0,0 +1,108 @@
+/*
+ * Copyright (c) 2020,2021 Panasonic Corporation
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+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
+        }
+    }
+}
diff --git a/GUIModel/Menu/MenuAudioPanel.qml b/GUIModel/Menu/MenuAudioPanel.qml
new file mode 100644
index 0000000..6725b33
--- /dev/null
+++ b/GUIModel/Menu/MenuAudioPanel.qml
@@ -0,0 +1,339 @@
+/*
+ * Copyright (c) 2020,2021 Panasonic Corporation
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+import QtQuick 2.0
+
+Item{
+    id: menuAudioPanelRoot
+
+    /* public properties */
+    property alias icon: audioPanel.icon
+    property alias title: audioPanel.title
+    property alias artist: audioPanel.artist
+    property alias bg: audioPanel.bg
+    property alias mode: audioPanel.mode
+    property alias panelVisible: audioPanel.visible
+    visible: true
+
+    /* public functions */
+    function slideIn(direction){
+        audioPanel.slideIn(direction)
+    }
+
+    function slideOut(direction){
+        audioPanel.slideOut(direction)
+    }
+
+    Item {
+        id: audioPanel
+        width: 826
+        height: 358
+
+        property url icon:   ""
+        property string title:  ""
+        property string artist: ""
+        property url bg:     ""
+
+        property var mode: "normal" /* normal or adas */
+        property double slideDirection: 1 /* +1:Right -1:Left */
+
+        FontLoader { id: localFont; source: "qrc:/Fonts/Inter-Regular.ttf" }
+
+        onModeChanged: {
+            if(mode === "normal"){
+                adasToNormalAnimationAudio.start()
+            }else if(mode === "adas"){
+                normalToAdasAnimationAudio.start()
+            }
+        }
+
+        function slideIn(direction){
+            slideDirection = direction
+
+            if(delayTimer.running){
+                delayTimer.stop()
+            }
+
+            inAnimation.start()
+
+            delayTimer.start()
+        }
+
+        function slideOut(direction){
+            slideDirection = direction
+            if(delayTimer.running){
+                delayTimer.stop()
+            }
+
+            outAnimation.start()
+        }
+
+
+        Timer {
+            id:delayTimer
+            interval: 330
+            repeat: false
+            running: false
+            onTriggered: {
+                blurFadeInAnimation.start()
+            }
+        }
+
+        Item{
+            width:826
+            height: 358
+
+            Image {
+                id: bgImage
+                width:826; height:358
+                source: audioPanel.bg
+            }
+
+            Image {
+                id: iconImage
+                width: 112; height: 112
+                x:301
+                y:156
+                source: audioPanel.icon
+            }
+
+            Text{
+                id: titleText
+                y:308
+                color: "white"
+                font { family: localFont.name; pointSize: 20; capitalization: Font.Capitalize }
+                anchors.horizontalCenterOffset: -59
+                anchors.horizontalCenter: parent.horizontalCenter
+                text: audioPanel.title
+                property var anchor: "center"
+
+                onAnchorChanged: {
+                    if(anchor === "center"){
+                        changeAnchorsToCenter()
+                    }else if(anchor === "left"){
+                        changeAnchorsToLeft()
+                    }
+                }
+
+                function changeAnchorsToCenter(){
+                    anchors.leftMargin = 0
+                    anchors.left = undefined
+                    anchors.horizontalCenter = parent.horizontalCenter
+                    anchors.horizontalCenterOffset = -59
+                }
+
+                function changeAnchorsToLeft(){
+                    anchors.horizontalCenterOffset = 0
+                    anchors.horizontalCenter = undefined
+                    anchors.left = parent.left
+                    anchors.leftMargin = 302
+                }
+            }
+            Text{
+                id:artistName
+                y:336
+                color: "white"
+                font { family: localFont.name; pointSize: 16; capitalization: Font.Capitalize }
+                anchors.horizontalCenterOffset: -59
+                anchors.horizontalCenter: parent.horizontalCenter
+                text: audioPanel.artist
+                property var anchor: "center"
+
+                onAnchorChanged: {
+                    if(anchor === "center"){
+                        changeAnchorsToCenter()
+                    }else if(anchor === "left"){
+                        changeAnchorsToLeft()
+                    }
+                }
+
+                function changeAnchorsToCenter(){
+                    anchors.leftMargin = 0
+                    anchors.left = undefined
+                    anchors.horizontalCenter = parent.horizontalCenter
+                    anchors.horizontalCenterOffset = -59
+                }
+
+                function changeAnchorsToLeft(){
+                    anchors.horizontalCenterOffset = 0
+                    anchors.horizontalCenter = undefined
+                    anchors.left = parent.left
+                    anchors.leftMargin = 302
+                }
+            }
+        }
+
+        PropertyAnimation {
+            id:outAnimation
+
+            target: audioPanel
+            property: "visible"
+            duration: 0
+            to: false
+        }
+
+        ParallelAnimation{
+            id:inAnimation
+
+            PropertyAnimation {
+                target: audioPanel
+                property: "visible"
+                duration: 0
+                to: true
+
+            }
+            NumberAnimation {
+                target: bgImage
+                property: "opacity"
+                duration: 0
+                to:0
+            }
+
+            NumberAnimation {
+                target: iconImage
+                property: "x"
+                duration: 260
+                from:if(audioPanel.mode === "normal"){
+                         301 - 20 * audioPanel.slideDirection
+                     }else if(audioPanel.mode === "adas"){
+                         172 - 20 * audioPanel.slideDirection
+                     }
+                to: if(audioPanel.mode === "normal"){
+                        301
+                    }else if(audioPanel.mode === "adas"){
+                        172
+                    }
+                easing.type: Easing.OutSine
+            }
+        }
+
+        PropertyAnimation {
+            id: blurFadeInAnimation
+            target: bgImage
+            property: "opacity"
+            duration: 330
+            from:0
+            to:1
+            easing.type: Easing.Linear
+        }
+    }
+
+    SequentialAnimation{
+        id:normalToAdasAnimationAudio
+
+        PropertyAnimation {
+            target: bgImage
+            property: "visible"
+            duration: 0
+            to: true
+        }
+
+        PropertyAnimation{
+            target: iconImage
+            property: "x"
+            duration: 0
+            to: 172
+        }
+        PropertyAnimation{
+            target: iconImage
+            property: "y"
+            duration: 0
+            to: 194
+        }
+
+        PropertyAnimation {
+            target: titleText
+            property: "anchor"
+            duration: 0
+            to: "left"
+        }
+        PropertyAnimation{
+            target: titleText
+            property: "y"
+            duration: 0
+            to: 226
+        }
+
+        PropertyAnimation {
+            target: artistName
+            property: "anchor"
+            duration: 0
+            to: "left"
+        }
+        PropertyAnimation{
+            target: artistName
+            property: "y"
+            duration: 0
+            to: 256
+        }
+    }
+
+    SequentialAnimation{
+        id:adasToNormalAnimationAudio
+
+        PropertyAnimation {
+            target: bgImage
+            property: "visible"
+            duration: 0
+            to: false
+        }
+
+        PropertyAnimation{
+            target: iconImage
+            property: "x"
+            duration: 0
+            to: 301
+        }
+        PropertyAnimation{
+            target: iconImage
+            property: "y"
+            duration: 0
+            to: 156
+        }
+
+        PropertyAnimation{
+            target: titleText
+            property: "y"
+            duration: 0
+            to: 308
+        }
+        PropertyAnimation {
+            target: titleText
+            property: "anchor"
+            duration: 0
+            to: "center"
+        }
+
+        PropertyAnimation{
+            target: artistName
+            property: "y"
+            duration: 0
+            to: 336
+        }
+        PropertyAnimation {
+            target: artistName
+            property: "anchor"
+            duration: 0
+            to: "center"
+        }
+    }
+}
diff --git a/GUIModel/Menu/MenuContents.qml b/GUIModel/Menu/MenuContents.qml
new file mode 100644
index 0000000..4a508bc
--- /dev/null
+++ b/GUIModel/Menu/MenuContents.qml
@@ -0,0 +1,304 @@
+/*
+ * Copyright (c) 2020,2021 Panasonic Corporation
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+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
+            }
+        }
+    }
+}
diff --git a/GUIModel/Menu/MenuFrame.qml b/GUIModel/Menu/MenuFrame.qml
new file mode 100644
index 0000000..2c1db60
--- /dev/null
+++ b/GUIModel/Menu/MenuFrame.qml
@@ -0,0 +1,417 @@
+/*
+ * Copyright (c) 2020,2021 Panasonic Corporation
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item{
+    /* public properties */
+    property alias icon: menuFrame.icon
+    property alias txt: menuFrame.txt
+    property alias position: menuFrame.position
+    property alias mode: menuFrame.mode
+
+    /* public functions */
+    function upScroll(){
+        menuFrame.upScroll()
+    }
+
+    function downScroll(){
+        menuFrame.downScroll()
+    }
+
+    function open(){
+        menuFrame.open()
+    }
+
+    function close(){
+        menuFrame.close()
+    }
+
+
+    Item{
+        id:menuFrame
+
+        property string icon: ""
+        property string txt: ""
+        property var position: -1
+        property var mode: "normal"     /* normal or adas */
+
+        property double direction: +1   /* +1:Left -1:Right */
+        property int margin: 0
+
+        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
+            } else {
+                direction = +1
+                margin = 0
+            }
+
+            menuFrame.x = 0
+            menuFrameItem.resetPosition()
+        }
+
+         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 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 close(){
+            animationMenuClose.start()
+        }
+
+
+        Item{
+            id: menuFrameItem
+
+            property double 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
+                }
+                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 === 3){
+                    menuFrameBgBottom.opacity = 1.0
+                    menuFrameBg.width = 460 - 50
+                    menuFrameBg.height = 74
+                    if(menuFrameItem.direction === +1) {
+                        menuFrameBg.x = 0
+                    } else {
+                        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
+                }
+                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
+                    }
+                    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
+                    } else {
+                        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
+                }
+            }
+
+
+            Item{
+                id: menuFrameBg
+                x:0
+                y:0
+                width: 460
+                height: 116
+                Image{
+                    id: menuFrameBgTop
+                    anchors.fill: parent
+                    source: "qrc:/Images/NormalView/MENU/menu_panel1.png"
+                    opacity: 0
+                }
+                Image{
+                    id: menuFrameBgCenter
+                    anchors.fill: parent
+                    source: "qrc:/Images/NormalView/MENU/menu_panel2.png"
+                    opacity: 0
+                }
+                Image{
+                    id: menuFrameBgBottom
+                    anchors.fill: parent
+                    source: "qrc:/Images/NormalView/MENU/menu_panel3.png"
+                    opacity: 0
+                }
+            }
+
+            Image{
+                id: menuIcon
+                source:menuFrame.icon
+                x: 26 * direction + margin
+                width: 76
+                height: 90
+                anchors.verticalCenter: menuFrameBg.verticalCenter
+            }
+
+            Text {
+                id: menuText
+                x: 122 * direction + margin
+                width: 68
+                height: 26
+                y:46
+                text: menuFrame.txt
+                font { family: localFont.name; pointSize: 20; capitalization: Font.Capitalize }
+                anchors.verticalCenter: menuFrameBg.verticalCenter
+                color: "white"
+
+            }
+
+            MenuFrameScrollTo0{
+                id:animationMenuScrollTo0
+                scrollDuration: 330
+            }
+
+            MenuFrameScrollTo1{
+                id:animationMenuScrollTo1
+                scrollDuration: 330
+            }
+
+            MenuFrameScrollTo2 {
+                id:animationMenuScrollTo2
+                scrollDuration: 330
+            }
+
+            MenuFrameScrollTo3 {
+                id:animationMenuScrollTo3
+                scrollDuration: 330
+            }
+
+            MenuFrameScrollTo4{
+                id:animationMenuScrollTo4
+                scrollDuration: 330
+            }
+
+
+            /* Open */
+            SequentialAnimation{
+                id:animationMenuOpen
+
+                NumberAnimation{
+                    target: menuFrame
+                    property: "x"
+                    to: 360 * menuFrameItem.direction
+                    duration: 0
+                }
+
+                PropertyAnimation{
+                    target: menuFrame
+                    property: "visible"
+                    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
+                              }
+                }
+
+                NumberAnimation{
+                    target: menuFrame
+                    property: "x"
+                    from: 360 * menuFrameItem.direction
+                    to: 0
+                    duration: 260
+                    easing.type: Easing.InQuad
+                }
+
+            }
+
+            SequentialAnimation{
+                id:animationMenuClose
+
+                NumberAnimation{
+                    target: menuFrame
+                    property: "x"
+                    to: 0
+                    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
+                              }
+                }
+
+                NumberAnimation{
+                    target: menuFrame
+                    property: "x"
+                    from: 0
+                    to: 360 * menuFrameItem.direction
+                    duration: 260
+                    easing.type: Easing.OutQuad
+                }
+
+                PropertyAnimation{
+                    target: menuFrame
+                    property: "visible"
+                    from: true
+                    to: false
+                    duration: 0
+                }
+            }
+
+        }
+
+
+    }
+}
diff --git a/GUIModel/Menu/MenuFrameScrollTo0.qml b/GUIModel/Menu/MenuFrameScrollTo0.qml
new file mode 100644
index 0000000..b5ea0c3
--- /dev/null
+++ b/GUIModel/Menu/MenuFrameScrollTo0.qml
@@ -0,0 +1,126 @@
+/*
+ * Copyright (c) 2020,2021 Panasonic Corporation
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+import QtQuick 2.0
+
+ParallelAnimation{
+    property int scrollDuration: 240
+    onStarted: rootItem.focus=false
+    onStopped: rootItem.focus=true
+    PropertyAnimation{
+        target: menuFrameBgTop
+        property: "opacity"
+        to: 1.0
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    PropertyAnimation{
+        target: menuFrameBgCenter
+        property: "opacity"
+        to: 0.0
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    PropertyAnimation{
+        target: menuFrameBgBottom
+        property: "opacity"
+        to: 0.0
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuFrameBg
+        properties: "width"
+        to: 460
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuFrameBg
+        properties: "height"
+        to: 116 * 0.4
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuFrameBg
+        properties: "x"
+        to: 0
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuIcon
+        properties: "scale"
+        to:0.4
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuIcon
+        properties: "x"
+        to: 26 * 0.4  * menuFrameItem.direction + menuFrameItem.margin
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuText
+        properties: "scale"
+        to: 0.4
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuText
+        properties: "x"
+        to: 122 * 0.4  * menuFrameItem.direction + menuFrameItem.margin
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    PropertyAnimation{
+        target: menuFrameItem
+        properties: "opacity"
+        to: 0
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuFrameItem
+        properties: "x"
+        to: 100 * menuFrameItem.direction
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation {
+        target: menuFrameItem
+        property: "y"
+        to: -68
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation {
+        target: menuFrame
+        property: "z"
+        to: 0
+        duration: 0
+    }
+}
diff --git a/GUIModel/Menu/MenuFrameScrollTo1.qml b/GUIModel/Menu/MenuFrameScrollTo1.qml
new file mode 100644
index 0000000..386de59
--- /dev/null
+++ b/GUIModel/Menu/MenuFrameScrollTo1.qml
@@ -0,0 +1,127 @@
+/*
+ * Copyright (c) 2020,2021 Panasonic Corporation
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+import QtQuick 2.0
+
+ParallelAnimation{
+    property int scrollDuration: 240
+    onStarted: rootItem.focus=false
+    onStopped: rootItem.focus=true
+
+    PropertyAnimation{
+        target: menuFrameBgTop
+        property: "opacity"
+        to: 1.0
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    PropertyAnimation{
+        target: menuFrameBgCenter
+        property: "opacity"
+        to: 0.0
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    PropertyAnimation{
+        target: menuFrameBgBottom
+        property: "opacity"
+        to: 0.0
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuFrameBg
+        properties: "width"
+        to: 460
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuFrameBg
+        properties: "height"
+        to: 58
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuFrameBg
+        properties: "x"
+        to: 0
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuIcon
+        properties: "scale"
+        to: 0.5
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuIcon
+        properties: "x"
+        to: 26 * 0.5 * menuFrameItem.direction + menuFrameItem.margin
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuText
+        properties: "scale"
+        to: 0.5
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuText
+        properties: "x"
+        to: 122 * 0.5 * menuFrameItem.direction + menuFrameItem.margin
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuFrameItem
+        properties: "opacity"
+        to: 1
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuFrameItem
+        properties: "x"
+        to: 50 * menuFrameItem.direction
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation {
+        target: menuFrameItem
+        property: "y"
+        to: -48
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation {
+        target: menuFrame
+        property: "z"
+        to: 0.2
+        duration: 0
+    }
+}
diff --git a/GUIModel/Menu/MenuFrameScrollTo2.qml b/GUIModel/Menu/MenuFrameScrollTo2.qml
new file mode 100644
index 0000000..c31bf4d
--- /dev/null
+++ b/GUIModel/Menu/MenuFrameScrollTo2.qml
@@ -0,0 +1,127 @@
+/*
+ * Copyright (c) 2020,2021 Panasonic Corporation
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+import QtQuick 2.0
+
+ParallelAnimation{
+    property int scrollDuration: 240
+    onStarted: rootItem.focus=false
+    onStopped: rootItem.focus=true
+    
+    PropertyAnimation{
+        target: menuFrameBgTop
+        property: "opacity"
+        to: 0.0
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    PropertyAnimation{
+        target: menuFrameBgCenter
+        property: "opacity"
+        to: 1.0
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    PropertyAnimation{
+        target: menuFrameBgBottom
+        property: "opacity"
+        to: 0.0
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuFrameBg
+        properties: "width"
+        to: 460
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuFrameBg
+        properties: "height"
+        to: 116
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuFrameBg
+        properties: "x"
+        to: 0
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuIcon
+        properties: "scale"
+        to:1.0
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuIcon
+        properties: "x"
+        to:26 * menuFrameItem.direction + menuFrameItem.margin
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuText
+        properties: "scale"
+        to:1.0
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuText
+        properties: "x"
+        to: 122 * menuFrameItem.direction + menuFrameItem.margin
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuFrameItem
+        properties: "opacity"
+        to: 1.0
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuFrameItem
+        properties: "x"
+        to:0
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation {
+        target: menuFrameItem
+        property: "y"
+        to:0
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation {
+        target: menuFrame
+        property: "z"
+        to: 0.4
+        duration: 0
+    }
+}
diff --git a/GUIModel/Menu/MenuFrameScrollTo3.qml b/GUIModel/Menu/MenuFrameScrollTo3.qml
new file mode 100644
index 0000000..dc180eb
--- /dev/null
+++ b/GUIModel/Menu/MenuFrameScrollTo3.qml
@@ -0,0 +1,133 @@
+/*
+ * Copyright (c) 2020,2021 Panasonic Corporation
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+import QtQuick 2.0
+
+ParallelAnimation{
+    property int scrollDuration: 240
+    onStarted: rootItem.focus=false
+    onStopped: rootItem.focus=true
+    
+    PropertyAnimation{
+        target: menuFrameBgTop
+        property: "opacity"
+        to: 0.0
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    PropertyAnimation{
+        target: menuFrameBgCenter
+        property: "opacity"
+        to: 0.0
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    PropertyAnimation{
+        target: menuFrameBgBottom
+        property: "opacity"
+        to: 1.0
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuFrameBg
+        properties: "width"
+        to: 460 - 50
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuFrameBg
+        properties: "height"
+        to: 74
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuFrameBg
+        properties: "x"
+        to: if(menuFrameItem.direction ===1){
+                0
+            }else{
+                50
+            }
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+
+    NumberAnimation{
+        target: menuIcon
+        properties: "scale"
+        to:74/116
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuIcon
+        properties: "x"
+        to:26 * (74/116) * menuFrameItem.direction + menuFrameItem.margin
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuText
+        properties: "scale"
+        to:74/116
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuText
+        properties: "x"
+        to:122 * (74/116) * menuFrameItem.direction + menuFrameItem.margin
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuFrameItem
+        properties: "opacity"
+        to: 1
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuFrameItem
+        properties: "x"
+        to: 100 * menuFrameItem.direction
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    
+    NumberAnimation {
+        target: menuFrameItem
+        property: "y"
+        to: 104
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation {
+        target: menuFrame
+        property: "z"
+        to: 0.6
+        duration: 0
+    }
+}
diff --git a/GUIModel/Menu/MenuFrameScrollTo4.qml b/GUIModel/Menu/MenuFrameScrollTo4.qml
new file mode 100644
index 0000000..9d4337c
--- /dev/null
+++ b/GUIModel/Menu/MenuFrameScrollTo4.qml
@@ -0,0 +1,131 @@
+/*
+ * Copyright (c) 2020,2021 Panasonic Corporation
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+import QtQuick 2.0
+
+ParallelAnimation{
+    property int scrollDuration: 240
+    onStarted: rootItem.focus=false
+    onStopped: rootItem.focus=true
+    
+    PropertyAnimation{
+        target: menuFrameBgTop
+        property: "opacity"
+        to: 0.0
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    PropertyAnimation{
+        target: menuFrameBgCenter
+        property: "opacity"
+        to: 0.0
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    PropertyAnimation{
+        target: menuFrameBgBottom
+        property: "opacity"
+        to: 1.0
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuFrameBg
+        properties: "width"
+        to: 460 - 50
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuFrameBg
+        properties: "height"
+        to: 116 * 0.7
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuFrameBg
+        properties: "x"
+        to: if(menuFrameItem.direction ===1){
+                0
+            }else{
+                50
+            }
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuIcon
+        properties: "scale"
+        to:0.7
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuIcon
+        properties: "x"
+        to: 26 * 0.7 * menuFrameItem.direction + menuFrameItem.margin
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuText
+        properties: "scale"
+        to:0.7
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuText
+        properties: "x"
+        to: 122 * (0.7) * menuFrameItem.direction + menuFrameItem.margin
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuFrameItem
+        properties: "opacity"
+        to: 0
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation{
+        target: menuFrameItem
+        properties: "x"
+        to: 160 * menuFrameItem.direction
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation {
+        target: menuFrameItem
+        property: "y"
+        to: 140
+        duration: scrollDuration
+        easing.type: Easing.InOutSine
+    }
+    NumberAnimation {
+        target: menuFrame
+        property: "z"
+        to: 1
+        duration: 0
+    }
+}
diff --git a/GUIModel/Menu/MenuMain.qml b/GUIModel/Menu/MenuMain.qml
new file mode 100644
index 0000000..7cb9a02
--- /dev/null
+++ b/GUIModel/Menu/MenuMain.qml
@@ -0,0 +1,246 @@
+/*
+ * Copyright (c) 2020,2021 Panasonic Corporation
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+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
+            }
+        }
+    }
+}
diff --git a/GUIModel/Menu/MenuRadio.qml b/GUIModel/Menu/MenuRadio.qml
new file mode 100644
index 0000000..df58b21
--- /dev/null
+++ b/GUIModel/Menu/MenuRadio.qml
@@ -0,0 +1,108 @@
+/*
+ * Copyright (c) 2020,2021 Panasonic Corporation
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+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
+        }
+    }
+}
diff --git a/GUIModel/Menu/MenuRadioPanel.qml b/GUIModel/Menu/MenuRadioPanel.qml
new file mode 100644
index 0000000..62f8295
--- /dev/null
+++ b/GUIModel/Menu/MenuRadioPanel.qml
@@ -0,0 +1,338 @@
+/*
+ * Copyright (c) 2020,2021 Panasonic Corporation
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+import QtQuick 2.0
+
+Item{
+    id: menuRadioPanelRoot
+
+    /* public properties */
+    property alias icon: radioPanel.icon
+    property alias title: radioPanel.title
+    property alias channel: radioPanel.channel
+    property alias bg: radioPanel.bg
+    property alias mode: radioPanel.mode
+    property alias panelVisible: radioPanel.visible
+    visible: true
+
+    /* public functions */
+    function slideIn(direction){
+        radioPanel.slideIn(direction)
+    }
+
+    function slideOut(direction){
+        radioPanel.slideOut(direction)
+    }
+
+    Item {
+        id: radioPanel
+        width: 826
+        height: 358
+        property url icon:    ""
+        property string title:   ""
+        property string channel: ""
+        property url bg:      ""
+
+        property var mode: "normal" /* normal or adas */
+        property double slideDirection: 1 /* +1:Right -1:Left */
+
+        FontLoader { id: localFont; source: "qrc:/Fonts/Inter-Regular.ttf" }
+
+        onModeChanged: {
+            if(mode === "normal"){
+                adasToNormalAnimationRadio.start()
+            }else if(mode === "adas"){
+                normalToAdasAnimationRadio.start()
+            }
+        }
+
+        function slideIn(direction){
+            slideDirection = direction
+
+            if(delayTimer.running){
+                delayTimer.stop()
+            }
+
+            inAnimation.start()
+
+            delayTimer.start()
+        }
+
+        function slideOut(direction){
+            slideDirection = direction
+            if(delayTimer.running){
+                delayTimer.stop()
+            }
+
+            outAnimation.start()
+        }
+
+
+        Timer {
+            id: delayTimer
+            interval: 330
+            repeat: false
+            running: false
+            onTriggered: {
+                blurFadeInAnimation.start()
+            }
+        }
+
+        Item{
+            width:826
+            height: 358
+
+            Image {
+                id: bgImage
+                width:826
+                height:358
+                source: bg
+            }
+            Image {
+                id: iconImage
+                width: 112
+                height: 112
+                x:172
+                y:194
+                source: icon
+            }
+            Text {
+                id: titleText
+                y:226
+                color: "white"
+                font { family: localFont.name; pointSize: 20; capitalization: Font.Capitalize }
+                anchors.horizontalCenterOffset: -59
+                anchors.horizontalCenter: parent.horizontalCenter
+                text: title
+                property var anchor: "center"
+
+                onAnchorChanged: {
+                    if(anchor === "center"){
+                        changeAnchorsToCenter()
+                    }else if(anchor === "left"){
+                        changeAnchorsToLeft()
+                    }
+                }
+
+                function changeAnchorsToCenter(){
+                    anchors.leftMargin = 0
+                    anchors.left = undefined
+                    anchors.horizontalCenter = parent.horizontalCenter
+                    anchors.horizontalCenterOffset = -59
+                }
+
+                function changeAnchorsToLeft(){
+                    anchors.horizontalCenterOffset = 0
+                    anchors.horizontalCenter = undefined
+                    anchors.left = parent.left
+                    anchors.leftMargin = 302
+                }
+            }
+            Text {
+                id:channelName
+                y:256
+                color: "white"
+                font { family: localFont.name; pointSize: 20; capitalization: Font.Capitalize }
+                anchors.horizontalCenterOffset: -59
+                anchors.horizontalCenter: parent.horizontalCenter
+                text: channel
+                property var anchor: "center"
+
+                onAnchorChanged: {
+                    if(anchor === "center"){
+                        changeAnchorsToCenter()
+                    }else if(anchor === "left"){
+                        changeAnchorsToLeft()
+                    }
+                }
+
+                function changeAnchorsToCenter(){
+                    anchors.leftMargin = 0
+                    anchors.left = undefined
+                    anchors.horizontalCenter = parent.horizontalCenter
+                    anchors.horizontalCenterOffset = -59
+                }
+
+                function changeAnchorsToLeft(){
+                    anchors.horizontalCenterOffset = 0
+                    anchors.horizontalCenter = undefined
+                    anchors.left = parent.left
+                    anchors.leftMargin = 302
+                }
+            }
+        }
+
+        PropertyAnimation {
+            id:outAnimation
+            target: radioPanel
+            property: "visible"
+            duration: 0
+            to: false
+        }
+
+        ParallelAnimation{
+            id:inAnimation
+
+            NumberAnimation {
+                target: bgImage
+                property: "opacity"
+                duration: 0
+                to:0
+            }
+
+            PropertyAnimation {
+                target: radioPanel
+                property: "visible"
+                duration: 0
+                to: true
+            }
+            NumberAnimation {
+                target: iconImage
+                property: "x"
+                duration: 260
+                from:if(radioPanel.mode === "normal"){
+                         301 - 20 * radioPanel.slideDirection
+                     }else if(mode === "adas"){
+                         172 - 20 * radioPanel.slideDirection
+                     }
+                to: if(radioPanel.mode === "normal"){
+                        301
+                    }else if(radioPanel.mode === "adas"){
+                        172
+                    }
+                easing.type: Easing.OutSine
+            }
+        }
+
+
+        PropertyAnimation {
+            id: blurFadeInAnimation
+
+            target: bgImage
+            property: "opacity"
+            duration: 330
+            from:0
+            to:1
+            easing.type: Easing.Linear
+        }
+    }
+
+    SequentialAnimation{
+        id:normalToAdasAnimationRadio
+
+        PropertyAnimation {
+            target: bgImage
+            property: "visible"
+            duration: 0
+            to:1
+        }
+
+        PropertyAnimation{
+            target: iconImage
+            property: "x"
+            duration: 0
+            to: 172
+        }
+        PropertyAnimation{
+            target: iconImage
+            property: "y"
+            duration: 0
+            to: 194
+        }
+
+        PropertyAnimation {
+            target: titleText
+            property: "anchor"
+            duration: 0
+            to: "left"
+        }
+        PropertyAnimation{
+            target: titleText
+            property: "y"
+            duration: 0
+            to: 226
+        }
+
+        PropertyAnimation {
+            target: channelName
+            property: "anchor"
+            duration: 0
+            to: "left"
+        }
+        PropertyAnimation{
+            target: channelName
+            property: "y"
+            duration: 0
+            to: 256
+        }
+    }
+
+    SequentialAnimation{
+        id:adasToNormalAnimationRadio
+
+        PropertyAnimation {
+            target: bgImage
+            property: "visible"
+            duration: 0
+            to:0
+        }
+
+        PropertyAnimation{
+            target: iconImage
+            property: "x"
+            duration: 0
+            to: 301
+        }
+        PropertyAnimation{
+            target: iconImage
+            property: "y"
+            duration: 0
+            to: 156
+        }
+
+        PropertyAnimation{
+            target: titleText
+            property: "y"
+            duration: 0
+            to: 308
+        }
+        PropertyAnimation {
+            target: titleText
+            property: "anchor"
+            duration: 0
+            to: "center"
+        }
+
+        PropertyAnimation{
+            target: channelName
+            property: "y"
+            duration: 0
+            to: 336
+        }
+        PropertyAnimation {
+            target: channelName
+            property: "anchor"
+            duration: 0
+            to: "center"
+        }
+    }
+}
diff --git a/GUIModel/Menu/MenuShade.qml b/GUIModel/Menu/MenuShade.qml
new file mode 100644
index 0000000..a8a6e82
--- /dev/null
+++ b/GUIModel/Menu/MenuShade.qml
@@ -0,0 +1,165 @@
+/*
+ * Copyright (c) 2020,2021 Panasonic Corporation
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+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
+            }
+        }
+    }
+
+}
author	0 <0>	2021-05-21 22:50:39 +0900
committer	0 <0>	2021-05-21 22:50:39 +0900
commit	32264925b9cc54b8b8b92fa40e0717095a1bb9d7 (patch)
tree	640baf7342f30e5cfb6f39a5952a06a172bc75cd /GUIModel/Menu
parent	5c0cca5b770cb30d547f3d7c56be9f46aa1a31b8 (diff)