Building GUIs Using MATLABs GUIDE

GUIDE Graphical User Interface Development Environment Allows the user the capability to build GUIs the contain inputs, options and outputs all on one figure. Lesson Objectives: Open GUIDE Create UIs Change Properties Saving GUI Files Code Generation i.e., GUI Layout

Opening GUIDE
From the MATLAB prompt, type in the word guide and press the Enter button. >> guide

The untitled GUIDE figure

The following figure will appear after the guide command has been entered. Maximize the figure (if not already so) by clicking on the square in the upper-right corner. This will provide the most working area possible.

Maximizing figures axis

Move the pointer to the lower-right corner of the axis. At the corner the pointer will change to a pointer with two arrowheads, one pointing upper-left and the other lower-right. The pointer will also turn solid black. Click and drag the pointer to the lower-right corner of the figure so that black background is completely covered by the axis.

Guides New Object Palette

Along the left side of the figure is the New Object Palette. It contains 11 user interface (UI) options for the user to create. An object label will appear if the pointer is moved over it (as shown for the Push Button).
The UIs available are:
Push Button Toggle Button Radio Button Checkbox Edit Box Static Text Slider Frame List Box Popup Menu Axes

The Snap to Grid Feature

Before creating UIs its best to take advantage of a feature new to MATLAB Versions 6.0 and above. GUIDE's Snap to Grid feature allows the user to quickly align objects as well as easily create different UIs of the same size.

Click on the word Layout at the top of the figure in the option bar on the left side. Click on Grid and Rulers The Grid and Rulers windows will appear as shown.

The Snap to Grid Feature (cont)

Click on the Snap to grid square so that a black check appears (as shown). Change the Grid Size to 20. Click on OK. Notice that the grid is now smaller on the figures axis.

Creating Push Buttons

Click on the Push Button button in the New Object Palette. (Its marked OK). Notice how the button stays clicked. Move the pointer over to axis. Notice how the pointer is now a cross. Click, drag and release on the axis to produce a push button as shown. To move it just click and drag on it, then release it.

Copying Push Buttons

Be sure that the pushbutton is selected. (It is selected if there are 4 solid black squares at the corners.) If it is not selected, click on it to select it. Click on Edit on the option bar, then click on Copy. Click on Edit again, then click on Paste. Another button will appear. Repeat 10 times (or try Ctrl-V). Arrange as shown in the lower, right image.

Adding More UIs

Add a radio button as shown (the radio button option can be found 1st on the left in the 2nd row in the New Object Palette) just like was done with the push buttons. Add another push button as shown.

Add 2 more Radio Buttons and and Axis

Add 2 more Radio Buttons as shown. (Resize any UI, if necessary, by clicking and dragging on any corner.) Move, if necessary, as was done before. Add an axis. The axis button in the New Object Palette can be found on the left and on the bottom row, all by itself.

The Property Inspector

Double-click on the first pushbutton. (Upper-left.) The Property Inspector will appear as shown. Scroll down to the String row and double-click on Push Button. A cursor will appear. Change the text here to 1. Press Enter. Scroll up to the FontSize row and change it to 18.

Changing More Properties

Notice the changes to this push button. Go down to the Tag row and change the default tag (probably pushbutton1) to Number1. This will ease the chore of calling this object in the callback code.

Changing the Color to White

Still inside the Property Inspector for this button, scroll up to the Background Color row all the way at top. Double-click on the palette wheel and the following window will appear. Click and drag on each slider here to the far right so all read 100 as shown. Click OK.

The Property Inspector cont.

Notice that the background color for this button is now white. Repeat the procedure of changing the Background Color, Tag, FontSize and String for the 11 other buttons. The result should look like this Use Tags Number2Number0, NumberAst and NumberLbSign

Changing the other UIs

Change the background color of the 3 radio buttons and the remaining pushbutton to white. Change the strings to what is shown here. Change the FontSize of each to 12 or 13. Do not change any axis properties.

Change the respective Tags to SoundRadioButton, ClearButton, TimeDomainPlot and FreqDomainPlot.

Saving the GUI file

Ctrl-S to open the following Save Figure As window. Call this file GUI1 Notice that the file type is *.fig. GUIDE is going to build a FILENAME.fig file and a corresponding FILENAME.m file automatically.

Code Generation
The corresponding GUI1.m file will appear automatically. Scroll through this file. Take note that absolutely no code had to be written for the entire GUI layout process. Quite a progression from having to write GUI layout code by hand.

The Resulting GUI files

Now go to the MATLAB Command Window and enter in the following MATLAB code to ensure the 2 files are in the working subdirectory. >> dir GUI1.*

GUI Layout Complete

The layout for this GUI is now complete. The programming (i.e., the Callbacks) required to run this GUI will be explained in the next lesson.