MATLAB Answers

Rik
3

How to create a GUI

Asked by Rik
on 4 Oct 2019
Latest activity Commented on by Rik
on 7 Oct 2019
There are multiple ways to create a graphical user interface (GUI) in Matlab. Which method is the best depends on multiple factors: the complexity of the project, to what extent it should be a long-term solution, on what releases your GUI should work, your available time, your skill level, and probably other factors I'm forgetting.
To keep the thread clear I'll attempt to provide a short outline a few ways in this question, and leave the details for the answers. (@anyone with editing privileges: feel free to update the section below if I missed something important and am slow in editing this question)
---------------------------------------------------------------------------------------------------
GUIDE
GUIDE is probably the first tool new users will encounter. It is very useful for quickly putting something together, but it is otherwise fairly limited. It requires maintaining (and distributing) both a .m and a .fig file. It is slated to be removed in a future release.
GUILT
Although I haven't had a detailed look myself, it seems a list like this is not complete without at least mentioning the GUI Layout Toolbox, which is available on the file exchange and offers a lot of customization options.
Programmatic GUIs
You can bypass GUIDE and use the normal figures and functions like uicontrol to build GUIs from code. This makes the design less visual, but more flexible for future additions.
App Designer
The official successor to GUIDE, AppDesigner is not based on functions, but works similar to a class. It uses uifigure and mostly uses graphical elements that are incompatible with 'normal' GUIs that are created with a figure (or .fig).

  3 Comments

Adam
on 7 Oct 2019
Personally I see the GUI Layout Toolbox as a subsection of Programmetic GUIs, but it is definitely worthy of inclusion. Indeed, I wouldn't go near a programmatic GUI for anything non-trivial without using the GUI Layout Toolbox myself as the thought of having to position all the elements myself would be a nightmare!
I also find, when doing a programmatic UI (since well before App Designer was released), that a class-based design for this works best for me.
At its most basic level even a single class representing the whole UI acts as an easy container to give access to all the components you need without needing to mess about with the standard GUIDE-like methods of structs or appdata. Personally I go a few steps further and create classes for my tabs or panels, with reusable components that I can plug into different GUIs, but that is more advanced and, with the imminent death of javacomponent, is something that has a limited lifetime for me since I make quite heavy use of some java components, laid out using the GUI Layout Toolbox.
So I'm not sure what approach I will move towards for creating future GUIs. App Designer is well short of being usable for me and I haven't yet tried a programmatic GUI using a uifigure myself.
Rik
on 7 Oct 2019
@Adam, please feel free to add your style of a programmatic class-based GUI to the answer section.

Sign in to comment.

2 Answers

Rik
Answer by Rik
on 4 Oct 2019

A programmatic GUI is ideal if you need a lot of flexibility and many possibilies for support of old releases. It is less visual when designing, but that can be mitigated by either trial and error in a script, or by using GUIDE to design the initial layout and get the Position right for your objects.
My small guide to avoid GUIDE:
  • Make a figure (with f=figure;) and look into the doc for figure which properties you want to turn off (you probably want to set Menu and Toolbar to 'none')
  • Create buttons and axes and everything you need with functions like uicontrol and axes. Save the handles to each element to fields of a struct (like handles.mybutton=uicontrol(___);)
  • Use those handles in function calls that create graphics objects. Never use gcf and gca in your code, because the user might have clicked on a different figure window, making those call targets incorrect. Most functions allow you to specify a parent object (including, plot, bar, axes and many more). When creating a graphics object, check the documentation to see how you can specify the parent.
  • When you've finished loading all data (and saving it to fields of your handles struct), and creating all the buttons, save your handles struct to the guidata of your figure like this guidata(handles.f,handles);. (You can also use getappdata and setappdata)
  • You can set the Callback property of many objects. If you do, use a function name with an @ in front, or a char array that can be evaluated to valid code. (like @MyFunction or 'disp(''you pushed the button'')')
  • Callback functions will be called with two arguments: the first is a handle to the callback object, the second is eventdata that may contain special information. To get access to your data, just use handles=guidata(gcbo);. You can replace the gcbo function with the name of the first input to your callback function if you prefer.
  • More information about callbacks can be found in multiple places in the doc, for example here.

  2 Comments

Rik
on 7 Oct 2019
You do sacrifice compatibility with GNU Octave by using nested functions (although that might not be a concern, I think it is important for it be mentioned).

Sign in to comment.


Adam Danz
Answer by Adam Danz
on 4 Oct 2019

I think drag-n-drop construction of GUIs is a useful tool, especially for beginners, but it comes with limitations and, in the case of GUIDE, occasional bugs, if not used properly. Unlike drag-n-drop methods, building a GUI from the bottom-up requires a greater investment of time during development but the payoffs are
  • more control of the GUI components
  • easier troubleshooting
  • less overhead (I still get flustered when the GUI initialization runs twice during GUIDE GUI startup)
  • a deeper background knowledge of graphical objects and their properties
  • time saved in the long run by avoiding problems that are otherwise difficult or impossible to trace
Even with a beginner's level of Matlab experience, IMO these resources below are enough to get started in making a gui from the bottom-up.
  1. Know the UI options. The user interface can be created on a figure() or a uifigure(). Each have a different set of components that are not compatible with the other and they both have a different appearance.
  2. For figure() GUIs, interactive components are mainly added using uicontrol() and thier properties are listed here. A list of some of the components that can be included in a figure() GUI is here. Most of the time there are useful examples in the documentation how to implement a UI component, set its properties, and write its callback function. To start, the 'units' and 'position' properties will allow you to position the component within the figure.
  3. For uifigure() GUIs, interactive components are added by their individual functions. A list of uifigure() components is here which includes links to the properties of each component.
  4. Understanding callback functions. Many of the UI components have a wide range of callback functions that are invoked by user interaction. Here is a long list of callback options, the action that invokes them, and the components that allow them. This link provides decent examples of how to define a callback function and how to specify its inputs while this link shows callback function examples for each type of UI component.
It all boils down to being familiar with the list of UI components, their properties, and their callback function options. It may sound like a lot to a beginner but most of the properties and callback functions behave the same between components so the level of understand should accelerate after just a few successfully implemented buttons or sliders.

  0 Comments

Sign in to comment.