 Hey everybody, this is Brian and welcome to the 78th Q-Tutorial with C++ and GUI programming. I'm moving right along in our graphic series. Today we're going to cover gradients. So, put it in the usual place, and of course, Q-Dialog. Next, next, finish, finish. If you're just jumping in for the first time, I have to apologize, I'm still recovering from the flu. So, I may sound a little funny and I may have to pause the video a couple of times. We're just going to add and include a Q-Core and an Include to Q-GUI. And we're going to add a few other Includes here. We're going to add Q-LinearGradient. And then we're going to of course include Q-RadialGradient. And we're going to include Q-, and I can never pronounce this one correctly. ConicalGradient, Q-ConicalGradient. If anybody can pronounce that, send me an MP3 or WAV file or something. Alright, going to Overwrite the paint event. And there we go, now we've got our nice beautiful paint event here. Now, first thing of course we need to do is make a painter object. So, Q-Painer, I'm sure you've been following along, rolling your eyes going, oh my gosh, we get it, we get it. Now, we need to make our gradients. Our gradients are actually brushes. Look over here on the left here. You see this, how it's gradient? It starts dark and then it goes light. That's a gradient. So, you've been looking at gradients this whole time and maybe you didn't realize it, but all the gradient is, it's a fancy brush. So, we're going to make a Q-LinearGradient. And we're going to call this Grade 1. And I'm just going to type in some magic numbers here and you're going to have to follow along for the time being. 175. And I know these numbers because I've done this tutorial before. And we're going to say Grade 1 and we're going to say Set Color At. And what Set Color At does is we're defining a gradient. It's going to go from dark to light. And we want to give it certain points where it changes color. So, we're going to say 0.0. We're going to say cute white. And if you're wondering what in the world I'm doing, don't worry. I was very confused the first time I read the tutorial on how to do this. I'm going to just copy and paste this here a little bit. 2 and then we're going to say at 1.0. And we're going to green and of course black. What we're doing is we're defining our gradient. We're going to say at 0.0 it's white. At the .2 mark it turns green and at the 1 mark it turns black. And then we're going to make a Q-Rect. I'm going to say 10. 10 and we're going to make this 200. We've got a nice big rectangle here. Painter and we're going to say Fill Rect. And we give it our Rect. And then we give it to our brush. Which in this case is the Grade 1. Save and run. After it's done building we should get a nice big rectangle on the screen. Maybe. There we go. And there we go. There's our linear gradient. Now linear means it goes in a line. It starts here. It goes here. And here's those numbers we're talking about. 0, 0. Right here. White. And then at .2 it starts green. So here's .2. And then black is at 1. Actually that 1's down here. And it does the math and makes the colors. Now you're going to have to kind of experiment. That's what I was talking about with magic numbers. You're going to have to kind of experiment a little bit with these numbers here. To determine how you want these to look. Like if we set this to let's say 5. Save, run. Let's rebuild this and see just what happens. You notice how 5 is right in the center here. There's our green. Alright. Now what we want to do is we want to make a different kind of brush. So we're going to say Q. Radio gradient. And radio gradient is a little bit different. So we're going to say Grade 2. And the first thing we need to do with the radio gradient is give it a point. So we'll say Q point. And we'll say 100, 100. And then we need to give it a radius. Because you know a radio gradient is different. And we're just going to switch these brushes out here real quick. Just so you can see the difference here. What a radio gradient does. That's a radio gradient. Notice how it's much, much different. So we defined our center point right here at 100, 100. And then we've given it a radius of 100. And it does the gradient from there. And that becomes 0. That becomes 0.5 and that becomes 1. A little confusing I understand. It took me a while to get this. I did not grasp this the first time I went through it. So don't beat yourself up if you're having a hard time following along. The Q documentation is usually very, very good. I don't like to criticize. But this time I did kind of wonder what the heck I just read. I just kind of looked at the documentation and went, what? I don't get it. So we're going to make another point. And we're going to say 100, 100. And we're going to give it a 10. And this is our conical gradient. I think that's how it's pronounced. Now if you're wondering about the linear gradient, I believe this 175 is the angle that it draws it at. I'll play around that in a second here if you want. I just want to show you what the Q conical gradient looks like. No matching function. What did I do wrong here? Silly me. There we go. I should fix the problem. So that is our conical gradient. And I don't know if you can really see it very well, but it does kind of go from white to the dark. I guess because we played around with our numbers a little bit. Let's throw this back to 2. Let's give this 100. Just for a sake of argument, see if that fixes the problem here. Nope, still didn't. But you know how it went from at 10 it was here and at 100 it was here. It's the angle that starts in. So that is the Q conical gradient. Obviously having a hard time getting that working. Let's switch back to the Q linear gradient because I believe that's really what most of you are going to be looking at and using in your projects. Instead of 175, let's just set this to 90 degrees. See what happens here. Yeah, you can see how it goes at 90 degrees now. 175 was kind of across. Let's put it at zero just to see what it does. There's zero. And you can look these up in the help system. And like I said, it's a very descriptive help system, but it kind of left me wondering what I was reading. It took me a while, I'll admit that. It took me a couple of reads through this to figure out what they were really talking about. But I would recommend you read through this and hit a couple of other sources at the internet. Google is your friend. And just kind of get familiar with some of these and see what they're talking about and how they work. Because they have different styles and different things like you can do. But they're called spreads. This is a pad spread. It's kind of like a chrome. And then a repeat spread. So this is Brian. I hope you found this tutorial educational and entertaining. And thank you for watching.