homecontrol/EnergyView.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 "javascript/sql.js" as HCS
import "javascript/energyView.js" as Graph
import "../colibri"
import "../colibri/gradients"
import "styles"

Item {
    id: structure

    property CLStyle style : StyleHomeControlSystem{}
    property bool dummyBool : false

    signal closeWindow()

    width: 640
    height: 424

    onDummyBoolChanged: {
        if( viewi2.z > 0 ) Graph.loadConsumption();
    }

    Component.onCompleted: Graph.loadConsumption();


    MouseArea {
        anchors.fill: parent;
    }

    Rectangle{
        id: rec
        width: structure.width*0.955
        height: structure.height*0.88
        color: structure.style.selectionColor
        anchors.horizontalCenter: parent.horizontalCenter
        radius:7
        y: energyCLTab.tabHeight
    }

    RoomExitButton {
        windowWidth: structure.width
        windowHeight: structure.height
        style: structure.style
        z: 5
        onClicked: structure.closeWindow();
    }

    CLTab {
        id: energyCLTab
        style: structure.style
        tabHeight: parent.width*0.07
        contentColor: "transparent"
        borderColor: "transparent"
        tabColorWhenSelected:style.selectionColor
        tabColor:style.colorWhenDefault
        headerMarginSides: parent.width*0.03
        anchors.fill:parent

        Item {
            id: viewi1
            width: parent.width
            height: parent.height * 1.038
            anchors.bottom: parent.bottom
            property string title : "Monthly history"
            Image {
                source: "images/control_bg_trans_420x275_png.png";
                anchors.fill: parent;
                smooth: true
                opacity:0.7
            }

            Rectangle {
                id: graph
                width: structure.width * 0.7
                height: structure.height * 0.55
                x: structure.width * 0.22
                anchors.verticalCenter: parent.verticalCenter
                color: "transparent"
                Rectangle {
                    id: graphRect
                    border.width: 2
                    border.color: style.borderColor
                    width: parent.width - border.width
                    height: parent.height - border.width
                    x: border.width / 2
                    color:"transparent"

                    CLHistogram {
                        id: histogram
                        width: parent.width - parent.border.width/2
                        height: parent.height - parent.border.width/2
                        x: parent.border.width / 2
                        y: parent.border.width / 2
                        style: structure.style
                        colorWhenDefault: structure.style.textColor
                        gradientDefaultOn: false
                        Component.onCompleted: Graph.onStartUp()
                        gradientWhenDefault: style.gradientWhenDefault
                    }

                }
            }

            Text {
                text: histogram.maxValue + " - "
                verticalAlignment: Text.AlignVCenter
                anchors.right: graph.left
                anchors.verticalCenter: graph.top
                font.pixelSize: 1 + Math.round( 19 * (structure.height/424) )
                color: structure.style.textColor
            }
            Text {
                text: Math.round(histogram.maxValue*0.75) + " - "
                verticalAlignment: Text.AlignVCenter
                anchors.right: graph.left
                anchors.verticalCenter: graph.verticalCenter
                anchors.verticalCenterOffset: -Math.round(graph.height*0.25)
                font.pixelSize: 1 + Math.round( 19 * (structure.height/424) )
                color: structure.style.textColor
            }
            Text {
                text: Math.round(histogram.maxValue*0.5) + " - "
                verticalAlignment: Text.AlignVCenter
                anchors.right: graph.left
                anchors.verticalCenter: graph.verticalCenter
                font.pixelSize: 1 + Math.round( 19 * (structure.height/424) )
                color: structure.style.textColor
            }
            Text {
                text: Math.round(histogram.maxValue*0.25) + " - "
                verticalAlignment: Text.AlignVCenter
                anchors.right: graph.left
                anchors.verticalCenter: graph.verticalCenter
                anchors.verticalCenterOffset: Math.round(graph.height*0.25)
                font.pixelSize: 1 + Math.round( 19 * (structure.height/424) )
                color: structure.style.textColor
            }
            Text {
                text: "0 - "
                verticalAlignment: Text.AlignVCenter
                anchors.right: graph.left
                anchors.verticalCenter: graph.bottom
                anchors.verticalCenterOffset: -3
                font.pixelSize: 1 + Math.round( 19 * (structure.height/424) )
                color: structure.style.textColor
            }


            Rectangle {
                id: controls
                gradient: style.gradientWhenDefault //Blue{}
                height: Math.round( 40 * (graph.height / (424*0.55)) )
                anchors.left: graph.left
                anchors.right: graph.right
                anchors.bottom: graph.top
                anchors.bottomMargin: 0
                Text {
                    id: weekYear
                    text: "Year " + Graph.yearNumber()
                    color: structure.style.textColor
                    font.pixelSize: 1 + Math.round( parent.height * 0.8 );
                    anchors.centerIn: parent
                    font.bold: true
                }
                Rectangle {
                    height: parent.height
                    width: parent.width / 2
                    anchors.left: parent.left
                    color: "transparent"
                    Text {
                        text: "<<"
                        color: structure.style.textColor
                        font.pixelSize: 1 + Math.round( parent.height * 0.8 );
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.left: parent.left
                        anchors.leftMargin: 5
                        font.bold: true
                    }
                    MouseArea {
                        anchors.fill: parent
                        onClicked: Graph.showWeek( Graph.currentWeek + 1 );
                    }
                }
                Rectangle {
                    height: parent.height
                    width: parent.width / 2
                    anchors.right: parent.right
                    color: "transparent"
                    Text {
                        text: ">>"
                        color: structure.style.textColor
                        font.pixelSize: 1 + Math.round( parent.height * 0.8 );
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.right: parent.right
                        anchors.rightMargin: 5
                        font.bold: true
                    }
                    MouseArea {
                        anchors.fill: parent
                        onClicked: Graph.showWeek( Graph.currentWeek - 1 );
                    }
                }
            }

            Rectangle {
                id: dayNames
                gradient: structure.style.gradientWhenDefault
                height: Math.round( 40 * (graph.height / (424*0.55)) )
                anchors.left: graph.left
                anchors.right: graph.right
                anchors.top: graph.bottom
                anchors.topMargin: -1
                Rectangle {
                    height: parent.height
                    width: histogram.width - 2*histogram.spacing
                    x: histogram.spacing
                    anchors.centerIn: parent
                    color: "transparent"
                    Row {
                        anchors.fill: parent
                        spacing: histogram.spacing
                        Text {
                            text: "J"
                            color: structure.style.textColor
                            font.pixelSize: 1 + Math.round( parent.height * 0.5 );
                            font.bold: true
                            horizontalAlignment: Text.AlignHCenter
                            width: Math.round( ( (parent.width) - (histogram.spacing*(histogram.countVisible()-1)) ) / histogram.countVisible() );
                        }
                        Text {
                            text: "F"
                            color: structure.style.textColor
                            font.pixelSize: 1 + Math.round( parent.height * 0.5 );
                            font.bold: true
                            horizontalAlignment: Text.AlignHCenter
                            width: Math.round( ( (parent.width) - (histogram.spacing*(histogram.countVisible()-1)) ) / histogram.countVisible() );
                        }
                        Text {
                            text: "M"
                            color: structure.style.textColor
                            font.pixelSize: 1 + Math.round( parent.height * 0.5 );
                            font.bold: true
                            horizontalAlignment: Text.AlignHCenter
                            width: Math.round( ( (parent.width) - (histogram.spacing*(histogram.countVisible()-1)) ) / histogram.countVisible() );
                        }
                        Text {
                            text: "A"
                            color: structure.style.textColor
                            font.pixelSize: 1 + Math.round( parent.height * 0.5 );
                            font.bold: true
                            horizontalAlignment: Text.AlignHCenter
                            width: Math.round( ( (parent.width) - (histogram.spacing*(histogram.countVisible()-1)) ) / histogram.countVisible() );
                        }
                        Text {
                            text: "M"
                            color: structure.style.textColor
                            font.pixelSize: 1 + Math.round( parent.height * 0.5 );
                            font.bold: true
                            horizontalAlignment: Text.AlignHCenter
                            width: Math.round( ( (parent.width) - (histogram.spacing*(histogram.countVisible()-1)) ) / histogram.countVisible() );
                        }
                        Text {
                            text: "J"
                            color: structure.style.textColor
                            font.pixelSize: 1 + Math.round( parent.height * 0.5 );
                            font.bold: true
                            horizontalAlignment: Text.AlignHCenter
                            width: Math.round( ( (parent.width) - (histogram.spacing*(histogram.countVisible()-1)) ) / histogram.countVisible() );
                        }
                        Text {
                            text: "J"
                            color: structure.style.textColor
                            font.pixelSize: 1 + Math.round( parent.height * 0.5 );
                            font.bold: true
                            horizontalAlignment: Text.AlignHCenter
                            width: Math.round( ( (parent.width) - (histogram.spacing*(histogram.countVisible()-1)) ) / histogram.countVisible() );
                        }
                        Text {
                            text: "A"
                            color: structure.style.textColor
                            font.pixelSize: 1 + Math.round( parent.height * 0.5 );
                            font.bold: true
                            horizontalAlignment: Text.AlignHCenter
                            width: Math.round( ( (parent.width) - (histogram.spacing*(histogram.countVisible()-1)) ) / histogram.countVisible() );
                        }
                        Text {
                            text: "S"
                            color: structure.style.textColor
                            font.pixelSize: 1 + Math.round( parent.height * 0.5 );
                            font.bold: true
                            horizontalAlignment: Text.AlignHCenter
                            width: Math.round( ( (parent.width) - (histogram.spacing*(histogram.countVisible()-1)) ) / histogram.countVisible() );
                        }
                        Text {
                            text: "O"
                            color: structure.style.textColor
                            font.pixelSize: 1 + Math.round( parent.height * 0.5 );
                            font.bold: true
                            horizontalAlignment: Text.AlignHCenter
                            width: Math.round( ( (parent.width) - (histogram.spacing*(histogram.countVisible()-1)) ) / histogram.countVisible() );
                        }
                        Text {
                            text: "N"
                            color: structure.style.textColor
                            font.pixelSize: 1 + Math.round( parent.height * 0.5 );
                            font.bold: true
                            horizontalAlignment: Text.AlignHCenter
                            width: Math.round( ( (parent.width) - (histogram.spacing*(histogram.countVisible()-1)) ) / histogram.countVisible() );
                        }
                        Text {
                            text: "D"
                            color: structure.style.textColor
                            font.pixelSize: 1 + Math.round( parent.height * 0.5 );
                            font.bold: true
                            horizontalAlignment: Text.AlignHCenter
                            width: Math.round( ( (parent.width) - (histogram.spacing*(histogram.countVisible()-1)) ) / histogram.countVisible() );
                        }
                    }

                }
            }
        }

        Item {
            id: viewi2
            width: parent.width
            height: parent.height * 1.04
            anchors.bottom: parent.bottom
            property string title : "Current consumption"
            Image {
                source: "images/control_bg_trans_420x275_png.png";
                anchors.fill: parent;
                smooth: true
                opacity:0.7
            }

            MouseArea {
                anchors.fill: parent;
            }

            Text {
                text: "Current consumption (kWh)"
                font.pointSize:0.001 + structure.height*0.04
                color: structure.style.textColor
                x: Math.round( structure.width * 0.05 )
                y: Math.round( structure.height * 0.2 )
            }
            Grid {
                id: grid
                columns: 2
                spacing: 2
                x: Math.round( structure.width * 0.10 )
                y: Math.round( structure.height * 0.3 )
                z: 2
                Text { text: "Lights "; font.pixelSize: 1 + Math.round( 21 * (structure.height / 404) ); horizontalAlignment: Text.AlignLeft; color: structure.style.textColor; }
                Text { text: " 60"; id: lightsW; font.pixelSize: 1 + Math.round( 21 * (structure.height / 404) ); horizontalAlignment: Text.AlignRight; color: structure.style.textColor; }

                Text { text: "AV "; font.pixelSize: 1 + Math.round( 21 * (structure.height / 404) ); horizontalAlignment: Text.AlignLeft; color: structure.style.textColor; }
                Text { text: " 60"; id: avW; font.pixelSize: 1 + Math.round( 21 * (structure.height / 404) ); horizontalAlignment: Text.AlignRight; color: structure.style.textColor; }

                Text { text: "Appliances "; font.pixelSize: 1 + Math.round( 21 * (structure.height / 404) ); horizontalAlignment: Text.AlignLeft; color: structure.style.textColor; }
                Text { text: " 60"; id: machinesW; font.pixelSize: 1 + Math.round( 21 * (structure.height / 404) ); horizontalAlignment: Text.AlignRight; color: structure.style.textColor; }

                Text { text: "Sauna "; font.pixelSize: 1 + Math.round( 21 * (structure.height / 404) ); horizontalAlignment: Text.AlignLeft; color: structure.style.textColor; }
                Text { text: " 60"; id: saunaW; font.pixelSize: 1 + Math.round( 21 * (structure.height / 404) ); horizontalAlignment: Text.AlignRight; color: structure.style.textColor; }

                Text { text: "Heating "; font.pixelSize: 1 + Math.round( 21 * (structure.height / 404) ); horizontalAlignment: Text.AlignLeft; color: structure.style.textColor; }
                Text { text: " 60"; id: heatingW; font.pixelSize: 1 + Math.round( 21 * (structure.height / 404) ); horizontalAlignment: Text.AlignRight; color: structure.style.textColor; }

                Text { text: "Misc. "; font.pixelSize: 1 + Math.round( 21 * (structure.height / 404) ); horizontalAlignment: Text.AlignLeft; color: structure.style.textColor; }
                Text { text: " 60"; id: miscW; font.pixelSize: 1 + Math.round( 21 * (structure.height / 404) ); horizontalAlignment: Text.AlignRight; color: structure.style.textColor; }
            }

            CLHistogram {
                id: histogram2
                height: structure.width - (grid.x) - (20 * (structure.width/518)) //structure.width - (grid.x + grid.width + 15) - (20 * (structure.width/518))
                width: grid.height
                spacing: 1
                clip: false
                anchors.verticalCenter: grid.verticalCenter
                x: grid.x - ( (histogram2.width - histogram2.height) / 2) //grid.x + grid.width - ( (histogram2.width - histogram2.height) / 2) + 15
                rotation: 90
                style: structure.style
                colorWhenDefault:style.bgColor

                z: 1
            }

            Rectangle {
                id: ruler
                color: "black"
                width: grid.width + 20
                anchors.horizontalCenter: grid.horizontalCenter
                height: 1
                anchors.top: grid.bottom
                anchors.topMargin: 4
            }
            Text {
                text: "Total"
                font.pixelSize: 1 + Math.round( 21 * (structure.height / 424) )
                anchors.top: ruler.bottom
                anchors.topMargin: 6
                anchors.left: ruler.left
                anchors.leftMargin: 10
                color: structure.style.textColor
            }
            Text {
                id: total
                text: "600"
                font.pixelSize: 1 + Math.round( 21 * (structure.height / 424) )
                anchors.top: ruler.bottom
                anchors.topMargin: 6
                anchors.right: ruler.right
                anchors.rightMargin: 10
                color: structure.style.textColor
            }
        }
    }
}