Hey, welcome back.
In today's Cold Experiment session, we're going to experiment with the buttons.
Specifically, we are going to use images as buttons.
So in my project directory I have these two PNG images.
You can find these attached in the lecture resources in this lecture, so please get them and place
them in the same directory with your grid that p file.
Now if you prefer, and I do recommend that you create a separate project for experiments if you don't
want to modify the existing.
Program because in my case, I'll do some experiments, but then I'll just undo the changes and just
go ahead and just continue with where we left the program in the video in the last tutorial.
Right.
So I assume you have the code and you have these two images in the same directory with the codes and
then to use an image as a button.
For example, let's look at the add button.
This one here, you want to first remove the label.
Leave the size for now and then adds an image underscore source argument which is equal to the path
to your image file.
In my case, it's add that g since this image is in the same directory with Guido's P.
This script.
So I want to first stop the script and then run it again.
And very good.
So that's the new button.
Now it's replaced with that image.
This does have some issues, though.
One of them is the button is a bit wider.
The second issue is the button disappears when we hover the mouse over the button.
And the third issue is that the user might not understand what this button is about.
So we want to show a tooltip.
So let's fix all these three issues the size.
First, close the program and try a size of to run again.
And if you're satisfied then that what you should be using as the size.
The second issue was that the button is disappearing where we place the mouse.
To fix that, you want to add a new argument.
So we have sides, we have image source and add a third argument.
Called mouse over.
Colors as a color.
You can place any of the supported colours which you can find on Google if you search for peace, pie,
symbol, Greek colours and you open these images.
So they should have.
Different colors.
For example, light brown you see here, light brown.
I can use it as a string light with capital L and capital be brown.
So if I run the script now and I hover the mouse here.
You know, the button doesn't disappear, but this is not yet ideal.
So you want to find something that.
Is better than that.
I know that light Blue two will fix the issue.
You see, now the button gets a tint of blue when I hover the mouse.
And then it turns back to white when I remove the mouse from the button.
So that's a better user experience.
And lastly, let's add also a tooltip.
I'll do that in the next line.
So after the comma I press enter and then I add to tip is equal to.
Had to do, for example, run.
And then if I place a cursor over the button, I get this tip.
So telling me what this button actually does.
But if you write something here.
And you press that button.
It's not going to work.
That is because we removed the label of the button and here Match Events is trying to match the ad string
to the event variable of both.
Such a string doesn't exist anymore as the label of the button, but that's what the keys are for.
So you want to add the key, name it add.
And so now case adds with check for an event equal to key.
So the event takes either the label of the widget or the key as a value.
So run Google, improve the app, press the button and improve the app is added here.
And that is how you can create image buttons.
As an exercise.
You can also implement the complete button.
If you like.
I gave you the complete PNG file already, so it's attached in the lecture resources and of course the
process would be exactly the same as we did with that button.
So thanks for following.
See you later.