# GUI in MATLAB step by step complete designing & Programming

(Last Updated On: September 8, 2021)

## GUI in MATLAB:

GUI in MATLAB- I have already uploaded some very basic Matlab tutorials for beginners which cover,

how to install the Matlab software.

Matlab basic commands and how to use them.

Conditional statements in Matlab Programming.

For Loop in Matlab with Example codes

While Loop in Matlab with Example Codes

Scripts and functions in Matlab with Example Codes

Matlab Plotting Basics

How to generate Matrix and Vectors in Matlab

Strings in Matlab, its types and uses

After covering the very basics, now it’s time to start something which you will find very interesting. Today’s tutorial and all of my previous Matlab articles will help you in designing complex GUI applications for Arduino, Raspberry Pi, etc. In my upcoming next three tutorials, I will explain how to interface Arduino with Matlab using Matlab support packages, How to design a GUI in Matlab to control an LED using Arduino, and how to make GUI in Matlab to control the direction and speed of a DC Motor. As usual before attempting something complex first I will start with the very basics so that you can easily understand each and every step.

In this tutorial, we are going to learn how to make a very basic GUI in MATLAB, we will be making a calculator to perform basic calculation arithmetic operations by using MATLAB GUI. Now open the MATLAB software and in command write guide and press enter.

You can also open it from by clicking on new and in new click on the App.

Now app designer startup page will open and click on the blank app.

A new window will pop up it will take a little bit of time. Then you will get this screen just maximize this now you can select push buttons, sliders, radio buttons, etc.

Now to use the component you need to select the component and place it.

## Designing Calculator using Matlab GUI:

Now I will create a small basic GUI that can perform arithmetic operations like addition, subtraction, multiplication, and division and clear button that will clear the screen. First of all, we will need a panel in which we will place the inputs.

Now right click on the panel and click on the properties inspector.

You will see the properties of the panel. Now in the title I will give input if you don’t want any then you can leave it by blank only then to increase the length font size. You can also change the background color or you can change the font color.

Now I will choose another panel in which four kinds of operation will be performed which are addition, subtraction, multiplication, and division. Change the name of the panel to operation.

Then I will insert output panel and repeat the same process.

Now I need a toggle button just click it and place it in the operation section. Now give the title to the button in our case we will perform addition through this button so I give it “+” by renaming the string to + and now in the tag section write add.

Now I will just copy this toggle button for another operation like subtraction, multiplication, and division. In the identifier section give the tag for each button like sub for subtraction, mul for multiplication, and div for the division.

Now we will add the title name for which we will select the static text and give the title simple calculator.

Now we need to edit text so to insert it we will select the edit field text and insert it in the input panel and in the tag write in1.

Similarly we will add another text field for another input and in the tag give name in2.

Now we will add one more panel for clear purpose then we will add toggle button and I will give it title as clear.

Now I want to add on output for which I will insert the text field and in the tag write the output. The string should be blank space please keep in mind.

Now you can drag and drop anything and you can decrease the length also but once you run this you cannot change anything this window will disappear only. Now when we will click on the run button it will ask to save the file and click on yes and save the GUI.

The calculator section will appear and it will generate the code automatically generated in editor window. You can enter the values in the field but you cannot get output because there is no program written, we will need to write Matlab script to perform different arithmetic operations.

So you need to write code it will be automatically generated in the editor

This is the area you need to write here don’t delete anything and in percentage symbol these are the comments these are the hints you need to read and write don’t worry a bit for operative program. There will be different functions for each button in the code.

## Clear button in matlab GUI:

Now first of all we will write the code for the clear function

By writing this function when we will click the clear button all the text from the text fields will clear.

## ADD button in matlab GUI:

By clicking the + button it will add the two values.

## Subtract function in Matlab:

The subtract function will be similar to the addition function the only difference will be that we will change the + sign to -.

## Division function in Matlab:

Now if we want to test the program we will click on the run and gives the input values in the text box and if we want to add the two numbers we will click on the addition and the two numbers will be added.