 Wait, planes? You're telling me Two passenger aircrafts Into two different towers and then a third tower also collapsed. I Just don't see it man. Oh crap of recording. Sorry guys. Sorry guys Skits on series episode 21 Topics today is the mouse getting mouse input. How does that work? Ultimately not really an engineering topic in my opinion But it does open the door for us to do many cool things down the road making kind of no GUI also Rotating three-dimensional models in space picking faces getting you know Quantities of interest like that. There are applications for this down the road So not too much theory pretty quick How do you get mouse input and this is Linux specific, but it is applicable also to BSD. They do support this You open and you read this file called dev input mice and there are other files event files You could go into and check as well But this is the simplest way to do it so you read three bytes from dev input mice and those bytes encode the mouse status and For the lowest byte the lowest three bits of that Encode whether or not the left mouse button the right mouse button and the middle mouse button or the scroll wheel are clicked The next biggest byte encodes how much we've moved in the polling period of the mouse In the x-direction positive or negative and then the third byte is the y-direction So very simple stuff right there then keeping track of things so How do you track the mouse over time through your program? Well Helga says she creates some structure to track the mouse position and the click status and this way She can just add that DX and D wide quantity from above over here to the running count of where the mouse position actually is Every time that she checks it and so she has some function here called frame buffer mouse in it that creates these data structures so basically any time you want to access in your entire program the mouse position you can just say Frame buffer mouse in it dot mouse X and that would pull out four bytes From this spot of memory, which would encode our pixel location for the mouse cursor in the x-direction Same for the y-direction and then she encodes a single byte which is to encode whether or not the Buttons are depressed on the mouse. So as before bit zero is left bit one is right and bit two is the middle mouse button and Then she checks the mouse status every time the frame buffer is Flushed to the screen to see if the mouse has moved if we have to redraw the mouse and that's done in this frame buffer mouse pull function and So the overall process that I use to render things to the screen is Kind of a little bit is as much the you know obvious way to do it But the thing is the way it's easiest to draw this to the screen is not the best way because what happens is Let's see you have some complicated Background image that you want to show to the screen behind your cursor. Well, let's say it's a picture of your cat or of the Twin Towers Or had some let's say had some amount of math that went into it You did some kind of detailed computation to plot things to the screen And so you wouldn't want to have to redraw that over and over again What you do is you just draw that to an intermediate buffer you say that whole background image the whole desktop It's an intermediate buffer somewhere else in memory. That's not the frame buffer Then you copy that intermediate buffer to the frame buffer So now the frame buffer does include that information and then you put the cursor on top of that So you haven't affected your original data You've you've made a copy of the data in the frame buffer that you've then put the cursor on top of so now you're not constantly overriding your nice beautiful Background image with the cursor drawing. It's just more pushing this way Then you then flush the frame up at the screen and then you wait for updates either to the background or to the mouse If you get an update to those two things one of the two you can then redo this entire process So, yeah, that's the entire theory there really detailed early advanced stuff So let's get into the examples. I have one example that just shows the basics of reading the mouse device those three bytes from that File then I have one that shows those two functions to a knit and pull the mouse status I have one that we're drawing a cursor Actually, that's the one I just showed you in the beginning of this video where we were actually drawing on the screen And then I have one that shows how you can use the mouse to rotate a 3d model using pitch and yaw So we'll do that really quick not too much to discuss today a very simple topic So Let's show you first Again, I'm going back and forth in the VM and real life. So give me a second here Oh one more thing in order to read the mouse device. You have to have permission So you have to run this as a a user with permission to do so. So pseudo works for that purpose So you can see here This example, which I'll show you the code for in a second Example a just tracks how much the mouse has been moving up and down left and right And so you see it's plotting dx and dy and if I click you can see it's tracking All those different types of clicks left click middle click and right click. So how does this work? Let me show you a little bit bigger. So What do we have in this example? So first it's very simple. We have three different includes So we have an include for opening file that file being the mouse file Then I have a I have two functions to print. So just printing characters and printing in So how does this work? First thing you can see I've opening a file With read permissions. So how do we do this? Well, what is the file name? Let's check down here file name is dev input mice and it's No terminated because you have to have that for Linux to know what you're doing talking about then what I do is I am reading four bytes with a sys read sys call From that file descriptor to a buffer location that is four bytes a month Then I'm just looking through and seeing Well, I'm first testing have I got any bytes out because if I haven't got any bytes So these sys calls return number of bytes that you read and if the answer is zero Then don't waste your time with any logic because there's nothing that you read and so In the case where you have read something you would then parse. So I'd say well I'm parsing the lowest lowest byte here. Let me show you from that Depiction so the lowest byte the lowest three bits of that ink are valuable information And so if you think about the binary or the hex value for this, it would be Seven to mask off just these three bits, right one plus two plus four and so that's what's happening in In this instruction here. We're taking just the lowest three bits and we're evaluating if you know, it's one We've left-clicked if it's two We've right-clicked if it's four we've metal-clicked and then we just plot it out all that stuff and then On the case where you know, we have a mouse input We can also then check for the other two bytes So the other two bytes were the DX and the dy and so as you would expect that's all we're doing we're just shifting the The buffer by eight bits Max masking off everything else Making it a signed value because it's assigned value and then printing it to the screen And so that's what you were seeing here. I move with the mouse left right up and down We're tracking the X and Y and when I click you can see that the mouse Clicks are also being tracked Okay, great example B So let's show the how that works first Again, they have to do sudo So yeah, what's happening here is nothing. Let me show you so if I click You can see it's I'm left clicking now. You can see it's tracking the current mouse position and putting a dot wherever the mouse currently is While I'm holding the left click when I release left click. It's not Holding anything to the screen now middle click different color right click different color so This is kind of just goes to show that you can you can apply different things to the screen based off the Mouse status. So here we're taking the mouse X the mouse Y and the mouse click status left right in middle to draw to the screen Let's show how that works in the assembly code So this time I have a little bit more going on Obviously we're have we have all that mouse stuff right required But also the frame buffer stuff. So if you call for episode 20 We had all this stuff about the heap and the frame buffer being initialized to draw to the screen And then we have this function down here set pixel, which is going to draw Those dots to the screen wherever the mouse happens to be located So yep as you would expect We initialize things in episode 20 the same thing goes here We create our heap our frame buffer in our mouse Then we are first off making the screen entirely black and I've defined three different colors here for the different clicks Um, and uh, then I have a rendering loop where I basically just check have we It has the mouse status changed So I'm comparing the mouse state byte um, and if it's Non-zero we have something if not we just continue to To do this check over and over again if we do have a mouse change we can then Do a conditional move of the right color So we define the colors in r13 14 and 15 for different clicks conditional move instruction Let's you conditionally move a value from one location to another under some conditions Here are the conditions And then you can see I'm just plotting in this case a four pixels not just one to make it easier to see So I have a four set pixel Calls which just draw those orange or blue or red dots to the screen That's how that works very simple process Pretty cool, and then it also does show the same Functions that helger was discussing in these slides now. What about example three? This is the example. I was showing you in the beginning of the video So in this case a couple things are going on first. Let me just see what you can see So first you'll note that I have a cursor that's not ghosting on the screen I'm not getting a track of those orange and blue and red dots Like you were in the previous example because in that example We were just drawing directly to the frame buffer We're putting our pixels directly on the frame buffer. No intermediate buffer is whatsoever in this case You can see the cursor which by the way is peppy the frog. He is Potted on top of the frame buffer and so I can draw things to the screen and he can go over the top of them and not affect The innate status of that background bitmap and so how does that work? Well? I mean, it's pretty straightforward. Let me show you in our little process here basically Again, we have that background being drawn to a separate buffer Then copying that separate buffer to the frame buffer and then potting the cursor on top of that So that should be pretty straightforward. I'll show you how it works in the code right now Here there's a lot of stuff going on a lot of memory things heap stuff all the functions from before And and also a few others for example In the previous example, I was just drawing dots to the screen in this case I want all the dots to be connected Kind of like you'd have in ms paint, you know when you're drawing with the the cursor And so I have lines being drawn between the points after I've clicked So yep, how does this work again much the same stuff first thing we do is we clear the screen Then we copy that black screen to our intermediate buffer. That's our base Desktop background. I guess you could call it Then I keep track of the old cursor locations so I can draw the lines, right Where I need to and then I have a rendering loop in this loop. It's a little more complicated because there's Checks for whether or not you've depressed a button and so here Um, oh, I should also mention in that example the right click clears the screen So I can draw stuff right click clears the screen. I didn't mention that before So here we do we we check if We click the rice the right button We clear the screen if not we go on with the loop Then if it's left clicked we then draw an orange pixel and align to the screen If you care to see the logic you check the logic out yourself and then when it comes down to Pepe the frog Um, he is then drawn at the very end. So I have a location of memory. Actually, it's down here Where I have literally defined colors for Pepe the frog. I have a green white black Transparent the shirt color and then red for his lips And I have two Pepe's I have a big one and a small one and I can show you how they would work Also, I have a regular orange square cursor. You can check out if you'd want. Um, you can change these values in here Let's do it. Let's make Pepe smaller so Pepe small Oh, I can't actually show you on this one because It's not on the vm. Let's do it in the vm So complicated I don't have them. All right, dude calling it off calling it off guys. I'm not using it. No Um So yeah, that's how that works. We have basically just drawing the cursor on top Of the frame buffer and that uses this function that I created called set foreground Basically, let's you have the different layers and transparency and stuff You can draw things on top of other bitmaps. So pretty useful function there And lastly we had an example for the 3d cube model. Let's check out that one before I show you the Code let's show you the actual example running And so you can see here with Pepe I can you know Uh pitch and yaw to keep around I don't particularly like pitch and yaw as ways to control the The view orientation will do something different in the future It's just a very simple example to show that you can use the mouse to affect some mathematics that you then render to the screen Which is what's happening in this example here. So The cool stuff, um, I'll show you the code really quick so you can see what's going on again We will actually do much more sophisticated rendering than what you just saw, but that will come in a future video How does this work? Well a lot of includes in this one a lot of math in this one um So basically this is a combination of everything you saw in The previous previous episode episode 20 and today So we have all the functions for the frame buff for all the functions for drawing pixels of the screen and lines functions for rasterizing things functions for doing trigonometry and matrix multiplication because again, we're we were getting things in space that involves a partition matrix, so um It's kind of like the amalgamation of episode 20 and episode 21 and you can see here we are Basically rasterizing the original cube to the screen in the base case And we have a rendering loop you can see here Where kind of we're checking if the left click is pressed if it is Now we have to track how the cube is moving and so we are calculating how much we've moved down here. So, um What does that happen? Let me see Oh, yeah, here we can see whether or not we've well not we have moved if so Uh draw to the screen if not, we're just clicking for the first time First we check the background and clear it out. Then we compute the Motion in the x and y direction to compute how much yaw and pitch we have Then we calculate the cosine and sine of that yaw and pitch angle We use that to construct the matrix which is a three by three matrix that encodes basically two rotations together Um, I want to explain that in this video. We'll talk about that later Um, then again, we kind of like in the previous video where we just were orbiting the cube We can have to perpendicularize our up direction against our looking direction Let me rasterize that cube on that projected plane And draw it to the screen. Um, and then lastly we draw peppy the frog on top of that And so going back to the example You can see here. Let me close out and redo it See we start off with the cube in Some orientation and then if I move the cursor you can see that the orientation changes While I'm holding the mouse button if I let go I can move the cursor around without moving the cube So this is kind of how you interact with the CAD software a very primitive Uh CAD viewing software But that out of the way, that's the entire topic personable stuff Just want to talk about how we could get mouse input for Purposes that we're going to be doing down the road Maybe a GUI maybe Different types of fun programs. Maybe some more 3d rendering type stuff down the road If that interests you Check out the videos in the future and check out the discord link in the description. I'll see you around