 Hi! One type of content that I often get asked to create is a guide on how to create applets. So you might ask, what are applets in the first place? And okay, fair enough. Applets are all of the icons that you see as an example in the panel, but also all of the representations, but also all of the representations that you can actually put into the background by doing ad widgets and then dragging them like this. All of these are applets. So each applet is like a standalone one and if we go to edit mode, we can see that this is the focus applet, this is the color picker, this is the system tray, this is the digital clock and so on. And each applet doesn't have just one look, but actually more than one. If we see as an example the focus applet, which is a third-party applet that I downloaded and I think it's pretty good, we can see that it has a compact representation, it's called compact because it's, you know, small that fits inside of the panel with the focus icon and the timer. And if we click on it, there's a bigger representation, which is called full representation with all the stuff that you might need on top of that. So we actually need to implement both of them. I've done a guide on how to create plasma themes. Hopefully in the future I'll do one on how to create applications and this one is the first episode of creating applets. So let's actually give a look to focus and how it's implemented to understand what we should do, what we shouldn't. Where can we find all of the applets that we have downloaded? They're all at home slash dot local slash share slash plasma slash plasmoids slash the name of the plasmoid. You can see here all of the ones that I've downloaded. All of the ones that come pre-installed with your system, the default ones are instead of slash, is it usr slash plasmoid, maybe I got this wrong, so by that let me check. Here you can see all of those that are installed by default. But focus is not installed by default, so it's here. Let's give a look what's inside of it. So in the plasma theme guide I just straight up started from nothing and I just wrote all what was necessary. In this case I think it's much more important to see what's already out there because the applet world is much bigger, there's much more to do and often it's much, much easier to give a look to what's already there to create something new. So I also want to be a bit teach on how to steal from other applets after all we're open source for a reason. We've got to make list but I don't think this particularly interests us. But what does actually interest us a lot is the metadata.testop. And if you remember again the plasma theme guide, if you haven't seen it, give it a look. We also did a metadata.testop file for the other one and this one is actually almost the same. We've got the name, the comment, the icon that we expect to use and as you can see it takes it from the system. If you don't know what icon to use you can use Cattlefish which is an application to see all of the icons. If you don't have it you can download it. Then there's type which is a service, more specifically an applet. And then it says that we're using the API for declarative applet script, applets with QML. The main script is UIMain.QML which is the one that will be used as, you know, taking all of the necessary information out of it and it's the file that we'll actually start by looking at. Then there's a notification error which is not interesting and then all of the information about the other which is pretty nice. Then we have the actual contents. There's many icons, we are not at that step yet, what really interests us is the UI part of it. And it's just for files so it's not that much. Let's just quickly give a look on how it's made. So if we open this one which is the main file and the one that will, the only one that really interests us in this moment, we can see that there is this plasmoid element. What's that? Well, let me show you one thing first. Let's say that I'm putting a focus widget into the background. As you can see it becomes actually the whole content of it like with the clock and everything. If I make this smaller, well I cannot. I can make it make this bigger but I cannot make this smaller. And the fact that I cannot make this smaller than this, it's something that's specified in this file. I don't remember the exact name of that but it's in the documentation and we'll get to it. But just get the idea that all of the information that are mostly like metadata things like the minimum size are inside of this QML file. And most of them are maybe not this one because probably it's a layout minimum width but let's, I won't get into the details. Most of these metadata things are into the plasmoid object. As an example, I'm pretty sure, I'll admit that I've never used this particular property but switch width and switch height are probably, we can also give this a Google just for sure. If Firefox works, hello Firefox, hello Firefox, Firefox doesn't work, hello Firefox. Are the height and width at which the applet actually goes from being a compact, a compact representation, sorry, so the small one, to the full representation which is the big one. There's a certain width and height at which you need to switch between them. In the panel it's very small so you know it won't switch unless I make it super big. Let's try this out. We can immediately test this. If we make this super big, yeah, you can see it. It worked. It almost killed my computer but it worked. You can see that focus went from being the small compact representation with just the time to being the whole actual thing. So you can actually decide at what sides to actually switch between them, which is nice. And I'm fairly sure it's the switch property that we have seen. Panel becomes smaller again. Thank you. Yes. Making my blah, blah, blah, blah, blah, okay. Then there is the background hints. What are the background hints? Basically are some metadata that we're telling this API for Plasmoids in regards to what we expect from the background, especially if we are on the desktop. As an example, you might have noticed that before I click on this show background button to actually switch between having background and not having it. Like this. Some applets support this. Some apparently don't. If we take some random widget, like, I don't know, analog clock, and then we go into its settings, we can see that there's no such button and it would make no sense whatsoever to include it. So it makes sense. How do we know whether there is this button or not? Is this hint configurable background? We could also use another hint to actually disable the background altogether and default background just says, yeah, you know, the default one is fine. How do we know what goes into this? So as always, the easiest way is to actually just Google or Duck, Duck, Go, or whatever brave search the property that you want to change. And there should be the KDIP for it somewhere. If you go and give a look to the Plasma Core types, there's actually a list of all the types with the enumerations in C++ with documentation on what each own is. So if you ever have any doubt, you can just give it a look. It's C++, so it's not super, super easy to understand, but you can just read the documentation and it should be rather straightforward. So let's go like this. And here we've got the applet interface, which is the class, one of the class of the Plasma object. And here we have the property background hints. That is a Plasma types background hints. Sorry, my voice is dying. If we go give a look, we've got that there is no background, which asks not to draw a background at all. A standard one, a translucent one, an alternate version of that background, usually more translucent. If you go to the Plasma theme folder again, my video about Plasma themes, you can see that there is a folder called translucent. Shadow background, the applet won't have an SVG background, but a drop shadow of its content done via a shader. If you're doing like a clock, this might be useful. And then default background, which is the user is able to configure this background. This missing configurable background, maybe it's outdated, I don't know. But the idea is that you can find all of the API documentation here. So let's go on. And the next properties that we have here is the tooltip mind text and the tooltip subtext. If we go here and leave the mouse here, you can see that a tooltip appears and you can actually customize as an applet maker what's in the tooltip. In this case, the text in the tooltip is the countdown that we are doing. If we play this, you will see that, you will see that please, there is the countdown actually going down. And you can see that there's also a lighter subline, which is the subtext, which is the get tooltip text, which in this case is focus on your work, which I'm doing, I'm very focused. Then there is this important property, which is the compact representation. And it's the property that actually holds all of the visual elements for this small part, which is the actual compact representation. We'll see how it's done later on right now. It's not interesting. Again, we're just focusing right now on understanding how the API for all of these things work. And then there's finally the full representation, which is this one. And just to give a quick look to the first lines, which are interesting, we've got this couple, which says what are the minimum and the maximum width and height that these applets can have. So it won't get smaller than this, it won't get bigger than this. We can actually define how big or small we want our applet to be. And it's using units dot grid unit, which you should do never have a hard code, a number like 40 don't. It's rather ugly. Just use units dot grid unit. There's also like small spacing and stuff and multiply it by the number you need. Hopefully you shouldn't need to multiply anything. I'm always giving a look if I'm still recording. And if we go past all of these things, it should be over like the important things were set. Yes. And all of the interesting things as far as API goes, we've gone through them. So you might ask, if the important file is main dot QML, then why do we have four? Which is fair enough. Basically in QML, there's this very good idea which is splitting files into smaller modules to actually make everything more understandable. If you have just one file with 5,000 clients in it, it won't be very easy to understand. This one is really pretty long. But what you do basically is put another file in the same directory with another name as an example, progress circle, circle, circle, circle. And then in your main dot QML file or wherever you want, you go with progress circle. And you use it as if you were using an actual QML object. And what this will do is take this QML, load it, take all of these things and basically throw them inside of these brackets. So you have this object here. And the cool thing is that, sorry about that, let's go back to the progress circle. The cool thing is that you could technically reuse that code multiple times by doing like this. And now I have got two progress circles. And I don't know, I should probably move it to actually see something different. But you can take one QML file that you've done and use it multiple times. With all of that in mind, let's see the simplest, absolutely simplest applet that we could do. This is already quite a lot of code. Again, I won't start from scratch because I don't think you should if you're trying to make an applet. But I'm taking inspiration from another applet that I have done this time, which is in here and it's called the margin separator. It's the simplest applet that you can achieve. So first of all, again, very important metadata.desktop. And there should be like my name in it, I think, in the other section. Maybe. Yes, Nicola Venerandi. Hi. You can also see that my computer is pretty slowly zooming in. Thank you. You can also select a category for your applet. In this case, it's utilities and very important, an aim for it, which should be in the form of, you know, it's like a neural but inverted. And then you have the name, the comment, and all of these lines that you see are the name in different translations. So if you want to your applet to be translated into different languages, take this as a reference. But the important things, again, are in contents UI. Just one file, again, is very simple with what is it, 25 lines. I wrote this in 2020. What do we have here? So there is a minimum, a preferred, and a maximum width, which are all unit large spacing. And then there is a minimum preferred maximum height, which are all the same as the minimum width, which is large spacing. With all of these six lines, I'm telling one thing, which is, I want my applet to be exactly a square of side units, large spacing. Then I say constant hints, plasma types, margin, rs separator. What does this mean? Basically, I'm saying that this is a margin rs separator, which you probably are not interested in, but what this does is, you know, it switches from one margin rs to the next one. Unless you're doing a margin rs separator, you probably won't be interested in using the margin rs separator type. And then I say plasmoid preferred representation, which is the one that you prefer to use when there's more than one available. If you are at the size where you could technically use both a compact and a full one, please use the full one. So you might ask at this point, where is the full representation of this thing? And the cool thing is that there isn't. It's not. If you actually go see the look of the margin rs separator, well, it's this. It's literally empty. So if you wanted to do the simplest widget, sorry, the simplest applet, well, it's the same thing, the simplest widget you could, you just do this. And this basically says, okay, I'm an applet. The size of this applet is a large spacing and I'm empty. What if I do want to add some text into this? Let's do as an example plasmoid dot, I shouldn't be editing a system widget. This will break everything. Actually, let's add this line back in this case, I don't care. So plasmoid dot, let's go with full representation. And we can put anything in here as an example, let's do rectangle, which is colored red. Now, in here we are not setting any width, height and stuff. So these things that we have set in the root element, probably we can put them in here as well. I don't know if we have to, sorry, anyway, let's check out if this actually did anything. So how do you see if what you did actually worked? So after you created your own folder into just copy paste, another applet is simpler. When you did that, you change the name, icon and everything, so you can actually distinguish it from the previous applet. And then you will see it appear into the widgets list, like straight out of the box. And you can drag it and totally test the changes that you did. You just restart plasmash like this, and it should do like, it should work. This will reload all of the applets. There are some other, let's say, better ways to do this. As an example, you could do a window, like an actual window with just your applet inside of it. It's not strictly necessary. And what we see here is that in our margin spacer thingy, margin error separator thingy, we do actually have a square element, which is what we expected. It's a square, it's off side unit space, large spacing, it's a large spacing. If we go here and put a five, this will become much bigger. So you can actually decide on the size and everything. Again, I just change it and then restart plasmash. If you're editing some source code that needs to be installed, like most widgets when actually in the KDE Plasma source code, sorry, KDE source code, you will also need to make install. If you're editing them live, which you shouldn't, but this is an example, then it's fine to just restart plasmash. It didn't get much bigger, which makes me think that's something went wrong. But let's see if we're supposed to move this here. Yes, okay, it worked. Yeah, sorry. If you do have a full representation element, the sizing goes inside of that element, so in here, we can see that the element is indeed bigger than before, and we go on and change the size so that is what we want. But what we're interested in is actually adding more elements to this full representation to actually make anything useful out of it, which is what we're going to do. So let me finish off this video by doing an explanation of our plan from now on. It's very nice to know that my camera had gone down and I didn't notice. So hello, you probably saw my shirt for the whole time. What are we going to do from now on? Now, for these episodes, which hopefully will be either weekly or bi-weekly, I will try to actually make a new applet that's going to be useful, which is an applet to manage virtual desktops, sorry, activities. I think that the current applets that you dialed aren't that good and there could be room for improvement, so we'll try out to do something involving activities. Now, this is much more specific because I can't do a generic QML applet that will do everything to make you understand how you do it, but from now on, if you understand the API of applets, it's just a work of doing QML stuff. And I think that if you don't know how to use QML, the best thing that you can do is go out and actually see someone do things in QML and then try it out yourself, especially because QML is not just used to do applets, but you can also use it to do curgami applications and so if you want to do that, QML is important. All of Plasma is, most of Plasma is done in QML as far as the visual appearance goes. The core underneath is lots of C++. So that's it. This was the first episode. I hope that it's not a good idea to go through each one API text. You can see the webpage for that, but I want you to grasp the idea that there is this plasmoid element, which is our API and that we work by adding properties to it and what is our full and compact representations. And now we'll build on that to actually make our applets. See you soon. Blah, blah, blah.