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

Proposed by Martin Borho on 2013-08-23
Status: Merged
Approved by: Raúl Yeguas on 2013-08-26
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 2013-08-23 Approve on 2013-08-26
Ubuntu Phone Apps Jenkins Bot continuous-integration Approve on 2013-08-23
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.
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
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
1=== added file 'components/GradientsMap.js'
2--- components/GradientsMap.js 1970-01-01 00:00:00 +0000
3+++ components/GradientsMap.js 2013-08-23 19:40:35 +0000
4@@ -0,0 +1,60 @@
5+.pragma library
6+
7+
8+var map = {
9+ "40": "#8c009c",
10+ "38": "#76007f",
11+ "36": "#65005f",
12+ "34": "#600043",
13+ "32": "#67002e",
14+ "30": "#790023",
15+ "28": "#92001d",
16+ "26": "#ac0019",
17+ "24": "#c30213",
18+ "22": "#d8070c",
19+ "20": "#e91109",
20+ "18": "#f52109",
21+ "16": "#fb350e",
22+ "14": "#fe4e17",
23+ "12": "#ff6721",
24+ "10": "#ff812c",
25+ "8": "#ff983a",
26+ "6": "#ffae47",
27+ "4": "#ffc056",
28+ "2": "#ffd067",
29+ "0": "#ffdc77",
30+ "-2": "#ffe788",
31+ "-4": "#fdf5a1",
32+ "-6": "#effdbc",
33+ "-8": "#ccf7bb",
34+ "-10": "#a6eeb8",
35+ "-12": "#85e4bd",
36+ "-14": "#64d9c9",
37+ "-16": "#43c9d3",
38+ "-18": "#27b3d9",
39+ "-20": "#1497d7",
40+ "-22": "#0878cf",
41+ "-24": "#055ac3",
42+ "-26": "#0641b6",
43+ "-28": "#0b2ca8",
44+ "-30": "#191f9b",
45+ "-32": "#261b97",
46+ "-34": "#2b1b97",
47+ "-36": "#311c97",
48+ "-38": "#381d97",
49+ "-40": null
50+}
51+
52+var getGradients = function(celsius) {
53+ // stay in range
54+ if(celsius < -34) celsius = -34;
55+ else if(celsius > 40) celsius = 40;
56+ // get anchor value
57+ celsius = (celsius % 2 == 1 || celsius % 2 == -1) ? celsius +1 : celsius;
58+ //
59+ return {
60+ header: map[celsius],
61+ body: map[celsius-2],
62+ footer: map[celsius-4]
63+ }
64+}
65
66=== modified file 'components/LocationTab.qml'
67--- components/LocationTab.qml 2013-08-22 10:14:54 +0000
68+++ components/LocationTab.qml 2013-08-23 19:40:35 +0000
69@@ -39,6 +39,14 @@
70 return Qt.formatTime(date, format)
71 }
72
73+ onVisibleChanged: {
74+ var currentIndex = dailyForecastList.currentIndex;
75+ if(visible == true && currentIndex > -1) {
76+ var data = dayForecastModel.get(currentIndex)
77+ adjustBackground(Math.round(data.temp))
78+ }
79+ }
80+
81 Component.onCompleted: {
82 var locData = mainView.locationsList[locationIndex],
83 units = (mainView.settings.units === 'imperial') ? 'imperial' : 'metric',
84@@ -108,7 +116,15 @@
85 height:parent.height
86 model:dayForecastModel
87
88+ onCurrentIndexChanged: {
89+ if(visible) {
90+ var data = dayForecastModel.get(currentIndex)
91+ adjustBackground(Math.round(data.temp))
92+ }
93+ }
94+
95 snapMode: ListView.SnapOneItem
96+ highlightRangeMode: ListView.StrictlyEnforceRange
97 verticalLayoutDirection: ListView.TopToBottom
98 flickableDirection: Flickable.VerticalFlick
99 clip: true
100
101=== removed file 'components/OpenWeatherMap.js'
102--- components/OpenWeatherMap.js 2013-03-04 20:10:29 +0000
103+++ components/OpenWeatherMap.js 1970-01-01 00:00:00 +0000
104@@ -1,49 +0,0 @@
105-.pragma library
106-
107-function getConditionIcon(condition){
108- var map = {
109- "200": "11",
110- "201": "11",
111- "202": "11",
112- "210": "11",
113- "211": "11",
114- "212": "11",
115- "221": "11",
116- "230": "11",
117- "231": "11",
118- "232": "11",
119- "300": "09",
120- "301": "09",
121- "302": "09",
122- "310": "09",
123- "311": "09",
124- "312": "09",
125- "321": "09",
126- "500": "10",
127- "501": "10",
128- "502": "10",
129- "503": "10",
130- "504": "10",
131- "511": "13",
132- "520": "09",
133- "521": "09",
134- "522": "09",
135- "600": "13",
136- "601": "13",
137- "602": "13",
138- "611": "13",
139- "621": "13",
140- "701": "50",
141- "711": "50",
142- "721": "50",
143- "731": "50",
144- "741": "50",
145- "800": "01",
146- "801": "02",
147- "802": "03",
148- "803": "04",
149- "804": "04"
150- }
151-
152- return map[condition];
153-}
154
155=== modified file 'components/WeatherTemperatureComponent.qml'
156--- components/WeatherTemperatureComponent.qml 2013-08-22 12:07:35 +0000
157+++ components/WeatherTemperatureComponent.qml 2013-08-23 19:40:35 +0000
158@@ -88,6 +88,7 @@
159 font.pointSize: FontUtils.sizeToPixels("small")
160 verticalAlignment: Text.AlignVCenter
161 horizontalAlignment: Text.AlignHCenter
162+ visible:(dailyForecastList.currentIndex === 0)
163 anchors {
164 bottom: parent.bottom
165 bottomMargin: units.gu(2)
166
167=== modified file 'ubuntu-weather-app.qml'
168--- ubuntu-weather-app.qml 2013-08-10 12:28:34 +0000
169+++ ubuntu-weather-app.qml 2013-08-23 19:40:35 +0000
170@@ -19,6 +19,7 @@
171 import QtQuick 2.0
172 import Ubuntu.Components 0.1
173 import "components" as Components
174+import "components/GradientsMap.js" as Gradients
175 import Ubuntu.Components.Popups 0.1
176
177 MainView {
178@@ -35,6 +36,10 @@
179 backgroundColor: "#A55263"
180 footerColor: "#D75669"
181
182+ property string newHeaderColor: "#57365E"
183+ property string newBackgroundColor: "#A55263"
184+ property string newFooterColor: "#D75669"
185+
186 property var locationsList: []
187 property var tabsObject: null
188 // set default values for settings here
189@@ -61,6 +66,40 @@
190 }
191 }
192
193+ ParallelAnimation {
194+ id: gradientAnimation
195+ ColorAnimation {
196+ target: mainView
197+ property: "headerColor"
198+ from: headerColor
199+ to: newHeaderColor
200+ duration:500
201+ }
202+ ColorAnimation {
203+ target: mainView
204+ property: "backgroundColor"
205+ from: backgroundColor
206+ to: newBackgroundColor
207+ duration:500
208+ }
209+ ColorAnimation {
210+ target: mainView
211+ property: "footerColor"
212+ from: footerColor
213+ to: newFooterColor
214+ duration:500
215+ }
216+ }
217+
218+ function adjustBackground(degrees) {
219+ var celsius = (settings.units === "imperial") ? Math.round((degrees-32)/1.8) : degrees,
220+ colors = Gradients.getGradients(celsius);
221+ newHeaderColor = colors.header;
222+ newBackgroundColor = colors.body;
223+ newFooterColor = colors.footer;
224+ gradientAnimation.start()
225+ }
226+
227 // see https://bugs.launchpad.net/ubuntu-ui-toolkit/+bug/1124071, temporary workaround
228 function buildTabs(locations) {
229 // check if there was a location added

Subscribers

People subscribed via source and target branches