« back to all changes in this revision
Viewing changes to timer/TimerPage.qml
- browse files at revision 24
- compare with another revision
- download diff
- download tarball
- view history from revision 24
- Committer: Tarmac
- Author(s): Nekhelesh Ramananthan
- Date: 2013-04-09 10:55:09 UTC
- mfrom: (21.1.13 timer-touch-input)
- Revision ID: tarmac-20130409105509-ztppl2mor1u5obls
Revamp Timer UI and provide touch support to set timer. Fixes: https://bugs.launchpad.net/bugs/1163854.
Approved by Alessandro Pozzi, Ubuntu Phone Apps Jenkins Bot.
Approved by Alessandro Pozzi, Ubuntu Phone Apps Jenkins Bot.
added
removed
timer/TimerPage.qml
19
19
20
20
import QtQuick 2.0
21
21
import Ubuntu.Components 0.1
22
import Ubuntu.Components.Popups 0.1
23
import Ubuntu.Components.ListItems 0.1 as ListItem
22
import "../common"
24
23
import "../common/Constants.js" as Constants
24
import "../common/ClockUtils.js" as Utils
25
25
import "TimerScript.js" as TScript
26
import "../common"
27
26
28
27
Page {
28
anchors.margins: units.gu(2)
29
29
30
30
property bool timerOn: false
31
property real seconds: 0;
32
property real secondsAddTimer: 0;
31
32
property int seconds: 0;
33
property int minutes: 0;
34
property int hours: 0;
35
property int totalTime: 0;
36
property int timerValue: 0;
33
37
34
38
Component.onCompleted: {
35
TScript.log("TimerPage loaded");
39
Utils.log("TimerPage loaded");
36
40
}
37
41
42
// Timer function called by the main clock loop
38
43
function onTimerUpdate() {
39
44
if(timerOn == true) {
40
TScript.countDown(seconds)
41
}
42
}
43
44
anchors.margins: units.gu(2)
45
46
TimerStorage {
47
id: storageTimer
48
}
49
50
Label {
51
id: labelTimer
52
53
width: parent.width
54
height: parent.height / 4
55
56
horizontalAlignment: Text.AlignHCenter
57
verticalAlignment: Text.AlignVCenter
58
59
color: {
60
if (text == "00:00:00") {
61
Constants.normalGrey;
62
} else if (text != "00:00:00" && timerOn == false) {
63
Constants.warmGrey;
64
} else if (text != "00:00:00" && timerOn == true) {
65
Constants.pitchBlack;
66
}
67
}
68
69
fontSize: "x-large"
70
text: i18n.tr("00:00:00")
71
}
72
73
Item {
74
id: buttonMinus
75
76
width: parent.width / 2
77
height: parent.height / 4
78
79
Rectangle {
80
width: parent.width
81
height: parent.height
82
83
color: "transparent"
84
85
Label {
86
width: units.gu(5)
87
height: units.gu(5)
88
89
horizontalAlignment: Text.AlignHCenter
90
verticalAlignment: Text.AlignVCenter
91
anchors.centerIn: parent
92
93
color: Constants.ubuntuOrange
94
fontSize: "large"
95
text: i18n.tr("-")
96
97
MouseArea {
98
anchors.fill: parent
99
100
onClicked: {
101
if (seconds > 0 && (buttonTimer.state != "STOP" && buttonTimer.state != "DONE")) {
102
seconds -= 60;
103
labelTimer.text = TScript.setlabelTimer(seconds);
104
if(labelTimer.text != "00:00:00") {
105
buttonTimer.state = "START";
106
} else {
107
buttonTimer.state = "PRESETS";
108
}
109
}
110
}
111
}
112
}
113
}
114
}
115
116
Item {
117
id: buttonPlus
118
119
width: parent.width / 2
120
height: parent.height / 4
45
TScript.countDown()
46
timerHand.rotationAngle = seconds * 6;
47
}
48
}
49
50
// Timer label hh:mm:ss
51
Row {
52
53
spacing: units.gu(0.3)
121
54
122
55
anchors {
123
top: buttonMinus.top
124
left: buttonMinus.right
125
}
126
127
Rectangle {
128
width: parent.width
129
height: parent.height
130
131
color: "transparent"
132
133
Label {
134
width: units.gu(5)
135
height: units.gu(5)
136
137
horizontalAlignment: Text.AlignHCenter
138
verticalAlignment: Text.AlignVCenter
139
anchors.centerIn: parent
140
141
color: Constants.ubuntuOrange
142
fontSize: "large"
143
text: i18n.tr("+")
144
145
MouseArea {
146
anchors.fill: parent
147
148
onClicked: {
149
if (buttonTimer.state != "STOP" && buttonTimer.state != "DONE") {
150
seconds += 60;
151
labelTimer.text = TScript.setlabelTimer(seconds);
152
if(labelTimer.text != "00:00:00") {
153
buttonTimer.state = "START";
154
} else {
155
buttonTimer.state = "PRESETS";
156
}
157
}
158
}
159
}
160
}
161
}
56
horizontalCenter: parent.horizontalCenter
57
top: parent.top
58
topMargin: units.gu(6)
59
}
60
61
Label {
62
id: hourslabelTimer
63
64
// flag boolean variable to determine if the timer hand adjusts the hours or not
65
property bool flag: false
66
67
color: Constants.normalGrey
68
69
fontSize: "x-large"
70
text: i18n.tr("00")
71
visible: {
72
if (hours > 0) {
73
true
74
}
75
else {
76
true
77
/* FIXME: According to design the hour label should only be shown when the
78
minutes hand is moved beyond 59 minutes. The logic for this has not been
79
implemented yet in this code.
80
*/
81
// TODO: Change this to false later. As of now the hour label is always shown.
82
}
83
}
84
85
MouseArea {
86
anchors.fill: parent
87
88
onClicked: {
89
timerHand.rotationAngle = hours * 6;
90
hourslabelTimer.color = Constants.ubuntuOrange;
91
hourslabelTimer.flag = true;
92
secondslabelTimer.color = Constants.normalGrey;
93
secondslabelTimer.flag = false;
94
minuteslabelTimer.color = Constants.normalGrey;
95
minuteslabelTimer.flag = false;
96
}
97
}
98
}
99
100
Label {
101
id: colonTimer1
102
103
color: Constants.normalGrey
104
visible: {
105
if (hourslabelTimer.visible) {
106
true
107
}
108
else {
109
false
110
}
111
}
112
113
fontSize: "x-large"
114
text: i18n.tr(":")
115
}
116
117
Label {
118
id: minuteslabelTimer
119
120
// flag boolean variable to determine if the timer hand adjusts the minutes or not
121
property bool flag: false
122
123
color: Constants.normalGrey
124
125
fontSize: "x-large"
126
text: i18n.tr("00")
127
128
MouseArea {
129
anchors.fill: parent
130
131
onClicked: {
132
timerHand.rotationAngle = minutes * 6;
133
minuteslabelTimer.color = Constants.ubuntuOrange;
134
minuteslabelTimer.flag = true;
135
secondslabelTimer.color = Constants.normalGrey;
136
secondslabelTimer.flag = false;
137
hourslabelTimer.color = Constants.normalGrey;
138
hourslabelTimer.flag = false;
139
}
140
}
141
}
142
143
Label {
144
id: colonTimer2
145
146
color: Constants.normalGrey
147
148
fontSize: "x-large"
149
text: i18n.tr(":")
150
}
151
152
Label {
153
id: secondslabelTimer
154
155
// flag boolean variable to determine if the timer hand adjusts the minutes or not
156
property bool flag: false
157
158
color: Constants.normalGrey
159
160
fontSize: "x-large"
161
text: i18n.tr("00")
162
163
MouseArea {
164
anchors.fill: parent
165
166
onClicked: {
167
timerHand.rotationAngle = seconds * 6;
168
secondslabelTimer.color = Constants.ubuntuOrange;
169
secondslabelTimer.flag = true;
170
minuteslabelTimer.color = Constants.normalGrey;
171
minuteslabelTimer.flag = false;
172
hourslabelTimer.color = Constants.normalGrey;
173
hourslabelTimer.flag = false;
174
175
}
176
}
177
}
178
162
179
}
163
180
164
181
AnalogFaceBase {
165
182
id: clockOuterCircle
166
183
184
// Implements touch support
185
MouseArea {
186
id: timerbackmousearea
187
188
property real truex: mouseX - clockOuterCircle.width/2
189
property real truey: clockOuterCircle.height/2 - mouseY
190
property real angle: Math.atan2(truex, truey)
191
property real strictangle: parseInt(angle * 180 / Math.PI)
192
property real modulo: strictangle % 6
193
194
/* Touch support to move timer hand should only be enabled when the timer is off,
195
and the user has clicked on any of the second, minute and hour label.
196
*/
197
enabled: {
198
if (timerOn) {
199
false
200
}
201
else if (secondslabelTimer.flag) {
202
true
203
}
204
else if (minuteslabelTimer.flag) {
205
true
206
}
207
else if (hourslabelTimer.flag) {
208
true
209
}
210
else {
211
false
212
}
213
}
214
215
anchors.fill: parent
216
preventStealing: true // move only Timer hand and ensures that the sideway motion of pages do not interrupt moving the clock hand
217
onPositionChanged: if (buttonTimer.state != "STOP" && buttonTimer.state != "DONE") {
218
if (timerbackmousearea.angle < 0) {
219
timerHand.rotationAngle = strictangle - modulo + 360;
220
timerValue = parseInt(timerHand.rotationAngle/6);
221
222
if (secondslabelTimer.flag) {
223
secondslabelTimer.text = Utils.zeroleft(timerValue, 2);
224
seconds = timerValue;
225
}
226
227
if (minuteslabelTimer.flag) {
228
minuteslabelTimer.text = Utils.zeroleft(timerValue, 2);
229
minutes = timerValue;
230
}
231
232
if (hourslabelTimer.flag) {
233
hourslabelTimer.text = Utils.zeroleft(timerValue, 2);
234
hours = timerValue;
235
}
236
237
if(secondslabelTimer.text != "00" || minuteslabelTimer.text != "00" || hourslabelTimer.text != "00") {
238
buttonTimer.state = "START";
239
} else {
240
buttonTimer.state = "PRESETS";
241
}
242
}
243
else {
244
timerHand.rotationAngle = strictangle - modulo + 6;
245
timerValue = parseInt(timerHand.rotationAngle/6);
246
247
if (secondslabelTimer.flag) {
248
secondslabelTimer.text = Utils.zeroleft(timerValue, 2);
249
seconds = timerValue;
250
}
251
252
if (minuteslabelTimer.flag) {
253
minuteslabelTimer.text = Utils.zeroleft(timerValue, 2);
254
minutes = timerValue;
255
}
256
257
if (hourslabelTimer.flag) {
258
hourslabelTimer.text = Utils.zeroleft(timerValue, 2);
259
hours = timerValue;
260
}
261
262
if(secondslabelTimer.text != "00" || minuteslabelTimer.text != "00" || hourslabelTimer.text != "00") {
263
buttonTimer.state = "START";
264
} else {
265
buttonTimer.state = "PRESETS";
266
}
267
}
268
}
269
}
270
167
271
Repeater {
168
model: ["1", "2", "4", "5", "7", "8", "10", "11"]
169
272
model: 12
170
273
delegate: AnalogClockMarker {
171
number: modelData
274
number: index
172
275
size: 0.5
173
276
distance: 0.55
174
277
color: Constants.pitchBlack
177
280
}
178
281
179
282
AnalogHand {
180
id: secondHand
283
id: timerHand
181
284
182
285
widthhand: units.gu(2)
183
286
heighthand: units.gu(16)
202
305
antialiasing: true
203
306
}
204
307
308
// Add preset done circle which is shown when the add preset toolbar button is pressed
309
Rectangle {
310
id: addPresetCircleDone
311
312
width: units.gu(12)
313
height: units.gu(12)
314
315
anchors.centerIn: parent
316
border.color: Constants.normalGrey
317
color: "#F8F8F8"
318
radius: width / 2
319
antialiasing: true
320
visible: false
321
322
Label {
323
id: addPresetTextDone
324
325
x: parent.width/2 - width/2
326
y: parent.height/2 - height/2
327
328
color: Constants.green
329
330
fontSize: "large"
331
text: i18n.tr("DONE")
332
}
333
}
334
335
// Add analog clock texts 0,15,30 and 45. Ready for translation to other languages if necessary
336
Label {
337
anchors {
338
horizontalCenter: clockOuterCircle.horizontalCenter
339
bottom: clockOuterCircle.top
340
bottomMargin: 20
341
}
342
343
fontSize: "medium"
344
text: i18n.tr("0")
345
}
346
347
Label {
348
anchors {
349
verticalCenter: clockOuterCircle.verticalCenter
350
left: clockOuterCircle.right
351
leftMargin: 20
352
}
353
354
fontSize: "medium"
355
text: i18n.tr("15")
356
}
357
358
Label {
359
anchors {
360
horizontalCenter: clockOuterCircle.horizontalCenter
361
top: clockOuterCircle.bottom
362
topMargin: 20
363
}
364
365
fontSize: "medium"
366
text: i18n.tr("30")
367
}
368
369
Label {
370
anchors {
371
verticalCenter: clockOuterCircle.verticalCenter
372
right: clockOuterCircle.left
373
rightMargin: 20
374
}
375
376
fontSize: "medium"
377
text: i18n.tr("45")
378
}
379
380
// Multi-function button (Preset, Start, Stop, Done)
205
381
Button {
206
382
id: buttonTimer
207
383
226
402
text: i18n.tr("Presets")
227
403
}
228
404
PropertyChanges {
229
target: secondHand;
405
target: timerHand;
230
406
colortop: Constants.ubuntuOrange
231
407
}
232
408
PropertyChanges {
242
418
text: i18n.tr("Start")
243
419
}
244
420
PropertyChanges {
245
target: secondHand;
421
target: timerHand;
246
422
colortop: Constants.ubuntuOrange
247
423
}
248
424
PropertyChanges {
254
430
name: "STOP"
255
431
PropertyChanges {
256
432
target: buttonTimer;
257
color: Constants.normalGrey;
433
color: Constants.darkGrey;
258
434
text: i18n.tr("Stop")
259
435
}
260
436
PropertyChanges {
261
target: secondHand;
437
target: timerHand;
262
438
colortop: Constants.ubuntuOrange
263
439
}
264
440
PropertyChanges {
274
450
text: i18n.tr("Done")
275
451
}
276
452
PropertyChanges {
277
target: secondHand;
453
target: timerHand;
278
454
colortop: Constants.green
279
455
}
280
456
PropertyChanges {
287
463
onClicked: {
288
464
switch (text) {
289
465
case "Presets":
290
PopupUtils.open(setupTimer, buttonTimer)
466
// PopupUtils.open(setupTimer, buttonTimer)
291
467
state = "PRESETS";
292
468
break;
293
469
case "Start":
294
if (seconds > 0) {
470
TScript.prepareStartTimer();
471
if (totalTime > 0) {
295
472
timerPage.timerOn = true;
296
473
state = "STOP";
297
474
}
309
486
}
310
487
}
311
488
312
Label {
313
anchors {
314
horizontalCenter: clockOuterCircle.horizontalCenter
315
bottom: clockOuterCircle.top
316
bottomMargin: 5
317
}
318
319
fontSize: "medium"
320
text: i18n.tr("0")
321
}
322
323
Label {
324
anchors {
325
verticalCenter: clockOuterCircle.verticalCenter
326
left: clockOuterCircle.right
327
leftMargin: 5
328
}
329
330
fontSize: "medium"
331
text: i18n.tr("15")
332
}
333
334
Label {
335
anchors {
336
horizontalCenter: clockOuterCircle.horizontalCenter
337
top: clockOuterCircle.bottom
338
topMargin: 5
339
}
340
341
fontSize: "medium"
342
text: i18n.tr("30")
343
}
344
345
Label {
346
anchors {
347
verticalCenter: clockOuterCircle.verticalCenter
348
right: clockOuterCircle.left
349
rightMargin: 5
350
}
351
352
fontSize: "medium"
353
text: i18n.tr("45")
354
}
355
356
Item {
357
id: myPopup
358
359
property string title: i18n.tr("Title")
360
property string popuptext: i18n.tr("Text")
361
362
anchors.centerIn: parent
363
364
visible: false
365
366
Rectangle {
367
width: units.gu(35)
368
height: units.gu(20)
369
370
anchors.centerIn: parent
371
372
color: Constants.brightWhite
373
border.color: Constants.ubuntuOrange
374
border.width: 2
375
radius: units.gu(2)
376
antialiasing: true
377
378
Label {
379
id: labelPopup
380
381
width: parent.width
382
height: parent.height / 4
383
384
anchors{
385
top: parent.top
386
topMargin: units.gu(2)
387
}
388
horizontalAlignment: Text.AlignHCenter
389
390
color: Constants.ubuntuOrange
391
fontSize: "large"
392
text: i18n.tr(myPopup.title)
393
}
394
395
Button {
396
id: buttonPopup
397
398
width: units.gu(12)
399
height: units.gu(5)
400
401
anchors {
402
horizontalCenter: parent.horizontalCenter
403
bottom: parent.bottom
404
bottomMargin: units.gu(2)
405
}
406
407
color: Constants.ubuntuOrange
408
text: i18n.tr(myPopup.popuptext)
409
410
onClicked: {
411
myPopup.visible = false;
412
}
413
}
414
}
415
}
416
417
Component {
418
id: setupTimer
419
420
Popover {
421
id: popupTimer
422
423
ListView {
424
id: labelSetupTimer
425
426
clip: true
427
428
height: units.gu(60)
429
430
anchors {
431
left: parent.left
432
right: parent.right
433
}
434
435
Label {
436
id: labelAddTimer
437
438
width: parent.width
439
height: parent.height / 4
440
441
horizontalAlignment: Text.AlignHCenter
442
verticalAlignment: Text.AlignVCenter
443
444
color: {
445
if (text == "00:00:00") {
446
Constants.normalGrey;
447
} else if (text != "00:00:00" && timerOn == false) {
448
Constants.warmGrey;
449
} else if (text != "00:00:00" && timerOn == true) {
450
Constants.pitchBlack;
451
}
452
}
453
454
fontSize: "x-large"
455
text: i18n.tr("00:00:00")
456
}
457
458
Item {
459
id: buttonMinusAddTimer
460
461
width: parent.width / 2
462
height: parent.height / 4
463
464
Rectangle {
465
width: parent.width
466
height: parent.height
467
468
color: "transparent"
469
470
Label {
471
width: units.gu(5)
472
height: units.gu(5)
473
474
horizontalAlignment: Text.AlignHCenter
475
verticalAlignment: Text.AlignVCenter
476
anchors.centerIn: parent
477
478
color: Constants.ubuntuOrange
479
fontSize: "large"
480
text: i18n.tr("-")
481
482
MouseArea {
483
anchors.fill: parent
484
485
onClicked: {
486
if (secondsAddTimer > 0) {
487
secondsAddTimer -= 60;
488
labelAddTimer.text = TScript.setlabelTimer(secondsAddTimer);
489
}
490
}
491
}
492
}
493
}
494
}
495
496
Item {
497
id: buttonPlusAddTimer
498
499
width: parent.width / 2
500
height: parent.height / 4
501
502
anchors {
503
top: buttonMinusAddTimer.top
504
left: buttonMinusAddTimer.right
505
}
506
507
Rectangle {
508
width: parent.width
509
height: parent.height
510
511
color: "transparent"
512
513
Label {
514
width: units.gu(5)
515
height: units.gu(5)
516
517
horizontalAlignment: Text.AlignHCenter
518
verticalAlignment: Text.AlignVCenter
519
anchors.centerIn: parent
520
521
color: Constants.ubuntuOrange
522
fontSize: "large"
523
text: i18n.tr("+")
524
525
MouseArea {
526
anchors.fill: parent
527
528
onClicked: {
529
secondsAddTimer += 60;
530
labelAddTimer.text = TScript.setlabelTimer(secondsAddTimer);
531
}
532
}
533
}
534
}
535
}
536
537
Item {
538
id: textboxTimerName
539
540
width: parent.width
541
height: units.gu(8)
542
543
anchors.top: labelAddTimer.bottom
544
545
Row {
546
spacing: units.gu(2)
547
anchors.horizontalCenter: parent.horizontalCenter
548
549
TextField {
550
id: textTimerName
551
552
width: units.gu(20)
553
554
placeholderText: i18n.tr("Timer's name")
555
}
556
557
Button {
558
id: buttonTimerName
559
560
width: units.gu(8)
561
562
color: Constants.ubuntuOrange
563
text: i18n.tr("Add")
564
565
onClicked: {
566
if (textTimerName.text != "" && secondsAddTimer > 0) {
567
storageTimer.setTimerValue(textTimerName.text +" ("+ TScript.setlabelTimer(secondsAddTimer) +")", secondsAddTimer);
568
secondsAddTimer = 0;
569
}
570
PopupUtils.close(popupTimer)
571
PopupUtils.open(setupTimer, buttonTimer)
572
}
573
}
574
}
575
576
Button { //this button is just for test
577
id: deleteTimerName
578
visible: false
579
580
width: units.gu(8)
581
582
color: Constants.ubuntuOrange
583
text: i18n.tr("View")
584
585
onClicked: {
586
storageTimer.deleteTable("Timer");
587
}
588
}
589
590
ListItem.Header {
591
id: timerHeader
592
593
anchors.top: textboxTimerName.bottom
594
595
text: i18n.tr("SavedTimer")
596
}
597
598
ListView {
599
id: viewTimer
600
601
clip: true
602
603
anchors {
604
left: parent.left
605
right: parent.right
606
top: timerHeader.bottom
607
}
608
609
model: storageTimer.getTimerLabel()
610
611
height: units.gu(30)
612
613
delegate: ListItem.Standard {
614
text: modelData
615
616
onClicked: {
617
seconds = storageTimer.getValue(text)
618
labelTimer.text = TScript.setlabelTimer(seconds)
619
buttonTimer.state = "START"
620
PopupUtils.close(popupTimer)
621
}
622
}
623
}
624
}
489
tools: ToolbarActions {
490
Action {
491
objectName: "add-preset"
492
493
iconSource: Qt.resolvedUrl("../images/add.png")
494
text: i18n.tr("Add Preset")
495
496
onTriggered: {
497
console.log("You clicked me")
498
addPresetCircleDone.visible = true
499
}
500
501
}
502
503
Action {
504
objectName: "action"
505
506
iconSource: Qt.resolvedUrl("../images/add.png")
507
text: i18n.tr("Edit")
508
509
onTriggered: {
510
console.log("You clicked me")
511
addPresetCircleDone.visible = false
625
512
}
626
513
}
627
514
}
628
515
}
629
Loggerhead is a web-based interface for Breezy
Version: 2.0.1