Creating a GUI in MATLAB 

A graphical user interface (GUI) is a sort of interface through which users interact with electronic devices via visual indicator representations. It allows the user to set the commands over the screen as conveniently as desired.

A GUI (graphical user interface) may be a system of interactive visual components for computer software. It displays objects that convey information and represent actions that can be taken by the user. Theobjectschange color, size, or visibility when the user interacts with them. GUI objects include icons, cursors, and buttons. These graphical elements are sometimes enhanced with sounds or visual effects like transparency and drop shadows.

A GUI is taken into account to be more user-friendly than a text-based command-line interface, like MS-DOS, or the shell of Unix-like operating systems. Considering the problem of the text-based command-line interface, the graphical user interface, developed in the late 1970s by the Xerox Palo Alto research laboratory and deployed commercially in Apple's Macintosh and Microsoft's Windows operating systems.

Through this, it would become the standard of user-centred design in software application programming by providing users with the capability to intuitively operate computers and other electronic devices through the direct manipulation of graphical icons like buttons, scroll bars, windows, tabs, menus, cursors, and therefore the mouse pointing device.

How A GUI Functions

SO WE ARE NOW WELL ACQUAINTED WITH THE "POINT - AND- CLICK" INTERFACE, AND NOW LET'S MOVE ON TO ITS FUNCTIONING.

Graphical user interface design principles conform to the model– view–controller software pattern, which separates internal representations of information from how information is presented to the user, resulting in a platform where users are shown which functions are possible instead of requiring the input of command codes. Users interact with information by manipulating visual widgets, which are designed to reply following the sort of knowledge they hold and support the actions necessary to finish the user's task.

The appearance, or "skin," of an OS or application software, could also be redesigned at will thanks to the character of graphical user interfaces being independent of application functions. Applications typically implement their own unique graphical interface display elements additionally to graphical interface elements already present on the current OS. A typical graphical interface also includes standard formats for representing graphics and text, making it possible to share data between applications running under standard graphical interface design software.

Graphical interface testing refers to the systematic process of generating test cases to gauge the functionality of the system and its design elements. Graphical interface testing tools, which are either manual or automated and typically implemented by third-party operators, are available under a spread of licenses and are supported by a variety of platforms. Famous examples include Tricentis Tosca, Squish GUI Tester, Unified Functional Testing (UFT), Maveryx, Appium, and eggPlant Functional.

It's Time For Us Now

TILL NOW, WHATEVER WE HAVE DISCUSSED HAS JUST MADE US EAGER TO EXPLORE MORE OF GUI. SO NOW IT'S TIME FOR OUR OWN GUI. IT WILL BE FUN - LOVING AND AN EXPERIENCE, WHICH WILL BE BENEFICIAL FOR SURE.

LET'S CREATE OUR OWN GUI

STEP 1.

There are a few options that have standard layouts. But let's start from scratch and create a new UI. GUIDE stands for Graphical User Interface Development Environment. It provides you with the tools to design user interfaces and create custom apps. To launch guide, open command window and then type'guide' and press the enter key.

STEP 2.

After pressing the enter key, a pop-up menu will appear on the screen called the Guide quick start with various options for the layout of our GUI. So we will choose'Blank GUI(default)' option provided in the list and then press OK.

STEP 3.

After we have selected OK, then a new window will appear called the 'Guide Layout Editor' which appears with the name 'untitled.fig.' From here, we will design the layout of our GUI. By dragging and dropping components from the left onto the canvas. But before we start doing that, let's go to file preferences and check this top box.

To go to the preferences option-click the File option, then a menu appears to click the preferred option and do check that the 1st checkbox is selected or not.

When you are done with the clicking of the required checkbox, then we can see what each option represents.

STEP 4.

First, let's start by resizing our template. We can set this to whatever size we want, and by default, this will be a fixed size and will not be resizable. However, if you're going to change, this property we will go into the tools menu and click GUI options. The drop-down menu for resizing behaviour will let you choose one of three options for resizing. We'll just leave it as non-resizable for now and click OK.

STEP 5.

So let's go back and add a couple of components to our GUI. First, let us add an axis to the GUI. For doing so, click on the 'Axes' option provided in the list and then stretch it to your desired dimension.

Now, let's add on a panel to our GUI. To add a group, click on the paneloption and stretch it to the required size. We will make our panel interactive by adding some push buttons to it by clicking on the pushbuttons. I'm adding a panel first as opposed to just adding three buttons because it makes it easier to manipulate the buttons as a group.

I can duplicate components by right-clicking and hitting duplicate. I'll create a complete of three buttons, and that we can align and distribute these buttons by using the alignment tool. Let's evenly spaced them by 20 pixels and have them vertically aligned.We can make small adjustments to the object's positions by using the arrow keys. And here's a handy tip. When we move the panel, all of its contents will move with it.

Now let's add two more components. A static text box and a pop-up menu. These options can be added from the options provided on the right side.

This we will do it for all the components we want to add.

So now, let's go into changing some of the properties of the GUI. We can do this by double-clicking on an object or going to view a new window appears, which is called the property inspector; the property inspector allows you to view and set object properties. First, let's change the name property of the GUI. Like I double-clicked on the GUI, and now I can amend various properties like its name, tag, etc. in the Property Inspector. For this, I changed the name to BasicGUI.

Likewise, I can do for the other components too. Next, let's change the title of the panel to see the panel's properties. We have to click on the panel and thelayout editor. I'll change the title to 'plot types' will also change the name of our buttons by editing their string property.

In this case, we're getting to plot a surf plot, a mesh plot, and a contour plot. We can also change the string property of the Pop-Up menu to represent each of the datasets we want to display.

And while we're at it, let's change the name of our static text box to'Select Data.' This is how our final layout looks like: -

We might want to assign a unique identifier for every UI control. So to do this, we can alter the tag property of every object guide uses the tag property to call the automatically generated Matlab functions. It defaults to a generic name. But let's make it more identifiable. We'll see these names again once we create our callbacks.

So now, let's go ahead and repeat this for all the other controls. Another thing we will do is to feature some toolbar buttons using the toolbar editor within the toolbar editor. You can add your custom push buttons or toggle buttons or one of the many predefined tools. For this instance, we'll add a zoom pan, rotate, and data cursor button.

And now, you'll run the GUI by clicking the green run button. This will generate a Matlab fig file that displays or GUI. Let's go ahead and save the layout. So here's what the GUI looks like so far. All of the components are displayed exactly as they were within the editor, including the toolbar behind the figure.

Now let's have a look at the editor window too.

You'll notice a Matlab function with a similar name as our figure guide generates two files. As you can see here

•The Dot fig (.fig) file contains layout information

•The dot m (.m) file contains implementation code

Which you can see here. So all of the code that you see here right now is automatically generated. And /we can add custom code to add functionality for when the user interacts with the GUI. We call this custom code callback functions. We can use the 'go-to' button to help us navigate to each callback. So let's go to the opening function. By following these steps, we can create as many functions and create many plots.

We can see that it's now fully functional. I'll run through the options to show that it works and I'll click on the various toolbar buttons to show that they work as well.

Now from the 'Select Data' option I will choose 'peaks' from the pop-up menu and will on to select the 'Surf' option from the 'Plot Types' which will give me a plot as shown below

Then from the 'Plot Types' I'll choose 'Mesh' which will give me a plot like as shown below

After moving on to the last option that is 'Contour' from the 'Plot Types' we have a plot as shown below.

Now moving onto our next plot for this we will select from the 'Select Data' option we will choose 'membrane' from the pop-up menu and will on to select the 'Surf' option from the 'Plot Types' which will give me a plot as shown below

Then from the 'Plot Types' I'll choose 'Mesh' which will give me a plot like as shown below

After moving on to the last option that is 'Contour' from the 'Plot Types' we have a plot as shown below.

Similarly, now from the 'Select Data' option I will choose 'sinc' from the pop-up menu and will on to select the 'Surf' option from the 'Plot Types' which will give me a plot as shown below

Then from the 'Plot Types' I'll choose 'Mesh' which will give me a plot like as shown below

After moving on to the last option that is 'Contour' from the 'Plot Types' we have a plot as shown below.

So this is all about creating a GUI with GUIDE, but it's now not a preferred choice for the creation of GUI, as a new feature called App Designer is now a common choice. App Designer looks much better and is easier to use than the GUIDE. The environment provided by App Designer is much more interactive, and the efforts for maintaining the code is less!!

I hope that the blog might have helped get the basic idea of how a GUI works using GUIDE.