All posts by izzad Ramli

Basic GUI (Pop-up menu)

Final GUI for this tutorial

Screenshot-2021-09-14-at-4.08.15-PM Basic GUI (Pop-up menu)

Initializing GUIDE (GUI Creator)

1. Open up MATLAB. Go to the command window and type in guide

Screenshot-2021-09-14-at-10.47.33-AM Basic GUI (Pop-up menu)

2. Choose the first option Blank GUI (Default)

Screenshot-2021-09-14-at-10.48.46-AM Basic GUI (Pop-up menu)

3. You should now see the following screen.

Screenshot-2021-09-14-at-10.49.31-AM Basic GUI (Pop-up menu)

4. For the adder GUI, we will need the following components

Add an Edit Text component to the GUI figure.

Add a Pop-up Menu component onto the GUI figure.

Screenshot-2021-09-14-at-4.10.54-PM Basic GUI (Pop-up menu)

5. Double click the Edit Text component to bring up the Property Inspector.

Change the String property to Testing!!!, and change the Tag property to testing_staticText as shown in the figure below:

Screenshot-2021-09-14-at-4.15.16-PM Basic GUI (Pop-up menu)

6. Modify the properties of the Pop-up Menu component.

Click on the icon on the String property line as shown below.

Screenshot-2021-09-14-at-4.15.56-PM Basic GUI (Pop-up menu)

7. After clicking on the icon, you should now see the following window.

Fill in the window as shown below:

Screenshot-2021-09-14-at-4.16.02-PM Basic GUI (Pop-up menu)

5. The figure should look like after you add the components and modify them.

Screenshot-2021-09-14-at-4.28.48-PM Basic GUI (Pop-up menu)

6. Add some Static Text components to add some description tags to the GUI.

Modify their text by double clicking on the component and changing the String property.

7. Save your GUI wherever you please with your desired filename.

Screenshot-2021-09-14-at-4.29.39-PM Basic GUI (Pop-up menu)

Writing the Code for the GUI Callbacks

8. Open up the .m file that was automatically generated when you saved your GUI.

9. In the MATLAB editor, click on the icon (f), which will bring up a list of the functions within the .m file.

Select popupmenu1_Callback.

Screenshot-2021-09-14-at-4.35.24-PM Basic GUI (Pop-up menu)

10. Add the following code to the function:

Screenshot-2021-09-14-at-4.36.26-PM Basic GUI (Pop-up menu)

Copy and paste the code

switch get (handles.popupmenu1, ‘Value’)
case 1
set(handles.testing_staticText,’FontSize’,8);
case 2
set(handles.testing_staticText,’FontSize’,10);
case 3
set(handles.testing_staticText,’FontSize’,12);
case 4
set(handles.testing_staticText,’FontSize’,14);
case 5
set(handles.testing_staticText,’FontSize’,16);
otherwise
end

11) You can click BUTTON PLAY on the to launch the GUI.

Screenshot-2021-09-14-at-4.40.02-PM Basic GUI (Pop-up menu)

Go ahead and try selecting different font sizes.

Screenshot-2021-09-14-at-4.42.23-PM Basic GUI (Pop-up menu)

END

Basic GUI (Slider)

Final GUI for this tutorial

Screenshot-2021-09-14-at-3.15.29-PM Basic GUI (Slider)

Initializing GUIDE (GUI Creator)

1. Open up MATLAB. Go to the command window and type in guide

Screenshot-2021-09-14-at-10.47.33-AM Basic GUI (Slider)

2. Choose the first option Blank GUI (Default)

Screenshot-2021-09-14-at-10.48.46-AM Basic GUI (Slider)

3. You should now see the following screen.

Screenshot-2021-09-14-at-10.49.31-AM Basic GUI (Slider)

4. For the adder GUI, we will need the following components

Add an Edit Text component to the GUI figure.

Add a Slider component onto the GUI figure.

Screenshot-2021-09-14-at-3.45.09-PM Basic GUI (Slider)

5. Edit the properties of these components.

Double click the Edit Text component to bring up the Property Inspector.

Change the String property to 0, and change the Tag property to slider_editText.

Screenshot-2021-09-14-at-3.46.54-PM Basic GUI (Slider)

6. Modify the properties of the Slider component.

Sit the Min property to 0, and the Max property to 100.

Change the Tag property to slider1.

Screenshot-2021-09-14-at-3.47.55-PM Basic GUI (Slider)

7. The figure should look like after you add the components and modify them.

Screenshot-2021-09-14-at-3.48.50-PM Basic GUI (Slider)

8. Add some Static Text components to specify the min and max values of the slider.

Modify their text by double clicking on the component and changing the String property.

It’s not required, but I highly recommend it.

Screenshot-2021-09-14-at-3.49.55-PM Basic GUI (Slider)

9. Save your GUI wherever you please with your desired filename.


Writing the Code for the GUI Callbacks

10. Open up the .m file that was automatically generated when you saved your GUI.

11. In the MATLAB editor, click on the icon, which will bring up a list of the functions within the .m file.

Select slider1_Callback.

Screenshot-2021-09-14-at-3.52.18-PM Basic GUI (Slider)

12. Add the following code to the function:

image Basic GUI (Slider)

Copy and paste the code

sliderValue = get(handles.slider1, ‘Value’);
set(handles.slider_editText, ‘String’, num2str(sliderValue));
guidata(hObject, handles);

13. Add the following code to the slider_editText_Callback function:

Screenshot-2021-09-14-at-3.54.38-PM-1024x459 Basic GUI (Slider)

Copy and paste the code

sliderValue = get(handles.slider_editText, ’String’);
sliderValue = strnum(sliderValue);
if (isempty(sliderValue) || sliderValue < 0 || sliderValue > 100)
set (handles.slider1, ‘Value’,0);
set (handles.slider_editText, ‘String’,’0’);
else
   set (handles.slider1,’Value’,sliderValue);
end 

14. From the GUIDE editor, you can click BUTTON PLAY on the to launch the GUI.

Screenshot-2021-09-14-at-3.55.49-PM Basic GUI (Slider)

15. Now, try to put in different types of inputs to test the GUI. Any input that is not a number, less than zero, or greater than 100 should default the slider to a value of zero.

END

Basic GUI (Text field & button)

Final GUI for this tutorial

Screenshot-2021-09-14-at-10.45.05-AM Basic GUI (Text field & button)

Initializing GUIDE (GUI Creator)

1. Open up MATLAB. Go to the command window and type in guide

Screenshot-2021-09-14-at-10.47.33-AM Basic GUI (Text field & button)

2. Choose the first option Blank GUI (Default)

Screenshot-2021-09-14-at-10.48.46-AM Basic GUI (Text field & button)

3. You should now see the following screen.

Screenshot-2021-09-14-at-10.49.31-AM Basic GUI (Text field & button)

4. Before adding components blindly, it is good to have a rough idea about how you

want the graphical part of the GUI to look like.

Screenshot-2021-09-14-at-10.51.45-AM Basic GUI (Text field & button)

5. For the adder GUI, we will need the following components

  • Two Edit Text components
  • Four Static Text component
  • One Pushbutton component
Screenshot-2021-09-14-at-10.54.29-AM Basic GUI (Text field & button)

6. Edit the properties of these components.

Double click one of the Static Text components. You should see the property Inspector.

Screenshot-2021-09-14-at-10.59.33-AM Basic GUI (Text field & button)

7. Do the same for the next Static Text component, but instead of changing the String parameter to +, change it to =, and another it to MyAdderGUI.

8. For Static Text component 0, modify the Tag parameter to answer_staticText.

Screenshot-2021-09-14-at-11.27.38-AM Basic GUI (Text field & button)

9. You should have something that looks like the following:

Screenshot-2021-09-14-at-11.29.21-AM Basic GUI (Text field & button)

10. Modify the Edit Text components. Double click on the first Edit Text component.

Set the String parameter to 0.

Change the Tag parameter to input1_editText

11. The second Edit Text component, set the String parameter to 0

Set the Tag parameter input2_editText.

Screenshot-2021-09-14-at-11.31.54-AM Basic GUI (Text field & button)

12. Modify the pushbutton component.

Change the String parameter to Add!

Change the Tag parameter to add_pushbutton.

Screenshot-2021-09-14-at-11.33.11-AM Basic GUI (Text field & button)

13. You should have something like this:

Screenshot-2021-09-14-at-11.34.39-AM Basic GUI (Text field & button)

14. Save your GUI under any file name you please. I chose to name mine myAdder.

When you save this file, MATLAB automatically generates two files:

myAdder.fig and myAdder.m.

The .fig file contains the graphics of your interface.

The .m file contains all the code for the GUI.


Writing the Code for the GUI Callbacks

15. Open up the .m file that was automatically generated when you saved your GUI.

In the MATLAB editor, click on the icon (f), which will bring up a list of the functions within the .m file. Select input1_editText_Callback.

Screenshot-2021-09-14-at-11.39.15-AM Basic GUI (Text field & button)

16. The cursor should take you to the following code block:

Screenshot-2021-09-14-at-11.41.10-AM Basic GUI (Text field & button)

17. Add the following code to the bottom of that code block:

18. Add the same block of code to input2_editText_Callback.

Screenshot-2021-09-14-at-11.41.45-AM Basic GUI (Text field & button)

Copy and paste the code.

Input = str2num(get(hObject, ‘String’));
if (isempty(Input))
set (hObject, ‘String’, ‘0’)
end

19. Now we need to edit the add_pushbutton_Callback.

Screenshot-2021-09-14-at-11.43.35-AM Basic GUI (Text field & button)

Here is the code that we will add to this callback:

Screenshot-2021-09-14-at-11.44.05-AM Basic GUI (Text field & button)

Copy and paste the code.

a = get (handles.input1_editText, ’String’);
b = get (handles.input2_editText, ’String’);
total = str2num(a) + str2num(b);
c = num2str(total);
set(handles.answer_staticText, ‘String’,c);

Launching the GUI

20. There are two ways to launch your GUI.

The first way: Press the icon on the GUIDE editor.

The second way : Launch the GUI from the MATLAB command prompt.

Type in the name of the GUI at the command prompt.

Screenshot-2021-09-14-at-11.45.34-AM Basic GUI (Text field & button)

The GUI should start running immediately:

Screenshot-2021-09-14-at-11.46.07-AM Basic GUI (Text field & button)

END