beginner lesson 4

Dialogs and buttons

Start creating a user interface for your scripting by putting a button in a dialog

Creating dialogs and using imports

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

from PyQt5.QtWidgets import QDialog

newDialog = QDialog() # create dialog and assign it to a variable
newDialog.setWindowTitle("New Dialog Title!") 
newDialog.exec_() # show the dialog

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.

Adding a layout and button

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.

from PyQt5.QtWidgets import QDialog, QHBoxLayout, QPushButton

# add button and layout for button
layoutForButtons = QHBoxLayout()
newButton = QPushButton("Press me") 
layoutForButtons.addWidget(newButton)

# create dialog  and show it
newDialog = QDialog() 
newDialog.setLayout(layoutForButtons)
newDialog.setWindowTitle("New Dialog Title!") 
newDialog.exec_() # show the dialog

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:

  1. Create a layout first with how you want UI components to flow
  2. Create the UI components like buttons
  3. Add the UI components to the layout
  4. Add the layout to the dialog

Adding icons to buttons

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.

from PyQt5.QtWidgets import QDialog, QHBoxLayout, QPushButton

# add button and layout for button
layoutForButtons = QHBoxLayout()
newButton = QPushButton() 
newButton.setIcon(  Krita.instance().icon('animation_play')   )
#newButton.setText( "Press me" )
layoutForButtons.addWidget(newButton)

# create dialog  and show it
newDialog = QDialog() 
newDialog.setLayout(layoutForButtons)
newDialog.exec_() # show the dialog

Adding a checkbox to our layout

Let's finish up by adding one more component. We will be able to see the effect the layout has with this.

from PyQt5.QtWidgets import QDialog, QHBoxLayout, QPushButton, QCheckBox

# add button and layout for button
layoutForButtons = QHBoxLayout()
newButton = QPushButton("Press me") 
layoutForButtons.addWidget(newButton)

#add a checkbox
newCheckbox = QCheckBox()
newCheckbox.setText('I am a checkbox')
layoutForButtons.addWidget(newCheckbox)

# create dialog  and show it
newDialog = QDialog() 
newDialog.setLayout(layoutForButtons)
newDialog.setWindowTitle("New Dialog Title!") 
newDialog.exec_() # show the dialog

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.

Conclusion

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.

Next Lesson >
Signals and slots

Have questions, need help, or find a typo?

Head to the Krita artists where we have a dedicated area for plugin development and give any feedback you might have.

;