Save app designer UITree to .mat file?

I made an app using app designer, which includes a UI Tree component. Based on the node that the user selects in this tree, different sets of drop-downs and spinners will pop up nearby. Selections are then stored in a large non-scalar array. When the user clicks on "Save", my goal is to save this array and the current state of the UITree into a mat file, so it can be recalled, edited, re-saved etc.

I can easily store this list of parameters via save(), but doing the same thing for the app.Tree yields a 1x1 struct with all the expected attributes for a tree, but they are all empty.

What is the easiest method to store the structure of a UITree, so the user may load it back into the app?

Note: I am not able to share the code sadly, but can provide additional detail if needed.

Answer 1

[Alberto Cuadra Lara]

Hello Rod, maybe this small app can help you. This code creates an GUI that contains initially a UITree component with different nodes, each of them creates a different set of components that will update the current state of the GUI. When you select a node from the UITree the code will figure out if there are previous items created by the UITree, in case there are items we have to delete them to not overlap with the new one that is going to be created.

Now, regarding your question I have added two buttons to save and load the current state of the GUI. With the load button we have first to call the routine to delete the existing items if needed, as before to not overlap, and then we have a loop to copy the loaded objects into the UIFigure.

classdef Example_UITree_exported < matlab.apps.AppBase

% Properties that correspond to app components

properties (Access = public)

UIFigure matlab.ui.Figure

LoadButton matlab.ui.control.Button

SaveButton matlab.ui.control.Button

Tree matlab.ui.container.Tree

MATLABexampleNode matlab.ui.container.TreeNode

DropdownNode matlab.ui.container.TreeNode

SliderNode matlab.ui.container.TreeNode

LampandLabelNode matlab.ui.container.TreeNode

end

properties (Access = private)

items_node % Items created with the UITree nodes selection

end

methods (Access = private)

function delete_items(app, items)

% Function that delete the existing items from a cell variable

if ~isempty(items)

for i=1:length(items)

delete(items{i});

end

end

end

end

% Callbacks that handle component events

methods (Access = private)

% Selection changed function: Tree

function TreeSelectionChanged(app, event)

selectedNodes = app.Tree.SelectedNodes;

delete_items(app, app.items_node);

app.items_node = [];

switch lower(selectedNodes.Text)

case 'drop down'

app.items_node{1,1} = uidropdown(app.UIFigure, 'Position', [350, 350, 100, 22]);

case 'slider'

app.items_node{1,1} = uislider(app.UIFigure, 'Position', [350, 350, 150, 3]);

case 'lamp and label'

app.items_node{1,1} = uilamp(app.UIFigure, 'Position', [350, 350, 20, 20]);

app.items_node{1,2} = uilabel(app.UIFigure, 'Position', [350, 300, 31, 22]);

end

end

% Button pushed function: SaveButton

function SaveButtonPushed(app, event)

% Function that save the current state of the GUI

items = app.items_node;

save items.mat items

end

% Button pushed function: LoadButton

function LoadButtonPushed(app, event)

% Function that load the saved state of the GUI

delete_items(app, app.items_node);

load items.mat items

app.items_node = [];

for i=length(items):-1:1

app.items_node{i} = copyobj(items{i}, app.UIFigure);

end

end

end

% Component initialization

methods (Access = private)

% Create UIFigure and components

function createComponents(app)

% Create UIFigure and hide until all components are created

app.UIFigure = uifigure('Visible', 'off');

app.UIFigure.Position = [100 100 640 480];

app.UIFigure.Name = 'MATLAB App';

% Create Tree

app.Tree = uitree(app.UIFigure);

app.Tree.SelectionChangedFcn = createCallbackFcn(app, @TreeSelectionChanged, true);

app.Tree.Position = [60 121 150 300];

% Create MATLABexampleNode

app.MATLABexampleNode = uitreenode(app.Tree);

app.MATLABexampleNode.Text = 'MATLAB example';

% Create DropdownNode

app.DropdownNode = uitreenode(app.MATLABexampleNode);

app.DropdownNode.Text = 'Drop down';

% Create SliderNode

app.SliderNode = uitreenode(app.MATLABexampleNode);

app.SliderNode.Text = 'Slider';

% Create LampandLabelNode

app.LampandLabelNode = uitreenode(app.MATLABexampleNode);

app.LampandLabelNode.Text = 'Lamp and Label';

% Create SaveButton

app.SaveButton = uibutton(app.UIFigure, 'push');

app.SaveButton.ButtonPushedFcn = createCallbackFcn(app, @SaveButtonPushed, true);

app.SaveButton.Position = [394 121 81 22];

app.SaveButton.Text = 'Save';

% Create LoadButton

app.LoadButton = uibutton(app.UIFigure, 'push');

app.LoadButton.ButtonPushedFcn = createCallbackFcn(app, @LoadButtonPushed, true);

app.LoadButton.Position = [495 121 81 22];

app.LoadButton.Text = 'Load';

% Show the figure after all components are created

app.UIFigure.Visible = 'on';

end

end

% App creation and deletion

methods (Access = public)

% Construct app

function app = Example_UITree_exported

% Create UIFigure and components

createComponents(app)

% Register the app with App Designer

registerApp(app, app.UIFigure)

if nargout == 0

clear app

end

end

% Code that executes before app deletion

function delete(app)

% Delete UIFigure when app is deleted

delete(app.UIFigure)

end

end

end

[Rod Lopez]

Thank you for such a detailed answer Alberto. I gave this a try and I believe this is really close to what I need, but the main thing that I am missing in my code is how to save the tree itself.

Each parent node in my app.Tree has two children. Clicking on the first child shows you a dropdown, and based on that dropdown selection will update the text and node_data for that tree child. It will also reveal new dropdowns / spinners to choose from. The user can create additional parent nodes, under which 2 default children are created automatically. The selections made for each parent node are kept in a non-scalar array.

Using your code I was able to save off this non-scalar array, but I have not had luck storing the app.Tree that goes with it. By interpretting the parameters stored in the array I could re-create the tree (the size tells me how many parent nodes to make, dropdown selections tell me what the first and second children's text is, etc.), but I was hoping I could just 'save' app.Tree in some manner and recall it like the non-scalar array.

Thank you for all of your help!!

Rod