homecontrol/SideNavigation.qml

/**
 *  Copyright © 2010 Digia Plc
 *  Copyright © 2010 Nokia Corporation
 *
 *  All rights reserved.
 *
 *  Nokia and Nokia Connecting People are registered trademarks of
 *  Nokia Corporation.
 *  Java and all Java-based marks are trademarks or registered
 *  trademarks of
 *  Sun Microsystems, Inc. Other product and company names
 *  mentioned herein may be
 *  trademarks or trade names of their respective owners.
 *
 *
 *  Subject to the conditions below, you may, without charge:
 *
 *  ·  Use, copy, modify and/or merge copies of this software and
 *     associated documentation files (the "Software")
 *
 *  ·  Publish, distribute, sub-licence and/or sell new software
 *     derived from or incorporating the Software.
 *
 *
 *  This file, unmodified, shall be included with all copies or
 *  substantial portions
 *  of the Software that are distributed in source code form.
 *
 *  The Software cannot constitute the primary value of any new
 *  software derived
 *  from or incorporating the Software.
 *
 *  Any person dealing with the Software shall not misrepresent
 *  the source of the Software.
 *
 *  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY
 *  KIND, EXPRESS OR IMPLIED,
 *  INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 *  MERCHANTABILITY, FITNESS FOR A
 *  PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 *  AUTHORS OR COPYRIGHT
 *  HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 *  WHETHER IN AN ACTION
 *  OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 *  CONNECTION WITH THE
 *  SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
import Qt 4.7
import "../colibri"
import "styles"
import "javascript/sql.js" as HCS

Item {
    id:screen

    property CLStyle style : StyleHomeControlSystem {}
    property int theme : 0

    property int iconWidth: 0
    property int startPointX: 0
    property int startPointY: 0
    property int endPointX: 0
    property int endPointY: 0
    property int controlPointX: 0
    property int controlPointY: 0
    property bool open: false
    property int currentIndex : 0
    property real sideBarWidth : 10
    property color textColor : style.textColor

    signal themeChange()
    signal profileChanged()
    signal saunaTurnedOff()

    /**
     * Function opens Side Navigation.
     *
     * @param openFirst
     * @return nothing
     */
    function openSideNavigation(openFirst) {
        open = true
        icons.visible = true
        var curIndex = icons.currentIndex

        if (curIndex <= icons.count){
            if (currentIndex == 0 && !openFirst)icons.currentIndex = (icons.currentIndex + Math.round(icons.count/2)) % icons.count
            else icons.currentIndex = curIndex
        } else {
            icons.currentIndex = icons.count -1
        }
        window.visible=true
        sideBar.border.color = style.textColor
    }

    /**
     * Function will close side navigation.
     */
    function closeSideNavigation() {
        open = false
        icons.visible=false
        window.visible=false
        sideBar.border.color = style.bgColor
    }

    onWidthChanged:{
        sideBarWidth = screen.width*0.2
        iconWidth = screen.width*0.09
        startPointX = iconWidth*1.3
        startPointY = Math.round(screen.height*0.16)
        endPointX = iconWidth*1.3
        endPointY = Math.round(screen.height*0.87)
        controlPointX = Math.round(screen.width*0.34)
        controlPointY = Math.round(screen.height*0.5)
    }

    onHeightChanged:{
        sideBarWidth = screen.width*0.2
        iconWidth = screen.width*0.09
        startPointX = iconWidth*1.3
        startPointY = Math.round(screen.height*0.16)
        endPointX = iconWidth*1.3
        endPointY = Math.round(screen.height*0.87)
        controlPointX = Math.round(screen.width*0.34)
        controlPointY = Math.round(screen.height*0.5)
    }

    Component.onCompleted:{
        sideBarWidth = screen.width*0.2
        iconWidth = screen.width*0.09
        startPointX = iconWidth*1.3
        startPointY = Math.round(screen.height*0.16)
        endPointX = iconWidth*1.3
        endPointY = Math.round(screen.height*0.87)
        controlPointX = Math.round(screen.width*0.34)
        controlPointY = Math.round(screen.height*0.5)
        open = false
        currentIndex = icons.currentIndex
        sideBarImage.source = "images/close_button.png"
    }

    width: 800
    height: 424

    Rectangle {
        id:shadow
        anchors.fill: parent
        color: style.colorWhenDefault
        opacity: (open)?0.7:0

    }

    Component {
        id: delegate
        Item{
            width:iconWidth
            height:iconWidth
            Image { smooth:true; width: iconWidth; height: iconWidth; source: icon}
            MouseArea{
                anchors.fill:parent
                onClicked:{
                    icons.currentIndex = index
                    window.children[index].opacity = 1
                    for (var i = 0; i < window.children.length; ++i) {
                        if (i != index)window.children[i].opacity = 0
                    }
                }
            }
        }
    }

    ListModel {
        id:iconsModel
        ListElement {
            title: "Air Conditioning"
            icon: "images/ventilator_white_bg_b_100x100.png"
        }
        ListElement {
            title: "Security"
            icon: "images/security_white_bg_100x100.png"
        }

        ListElement {
            title: "Energy Consumption"
            icon: "images/energy_blue_white_bg_100x100.png"
        }
        ListElement {
            title: "Profiles"
            icon: "images/profile_sun_moon_white_bg_100x100.png"
        }
        ListElement {
            title: "Themes"
            icon: "images/theme_house_white_bg_100x100.png"
        }
        ListElement {
            title: "Music"
            icon: "images/av_player_white_bg_100x100.png"
        }
    }

    PathView {
        Image {
            id: menuBg
            source: "images/menu_bg.png"
            height:screen.height
            width:screen.controlPointX * 0.85
            y: 4
            smooth:true
        }

        id:icons
        visible:false
        anchors.fill: parent
        model: iconsModel
        delegate: delegate
        preferredHighlightBegin: 0.33
        preferredHighlightEnd: 0.33
        path: Path {
            startX: startPointX; startY: startPointY
            PathQuad { x: endPointX; y: endPointY; controlX: controlPointX; controlY: controlPointY }
            PathPercent { value: 0.68 }
            PathQuad { x: -endPointX; y: endPointY; controlX: 0; controlY: endPointY}
            PathQuad { x: -startPointX; y: startPointY/2; controlX: -controlPointX; controlY: controlPointY}
            PathQuad { x: startPointX; y: startPointY; controlX: 0; controlY: startPointY/2}
        }

        onCurrentIndexChanged: {
            if (window.children.length == currentIndex){
                window.children[0].opacity = 1;
                for (var i = 1; i < window.children.length; ++i) {
                    if (i != currentIndex) {
                        window.children[i].opacity = 0
                    } else {
                        timer.running = true
                        timer.child = i
                        window.children[i].opacity = 1
                        window.children[i].children[1].visible = true
                        window.children[i].children[2].visible = false
                    }
                }
            } else{
                for (var i = 0; i < window.children.length; ++i) {
                    if (i != currentIndex) {
                        window.children[i].opacity = 0
                    } else {
                        timer.running = true
                        timer.child = i
                        window.children[i].opacity = 1
                        window.children[i].children[1].visible = true
                        window.children[i].children[2].visible = false
                    }
                }
            }
        }
    }

    Timer {
        id: timer

        property int child : 0
        running: false
        interval: 800
        repeat: false
        onTriggered: {
            window.children[child].children[1].visible = false
            window.children[child].children[2].visible = true
        }
    }

    Rectangle{
        id: window
        width:screen.width-screen.controlPointX * 0.9-5
        height: screen.height-10
        color: "transparent"
        visible: false
        anchors.verticalCenter: parent.verticalCenter
        x: controlPointX * 0.9


        Rectangle{
            color:"transparent"
            anchors.fill:parent
            opacity:0
            MouseArea{
                anchors.fill:parent
              //This mousearea is for disable functionalities under the view
            }
            Text {
                text: iconsModel.get(0).title
                font.pointSize: 0.001 + Math.round( 23 * (screen.height / 424) )
                anchors.centerIn:parent
                color: screen.style.textColor
            }
            ACView { id: acView; anchors.fill: parent; style: screen.style; onCloseWindow: closeSideNavigation()}
        }

        Rectangle{
            color:"transparent"
            anchors.fill:parent
            opacity:1
            MouseArea{
                anchors.fill:parent
                //This mousearea is for disable functionalities under the view
            }
            Text {
                text: iconsModel.get(1).title
                font.pointSize: 0.001 + Math.round( 23 * (screen.height / 424) )
                anchors.centerIn:parent
                color: screen.style.textColor
            }
            Security{ id: securityView; anchors.fill: parent; style: screen.style; onCloseWindow: closeSideNavigation()}
        }

        Rectangle{
            color:"transparent"
            anchors.fill:parent
            opacity:0
            MouseArea{
                anchors.fill:parent
              //This mousearea is for disable functionalities under the view
            }
            Text {
                text: iconsModel.get(2).title
                font.pointSize: 0.001 + Math.round( 23 * (screen.height / 424) )
                anchors.centerIn:parent
                color: screen.style.textColor
            }
            EnergyView{ id: energyView; anchors.fill: parent; style: screen.style; onCloseWindow: closeSideNavigation()}
            onOpacityChanged: energyView.dummyBool = !energyView.dummyBool;

        }

        Rectangle{
            color:"transparent"
            anchors.fill:parent
            MouseArea{
                anchors.fill:parent
              //This mousearea is for disable functionalities under the view
            }
            Text {
                text: iconsModel.get(3).title
                font.pointSize: 0.001 + Math.round( 23 * (screen.height / 424) )
                anchors.centerIn:parent
                color: screen.style.textColor
            }
            ProfilesView{ id: profilesView; anchors.fill: parent; style: screen.style; onProfileChanged: screen.profileChanged(); onSaunaTurnedOff: screen.profileChanged(); onCloseWindow: closeSideNavigation()}
            onOpacityChanged:if(opacity==0){
                profilesView.profileToCustom();
            }
        }
        Rectangle{
            color:"transparent"
            anchors.fill:parent
            MouseArea{
                anchors.fill:parent
                //This mousearea is for disable functionalities under the view
            }
            Text {
                text: iconsModel.get(4).title
                font.pointSize: 0.001 + Math.round( 23 * (screen.height / 424) )
                anchors.centerIn:parent
                color: screen.style.textColor
            }
            Themes{onThemeChange: screen.themeChange(); anchors.fill: parent; onCloseWindow: closeSideNavigation()}
        }


        //AV-View
        Rectangle{
            color:"transparent"
            anchors.fill:parent
            MouseArea{
                anchors.fill:parent
                //This mousearea is for disable functionalities under the view
            }
            Text {
                text: iconsModel.get(5).title
                font.pointSize: 0.001 + Math.round( 23 * (screen.height / 424) )
                anchors.centerIn:parent
                color: screen.style.textColor
            }
            AvView{anchors.fill: parent; style: screen.style; onCloseWindow: closeSideNavigation()}
        }
    }

    Rectangle{
        id:sideBar
        height:sideBarWidth
        width:height
        x:-sideBarWidth/1.8//1.7
        y:-sideBarWidth/2.3
        radius:height/2
        color:style.selectionColor
        smooth:true
        border{width:2;color:style.bgColor}
        Image {
            id: sideBarImage
            x:parent.width/1.8
            y:parent.width/2.0
            width:parent.width/3
            height:parent.width/3
            smooth:true
            source: (open)?"images/open_button.png":"images/close_button.png"

        }
        MouseArea{
            property bool openFirst : false
            anchors.fill:parent
            onClicked:{
                    if (!open) openSideNavigation(openFirst)
                    else closeSideNavigation()
                    openFirst = true
            }
        } 
    }
    onOpenChanged:{
        (open)?sideBarImage.source = "images/open_button.png":sideBarImage.source = "images/close_button.png"
    }
}