Richard's pick this week is GUI Layout Toolbox by David Sampson and Ben Tordoff.

Contents

Pick

My pick this week is the GUI Layout Toolbox for creating sophisticated MATLAB Apps that resize gracefully. Have you ever created an App in MATLAB? Have you used GUIDE to create an App or written your own App using uicontrols? If so, then you have probably encountered the issue of placing the various buttons, check boxes, and axes in your App, sizing them appropriately, etc. After all this work, have you needed to resize your App only to discover that it doesn't scale properly? The buttons grow larger making the App odd looking or nothing scales and you end up with a larger App with a bunch of empty space? The GUI Layout Toolbox solves these issues by providing a set of classes to: The toolbox has been redesigned to use the new graphics system introduced in the R2014b release and has been updated for the R2015b release. An earlier version of the toolbox is available for R2014a and earlier releases and was selected as a Pick-of-the-Week in June 2010. The toolbox contains a set of classes that make it easy to create a custom App that will scale appropriately - allowing the plot axes to grow/shrink with the App while maintaining the size of the buttons so that the overall look of the App is consistent. Once you have downloaded and installed the toolbox ('GUI Layout Toolbox 2.2.mltbx' file), you can access the extensive help in the MATLAB documentation. The help has numerous examples that showcase the capabilities of the tools. One of the unique features I find in the toolbox is the ability to create container objects such as horizontal or vertical boxes. These allow you to specify how uicontrols within the container are scaled. As an example, you can create a vertical box container that contains two items: an axes for plots and a horizontal box container. The horizontal box container can then contain two buttons. You can specify the size of the buttons. If you scale the App, you will see that the axes grow/shrink with the App, but the buttons maintain their size. This eliminates the need for the user to create complex custom resize functions - making App creation faster and more dynamic.

Example

Let's show the example defined above where we want to have an App with an axes for plotting and two buttons.

f = figure( 'Position', 200*ones(1,4) );
vbox = uix.VBox( 'Parent', f );
axes( 'Parent', vbox );
hbox = uix.HButtonBox( 'Parent', vbox, 'Padding', 5 );
uicontrol( 'Parent', hbox, ...
    'String', 'Button 1' );
uicontrol( 'Parent', hbox, ...
    'String', 'Button 2' );
set( vbox, 'Heights', [-1 35] )

Running this code results in the App above. In the code above, we used the VBox method of the uix class to create our vertical box container, which has the figure (f) as its parent. We then create an axes object with the vertical box container as the parent. Next we add a hozizontal button box to the vertical box container. Finally, we add two buttons to the horizontal button box container. The horizontal button box container is a specialized version of the horizontal box container. It is used to arrange a row of buttons, check-boxes or similar graphical elements. All buttons are given equal size and by default are centered in the drawing area. We could have used a horizontal box container, but we would need some additional code to specify the size and position of the buttons. By default the horizontal button box centers the buttons. And finally, we set the height of the two items in the vertical container box. In this case, we specify "-1" for the axes which stipulates that the size is variable and will scale to fit the region. For the second item, the horizontal button box, we specify that it has a height of 35 pixels. This maintains the buttons to be located at the bottom of the App. To demonstrate how this works with scaling, the image below shows three instances of the same App. Figure 1 is the original App as shown above. Figure 2 is the App enlarged horizontally and Figure 3 is the App enlarged vertically. As you can see in each case, the size and placement of the buttons remains the same while the axes is scaled to the specified size. In the example above, we used two boxes for the simple App. Other containers available with the toolbox are panels (including tabs) and grids. These containers allow the developer to create highly customized and complex Apps to support their applications.

Applications using GUI Layout Toolbox

The GUI Layout Toolbox has been used for a number of MATLAB Central File Exchange entries. These include: and many others. You can peruse some of these to see examples of various Apps developed with the GUI Layout Toolbox.

Comments

Thanks to David and Ben for creating and updating a wonderful tool that enhances the functionality of MATLAB. Give it a try and let us know what you think here or leave a comment for David and Ben.

Get the MATLAB code Published with MATLAB® R2015b