 Hey everybody, this is Brian and welcome to the 74th Qt tutorial with C++ and GUI programming. Today we are going to do something much different. We're going to start down the path of graphics programming. After all, Qt is a graphics library, I mean it's a set of graphics isn't it, allows you to make GUI. So we're just going to call this painter, maybe if I can spell and put it in the usual place. And for this, we're just going to select Q dialog. And if you've ever done any graphics programming before, this is going to be very much boring to you. But if you're brand new to this, this is going to be very interesting. Alright now, first thing we want to do is we want to be able to draw on this little dialog we just made. Let's show it here, actually let's just compile and run it. Before you display something on the screen, it's actually drawn on the screen. And different programming languages handle that differently. For example, we're drawing this window on the screen. Now some languages and some libraries, because different languages can have multiple graphics libraries, they actually render their own controls. Some actually use the native controls. Acute, I believe, renders the controls using the underlying native platform. It's a very fancy way of saying it does it very good and very fast. So we want to draw on that, as if it were, you know, just like a canvas or something. And we're not going to get there just yet. We've got a lot of explanation to do. So let's just go dive right in here. We'll say protected and we want to do the paint event here. You notice that cue paint event. What we're going to do is we are going to tell this dialog every time you are requested to paint, you know, draw on the screen. We want to know about it because we want to do the painting. And we're just going to make a few includes here. We're going to say Cue Gui. And I know people hate it when I do this, but it saves time. Cue Core. Let's just grab that. And now in our dialog, our implementation file, I should say, we're going to say avoid dialog. And you guessed it, the paint event. So this is called every single time that the form or window is being asked to paint. So we want to actually do some drawing on here. First thing we need to do is make a Cue Painter. What is Cue Painter, you ask? Well, Cue Painter is a class that allows you to very simply just paint on the window. We'll just call it Painter, this. And what we're going to do is we're going to draw a line. And in order to draw a line, we have to have a start position and an end position. I know that sounds confusing. If you've never done this before, you're probably like, what in the world are you talking about? So we're just going to say Painter, draw a line. And you notice it's got a couple overrides here. And we're just going to go to the one where it says int x1, y1, x2, y2. And we're just going to say 10, 10, 100, 100. What are those numbers? What are these? Well, we're going to explain this real quick. Let's go ahead and build and run this. Maybe, tick, tock, tick, tock. There it goes. Must have something running in the background. Anyways, you notice how we've got this nice crisp line going from 10, 10 to 100, 100. That's what those numbers mean. See, the very top left right here is 0, 0. That's x and y. X means going across, y means going down. So we said 10x, yx, or 10x, 10y, sorry. So that's the start point right here, 10, 10. And then we said 100, 100. You notice how it's 100x, 100y. That's where you get your positions from. That is called the Windows Positioning System. That's actually standard for just about every operating system out there. The top left corner is 0, 0. And then it just goes out indefinitely. Every window, every control, even your monitor uses that system. So the top left of your monitor over here is 0, 0. The top left of this window is 0, 0. It depends on which one you're talking about. Now that you know very basically just how to draw a line, we're going to get a little fancy with this. And you're going to learn a few things. How did that line get on the screen? Well, Qt used what's called a pen. And that's not only a Qt terminology. That's actually an operating system terminology. They use pens to draw on the screen, much like you'd use a pen to write on a piece of paper. So we wanted to make a Q pen. And we'll call it point pen. And we want this to be black. Now what we're going to do is we're going to draw a box at the start and end position of this line. And we're going to draw the line. But we're going to draw on different colors, different sizes. So let's just get cranking on this. We'll say point pen. And we want to set width. And we're just going to say six, which is a very big number. If you're wondering what the six means, that's in pixels. All these numbers we're talking about are in pixels, unless I say otherwise. Then we want to make another pen and we'll say Q pen. And we'll call this line pen. And this is what we want to draw the actual line with. And we want that to be the red color. And we'll say line pen set width. And we're going to say two pixels. That way it's a little thicker. Now what we want to do is we want to use a little fancy and use what's called a point or a Q point. Now a Q point is just a representation on the screen of the position. So we'll say call that P1. And we're going to say set X, meaning go left or right. And we want to set this at 10. And then P1 and we want to say set Y. That's up and down. We want to say 10. So that's our first point. A point is a single position on the screen. And we're going to need to make another point because we need two points to draw a line. And we're just going to say 100, 100. As you can see, we're kind of just doing the same thing here. We've got 10, 10, 100. We're just using the actual objects. And then we're going to use custom pens to actually draw these out. Now what we need to do here is say painter, set pen. Now we're saying, OK, use a specific pen other than the system default. And we want to draw our line first. So we're going to say grab the line pen. And if you remember, the line pen is up here, which is red and two pixels wide. And then we are going to actually just do, instead of that, P1, P2, because those are our two points. So we're just going to use the two points to draw. If you're wondering why you're using points, instead of just writing out the numbers, well, what if you want to use a lot of lines? And you don't want to hard code these numbers in. You want to use an object to actually do the set x, set y. That way you can read from the file or command line or whatever you want to do here. So let's actually save this, run it, and let's see what this looks like so far. All right, now you notice how we've got this big, thick line here. Now let's see here. You're wondering why it was at 0, 0, because I goofed and we didn't set P2. We set pen 1. So if we rerun that here, there we go, from 10, 10 to 100. You notice that's two pixels wide and it is bright red. Now we want to actually draw those points. So let's actually go down here. And what we need to do, just like if we were drawing a picture or so, if we need to grab a different pen. So we're going to say painter, set pen. And we want the point pen. I call it paint pen, not point pen. Sorry about that. Actually, let's just rename it. That way it's very clear what this does. Call this point pen. So we're going to grab our other pen, which if you remember is black and six pixels wide. And then we're going to draw a point. Remember, a point is just a position on the screen. And we're going to draw point one. And then through the magic of copy and paste, we're going to draw point two. And let's run this again. And this will be a little more explanatory of what's going on here. See, there's point one using our point pen. And there's point two using our point pen. And there's our line that's connected by the two points. Remember, point one is at position 10, 10, 10 across, 10 down. And point two is at 100 across, or 100x, and 100 down, or 100y. And if you're wondering, yes, you can change these. Let's actually do something a little different here. And let's just say 300. So for point two, we're going to say we want it 100 across, but 300 down. What do you think that's going to look like? Well, let's experiment and find out here. It should be a little sharper. See? There we go. 100 across, but it's 300 down. That in a nutshell is how to draw lines, points, using pens, and the cue painter object. I hope you found this tutorial educational and entertaining. Thank you for watching. And send me your feedback. Let me know if you like these.