results.qml Example File

heartlistener/assets/results.qml
/***************************************************************************
**
** Copyright (C) 2014 BlackBerry Limited. All rights reserved.
** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
** Contact: http://www.qt-project.org/legal
**
** This file is part of the examples of the QtBluetooth module of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:BSD$
** You may use this file under the terms of the BSD license as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
**   * Redistributions of source code must retain the above copyright
**     notice, this list of conditions and the following disclaimer.
**   * Redistributions in binary form must reproduce the above copyright
**     notice, this list of conditions and the following disclaimer in
**     the documentation and/or other materials provided with the
**     distribution.
**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
**     of its contributors may be used to endorse or promote products derived
**     from this software without specific prior written permission.
**
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
**
** $QT_END_LICENSE$
**
****************************************************************************/

import QtQuick 2.0
import "draw.js" as DrawGraph

Rectangle {
    id: results
    color: "#F0EBED"

    Component.onCompleted:  heartRate.obtainResults()

    function getTime() {
        var t = heartRate.time;
        var min = Math.floor(t/60);
        var sec = t%60;
        var r = min + " min " + sec + " sec ";
        return r;
    }

    function drawGraph() {
        var b = plot.height/200;
        var ctx = canvas1.getContext('2d');
        ctx.beginPath()
        ctx.moveTo(10, plot.height- (b*60))
        var size = heartRate.measurementsSize();
        var difference = (plot.width-topbar.width)/size;

        for (var i = 0; i< size; i++) {
            var value = heartRate.measurements(i);
            if (i == 0) {
                ctx.moveTo(10+2, (plot.height- (value*b) + 2));
                ctx.rect((10 + i*difference), (plot.height- (value*b)), 4, 4);

            }
            else {
                ctx.lineTo((10+2 + i*difference), (plot.height- (value*b) + 2));
                ctx.rect((10 + i*difference), (plot.height- (value*b)), 4, 4);
            }

        }
        ctx.fillStyle = "#3870BA"
        ctx.fill()
        ctx.strokeStyle = "#3870BA"
        ctx.stroke()
        ctx.closePath()
    }

    Rectangle {
        id: res
        width: parent.width
        anchors.top: parent.top
        height: 80
        color: "#F0EBED"
        border.color: "#3870BA"
        border.width: 2
        radius: 10
        Text {
            id: restText
            color: "#3870BA"
            font.pixelSize: 34
            anchors.centerIn: parent
            text: "Results"
        }
    }

    Text {
        id: topbar
        text: "200"
        anchors.left: parent.left
        anchors.top: res.bottom
        anchors.rightMargin: 4
        color: "#3870BA"
        z: 50
    }

    Rectangle {
        id: level
        anchors.left: topbar.right

        anchors.top: res.bottom
        height: ((results.height -(res.height + menuLast.height + start.height ))/2)
        width: 3
        color: "#3870BA"
    }

    Text {
        id: middlebar
        anchors.verticalCenter: level.verticalCenter
        anchors.left: parent.left
        text: "100"
        color: "#3870BA"
        z: 50
    }

    Rectangle{
        id: downlevel
        anchors.bottom: cover.top
        width: parent.width
        anchors.left: level.right
        height: 3
        color: "#3870BA"
        z: 50
    }

    Rectangle {
        id: plot
        anchors.left: level.right
        anchors.leftMargin: 15
        width: results.width
        height: ((parent.height-(res.height+menuLast.height+start.height))/2)

        anchors.top: res.bottom
        color: "#F0EBED"
        Canvas {
            id: canvas1
            anchors.fill: parent
            z: 150
            onPaint: drawGraph()
        }
    }

    Rectangle {
        id: cover
        anchors.top: plot.bottom
        anchors.bottom: menuLast.top
        width: parent.width
        height: ((parent.height-(res.height+menuLast.height+start.height))/2)
        color: "#F0EBED"
        radius: 10
        border.color: "#3870BA"
        border.width: 2

        Flickable {
            id: scroll
            anchors.fill: parent
            anchors.margins: 5
            clip: true
            contentWidth: parent.width
            contentHeight: stresult.height

            Rectangle {
                id: stresult
                width: parent.width
                height: (results.height - (res.height + menuLast.height + start.height - 100))
                color: "#F0EBED"
                radius: 10

                Text {
                    id: averageHR
                    font.pixelSize: 30;
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.top: parent.top

                    color: "#3870BA"
                    text: "Average Heart Rate"
                }

                Text {
                    id: averageHRt
                    font.pixelSize: 40; font.bold: true
                    anchors.top: averageHR.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.topMargin: 10
                    color: "#3870BA"
                    text: heartRate.average
                }

                Text {
                    id: time
                    font.pixelSize: 30;
                    anchors.top: averageHRt.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.topMargin: 10
                    color: "#3870BA"
                    text: "Seconds measured:"
                }

                Text {
                    id: timet
                    font.pixelSize:  40; font.bold: true
                    anchors.top: time.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.topMargin: 10
                    color: "#3870BA"
                    text: getTime()
                }
                Text {
                    id: maxi
                    font.pixelSize:  30;
                    anchors.top: timet.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.topMargin: 20
                    color: "#3870BA"
                    text: "  Max  ||  Min "
                }

                Text {
                    id: mini
                    font.pixelSize:  40; font.bold: true
                    anchors.top:maxi.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.topMargin: 10
                    color: "#3870BA"
                    text: " " + heartRate.maxHR + " || " + heartRate.minHR
                }

                Text {
                    id: calories
                    font.pixelSize:  30;
                    anchors.top: mini.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.topMargin: 10
                    color: "#3870BA"
                    text: "  Calories "
                }

                Text {
                    id: caloriestext
                    font.pixelSize:  40; font.bold: true
                    anchors.top:calories.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.topMargin: 10
                    color: "#3870BA"
                    text: heartRate.calories.toFixed(3)
                }
            }
        }
    }

    Button {
        id:menuLast
        buttonWidth: parent.width
        buttonHeight: 0.1*parent.height
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: start.top
        text: "Menu"
        onButtonClick: { pageLoader.source="main.qml"}
    }

    Button {
        id:start
        buttonWidth: parent.width
        buttonHeight: 0.1*parent.height
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        text: "Start Monitoring"
        onButtonClick: {
            heartRate.connectToService(heartRate.deviceAddress());
            pageLoader.source="monitor.qml";
        }
    }
}

© 2015 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.