From: Charles Yin Date: Wed, 20 Jul 2011 06:13:31 +0000 (+1000) Subject: polish canvas stock chart example X-Git-Url: http://git.silmor.de/gitweb/?a=commitdiff_plain;h=27cfafa52b908caa7be9ec778e079f6069496dfb;p=konrad%2Fqtdeclarative.git polish canvas stock chart example Change-Id: Ie79859af8572c3c79185d98c54c2aae35190d257 Reviewed-on: http://codereview.qt.nokia.com/1908 Reviewed-by: Charles Yin --- diff --git a/examples/declarative/canvas/stockchart/contents/Button.qml b/examples/declarative/canvas/stockchart/contents/Button.qml new file mode 100644 index 0000000..7a88eb5 --- /dev/null +++ b/examples/declarative/canvas/stockchart/contents/Button.qml @@ -0,0 +1,88 @@ +/**************************************************************************** +** +** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the QtDeclarative module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** No Commercial Usage +** This file contains pre-release code and may not be distributed. +** You may use this file in accordance with the terms and conditions +** contained in the Technology Preview License Agreement accompanying +** this package. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Nokia gives you certain additional +** rights. These rights are described in the Nokia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** +** +** +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +Item { + id: container + + signal clicked + + property string text + width: buttonText.width + 28 + height: buttonText.height + 14 + + BorderImage { + id: buttonImage + source: "images/toolbutton.sci" + width: container.width - 10 + height: container.height + } + BorderImage { + id: pressed + opacity: 0 + source: "images/toolbutton.sci" + width: container.width - 10 + height: container.height + } + MouseArea { + id: mouseRegion + anchors.fill: buttonImage + onClicked: { container.clicked(); } + } + Text { + id: buttonText + color: "white" + anchors.centerIn: buttonImage + font.bold: true + font.pointSize: 15 + text: container.text + style: Text.Raised + styleColor: "black" + } + states: [ + State { + name: "Pressed" + when: mouseRegion.pressed == true + PropertyChanges { target: pressed; opacity: 1 } + } + ] +} diff --git a/examples/declarative/canvas/stockchart/contents/ScrollBar.qml b/examples/declarative/canvas/stockchart/contents/ScrollBar.qml new file mode 100644 index 0000000..ad01b03 --- /dev/null +++ b/examples/declarative/canvas/stockchart/contents/ScrollBar.qml @@ -0,0 +1,74 @@ +/**************************************************************************** +** +** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the Qt Mobility Components. +** +** $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 Nokia Corporation 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 + +Item { + id: scrollBar + // The properties that define the scrollbar's state. + // position and pageSize are in the range 0.0 - 1.0. They are relative to the + // height of the page, i.e. a pageSize of 0.5 means that you can see 50% + // of the height of the view. + // orientation can be either 'Vertical' or 'Horizontal' + property real position + property real pageSize + property string orientation : "Vertical" + property alias bgColor: background.color + property alias fgColor: thumb.color + + // A light, semi-transparent background + Rectangle { + id: background + radius: orientation == 'Vertical' ? (width/2 - 1) : (height/2 - 1) + color: "white"; opacity: 0.3 + anchors.fill: parent + } + // Size the bar to the required size, depending upon the orientation. + Rectangle { + id: thumb + opacity: 0.7 + color: "black" + radius: orientation == 'Vertical' ? (width/2 - 1) : (height/2 - 1) + x: orientation == 'Vertical' ? 1 : (scrollBar.position * (scrollBar.width-2) + 1) + y: orientation == 'Vertical' ? (scrollBar.position * (scrollBar.height-2) + 1) : 1 + width: orientation == 'Vertical' ? (parent.width-2) : (scrollBar.pageSize * (scrollBar.width-2)) + height: orientation == 'Vertical' ? (scrollBar.pageSize * (scrollBar.height-2)) : (parent.height-2) + } +} diff --git a/examples/declarative/canvas/stockchart/contents/TitleBar.qml b/examples/declarative/canvas/stockchart/contents/TitleBar.qml new file mode 100644 index 0000000..3a52fcb --- /dev/null +++ b/examples/declarative/canvas/stockchart/contents/TitleBar.qml @@ -0,0 +1,71 @@ +/**************************************************************************** +** +** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the QtDeclarative module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** No Commercial Usage +** This file contains pre-release code and may not be distributed. +** You may use this file in accordance with the terms and conditions +** contained in the Technology Preview License Agreement accompanying +** this package. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Nokia gives you certain additional +** rights. These rights are described in the Nokia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** +** +** +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +Item { + id: titleBar + property string title: "" + + BorderImage { source: "images/titlebar.sci"; width: parent.width; height: parent.height + 14; y: -7 } + + Image { + id: quitButton + anchors.left: parent.left//; anchors.leftMargin: 0 + anchors.verticalCenter: parent.verticalCenter + source: "images/quit.png" + MouseArea { + anchors.fill: parent + onClicked: Qt.quit() + } + } + + Text { + id: categoryText + anchors { + left: quitButton.right; right: parent.right; //leftMargin: 10; rightMargin: 10 + verticalCenter: parent.verticalCenter + } + elide: Text.ElideLeft + text: title + font.bold: true; font.pointSize: 20; color: "White"; style: Text.Raised; styleColor: "Black" + } +} diff --git a/examples/declarative/canvas/stockchart/contents/ToolBar.qml b/examples/declarative/canvas/stockchart/contents/ToolBar.qml new file mode 100644 index 0000000..5f8ca68 --- /dev/null +++ b/examples/declarative/canvas/stockchart/contents/ToolBar.qml @@ -0,0 +1,70 @@ +/**************************************************************************** +** +** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the QtDeclarative module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** No Commercial Usage +** This file contains pre-release code and may not be distributed. +** You may use this file in accordance with the terms and conditions +** contained in the Technology Preview License Agreement accompanying +** this package. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Nokia gives you certain additional +** rights. These rights are described in the Nokia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** +** +** +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 2.0 + +Item { + id: toolbar + + property variant labels + signal buttonClicked(int index) + + BorderImage { + source: "images/titlebar.sci" + width: parent.width + height: parent.height + 14 + y: -7 + } + + Row { + y: 3 + anchors.horizontalCenter: parent.horizontalCenter + Repeater { + model: toolbar.labels + delegate: + Button { + text: modelData + onClicked: toolbar.buttonClicked(model.index) + } + } + } + +} diff --git a/examples/declarative/canvas/stockchart/contents/images/button-pressed.png b/examples/declarative/canvas/stockchart/contents/images/button-pressed.png new file mode 100644 index 0000000..e434d32 Binary files /dev/null and b/examples/declarative/canvas/stockchart/contents/images/button-pressed.png differ diff --git a/examples/declarative/canvas/stockchart/contents/images/button.png b/examples/declarative/canvas/stockchart/contents/images/button.png new file mode 100644 index 0000000..56a63ce Binary files /dev/null and b/examples/declarative/canvas/stockchart/contents/images/button.png differ diff --git a/examples/declarative/canvas/stockchart/contents/images/default.svg b/examples/declarative/canvas/stockchart/contents/images/default.svg new file mode 100644 index 0000000..248199c --- /dev/null +++ b/examples/declarative/canvas/stockchart/contents/images/default.svg @@ -0,0 +1,82 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + weather-clear + January 2006 + + + Ryan Collier (pseudo) + + + + + http://www.tango-project.org + + + http://www.pseudocode.org + + + weather + applet + notification + + + + + + Garrett LeSage + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/examples/declarative/canvas/stockchart/contents/images/gloss.png b/examples/declarative/canvas/stockchart/contents/images/gloss.png new file mode 100755 index 0000000..5d370cd Binary files /dev/null and b/examples/declarative/canvas/stockchart/contents/images/gloss.png differ diff --git a/examples/declarative/canvas/stockchart/contents/images/lineedit.png b/examples/declarative/canvas/stockchart/contents/images/lineedit.png new file mode 100755 index 0000000..2cc38dc Binary files /dev/null and b/examples/declarative/canvas/stockchart/contents/images/lineedit.png differ diff --git a/examples/declarative/canvas/stockchart/contents/images/lineedit.sci b/examples/declarative/canvas/stockchart/contents/images/lineedit.sci new file mode 100644 index 0000000..054bff7 --- /dev/null +++ b/examples/declarative/canvas/stockchart/contents/images/lineedit.sci @@ -0,0 +1,5 @@ +border.left: 10 +border.top: 10 +border.bottom: 10 +border.right: 10 +source: lineedit.png diff --git a/examples/declarative/canvas/stockchart/contents/images/quit.png b/examples/declarative/canvas/stockchart/contents/images/quit.png new file mode 100755 index 0000000..5bda1b6 Binary files /dev/null and b/examples/declarative/canvas/stockchart/contents/images/quit.png differ diff --git a/examples/declarative/canvas/stockchart/contents/images/stripes.png b/examples/declarative/canvas/stockchart/contents/images/stripes.png new file mode 100755 index 0000000..9f36727e Binary files /dev/null and b/examples/declarative/canvas/stockchart/contents/images/stripes.png differ diff --git a/examples/declarative/canvas/stockchart/contents/images/titlebar.png b/examples/declarative/canvas/stockchart/contents/images/titlebar.png new file mode 100755 index 0000000..51c9008 Binary files /dev/null and b/examples/declarative/canvas/stockchart/contents/images/titlebar.png differ diff --git a/examples/declarative/canvas/stockchart/contents/images/titlebar.sci b/examples/declarative/canvas/stockchart/contents/images/titlebar.sci new file mode 100644 index 0000000..0418d94 --- /dev/null +++ b/examples/declarative/canvas/stockchart/contents/images/titlebar.sci @@ -0,0 +1,5 @@ +border.left: 10 +border.top: 12 +border.bottom: 12 +border.right: 10 +source: titlebar.png diff --git a/examples/declarative/canvas/stockchart/contents/images/toolbutton.png b/examples/declarative/canvas/stockchart/contents/images/toolbutton.png new file mode 100755 index 0000000..1131001 Binary files /dev/null and b/examples/declarative/canvas/stockchart/contents/images/toolbutton.png differ diff --git a/examples/declarative/canvas/stockchart/contents/images/toolbutton.sci b/examples/declarative/canvas/stockchart/contents/images/toolbutton.sci new file mode 100644 index 0000000..9e4f965 --- /dev/null +++ b/examples/declarative/canvas/stockchart/contents/images/toolbutton.sci @@ -0,0 +1,5 @@ +border.left: 15 +border.top: 4 +border.bottom: 4 +border.right: 15 +source: toolbutton.png diff --git a/examples/declarative/canvas/stockchart/main.cpp b/examples/declarative/canvas/stockchart/main.cpp index e10f287..b1e7630 100644 --- a/examples/declarative/canvas/stockchart/main.cpp +++ b/examples/declarative/canvas/stockchart/main.cpp @@ -56,6 +56,8 @@ int main(int argc, char ** argv) view.showFullScreen(); view.raise(); + QObject::connect((QObject*)view.engine(), SIGNAL(quit()), (QObject*)&app, SLOT(quit())); + return app.exec(); } diff --git a/examples/declarative/canvas/stockchart/model.cpp b/examples/declarative/canvas/stockchart/model.cpp index 5c1e138..018da1c 100644 --- a/examples/declarative/canvas/stockchart/model.cpp +++ b/examples/declarative/canvas/stockchart/model.cpp @@ -116,7 +116,8 @@ void StockModel::doRequest() .arg(dataCycleString()); qDebug() << "request stock data:" << query; - _manager->get(QNetworkRequest(QUrl(query))); + QNetworkReply* reply = _manager->get(QNetworkRequest(QUrl(query))); + connect(reply, SIGNAL(downloadProgress(qint64,qint64)), SIGNAL(downloadProgress(qint64,qint64))); } } diff --git a/examples/declarative/canvas/stockchart/model.h b/examples/declarative/canvas/stockchart/model.h index c7a0235..ba5f3a8 100644 --- a/examples/declarative/canvas/stockchart/model.h +++ b/examples/declarative/canvas/stockchart/model.h @@ -142,6 +142,7 @@ signals: void startDateChanged(); void endDateChanged(); void dataCycleChanged(); + void downloadProgress(qint64 bytesReceived, qint64 bytesTotal); public slots: void requestData(); diff --git a/examples/declarative/canvas/stockchart/stock.qml b/examples/declarative/canvas/stockchart/stock.qml index 4117932..5011237 100644 --- a/examples/declarative/canvas/stockchart/stock.qml +++ b/examples/declarative/canvas/stockchart/stock.qml @@ -43,15 +43,44 @@ import "contents" Rectangle { id:container - width: 1920; height: 1440 + width: 1920; height: 1200 + color: "#343434"; + Image { source: "contents/images/stripes.png"; fillMode: Image.Tile; anchors.fill: parent; opacity: 1 } + + + TitleBar { + id: titleBar + width: parent.width + anchors.top : container.top + height: 40 + opacity: 0.9 + } + StockModel { id:stockModel dataCycle: StockModel.Daily + function dataCycleName() { + if (dataCycle === StockModel.Weekly) + return "Weekly"; + else if (dataCycle === StockModel.Monthly) + return "Monthly"; + return "Daily"; + } + onDataChanged: { if (view.viewType == "chart") { canvas.requestPaint(); } } + onDownloadProgress: { + if (bytesReceived == bytesTotal && bytesTotal != -1) { + progress.opacity = 0; + } else { + progress.opacity = 0.8; + progress.text = "downloading " + stockModel.dataCycleName() + " data ..."+ Math.round(bytesReceived/1000) + " KB"; + } + } + property string description:""; } @@ -60,27 +89,22 @@ Rectangle { Rectangle { id: header width: parent.width - height: childrenRect.height + height: 20 color: "steelblue" - - Text { - id:t - font.pointSize:15 - horizontalAlignment:Text.AlignHCenter - font.bold: true - font.underline:true - } - - function updateCurrent(price) - { - if (price !== undefined) { - t.text =Qt.formatDate(price.date, "yyyy-MM-dd") + " OPEN:" - + Math.round(price.openPrice*100)/100 + " HIGH:" - + Math.round(price.highPrice*100)/100 + " LOW:" - + Math.round(price.lowPrice*100)/100 + " CLOSE:" - + Math.round(price.closePrice*100)/100 + " VOLUME:" - + price.volume + " ADJ:" - + Math.round(price.adjustedPrice*100)/100; + opacity: 0 + Row { + spacing: 2 + Text { + id:t + font.pointSize:15 + horizontalAlignment:Text.AlignHCenter + font.bold: true + font.underline:true + } + Rectangle { + height:20 + width:50 + Text {text:"Stock list"; font.pointSize:15; font.bold: true} } } } @@ -88,14 +112,20 @@ Rectangle { ListView { id:stockList width: parent.width - height: container.height anchors.bottom: container.bottom + anchors.top : titleBar.bottom focus: true keyNavigationWraps: true spacing:1 opacity: 1 model: stocks + Component.onCompleted: opacity = 0.9; + onOpacityChanged: { + titleBar.title = "Top 100 NASDAQ stocks" + } + + delegate : Rectangle { height: 30 width: view.width @@ -116,6 +146,7 @@ Rectangle { stockModel.description = "NASDAQ:" + stockId + " (" + name + ")"; view.opacity = 1; view.viewType = "chart"; + canvas.opacity = 0.7; } onClicked: stockList.currentIndex = index }//mousearea @@ -147,6 +178,13 @@ Rectangle { property int topIndex:indexAt(0,contentY); property int bottomIndex:indexAt(0, contentY+height); + onCountChanged: { + + titleBar.title = stockModel.description + " " + Qt.formatDate(stockModel.startDate, "yyyy-MM-dd") + " - " + + Qt.formatDate(stockModel.endDate, "yyyy-MM-dd") + " " + stockModel.dataCycleName() + + " records:" + view.count; + + } Component { id: listDelegate @@ -240,21 +278,11 @@ Rectangle { view.orientation = ListView.Horizontal; view.delegate = chartDelegate; //comment.opacity = 0.6; - var dataCycle = "Daily"; - - if (stockModel.dataCycle === StockModel.Weekly) - dataCycle = "Weekly"; - else if (stockModel.dataCycle === StockModel.Monthly) - dataCycle = "Monthly"; - - comment.text = stockModel.description + "\n" + - Qt.formatDate(stockModel.startDate, "yyyy-MM-dd") + " - " + - Qt.formatDate(stockModel.endDate, "yyyy-MM-dd") + " " + dataCycle; view.opacity = 1; view.height = 30 - canvas.opacity = 1; + canvas.opacity = 0.7; canvas.requestPaint(); } else { viewType = "list"; @@ -263,7 +291,7 @@ Rectangle { onCurrentIndexChanged: { - header.updateCurrent(stockModel.stockPriceAtIndex(view.currentIndex)); + //header.updateCurrent(stockModel.stockPriceAtIndex(view.currentIndex)); if (viewType == "chart") { canvas.first = Math.round(view.currentIndex - view.currentIndex / canvas.scaleX); canvas.last = Math.round(view.currentIndex + (view.count - view.currentIndex) / canvas.scaleX); @@ -310,11 +338,12 @@ Rectangle { Canvas { id:canvas - anchors.top : header.bottom + anchors.top : titleBar.bottom anchors.bottom : view.top width:container.width; opacity:0 - + property bool running:false + property int frames:first property int mouseX:0; property int mouseY:0; property int mousePressedX:0; @@ -337,26 +366,85 @@ Rectangle { color:"white" opacity: 0.7 focus:false + text: stockModel.description + function updateCurrent(price) + { + if (price !== undefined) { + text =stockModel.description + "\n" + + Qt.formatDate(price.date, "yyyy-MM-dd") + " OPEN:" + + Math.round(price.openPrice*100)/100 + " HIGH:" + + Math.round(price.highPrice*100)/100 + " LOW:" + + Math.round(price.lowPrice*100)/100 + " CLOSE:" + + Math.round(price.closePrice*100)/100 + " VOLUME:" + + price.volume; + } + } } -// Text { -// id:priceAxis -// x:25 -// y:25 -// font.pointSize: 15 -// color:"yellow" -// opacity: 0.7 -// focus: false -// } -// Text { -// id:volumeAxis -// x:canvas.width - 25 -// y:25 -// font.pointSize: 15 -// color:"yellow" -// opacity: 0.7 -// } + Text { + id:priceAxis + x:25 + y:25 + font.pointSize: 15 + color:"yellow" + opacity: 0.7 + focus: false + } + Text { + id:volumeAxis + x:canvas.width - 200 + y:25 + font.pointSize: 15 + color:"yellow" + opacity: 0.7 + } + Rectangle { + id:progress + x:canvas.width/2 - 100 + y:canvas.height/2 + width:childrenRect.width + height: childrenRect.height + opacity: 0 + color:"white" + property string text; + Text { + text:parent.text + font.pointSize: 20 + } + } + + Button { + id:runButton + text:"Run this chart" + y:0 + x:canvas.width/2 - 50 + opacity: 0.5 + onClicked: { + if (canvas.running) { + canvas.running = false; + canvas.frames = canvas.first; + canvas.requestPaint(); + text = "Run this chart"; + comment.text = stockModel.description; + } else { + text = " Stop running "; + canvas.runChart(); + } + } + } + Button { + id:returnButton + text:"Stocks" + y:0 + anchors.left : runButton.right + anchors.leftMargin : 20 + opacity: 0.5 + onClicked: { + stockList.opacity = 1; + canvas.opacity = 0; + } + } PinchArea { anchors.fill: parent onPinchUpdated : { @@ -441,9 +529,14 @@ Rectangle { } } + function runChart() { + canvas.running = true; + requestPaint(); + } + function showPriceAt(x) { var w = (view.width/view.count)*canvas.scaleX; - header.updateCurrent(stockModel.stockPriceAtIndex(canvas.first + Math.round(x/w))); + //header.updateCurrent(stockModel.stockPriceAtIndex(canvas.first + Math.round(x/w))); //console.log("x:" + x + " w:" + w + " index:" + (canvas.first + Math.round(x/w))); } @@ -455,7 +548,7 @@ Rectangle { ctx.beginPath(); //price x axis -// priceAxis.text = "price:" + Math.round(highest); + priceAxis.text = "price:" + Math.round(highest); ctx.font = "bold 12px sans-serif"; ctx.strokeText("price", 25, 25); @@ -479,7 +572,8 @@ Rectangle { var w = canvas.width/points.length; - for (var i = 0; i < points.length; i++) { + var end = canvas.running? canvas.frames - canvas.first :points.length; + for (var i = 0; i < end; i++) { var x = points[i].x; var y = points[i][price]; y += canvas.movedY; @@ -498,7 +592,8 @@ Rectangle { { ctx.globalAlpha = 0.4; ctx.lineWidth = 2; - for (var i = 0; i < points.length; i++) { + var end = canvas.running? canvas.frames - canvas.first :points.length; + for (var i = 0; i < end; i++) { var x = points[i].x; var open = canvas.height * (1 - points[i].open/highest) - canvas.movedY; var close = canvas.height * (1 - points[i].close/highest) - canvas.movedY; @@ -540,7 +635,7 @@ Rectangle { ctx.lineWidth = 1; //volume x axis -// volumeAxis.text = "volume:" + Math.round(highest); + volumeAxis.text = "volume:" + Math.round(highest/(1000*100)) + "M"; for (var j = 1; j < 30; j++) { var val = (highest * j) / 30; val = canvas.height * (1 - val/highest); @@ -558,7 +653,8 @@ Rectangle { ctx.lineTo(canvas.width - 10, canvas.height); ctx.stroke(); - for (var i = 0; i < points.length; i++) { + var end = canvas.running? canvas.frames - canvas.first :points.length; + for (var i = 0; i < end; i++) { var x = points[i].x; var y = points[i][price]; y = canvas.height * (1 - y/highest); @@ -566,6 +662,27 @@ Rectangle { } } + onPainted : { + if (canvas.running) { + if (frames >= last) { + canvas.running = false; + canvas.frames = first; + runButton.text = "Run this chart"; + comment.text = stockModel.description; + requestPaint(); + } else { + frames += Math.round(view.count / 100); + if (frames > last) frames = last; + var price = stockModel.stockPriceAtIndex(frames); + if (price) { + comment.updateCurrent(price); + } + + requestPaint(); + } + } + } + onPaint: { if (view.currentIndex <= 0) first = 0; diff --git a/examples/declarative/canvas/stockchart/stockchart.pro b/examples/declarative/canvas/stockchart/stockchart.pro index 7101c4c..832b2ea 100644 --- a/examples/declarative/canvas/stockchart/stockchart.pro +++ b/examples/declarative/canvas/stockchart/stockchart.pro @@ -12,4 +12,9 @@ CONFIG += console OTHER_FILES += \ stock.qml \ - contents/Stocks.qml + contents/Stocks.qml \ + contents/ScrollBar.qml \ + contents/TitleBar.qml \ + contents/Button.qml \ + contents/ToolBar.qml + diff --git a/examples/declarative/canvas/stockchart/stockchart.qrc b/examples/declarative/canvas/stockchart/stockchart.qrc index 68702ab..1793bda 100644 --- a/examples/declarative/canvas/stockchart/stockchart.qrc +++ b/examples/declarative/canvas/stockchart/stockchart.qrc @@ -2,6 +2,20 @@ stock.qml contents/Stocks.qml + contents/TitleBar.qml + contents/ToolBar.qml + contents/Button.qml + contents/images/button.png + contents/images/button-pressed.png + contents/images/gloss.png + contents/images/lineedit.png + contents/images/lineedit.sci + contents/images/quit.png + contents/images/stripes.png + contents/images/titlebar.png + contents/images/titlebar.sci + contents/images/toolbutton.png + contents/images/toolbutton.sci