diff options
Diffstat (limited to 'GUIModel/Menu/MenuFrame.qml')
| -rw-r--r-- | GUIModel/Menu/MenuFrame.qml | 411 |
1 files changed, 411 insertions, 0 deletions
diff --git a/GUIModel/Menu/MenuFrame.qml b/GUIModel/Menu/MenuFrame.qml new file mode 100644 index 0000000..430439e --- /dev/null +++ b/GUIModel/Menu/MenuFrame.qml @@ -0,0 +1,411 @@ +/* + * Copyright 2020,2021 Panasonic Corporation + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import QtQuick 2.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 + } + } + + } + + + } +} |