 Hey everybody, this is Brian. Welcome to the 140, forgot what number we're on. That's kind of embarrassing. Let me flip and see. 145th Qtutorial with C++ and GUI programming. Wow, we've done a lot of these. I wanted to cover the, you guessed it, the text edit and the text input. I was kind of flipping through the Qt QML book. You can find it at qmlbook.github.io. They actually have some pretty decent examples, but I really don't like copying somebody else's work, so I wanted to play around with it and do my own. But I'd highly encourage you to go out there and read theirs, because they do have a couple things that we're not going to cover just yet. Alright, so without further ado, we're going to create a new project. We're going to make a quick application. And we're going to call this in test for encoding test. Next, next, next. Alright, and we get our basic application here. We're just going to say with 500, hight 500. Somebody emailed me and said, hey, what is the correct width and height for phones? We'll actually, we'll cover that in a future tutorial. We're a ways off from actually working with phones yet though. We want to cover the basics of QML before we get there. So we're going to rename this to root. Alright, so what we're going to do is we're going to play around with the text input and the text area. If you've watched most of my videos, you probably know what a text input and a text area are. So we're going to very briefly cover those, but we're going to really cover how to work with them. The meat and potatoes if you will. So we're going to do a column. And out on the Voidrums Facebook group, I think it was Dimitri and I were kind of chatting. He wants me to start doing functional programs. So I will try to start doing functional programs instead of just little examples. Sometimes it's just not going to happen though. So anchors fill parent. Alright, so anchors, oops, margins. We're going to say five and spacing. I'm not sure if we covered spacing. Spacing is the area between the items in the column or the row, depending on what you're doing. Now we're going to say rectangle and we're going to call this ID. Let's call this a why not frame. I have a hard time coming up with names today. I ran today and I think if you've been watching you know that I don't get that runner's high that everybody's been talking about. I'd love to get runner's high. I get runner's migraine and runner's sore feet and runner's sore back and runners don't want to run anymore kind of thing. So yeah, I get kind of cranky when I run. Point in case my girlfriend and I got into an argument and she like threw the cat at me and I had like grabbed the cat in midair and spun it around and now that didn't happen. I'm just messing with you. Alright, so border color gray. Border width. Although that, I did actually see a video somewhere where somebody in Russia, I think it was Russia, walked into, it was like a subway kind of knockoff store and they actually threw a cat at the cashier. I was like, what the hell bro? Alright, so text input. Now, I'm going to take a wild stab in the dark that you know what a text input is but it's an area where you can enter text. We're going to call this TXT plane. And we're just going to do some anchors. And the purpose of the text input is that you can input the text and that you can, you know, of course do something with that text which is what we're going to do in this tutorial. I'm going to say anchors.margins4. Alright, so let's kind of run this and see what we got so far. So we have a long top here, this nice little text area. Now in case you're wondering why did we put this inside of a rectangle? Because if you don't, you'll have this little area and if I click and drag, you notice how it's not actually highlighting the text like you would expect in a text editor. There's a couple little tricks we'll have to do and we may cover those in future tutorials. This one's just how to actually make it work, how to just, you know, use it. So if you don't put it in some sort of display module, if you will, like a rectangle, it will have zero border. It will just, you know, be invisible. It'll just be this weird, freaky area that you can type into. See like right here? You can click and just type away. Now because it's transparent, that's both good and bad because you can actually have like a background image or something and type over it. It's actually kind of neat. But for this, we're going to, you know, keep it simple, stupid. We're going to do that. Now we're going to have another rectangle and we're going to say id frame 2 and we really don't need a rectangle for the text area. But I kind of want it just because, well, I want it. Width parent dot width and heights. Now this is going to be a little interesting here. We're going to have to play with this and I'll show you why here in a second. Let's actually get rid of that. Did we not do this? We didn't. Shame on me. Forgot our little include here. All right. There's text area. God, I was scared there for a minute. I was like, oh my gosh, what am I doing? What did I do wrong here? Txt encoded and we're going to say anchors dot fill parent. So save and run. And you notice how this little frame goes down, down, down, down and then off the edge of the screen here. You notice if you look at our code, maybe, frame 2, this rectangle, notice how we didn't put a border in there. So the text area actually kind of comes with its own little border. And the reason for that is it has its own little clipping and all this other stuff. So we can actually take this out. Let's do that. Let's do this. I probably don't want that, do we? I'm going to do the magic copy and paste here. I'm going to save and run this. And you can see we get some really mixed results here. And that's kind of why you want to put it in a rectangle. Because it'll get kind of freaky on you and it'll just do bizarre things. So when in doubt, always put your text in a rectangle. That's better. Get it back the way it was here. All right. So now it's actually functioning where we have a top and a bottom. But you notice how the lines go off the bottom here. So we want to actually fix that. The reason why it's doing this is because we have the height as the parent height. Well, it thinks the parent is this column. So what we want to do is we want to actually go minus. Do a little bit of algebra here. I hate, it's not really algebra. I'm just messing with you. I hate algebra. So frame dot height plus calls dot spacing. So what we want to do is we want to take the height of this top rectangle that holds the text input and add that to the calls our column, the spacing. And then when we run this, you'll see how we have this nice little border all the way around. And I'm not sure if we can actually, we can do border image, but we can't do the actual border itself. We need the border here, but it would get kind of interesting results here. So if we do this, well, I didn't do it. In my previous test, it actually double lined it. It was kind of, kind of bizarre, but let's just put four, just see what happens here. Yeah, you can see how it overrides it. It should be like a four border, but it's not. So we'd have to do margin and all that stuff, which I'm not really going to play with. Sorry, that was just me kind of going way out in left field there. So we've got our text edit and our text area. And if we play around with the text area, like I'm just going to hit return and hold down, you'll see how the scroll bar automatically appears. So let's put some text in here randomly, so you can see it actually scrolls. There we go. So, you know, that's, you know, whoop-de-doo. No big brainer. We've seen that before. And if we just, you know, hold the key down, it'll just keep going and going and going. You can control all that stuff. But what we want to do is we want to make an actual functional program. So what we type here, something happens here. So we're going to say on text change. And what did we name that? We named that text encoded. That's right. Dot text equal. We're going to say cute. And look at that. We get all sorts of little goodness when we say cute. So that's kind of like the bonus for today is if you type QT and then hit period, you pretty much have access to, well, almost everything cute related. I mean, there's just a plethora of stuff in here. Some of it makes no sense in the context like the text will be opacity mode. That makes no sense. So what we want to do here is go BTOA, which is basically is going to transform that into what we call base 64 encoding. So we're going to say txtplane.text. Save this, run this. Now, as we enter text here, you see how it automatically base 64 encodes it. If you're wondering what base 64 encoding is, some websites use that. So you'll see like HTTP, something, something, something.com, query, something equals. And you'll see this weird string behind it. Telltale sign is if it ends in the equal sign. It doesn't always have to. But if it does, it's kind of a telltale sign that it's base 64 encoded. And you can go out and just, you know, decode that. This is just, oh yeah, and it's also used in email. And pretty much any time you send something over the internet, you want to base 64 encode it. Just keeps it from messing up with any sort of, how can I explain this for you young folks that don't know the pain of dialect modems? Basically, you would send commands. And if it wasn't sent correctly, it could be interpreted as a command. So you had to encode the data. Email does it all the time in the background. You're just not aware of it. So there you go. Plain, simple. That is a basic base 64 encoder in QML. What we really covered was how to work with the text edit, the text area at a very high level. We haven't really played with like the scroll bar or anything like that. And we showed how to get that text on changed and actually do something using the internal Qt BTOA, which just basically base 64 encodes it. So I hope you found this educational and entertaining. And my girlfriend says that I talk too fast in these stores so I will slow way down for this part. Konavoidromes.com. You can click on contact and you can click here to join the Voidromes Facebook group. It's growing kind of scary large. There's almost 500 of us in there. All different languages, all different walks of life and we just help each other out.