Hey, guys, what's up?
I welcome you to a new tutorial on discourse where we are creating 20 Cantera applications.
So so far what we have done is that we have created our constructor function.
We have created a create widget function that basically contains a frame that contains two combo boxes,
two buttons and a canvas.
Finally, we have got the change color function, the change taking this function, LeClaire function
and the undo function.
Basically, these are all things that are basically a part of the frame rest then the canvas.
So in this territorial, we are going to deal with the canvas and we are going to go to function.
The first one is going to be the on movement function and then we are going to call the release function.
So I've already explained what on moment and on Reles means that we will just remove these comments
from here so that these are no longer comments.
All right, so let's go on and go to our very first function, that is the.
On.
Movement function, so what this movement is going to do is that it is going to receive an even and
what is going to be that event is basically written right or help this be one motion is going to be
the event.
So whenever this event is performed, this function is going to get called.
And this is basically going to be the argument that is going to get passed and get caught in this event.
Variable, right.
Or help.
So in this function, what we are going to do is that we are going to assign the values for X one Y
one X Y to explain why we are basically going to be the starting position where you are going to start
drawing and X Y two are going to be the ending position where you are going to end up with your dream.
So the first thing in this function you are going to do is that you are going to deal with the Dagg.
So you're going to write and tag.
A string that is going to be empty and you're going to write and join.
S dot dag.
Now, what does this mean, actually, is that you are going to basically just join the deck with the
tag value.
So now what you are going to do is that you are going to assign the values for X one Y, one x2 and
Y.
So the first thing we are going to do is that we are going to assign the values for X one and Y one,
and we are going to make it equal to whatever event is being released and whatever position that is.
Even X is basically the event that has occurred at Position X..
And what we are going to do is that we are going to minus the techniques from it.
Now, what is the reason that we are subtracted from it is because, for example, if you have a look
at how so, for example, you have got span of a here and let's say you just draw a line over here.
So, for example, you have this fanhouse thickness is, let's say, greater than this canvas window.
So if you then try to draw something, that is going to be very absurd.
So that's why what we are doing is that and this is also basically going to just destroy our X and Y
coordinates position.
So that's why what we are going to do is that we are going to specify the X squared in the position,
but we are going to specify the position other than the.
So that's why we are subtracting the thickness from it.
After that, what you're going to do is that you're going to specify the position for Y.
So you're going to come over here and you are going to write an event dot y.
Minus the same thing, that is the thickness, so you're going to the thickness from it as well, and
then you're going to specify the X to come away to positions as well.
So if you have a look over here.
So if you just consider one line over here, let's say this line of a hill.
So in here, basically this position of a hill is basically the starting position that is going to be
X one, comma, Y one, but that is going to be something other than the thickness.
Then this is going to be the only position that is going to get indicated by X two, comma Y two.
So right over here we have specified the values for X one, comma Y one.
Using that you went and whatever even is basically going to get ended.
That is going to get indicated by even X and get stored in X2.
So we are going to write an even dot X, but this time we are going to add the thickness to it.
So when you do this thing, what happened basically is that you have subtracted the thickness and then
you have added the thickness so that nothing happens to the position of the coordinates you are dealing
with.
Then what are you going to do is that you're going to do the very same for you and not Y and you're
going to add the thickness into it.
After that, what you are going to do is that you are going to call a function that is known as the
create all function and what is the purpose of this create all function.
This is basically a function that is going to take in for arguments, which represents the coordinates
of a rectangle.
It will make an ellipse or a circle which touches in the middle of edges of the rectangle.
So let's just call this.
So for that, we are going to use the event.
Whatever has happened, that is be one motion in our case.
And we are going to write and be one motion dot widget dot.
Create underscore all that is basically the function and as a you it is going to receive in four arguments
that are basically going to be the coordinates of a rectangle.
So we are going to write an X one comma, Y one comma x2, comma, Y2.
So these are basically going to be the four coordinates Luz's at Space's.
All right, so we have got these four parameters now where you can do additionally Ohara is that you
can just have the additional parameters, like where you can just specify the word, let's say the word
is zero and then you can specify the color.
So that is going to be the fail, which means that it is going to get filled.
What by field?
I mean that the color that is going to be in between.
So that is going to equal to.
Self-taught color and by subdued color, I mean the color with which you are actually drawing things
and then you are going to specify the tag and the tag is going to equal to that, which is basically
whatever value is stored or held.
All right, now, what we need to do over here is that I guess a place to comma well here it does not
have to be Comite has to be a dot.
No, it's perfect.
Now, what do you have to do is that you have to specify and if condition and you have to check if certain
things exist on the canvas before or not, how you can check it, you can just go on and use the extoll
and why all variables which you have initialized in the constructor function so you can just try it.
And if.
S dot xiphoid.
Is not none and.
Self-taught.
Why all is not known, then what do you want to do is that you want to write in s dot?
Canvass door to create underscore all, and that is going to receive the four arguments that are going
to be this right over here.
So we are going to just covid is from here.
And we are going to just place them right over here, and the next thing we are going to do is that
we are going to have one more function that is basically the create line function.
And this basically is going to create lines for us based on four parameters, based on certain parameters.
So we are going to call the create line function here and in there.
We are going to write and self-taught x old.
Self-taught.
Why old?
And we are also going to specify the events over here, so that is going to be even Daudt ex.
You went dot vi, and you can just specify a certain other parameters that are basically not required
if you don't want to use them, just don't you, that that is going to be good to smoke equal to draw,
which means that it is going to draw a smoke line.
And then what you can specify is that you can specify the word.
Equal to, let's say, two, and you are going to also multiply the weight with the thickness and this
is also not necessary.
If you don't want to do it, just don't do it.
And then you can specify the Fergana here.
And that is going to be the very same.
That is going to be self-taught color.
And finally, we are going to write and tag equal to that.
And that is going to just complete our job for the condition.
Now you're going to just move out of the if condition and what you going to ride and that you're going
to write in the values for X all and Y all.
Now, that is going to happen when you are done creating a line.
So, for example, you are done creating this line.
You just ended it right over here.
Now you have to specify the values for X and Y.
All the reason behind this is that whenever the next line is going to get drawn and this condition over
here is going to get checked, that is seldom X is not done.
And so that all is not done.
So if you don't just change the values for the excellent y, all the next line is not going to get drawn.
So here's where you draw it, smooth and neat.
So you'll just write and self-taught.
Exiled equal to U.S. dot x, and you are going to write and self-taught.
Why old equal do you went that way and that is going to basically do your job for this function, so
that's it with this function.
To give you a quick recap of what we have done in this function, basically what we have done is that
we have initialized the value of that, which means that whenever this one moment function is going
to get called, the tag value is going to get incremented up to that.
We are going to specify the values for X1 vibrant and x2 y2.
And these are basically something when you specify the values for X and Y one, you are going to subtract
the thickness.
And when you want to specify the values for X2 and why do you are going to add this thickness of a hair,
then you are going to call the grid or function that is going to receive it for arguments.
That is going to display a rectangle for you.
It can be used to draw a circle as well.
Then you are going to check if the value for X and Y all is not none.
If it is not, then you are going to create all you can create lines and you can have anything.
After dealing with this condition, what are you going to do is that you are going to change the values
for excellent Viorel because if you don't do it, you are not going to be allowed to do anything else.
So let's go on with the final function that is basically.
I guess the on motion function, I just forgot the name where it is, it is the release function.
All right, so we are going to roll right in on release.
And this function is also going to receive an event.
And what is that event?
We have specified a tried to help.
Somewhere over here, yes, here it is.
That is if the button one, which means the left mouse button, whenever it is released, this function
is going to get cold and that even the dots are going to get passed into the function that is going
to be received in this event variable right over here.
So in this function, what you're going to do is that we are going to specify the X by all the values
to be equal to none.
And after that, we are going to increment the value for the tag.
So we are going to write in S DOT.
Exalt equal to none.
You are going to ride in self-taught.
Why all equal to none?
And finally, we are going to write and self-taught tag.
Equal to.
Dach and the value is going to be.
S dot.
That one.
Plus one, which means that whatever is the value for daggered position, one that is going to get incremented
by one.
Now, one important thing you need to know here is that the first function that is always going to get
called is basically going to be this function.
The initial value for the tag is going to equal to one.
But whenever you release the mouse button, that is when we want the tag value to get incremented.
So on releasing the mouse.
But in this function is going to get called and the tag value is going to get incremented by one.
And for example, if I just give you an example over here.
So over that we will just remove this stock from here.
All right, so let's just have a try to help.
Now, what I'm saying is that, for example, you just draw a line and don't know.
I have not released the left mouse, but if I release the mouse button, the only function is going
to get called.
And this Ohare is going to basically given the value of tag equal to zero.
But the tag value is going to get incremented by one because the only function is called and the barrel
is not going to equal to one.
Now for the next line, I want to draw a line and until and unless I don't release my mouse button,
this that is going to remain the very same.
But now when I release the mouse button, this Ohare is going to get assigned the value of one and the
tag value is going to get incremented by one and the tag value is now going to equal to two.
So what I'm seeing over here is that this tangle here that says tag equal to this giant, the tag.
This is basically going to receive the value or you can say that incremented value from this on release
function.
So for the initial, it is going to receive the value of zero, which we have initialized in the constructor
function.
But after one release of the mouse, the value is going to get incremented and it is going to be a to
one.
And this is then going to take that value.
Similarly, when the mouse is released again, it is going to release that value than when it is released.
Again, it is going to keep on receiving those values one by one.
So I guess that's it with our application, it's time to I guess if we don't have any kind of errors,
it is going to perfectly run.
Fine, let's just run this out.
We have got this triangle right over here.
Let's just move to the center and we have got this as black.
So if you just draw, you can see that you're trying.
But when you release the button, that is when the tag value is going to get incremented and you've
got this black right over here.
So let's just change the color and let's just see if you've got this green.
Does this have something drawn green?
And you can just change the thickness as well as, say, the thickness is five, the color is yellow.
This time you can see now the thickness has been increased.
And if you click on the undo button, the first thing that is going to undo is basically going to be
the yellow color.
If you click on and again, the green is going to get deleted and if you click on and again the black
is going to get deleted.
So let's say you have this green, let's say then you've got this brown over here.
Then let's say you have got.
Let's say this Lagoa here.
So if you click on the clear button, everything is going to get cleared and the tag value is going
to get equal to zero directly.
But if you click on under the tag, value is going to get incremented one by one until it reaches zero.
That is when the screen is cleared entirely.
All right.
Now, one more thing I want to show you that is going to be very interesting for you is that what if
you don't have this release button right over here?
So let's just get this out there.
We are calling this was a scam.
Comment this out from here.
This means that this is not now going not going to get calls.
So we will just remove this from here and now run this.
I was just going to run perfectly.
You can just draw things and you can see that the line has perfectly be drawn.
Now, you must be thinking that what is the purpose of the release function if it has no kind of job?
Now, for example, you just draw a line far away with a green, let's say the red color right of a
hill.
But when you draw a line, you can see that this line has been drawn automatically.
Now, the reason behind this is since the release function has not been called.
So that's why the X one Y one x2 y2 coordinates are automatically going to get goal and this line is
going to get printed by default.
We have only printed this line, but this line has been printed itself.
For example, if you just have, let's say, yellow color and you just draw a line right below here,
you can see that it has been drawn automatically with the previous line right over here.
Moreover, the reason behind this, the technical reason, if you ask me, is basically the tag value
is not being incremented or decremental right over here.
So that's why the function of a here, that is the ANDREADIS function.
That is very important.
We're here to remove the comment from here as well.
So now if you just run this code.
You're going to see that one of our children now just leave the cursor and move ahead.
You can see that you've got no connection right away.
So that's why this unreleased function is very important.
So that was it.
I guess with this application, you have coded your crying application and you can just draw your heart
out on the canvas you have created.
So it'll give you a quick recap of the entire application.
We have this constructor function in which we have got certain initialization.
Then we have to create widgets function that is basically creating the frame as well as the two buttons
and the Duke on the boxes on it.
Then we have the change color, change thickness function that is used to change the color and the techniques
respectively.
Then we have the clear and undue burden that are basically associated with the clearing and undo buttons
we have created respectively.
And they are basically used to clear and undo things.
And then the most important functions of all in this application, the on moment and on release function
on moment, is basically going to trigger an event and on release is also going to get trigger on the
triggering of an event.
And that is basically going to do the drawing board on the canvas.
So if you have followed me this far, then I hope that you have also created your trying application
and that you have got no kind of errors.
So if you have got any kind of errors, you can just ask me and I'll be more than happy to answer.
So I guess that's it.
With this section in the next section, you are going to see some more interesting applications in Biton.
So that's it with this tutorial with the section.
Thank you so much, guys, for watching.
And I'll see you guys in the next section.