Merge lp:~jakub-a/ubuntu-weather-app/ubuntu-weather-app into lp:ubuntu-weather-app/obsolete.trunk

Proposed by Jakub Motyczko on 2013-03-14
Status: Merged
Approved by: Martin Borho on 2013-03-21
Approved revision: 6
Merged at revision: 5
Proposed branch: lp:~jakub-a/ubuntu-weather-app/ubuntu-weather-app
Merge into: lp:ubuntu-weather-app/obsolete.trunk
Diff against target: 283 lines (+263/-0)
3 files modified
components/ChartComponent.js (+197/-0)
components/ChartComponent.qml (+63/-0)
weather.qml (+3/-0)
To merge this branch: bzr merge lp:~jakub-a/ubuntu-weather-app/ubuntu-weather-app
Reviewer Review Type Date Requested Status
Ubuntu Phone Apps Jenkins Bot continuous-integration Approve on 2013-03-21
Martin Borho 2013-03-14 Approve on 2013-03-21
Review via email: mp+153474@code.launchpad.net

Commit message

initial commit of Chart Component

Description of the change

initial commit of Chart Component

unfortunately it hasn't smooth lines as in the concept but I'm looking for solution.

To post a comment you must log in.
6. By Jakub Motyczko on 2013-03-14

removed all debugs

FAILED: Continuous integration, rev:6
No commit message was specified in the merge proposal. Click on the following link and set the commit message (if you want a jenkins rebuild you need to trigger it yourself):
https://code.launchpad.net/~jakub-a/ubuntu-weather-app/ubuntu-weather-app/+merge/153474/+edit-commit-message

http://91.189.93.125:8080/job/ubuntu-weather-app-ci/1/
Executed test runs:
    SUCCESS: http://91.189.93.125:8080/job/ubuntu-weather-app-quantal-amd64-ci/1/console
    SUCCESS: http://91.189.93.125:8080/job/ubuntu-weather-app-raring-amd64-ci/1/console

Click here to trigger a rebuild:
http://91.189.93.125:8080/job/ubuntu-weather-app-ci/1/rebuild

review: Needs Fixing (continuous-integration)
Martin Borho (martin-borho) wrote :

Hi Jakub,

did you specified a commit message already since the last jenkins build?

Cheers
Martin

> FAILED: Continuous integration, rev:6
> No commit message was specified in the merge proposal. Click on the following
> link and set the commit message (if you want a jenkins rebuild you need to
> trigger it yourself):
> https://code.launchpad.net/~jakub-a/ubuntu-weather-app/ubuntu-weather-
> app/+merge/153474/+edit-commit-message
>
> http://91.189.93.125:8080/job/ubuntu-weather-app-ci/1/
> Executed test runs:
> SUCCESS: http://91.189.93.125:8080/job/ubuntu-weather-app-quantal-
> amd64-ci/1/console
> SUCCESS: http://91.189.93.125:8080/job/ubuntu-weather-app-raring-
> amd64-ci/1/console
>
> Click here to trigger a rebuild:
> http://91.189.93.125:8080/job/ubuntu-weather-app-ci/1/rebuild

review: Approve
review: Approve (continuous-integration)

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== added file 'components/ChartComponent.js'
2--- components/ChartComponent.js 1970-01-01 00:00:00 +0000
3+++ components/ChartComponent.js 2013-03-14 22:14:19 +0000
4@@ -0,0 +1,197 @@
5+.pragma library
6+
7+//canvas object from .pragma
8+var canvas = 0;
9+var chart = 0;
10+
11+//enables debugging
12+var debug_enabled = 0;
13+
14+//measurements setted in QML
15+var canvasHeight = 0;
16+var canvasWidth = 0;
17+var canvasXOffset = 0;
18+var canvasYOffset = 0;
19+
20+//array of header labels(times)
21+var xLabels = new Array();
22+
23+function debug(text)
24+{
25+ if (debug_enabled)
26+ console.debug(text);
27+}
28+
29+function refresh()
30+{
31+ canvas.requestPaint();
32+}
33+
34+//main draw function
35+function draw()
36+{
37+ var context = canvas.getContext("2d");
38+ context.clearRect(0, 0, canvas.width, canvas.height);
39+ context.save();
40+ context.globalAlpha = canvas.alpha;
41+
42+ drawGrid(context);
43+ drawTemperatures(context);
44+ drawCurrentTime(context);
45+ context.restore();
46+}
47+
48+//draw background grid
49+function drawGrid(context)
50+{
51+ //remove all xLabels
52+ while (xLabels.length > 0)
53+ {
54+ var label = xLabels.pop();
55+ label.text = "";
56+ label.destroy();
57+ }
58+
59+ var maxHSections = 24;
60+ var hSectionSize = canvasWidth/maxHSections;
61+
62+ var hours = chart.xAxisHours;
63+ var startX = 0, startY = 0, endX = 0, endY = 0;
64+
65+ //draw vertical lines
66+ for (var i = 1 ; i < hours.length - 1; i++)
67+ {
68+ startX = hours[i]*hSectionSize + canvasXOffset;
69+ startY = canvas.height;
70+ endX = hours[i]*hSectionSize + canvasXOffset;
71+ endY = canvasYOffset;
72+ drawLine(context, startX, startY, endX, endY, chart.gridColor,1);
73+ //create and add hourLabel to the array
74+ xLabels.push(Qt.createQmlObject("import QtQuick 2.0;Text{text:\"" + hours[i] +":00\"; y:" + canvasYOffset + " - height; x:" + hours[i]*hSectionSize + "- width/2; color:\"" + chart.trendColor + "\"}", canvas, "labels"));
75+ }
76+
77+ //draw horizontal lines
78+ var vSectionSize = canvasHeight/(chart.gridHorizontalLinesCount + 1);
79+ for (var i = 1 ; i < chart.gridHorizontalLinesCount +1 ; i++)
80+ {
81+ startX = canvasXOffset;
82+ startY = i * vSectionSize + canvasYOffset;
83+ endX = canvasXOffset+canvas.width;
84+ endY = i*vSectionSize + canvasYOffset;
85+
86+ drawLine(context, startX, startY, endX, endY, chart.gridColor,1);
87+ }
88+}
89+
90+//draw current time vertical bar
91+function drawCurrentTime(context)
92+{
93+ var currentMinutes = parseFloat(Qt.formatDateTime(new Date(), "m")) + (parseFloat(Qt.formatDateTime(new Date(), "h")) * 60);
94+ var currentTimeWidth = 4;
95+ var currentTimeColor = "#DD4814";
96+ var position = ((currentMinutes * canvas.width)/(24 * 60)) - (currentTimeWidth/2);
97+
98+ drawLine(context,position+canvasXOffset, canvas.height,position+canvasXOffset,canvasYOffset+1, currentTimeColor, currentTimeWidth);
99+}
100+
101+//draw temperature points and lines on the chart
102+function drawTemperatures(context)
103+{
104+ context.strokeStyle = chart.trendColor;
105+ context.lineWidth = chart.trendWidth;
106+
107+ var maxTemp = -999;
108+ var minTemp = 999;
109+ var circleColor = "#DD4814";
110+ var circleRadius = 4;
111+ var temperatures = chart.temperatures;
112+
113+ //determine min and max temp
114+ for (var i = 0 ; i < temperatures.length ; i++)
115+ {
116+ if (parseFloat(temperatures[i].temp) > maxTemp)
117+ maxTemp = temperatures[i].temp;
118+ if (parseFloat(temperatures[i].temp) < minTemp)
119+ minTemp = temperatures[i].temp;
120+ }
121+
122+ var positions = new Array();
123+
124+ //draw temperature points
125+ for (var i = 0 ; i < temperatures.length ; i++)
126+ {
127+ //get time and temp from array
128+ var temp = temperatures[i].temp;
129+ var times = temperatures[i].time.split(":");
130+ var time = (parseFloat(times[0]) * 60) + parseFloat(times[1]);
131+
132+ //count X and Y based on canvas dimensions and offsets
133+ var posX = canvasXOffset + ((time * canvas.width)/(24 * 60)) - (chart.trendWidth/2);
134+ var posY = (canvasHeight) - (canvasHeight - canvasYOffset - circleRadius) * ((parseInt(temp) - Math.abs(minTemp)) / (maxTemp - minTemp));
135+ if (posY == canvasHeight)
136+ posY -= circleRadius;
137+
138+ //draw temperature point
139+ //drawCircle(context, posX, posY, circleRadius, circleColor);
140+ positions.push({'posY':posY, 'posX':posX})
141+ }
142+
143+ drawTemperatureLines(context,positions,circleColor);
144+}
145+
146+//draw lines connecting temperature points
147+//WORK IN PROGRESS. should be smooth paths
148+function drawTemperatureLines(context, positions, color)
149+{
150+ var posX = 0, posY = 0, prevX, prevY;
151+
152+ context.save();
153+ context.strokeStyle = chart.trendColor;
154+ context.lineWidth = 2;
155+ context.lineJoin = "round";
156+ context.beginPath();
157+
158+ for (var i = 0 ; i < positions.length ; i++)
159+ {
160+ posY = positions[i].posY;
161+ posX = positions[i].posX;
162+
163+ if (i == 0)
164+ {
165+ context.moveTo(posX, posY);
166+ }
167+ else
168+ {
169+ prevX = positions[i-1].posX;
170+ prevY = positions[i-1].posY;
171+ context.lineTo(posX, posY);
172+ }
173+ }
174+ context.stroke();
175+ context.restore();
176+}
177+
178+//general function for circle drawing
179+function drawCircle(context, x, y, radius, color)
180+{
181+ context.save();
182+ context.fillStyle = color;
183+ context.beginPath();
184+ context.arc(x, y, radius,0,Math.PI*2,true); // Outer circle
185+ context.fill();
186+ context.restore();
187+}
188+
189+//general function for line drawing
190+function drawLine(context, startX, startY, endX, endY, color, width)
191+{
192+ context.save();
193+ context.lineWidth = width;
194+ context.strokeStyle = color;
195+ context.beginPath();
196+ context.moveTo(startX,startY);
197+ context.lineTo(endX,endY);
198+ context.closePath();
199+ context.stroke();
200+ context.restore();
201+}
202
203=== added file 'components/ChartComponent.qml'
204--- components/ChartComponent.qml 1970-01-01 00:00:00 +0000
205+++ components/ChartComponent.qml 2013-03-14 22:14:19 +0000
206@@ -0,0 +1,63 @@
207+import QtQuick 2.0
208+import Ubuntu.Components 0.1
209+import "ChartComponent.js" as ChartFunctions
210+
211+Rectangle {
212+ id: chart
213+ anchors.horizontalCenter: parent.horizontalCenter
214+ width: parent.width-units.gu(2)
215+ height: units.gu(20)
216+
217+ property string backgroundColor: "#D6D6D6"
218+ property string gridColor: "#FFFFFF"
219+ property int gridWidth: 1
220+ property int gridHorizontalLinesCount: 4
221+ property int headerSize: units.gu(4)
222+ property string trendColor: "#313131"
223+ property int trendWidth: 2
224+ //property variant xAxisHours: [0,6,12,18,24]
225+ property variant xAxisHours: [0,3,6,9,12,15,18,21,24]
226+ property variant temperatures: [{"time" : "0:10", "temp" : "3"},
227+ {"time" : "2:00", "temp" : "7"},
228+ {"time" : "6:00", "temp" : "9"},
229+ {"time" : "10:30", "temp" : "12"},
230+ {"time" : "12:00", "temp" : "24"},
231+ {"time" : "18:10", "temp" : "20"},
232+ {"time" : "22:22", "temp" : "10"}]
233+ property bool showExtremeHours: false
234+
235+ function refresh()
236+ {
237+ ChartFunctions.refresh();
238+ }
239+
240+ UbuntuShape{
241+ id: contentShape
242+ radius: "small"
243+ width: parent.width
244+ height: parent.height-units.gu(6)
245+ anchors.bottom: parent.bottom
246+ anchors.bottomMargin: units.gu(1)
247+ color: backgroundColor
248+ }
249+ Canvas{
250+ id:canvas
251+ width: parent.width
252+ height: parent.height-units.gu(2)
253+ anchors.bottom: parent.bottom
254+ anchors.bottomMargin: units.gu(1)
255+ antialiasing: true
256+
257+ onPaint: {
258+ ChartFunctions.canvas = canvas;
259+ ChartFunctions.chart = chart;
260+
261+ ChartFunctions.canvasHeight = canvas.height;
262+ ChartFunctions.canvasWidth = canvas.width;
263+ ChartFunctions.canvasXOffset = 0;
264+ ChartFunctions.canvasYOffset = canvas.height - contentShape.height;
265+
266+ ChartFunctions.draw();
267+ }
268+ }
269+}
270
271=== modified file 'weather.qml'
272--- weather.qml 2013-03-09 15:34:59 +0000
273+++ weather.qml 2013-03-14 22:14:19 +0000
274@@ -50,6 +50,9 @@
275 maxTemp: 25
276 metric: true
277 }
278+ Components.ChartComponent{
279+
280+ }
281 Components.DateComponent {
282 dateRelative: "Tomorrow"
283 dateString:"Sunday, 10th February"

Subscribers

People subscribed via source and target branches