;

Pymel Blog Rss Feed

Saturday, May 26, 2012


Prior to starting any of these lessons be sure to import the PyMEL library. See here for why and how.



In this tutorial we'll add a graphical element to our adventures in coding. We're going to cover the basics of creating Graphical User Interfaces. So strap yourselves in.

def WindowUI():
	myWindow = window(t="Test Window", rtf=True)
	myWindow.show()
WindowUI()

Run this code, and you should see an empty window. Pop up. Line 2 creates a window object. During the window object creation, we set the title and set the resize to fit children flag to true. On line 3, we show the window; windows are hidden by default, so we have to show them. Lastly we call our procedure on line 4. Check this out if you have any questions on using flags with built in Maya commands. And here if you need a refresher on user created commands.

 

At this point, I'm almost satisfied with what we've covered. But in spite of my satisfaction...let's continue. We'll write a simple UI with a text field and a button. Pressing the button will create a sphere. The script will also rename the newly created sphere to whatever text is in the textbox.

 

Here's the code for the UI:

def SimpleUI():
	mainWindow = window(t="Simple Window", rtf=True)
	with mainWindow:
		mainLayout = columnLayout()
		with mainLayout:
			text(l="Enter Name:")
			textField()
			button(l="Make Sphere")
	mainWindow.show()
SimpleUI()

Now I want you to notice that we can't just start creating buttons and fields right away. Before we can create window elements like buttons, we need to create layouts first. Then we place the window control into the layout. There are all sorts of layouts; columnLayouts, rowLayouts, and gridLayouts just to name a few. On line 4, we create a columnLayout and we store it into a variable called 'mainLayout'. Once we have a layout created, we can start filling it with window controls. In a columnLayout window elements are created vertically, from top to bottom. So when you create a window element, it will be placed at the top of the columnLayout. The next element is placed below the first. Then so on and so forth.

 

We use the 'with' keyword to help us to structure our layout. Remember, in Python indentation matters. And here, we can use Python's indentation system to our advantage. On line 3 we're basically saying that everything that's indented beneath 'mainWindow', will be created within the hierarchy of 'mainWindow'. We do the same thing with 'mainLayout'; same indentation story. 'mainLayout' is underneath 'mainWindow'. In turn, the text, textField, and button controls belong to 'mainLayout'. It should come as no surprise that the controls are rendered in a column.

 

OK. So we've created a shiny UI. But it doesn't do what we want it to do. And if we're being completely honest, it doesn't do anything at all. So let's write some code that addresses this.

def MakeSphere(nameField):
	newName = nameField.getText() #store the text in the textfield
	newSphere = sphere()[0] #create a new sphere
	newSphere.rename(newName) #rename the sphere

def SimpleUI():
	mainWindow = window(t="Simple Window", rtf=True)
	with mainWindow:
		mainLayout = columnLayout()
		with mainLayout:
			text(l="Enter Name:")
			nameField = textField() #creates and stores the textfield into 'nameField'
			createButton = button(l="Make Sphere") #creates and stores the button into 'createButton'
	#attach a command to the createButton
	createButton.setCommand(Callback(MakeSphere, nameField))
	mainWindow.show()
SimpleUI()

I've made some changes to the script. Most obvious was the introduction of a new function, 'MakeSphere'. But we'll get to that shortly. What I want to talk about now is what's going on lines 12, 13, and 14. Before we were merely creating window controls. But now we are storing the created controls into variables. Storing the controls into variables allow us to do a couple of things. On line 14, we actually attach a command to the button. Before, we created the button as a Button object called 'createButton'. Quickly looking at the documentation for the Button object, we see that the Button class has a method called setCommand. With this knowledge, we are able to pass a Callback to the button.

 

The Callback object is created by first passing the name of the procedure we wish to invoke, and then by passing any number of arguments. In this short example, 'MakeSphere' is the name of the procedure that will be called when the button is pressed. And then we pass the textbox object, 'nameField', as a parameter. That is why on line 1 'nameField' appears as a parameter.

 

So you see everything comes together. This tutorial covered the basics of how to create a functional GUI. Here's a more complex GUI tutorial if you're hungry for more. Any questions?

My comment system is powered by Disqus. And they require you to put in a name and an email. But I'd love to hear what you think. So if you want to comment anonymously, just put any name and test@test.com for your email.

blog comments powered by Disqus