/* * 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 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 alias direction: menuFrame.direction property int margin: menuFrame.margin property int isInited: 0 function resetPosition() { if (position === 0) { menuFrameBgTop.opacity = 1.0; menuFrameBg.width = 460; menuFrameBg.height = 116 * 0.4; menuIcon.scale = 0.4; menuFrameBg.x = 0; menuIcon.x = 26 * 0.4 * menuFrameItem.direction + menuFrameItem.margin; menuText.scale = 0.4; menuText.x = 122 * 0.4 * menuFrameItem.direction + menuFrameItem.margin; menuFrameItem.opacity = 0; menuFrameItem.x = 100 * menuFrameItem.direction; menuFrameItem.y = -68; } 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 * parent.direction + parent.margin width: 76 height: 90 anchors.verticalCenter: menuFrameBg.verticalCenter } Text { id: menuText x: 122 * parent.direction + parent.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 (menuFrame.position === 0) { 0; } else if (menuFrame.position === 1) { 48; } else if (menuFrame.position === 2) { 96; } else if (menuFrame.position === 3) { 144; } else if (menuFrame.position === 4) { 0; } else if (menuFrame.position === 5) { 0; } } NumberAnimation { 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 } } } } }