 And we're back! I got a bit of a gation in Venice, but now I'm back in Genoa and I worked on the floating panel, you know, task and I've made some significant improvement to share so if you remember last video, if you don't go watch it again so you know more views and money, just kidding and if you remember my last video, I was talking about the fact that I had this issue with actually moving the panel to the center because for some reason the mask, the effect behind it, so the blur and the contrast effect were positioned in the wrong position and that was weird but luckily I found the solution and how did I do that? Okay, so what was the actual issue? So you have the panel which is drawn by an element called svg item which takes the panel svg and to actually move them, move it up, I inserted a bottom margin as you've seen me done for like months at this point and that worked, that actually worked however when I also added a left and right margins that didn't work because yes the actual svg moved but the mask behind it which is where the contrast effect and the blur get applied was basically it didn't move so it kept being on the left and that meant that on the left of the panel svg I would get this area with this yellow thingy which was actually the background blurred and contrast effected. So how did I fix that? Well I was only quite a bit, I was honestly quite a bit annoyed by this back but after a bit of time I realized that even if I put the panel on the top and added a top margin the mask will still be on the top left which is wrong, it should have been on the bottom center but at least on the bottom left but no it was always in the top left and that got me thinking. Okay, so the issue is that it's reading the mask of the panel but only the size of it and it's always putting it on the very top left even though it shouldn't be always there, it should be on the same spot as the panel and I was like this close to giving up, I was this close but I thought wait let me give just one last try and I check out the panel code to check if it was actually handling the mask because I thought that the mask was being handled by the svg item but it wasn't, it was actually managed by the panel code as you can see in this part of the code I will edit stuff in as you can see in this part of the code there's the update mask function that actually takes the mask from the svg and tells Queen that there is where you should put the effects so what's the issue, the issue is that this mask is applied on coordinates 00 regardless of where the actual panel svg was but that's an issue now because I just have to take that panel mask geometry that I take from the svg and move it in the same position as the panel and how do I do that, well there is this nice nice function which is called something like shift and I just need to give it the coordinates of the panel and it will shift it to be exactly on the panel position and that worked, that actually worked and so I managed to solve the first issue but then I thought okay so I can add margins like this and so I can have like the bottom margin, the top one, the left one, the right one it works but what if what if you maximize an application well if you do that you will get this strange looking panel with a space around it and then the maximize application that's weird I didn't want it to behave like that so I thought about it and I wanted to go for the simplest possible option because if I go for the complex one which I'm sure you will want like in the comments why did you do that because it's very complicated and it would require a lot of good and when I'll actually publish the murder quest the maintainers would be like you know what it's not worth it so don't even waste your time so I wanted to go for something very simple and I think that what I went for is actually pretty so I've decided that when the your application gets maximized on or is switched to a desktop with a maximized application the floating panel would actually stop floating and extend to fill all the gaps inside the you know useless space that's around it so you'd actually feel all the space that's actually given to the panel that would make the panel a bit weirdly it would be big and it would be a bit weirdly big but I don't think it looks so bad if you put some crazy high margin then it's going to become super crazy big but I think we can deal with that maybe it's a good idea to do some auto hide by default in that case but for most cases where you won't have a super high margin I think it looks pretty good if you switch from sorry if you switch from a normal desktop to one with a maximized window it will just you know grow bigger to fit the space and of course it will also get opaque because adaptive transparency you can also choose it to be always transparent always opaque whatever but as a default like it won't be default floating but for a breeze theme with it floating it looks pretty good I think I'm quite satisfied how did I do that okay so basically because of adaptive transparency I was already checking in the code whether we have maximized windows or not so that part was easy however can I just say to the code if there is a maximized window then stop floating hell no don't and the reason for that is that when the panel is floating if the normal thickness is like let's say but it's floating so it needs to be bigger than that to actually take some space above and below but if I change the floating status depending on if there is a maximized window or not that would mean that the actual size of the window of the panel which not the panel is the window which draws the panel inside of it would keep changing and that's really bad like it would mess around with the geometry of the windows and I didn't want that to happen so I had to do something special which means more code but I think I managed to you know don't let it grow too much and what I did is so step one if there is a maximized window then do not apply any margin to the SVGs so the SVGs would actually fill all the available space and you could say well that's it you've done it but no no where's the issue well as we've just so we are changing the mask position to be bottom right so that it actually fits the floating panel if we then change the position of the panel well the mask needs to get back to zero zero because now it's actually correct to have a zero zero mask it shouldn't be moved because the SVG is actually taking on all of the space that it has so how do you do that well it's fairly easy you could say you just have to say like in the panel c++ code check if the if there is any maximized window and if there is then reposition again the mask pretty easy right no I got many issues when trying to implement this the issue is that yes it works except for animations because of course you don't want a panel margin to go just like because that's ugly you want to animate and what that means is that I have to animate both the SVG and the mask at the same time how do you do that well for the SVG there is this solution which is so ugly I hope it's not like the final solution I've been given some suggestions but right now I went with number animations qml number animations for the for all of the uncores margins which works I will probably switch to like transition and states not sure about how those work perfectly but we'll get into that with some time and as far as the sorry as far as the mask goes because we also need to animate that one well of course I'm reading the values of the position of the SVG from the actual qml code but if I just do like read the position of the SVG and then change when that changes so it's always updated with the correct position everything breaks and I'm not sure why to be honest it just does so I thought about something else which is to do another number animation on a integer property that I set and by doing that did I actually do that well yes I did yes I did okay so you can see here I took the relevant code that I have two new values called the mask of set x and the mask of set y and the idea is that if there is any maximized window then that's your else is the floating and this is exactly the same value that's in the left margin of the SVGs now I also take this value and apply a number animation on it and then I say to the C++ code check this value and follow it and the number animation here will do the job and it actually works it animates the SVG the mask and everything so now what we got working is the behavior on maximized windows mostly I think there is still like one bug but I forgot about it and we also got the mask positioning working what's left to do right preter code for this whole number animation thingy which is so ugly I also did a thing to make yeah there was also this issue I forgot about it basically I had this issue which you know if you have the panel which is 44 pixels by default and you want to add some margin to it you need to find the right place where to say okay take actually a bit more space because you also need to fit the margins if you choose the wrong spot to do that everything will mess up obviously and I actually don't remember if I did manage eventually to do this I think I did but I forgot how so let's actually let me check it yes basically I added a lot of ugly properties every single time I checked the thickness so basically when you say hey how much is the panel thick and I check everything that's I add the margins manually every single time that's very ugly that's very ugly and needs to change the qml code for the panel is also ugly it needs to switch from number animations to transition as I've been suggested done that I think it's mostly over finally this was much longer than I thought it's mostly done and I've done all of the work in actually reading the values from the svg theme how do I do that well it's actually pretty easy and there is an hack that I found which is like crazy so do you remember the frame svg item I talked about let me zoom in okay so it has basically worth taking the svg item off the panel background but we also add the prefix for floating so we're actually checking for the floating panel and when we do that we take the this element we call it floating panel svg and we check the margins and we check the top margin the bottom margin left margin the right margin and we use those to actually set by how much it should be floating more details regarding of what that means for themeers now what's the issue well if there is no floating element which happens for all of the themes that don't support floating in theory in theory we don't want the panel to be floating because if you don't support floating you shouldn't be floating however but that happens if we just say please take the floating sorry please take the floating value what happens is that it checks whether it exists and if it doesn't it falls back to the default panel margins which means that you get the same margins as the default one which means that it thinks that it's actually floating by the same margin as the normal panel inside so the margin that gets used to separate the panel and the widgets also gets used to separate the screen and the panel which is wrong so obviously there is just a property that is able to tell you whether it's actually using the values or a fallback or at least avoid the fallback right no it doesn't and i've actually struggled to find a good solution about this for months because this happened to me quite quite frankly and finally found it finally it's so weird so basically there is this property that tells you where is it where is it in floating used prefix what's used prefix basically it says if we fell back to something please tell me that name and if we didn't fell back to anything tell me floating so basically what i'm saying is floating panel svg did we use the prefix floating or does it not exist and if it exists it will say yes it's floating if it doesn't it will return the prefix of the normal panel which is an empty string so apostrophe apostrophe it didn't work it didn't work why is that the issue is that when it falls back it actually still thinks that is working on the floating prefix because it's searching the values for the floating prefix which means that it's working on the floating prefix even if it doesn't exist it still returns floating which is an issue luckily i found the workaround which is to use a list instead of a string in the prefix and what a list does is says hey please check floating if floating doesn't exist just use the normal panel so basically now it's us actually asking the svg please if the floating element doesn't exist just check for the normal panel margins and the difference that's the normal behavior we didn't even have to ask but now that we're asking if the floating element actually doesn't exist then it falls back to the empty string has we requested and because we requested it now it actually returns an empty string in the us prefix as well that's crazy that's crazy but it works and this way i can actually check whether we're floating or not if we are floating then it's going to return the floating prefix else it won't nice so now we know everything the don't read yeah the as i was saying the code is quite ugly i don't remember if i was ah yes i was talking about the integration yes basically now that we actually are able to read the margins of the floating element and be sure that those are actually the margins of the floating animal element and nothing else we just you know use them as how much it should be floating and then i use this as a value for the mask offset i use this as a value for the svg offset rather the svg margins and then this value also gets read by the c++ panel code by the way if you don't understand this c++ cumul division in the code i've done a video about that check it out it's like understanding plasma code or something plasma panels code or something and this values also gets gets read by the c++ code and used to actually increase the thickness by the correct amount and that was it that was it we have mostly done it i think that uh another week or two and the merger quest will be ready and i'll be ready to actually start talking about the next cool merger quest that i will be working on which is pretty cool it's so boring it's cool and if you like these devlogs which are not actually me coding but me explaining what i did i hope they're a bit more instructive and entertaining than the normal ones and if you like that i'm still working on this and you know putting effort into this and cd plasma as a whole i got a donation button like somewhere and that was it that was it thank you for your attention and see you in the next video