Port the cluster-refgui demo supports both Qt5 and Qt6HEADmaster

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

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

1 files changed, 209 insertions, 225 deletions

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