Merge lp:~martin-borho/ubuntu-weather-app/GradientBackgrounds into lp:ubuntu-weather-app/obsolete.trunk

[Martin Borho]

Dynamic gradient backgrounds according to the visual design.

Dynamic gradient backgrounds according to the visual design.

Bug #1213043 won't bite us, since all 3 backgrounds (header, footer...) are updated.

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

PASSED: Continuous integration, rev:100
http://91.189.93.70:8080/job/ubuntu-weather-app-ci/20/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests/49
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-weather-app-precise-amd64-ci/18
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-weather-app-quantal-amd64-ci/18
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-weather-app-raring-amd64-ci/18
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-weather-app-saucy-amd64-ci/18

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

review: Approve (continuous-integration)

[Raúl Yeguas (neokore)]

Good job, Martin! The gradients works great!
Maybe some colors are very saturated because they give me the feeling of very hot weather with only 23ºC for example, but this is something we should talk with the design team or maybe I need to try it with a real device. What do you think?

review: Approve

[Martin Borho (martin-borho)]

Yes, indeed! It appears even more "upfront" on the galaxy nexus. (OLED screen?)

Perhaps something like a "grey" layer above would make the colors a little bit more suitable. But I'm no designer, though...

=== added file 'components/GradientsMap.js'
--- components/GradientsMap.js	1970-01-01 00:00:00 +0000
+++ components/GradientsMap.js	2013-08-23 19:40:35 +0000
@@ -0,0 +1,60 @@
+.pragma library
+
+
+var map = {
+    "40": "#8c009c",
+    "38": "#76007f",
+    "36": "#65005f",
+    "34": "#600043",
+    "32": "#67002e",
+    "30": "#790023",
+    "28": "#92001d",
+    "26": "#ac0019",
+    "24": "#c30213",
+    "22": "#d8070c",
+    "20": "#e91109",
+    "18": "#f52109",
+    "16": "#fb350e",
+    "14": "#fe4e17",
+    "12": "#ff6721",
+    "10": "#ff812c",
+    "8": "#ff983a",
+    "6": "#ffae47",
+    "4": "#ffc056",
+    "2": "#ffd067",
+    "0": "#ffdc77",
+    "-2": "#ffe788",
+    "-4": "#fdf5a1",
+    "-6": "#effdbc",
+    "-8": "#ccf7bb",
+    "-10": "#a6eeb8",
+    "-12": "#85e4bd",
+    "-14": "#64d9c9",
+    "-16": "#43c9d3",
+    "-18": "#27b3d9",
+    "-20": "#1497d7",
+    "-22": "#0878cf",
+    "-24": "#055ac3",
+    "-26": "#0641b6",
+    "-28": "#0b2ca8",
+    "-30": "#191f9b",
+    "-32": "#261b97",
+    "-34": "#2b1b97",
+    "-36": "#311c97",
+    "-38": "#381d97",
+    "-40": null
+}
+
+var getGradients = function(celsius) {
+    // stay in range
+    if(celsius < -34) celsius = -34;
+    else if(celsius > 40) celsius = 40;
+    // get anchor value
+    celsius = (celsius % 2 == 1 || celsius % 2 == -1) ? celsius +1 : celsius;
+    //
+    return {
+        header: map[celsius],
+        body: map[celsius-2],
+        footer: map[celsius-4]
+    }
+}

=== modified file 'components/LocationTab.qml'
--- components/LocationTab.qml	2013-08-22 10:14:54 +0000
+++ components/LocationTab.qml	2013-08-23 19:40:35 +0000
@@ -39,6 +39,14 @@
         return Qt.formatTime(date, format)
     }
 
+    onVisibleChanged: {
+        var currentIndex = dailyForecastList.currentIndex;
+        if(visible == true && currentIndex > -1) {
+            var data = dayForecastModel.get(currentIndex)
+            adjustBackground(Math.round(data.temp))
+        }
+    }
+
     Component.onCompleted: {
         var locData = mainView.locationsList[locationIndex],
             units = (mainView.settings.units === 'imperial') ? 'imperial' : 'metric',
@@ -108,7 +116,15 @@
             height:parent.height
             model:dayForecastModel
 
+            onCurrentIndexChanged: {
+                if(visible) {
+                    var data = dayForecastModel.get(currentIndex)
+                    adjustBackground(Math.round(data.temp))
+                }
+            }
+
             snapMode: ListView.SnapOneItem
+            highlightRangeMode: ListView.StrictlyEnforceRange
             verticalLayoutDirection: ListView.TopToBottom
             flickableDirection: Flickable.VerticalFlick
             clip: true

=== removed file 'components/OpenWeatherMap.js'
--- components/OpenWeatherMap.js	2013-03-04 20:10:29 +0000
+++ components/OpenWeatherMap.js	1970-01-01 00:00:00 +0000
@@ -1,49 +0,0 @@
-.pragma library
-
-function getConditionIcon(condition){
-    var map = {
-        "200": "11",
-        "201": "11",
-        "202": "11",
-        "210": "11",
-        "211": "11",
-        "212": "11",
-        "221": "11",
-        "230": "11",
-        "231": "11",
-        "232": "11",
-        "300": "09",
-        "301": "09",
-        "302": "09",
-        "310": "09",
-        "311": "09",
-        "312": "09",
-        "321": "09",
-        "500": "10",
-        "501": "10",
-        "502": "10",
-        "503": "10",
-        "504": "10",
-        "511": "13",
-        "520": "09",
-        "521": "09",
-        "522": "09",
-        "600": "13",
-        "601": "13",
-        "602": "13",
-        "611": "13",
-        "621": "13",
-        "701": "50",
-        "711": "50",
-        "721": "50",
-        "731": "50",
-        "741": "50",
-        "800": "01",
-        "801": "02",
-        "802": "03",
-        "803": "04",
-        "804": "04"
-    }
-
-    return map[condition];
-}

=== modified file 'components/WeatherTemperatureComponent.qml'
--- components/WeatherTemperatureComponent.qml	2013-08-22 12:07:35 +0000
+++ components/WeatherTemperatureComponent.qml	2013-08-23 19:40:35 +0000
@@ -88,6 +88,7 @@
         font.pointSize: FontUtils.sizeToPixels("small")
         verticalAlignment: Text.AlignVCenter
         horizontalAlignment: Text.AlignHCenter
+        visible:(dailyForecastList.currentIndex === 0)
         anchors {
             bottom: parent.bottom
             bottomMargin: units.gu(2)

=== modified file 'ubuntu-weather-app.qml'
--- ubuntu-weather-app.qml	2013-08-10 12:28:34 +0000
+++ ubuntu-weather-app.qml	2013-08-23 19:40:35 +0000
@@ -19,6 +19,7 @@
 import QtQuick 2.0
 import Ubuntu.Components 0.1
 import "components" as Components
+import "components/GradientsMap.js" as Gradients
 import Ubuntu.Components.Popups 0.1
 
 MainView {
@@ -35,6 +36,10 @@
     backgroundColor: "#A55263"
     footerColor: "#D75669"
 
+    property string newHeaderColor: "#57365E"
+    property string newBackgroundColor: "#A55263"
+    property string newFooterColor: "#D75669"
+
     property var locationsList: []
     property var tabsObject: null
     // set default values for settings here
@@ -61,6 +66,40 @@
         }
     }
 
+    ParallelAnimation {
+        id: gradientAnimation
+        ColorAnimation {
+            target: mainView
+            property: "headerColor"
+            from: headerColor
+            to: newHeaderColor
+            duration:500
+        }
+        ColorAnimation {
+            target: mainView
+            property: "backgroundColor"
+            from: backgroundColor
+            to: newBackgroundColor
+            duration:500
+        }
+        ColorAnimation {
+            target: mainView
+            property: "footerColor"
+            from: footerColor
+            to: newFooterColor
+            duration:500
+        }
+    }
+
+    function adjustBackground(degrees) {
+        var celsius = (settings.units === "imperial") ? Math.round((degrees-32)/1.8) : degrees,
+            colors = Gradients.getGradients(celsius);
+        newHeaderColor = colors.header;
+        newBackgroundColor = colors.body;
+        newFooterColor = colors.footer;
+        gradientAnimation.start()
+    }
+
     // see https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1124071, temporary workaround
     function buildTabs(locations) {
         // check if there was a location added