 Welcome again to another lecture of the course on computer programming. I am Dr. Aghiram Ranade of the department of computer science and engineering at IIT Bombay. In this session, I am going to tell you about elementary graphics events or in other words, how to do graphical input, some preliminary ways of it. So, last time we looked at coordinate based graphics facility of simple CPP. Today, our goal is how to handle graphical input. So, graphical input involves events in the sense that when a user clicks a button or clicks a mouse button or clicks a key on the keyboard that is considered an event. And so, graphical input really is dealing with events such as that. This material that we are going to discuss today comes from section 5.5, 5.7 and 6.4 of the book, An Introduction to Programming through C++ published by McRahill Education in earlier this year. Graphical input is input given through the mouse touch screens. By graphical input, we mean information provided to a program by clicking on a screen using a mouse or using a touch screen. We do not include in graphical input the information that comes to a computer or the program by pressing keys on the keyboard or by reading files from disk. The graphical information usually includes the coordinates of the point at which a click was made in addition to information about what was clicked. For example, in connection with a mouse, the clicking might be of the left button or the middle button or the right button or there might also be issues such as was the mouse moving and was information coming about mouse while it was in motion. Graphical input has several advantages. For example, some kinds of data is inherently geometric. If I have a polygon, the coordinates of its vertices are obviously geometric entities. Rather than type in the coordinates which is complicated and clumsy, it is easier if I can click or if I can draw the polygon on the mouse by clicking the coordinates or clicking the vertices. You have also probably seen user interfaces in which there are buttons or icons. So, each button may enable a user to select a certain option and that requires clicking on the button. In this case, the information that the user wishes to convey to the program is not really geometric in nature. However, by positioning a button, we have converted the information that the user wants to pass into a geometric form that is the user has clicked this button or that button and so on. Even this turns out to be rather convenient and so graphical input is very useful for implementing user interfaces as well. In this lecture, I am only going to talk about graphical input involving mouse clicks. Later on, we will do more complicated graphical input. For example, how do you discover that a mouse is being dragged or specifically which mouse button is being clicked and things like that? Or you might want to do even more complicated things such as you want to wait not only for a mouse button to be clicked or a mouse to be dragged, but you might also be at the same time be waiting for a key to be pressed on the keyboard. So, this kind of complicated input or waiting for several kinds of events to happen, we will not worry about today. Today, we will only worry about how to deal with the input that comes to us when a mouse is clicked. There is a very simple function provided in simple CPP called getclick which allows you to handle mouse clicks. Here is its signature. getclick takes no arguments and returns an integer. First of all, when you call getclick, it will cause the program to wait for the user to click the mouse. This is sort of like what happens when you try to read from the keyboard or indeed read anything. The program waits until something is typed on the keyboard or maybe the disk responds or something like that. In any case, when you call getclick, the program will wait and this time the waiting is going to be happening for the user to click the mouse. When the user eventually clicks, say at some position x, y, the function returns. And when the function returns, since its signature is an int, its return value is an int, it must return an integer. And indeed, the value that is returned is 65536 multiplied by x plus y. You may note that 65536 is simply 2 raised to 16. So what this value is doing is it is putting x in the first 16 bits of the integer and y in the remaining 16 bits of the integer. Of course, x and y are very small numbers. So computing a number of this kind is not going to confuse the issues. From this number, you will be easily able to get back x and y as we will see in a minute. Here is how you will wait for a click and print the click coordinates. Of course, you will want to do more than printing the click coordinates, but for simplicity, I have just shown the code to print the click coordinates. We declare an integer v in which to receive the results of the getclick and then call getclick. At this point, the program holds. The program waits. At some point, the user clicks and then the program resumes. The value of the value returned by getclick is put into the variable v. Now v contains y in the in the trailing in the in the less significant 16 bits or y can be obtained from v by taking the remainder modulus 65536. And x is obtained by dividing v in an integer manner doing integer division by 65536. So we can print out the x coordinate as is as is shown. The x coordinate is simply v upon 65536 and the y coordinate is simply v modulo 65536. As I said, this works because the x and y coordinates are much smaller than 65536. Indeed, the number of pixels on any reasonable display that is available today is going to be far smaller than 65536. Had the number of pixels be larger, then you would have to worry about well what happens. So then the extracting had the number of pixels been larger, then this idea will not have worked because you would not be able to get back x and y after doing this multiplication. So now I am going to do a demonstration of graphical input. And the demonstration in the demonstration, we are going to write a program which finds the best fit line given a set of points. So the inputs to the program will be a set of points x1, y1, x2, y2, xn, yn which are in the plane. The output will be a line which fits them best. In some sense, think of an experiment that you are doing and you are expecting the lines, the points that you are obtaining from the experiment to roughly lie on the line. And now you want to figure out, well given the points, what line should you really take because the points may not lie exactly on a line. And so somehow you want to figure out what might be the most representative line for the points. The standard algorithm or the standard idea for finding the best line is as follows. So we will find a line y equals mx plus c. So by that I mean we have to find m and c such that the distance of the points to the line is minimized. And this minimization happens in a least square sense. In section 5.7 of the book, we discuss how to calculate m and c. That calculation is simple enough but that is really not relevant to the point at hand. The point at hand being how do we do graphical input. So we are not going to discuss that but we are just going to assume that m and c, there is some way to calculate m and c and we can write a program to do that given the coordinates of the points. Now here is the main observation, the main point of this exercise. As you can see, it is more natural to give the points by clicking on the screen and show the line by plotting it on the screen. Even if your points are in a file, it would be good to read them from the file and show them on the screen and show the line on the screen. So in that case clicking may not happen but at least it would be good to see the line plotted on the screen. But if you are going to give the points by hand, by giving the coordinates, it is much better or at least to test the program. It is much more natural and much more convenient to give the points by clicking on the screen. Our program basically does the following. It gets the points by clicking. Then it places a circle at the click position or at each click position to mark it. Then it plots the best fit line. So here is the program which will allow you to click in points and draw the best fit line. As you can see at the top, we have included simple CPP and we have not included anything like IO stream because simple CPP itself will include it. The first thing that the main program does is it reads in from you how many points you want to type. So the number is read into this variable n of type integer. Then it creates the canvas by calling init canvas. This time we are calling init canvas with three arguments. The first argument being the character string which is going to become the title which will appear on the canvas, on the canvas window. And then there are two additional arguments. The first one is the width of the canvas, how many pixels and the second one is the height of the canvas. These arguments are optional and for several cases we have been not using them. This line declares variables PQRS. These are needed for the calculations of the slope and the intercept M and C of the final line that we are going to use. We are going to need a circle. So the circle is going to represent a point and so we are going to create a circle and we are going to call it PT. This circle is going to be a bit of a funny circle when it is created. It will be created at the origin and it will have zero radius. But bear with me for a minute. Soon we will change these values to something more reasonable. So in the loop we are going to read in our end points and do the calculations which are needed to calculate the slope and the intercept. So here is the get click statement. So we are going to get the position of the circle at the point get click at the point returned by the get click. Remember get click returns 65536 times x plus y. Then we extract the x and the y and then we are going to reset our circle. If you remember reset, what does that do? Well it essentially positions the circle at point x y which have been calculated and assigns it a radius r, radius 5 which is the third argument over here. If you remember reset takes the same arguments as were required for the constructor and it is as if we have got the circle according to these specifications. So the circle is no more over here but it has been reset and it has appeared at according to these specifications. So it has appeared at x y. So x y is the point that we calculated and its radius is 5. Now we are going to use a single circle but we want its impressions to appear on the screen. So we are going to take this circle pt and we are going to imprint it. Then pqrs are going to be updated. We will see or we will see later that they will be needed in calculating m and c. So this will happen for every point that is needed. So a calculation will be made and the circle will be positioned. You may note that x and y are double. However c pos is an int. So c pos divided by 65536 will be integer division. Likewise c pos divided by or divided by 65536 with the remainder being taken is also acceptable because this is an integer valued expression. So at this point all the graphical input has been taken. Then we calculate the slope and the intercept and then we create a line. So the line is going to start along with the coordinate x equals 0. The c is going to be the intercept on the y axis and that has been calculated and then it is going to go all the way till x equals 500 and the slope will tell us what the intercept on that ordinate is going to be. After that the program will wait for 10 steps and then the whole thing the screen will vanish. So let us now run this program. So as we said it first asked for the number of points. So let us say we give 5. So it has given us the screen, given as the canvas. As you can see at the top the title we gave is appearing. So it says fitting the line to data. So let us give the points. So here is the first point. As you can see our program has put in a circle there because now we are going to move our cursor and we do not want to forget where we clicked. So another circle has been put. Another circle has been put. Maybe we put a circle over here and this is the fifth point. So as soon as the fifth point is done the program will print out our best fit line. In this whole exercise I have not told you how the best fit line is fit, how actually the mathematics behind the calculation of M and C. However as I said it is explained in the book and you can get it from almost any source including Wikipedia on the net. And in any case that calculation is not the main point of this session and so we are not going to go into it. Alright so that finishes the first demo. The second demo deals with creating user interfaces. So we are going to create an interface based on buttons to control our turtle. In the first session on graphics we studied turtle graphics and we were able to control the turtle through the program using commands forward left and right. So for example we set forward 100 which caused the turtle to go forward by 100 pixels. After the program had started execution the user did not really have a role in what to do with the turtle. Now we are going to write a slightly different program in which the user can control the turtle after the program has started execution. So we will show you a new way of controlling the turtle. The user can click something called a button or something which you have normally seen as a button on the canvas to move the turtle forward and another button to turn the turtle. Of course we could have put in many more buttons but we just want to illustrate the creation and use of buttons and you are encouraged to develop a very nice interface of the same kind much more or as elaborate as you would care to make it. We note that a button on the canvas is merely a rectangle with some text inside it. What makes it a button? What makes a rectangle button is that when you click on it there should be some way of determining that the click actually was on the button. But for this we really need to extract the coordinates of the click and compare it with the coordinates of the sides of the rectangle. So that is indeed what the program that I will show you will do. Here is our program which allows us to control turtles by clicking on buttons. So it first starts by creating the canvas. So this will be a default canvas since we have not given it a title or given it sizes. Next come the declaration of a lot of variables and these variables are meant to decide the positions of the rectangle. For example, b of x is the x coordinate of the center of the button for the forward command. Similarly, b of y is the y coordinate for the forward button. b width is the button width, b height is the button height. So we create a button f. So this is a rectangle called button f. This is just a constructor constructor call and we will create a button l for the left button. So its coordinates will again be taken from these variables which you have defined. You may note, you may ask why we are not directly writing these numbers over here. The answer is simple. If we want to change the positioning of the patterns a little bit, instead of changing the numbers, for it is more convenient to change, instead of changing the numbers over here, it is more convenient to give the number a name and change it in this variable declaration where it is initialized. This is because for example, b height is used in two places over here and over here. If you make a change over here, if you can make a change over here, we can make a change only once. Whereas if you had not used this additional, this variable and value for it, then we would have to make a change in every place where b height is currently appearing. In any case, that is a point not quite related to buttons, but that is an important point related to generally writing programs. So we have created the buttons and now we are going to place text inside it. So the button f is the forward button must contain the text forward. So we are going to create text and the text is going to be named tf and it is going to be centered at the center of the button. So forward should appear at the center of that button. Similarly, left turn will appear at the center of button l. Here we have given these names to the text and they are not really needed but I might remind you that text can also be moved and in that case these names would be quite useful. Then we create a turtle. As you may remember, all graphics objects when created unless they are specifically positioned will appear at the center of the screen. So the turtle indeed will appear at the center of the screen. Now here we have a loop which will run 100 times. In each of its iteration, we will wait for one button to be clicked and according to that we will take some action. So the first statement is waiting for the button to be clicked. Once the button is clicked, we extract the x and y coordinates. As you remember the x coordinate is obtained by dividing click pass by 65536 integer division and the y coordinate is obtained by taking the remainder modular 65536. Now this statement over here is merely checking whether the click coordinate, whether the click position lies inside any of our buttons. This statement checks whether it lies inside the forward button in particular. So let me just explain one part of it. So if the click position is to be inside the forward button, then the click position x coordinate Cx must lie to the right of the left edge of the button. Bfx is the coordinate of the left edge. Bfx is the coordinate of the center. If I subtract b width from it or rather b width by 2 from it, I get the coordinate of the left edge. So the left edge coordinate had better be smaller than Cx and similarly the right edge coordinate had better be larger than Cx or no smaller than Cx. In addition, the same thing must happen for the top. The bottom coordinate of the box must be smaller than Cy and Cy in turn must be smaller than the top coordinate of the box. If this is true, then that means we have detected that the click has been inside the forward button. In which case we will move the turtle T forward by 100 steps. Here we have chosen 100 arbitrarily but you could have another input which will tell you by how much the turtle is to be moved forward. Similarly, this statement is going to check whether the turtle is to the right, is in the left turn button and if so it is going to turn by 10 degrees to the left. So let us now run the program. So as you can see the buttons have appeared with the rectangles as we said and the text has appeared at the center and the turtle has appeared has also appeared at the center of our at the center of our canvas. So if I now press forward, the turtle indeed moves forward. Maybe I press left, the turtle turns left by 10 degrees. Let me make it turn a little bit more. So maybe I turn it a little bit more and then I do forward again. So the turtle turn again goes forward. Maybe I can turn it all the way and make it come back or something like that. So say maybe it is, maybe I will try to draw a parallelogram. So no, it did not work. It did not, that was not a parallelogram but never mind. I can make it turn again left and again go forward and I can continue in this manner. I can continue in this manner for 100 steps as the program did over here. But of course I can change the program so that this can keep on going ad infinitum. So we come to the end of this session. So let me summarize what we did. We discussed elementary graphical input as supported in simple CPP. In many applications, data is graphical. So graphical input is very useful and we saw an example of this in the program for fitting a line to points. You can see other cases also. For example, if you want to draw a polygon on the screen, you may write a program which accepts line clicks and then going along it positions lines between those clicks. So there are many, many possibilities for this. So you can do a whole design on the screen by accepting graphical input. Graphical input is useful even for designing user interfaces. User interfaces typically involve buttons and icons and as we saw they can be easily implemented by first of all creating a button by drawing an icon, putting the text inside it indicating what button or what icon it is meant as and then in the program we simply check whether the user has clicked inside the button or not. If the user indeed has clicked inside the button, then we can perform the action that is associated with the button. As you can see these situations will arise in many kinds of programming projects and graphical input will thus be very useful. Thank you.