Basic GUI (Slider)

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

Share this content:

izzad Ramli

Comments are closed.