I have many panels, tables, buttons in the same GUI and it looks messed up. How can I deal with it?

I have a bunch of panels, push buttons and tables in the same GUI. I have overlapped most of them to save the space by using the visibility function.

But this doesn't workout sometimes during the execution and I see some panel invisible. Is it better to create a new window with another GUI? If so, how to combine this two GUI? (Remember I need to come back to the same old window after executing few parts in the new window)

Any Answers or Suggestions, Please help me. Thanks!

Answer 1

[Adam Danz]

Welcome to the world of user interface design :) Sharing a screen shot of your GUI might help with suggestions but here are some basic ideas to consider.

Don't clutter the GUI. One way to control that is by properly using panels and the 'visible' property which seems to be your strategy. Each panel should contain components that are grouped strategically so that you can turn all of them off or on by setting the visible propery of the panel. If a button interacts with components from >1 panel, that button should be independent from any panel. Buttons can be small if their string is short (which it should be) so they don't take up much space. If you have more than 2-3 panels, managing their visibility could become difficult.

Another option is to break up the GUI into >1 GUI. For example, pressing a button may open a 2nd GUI that contains additional components. This option is safer if you've got lots of panels. The (solvable) problem is that handles from GUI-2 are not included in the 'handles' list in GUI-1. When you initialize the GUI-2 named "myGUI_2",

g2handle = myGUI_2;

g2handle will be the handle to myGUI2 and you can access all of the myGUI_2 components through that handle. However, once the callback function for the button press is complete, you lose g2handle.

To get the handle to myGUI_2 from other places in GUI_1, use findobj() and the 'name' property of myGUI_2 to get the handle. This assumes that no other object has that name. You could additionally use the 'tag' property to be even more specific.

g2handle = findobj('name', 'myGUI_2'); 
g2handle = findobj('name', 'myGUI_2', 'tag', 'additionalStuff')

Now, to get the handles to all of the components of myGUI_2 that have non-empty tags, use guihandles(). Be sure the component you're searching for has a unique tag which can be set from the GUIDE property editor or by using the set(handle,'tag','myUniqueTag') function.

hAll = guihandles(g2handle)

hAll will be a structure with a field for each component in myGUI_2. So if a table is named 'dataTable', access the data with

hAll.dataTable.Data

[Vinayak Appasaheb Bhatte]

Thank you for sharing your answer. I got bit confused reading the later part. I am sharing a screen shot below which has > 10 panels.

So I think it is better to create >1 GUI. For example say from the screenshot above, I want to display the right side of GUI i.e. 'Maximum Range', 'Column width' etc into a new GUI i.e myGUI_2. So I will create another GUI (myGUI_2) and replace the handles parameter by 'g2handle'?

Now after I fill values in myGUI_2 panels, I need those values back in GUI_1 to execute the remaining part in GUI_1.

Can you please tell me where exactly to use findobj and the what to write in name property if you can refer to my screeshot considering any example in it? I could understand how you used hALL. Also, I tried to see findobj in 'Locate graphics objects with specific properties' but couldn't gain much information. Thank you so much :)

[Adam Danz]

I think that's a good idea to move the right column of panels to a separate GUI. I'll explain how to access components of a GUI from outside the GUI code. Follow this short tutorial where I create a simple GUI and you will access its components from the command window in Matlab.

Run this code to create the GUI. Note that I'm not using GUIDE but that doesn't matter. The point is that you will have a simple GUI to work with. After running, press the button to change the colors of the button (fun!).

f1 = figure('Name', 'myGUI');
u1 = uicontrol('Style', 'pushbutton', 'String', 'ChangeColors', ...
    'FontSize', 14,  'Units', 'normalize', 'Position', [.2 .2, .6, .6], ...
    'callback', @(x,y)set(x, 'BackgroundColor', rand(1,3)), ...
    'tag', 'ChangeColorButton');

Importantly, the figure ('GUI') is named 'muGUI' and the pushbutton uses the 'tag' property and its tag is unique ('ChangeColorButton'). We'll come back to that in a bit.

Now, after you change the colors, you want to get the current [RGB] color vector of the button. You can run the three line below from the command window or from a script or from within any callback function.

Step 1: find the handle for your GUI using findobj() and the name of your GUI. I named my GUI 'muGUI' and there's no other object named that (important). Be smart naming your GUI. You can use >1 search term in findobj() too (read the help file).

   h = findobj('Name', 'myGUI');

Step 2: Now that I have my GUI handle, get a list of all components in that GUI using guihandles(). Note that guihandles() will return any object in the GUI that has a 'tag'. 'Tag' is a property you can assign to any component in GUIDE; it's like a name and it should be unique to each component. If your component doesn't have a tag (ie, it's empty), it will not be found. guihandles() returns a structure whose fields are the tag names and each field is a handle to a component.

g2Handles = guihandles(h);

Step 3: Use the guihandles() structure and the tag to your desired object to access its properties. The tag in my pushbutton is 'ChangeColorButton' and below I access it's background color.

color = g2Handles.ChangeColorButton.BackgroundColor;

Set the background color to red

g2Handles.ChangeColorButton.BackgroundColor = [1 0 0];

These 3 lines of code can be placed anywhere in your first GUI to access the GUI_2 data. If GUI_2 closes or becomes corrupted, findobj() or guihandles() will fail. You can always use the isvalid() command to check that you've got a valid handle. Also, if you ever have >1 GUI opened with the same name or >1 object created with the same tag, this method will fail.

I'd be glad to help with any follow-up questions. Have fun!

[Vinayak Appasaheb Bhatte]

Firstly, Thank you for your help and patience for writing this tutorial. I appreciate it.

Coming back to the GUI, I followed your tutorial and below are the following steps what I made using two GUI's. Please let me know if my approach is correct or not after following your tutorial.

Step 1: I created a new GUI_1 using GUIDE and named it as 'color.m' and pasted the first code you mentioned.

% --- Executes on button press in pushbutton1.
function ColorChange_Callback(hObject, eventdata, handles)
f1 = figure('Name', 'myGUI');
u1 = uicontrol('Style', 'pushbutton', 'String', 'ChangeColors', ...
  'FontSize', 14,  'Units', 'normalize', 'Position', [.2 .2, .6, .6], ...
  'callback', @(x,y)set(x, 'BackgroundColor', rand(1,3)), ...
  'tag', 'ChangeColorButton');

% --- Executes on button press in pushbutton2.
function GotoRed_Callback(hObject, eventdata, handles)
% Close the present GUI
closereq;
% open the new one
redcolor(handles.figure1);

Step 2: When I clicked ColorChange, the color changed in 'myGUI.figure', worked perfectly fine! Now I created GUI_2 by name redcolor.m and I accessed to this GUI using 'Goto Red' button in my GUI_1 as show in my code above.

Step3: Below represents my GUI_2. I pasted the three lines of code you mentioned in this GUI_2.

% --- Executes on button press in pushbutton1.
function ClickForRed_Callback(hObject, eventdata, handles)
h = findobj('Name', 'myGUI');
g2Handles = guihandles(h); 
color = g2Handles.ChangeColorButton.BackgroundColor; 
g2Handles.ChangeColorButton.BackgroundColor = [1 0 0];

% --- Executes on button press in pushbutton2.
function GoBack_Callback(hObject, eventdata, handles)
% close the present window
closereq;
% go back to main window
color(handles.figure1);

Step 4: The 'Click for Red' button worked perfectly fine. I could see the color changed to red in 'myGUI.fig'. The second button 'Go Back' helps me to go back to previous main GUI_1.

Finally, I would like to know, this how two GUI can work? Is my method correct? Please let me know.

Again thank you very much :)

[Adam Danz]

The short answer is that if your GUI behaves the way you want it to, it's working :)

The code in ClickForRed_Callback() is correct. I'm not sure what the closereq() callbacks are doing - do they close one of the GUI's? Just remember that if a GUI is closed or is deleted, you won't have access to its content. Sometimes people toggle the "visible" property when they want a GUI to disappear but still have access to its content.

[Vinayak Appasaheb Bhatte]

Yes, the colsereq() closes one of the GUI.

Another last point which I didn't get was when you mentioned "These 3 lines of code can be placed anywhere in your first GUI to access the GUI_2 data". What does this mean? I have my main code in my GUI initially and below that paste these three lines of code?

[Adam Danz]

I don't know where in your GUI_1 you'll need data from GUI_2. For example, you might have a callback function that requires getting data from a different GUI that's opened. Those three lines of code can be put anywhere to find the opened GUI, search for its handles, and get data from any component in the opened GUI. Anytime you want to access a GUI from outside of the GUI's code, use those three lines.

[Vinayak Appasaheb Bhatte]

OK cool, got you. Thank you so much :)