PEG Naming - [Qt/Pyside2 GUI]

So now we have a validation function for the name of the files, and a way to check the file name each time they save, we need to show the user something when the name is wrong. Qt seemed the best approach to the GUI as it provided a visual builder and there was already a process in place for converting Qt gui into pyside.

OVERVIEW

---

The GUI of PEG is made using QtDesigner and is then converted from a .ui file to a .py file using a cmd prompt function called pyside2-uic. Once the file is in python, it can be imported into any of our scripts like any other module through a widget class. Let's break down how this process worked.

QT DESIGNER

---

After installing Qt, which includes QtDesigner, we're ready to lay out the front end for our scripts. Using the basic Qt widget, we can use the visual builder to lay out the design. These get saved as .ui files in the project directory and these are what we will be converting into .py files.

Here's an example of one of our UI pieces inside of QtDesigner:

UI CONVERSION

---

Once we have the UI laid out to satisfaction, we take the .ui file and head over to the cmd prompt. In there, we change directory to the maya bin folers to find the file named pyside2-uic. We can access and run pyside2-uic once we've accessed the mayapy.exe file. First step however is to cd "C:\Program Files\Autodesk\Maya2018\bin" so that we're in the right location. Then the syntax goes like this:

SHELL AUTOMATION

---

With some aid from my friend Seth, we threw together a basic shell script that can convert our .ui files to .py without the use of the cmd prompt and some easier to remember syntax. It checks to see if there is a .py version of the .ui file already, and if so deletes it. Then it converts the .ui file using the pyside2-uic and renames it. By putting the script compileUI.sh in the user main file, we're able to access it by git bashing on the desktop. Then we can feed this script any of our .ui files and it will spit back a .py of the same name and content in the same folder.

Here is the contents of the script compileUI.sh

and here is the syntax on how to use it within git Bash

bash compileUI "/path/to/my/ui/file"

Now that this process has been made easier, lets look forward to how to use and access the UI from within our scripts.

WIDGETS IN PYTHON

---

Now that we've got a .py file of our UI, such as the one below, we can simply import it into a script that interprets it into a widget that creates functionality to the buttons and accesses the data within the fields of our UI.

With this generated file, we can then import that into our widget file and call the self setup.

Then within our widget we can connect the buttons or conditions to functions using connected slots.

So using this format we can connect in our current logic for validating the name any time the user puts in a new name into our UI. On the front end, the UI looks like this:

So in this case, if the user were to press Okay, we'd want there to be a call to the validation logic. This is what that would look like:

Now that we have this widget all setup, we can move to calling this widget into another script to allow for creating the window.

Then we need to make a class that brings in the widget to be used in the layout. (Note that although this says Dockable, since it is a QDialog, it will not actually be dockable. The DockableMixin is just what I am using.)

Now that it's a class, we can call an instance of the class to then show and raise it to the front. (Note: The desired name value is getting passed in from the call because it is the name that the user originally tried to save as. We use this to generate the results list. Here we're passing it in so that we have access to it in the UI, and can place it into the current name field for the user to edit.)

ON SAVE CALL

---

Now let's loop back around and talk about using all this work each time that the user saves a file. But since this UI is for when the User inputs a name that does not work, that means that we don't need to see this every time the user saves. So let's break down the onSave function we wrote a while back.

Making sure that we imported our main files for UI, we can now spring them as needed. Here is the whole function again for reference.

Here is the lines that matter to the UI:

We're using our validation to check the name, and if it isn't right then we have to check to see if the user has said they don't want the popup before just springing it. But to launch the UI we can just simply call the function to create the widget and the rest is taken care of within the Widget's logic.

WRAP UP/NOTES

---

So now we've got the basics of making UI and wrapping that into a larger picture functionality. In this case, it's checking the naming and making sure that our user base is keeping a consistent naming structure.

While working on this tool I had a difficult time finding examples of using UI elements between Qt and Pyside2 and the process to translate one to the other was shrouded in mystery. I wrote these posts as a way to hopefully help some poor soul just beginning on their journey into using python scripting in Maya. Please take my process with a grain of salt, I could be wrong on some of these fronts, I am not perfect and there are often many ways to solve the same problem. Hopefully this was helpful for someone!