 Hey everybody it's Brian and welcome to the 79th Qtutorial with C++ and GUI programming. Today we're going to learn how to paint text. We're just going to call this text painter. Put in the usual location. And of course the dialogue. We're continuing our drawing and painting series. And of course the first thing we want to do is open up the header, add our includes. Then we're going to override the paint event. All right now we've got our paint event. We can actually get down to business here. Now what you should really understand is that painting text is actually pretty complex but Qt handles a lot of the complexity for you. I know a lot of you are probably breathing a sigh of relief when I said that. Pretty much the same thing I did. Finally over my cold I'm still a little stuffy though so you have to bear with me if I sound a little congested or if I have to stop the video to sneeze or something. So the first one we're going to do is just simply draw text. Which we're going to give it a point in space. I should say X, Y coordinates. So we'll say 100, 100. And then just give it a string. And we're just going to say hello world. Save and run. And eventually this will build. I promise there we go. And you can see at X and Y 100 we have hello world. Now what that does is it chooses the upper left point that you gave it. The 100, 100. And then it starts drawing the text from there. And it doesn't really care if the text goes outside the bounds of the window. Let's just very simply just give it a point in space and say draw it here. Now what we're going to do is a Qrect. And you know these. You've worked with the rectangles before. So we're going to say 100, 150. And we're going to make it 25 by 25. Or I'm sorry, 250 not 25G. So what was I thinking? Got a little ahead of myself there. Sorry about that. And then we're just going to painter, draw a rectangle. Just so you can see the rectangle. And then inside that rectangle we're actually going to draw some text. So we're going to say painter, draw text. And then we want to give it the rectangle. The bounds as you will. And we're going to give it an alignment here. So we're going to say cute. And we're just going to say align left. Now if you've ever used with a, if you've ever used with a G, sorry. If you've ever used a word editor like Microsoft Word or OpenOffice or something like that. You know what alignment does. It just moves all the text to the left. So then what we're going to do is just a little copy and paste magic here. I'm sorry. One of you guys out there gave me this awesome tip and I didn't write it down. I'm really sorry. Basically it's an easy way to make the line reappear that you just typed. I think it's like control shift up or something like that. I'm really sorry, but I apologize about that, whoever you are. Like I said, it's just been a crazy, crazy day. And then we're going to just make this one on the right. So now we have our rectangle. And as you can guess what's going to happen here, we're going to have one that's aligned to the left. One that's aligned to the center. One that's aligned to the right. Compile and run this. Sure enough, there's a rectangle. There's left, center, and right. Now you notice how left and right are kind of at the top. They're not actually in the center. Well, we're going to fix that real quick. Let's get this right here. And what we're going to do is just very simply add an or. So we're just going to or these together. And we're going to say cute line center. So what we're saying really here is align it to the right and then align it to the center. Oops, sorry, V center for vertical center. So we're going to say align that to the right and then align it vertically in the center. You can see how left is at the top left. Right is at the right, but it's in the center and center of course is in the center. Very simple. Now I want to discuss something you may have stumbled across already if you're just kind of playing around playing along here. It's a Q-Rect and we're going to call this Rect2. And we're going to give this a very small rectangle. We're going to say it's at 100. Oops, can't type today. 150. Let's actually bump this over to 120. Give us some more real estate on the screen here. And we're just going to say 25, 25. So we've got just a very small rectangle here. And of course we're going to painter, draw a Rect just so you can see the bounds of the rectangle. We'll say Rect2. And then painter, we're going to draw a text. And we're going to give it our second rectangle or Rect2. And then we're going to give it a long sentence. We're going to say this will be clipped. Now if you ever played video games you probably already know what clipping is even if you don't understand the term. It's when something goes beyond the available viewport. You know like you get one of those characters that's like stuck halfway in a wall or something. You know what it says, this will, well where's the rest of it? See the bounds of a rectangle is extremely small, 25 by 25. And it tried to wrap the text. It says this will and then the rest of it is just clipped meaning it's gone. Now if you run into that problem in the real world obviously the solution to that is just make your rectangle bigger if you can. Or make your text smaller. See this will be clipped. Now it's no longer clipped because we made our rectangle much much bigger. Now like I said there's a lot to drawing text for example. What if you wanted to make something bold and something italic and something underlined and something this and something that. Well, Qt makes it very simple. Something would just make it extremely difficult, probably more difficult than it really needs to be. But with Qt of course life is good. I should probably ask Nokia if they'll hire me because I seem to be turning into this cute evangelist. And I don't really mean to be. I actually like other languages as well. Oops, call this Rec3. And we're just going to say 0, 0 and 250, 250. We're going to do painter, translate. Now if you don't know what translate is it's kind of one of those really in depth commands. But really what you need to know is it takes the current position and translates it. In other words it gives it an offset. So it's not really going to be 0, 0. It's going to be more like 20, 20. Now if this was 100 to 0 it would end up being 120. And we're going to get into translate in a different tutorial because it is kind of in depth. And it's one of those that just really leaves your scratch in your head for a while. So we're going to say doc and we're going to say set text width. And we're just going to give it the bounds of the rectangle. Now if you're wondering what Q text document does, it allows us to render maybe some of you are already ahead of me HTML. So you can say set HTML. And then I'm going to just, just for the sake of time here, copy and paste a very, very long string in here that I already have done. And if you don't know any HTML, don't worry, I'm going to explain everything. In HTML there are a series of tags. They start with a start bracket and an end bracket. In those tags is a command. See this B that stands for bold. Now because we've started the bold everything beyond this would be bold. So we have to end it and that's what the slash does. See start bracket, slash, command, end bracket. So what we're saying is really everything in here will be bold. And then we've got this U tag. Well that's underline. So we're going to say everything from there to there is going to be underline. But we're turning it off. So we're going to say hello this text right here. It's going to be bold and underline. Br stands for break or hard returns. We're just going to make two lines down. And then we're giving off pretty hefty font command here. We're saying font face or the style of font is going to be aerial. The color is going to be red. The size is going to be six. And then we're going to italicize it and it's going to be the word world. And of course we're turning the italics and font off. Now that we have all that in our document what we need to do is draw the document. So we draw doc, draw contents and give a reference to our painter. Or should say give the address of our painter. And then give it the rectangle we're painting it in. Now admittedly I wrote this code on Linux so I'm not sure if it's going to be 100% on Windows. But we may have to tweak it a little bit here. Nope, worked exactly the same. So you see there's a bold underlined hello and then there's our italics world. Now I didn't see an underline on there. I'm not quite sure. Nope, it was italicized that's why. So if we change this to underline then world will be underlined as well. Compile and run. There you go. So that in a nutshell is how to draw text in Qt. I'm sure you probably have a million and a half questions. And like I said drawing text does get very complex and you can make it much more complex and Qt if you want. But this is the very high level of how to draw text. This is the easiest way to draw text. And 99% of the time the easiest way is usually the best way. And that's why it's the easiest way because they know you're going to use it a lot. So just to recap, if you want to draw from a point you just draw text and give it up either a Q point or the XY coordinates. You can draw within a rectangle and you can also align them. Just remember that if you do draw within a rectangle it will clip. You can change that behavior but we're not going to cover that in this tutorial. And then you can give it a Q text document and actually render HTML. So if you want stylized text, like a rich text editor sort of thing, you can do that as well. And remember the translate command put it to 2020 which is right here. Now you do translate because the current position was 00. Translate puts an offset of 2020 because we added 2020. I know that's confusing and like I said we're going to go over translate in a separate tutorial here. But that in a nutshell is how to draw text. I'd like to say there's really more but without getting into a four hour conversation on font metrics there really isn't. So this is Brian. Thank you for watching. I hope you found this tutorial educational and entertaining.