Ubuntu Weather App

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

  1. GradientBackgrounds
  2. Merge into trunk
Proposed by Martin Borho
Status: Merged
Approved by: Raúl Yeguas
Approved revision: 100
Merged at revision: 100
Proposed branch: lp:~martin-borho/ubuntu-weather-app/GradientBackgrounds
Merge into: lp:ubuntu-weather-app/obsolete.trunk
Diff against target: 229 lines (+116/-49)
5 files modified
components/GradientsMap.js (+60/-0)
components/LocationTab.qml (+16/-0)
components/OpenWeatherMap.js (+0/-49)
components/WeatherTemperatureComponent.qml (+1/-0)
ubuntu-weather-app.qml (+39/-0)
To merge this branch: bzr merge lp:~martin-borho/ubuntu-weather-app/GradientBackgrounds
Reviewer Review Type Date Requested Status
Raúl Yeguas Approve
Ubuntu Phone Apps Jenkins Bot continuous-integration Approve
Review via email: mp+181904@code.launchpad.net

Commit message

Dynamic gradient backgrounds according to the visual design.

Description of the change

Dynamic gradient backgrounds according to the visual design.

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

To post a comment you must log in.
Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :

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)
Revision history for this message
Raúl Yeguas (neokore) wrote :

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
Revision history for this message
Martin Borho (martin-borho) wrote :

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...

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
=== 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 @@
1.pragma library
2
3
4var map = {
5 "40": "#8c009c",
6 "38": "#76007f",
7 "36": "#65005f",
8 "34": "#600043",
9 "32": "#67002e",
10 "30": "#790023",
11 "28": "#92001d",
12 "26": "#ac0019",
13 "24": "#c30213",
14 "22": "#d8070c",
15 "20": "#e91109",
16 "18": "#f52109",
17 "16": "#fb350e",
18 "14": "#fe4e17",
19 "12": "#ff6721",
20 "10": "#ff812c",
21 "8": "#ff983a",
22 "6": "#ffae47",
23 "4": "#ffc056",
24 "2": "#ffd067",
25 "0": "#ffdc77",
26 "-2": "#ffe788",
27 "-4": "#fdf5a1",
28 "-6": "#effdbc",
29 "-8": "#ccf7bb",
30 "-10": "#a6eeb8",
31 "-12": "#85e4bd",
32 "-14": "#64d9c9",
33 "-16": "#43c9d3",
34 "-18": "#27b3d9",
35 "-20": "#1497d7",
36 "-22": "#0878cf",
37 "-24": "#055ac3",
38 "-26": "#0641b6",
39 "-28": "#0b2ca8",
40 "-30": "#191f9b",
41 "-32": "#261b97",
42 "-34": "#2b1b97",
43 "-36": "#311c97",
44 "-38": "#381d97",
45 "-40": null
46}
47
48var getGradients = function(celsius) {
49 // stay in range
50 if(celsius < -34) celsius = -34;
51 else if(celsius > 40) celsius = 40;
52 // get anchor value
53 celsius = (celsius % 2 == 1 || celsius % 2 == -1) ? celsius +1 : celsius;
54 //
55 return {
56 header: map[celsius],
57 body: map[celsius-2],
58 footer: map[celsius-4]
59 }
60}
061
=== 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 @@
39 return Qt.formatTime(date, format)39 return Qt.formatTime(date, format)
40 }40 }
4141
42 onVisibleChanged: {
43 var currentIndex = dailyForecastList.currentIndex;
44 if(visible == true && currentIndex > -1) {
45 var data = dayForecastModel.get(currentIndex)
46 adjustBackground(Math.round(data.temp))
47 }
48 }
49
42 Component.onCompleted: {50 Component.onCompleted: {
43 var locData = mainView.locationsList[locationIndex],51 var locData = mainView.locationsList[locationIndex],
44 units = (mainView.settings.units === 'imperial') ? 'imperial' : 'metric',52 units = (mainView.settings.units === 'imperial') ? 'imperial' : 'metric',
@@ -108,7 +116,15 @@
108 height:parent.height116 height:parent.height
109 model:dayForecastModel117 model:dayForecastModel
110118
119 onCurrentIndexChanged: {
120 if(visible) {
121 var data = dayForecastModel.get(currentIndex)
122 adjustBackground(Math.round(data.temp))
123 }
124 }
125
111 snapMode: ListView.SnapOneItem126 snapMode: ListView.SnapOneItem
127 highlightRangeMode: ListView.StrictlyEnforceRange
112 verticalLayoutDirection: ListView.TopToBottom128 verticalLayoutDirection: ListView.TopToBottom
113 flickableDirection: Flickable.VerticalFlick129 flickableDirection: Flickable.VerticalFlick
114 clip: true130 clip: true
115131
=== 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 @@
1.pragma library
2
3function getConditionIcon(condition){
4 var map = {
5 "200": "11",
6 "201": "11",
7 "202": "11",
8 "210": "11",
9 "211": "11",
10 "212": "11",
11 "221": "11",
12 "230": "11",
13 "231": "11",
14 "232": "11",
15 "300": "09",
16 "301": "09",
17 "302": "09",
18 "310": "09",
19 "311": "09",
20 "312": "09",
21 "321": "09",
22 "500": "10",
23 "501": "10",
24 "502": "10",
25 "503": "10",
26 "504": "10",
27 "511": "13",
28 "520": "09",
29 "521": "09",
30 "522": "09",
31 "600": "13",
32 "601": "13",
33 "602": "13",
34 "611": "13",
35 "621": "13",
36 "701": "50",
37 "711": "50",
38 "721": "50",
39 "731": "50",
40 "741": "50",
41 "800": "01",
42 "801": "02",
43 "802": "03",
44 "803": "04",
45 "804": "04"
46 }
47
48 return map[condition];
49}
500
=== 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 @@
88 font.pointSize: FontUtils.sizeToPixels("small")88 font.pointSize: FontUtils.sizeToPixels("small")
89 verticalAlignment: Text.AlignVCenter89 verticalAlignment: Text.AlignVCenter
90 horizontalAlignment: Text.AlignHCenter90 horizontalAlignment: Text.AlignHCenter
91 visible:(dailyForecastList.currentIndex === 0)
91 anchors {92 anchors {
92 bottom: parent.bottom93 bottom: parent.bottom
93 bottomMargin: units.gu(2)94 bottomMargin: units.gu(2)
9495
=== 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 @@
19import QtQuick 2.019import QtQuick 2.0
20import Ubuntu.Components 0.120import Ubuntu.Components 0.1
21import "components" as Components21import "components" as Components
22import "components/GradientsMap.js" as Gradients
22import Ubuntu.Components.Popups 0.123import Ubuntu.Components.Popups 0.1
2324
24MainView {25MainView {
@@ -35,6 +36,10 @@
35 backgroundColor: "#A55263"36 backgroundColor: "#A55263"
36 footerColor: "#D75669"37 footerColor: "#D75669"
3738
39 property string newHeaderColor: "#57365E"
40 property string newBackgroundColor: "#A55263"
41 property string newFooterColor: "#D75669"
42
38 property var locationsList: []43 property var locationsList: []
39 property var tabsObject: null44 property var tabsObject: null
40 // set default values for settings here45 // set default values for settings here
@@ -61,6 +66,40 @@
61 }66 }
62 }67 }
6368
69 ParallelAnimation {
70 id: gradientAnimation
71 ColorAnimation {
72 target: mainView
73 property: "headerColor"
74 from: headerColor
75 to: newHeaderColor
76 duration:500
77 }
78 ColorAnimation {
79 target: mainView
80 property: "backgroundColor"
81 from: backgroundColor
82 to: newBackgroundColor
83 duration:500
84 }
85 ColorAnimation {
86 target: mainView
87 property: "footerColor"
88 from: footerColor
89 to: newFooterColor
90 duration:500
91 }
92 }
93
94 function adjustBackground(degrees) {
95 var celsius = (settings.units === "imperial") ? Math.round((degrees-32)/1.8) : degrees,
96 colors = Gradients.getGradients(celsius);
97 newHeaderColor = colors.header;
98 newBackgroundColor = colors.body;
99 newFooterColor = colors.footer;
100 gradientAnimation.start()
101 }
102
64 // see https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1124071, temporary workaround103 // see https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1124071, temporary workaround
65 function buildTabs(locations) {104 function buildTabs(locations) {
66 // check if there was a location added105 // check if there was a location added

Subscribers

People subscribed via source and target branches