Start creating a user interface for your scripting by putting a button in a dialog
Now that you know how to call a lot of actions in Krita, you might want to take your scripting to the user interface. This will make it easier to call functions from buttons instead of having to manually run a script in Scripter. In this lesson we will learn how to start creating a user interface and add buttons. We will also go over a bit about how to configure them with icons, and put them in various layouts to change their arrangement.
What does it take to create a dialog? Something as simple as this script
There are a few things that we haven't seen before. The first line is called an "import". User interface elements like dialogs and buttons exist in a library called "PyQt". Because they exist in an outside library, we need to tell our script that we are going to use outside things. If we do not import this, the next line will give an error because the script won't know what a QDialog() component is. We will be importing more things as we need them. Exactly when to use them can be a bit tricky, so stick with me and we will get it figured out as the lessons progress.
The next few lines create a dialog, set the window title, and tell it to open. If you run this code a dialog will appear. It will already have things like a close button at the top right since that is something all dialogs have.
We have an empty dialog. Now we just need to start adding stuff to it. Let's add a button. It is going to be a bit more code than you might expect, but we will get into that next.
On the first line you will see that we are importing more UI components. We have a QHBoxLayout component and a QPushButton component. They all come from the same library, so we can just add them all using commas.
Before you can add buttons, you have to use a layout for the dialog. A layout determines how buttons will be ordered and shown as they are added. In this example we are using a QHBoxLayout. As we add more buttons, the buttons will be added from left to right. Line 6 is where we are adding the button to the layout. On line 10, you will see that the dialog itself has its layout set.
This separation of layout, dialogs, and buttons is confusing when you are starting off. I like to think of it like this when I am coding something:
We went over how to create buttons. Until now the buttons have just had text in them. We also have the ability to easily add icons instead. This is quite easy to do. Krita comes with a lot of icons that you can re-use. The easiest way to get a list of all the icons available is to check out the icon library. You can browse what is available, or search for specific things. The text below the icon names are the IDs. Here is an example of how to hook it up.
Let's finish up by adding one more component. We will be able to see the effect the layout has with this.
With this you will see the added checkbox appear to the right. If we were using a vertical layout with the VBoxLayout, the checkbox would appear below.
As you do more complex user interfaces, you sometimes have to put layouts inside of other layouts to get the result you want. There are some other ways we can create layouts and add buttons that wll simplify this, but we will save that for a more advanced lesson. If you understand the basic concept of layout and adding widgets to layouts, learning how to add more buttons and layouts will be easier.
In this lesson, we went over how to create a dialog, understand what layouts are, and add our first button. Next we will go over how to hook up our button so it can perform actions or other code.
Head to the Krita artists where we have a dedicated area for plugin development and give any feedback you might have.