MATLAB®

Laying Out a Simple GUI

Opening a New GUI in the Layout Editor

1. Start GUIDE by typing guide at the MATLAB prompt. This displays the GUIDE Quick Start dialog shown in the following figure.

   

2. In the Quick Start dialog, select the Blank GUI (Default) template. Click OK to display the blank GUI in the Layout Editor, as shown in the following figure.

   

3. Display the names of the GUI components in the component palette. Select Preferences from the MATLAB File menu. Then select GUIDE > Show names in component palette, and click OK. The Layout Editor then appears as shown in the following figure.

   

Back to Top

Setting the GUI Figure Size

Set the size of the GUI by resizing the grid area in the Layout Editor. Click the lower-right corner and drag it until the GUI is approximately 3 inches high and 4 inches wide. If necessary, make the window larger.

Back to Top

Adding the Components

1. Add the three push buttons to the GUI. For each push button, select the push button from the component palette at the left of the Layout Editor and drag it into the layout area. Position them approximately as shown in the following figure.

   

2. Add the remaining components to the GUI.

   • A static text area

   • A pop-up menu

   • An axes

   Arrange the components as shown in the following figure. Resize the axes component to approximately 2-by-2 inches.

   

Back to Top

Aligning the Components

You can use the Alignment Tool to align components with respect to one another, if they have the same parent. To align the three push buttons:

1. Select all three push buttons by pressing Ctrl and clicking them.

2. Select Align Objects from the Tools menu to display the Alignment Tool.

3. Make these settings in the Alignment Tool, as shown in the following figure:

   • 20 pixels spacing between push buttons in the vertical direction.

   • Left-aligned in the horizontal direction.

   

4. Click OK. Your GUI now looks like this in the Layout Editor.

   

Back to Top

Adding Text to the Components

Although the push buttons, pop-up menu, and static text show some text in the Layout Editor, the text is not appropriate to the GUI being created. This topic shows you how to modify the default text.

• Labeling the Push Buttons

• Entering Pop-Up Menu Items

• Modifying the Static Text

After you have added the appropriate text, the GUI will look like this in the Layout Editor.

Labeling the Push Buttons

Each of the three push buttons lets the user choose a plot type: surf, mesh, and contour. This topic shows you how to label the buttons with those choices.

1. Select Property Inspector from the View menu.

   

2. In the layout area, select the top push button by clicking it.

   

3. In the Property Inspector, select the String property and then replace the existing value with the word Surf.

   

4. Click outside the String field. The push button label changes to Surf.

   

5. Select each of the remaining push buttons in turn and repeat steps 3 and 4. Label the middle push button Mesh, and the bottom button Contour.

Entering Pop-Up Menu Items

The pop-up menu provides a choice of three data sets: peaks, membrane, and sinc. These data sets correspond to MATLAB functions of the same name. This topic shows you how to list those data sets as choices in the pop-menu.

1. In the layout area, select the pop-up menu by clicking it.

2. In the Property Inspector, click the button next to String. The String dialog box displays.

   

3. Replace the existing text with the names of the three data sets: Peaks, Membrane, and Sinc. Press Enter to move to the next line.

   

4. When you are done, click OK. The first item in your list, Peaks, appears in the pop-up menu in the layout area.

   

Modifying the Static Text

In this GUI, the static text serves as a label for the pop-up menu. The user cannot change this text. This topic shows you how to change the static text to read Select Data.

1. In the layout area, select the static text by clicking it.

2. In the Property Inspector, click the button next to String. In the String dialog box that displays, replace the existing text with the phrase Select Data.

   

3. Click OK. The phrase Select Data appears in the static text component above the pop-up menu.

   

Back to Top

Completed Layout

In the Layout Editor, your GUI now looks like this and the next step is to save the layout. The next topic, Saving the GUI Layout, tells you how to do this.

Back to Top

Example: Simple GUI

Saving the GUI Layout