Merge lp:~seb128/ubuntu-system-settings/battery-draw-x-text-1289460 into lp:ubuntu-system-settings
- battery-draw-x-text-1289460
- Merge into trunk
Status: | Merged | ||||
---|---|---|---|---|---|
Approved by: | Iain Lane | ||||
Approved revision: | 780 | ||||
Merged at revision: | 787 | ||||
Proposed branch: | lp:~seb128/ubuntu-system-settings/battery-draw-x-text-1289460 | ||||
Merge into: | lp:ubuntu-system-settings | ||||
Diff against target: |
130 lines (+59/-15) 1 file modified
plugins/battery/PageComponent.qml (+59/-15) |
||||
To merge this branch: | bzr merge lp:~seb128/ubuntu-system-settings/battery-draw-x-text-1289460 | ||||
Related bugs: |
|
Reviewer | Review Type | Date Requested | Status |
---|---|---|---|
PS Jenkins bot | continuous-integration | Needs Fixing | |
Iain Lane | Approve | ||
Review via email:
|
Commit message
battery, draw the x axis labels
Description of the change
battery, draw the x axis labels
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
Sebastien Bacher (seb128) wrote : | # |
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
Iain Lane (laney) wrote : | # |
Thanks.
I think you could have avoided doing so many manipulations involving the margins if you had used a combination of translating and scaling to avoid them. But it's done now so don't bother changing.
- On N4, I made the "Today" label go off the end by setting the time to 01:53 (ish).
- Please wrap long lines.
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
PS Jenkins bot (ps-jenkins) wrote : | # |
PASSED: Continuous integration, rev:775
http://
Executed test runs:
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
Click here to trigger a rebuild:
http://
- 776. By Sebastien Bacher
-
correctly calculate the space for the text
- 777. By Sebastien Bacher
-
Wrap some long lines
- 778. By Sebastien Bacher
-
don't check for 0 value, we start at 1
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
PS Jenkins bot (ps-jenkins) wrote : | # |
PASSED: Continuous integration, rev:777
http://
Executed test runs:
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
Click here to trigger a rebuild:
http://
- 779. By Sebastien Bacher
-
draw the first mark as well
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
PS Jenkins bot (ps-jenkins) wrote : | # |
PASSED: Continuous integration, rev:779
http://
Executed test runs:
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
Click here to trigger a rebuild:
http://
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
Iain Lane (laney) wrote : | # |
I ran it (possibly with more data this time than last). There's a problem with the x coordinate for the previous day's data.
http://
And do you know if it's possible to smooth the text? If you size that image to 100% you can see that the text is jagged and not very nice looking.
- 780. By Sebastien Bacher
-
revert change that seemed logical but is creating issues
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
Sebastien Bacher (seb128) wrote : | # |
> I ran it (possibly with more data this time than last). There's a problem with the x coordinate for the previous day's data.
> http://
Ok, I reverted the change that created that. The formular there looks weird but it works, we can fix in another change
> And do you know if it's possible to smooth the text? If you size that image to 100% you can see that the text is jagged and not very nice looking.
I didn't find any while looking in the canvas api, not sure what to do there ...
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
Iain Lane (laney) wrote : | # |
Alright, looks fine for now.
I think the line drawing code is a bit suspicious but that's pre-existing.
![](/+icing/build/overlay/assets/skins/sam/images/close.gif)
PS Jenkins bot (ps-jenkins) wrote : | # |
FAILED: Continuous integration, rev:780
http://
Executed test runs:
UNSTABLE: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
UNSTABLE: http://
SUCCESS: http://
deb: http://
SUCCESS: http://
SUCCESS: http://
SUCCESS: http://
deb: http://
Click here to trigger a rebuild:
http://
Preview Diff
1 | === modified file 'plugins/battery/PageComponent.qml' | |||
2 | --- plugins/battery/PageComponent.qml 2014-01-27 18:12:16 +0000 | |||
3 | +++ plugins/battery/PageComponent.qml 2014-07-09 15:03:35 +0000 | |||
4 | @@ -127,43 +127,84 @@ | |||
5 | 127 | id: canvas | 127 | id: canvas |
6 | 128 | width:parent.width - units.gu(4) | 128 | width:parent.width - units.gu(4) |
7 | 129 | anchors.horizontalCenter: parent.horizontalCenter | 129 | anchors.horizontalCenter: parent.horizontalCenter |
9 | 130 | height: units.gu(15) | 130 | height: units.gu(23) |
10 | 131 | 131 | ||
11 | 132 | antialiasing: true | 132 | antialiasing: true |
12 | 133 | 133 | ||
14 | 134 | function drawAxes(ctx, axisWidth, axisHeight) { | 134 | function drawAxes(ctx, axisWidth, axisHeight, bottomMargin, rightMargin) { |
15 | 135 | |||
16 | 136 | var currentHour = Qt.formatDateTime(new Date(), "h") | ||
17 | 137 | var currentMinutes = Qt.formatDateTime(new Date(), "m") | ||
18 | 138 | var displayHour | ||
19 | 139 | var labelWidth | ||
20 | 140 | var zeroMark | ||
21 | 141 | |||
22 | 135 | ctx.save() | 142 | ctx.save() |
23 | 136 | ctx.beginPath() | 143 | ctx.beginPath() |
24 | 137 | ctx.strokeStyle = UbuntuColors.lightAubergine | 144 | ctx.strokeStyle = UbuntuColors.lightAubergine |
25 | 138 | 145 | ||
26 | 139 | ctx.lineWidth = units.dp(2) | 146 | ctx.lineWidth = units.dp(2) |
27 | 140 | 147 | ||
28 | 148 | var fontHeight = FontUtils.sizeToPixels("small") | ||
29 | 149 | ctx.font="%1px Ubuntu".arg(fontHeight) | ||
30 | 150 | |||
31 | 141 | ctx.translate(0, 1) | 151 | ctx.translate(0, 1) |
32 | 142 | 152 | ||
33 | 143 | // 11 ticks with 0, 5, 10 being big | 153 | // 11 ticks with 0, 5, 10 being big |
34 | 144 | for (var i = 0; i <= 10; i++) { | 154 | for (var i = 0; i <= 10; i++) { |
35 | 145 | var x = (i % 5 == 0) ? 0 : Math.floor(axisWidth / 2) | 155 | var x = (i % 5 == 0) ? 0 : Math.floor(axisWidth / 2) |
37 | 146 | var y = (i / 10) * (height - axisHeight - ctx.lineWidth) | 156 | var y = (i / 10) * (height - axisHeight - bottomMargin - ctx.lineWidth) |
38 | 147 | ctx.moveTo(x, y) | 157 | ctx.moveTo(x, y) |
39 | 148 | ctx.lineTo(axisWidth, y) | 158 | ctx.lineTo(axisWidth, y) |
40 | 149 | } | 159 | } |
41 | 150 | 160 | ||
42 | 151 | ctx.translate(axisWidth + ctx.lineWidth / 2, | 161 | ctx.translate(axisWidth + ctx.lineWidth / 2, |
44 | 152 | height - axisHeight - ctx.lineWidth / 2) | 162 | height - axisHeight - bottomMargin - ctx.lineWidth / 2) |
45 | 153 | 163 | ||
46 | 154 | ctx.moveTo(0, 0) | 164 | ctx.moveTo(0, 0) |
47 | 155 | ctx.lineTo(0, -ctx.lineWidth) | 165 | ctx.lineTo(0, -ctx.lineWidth) |
48 | 156 | 166 | ||
50 | 157 | // 25 ticks with 0, 6, 12, 18, 24 being big | 167 | // 24 ticks with 6, 12, 18, 24 being big |
51 | 158 | for (i = 0; i <= 24; i++) { | 168 | for (i = 0; i <= 24; i++) { |
53 | 159 | x = (i / 24) * (width - axisWidth - ctx.lineWidth) | 169 | /* the marks need to be shifted on the hours */ |
54 | 170 | x = ((i - currentMinutes / 60) / 24) * (width - axisWidth - ctx.lineWidth - rightMargin) | ||
55 | 171 | if (x < 0) | ||
56 | 172 | continue | ||
57 | 160 | y = (i % 6 == 0) ? axisHeight : axisHeight - | 173 | y = (i % 6 == 0) ? axisHeight : axisHeight - |
58 | 161 | Math.floor(axisHeight / 2) | 174 | Math.floor(axisHeight / 2) |
59 | 162 | ctx.moveTo(x, 0) | 175 | ctx.moveTo(x, 0) |
60 | 163 | ctx.lineTo(x, y) | 176 | ctx.lineTo(x, y) |
61 | 177 | |||
62 | 178 | /* Determine the hour to display */ | ||
63 | 179 | displayHour = (currentHour - (24-i)) | ||
64 | 180 | if (displayHour < 0) | ||
65 | 181 | displayHour = displayHour + 24 | ||
66 | 182 | /* Store the x for the day change line */ | ||
67 | 183 | if (displayHour === 0) | ||
68 | 184 | zeroMark = x | ||
69 | 185 | |||
70 | 186 | /* Write the x-axis legend */ | ||
71 | 187 | if (i % 6 == 0) { | ||
72 | 188 | labelWidth = context.measureText("%1".arg(displayHour)).width; | ||
73 | 189 | ctx.fillText("%1".arg(displayHour), | ||
74 | 190 | x - labelWidth/2, | ||
75 | 191 | axisHeight + units.dp(1) + fontHeight) | ||
76 | 192 | } | ||
77 | 164 | } | 193 | } |
78 | 165 | 194 | ||
80 | 166 | ctx.translate(0, 0) | 195 | labelWidth = context.measureText(i18n.tr("Yesterday")).width; |
81 | 196 | if(labelWidth < zeroMark) | ||
82 | 197 | ctx.fillText(i18n.tr("Yesterday"), | ||
83 | 198 | (zeroMark - labelWidth)/2, | ||
84 | 199 | axisHeight + units.dp(6) + 2*fontHeight) | ||
85 | 200 | |||
86 | 201 | ctx.fillText("|", zeroMark, axisHeight + units.dp(6) + 2*fontHeight) | ||
87 | 202 | |||
88 | 203 | labelWidth = context.measureText(i18n.tr("Today")).width; | ||
89 | 204 | if(labelWidth < (width - zeroMark - rightMargin - axisWidth - ctx.lineWidth)) | ||
90 | 205 | ctx.fillText(i18n.tr("Today"), | ||
91 | 206 | zeroMark + (width - zeroMark - labelWidth)/2, | ||
92 | 207 | axisHeight + units.dp(6) + 2*fontHeight) | ||
93 | 167 | 208 | ||
94 | 168 | ctx.stroke() | 209 | ctx.stroke() |
95 | 169 | ctx.restore() | 210 | ctx.restore() |
96 | @@ -174,12 +215,14 @@ | |||
97 | 174 | ctx.save(); | 215 | ctx.save(); |
98 | 175 | ctx.clearRect(0, 0, canvas.width, canvas.height) | 216 | ctx.clearRect(0, 0, canvas.width, canvas.height) |
99 | 176 | 217 | ||
106 | 177 | var axisWidth = 10 | 218 | var axisWidth = units.gu(1) |
107 | 178 | var axisHeight = 10 | 219 | var axisHeight = units.gu(1) |
108 | 179 | 220 | ||
109 | 180 | var graphHeight = height - axisHeight | 221 | /* Space to write the legend */ |
110 | 181 | 222 | var bottomMargin = units.gu(6) | |
111 | 182 | drawAxes(ctx, axisWidth, axisHeight) | 223 | var rightMargin = units.gu(1) |
112 | 224 | |||
113 | 225 | drawAxes(ctx, axisWidth, axisHeight, bottomMargin, rightMargin) | ||
114 | 183 | 226 | ||
115 | 184 | /* Display the charge history */ | 227 | /* Display the charge history */ |
116 | 185 | ctx.beginPath(); | 228 | ctx.beginPath(); |
117 | @@ -191,10 +234,11 @@ | |||
118 | 191 | // Invert the y axis so we draw from the bottom left | 234 | // Invert the y axis so we draw from the bottom left |
119 | 192 | ctx.scale(1, -1) | 235 | ctx.scale(1, -1) |
120 | 193 | // Move the origin to just above the axes | 236 | // Move the origin to just above the axes |
122 | 194 | ctx.translate(axisWidth, axisHeight) | 237 | ctx.translate(axisWidth, axisHeight + bottomMargin) |
123 | 195 | // Scale to avoid the axes so we can draw as if they aren't | 238 | // Scale to avoid the axes so we can draw as if they aren't |
124 | 196 | // there | 239 | // there |
126 | 197 | ctx.scale(1 - (axisWidth / width), 1 - axisHeight / height) | 240 | ctx.scale(1 - ((axisWidth + rightMargin) / width), |
127 | 241 | 1 - (axisHeight + bottomMargin) / height) | ||
128 | 198 | 242 | ||
129 | 199 | var gradient = ctx.createLinearGradient(0, 0, 0, height); | 243 | var gradient = ctx.createLinearGradient(0, 0, 0, height); |
130 | 200 | gradient.addColorStop(1, "green"); | 244 | gradient.addColorStop(1, "green"); |
The code might look a bit complex, but turns out it's not trivial to write on a canvas. The results to be decent on desktop and phone configs, from my testing