change size to 1920x1080

[apps/homescreen.git] / homescreen / qml / main.qml

diff --git a/homescreen/qml/main.qml b/homescreen/qml/main.qml
index 1312e87..909770d 100644 (file)
--- a/homescreen/qml/main.qml
+++ b/homescreen/qml/main.qml
@@ -26,39 +26,209 @@ Window {
     width: container.width * container.scale
     height: container.height * container.scale
     title: 'HomeScreen'
+    color: "#00000000"
+
+    Image {
+        id: fullscreen_back
+        anchors.centerIn: parent
+        width: 1920
+        height: 1080
+        source: './images/menubar_fullscreen_background.png'
+    }
 
     Image {
         id: container
         anchors.centerIn: parent
-        width: 1080
-        height: 1920
+        width: 1920
+        height: 1080
         scale: 1.0
-        source: './images/AGL_HMI_Blue_Background_NoCar-01.png'
+        source: './images/menubar_background.png'
 
         ColumnLayout {
-            anchors.fill: parent
+            id: menuBar
+            width: 1920
+            height: 720
+//            y:180
             spacing: 0
             TopArea {
                 id: topArea
-                Layout.fillWidth: true
-                Layout.preferredHeight: 218
+                anchors.horizontalCenter: parent.horizontalCenter
+                Layout.preferredHeight: 80
+                x: 640
             }
 
             Item {
                 id: applicationArea
                 Layout.fillWidth: true
                 Layout.fillHeight: true
-                Layout.preferredHeight: 1920 - 218 - 215
+                Layout.preferredHeight: 510
 
                 visible: true
+                MouseArea {
+                    enabled: true
+                }
             }
 
-            MediaArea {
-                id: mediaArea
-                Layout.fillWidth: true
+            ShortcutArea {
+                id: shortcutArea
+                anchors.horizontalCenter: parent.horizontalCenter
                 Layout.fillHeight: true
-                Layout.preferredHeight: 215
+                Layout.preferredHeight: 130
+            }
+        }
+        states: [
+            State {
+                name: "normal"
+                PropertyChanges {
+                    target: container
+                    y: 180
+                }
+                PropertyChanges {
+                    target: topArea
+                    y: 180
+                }
+                PropertyChanges {
+                    target: applicationArea
+                    y: 260
+                }
+                PropertyChanges {
+                    target: shortcutArea
+                    y: 770
+                }
+            },
+            State {
+                name: "fullscreen"
+                PropertyChanges {
+                    target: container
+                    y: -900
+                }
+                PropertyChanges {
+                    target: topArea
+                    y: -260
+                }
+                PropertyChanges {
+                    target: applicationArea
+                    y: -590
+                }
+                PropertyChanges {
+                    target: shortcutArea
+                    y: 900
+                }
+            }
+        ]
+        transitions: Transition {
+            NumberAnimation {
+                target: topArea
+                property: "y"
+                easing.type: "OutQuad"
+                duration: 250
+            }
+            NumberAnimation {
+                target: applicationArea
+                property: "y"
+                easing.type: "OutQuad"
+                duration: 250
+            }
+            NumberAnimation {
+                target: shortcutArea
+                property: "y"
+                easing.type: "OutQuad"
+                duration: 250
+            }
+        }
+    }
+
+    Item {
+        id: switchBtn
+        width: 61
+        height: 61
+        anchors.right: parent.right
+        anchors.rightMargin: 17
+        anchors.top: parent.top
+        anchors.topMargin: 182
+        z: 1
+        Image {
+            id: image
+            width: 55
+            height: 55
+            anchors.centerIn: parent
+            source: './images/normal.png'
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            property string btnState: 'normal'
+            onClicked: {
+                if (container.state === 'normal') {
+                    turnToFullscreen()
+                } else {
+                    turnToNormal()
+                }
             }
         }
     }
+
+    Item {
+        id: splitSwitchBtn
+        width: 61
+        height: 61
+        anchors.right: switchBtn.left
+        anchors.top: parent.top
+        anchors.topMargin: 182
+        z: 1
+        property bool enableSplitSwitchBtn: false
+        Image {
+            id: splitSwitchImage
+            width: 55
+            height: 55
+            anchors.centerIn: parent
+            source: './images/split_switch_disable.png'
+        }
+
+        MouseArea {
+            property bool changed : false
+            anchors.fill: parent
+            onClicked: {
+                if (splitSwitchBtn.enableSplitSwitchBtn) {
+                    if(changed) {
+                        switchSplitArea(0)
+                        changed = false
+                    }
+                    else {
+                        switchSplitArea(1)
+                        changed = true
+                    }
+                }
+            }
+        }
+    }
+
+
+    function turnToFullscreen() {
+        image.source = './images/fullscreen.png'
+        container.state = 'fullscreen'
+        container.opacity = 0.0
+        touchArea.switchArea(1)
+    }
+
+    function turnToNormal() {
+        image.source = './images/normal.png'
+        container.state = 'normal'
+        container.opacity = 1.0
+        touchArea.switchArea(0)
+    }
+
+    function enableSplitSwitchBtn() {
+        splitSwitchImage.source = './images/split_switch.png'
+        splitSwitchBtn.enableSplitSwitchBtn = true
+    }
+
+    function disableSplitSwitchBtn() {
+        splitSwitchImage.source = './images/split_switch_disable.png'
+        splitSwitchBtn.enableSplitSwitchBtn = false;
+    }
+
+    function switchSplitArea(val) {
+        homescreenHandler.changeLayout(val);
+    }
 }