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

[Jakub Motyczko]

initial commit of Chart Component

initial commit of Chart Component

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

[lp:~jakub-a/ubuntu-weather-app/ubuntu-weather-app]

6. By Jakub Motyczko on 2013-03-14

removed all debugs

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

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)]

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

[Martin Borho (martin-borho)]

review: Approve

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

review: Approve (continuous-integration)

=== added file 'components/ChartComponent.js'
--- components/ChartComponent.js	1970-01-01 00:00:00 +0000
+++ components/ChartComponent.js	2013-03-14 22:14:19 +0000
@@ -0,0 +1,197 @@
+.pragma library
+
+//canvas object from .pragma
+var canvas = 0;
+var chart = 0;
+
+//enables debugging
+var debug_enabled = 0;
+
+//measurements setted in QML
+var canvasHeight = 0;
+var canvasWidth = 0;
+var canvasXOffset = 0;
+var canvasYOffset = 0;
+
+//array of header labels(times)
+var xLabels = new Array();
+
+function debug(text)
+{
+    if (debug_enabled)
+        console.debug(text);
+}
+
+function refresh()
+{
+    canvas.requestPaint();
+}
+
+//main draw function
+function draw()
+{
+    var context = canvas.getContext("2d");
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    context.save();
+    context.globalAlpha = canvas.alpha;
+
+    drawGrid(context);
+    drawTemperatures(context);
+    drawCurrentTime(context);
+    context.restore();
+}
+
+//draw background grid
+function drawGrid(context)
+{
+    //remove all xLabels
+    while (xLabels.length > 0)
+    {
+        var label = xLabels.pop();
+        label.text = "";
+        label.destroy();
+    }
+
+    var maxHSections = 24;
+    var hSectionSize = canvasWidth/maxHSections;
+
+    var hours = chart.xAxisHours;
+    var startX = 0, startY = 0, endX = 0, endY = 0;
+
+    //draw vertical lines
+    for (var i = 1 ; i < hours.length - 1; i++)
+    {
+        startX = hours[i]*hSectionSize + canvasXOffset;
+        startY = canvas.height;
+        endX = hours[i]*hSectionSize + canvasXOffset;
+        endY = canvasYOffset;
+        drawLine(context, startX, startY, endX, endY, chart.gridColor,1);
+        //create and add hourLabel to the array
+        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"));
+    }
+
+    //draw horizontal lines
+    var vSectionSize = canvasHeight/(chart.gridHorizontalLinesCount + 1);
+    for (var i = 1 ; i < chart.gridHorizontalLinesCount +1  ; i++)
+    {
+        startX = canvasXOffset;
+        startY = i * vSectionSize + canvasYOffset;
+        endX = canvasXOffset+canvas.width;
+        endY = i*vSectionSize + canvasYOffset;
+
+        drawLine(context, startX, startY, endX, endY, chart.gridColor,1);
+    }
+}
+
+//draw current time vertical bar
+function drawCurrentTime(context)
+{
+    var currentMinutes = parseFloat(Qt.formatDateTime(new Date(), "m")) + (parseFloat(Qt.formatDateTime(new Date(), "h")) * 60);
+    var currentTimeWidth = 4;
+    var currentTimeColor = "#DD4814";
+    var position = ((currentMinutes * canvas.width)/(24 * 60)) - (currentTimeWidth/2);
+
+    drawLine(context,position+canvasXOffset, canvas.height,position+canvasXOffset,canvasYOffset+1, currentTimeColor, currentTimeWidth);
+}
+
+//draw temperature points and lines on the chart
+function drawTemperatures(context)
+{
+    context.strokeStyle = chart.trendColor;
+    context.lineWidth = chart.trendWidth;
+
+    var maxTemp = -999;
+    var minTemp = 999;
+    var circleColor = "#DD4814";
+    var circleRadius = 4;
+    var temperatures = chart.temperatures;
+
+    //determine min and max temp
+    for (var i = 0 ; i < temperatures.length ; i++)
+    {
+        if (parseFloat(temperatures[i].temp) > maxTemp)
+            maxTemp = temperatures[i].temp;
+        if (parseFloat(temperatures[i].temp) < minTemp)
+            minTemp = temperatures[i].temp;
+    }
+
+    var positions = new Array();
+
+    //draw temperature points
+    for (var i = 0 ; i < temperatures.length ; i++)
+    {
+        //get time and temp from array
+        var temp = temperatures[i].temp;
+        var times = temperatures[i].time.split(":");
+        var time = (parseFloat(times[0]) * 60) + parseFloat(times[1]);
+
+        //count X and Y based on canvas dimensions and offsets
+        var posX = canvasXOffset + ((time * canvas.width)/(24 * 60)) - (chart.trendWidth/2);
+        var posY = (canvasHeight) - (canvasHeight - canvasYOffset - circleRadius) * ((parseInt(temp) - Math.abs(minTemp)) / (maxTemp - minTemp));
+        if (posY == canvasHeight)
+            posY -= circleRadius;
+
+        //draw temperature point
+        //drawCircle(context, posX, posY, circleRadius, circleColor);
+        positions.push({'posY':posY, 'posX':posX})
+    }
+
+    drawTemperatureLines(context,positions,circleColor);
+}
+
+//draw lines connecting temperature points
+//WORK IN PROGRESS. should be smooth paths
+function drawTemperatureLines(context, positions, color)
+{
+    var posX = 0, posY = 0, prevX, prevY;
+
+    context.save();
+    context.strokeStyle = chart.trendColor;
+    context.lineWidth = 2;
+    context.lineJoin  = "round";
+    context.beginPath();
+
+    for (var i = 0 ; i < positions.length ; i++)
+    {
+        posY = positions[i].posY;
+        posX = positions[i].posX;
+
+        if (i == 0)
+        {
+            context.moveTo(posX, posY);
+        }
+        else
+        {
+            prevX = positions[i-1].posX;
+            prevY = positions[i-1].posY;
+            context.lineTo(posX, posY);
+        }
+    }
+    context.stroke();
+    context.restore();
+}
+
+//general function for circle drawing
+function drawCircle(context, x, y, radius, color)
+{
+  context.save();
+  context.fillStyle = color;
+  context.beginPath();
+  context.arc(x, y, radius,0,Math.PI*2,true); // Outer circle
+  context.fill();
+  context.restore();
+}
+
+//general function for line drawing
+function drawLine(context, startX, startY, endX, endY, color, width)
+{
+    context.save();
+    context.lineWidth = width;
+    context.strokeStyle = color;
+    context.beginPath();
+    context.moveTo(startX,startY);
+    context.lineTo(endX,endY);
+    context.closePath();
+    context.stroke();
+    context.restore();
+}

=== added file 'components/ChartComponent.qml'
--- components/ChartComponent.qml	1970-01-01 00:00:00 +0000
+++ components/ChartComponent.qml	2013-03-14 22:14:19 +0000
@@ -0,0 +1,63 @@
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+import "ChartComponent.js" as ChartFunctions
+
+Rectangle {
+    id: chart
+    anchors.horizontalCenter: parent.horizontalCenter
+    width: parent.width-units.gu(2)
+    height: units.gu(20)
+
+    property string backgroundColor: "#D6D6D6"
+    property string gridColor: "#FFFFFF"
+    property int gridWidth: 1
+    property int gridHorizontalLinesCount: 4
+    property int headerSize: units.gu(4)
+    property string trendColor: "#313131"
+    property int trendWidth: 2
+    //property variant xAxisHours: [0,6,12,18,24]
+    property variant xAxisHours: [0,3,6,9,12,15,18,21,24]
+    property variant temperatures: [{"time" : "0:10", "temp" : "3"},
+                                    {"time" : "2:00", "temp" : "7"},
+                                    {"time" : "6:00", "temp" : "9"},
+                                    {"time" : "10:30", "temp" : "12"},
+                                    {"time" : "12:00", "temp" : "24"},
+                                    {"time" : "18:10", "temp" : "20"},
+                                    {"time" : "22:22", "temp" : "10"}]
+    property bool showExtremeHours: false
+
+    function refresh()
+    {
+        ChartFunctions.refresh();
+    }
+
+    UbuntuShape{
+       id: contentShape
+       radius: "small"
+       width: parent.width
+       height: parent.height-units.gu(6)
+       anchors.bottom: parent.bottom
+       anchors.bottomMargin: units.gu(1)
+       color: backgroundColor
+    }
+    Canvas{
+        id:canvas
+        width: parent.width
+        height: parent.height-units.gu(2)
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: units.gu(1)
+        antialiasing: true
+
+        onPaint: {
+            ChartFunctions.canvas = canvas;
+            ChartFunctions.chart = chart;
+
+            ChartFunctions.canvasHeight = canvas.height;
+            ChartFunctions.canvasWidth = canvas.width;
+            ChartFunctions.canvasXOffset = 0;
+            ChartFunctions.canvasYOffset = canvas.height - contentShape.height;
+
+            ChartFunctions.draw();
+        }
+   }
+}

=== modified file 'weather.qml'
--- weather.qml	2013-03-09 15:34:59 +0000
+++ weather.qml	2013-03-14 22:14:19 +0000
@@ -50,6 +50,9 @@
                                 maxTemp: 25
                                 metric: true
                             }
+                            Components.ChartComponent{
+
+                            }
                             Components.DateComponent {
                                 dateRelative: "Tomorrow"
                                 dateString:"Sunday, 10th February"