 Hello there and today we're going on with the goal of killing the plasma panel and basically rewriting it from scratch. Let's already get to work. We left last time at this situation where we had the panel, but actually dragging around applets wasn't working because I was trying to pretify a lot the code for animations and of course there was a reason why it was as bad as it looked and now that I tried to make it prettier it's broken. So let's see why it was broken, it's been a week I don't remember and we're back. 20 minutes later I played some chess while waiting for the thing to compile and we can see that it's incredibly broken, like very broken. What do we do now? We have a couple of options. Option A is to give up on this whole animation thingy, controls Z everything and we'll try out later, which is the option that I'm going for honestly. Option B is to actually go on and try to fix this mess as is, but I don't see much hope to actually do it. I don't understand QML well enough and I'm not enough command, I can't control Z anymore. What's this? Is this the right element? Nope. Where is the right document? I don't have it open, that's very nice to hear. So what do we have to do like manually revert something? I guess we can use git for this. We can go into Plasma Desktop, git branch, we can see that we are in super panel and this is all of our uncommitted changes and some of this is actually good, this one is good, we talked about this last time, this is good, but this ain't and that's actually pretty much it, like we only need to change back this and that's it, that's weird and I forgot to press button down, it also deleted all of this stuff, which should come back. So let's open up the right elements and we're looking for this Containments panel contents UI, ContainmentPanelConsentUI, main.QML, we should add back onExchanged and I guess on YChanged, this whole stuff on checklist space, no, this doesn't make sense, this should be in, layout on maximum height change, layout on maximum, okay here, like this and we're back to business of course without all of the minus, now I'm going to give you an useful tip, if you press Ctrl, Shift, B, you enter Kate block mode, you can select multiple lines, do like this and that's it, Ctrl, Shift, B to exit again and you're super productive, so like this we're revert to that change and we also want to revert this, which is instead in config overlay, if you don't know what's this whole config overlay, main.QML, I've talked about that in another video and we only need to go back here and, well, we need this back, this line should come back like this, sorry about that, I copy pasted a bit too much, like this is good, I also want this line to come back, did I select, come on, this line I wanted to come back like this, I also need to bring back these two properties after item current upload, which is here, okay, and also these two I guess, so basically I'm reverting everything I did last week because yeah, I don't want to fix it honestly, it's too difficult, we'll switch into doing something funnier hopefully, hopefully, never gets as planned or does it, okay, now, is this necessary all the x and all to y, yes this is necessary, in main.QML, sorry in main.QML asset, we also need these two properties that hopefully will die soon, but not today, today they'll leave, okay, that should be enough to fix everything, so let's get back and compile the new changes here and then make install minus j6, see you soon, okay, let's see if it worked, maybe it did, hopefully, can we drag everything, oh come on, it's broken, okay, everything is broken, we messed up, it's so nice to mess up isn't it, line 56 expected token comma, what did I do wrong file, line 56 expected a comma, where current, oops, I forgot a minus, that was embarrassing, embarrassing, embarrassing, okay, let's see if this time it's working, is it, is it, come on, come on, let me, let me see, please tell me it works, it doesn't, it's broken, it is broken, what did I do wrong this time, by any look, this is unrelated to configure leak, unable to assign null to the double, that shouldn't be it, what went wrong, oh come on, I can't even revert changes properly, come on, okay, now it's, okay, now it's kind of working with the bugs that we had seen before, but it's working, what are we going to do today, we are going to rewrite, almost from scratch, the whole code to actually show the applets and rearrange them, mostly because the current one sucks, and let me show you how it works, even though I showed you last time, but it's always good to overdo it, so we got this layout manager, which is what we need to kill, and somewhere here we have, as an example, insert before, this function inserts item two before this one, so of course if there's someone don't do this, but what we're going to do is loop through each element in the panel, take it off until we meet item one, when we meet it, we stop, and then we insert item two, and then we re-add everything that was taken off, that seems slow, it probably is, surely it's ugly, so what we're going to do is use this very advanced technique, which I learned about last week, googling, which is a list model, I think it's called this model, please tell me it's called list model, now you might ask me what's a model, what's a view, well, first of all, I'm not the right person to ask, I'm no chemo expert, but let's just say that chemo does a very strong job of separating the data and the thing that actually displays it, so if you do want something to be displayed in a list, in theory, like a blessing theory, you should have a model and a view, and probably somewhere there are like delegates, but I don't remember what that is, so the model is the thingy with all of the data in it, while the view, like the grid view, is the thing with all of the display information, like how items are arranged, so list model we actually use to store the data, as an example, we might have a list model with one to three list elements, with name apple cost 2.45, okay, and then how it works, to actually show you it, we have a Frit delegate, see the word delegates, a delegate actually takes a single list item and says how a single list item should look like, and in this case it's a row with spacing 10 and two texts inside of it, one with the name and one with the cost, pretty easy, I messed up, sorry, then there is the list view, which is actually the actual component that contains the delegates, which has the model, which is the Frit model and the delegates, which is the Frit delegate, so we're going to do a list model and we're going to do the delegate, because we're not, is this the right way to do it? Probably not, probably not, because in theory you can and should define models in C++, so the nice and good approach would be to copy all of that code into C++, but honestly that can be done at a later time if other people really ask for it, if this works, it works and it would already be much better, so I'll just stick with it for now, okay, how do we do this? Thank you for asking, now this is probably the biggest change we have to do, so stay tuned, so the first thing is to actually kill whatever we had in the main.qml file, let's actually close this panel file, because it's confusing me, okay, so what we currently have is a grid layout, don't we? Or is it grid layout? This one, I don't think that a grid layout supports models, does it? Maybe it does, it probably does, like model, delegate, let's check for the documentation, probably it will be just like a normal, where is it, the example from before, we see that we have this list, where is it, where is it? List view with these two properties, probably it's the same here, please tell me it's the same here, we have a model which contains the model and delegate which contains a component, that's it, we've done it, it works, okay, so what we're going to do in the current layout, sorry, we are going to have property ball is layout horizontal, what is this, why is this code like this, what's the meaning of this, why is everyone using it, even though it's defined here, why? Because maybe you need to, okay, I know why, because you need to, sorry, layout horizontal, okay, so it's probably this, there is it, I'm not sold, no, it's not this one, okay, I'm not sold on the meaning of this property, but let's ignore it for now, we'll kill it, we'll burn it with fire, for now, we'll just add blah blah blah blah blah blah blah model, applets model, delegate, delegate, what do we do for the delegate, that's a good question though, so let's actually highlight these two so we can ever lose them, for the component, now we need to give the delegate a component, in this case there is the applet container component, there is an issue, this component is not like we can just use it, wow, how an art would we have already what we need to make everything work, no no no no, this component is actually custom created in this code here, and the issue with making it custom is apparently none, apparently none, I thought that it was going to be worse than it actually is, I thought it was going to be worse, okay, now it's actually, we can actually use this one as our delegate, and as you can see here, basically we're creating the object applet container component with the properties applet which is the applet, visible which is whether this applet is visible or not, and in thick area which is whether this applet is in the thick area or not, considering that it falls back to falls by default, I don't know if it should be defined here, but it is so whatever will stick to it, so what's the idea now, so these three properties instead of being assigned by this code here will be automatically assigned by this model delegate thing, everything else will stick to it, so I'm sorry I'm not feeling very well today, so if I'm a bit tired you know why, okay so let's actually do the model here, we'll need to move it because it's not actually a UI element but I want it close to what I'm doing, so list model, you might say why are we using, why are we using a list model in a grid layout, simple as we're, I don't know, honestly I have no clue what's going on, so I'll just stick to it, id is applets model, by default it's empty, so I guess I can just leave it like that, no, no, yeah why not, by default it's empty, okay now we actually change the code to show the applets, so let's do adding applets first and then actually dragging them around, I don't know actually we need to do that in a, you know whole sitting, we need to do the whole thing without testing anything, that will totally work, nice, okay applets model, we want the layout manager to know about this model but it actually knows already because he knows about the layout and the layout has the property model which is our model, so in this file whenever we need to look at the model we just write layout.model and that's it, in theory maybe it doesn't work but it should, it should, okay so let's start from, from, from, from, from where is it, where do we start from, we need probably to start from add applet because that's not how it should work, it should work add applet, at applet why are you so weird, applet, this is created only here right, so this add applet function where is it called from, as an example, layout manager, when you're actually loading restore, how do you add applets, what do you call to add applets or you actually call that function, okay so this is the only function that actually adds applets, so that's easy to change, instead of appletcontainercomponent.createObject we are going to do appletmodel.cdocumentation append, append, append, why not append, we need to create a new list item element, so I guess it's list, sorry, list elements or element.create, can we actually do this, can we actually do this, is there any documentation on how to create new elements dynamically, var data, okay so look at here how pretty, this is, oops, sorry about that, this is much simpler than I thought, so to actually append something to the model, we just do this data thing with all of the data and data data and that's it, okay so we don't actually have to create this, we just have to create applet which is the applet, visible which is visible binding in thick area which is false and in theory that should magically create an applet container component because we set this as, actually didn't, let me do that right away, we set this as a delegate, so this should be magically created with this properties, magic, that's it, okay now we actually need, do you do you here if I press here like this, oh yes you do, okay sorry about that, so now we actually need to fix this whole thing, we don't have container anymore which is an issue, which is an issue, nice, nice, very nice, I love these things, if we don't have container anymore, how does this work, how does this work, I have no clue whatsoever like, basically now that this creating the component is happening magically, well I don't have the reference to the new element that's been created anymore that's an issue, that's actually an issue, the good news however is that since this is actually created like right away magically, we don't have to manually insert it inside the layout for now, for now, for now, so let's actually go back to the examples, free delegate, how do you handle this, so you have this item with an item, I see free delegate with a row, this ain't simple, this ain't simple, okay so I think this should happen rather magically, no maybe not, let's see the upload code inside of here, so there is this loader element and then there's upload and we can do some magic here, unupload changed, if there's no upload we destroy, let's actually return destroy, otherwise this should be run every time, okay so we can actually do upload parent equals container, or is it, no it's actually, is it the container, yeah yeah it's probably the container, upload parent anchors anchors field container, so this unupload changed should be called even when it's first set, so these things are actually setting up the upload, maybe, maybe who knows, who knows, not me, not me for sure, so these two things shouldn't be necessary anymore because there are none down there, where else did we use container, oh no where else, so technically it's done and we can test if it at least shows anything, or if it at least don't crash I guess, okay it's the moment of truth, does it actually show anything or is it broken, come on, come on, I'm waiting for you, it's broken, well I sure didn't expect it to work first try, so let's see the error, we make the panel super big and we press this copy error details to clipboard button like this, done, now we go back to Cate, we make the panel smaller again like this, Cate can you actually show us where are you Cate, can you actually show us what's the issue, cannot assign to non-existent property delegate, but we checked there is the delegate, what do you mean cannot assign to non-existent property delegate, 441, 441, we checked specifically for the property to exist, grid view, delegate somewhere, it has to be somewhere, the delegate, it does exist, what are you drunk, the delegate provides a template, blah blah blah, this index is exposed as an accessible index property, that's cool, that's good to know actually, let's put it in our minds, delegate, let's copy paste this and I cannot believe, I cannot believe it doesn't work, what's wrong with you, cannot assign to non-existing property delegate, let's actually google it, I don't know why it would happen, are you drunk, I don't believe you, I don't believe you, generic QML delegate, but non-generic view attached blah blah blah, it doesn't, it's the first cycle of the result is in a way correlated, so the first thing to do whenever you think your QML is drunk is to actually ask the KDE development chat, which will answer you in a day or two top, so it doesn't actually solve the problem for now, I'm just kidding, usually I do get some help from there, but let's actually try to understand what's going on, because in the very first example, in the grid view documentation about the grid view, look at here, delegate, I don't know, it's not misspelled, it's a grid view, I do have the model, I do have the delegate, everything is correct, I don't see what's wrong, like honestly, honestly, zero clue what's wrong, so it turns out I am drunk, like seriously drunk, I managed to not notice that I was reading the documentation of grid view, grid view, whilst my code is using grid layout, which is a completely different element, I don't know how I ever looked at, and of course the grid layout doesn't actually have anything that interests us, we need to use a grid view, what does that mean? Well, the grid view is used for this model delegate tricks, and it does mean that we are losing probably everything that's related to layout, which means that probably everything will look broken, but step by step, we'll make sure everything works again, little step by little step, maybe, come on, come on, come on, come on, come on, what's wrong, come on, I'm just waiting for the plasma panel to boot, okay, is it broken? Reason, cannot assign to non-existent property columns, okay, okay, that's fine, whatever you want, whatever floats your boat, no more rows and no more columns, you'll just guess the right direction also by like, devian interaction or something, we'll remove everything and then add everything back later on, I guess, good news, no more errors, bad news, well, I don't know how to say this, just look, this is the whole panel, at least something works, now, what's the issue? The issue, the main issue in this code is that I'm tired, that's probably the main issue, the second issue is that in this code there is, as I said, nothing setting the layout anymore, nothing, literally nothing, also, the grid view is not a layout, it doesn't probably accept layout elements, which is an issue because all the outlets do use a layout API, so we should try to understand better how to lay out elements in a grid view, and if that's not possible, then we check out how do we use model for layout elements and if that's not possible, then we throw QML inside the garbage, probably that's not going to be necessary, luckily, so let's Google, okay, look at here, this is the ugliest thing ever, sorry about that, ugliest thing ever, but if it works, it works, now we have this repeater element, the repeater, in theory, should take an element and repeat it multiple times, you want 10 times the text, hello, repeater, model 10 delegate, I think, no, it's just a text, hello, now, repeater can also take a model as an input and a delegate, and that's useful because we can now put the repeater inside the grid layout and give it our model and delegate, that's ugly, that's very ugly, but whatever, float your boats, so we take back everything and instead of these two lines, we just have this, which should change nothing in the rest of the code, I think, I hope so at least, so let's try, okay, what? I think the issue is that using the delegate, the actual elements do not end up like the layout doesn't end up being in the right place, but that's weird, that's very weird, and that's just weird, honestly, that's how it is, so what we're going to do, okay, now I see no obvious issue, so what we're going to do is debug it through console logs in the add-applets function, so now in, I don't know, here console.log layout something, layout, layout ish, current layout children, let's see what that does, we can see a super useful object object, thank you, it's probably repeater, which is weird, I don't know how QML works, so that's the issue, that's a big issue actually, which is preventing me from doing things, okay, that's it for today, I'm going to blame QML for all of this, if you do know QML better than me and you know how I'm supposed to do this, I am blaming the fact that it seems like using a delegate inside of repeater, breaks, breaks, gets broken, all of the layouts, so you can see that this person here, in order to have both, does this reparenting of all of the elements, which is ugly, and anyway, thanks for watching, I will find the solution, I will do a new video, but for now the panel is broken and that will probably be the title of the video, couple of name missings as always, but thank you to all of those that donated to this channel and actually helped me grow it and I'm super happy about how this is going, lots of people watching the videos, more than before, I'm spiking in all of the views, thing is I'm super happy, I did also a channel about poetry, but I won't spam you with all of the links, if you're really interested, I did a community post about that, so my channel, community tab you can see, but it's Italian poetry, you wouldn't understand, see you tomorrow!