From d90a4c05c34a38922e78d14856e26305bebe096e Mon Sep 17 00:00:00 2001 From: Charles Yin Date: Wed, 18 May 2011 12:04:06 +1000 Subject: add motion chart canvas example Change-Id: Iccce2c4fc2bdeb4289093fa9675440eff589ae41 --- .../declarative/canvas/motionchart/motionchart.qml | 82 ++++++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 examples/declarative/canvas/motionchart/motionchart.qml (limited to 'examples') diff --git a/examples/declarative/canvas/motionchart/motionchart.qml b/examples/declarative/canvas/motionchart/motionchart.qml new file mode 100644 index 0000000000..7c03471685 --- /dev/null +++ b/examples/declarative/canvas/motionchart/motionchart.qml @@ -0,0 +1,82 @@ +import QtQuick 2.0 + +Canvas { + id:motionChart + width:1300 + height: 700 + property int progress:0 + property applesFrom: [1000, 300]; + property applesTo:[1200, 400]; + property orangesFrom: [1150, 200]; + property orangesTo:[750, 150]; + property bananasFrom: [300, 250]; + property bananasTo:[788, 617]; + + property date startDate:new Date (1988,0,1) + property date endDate:new Date (1989,6,1) + property variant title:["Fruit", "Sales", "Expenses", "Location"]; + + Timer { + id:timer + interval: 1; running: false; repeat: true + onTriggered: { + motionChart.draw(); + } + } + + MouseArea { + anchors.fill: parent + onPressed : { + motionChart.progress = 0; + timer.running = true; + } + } + + function draw() { + var int totalDays = Math.ceil((endDate.getTime()-startDate.getTime())/(1000*60*60*24)); + if (motionChart.progress >= totalDays) { + timer.running = false; + return; + } + var apples = []; + apples[0] = applesFrom[0] + ((applesTo[0] - applesFrom[0]) * (motionChart.progress/totalDays)); + apples[1] = applesFrom[1] + ((applesTo[1] - applesFrom[1]) * (motionChart.progress/totalDays)); + + var oranges = []; + oranges[0] = orangesFrom[0] + ((orangesTo[0] - orangesFrom[0]) * (motionChart.progress/totalDays)); + oranges[1] = orangesFrom[1] + ((orangesTo[1] - orangesFrom[1]) * (motionChart.progress/totalDays)); + + var bananas = []; + bananas[0] = bananasFrom[0] + ((bananasTo[0] - bananasFrom[0]) * (motionChart.progress/totalDays)); + bananas[1] = bananasFrom[1] + ((bananasTo[1] - bananasFrom[1]) * (motionChart.progress/totalDays)); + + var ctx = motionChart.getContext("2d"); + ctx.globalCompositeOperation = "source-over"; + + ctx.clearRect(0, 0, motionChart.width, motionChart.height); + //apples + ctx.fillColor = Qt.rgba(0,1,0,1); + ctx.beginPath(); + ctx.arc( apples[0] , 700 - apples[1] , 20 , 0 , Math.PI * 2 , true ); + ctx.closePath(); + ctx.fill(); + + //oranges + ctx.fillColor = Qt.rgba(0,1,0,1); + ctx.beginPath(); + ctx.arc( oranges[0], 700 - oranges[1] , 20 , 0 , Math.PI * 2 , true ); + ctx.closePath(); + ctx.fill(); + + //bananas + var bananaX =; + var bananaY =; + ctx.fillColor = Qt.rgba(0,1,0,1); + ctx.beginPath(); + ctx.arc( bananas[0] , 700 - bananas[1] , 20 , 0 , Math.PI * 2 , true ); + ctx.closePath(); + ctx.fill(); + + motionChart.progress ++; + } +} -- cgit v1.2.3 From 8df66dbeb54bbdb26d18fdf7b884a694e9c366bd Mon Sep 17 00:00:00 2001 From: Charles Yin Date: Wed, 18 May 2011 13:31:42 +1000 Subject: fix motion chart example bug Change-Id: I0d00d224d815210c8ef45f2289e9ec4d0adea6b5 --- .../declarative/canvas/motionchart/motionchart.qml | 83 ++++++++++++++++++---- 1 file changed, 68 insertions(+), 15 deletions(-) (limited to 'examples') diff --git a/examples/declarative/canvas/motionchart/motionchart.qml b/examples/declarative/canvas/motionchart/motionchart.qml index 7c03471685..c408e99bd8 100644 --- a/examples/declarative/canvas/motionchart/motionchart.qml +++ b/examples/declarative/canvas/motionchart/motionchart.qml @@ -5,17 +5,23 @@ Canvas { width:1300 height: 700 property int progress:0 - property applesFrom: [1000, 300]; - property applesTo:[1200, 400]; - property orangesFrom: [1150, 200]; - property orangesTo:[750, 150]; - property bananasFrom: [300, 250]; - property bananasTo:[788, 617]; + property variant applesFrom: [1000, 300]; + property variant applesTo:[1200, 400]; + property variant orangesFrom: [1150, 200]; + property variant orangesTo:[250, 550]; + property variant bananasFrom: [300, 250]; + property variant bananasTo:[788, 617]; property date startDate:new Date (1988,0,1) property date endDate:new Date (1989,6,1) property variant title:["Fruit", "Sales", "Expenses", "Location"]; + property bool clearTrace:true + Text {id:appleText; text:"Apples"; font.bold:true; font.pixelSize:12; opacity:0} + Text {id:orangeText; text:"Oranges"; font.bold:true; font.pixelSize:12; opacity:0} + Text {id:bananaText; text:"Bananas"; font.bold:true; font.pixelSize:12; opacity:0} + Text {id:sales; text: "700 Sales"; x:15; y:15;font.bold:true; font.pixelSize:15; opacity:0} + Text {id:expenses; text: "Expenses 1300"; x:1170; y:670;font.bold:true; font.pixelSize:15; opacity:0} Timer { id:timer interval: 1; running: false; repeat: true @@ -28,12 +34,48 @@ Canvas { anchors.fill: parent onPressed : { motionChart.progress = 0; + setup(); timer.running = true; + motionChart.clearTrace = true; } + onDoubleClicked : { + motionChart.progress = 0; + setup(); + timer.running = true; + motionChart.clearTrace = false; + } + } + + function setup() { + var ctx = motionChart.getContext("2d"); + ctx.globalCompositeOperation = "source-over"; + ctx.clearRect(0, 0, motionChart.width, motionChart.height); + + ctx.strokeColor = Qt.rgba(133, 133, 133,1); + ctx.lineWidth = 2; + ctx.beginPath(); + ctx.moveTo(10,690); + ctx.lineTo(10, 5); + ctx.moveTo(10,690); + ctx.lineTo(1295, 690); + + for ( var i = 0; i < 10; i++) { + ctx.moveTo(10, i*70); + ctx.lineTo(15, i*70); + ctx.moveTo(i*130, 690); + ctx.lineTo(i*130, 685); + } + + ctx.stroke(); + sales.opacity =1; + expenses.opacity = 1; + appleText.opacity = 1; + orangeText.opacity = 1; + bananaText.opacity = 1; } function draw() { - var int totalDays = Math.ceil((endDate.getTime()-startDate.getTime())/(1000*60*60*24)); + var totalDays = Math.ceil((endDate.getTime()-startDate.getTime())/(1000*60*60*24)); if (motionChart.progress >= totalDays) { timer.running = false; return; @@ -53,30 +95,41 @@ Canvas { var ctx = motionChart.getContext("2d"); ctx.globalCompositeOperation = "source-over"; - ctx.clearRect(0, 0, motionChart.width, motionChart.height); + if (motionChart.clearTrace) + ctx.clearRect(15, 15, motionChart.width - 15, motionChart.height - 30); + + //apples - ctx.fillColor = Qt.rgba(0,1,0,1); + ctx.fillColor = Qt.rgba(0,255,0,1); + ctx.beginPath(); ctx.arc( apples[0] , 700 - apples[1] , 20 , 0 , Math.PI * 2 , true ); - ctx.closePath(); + //ctx.closePath(); ctx.fill(); - + ctx.fillRect(apples[0], 700 - apples[1], 28, 28); + appleText.x = apples[0]; + appleText.y = 700 - apples[1] - 30; //oranges - ctx.fillColor = Qt.rgba(0,1,0,1); + ctx.fillColor = Qt.rgba(0,0,255,1); ctx.beginPath(); ctx.arc( oranges[0], 700 - oranges[1] , 20 , 0 , Math.PI * 2 , true ); ctx.closePath(); ctx.fill(); + ctx.fillRect(oranges[0], 700 - oranges[1], 28, 28); + orangeText.x = oranges[0]; + orangeText.y = 700 - oranges[1] - 30; //bananas - var bananaX =; - var bananaY =; - ctx.fillColor = Qt.rgba(0,1,0,1); + ctx.fillColor = Qt.rgba(255,0,0,1); ctx.beginPath(); ctx.arc( bananas[0] , 700 - bananas[1] , 20 , 0 , Math.PI * 2 , true ); ctx.closePath(); ctx.fill(); + ctx.fillRect(bananas[0], 700 - bananas[1], 28, 28); + bananaText.x = bananas[0]; + bananaText.y = 700 - bananas[1] - 30; + ctx.sync(); motionChart.progress ++; } } -- cgit v1.2.3 From 2e68186a80bff4940fa58b30b6e25c005489f194 Mon Sep 17 00:00:00 2001 From: Charles Yin Date: Wed, 18 May 2011 13:46:16 +1000 Subject: show initial chart in motion chart example Change-Id: I39297ced1c532f633a7c9c6c64c0818bbc852084 --- examples/declarative/canvas/motionchart/motionchart.qml | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'examples') diff --git a/examples/declarative/canvas/motionchart/motionchart.qml b/examples/declarative/canvas/motionchart/motionchart.qml index c408e99bd8..974690e3fc 100644 --- a/examples/declarative/canvas/motionchart/motionchart.qml +++ b/examples/declarative/canvas/motionchart/motionchart.qml @@ -4,7 +4,7 @@ Canvas { id:motionChart width:1300 height: 700 - property int progress:0 + property int progress:-1 property variant applesFrom: [1000, 300]; property variant applesTo:[1200, 400]; property variant orangesFrom: [1150, 200]; @@ -24,8 +24,12 @@ Canvas { Text {id:expenses; text: "Expenses 1300"; x:1170; y:670;font.bold:true; font.pixelSize:15; opacity:0} Timer { id:timer - interval: 1; running: false; repeat: true + interval: 1; running: true; repeat: true onTriggered: { + if (motionChart.progress == -1) { + motionChart.setup(); + running = false; + } motionChart.draw(); } } @@ -46,6 +50,7 @@ Canvas { } } + function setup() { var ctx = motionChart.getContext("2d"); ctx.globalCompositeOperation = "source-over"; -- cgit v1.2.3