/*
* 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
}
}
}
}
}