 Hello, today we're going further with the idea of implementing the floating panels in KD Plasma and hopefully in this video we'll manage to do actually the merge request for all the code changes. And even if it's not finished, you can still submit like work in progress merge requests where other people can come read the code and tell you whether it's a good direction or not. Hopefully that will be the end result of this video. But first of all, let me take us back to what we talked about last time, which is that the code was ugly and that I needed to write it as transitions, sorry, using transitions and states instead of number animations. And if you do not know what I'm talking about, I would suggest that you go see the last video that I've done on floating panels last week, which is floating panels were almost done. Now let's actually go back to actually working on this stuff. And if the quality of the video isn't enough to actually read stuff, don't worry because I'll make my font size bigger. Unlikely I'm only able to record that 720p with OBS and more about this later on. Anyway, I did try to write the code, so let me show it to you. The first idea that I had was actually to rewrite everything as a single state, which was a state property of the root element. How does it work? Let's do a very quick summary. So you have an element with states. And a state is like this element, but with some property changed as an example. And when you switch between states, you can actually animate a transition between them and make you a very simple example. If you have buttons, there's a state where the button is pressed, a state where it's normal, where a state where it's hovered and you can transition between all of them, which makes sense, sounds pretty good. So the idea is to have a panel object, and this panel object has a state for when the panel is floating, and a state for when it's not. And depending on this state, we do different properties, and of course we transition between them. However, it didn't work, so why didn't it? If we go actually see the code, well, we can see that the root element, which is the main one, this root here, sorry, at a very, very, very, very hand already has states. So what's up with that? So these states are called opaque and transparent, and you can see where this is going. These are the states for when the panel is opaque and for when the panel is transparent. And you could say, okay, that's pretty cool, but since we have these opaque and transparent states, can't we use the same exact ones for also the floating one? I mean, in theory, when you have a maximized application, it means that the panel should be opaque and not floating, but if you have a small application, it should be transparent and floating. However, however, and this is rather important, you could have a user that got into panel settings and changed the adaptive transparency value to actually always being opaque. And if he does that, it would mean that being always opaque. The panel would also always be in the opaque state, which would mean that it would always be non-floating, which is wrong. Even if you want your panel to be opaque, it should still be floating because that's what the plasma theme asked you to do. So we need to do some entirely different states, which are new ones. And unlikely, we cannot have more than one state at the same time in the same object. In theory, it should be opaque and floating or opaque and not floating. But we can do that. It's just either opaque or floating, which doesn't make sense. So this is the wrong object to actually put the states in. So where did I put the states? I put them into the SVG themselves. Let me pick them. Where are they? Where are you here? So let's take the translucent item as an example. You can see that I added states and transitions. How do these works? So as far as states go, you could say, well, there is just one state which is called feel. What's up with that? OK, there's actually two. The one that I'm telling QML that actually exists, which is feel. And the default one, which is just an empty string. And it's everything left unchanged, which is the one I'm using for floating. So there is floating, which is very implicit. If nothing happens, then the panels are floating if the plasma theme asks them to be. And then there is a state where I, and I talk about it here, where I actually say, OK, no, you should feel the space that you have available. And then I can say when this state should be triggered. And that is when the screen is covered. So how did I define that? It's very easy. When the number of maximized windows is more than zero, and we are not showing the desktop, which is this one. See? So yeah, pretty simple. And we put that into the one property. And then we say just one thing. There is one property change. I think that states can handle other things than just property changes. But right now I only need a property change. And that's all I know in QML. So property change, the target is the anchors of the translucent item. And they simply change all of the margins to be zero, because it should feel the available space. So no margin whatsoever. Makes sense. And then I say, OK, there's also a transition from the empty state, which again is the floating one, to the field one. And it's reversible. It might happen in the future that somebody asked me to actually add a state for, which is called like, floating. I don't know. The code seems to be easier this way. But I'm not a QML expert, so we'll see. Right now this is rather clean, I think. And in this transition from floating to field and reversible, which means also from field to floating, do a number animation of the properties, but a margin, top margin, left margin, right margin. With a duration of plasma core units, very long duration, which is about a second, I think, looks good. It's the same one that we're using in the opacity animation. So it's consistent. And the easing is in out quad, which, if I recall correctly, is the right one from the documentation. But again, it should be the same exact one as opacity. So again, consistency. And this is it. Like, it's that simple. We only need to repeat it two times. If you don't know why I'm doing this whole thing, again, check out last video. And if you saw last video and still have questions, then let me know, because right now we need to move past that and actually finish off the code. So let's actually see whether it's working, because last video, if I remember correctly, I didn't actually show it to you. So this is the right time to actually show you what I've been doing. And here we are with our officially floating panel. So let's zoom in. And you can see whoops, didn't mean to do that. You can see that there is indeed our floating panel with OBS Studio recording it. And what happens if you actually try to go to a maximized window? Just look at that animation. I mean, it's probably low quality, so you can see perfectly. But look at this. Can you see this? Please tell me you can, because it's beautiful. OK. Now we actually need to improve. Sorry, these things are unrelated. We actually need to improve the quality of the code on the C++ side, which is not going to be easy at all. But we can do this. The idea is that if I have a panel which is like 44 pixels, what is this, 60? Now this isn't actually 60 pixels if you go and count them. And that is because 60 includes the number of, sorry, the width of the margin. It shouldn't. It should be just the panel. So we need to fix that. And we also need not to break any code whilst doing that, which is not as easy as it might sound. So let's actually try to go for it and let's pick up the relevant code, which is this one. Very small. Let's make it bigger. And it's a rather long one, but the general idea is that we have a thickness property somewhere, thickness, this one, which is used throughout the code, as you can see, blah, blah, blah, blah, blah. And the idea here is that this thickness property is to determine the geometry of the panel. And what's a geometry, you might ask. And in general, I'm not an expert on this, so please refer to your local window-managing expert. But a geometry should be the size and positioning of windows, stuff like that. And in this case, it's very much related. I think maybe just the size and general geometry. Like maybe it's a circle window. Who knows? I don't. So in this case, it's, of course, a rectangle. And we want that window to have the correct size. And that is the size of the thickness plus something. And that something is our margins. So how do we actually add the margins? So first of all, let me just say that I wrote the code to actually read the margins as integer property in C++ from the KML code. So it's just this very nice property, top-floating padding, top-floating padding, bottom-floating padding, then there's also left-floating padding and so on. So that part is done already. We just need to figure out where to put it, which is not simple. So first thing first, I did already change something last time. I basically replaced many of the thicknesses in this code with thickness minus top-floating padding, minus bottom-floating padding. If you're asking, what is this M underscore? Well, that basically means that it's a property, it's a member property. If I understood it correctly, it's some C++ thingy to just say this is a property of the object we're working in, which is the panel view. If I understood this correctly, I won't claim I'm an expert. I'm a Python expert, not a C++1. But anyway, thickness minus top-floating padding, minus bottom-floating padding. And you might ask, why did you do that? And the answer is I don't remember. Like honestly, I look at this and I'm confused. I'm very confused. The general idea should be, okay, so you have the thickness, well, look at this. Thickness, there's actually a minus before it. So we could simplify this as thickness and put some pluses here. If you know some basic math, this shouldn't come as a surprise. So basically what I did was replacing thickness with thickness plus the padding, plus the padding from the other side. And now that I look at this code, I might know why it's not working, because it wasn't working. Otherwise, it would be just done, which would be cool. But let's think about this a second. So basically what I'm seeing here is if the panel is on the bottom edge, to do all of the geometry stuff, when you're taking the thickness, instead of taking just the thickness, you always take also the top padding and the bottom padding into consideration. So what's the issue? You've got like five seconds to figure it out by yourself. It's pretty, I think, evident. Time's up. And the answer is that I'm using a left panel. I'm currently using a left panel, not a bottom one. So this thing, if you're using a bottom panel, never actually applies, because it's on the left. So let's actually try to move it. So professional, right? Sorry about that. It was obvious, but I didn't see it. And now you can see that it says 44 pixels and actually looks like it. Do we have any ruler in handy? Ruler, K ruler. Thank you, come here. Yes, I do actually use K ruler when I can, but I need to rotate you. Thank you. Let's see if I took the amount of pixels correctly. Let's see if I'm able to measure this. Come on. Okay, let's do this. Okay, so I'll figure it out. Just give me a second. Let me do this, and then we can zoom in and say, okay. In year, it's 25, 23, minus 480, 2380, it's 43 pixels, 44 if you're rounded correctly, which means that it's working. The code that I written not only makes sense, but it also works. Very nice of me, of the past me. And less nice of me to actually forget that I had switched to our left floating panel. Okay, so let's actually think whether it's a good idea to do this thickness replacement adding all of the paddings or not. And when I say think, it means that I'll stop the video for a bit and actually think and then get back to you. Okay, I've decided what we're going to do. So the idea is it's very, very, very, very ugly to just replace all thicknesses with thickness plus something, plus something for each place where thickness is used. And believe me, it's not like two. It's more than that. So what we're going to do is to create a new function in our panel view object, which will be called, I don't know, total thickness, which accounts for both the thickness and the padding. And why is that? And why is it particularly necessary? Well, when you think about it, the total thickness, so panel thickness plus padding, depends on the panel orientation. If it's on the bottom, you need to add the top and bottom padding. If it's on the left or right, you need to add left and right paddings. So we'll have this function, which will be called total thickness and the code will simply be, if the panel is on the bottom, then do a thickness plus bottom plus top paddings. If the panel is on the left, just do a thickness plus left plus right paddings. That's it. So how do you do a new function in C++ code? That's actually pretty easy. Step number one, go to panel view dot H or whatever you're working on dot H. And if you don't know what a H file is, it's basically again, not C++ expert at all, but all of the code that you have in the dot C++ file without the code. You only have the function declarations and the property declarations. So if you can see, there's all of the enums, a bit of documentation about them, all of the properties, the functions, what argument they take, and that's about it. So if we go and see thickness, our nice function, we get that is an integer, correct? Oh, but you're not actually seeing anything. Sorry about that. I was saying, this is the dot H file. So as you can now see, there is the integer thickness function and in general, all of the properties, the enums and so on. So integer thickness, which is a constant. I don't know why it's a constant. It does change over time, but I guess constant has a different meaning here. I don't know. Let's just add our nice function, which just for sure won't be a constant right now. And let's call it, where do we put this? And think, I mean, should be near thickness in theory because it's related to thickness. You know, today we're going to do the merger quest and tomorrow I'll be receiving lots of messages saying, this is bad, please change it. And hopefully the patch will leave anyway, but who knows, it might happen that my idea gets shooted down. That happens, but I'm doing my best. So thickness and we go with total thickness. And now we implement this. So we take this function and we go into the C++ code again in thickness. In the declaration of thickness, where is it here? In panel view, total thickness, like this should be working and I hope you see every part of it. Basically, we're saying implement the total thickness function method of panel view. And we need to check whether the panel is horizontal or not. So there's an if here and an else. And what goes into the if, I don't exactly remember. So let's see if we find something else in the code. Okay, so we're back at the functions to actually give the position to the panel. And we can see that there is this containment location property which can be a Plasma top edge, left edge and so on. So the best thing we can do, well, for now just copy paste these lines, get back to our function and let's change them to be something more that makes more sense in our case, but maybe a case did make sense. I don't know, not an expert in cases. Well, you know, Python doesn't have cases, so that's what you get. And of course, let's move this into the right spot which is here, I don't know if this is here and if containment, blah, blah, blah and oh, sorry, or there's probably a prettier way to do this. But again, I'll ask others or you if you know how to do this. If the location is, well, this is pretty simple to understand I think. If the location of the containment is a Plasma types top edge or is bottom edge then we return thickness plus we set M bottom floating padding plus M top floating padding. And I gotta say, I gotta say that this code feels ugly but maybe it's the proper way to do this. Left floating padding plus right floating padding. Honestly, I'm not sure how I would better implement this. So if there's any other developer that step ups and tells me that would be nice, otherwise there's not that much I can do about it. So now that we've done that, we can actually use this new total thickness function everywhere that we actually messed up with thickness. So let's actually see all thickness occurrences and decide whether to update them or not. So test number one, should we replace this thickness with total thickness? And the answer is obviously no because in this case, this is the function that we just wrote and this thickness has to be the actual panel thickness without the padding because we were adding them. So let's switch to the next one. So question number two is this, I'm just kidding, it's the same one. But probably what we can also do, and I might do it if the developer say it's a good idea is to actually implement all of the padding adding in thickness instead of adding a new function. But that means that every time I set or yes, I set the thickness, I actually need to take off the padding part because otherwise you say, okay, I want a 44 thickness value and then the thickness that you actually read is higher. So he thinks that something went wrong because he just said 44 and now it's like 64 for no reason and the code messes up. But if I change how it's saved in set thickness could be that it works, could be. But of course, I'm not going to change this here because it's actually the set thickness function which checks whether we actually need to set the thickness at all. Next one, what's this? We're in the geometry by distance function on the right edge and why is the thickness, why is the thickness, okay, so this is an interesting question actually. Why is the thickness function only called in the right edge and the bottom edge and never on the left and on the top one? And well, in this case, I think the solution to this quiz is that we've got a position here. So we're taking the position and if we're setting the position of a left or top panel thickness doesn't matter because the position is the top left, top past left test, sorry, point of the panel. And of course it's the same regardless of thickness if it's on the top or left. But if it's on the bottom or right, you actually need to take the thickness off. And in this case, we do mean the thickness also counting the actual padding, so total thickness. Next question, let's actually copy this so we can come on so we can more easily replace it. Next thing, okay, same as before, we are interested in this same as before and same as before, but now as you can see, it's already the function that I edited and we can just use total thickness here. And next one is again, something I had already worked on. So let's remove all of the additional thingies like this. Next one is the position on the bottom edge and for some, ah yes, same as before, we just need to add our Occomon total thickness value. Next one here, as you can see, it's changed already, so let's go by this and here as well. Nice. Next one here, resize panel. Interesting, interesting. Do we actually need to change this function because in theory, maybe. In practice, last time I did not change it, but that doesn't mean that I don't have to because last time I was trying blind folded, basically, I had no clue what I was doing. So let's try to understand what this code is doing. So this is the function to actually resize the panel. If the unit of the panel, when you create the panel, I guess, is not completed, stop. Makes sense. If the panel create creation, sorry, I cannot speak anymore. If the panel creation stuff is not done, then stop. Now we have a target size, target mean size, target max size, and what does it say? If the panel is vertical, should be the same with horizontal, so let's just try it. Oh, but actually, but actually, this looks much preter than the ugly thing we did before, you know, with line 230 here. Much preter, so let's actually switch to that. If it's, sorry, if it's vertical, we should know it's the opposite. If it's not vertical, so if it's horizontal, okay. As we were doing before, line 250, 52, 50, 52, and then we search for thickness, okay, we're back. We can see what it's doing. We get a target size, blah, blah, blah. If it's a vertical panel, we don't care if it's vertical or horizontal. In this case, it should be the same. Then we get the minimum size, the max size, as said by the user, and then we choose how much the thickness should be and what do we do with this value? Well, after lots and lots of math, we actually resize this thingy based on that. What is the resize function you might ask? I don't know, let's go see. Where is it? Hi, it's actually some property of the object, so best guess it's actually resizing. Best guess is actually resizing based on the blah, blah, blah, what I was based on the size of, that has been just calculated. So it might be that we do need to add the floating body. And if we go give this a look, I do indeed add the padding everywhere. So let's actually remove this and replace thickness with just total thickness. Much prettier isn't it? Not enough to be actually pretty, but better than before. So let's replace this, replace this, replace this. And now the size of the panel actually uses the new thickness. Let's go on in searching for our old thickness functions. We do have one here, here, here, and here. And these are, oh my God, update structs. What does that do? I have no clue whatsoever update structs. I don't know, honestly, what's a struct? I don't know, you told me. You probably, I mean, there's a good chance that some of you knows and I don't. I can just guess. Net extended struct, struct. This looks like very nice code. Must be some kind of matrix, I guess. And a struct top width. My best guess is that we do need our new value here. This is just my best guess. If anything, I need to ask K-Win developers whether it's actually, what the hell is happening? What's a struct? Let's be honest, I need to learn about that. But for now, it should be fine to change all of this and then search again for thickness. And we've done it. We have actually went through all of thickness occurrences. The code is cleaner, but the question is, does it compile? And the answer is, let's see, it's actually building our files. And if there's any error, we're going to learn about it right now. Let's also desume so I can, you know, pose. And red stuff is happening, which means I screwed up. Let's see what's broken. Third thing is, blah, blah, blah, blah, blah, blah. Error, passing, cost, panel view, as these argument discards qualifiers. What the hell does that mean? Q-point of the thickness sounds about right. Panel view, what's wrong actually? Maybe it's some, actually, maybe it's some, this is not easy to understand. Because we've changed a function with a function that should be basically the same. And it doesn't work anymore. And the error is quite confusing. Passing, cost, panel view as this argument discards qualifiers. So what is the first thing you do when you have a confusing error? That's right, you Google or DuckDuckGo or whatever. And where is it? I still have five minutes to go. I don't want this to be longer than 40 minutes. And blah, blah, blah, this we can remove like this. And let's see if we can understand what's wrong. Your high method, thank you Stack Overflow, by the way. I guess Stack Overflow is the answer to everything. Your high method is not declared as constant inside your A class. Hence, what a cool word, hence, the compiler cannot guarantee that calling A dot high will not change your constant reference to high. Thus, it raises an error. Basically, it means that it should be a constant. So let's try to do that change. And again, I think that's another thing I'd like to ask the proper people, constant, because honestly, I do not understand the meaning of constant if it's not actually constant because let's say it's, let's admit it. Thickness of the panel is changing over time. So what is a constant? So anyway, let's see if that actually fixes it or if it doesn't. It doesn't, but it's a very stupid error. Not declaration matches in panel view that are thickness because I forgot constant, I guess. Maybe, maybe. So let's see if the thickness function in the C++ could actually add that thickness, where is it? So yes, you can see there's the constant here. And so I put the constant in the .h file. I did not put it in the C++ file and that is wrong. So let's try again and this time it will work. It actually did. Wow, I didn't think it would actually work. Let's see, replace plasmashall and see if anything actually changes. So we have our normal size panel and it says 44 pixels, which is correct. Let's move it to the top side and it still says 44 pixels and the size is correct. Left side, which didn't work before, 44 pixels and the size is too big and it actually broke because now it says 60. So it's still broken. Still broken, we didn't manage to fix this, which is sad, rather sad. But this is actually weird that it's like only about left and right panels because I do not remember doing any kind of discrimination against them and that's not very nice of them to actually, you know, do this. Is this good or good? Wait, so let's check again in the code everything that we've done, whether we are treating vertical panels differently from horizontal ones. I don't think we do, maybe we do. So it's good to check. In this function, there's no way that anything is wrong, let's be honest. It's so simple. Either way, we do add a thickness, the padding. So this is correct. Here, you got total thickness and total thickness in the right edge and total thickness in the left edge and that's it. Ah, sorry. This is the three cases for a right edge panel and this one, two, three for a bottom one. Above this top edge and the left edge doesn't have it for the same thing I told you about before. So all is fine. Let's go on, blah, blah, blah, total thickness but also total thickness. So everything here is correct. Reset panel, total thickness, total thickness, total thickness everywhere, regardless of whether it's vertical or not. Am I forgetting anything? This is so weird, so weird. And that's it, like there's nothing else. So there is something going on. I do not understand what that is. Whoa, look at here, what the hell is this? Did I actually leave a total thickness plus padding that's horribly wrong? Like this, better. Sorry about that. I wonder if that was the issue and we actually ended up not having enough time to do the merge request but within a day or two, you'll have the next devlog which will actually finish off this very mystery thing of the panel actually working on the bottom but not on the left. So if you want to stay updated on this very mystery which side should I be in, okay? In this mystery, consider subscribing to the channel, doing the notification thing, blah, blah, blah so you can discover the mystery. So I'm such a cool YouTuber. Anyway, this is patreons. And regarding that, now that it disappeared, I'm buying a new computer which should be more powerful and hopefully handle full HD output so it doesn't actually under scale it to 720 as it does currently. Hopefully the video that I've just recorded is good and hasn't any lag in it. If it does, I'm sorry. If I've made any mistakes, sorry. But because my current computer is actually so slow, I'm buying a new one. I do have some money that I've put aside in the past years and I think I'm going to buy a Dell XPS, i7, 512 gigabytes of SSD which means more space to actually keep my videos that I'm recording because right now I'm throwing them away as soon as they're done, which is sad. And so yeah, I'm spending money. Now in general, if you want to support me doing this kind of stuff, feel free to become a patreon. That would be very nice and I'm very happy but regardless, I hope that this content, you like this content and see you next time, hopefully tomorrow, maybe in a couple of days. And that's it.