In my previous posts, I introduced the semi-documented uitree function that enables displaying data in a hierarchical (tree) control in Matlab GUI, and showed how it can be customized. Today, I will continue by describing how specific uitree nodes can be customized.
To start the discussion, let’s re-create last week’s simple uitree:
% Fruits fruits = uitreenode('v0', 'Fruits', 'Fruits', [], false); fruits.add(uitreenode('v0', 'Apple', 'Apple', [], true)); fruits.add(uitreenode('v0', 'Pear', 'Pear', [], true)); fruits.add(uitreenode('v0', 'Banana', 'Banana', [], true)); fruits.add(uitreenode('v0', 'Orange', 'Orange', [], true)); % Vegetables veggies = uitreenode('v0', 'Veggies', 'Vegetables', [], false); veggies.add(uitreenode('v0', 'Potato', 'Potato', [], true)); veggies.add(uitreenode('v0', 'Tomato', 'Tomato', [], true)); veggies.add(uitreenode('v0', 'Carrot', 'Carrot', [], true)); % Root node root = uitreenode('v0', 'Food', 'Food', [], false); root.add(veggies); root.add(fruits); % Tree figure('pos',[300,300,150,150]); mtree = uitree('v0', 'Root', root);
User-created tree
Labels
Node labels (descriptions) can be set using their Name property (the second uitreenode data argument). Note that the horizontal space allotted for displaying the node name will not change until the node is collapsed or expanded. So, if the new name requires more than the existing space, it will be displayed as something like “abc…”, until the node is expanded or collapsed.
Node names share the same HTML support feature as all Java Swing labels. Therefore, we can specify font size/face/color, bold, italic, underline, super-/sub-script etc.:
txt1 = '<html><b><u><i>abra</i></u>'; txt2 = '<font color="red"><sup>kadabra</html>'; node.setName([txt1,txt2]);
HTML-enriched tree nodes
Icons
Tree-node icons can be specified during node creation, as the third data argument to uitreenode, which accepts an icon-path (a string):
iconPath = fullfile(matlabroot,'/toolbox/matlab/icons/greenarrowicon.gif'); node = uitreenode('v0',value,name,iconPath,isLeaf);
Tree node icons can also be created or modified programmatically in run-time, using Matlab’s im2java function. Icons can also be loaded from existing files as follows (real-life programs should check and possibly update jImage’s size to 16 pixels, before setting the node icon, otherwise the icon might get badly cropped; also note the tree-refreshing action):
jImage = java.awt.Toolkit.getDefaultToolkit.createImage(iconPath); veggies.setIcon(jImage); veggies.setIcon(im2java(imread(iconPath))); % an alternative % refresh the veggies node (and all its children) mtree.reloadNode(veggies);
Setting node icon
Behavior
Nodes can be modified from leaf (non-expandable) to parent behavior (=expandable) by setting their LeafNode property (a related property is AllowsChildren):
set(node,'LeafNode',false); % =expandable node.setLeafNode(0); % an alternative
One of the questions I was asked was how to “disable” a specific tree node. One way would be to modify the tree’s ExpandFcn callback. Another way is to use a combination of HTML rendering and the node’s AllowsChildren property:
label = char(veggies.getName); veggies.setName(['<html><font color="gray">' label]); veggies.setAllowsChildren(false); t.reloadNode(veggies);
Disabled node
Another possible behavioral customization is adding a context-menu to a uitree. We can set node-specific tooltips using similar means.
Answering a reader’s request from last week, tree nodes icons can be used to present checkboxes, radio buttons and other similar node-specific controls. This can actually be done in several ways, that will be explored in next week’s article.
There are numerous other possible customizations – if readers are interested, perhaps I will describe some of them in future articles. If you have any special request, please post a comment below.
One thing with the modified code is that it is necessary to add an attachment to send an...
How can you get the path from the node if you are using uitree for a file system? Also very interested in using check boxes on the nodes.
@Amy – here’s how to get the file-system path from your tree:
Re checkbox nodes – look at tomorrow’s article…
Hello Yair
I’d like to get back the whole path of a tree’s node in a structure following the classic way to display it:
S.S1.S1(2).signal.sig
while, with the code you suggested before I get instead:
pathStr =
S\S1\S1(2)\signal\sig\
Here’s your code:
Can you please help me?
Salvatore
Where do we add this small mentioned code to get the uitree file location. Also do we need to have any other file besides the above code of uitree to get this file location of a file. I tried adding the small code mentioned in this comment inside the code of Customizing uitree nodes – part 2. But it didnt give me any output anywhere. Can you suggest me how to go about it?
I am using example of https://undocumentedmatlab.com/blog/customizing-uitree-nodes-2….’built in classes’ example. I am using it because I want tick as per how it is mentioned in the output of that code. Please suggest
Simply excellent…. This is what I am looking for long. Thanks a bunch.
Hello Yair,
Thank you very much for all your usefull explanations.
I have to implement node-specific tooltips. As you mention, I try to follow the uitree context menu example, and also look at tree-node’s renderer, but without success.
So I would be very insterested in getting some examples.
Thanks a lot!
Hi Yair,
Is it possible to change the background color of the scrollpane where the tree is parented from the default white? Ideally I would like to be able to set the background to an image but a solid colour will suffice as second best.
Thanks a lot for all your good work.
Regards
David
Hi
how can i define callback to each mode?
@Masoud – an example for using a node-selection callback was shown in the second article of this series.
good Morning
Dear Yair.
For the code developed early in the article, how can I do to clicking with the mouse in a specific table in access (.mat) in the main program directory, where I can enter data.
Very good your articles.
@Rafael – I do not know what you mean. I suggest that you get an English speaker to explain better.
No sé lo que quieres decir. Sugiero que usted obtenga un orador Inglés para explicar mejor.
I know this topic is pretty old, but maybe someone is still watching it.
I have two uitrees and i want to copy Chosen nodes of the first tree to the second.
I tried that for the last two days and still don’t have an answer. If someone had an
idea for this, i would be very thankful.
@Eric – you (and anyone else who is reading this) are always welcome to contact me by email (altmany at gmail) for a short consultancy.
Spending a bit of money on expert advise that could save you two days of work, could be a very fair bargain…
Hello Yair!
Many thanks for this explanations!
Is it possible to save the whole tree as a struct?
@Dennis – I am not aware of any method to do this directly. I think you need to parse the entire tree recursively to do this.
You’re welcome to create a utility that does this, and if you upload it to the Matlab File Exchange then I’d be happy to reference it here.
Hello Yair,
Are you aware of any method to format the node text of uitrees created after MATLAB documented the functionality, starting with R2017b? Html tags do not work anymore.
Thanks and regards.
@Christos – uitree is only documented for uifigures (i.e. HTML figures). As strange as this may sound, MathWorks have prevented the use of HTML customizations in uifigures. So if you want HTML formatting in your figure GUI, you’re forced to use legacy Java-based figures, at least until such time as MathWorks opens up the uifigure components’ underlying HTML/CSS/JS to user customizations in some possible future release.
Alternatively, you can use CSS to customize the appearance of tree nodes in uifigures as explained here, although this is admittedly much more cumbersome and difficult (not to mention undocumented/unsupported).
Thank you for the prompt reply. It is sad that MathWorks is so slow properly integrating uitrees (and other java elements).
@Christos – uitree is a Java component only on legacy (Java-based) figures. On the new (HTML-based) uifigures uitree is implemented using a radically different (non-Java) implementation that uses HTML/JavaScript/CSS. It is not possible to integrate Java components in uifigures due to browser limitations outside of MathWorks’ control: It used to be possible to include Java controls in webpages, until the major browsers stopped supporting Java in recent years. Since uifigures are little more than a webpage displayed within a browser (specifically, Chromium-based JxBrowser) window, it is impossible to use Java components within them (caveat: JavaFX is supported, but that entails security restrictions on native end-user browsers and would have required a drastic code rewrite anyway, so MW understandably decided to skip this route and go for a pure HTML/JS/CSS implementation).
The bottom line is that the only possible customization to uifigure contents is via JavaScript/CSS — this is currently blocked in Matlab, but hopefully MW will remove this restriction some day.