1
00:00:00,570 --> 00:00:07,320
Hello and welcome to the part two of creating a digital clock using Python.

2
00:00:07,350 --> 00:00:11,920
In this part we are going to build the user interface.

3
00:00:12,090 --> 00:00:20,310
So we start by typing in route and we said that two equals two.

4
00:00:20,960 --> 00:00:22,100
T.K.

5
00:00:24,960 --> 00:00:30,330
the T K basically creates the root.

6
00:00:30,570 --> 00:00:40,830
Everything that you put on your screen whether it is a text box a button or an image is known as a widget

7
00:00:41,340 --> 00:00:46,110
and they must all be placed in the root.

8
00:00:46,110 --> 00:00:51,870
So the roots is kind of like a basket that you put all your widgets in.

9
00:00:53,340 --> 00:00:59,960
So let's add some more to this root next and want to do is set the attributes.

10
00:00:59,980 --> 00:01:04,320
So I do root dot attributes

11
00:01:08,150 --> 00:01:17,510
and inside of things I'm going to specify the attributes someone set the value for for screen.

12
00:01:17,580 --> 00:01:29,480
If you want your application to display in full screen then you set the value to true when it's full

13
00:01:29,480 --> 00:01:30,410
screen you can.

14
00:01:30,450 --> 00:01:32,160
It's hard to resize it.

15
00:01:32,670 --> 00:01:38,790
So I'm going to set that to force what you want to also be full screen where it can be resize and you

16
00:01:38,790 --> 00:01:41,190
can set it to true.

17
00:01:41,190 --> 00:01:47,070
I would you know just play around with it and see what set it to force code to make it easier for you

18
00:01:47,100 --> 00:01:50,320
to resize it to your taste.

19
00:01:50,340 --> 00:01:56,130
I want to set the background color for the clock on a send it to black.

20
00:01:56,130 --> 00:02:09,070
So you do root configure called FICO and then a parent sees you typing in the word background

21
00:02:12,100 --> 00:02:14,640
and you set it to whatever color you want.

22
00:02:14,650 --> 00:02:26,270
I'm going to send it to black typing black make sure you always match up your quotes.

23
00:02:26,270 --> 00:02:32,430
Next thing I wanted to I need you to be able to click on the X button.

24
00:02:32,440 --> 00:02:39,430
You can see this X here on or create one for the application so that you can exit when you click that

25
00:02:39,970 --> 00:02:43,030
sort of root and bind.

26
00:02:43,030 --> 00:02:49,790
So I'm going to bind I'm going to bind this function here called quit.

27
00:02:50,440 --> 00:03:05,710
So I'll wrap that in parentheses so attach a label called X and that X. I'm going to also parsing the

28
00:03:06,220 --> 00:03:09,170
function called quit.

29
00:03:09,250 --> 00:03:15,880
So this root or bind will take in two arguments these value x and then quit.

30
00:03:15,880 --> 00:03:19,210
This is the functional already defined.

31
00:03:19,420 --> 00:03:33,150
I'm going to trigger the clock again to start to do a root dot after every milliseconds.

32
00:03:33,160 --> 00:03:36,990
I want the clock to start.

33
00:03:37,000 --> 00:03:46,210
So call the clock on this core function which is clock on this code time and that trigger the clock

34
00:03:46,210 --> 00:03:59,590
to start and call this variable this here and I'm sending that to a string variable function in order

35
00:03:59,590 --> 00:04:00,650
to save time.

36
00:04:00,670 --> 00:04:07,950
I have completed the code so let me just go through what I added on.

37
00:04:07,960 --> 00:04:15,720
So here I've created a variable called F.A. and said that two equals two font font.

38
00:04:15,730 --> 00:04:21,520
So basically I'm using the specified a font family here called Helvetica.

39
00:04:22,120 --> 00:04:28,900
And I've said that the size of the font to be a hundred and twenty the weight.

40
00:04:28,960 --> 00:04:31,830
That means I wanted to be bold.

41
00:04:32,140 --> 00:04:43,060
And here I have defined this text to 60 variable and I've set that to equals to a string var what this

42
00:04:43,060 --> 00:04:48,520
means is that this will hold a string value by default.

43
00:04:48,520 --> 00:04:50,800
OK.

44
00:04:52,030 --> 00:04:56,140
And here I am using the this LBO.

45
00:04:56,170 --> 00:05:07,000
It's a label variable and I'm using reference in this T T K which is sub module of T counter.

46
00:05:07,090 --> 00:05:13,540
So here is where we are setting the properties for the clock.

47
00:05:14,050 --> 00:05:21,820
So we sat in the background which is the foreground color of the clock is going to be white while the

48
00:05:21,820 --> 00:05:24,190
background of the actual clock.

49
00:05:24,340 --> 00:05:27,980
The text is going to be blank.

50
00:05:28,030 --> 00:05:29,740
This is different from this.

51
00:05:29,740 --> 00:05:31,800
This is this relates to the screen.

52
00:05:31,810 --> 00:05:34,900
This week of setting these properties here.

53
00:05:34,900 --> 00:05:42,090
These settings of the actual window while these ones here are for the actual clock itself.

54
00:05:42,280 --> 00:05:48,210
The text that the clock displays that's what these settings are for.

55
00:05:48,360 --> 00:05:52,810
That's the foreground color and that's the background color.

56
00:05:53,440 --> 00:05:59,590
And this here is used to anchor it to the center here.

57
00:05:59,590 --> 00:06:11,710
I've used the relics and the rely basically these are geometric functions in t Kenta who basically use

58
00:06:11,710 --> 00:06:21,500
them to give a position that is relative to the window Wow.

59
00:06:21,510 --> 00:06:23,090
The uncle here.

60
00:06:23,130 --> 00:06:28,460
He's used to naturally center the widget.

61
00:06:28,870 --> 00:06:33,540
Finally on this line here was the route the main loop.

62
00:06:33,610 --> 00:06:39,250
This basically handles the tea into event loop.

63
00:06:39,400 --> 00:06:48,410
So basically it keeps the application or the clock running on till the window is closed.

64
00:06:48,760 --> 00:06:50,330
So that is it.

65
00:06:50,440 --> 00:06:54,400
So the clock is basically built more.

66
00:06:54,400 --> 00:07:02,140
I would advise you to make sure you format those options here to format you can indent make sure your

67
00:07:02,140 --> 00:07:08,530
indentation is like mine because this edit was quite very fuzzy.

68
00:07:09,040 --> 00:07:12,160
So if you don't intend things properly it will complain.

69
00:07:12,160 --> 00:07:15,200
So make sure your indentation is spot on.

70
00:07:15,370 --> 00:07:22,220
If you get any errors usually the arrows would be on this side in the shell just response to it.

71
00:07:22,290 --> 00:07:25,280
Okay so I'm just gonna click save.

72
00:07:25,450 --> 00:07:33,580
Now I want to run the clock so you can run it by just query run and click on module and I will open

73
00:07:33,580 --> 00:07:34,360
up the clock.

74
00:07:34,360 --> 00:07:36,990
Hopefully everything should be OK.

75
00:07:37,210 --> 00:07:38,110
So this is it.

76
00:07:39,310 --> 00:07:45,150
So if you had this set to fullscreen then it would take over your entire screen.

77
00:07:45,430 --> 00:07:53,110
But doing it this way you can recite it to whatever size you want and it's more it's a more flexible

78
00:07:53,170 --> 00:07:53,950
approach.

79
00:07:54,020 --> 00:08:03,380
OK if you want the different formats if you want to add the actual date to this.

80
00:08:03,430 --> 00:08:07,090
I have also created a line of code by a comment made it out.

81
00:08:07,570 --> 00:08:09,980
So let me just close this.

82
00:08:10,060 --> 00:08:15,580
This line of code here I've commented it out and this one here.

83
00:08:16,090 --> 00:08:17,320
So this allows you.

84
00:08:17,320 --> 00:08:19,720
This will you can see the format here.

85
00:08:19,720 --> 00:08:23,460
This would display both the date and the time.

86
00:08:24,070 --> 00:08:31,860
So why I'm gonna jump on a comment this out if you want to comment something in Python.

87
00:08:31,960 --> 00:08:38,650
You do that using the hash symbol is very useful enables you to try things out.

88
00:08:39,540 --> 00:08:43,100
All right so I'm gonna use a different format here for this time.

89
00:08:43,150 --> 00:08:51,460
So you're gonna give me put the date and the times I'm gonna click save and run this so you can see

90
00:08:51,460 --> 00:08:53,100
the difference.

91
00:08:53,500 --> 00:09:03,400
And this should hopefully show me just expand that you can see it's quite big.

92
00:09:03,400 --> 00:09:11,440
Okay I probably need to reduce so you can see shows but because I've got it so big.

93
00:09:11,440 --> 00:09:14,350
That's why I cover the screen or at 1 need to do.

94
00:09:14,530 --> 00:09:22,570
Let me just reduce or close that call me away I've got the size of the funds are just reduce down to

95
00:09:22,570 --> 00:09:35,640
60 because the screen has more to contain and I run the in-game the screen should be smaller now and

96
00:09:35,650 --> 00:09:38,470
it should be able to see everything so you can see that.

97
00:09:38,470 --> 00:09:43,300
So if you prefer these formats of the clock that's fine.

98
00:09:43,300 --> 00:09:47,800
Then what you need to do is use this code here.

99
00:09:48,760 --> 00:09:49,970
OK.

100
00:09:50,320 --> 00:09:53,890
If you don't want that you don't need this.

101
00:09:53,900 --> 00:09:57,670
I'll just get rid of that.

102
00:09:57,790 --> 00:10:01,690
This is just I don't need that anymore.

103
00:10:01,700 --> 00:10:05,350
This was just a comment.

104
00:10:05,390 --> 00:10:07,990
So just Bob.

105
00:10:08,520 --> 00:10:08,910
All right.

106
00:10:08,920 --> 00:10:17,590
So if you decide you only want to show the time you don't want a date then you comment this line out

107
00:10:18,070 --> 00:10:20,080
and use this line instead.

108
00:10:20,260 --> 00:10:24,310
I prefer just a time other moments so I'm going to comment this out.

109
00:10:24,310 --> 00:10:31,200
I don't want to date but it's good to have the option so that you can choose which format you like.

110
00:10:31,360 --> 00:10:36,940
So I'll go back to the format I chose since I've got less text to display.

111
00:10:37,000 --> 00:10:44,020
I'm going to increase the font size to 120 so that it is big on the screen.

112
00:10:44,020 --> 00:10:45,640
I'll save that.

113
00:10:45,650 --> 00:10:51,720
Run that again run the module and it's set up.

114
00:10:51,910 --> 00:10:54,090
I prefer this format.

115
00:10:54,540 --> 00:10:55,280
OK.

116
00:10:55,330 --> 00:10:56,870
Make sure you save your work.

117
00:10:56,900 --> 00:10:58,210
Always save it.

118
00:10:58,210 --> 00:11:01,740
So when you save you go to click save as.

119
00:11:01,970 --> 00:11:11,890
And I've saved mine as digital clock dot P Y P Why is the python extension Okay save anyway you like

120
00:11:11,950 --> 00:11:14,090
I've saved mine on the desktop.

121
00:11:14,630 --> 00:11:14,980
Okay.

122
00:11:15,010 --> 00:11:15,720
So that's it.

123
00:11:15,880 --> 00:11:20,240
That's the end of this project for the digital clock.

124
00:11:20,260 --> 00:11:23,320
I hope it's been useful if you do have any problems.

125
00:11:23,320 --> 00:11:24,880
Please feel free to contact me.

126
00:11:25,450 --> 00:11:26,450
Thanks for watching.

127
00:11:26,530 --> 00:11:27,110
Bye now.