Original subtitles

1

The first thing I want you to do to get started is to head over

2

to the course resources and download the starting files for the Pomodoro

3

project. Once you've got that,

4

then you should be able to unzip this file and get hold of the starting folder.

5

Next, I want you to open up that folder using PyCharm.

6

So in my case, my folder's inside my downloads,

7

and then I'll just click open. And PyCharm should automatically configure the

8

latest version of Python you've got installed.

9

So if you take a look inside this folder, there's two files.

10

There is a image of a tomato which we're going to use in our project,

11

and there's also a main.py with a couple of sections already hashed out for

12

you. And we've also included some constants,

13

like some color hex codes or a font name or the number of minutes for working

14

short breaks in a long breaks. So that's already in the starting file.

15

The first thing we're going to do is to set up our UI.

16

So under the section UI set up,

17

we're going to create a new window using tkinter

18

and we're going to get the window to run and give it a background color,

19

pretty simple.

20

So let's go to the top of our file and import our tkinter module.

21

And then if we scroll down to our UI setup section,

22

let's go ahead and create a new window from the tk class.

23

Remember that our tk class is one of the classes from tkinter

24

so you can either tap into the tkinter module and then get hold of the tk class

25

like I have done here, or as in our case,

26

if we're going to be using a lot of classes from tkinter

27

then we can simply say from tkinter let's go ahead and import all of the

28

classes. So that way we can straight away refer to this tk class.

29

Now that we've created our window,

30

the next thing we can do is to set the title of the window,

31

which you can of course call it anything you want. But in my case,

32

I'm going to set it to just Pomodoro,

33

which just means tomato in Italian.

34

So now that we've got our Pomodoro,

35

then we're going to get our window to show up by using window.main loop as

36

usual.

37

And now if we run this, code our main, and you can see we've got a blank window,

38

a title, and we're ready to go to the next step.

39

The next step is to put an image into our program so that we can have this

40

tomato as the background of our program,

41

and then we can put some text on top

42

which is going to signify our countdown timer. This is what we're aiming for,

43

but to achieve this and to be able to put images onto the screen

44

which look like this,

45

we're going to have to learn about the tkinter canvas widget. A canvas

46

widget is a little bit like a real life canvas, really.

47

It allows you to layer things one on top of the others.

48

So you could draw something and then you can draw something on top of that.

49

And what it allows us to do in our case is to place an image onto our program

50

and then to place some text straight on top of that.

51

In between our window creation

52

and the window main loop is where we're going to create our canvas.

53

And our canvas is created using the canvas widget

54

of course.

55

One of the things that we can specify when we create our canvas is a width and

56

a height, and that will be a value in terms of pixels.

57

So we know that we want to display this tomato image inside that canvas.

58

And we can see that this has a,

59

roughly a width of 200 and a height of 223.

60

So let's create a canvas that's roughly about the same size as the image.

61

So we'll put a width of 200 and a height of 224 so that we work with some even

62

numbers. Once I've created my canvas

63

the next thing I want to do is to add my image to it.

64

And we can use a method that the canvas has it which is called create_image.

65

And as soon as I type create,

66

you can see there's actually a whole bunch of other methods like create the text

67

in the canvas, create a rectangle, create an oval.

68

And all of these things could be overlapped on each other inside the same

69

canvas. Now, when we create an image,

70

there's a couple of things which are required. The first thing is the X and Y

71

positions of this image in the canvas.

72

Given that we have a width of 200 and a height of 224,

73

I want my image to be bang in the center of the canvas. So I can provide the X

74

value as half of the width and the Y value as half of the height.

75

In addition to the X and Y values,

76

we also have to specify a image.

77

But I can't just simply just type the name of my image

78

which is tomato.png,

79

because that is not the type of data that this argument is expecting.

80

What it wants instead is something called a photo image

81

and this class comes from tkinter

82

and it's basically a way to read through a file and to get hold of a particular

83

image at a particular file location. In my case,

84

the file location is in fact tomato.png.

85

And if your image was stored in say another sub folder or a different place,

86

then you should provide the relative or absolute file path to get there from

87

where your code is, which is the main.py. But in our case

88

it's very easy, they're both in the same folder,

89

so we can simply specify our filename like

90

so. The next thing we're going to do is we're going to save this photo image in a

91

variable so we can refer to it later on.

92

I'm going to call this our tomato_img.

93

Feel free to call it anything you want.

94

And that is the data that goes into this image argument.

95

Now we've created our canvas, we've created our photo image,

96

we've told our canvas to create an image at this position,

97

and then we've put the image inside.

98

The final thing we need to do is to pack our canvas or use some other sort of

99

method to specify the layout of how the canvas is going to go on the screen.

100

And now we can hit run,

101

and we can see our image on the screen.

102

So now notice how the image is basically taking up the entire space of the

103

window. And in fact, the window is resizing itself to fit this image.

104

Wouldn't it be better if this screen was actually a little bit bigger?

105

So we don't just look at the image of a tomato.

106

We can do that by getting our window to be configured.

107

And the configuration that we want to change is the padding,

108

so I'm going to change the padx and pady. On the X-axis on the horizontal

109

I'm actually going to add a whole hundred pixels of padding on both sides.

110

And then on the Yaxis, pady,

111

I'm going to change that to 50 so that it's got 50 pixels of padding on the

112

top. That's looking pretty good other than one small defect.

113

You can see that our tomato image is a little bit cut off on the left

114

and I suspect this is because the actual image is a little bit shifted over to

115

the left.

116

So we can actually adjust this X position to be a little bit more to the right,

117

and that way our tomato

118

can be centered on screen without being cut off on either side.

119

So now that we've tweaked our image and we've displayed it on the screen,

120

the next thing to do is to display some text.

121

As you noticed before, in addition to canvas.create_image,

122

they will a whole bunch of other things we could create, including some texts.

123

This create_text method works very similarly to the create_image method.

124

Notice how the first thing that's getting highlighted is the *args.

125

And then we've got our **kw.

126

So remember from the lessons yesterday,

127

these arguments are the unlimited positional arguments and these arguments are

128

the unlimited keyword arguments. So the keyword arguments here

129

are for example the

130

image or the background color or anything else,

131

but these are the X and Y values.

132

So creating the text,

133

we also have to provide a X and Y value.

134

So I'm just going to try the same values as the image to see how that looks.

135

And now we can add some keyword arguments, for example, the text.

136

So I just want it to say 00:00,

137

which looks pretty much like the clock. Now,

138

if we run our code, you can see we've got a little bit of text showing up.

139

Now, notice how it's a little bit high up on the tomato,

140

because remember the tomato starts at the top here and ends here.

141

So that is the center of the tomato image,

142

but we can move it down a little bit so that it's actually centered in this red

143

part, the circular part. With a little bit of experimentation,

144

I think this, 103, 130, actually works quite well

145

and it's pretty much bang in the center of the tomato.

146

Let's modify this text in some other ways. We can change the fill

147

which is basically the color of the text and I'm going to change that to white,

148

that you can see here. And then I'm going to change the font as well.

149

And this is going to expect a tuple.

150

So it's going to be the font name and then the size, and then whether,

151

if it's bold or italic or whatever else you want to do. Now in the constants

152

here, I've already got the font name defined,

153

which is gonna be Courier that we're gonna be using. So that we can straight up

154

add our font name and then we'll add a font size as 35,

155

and it will say, yeah, make it bold. So there you have it.

156

We've got our tomato, we've got our text showing up as the countdown timer.

157

Now,

158

the final thing I want to do is just to change the background color to a slightly

159

nicer looking color. Now,

160

one of my favorite websites is this one called colorhunt.io,

161

which shows you a whole bunch of different color palettes that professional

162

designers have a created

163

and it makes it really easy for us to just snap up some of these hex codes and

164

use them straight away in our program. Now,

165

the one that really caught my eye is this one,

166

cause it has a bit of the tomato color palette.

167

So I've transferred all of these hex codes to the constants in the starting

168

file. So you can see I've got the pink, the red, the green, the yellow,

169

and we're going to be using that across our program to give it that consistent

170

color theme and make it look like it's been professionally designed.

171

So what I want to do is I want to change the window's background color,

172

and I can do that through the keyword argument called at bg for background,

173

and I can set it to a hex code.

174

So a hex code starts out with the pound sign and then it's some numbers and some

175

letters. Now I've already got all of that for you

176

and all you have to do is just to put down the name of the constant.

177

So this should not be in quotation marks because it's not the word. It is

178

in fact,

179

referring to that particular variable and the string that's held inside.

180

So now if we check our screen,

181

you can see the background has been changed to that nice yellow color, sort of

182

rice or hay color, but the tomato,

183

namely the canvas, still has that white background.

184

So let's change the background color of the canvas as well. And again,

185

it's using the bg.

186

So some of these, you'll notice, are standard attributes that we can change like

187

the width and the height and the background color,

188

which is standard across all of the widgets. And some other things like file

189

here are some of the more specific keyword arguments.

190

So let's apply this yellow to the background of the canvas,

191

and you can see that the canvas is now yellow as well.

192

But it's still got this little white border

193

which denotes the edges of our canvas. To get rid of that

194

I found a specific keyword argument that would actually help

195

and it took quite a bit of digging around, quite a bit of Stack Overflow

196

searching and googling in order to find this.

197

It wasn't very straightforward because tkinter is not well-documented

198

unfortunately. But thankfully for you,

199

all you have to do is find your canvas and on the line where you've created it,

200

go ahead and add this keyword argument.

201

It's called a highlightthickness,

202

and be sure that you spell it right, because it's really long.

203

And remember that there's two Ts cause it's highlight and thickness and there's

204

nothing in between, no underscore, no nothing to separate it.

205

I think that the tkinter team could have really done a little bit better here,

206

but hey.

207

If we set the highlightthickness to zero and we rerun our code,

208

then you should see that it now looks pretty good.

209

And our canvas is now completely the same color as the background of the window.

210

And you can't tell it where the window begins and the canvas ends. Now,

211

the only problem is once we've removed that border around the canvas,

212

our tomato is once again, shifted a little bit.

213

So we can actually adjust this and we can change this back to 100 and I'm going

214

to change it both for the text and the image.

215

And we can make that tomato image perfectly round

216

once more. With tkinter I've found that you have to do quite a bit of tweaking

217

around especially with these positions.

218

And you'll spend some time judging it by eye

219

in terms of the size and the width and where to place it.

220

But we have now successfully managed to place an image onto the screen,

221

changed the background of the window,

222

keep it consistent and add a little bit of text onto our tomato.

223

So now we're ready for the next step. In the next lesson,

224

we're going to create the rest of the user interface.

225

And that is mostly going to be up to you. So for all of that and more,

226

I'll see you in the next lesson.