4 November 2011

Our First Window - 01 -Creating the Window

First thing we are going to want to do now that we have PyQt installed on our machine is to create a bare bones window. But before we do, it is important to talk about qt designer and what it can do for you if you choose to use it. Qt designer is an application made by Nokia that greatly speeds up the process of designing a UI.

It basically turns much of the process of making and positioning button into drag an drop operations, and while you can not do everything you may want using this program, it does give you a very big head start. Aside from time saved in the initial layout of the UI, Qt Designer also makes it very easy to edit the layout of your UI down the road I do this quite often at work, as the tools we use evolve and grow over time. That said, if you do go the route of QT Designer (which I usually do), do keep a couple of things in mind.

1) you can't do everything in Qt Desiner, there will be certain things you would like to do, that just require you to script them, and for some tasks it is probably simpler than try to do it in designer.

2) you will likely have an extra .ui file that needs to travel with your python file. Although you can avoid this by converting it into python code, and then added to your python script, you would then need to reconvert it each time you wanted to make a change (no matter how small) in Qt Desiner. In general I prefer to keep it as a .ui file.

you can download Qt Designer from:
it comes bundled with QtCreator


ok, lets get started. So the first thing we are going to want to do to is to open QT Designer, and create a MainWindow.
Then feel free to populate it with some buttons (drag and drop them from the widget box column on the left, to your UI window in the middle of the work area)
Once you have a few buttons, save it in your mayaScripts directory (C:\Users\****\Documents\maya\scripts) as testWindow.ui

Next, we will create a python file in that same folder. To do this, create a text file, and rename it to testWindow.py
Now lets open the .py file and paste the following inside:

#!/usr/bin/env python

import sys
import os
import sip

import maya.cmds as cmds
import maya.OpenMayaUI as OpenMayaUI

from PyQt4 import QtGui, QtCore, uic
import PyQt4

def getMayaWindow():
    'Get the maya main window as a QMainWindow instance'
    ptr = OpenMayaUI.MQtUtil.mainWindow()
    return sip.wrapinstance(long(ptr), QtCore.QObject)

selfDirectory = os.path.dirname(__file__)    #returns the folder THIS file is in
uiFile= selfDirectory+'/testWindow.ui'    #only works if the .ui file is in the same folder

#Load the ui file, and create my class
form_class, base_class = uic.loadUiType(uiFile)
    #form_class will be <class 'Ui_MainWindow'>
    #base_class will be <class 'PyQt4.QtGui.QMainWindow'>

class BaseClass():
    def __init__(self):
        ptr = long(long(OpenMayaUI.MQtUtil.findWindow(newMayaWindow)))
        newQtWin = sip.wrapinstance(ptr, base_class)

class UI(base_class, form_class):

    title = 'My wicked window'

    def __init__(self, parent=getMayaWindow()):
        #init our ui using the MayaWindow as parent
        super(base_class, self).__init__(parent)
        #uic adds a function to our class called setupUi, calling this creates all the widgets from the .ui file


def open():
    '''will attempt to close the window (in case there is one already open)
    and then open a new one'''

    global testWindow
    testWindow = UI()

 And once we have that, just paste the next chunk of code into your maya script editor:

import testWindow

...And run it. This should pop up the window you created in Qt Designer.
Next post, I will go over how to add some functionality to the window.