1 00:00:01,740 --> 00:00:02,610 Hey, welcome back. 2 00:00:02,640 --> 00:00:07,470 In today's Cold Experiment session, we're going to experiment with the buttons. 3 00:00:10,780 --> 00:00:16,180 Specifically, we are going to use images as buttons. 4 00:00:16,810 --> 00:00:21,370 So in my project directory I have these two PNG images. 5 00:00:22,090 --> 00:00:28,210 You can find these attached in the lecture resources in this lecture, so please get them and place 6 00:00:28,210 --> 00:00:32,140 them in the same directory with your grid that p file. 7 00:00:32,170 --> 00:00:40,090 Now if you prefer, and I do recommend that you create a separate project for experiments if you don't 8 00:00:40,090 --> 00:00:42,820 want to modify the existing. 9 00:00:44,140 --> 00:00:53,650 Program because in my case, I'll do some experiments, but then I'll just undo the changes and just 10 00:00:53,650 --> 00:01:01,690 go ahead and just continue with where we left the program in the video in the last tutorial. 11 00:01:02,620 --> 00:01:02,920 Right. 12 00:01:02,920 --> 00:01:08,230 So I assume you have the code and you have these two images in the same directory with the codes and 13 00:01:08,230 --> 00:01:12,790 then to use an image as a button. 14 00:01:13,750 --> 00:01:17,800 For example, let's look at the add button. 15 00:01:18,100 --> 00:01:23,230 This one here, you want to first remove the label. 16 00:01:27,000 --> 00:01:36,330 Leave the size for now and then adds an image underscore source argument which is equal to the path 17 00:01:36,510 --> 00:01:38,220 to your image file. 18 00:01:38,610 --> 00:01:46,040 In my case, it's add that g since this image is in the same directory with Guido's P. 19 00:01:46,320 --> 00:01:47,610 This script. 20 00:01:49,770 --> 00:01:53,460 So I want to first stop the script and then run it again. 21 00:01:55,440 --> 00:01:56,370 And very good. 22 00:01:56,610 --> 00:01:59,430 So that's the new button. 23 00:01:59,430 --> 00:02:01,770 Now it's replaced with that image. 24 00:02:03,700 --> 00:02:05,680 This does have some issues, though. 25 00:02:06,490 --> 00:02:10,449 One of them is the button is a bit wider. 26 00:02:10,539 --> 00:02:15,600 The second issue is the button disappears when we hover the mouse over the button. 27 00:02:15,610 --> 00:02:23,020 And the third issue is that the user might not understand what this button is about. 28 00:02:23,020 --> 00:02:25,000 So we want to show a tooltip. 29 00:02:25,120 --> 00:02:28,450 So let's fix all these three issues the size. 30 00:02:28,450 --> 00:02:35,770 First, close the program and try a size of to run again. 31 00:02:37,190 --> 00:02:43,040 And if you're satisfied then that what you should be using as the size. 32 00:02:45,350 --> 00:02:50,150 The second issue was that the button is disappearing where we place the mouse. 33 00:02:50,600 --> 00:02:54,640 To fix that, you want to add a new argument. 34 00:02:54,650 --> 00:02:59,900 So we have sides, we have image source and add a third argument. 35 00:03:00,610 --> 00:03:03,550 Called mouse over. 36 00:03:05,510 --> 00:03:08,120 Colors as a color. 37 00:03:09,720 --> 00:03:16,680 You can place any of the supported colours which you can find on Google if you search for peace, pie, 38 00:03:16,710 --> 00:03:21,690 symbol, Greek colours and you open these images. 39 00:03:21,690 --> 00:03:23,700 So they should have. 40 00:03:30,170 --> 00:03:31,250 Different colors. 41 00:03:31,250 --> 00:03:36,680 For example, light brown you see here, light brown. 42 00:03:37,250 --> 00:03:43,220 I can use it as a string light with capital L and capital be brown. 43 00:03:44,060 --> 00:03:47,180 So if I run the script now and I hover the mouse here. 44 00:03:49,000 --> 00:03:53,650 You know, the button doesn't disappear, but this is not yet ideal. 45 00:03:53,650 --> 00:03:55,690 So you want to find something that. 46 00:03:57,490 --> 00:03:58,870 Is better than that. 47 00:03:59,050 --> 00:04:04,210 I know that light Blue two will fix the issue. 48 00:04:04,480 --> 00:04:09,790 You see, now the button gets a tint of blue when I hover the mouse. 49 00:04:10,820 --> 00:04:15,140 And then it turns back to white when I remove the mouse from the button. 50 00:04:15,890 --> 00:04:18,170 So that's a better user experience. 51 00:04:19,220 --> 00:04:22,670 And lastly, let's add also a tooltip. 52 00:04:23,310 --> 00:04:26,150 I'll do that in the next line. 53 00:04:26,150 --> 00:04:31,280 So after the comma I press enter and then I add to tip is equal to. 54 00:04:32,660 --> 00:04:37,490 Had to do, for example, run. 55 00:04:38,000 --> 00:04:42,070 And then if I place a cursor over the button, I get this tip. 56 00:04:42,080 --> 00:04:45,050 So telling me what this button actually does. 57 00:04:45,770 --> 00:04:48,680 But if you write something here. 58 00:04:51,970 --> 00:04:53,450 And you press that button. 59 00:04:53,470 --> 00:04:54,950 It's not going to work. 60 00:04:54,970 --> 00:05:05,830 That is because we removed the label of the button and here Match Events is trying to match the ad string 61 00:05:05,830 --> 00:05:08,080 to the event variable of both. 62 00:05:08,080 --> 00:05:16,670 Such a string doesn't exist anymore as the label of the button, but that's what the keys are for. 63 00:05:16,690 --> 00:05:20,890 So you want to add the key, name it add. 64 00:05:20,890 --> 00:05:26,590 And so now case adds with check for an event equal to key. 65 00:05:26,920 --> 00:05:32,740 So the event takes either the label of the widget or the key as a value. 66 00:05:33,070 --> 00:05:42,130 So run Google, improve the app, press the button and improve the app is added here. 67 00:05:43,310 --> 00:05:46,520 And that is how you can create image buttons. 68 00:05:48,940 --> 00:05:49,840 As an exercise. 69 00:05:49,840 --> 00:05:52,120 You can also implement the complete button. 70 00:05:53,190 --> 00:05:53,850 If you like. 71 00:05:53,850 --> 00:06:00,780 I gave you the complete PNG file already, so it's attached in the lecture resources and of course the 72 00:06:00,780 --> 00:06:04,830 process would be exactly the same as we did with that button. 73 00:06:08,310 --> 00:06:09,330 So thanks for following. 74 00:06:09,540 --> 00:06:10,200 See you later.