In graphical user interface (GUI) development, dropdown menus provide a convenient way to present a list of options to users. MATLAB has different ways of creating drop-down menus. Here we will use a MATLAB function called uidropdown. This article covers different ways of creating and customizing dropdown menus in MATLAB.
uidropdown
The uidropdown function in MATLAB is used to create a drop-down component in a graphical user interface (GUI). It provides users with a menu of selectable options for input or interaction. The function can be called with different syntaxes to customize the drop-down’s parent, properties, and values.
Syntax
dd = uidropdown(parent)
dd = uidropdown(_,Name,Value)
Description
The uidropdown function can be called in three different ways:
-
- dd = uidropdown: This syntax creates a drop-down component without specifying a parent. The output variable dd represents the handle to the created drop-down component, which can be used to manipulate or interact with it.
- dd = uidropdown(parent): This syntax creates a drop-down component with a specified parent. The parent argument refers to the UI container or figure window in which the drop-down will be placed. By specifying the parent, the drop-down is added as a child component within the specified container.
- dd = uidropdown(_, Name, Value): This syntax allows you to specify additional name-value pairs to customize the properties of the drop-down component. The underscore (_) is a placeholder used when you want to omit the parent argument but specify the name-value pairs.
Examples
Create Drop-Down Component
Now we will design a dropdown component menu with pre-set items as the default selection.
dd = uidropdown(fig);
Here in the above code, a user interface (UI) figure is created using the uifigure function, and a dropdown component is added to the figure using the uidropdown function.
After running the MATLAB code, the following window will open. Here we can see a default component drop-down list where we can see the default list options.
Create Editable Drop-Down Component
The uidropdown() function in MATLAB can also create an editable drop-down component in a UI figure. This component allows users to select items from a list by clicking the drop-down arrow, or they can enter their own value as text by clicking the component itself.
dd = uidropdown(fig,"Editable","on");
Set and Access Drop-Down Component Properties
Now we will create a custom drop-down component list in a UI figure. The list elements are passed as parameters of uidropdown() function.
dd = uidropdown(fig,"Items",["A","B","C","D"]);
Create a Drop-Down List and Display Specific Message
Now we will create a drop-down menu list that will display a custom message whenever a specific list element is selected.
Here’s an example of how you can create a simple dropdown message using MATLAB:
% Create a figure window
f = figure('Position', [300, 300, 200, 100], 'MenuBar', 'none', 'ToolBar', 'none');
% Create a dropdown menu
dropdown = uicontrol('Style', 'popupmenu', 'String', {'Hello', 'Goodbye'}, ...
'Position', [30, 40, 140, 30], 'Callback', @dropdownCallback);
% Create a text label
label = uicontrol('Style', 'text', 'String', '', 'Position', [30, 70, 140, 20]);
% Dropdown callback function
function dropdownCallback(source, ~)
selectedValue = source.Value;
switch selectedValue
case 1
label.String = 'Hello!';
case 2
label.String = 'Goodbye!';
end
end
end
After running this MATLAB code, it will create a simple figure window with a dropdown menu containing two options: Hello and Goodbye. When you select an option, the corresponding message will be displayed above the dropdown menu.
Display Multiple Images in the Same Plot Using MATLAB Drop-Down List
Now we will write a MATLAB code that creates a selectable drop-down list for different images. Using the MATLAB uidropdown() function we can create a new list that can display images whenever a certain option is selected.
Here’s a simple MATLAB code that takes three images and displays them in the same plot using a drop-down list.
fig = uifigure;
g = uigridlayout(fig,[2 3]);
g.RowHeight = {22,'1x'};
g.ColumnWidth = {'1x','fit','1x'};
dd = uidropdown(g, ...
"Editable","on", ...
"Items",["image1.png","image2.png"]);
dd.Layout.Row = 1;
dd.Layout.Column = 2;
im = uiimage(g,"ImageSource","image1.png");
im.Layout.Row = 2;
im.Layout.Column = [1 3];
dd.ValueChangedFcn = @(src,event)updateImage(src,event,im,fig);
end
function updateImage(src,event,im,fig)
val = src.Value;
if event.Edited && ~exist(val,"file")
im.ImageSource = "";
uialert(fig,"Enter a file on the MATLAB path","Invalid Image")
else
im.ImageSource = val;
end
end
This code creates a simple MATLAB app with a dropdown menu and an image display. When a dropdown item is selected, the corresponding image is shown. If an invalid file is selected, an alert is displayed. The app allows the user to dynamically update the displayed image.
Note: To read images using MATLAB make sure the images must be stored inside the same directory as the MATLAB script file.
Output
Output for the MATLAB image 1 is as follows:
Output for MATLAB drop-down image 2 is as follows:
Conclusion
This article covers the uidropdown() function in MATLAB, allowing for the creation of drop-down menus with images. This article also highlighted the process of customizing drop-down lists for personalized user interfaces. At the end we covered use of the uidropdown() function for image display using a drop-down menu. Using this function, we can create a drop-down list that enhances visual representation in MATLAB applications. Read more about creating a MATLAB drop-down list in this article.
