Use of Tree Control

This section will focus on the Tree control in LabVIEW. Perhaps because the control itself is "troublesome" to use, many programmers are reluctant to use it. In fact, you can see the Tree control in most applications, such as the file list on the left side of the "Explorer" in the Windows operating system. Usually, the Tree control can be used to display some organized and clearly classified data.

1.1 Edit the appearance of the Tree control

The Tree control is located in the "List&Table" sub-palette of the LV control palette, as shown in Figure 1. From the back panel, we can see that Tree is essentially a string type, which inevitably makes people puzzled: how to match a large amount of "organized data" on the front panel with String? Figure 1 Tree control Select the Edit Text tool in the tool palette to enter data directly in the Tree control.




 

1. Through the Visible Items menu item in the right-click shortcut menu of the Tree control, you can change the display appearance of the Tree control, as shown in Figure 2. You can check/uncheck the menus in this menu item one by one to clarify the corresponding meaning of each menu item.

Figure 2 Changing the display appearance of the Tree control
 

2. There is a Symbols menu item in Visible Items. From the appearance, there is no difference whether this option is checked or not. It turns out that LabVIEW allows you to specify a symbol for each row in the Tree and display it at the beginning of the row. To display the symbol, you first need to check the Visible Items→Symbols option, then right-click on a row, select the Item Symbol menu item on the pop-up shortcut menu, and select a symbol. As shown in Figure 3. LabVIEW provides 42 symbols to choose from, of which the first one is empty (the default value, so you can't see the change after checking Visible Items→Symbols). You can add different symbols to each row in this way.

Figure 3 Selecting Symbol
 

3. In Windows Explorer, we can see that Tree can display hierarchical relationships. This can be achieved by selecting Indent Item and Outdent Item in the right-click shortcut menu. In the figure, right-click on line 3 and select Indent Item, and line 3 becomes a sub-line of line 2, as shown in Figure 4. At this time, LabVIEW will automatically add a "+" or "-" symbol, just like the one displayed in Windows Explorer. The programmer can change the display style of the symbol by selecting the Expand/Contract Symbol Type option in the shortcut menu.

Figure 4 Changing the hierarchical relationship of the Tree control
 

4. So how does LabVIEW represent the strings displayed on the Tree control in the underlying function panel? We can try to use a String indicator to verify the output of the Tree control. Its front and back panels are shown in Figure 5. Run the VI and select different rows of the Tree (the selected row will be highlighted in blue depending on the selection, such as the 3rd row in the figure) to observe the value in the String indicator. It can be seen that the output of the Tree control seems to be the first column string of each row, but the output of the 4th row is A_1, which is a value that has never been input.

Figure 5 Test the output string of the Tree control
Select the Edit Item… menu item in the right-click shortcut menu of the Tree, and a dialog box as shown in Figure 6 will pop up. The left side of the dialog box is the content displayed by the Tree control. By changing the control selection, you can see that the Tag on the right will change accordingly, and the Tag value of the 4th row is exactly A_1. It turns out that the Tree control automatically assigns a unique Tag value to each row (this value can be modified in the Edit Item dialog box, but it must be unique and non-empty), and its output is the Tag value of the currently selected row. We can try to forcibly change the Tag value of the 4th row to A. At this time, LabVIEW will display the Tag value with a red background, indicating that the Tag value is repeated and cannot be used normally (that is, the Tag value of each row in the Tree control must be unique and non-empty). [page] Figure 6 Edit Tree Items dialog box 1.2 Events corresponding to the Tree control

Place an event structure on the back panel and select the Tree control to see all its corresponding events, as shown in Figure 7. This section only introduces some special Tree events. Figure 7 Tree control events



 

• Edit Cell Event

This event is the same as the Edit Cell event in the multicolum listbox. It is triggered when the user edits the content in the control. It is divided into Edit Cell message type events and Edit Cell?Filter type events. The latter can cancel the event according to the programmer's design.
For example, when the program is running, the user is only allowed to modify the value of the first column of the Tree control, but not the values ​​of other columns. You can use the Edit Cell?Filter type event to implement this function, as shown in Figure 8. To allow users to edit the value of the Tree control while the program is running, you need to first check the Editable Cells menu item in the right-click shortcut menu of the Tree control, then run the program, click in the cell that needs to be modified and enter the corresponding characters. It can be seen that except for modifying the value of the first column, modifications to other columns will not be successful.
This example can also be extended. For example, only allow users to enter specific strings (uppercase letters, numbers, etc.). How should it be handled? Figure 8 Edit Cell?Filter type event of the Tree control



 

• Double Click Event

As the name suggests, this event is triggered when the user double-clicks the Tree control, as shown in Figure 9. The Tag in the event data node in the figure indicates which row the user double-clicked, but is there a way to clearly identify which area in the Tree control the user double-clicked, specifically which row and column? Obviously, the Coords on the left represent the coordinate value of the double-click. We can use the "Point To Row Column" method of the Tree control (Create→Invoke Node) to convert the Coords coordinate value into a specific row and column value. In addition, how to indicate that the user double-clicked the row and column headers of the Tree control? For details, please refer to the help documentation on the "Point To Row Column" method in LabVIEW. Figure 9 Double Click filter event of the Tree control




 

• Item Close and Item Open Events

These two events are opposite, with a message-type event and a filter-type event respectively. They are triggered when the user expands or shrinks a parent-level item, such as the second row in the above Tree control. The event will be triggered when the row is expanded or shrunk (you can achieve the expansion and shrinking operations by clicking the "+" and "-" symbols on the left side of the row or double-clicking the row).
If you do not want the user to shrink the second row of the Tree control, you can use the code shown in Figure 10. Running the VI, you can see that no matter how the user clicks the "-" symbol on the left side of the second row of the Tree control, the row will not shrink. Figure 10 Item Close filter event of the Tree control 1.3 Properties corresponding to the Tree control

The Tree control has many properties, as shown in Figure 11. They are mainly used to dynamically change the properties of the Tree control (using program modification). Most of the properties are similar to those of the multicolum listbox. This section only introduces a few typical property nodes and focuses on explaining how to use the Tree property nodes. [page] Figure 11 Property list of the Tree control



 

• Change the properties of some cells

From the Tree control, we can see that it is composed of many rows and columns, where each row has a unique Tag value that can represent a row, and columns are specified using Numeric values, starting from 0 and represented as row 1, row 2, etc. Therefore, if you need to change the properties of certain cells, you need to first specify which rows and columns.
Just like the multicolumn listbox, LabVIEW uses the Active property to indicate which specific cell is pointed to. Figure 12 first specifies the cell in the row with Tag C and column 1, and then outputs the text displayed on the cell. Figure 12 Active property of the Tree control [Note]




 

1. Cell Tag and Cell String are different. The former is used to represent a unique row, and its value must be unique and non-empty; while the latter is the text displayed on the cell, which can be the same as the Tag or different.
2. When the Tag is set to TREE_ALL_ROWS, it means that all rows are selected at this time. This property can be used to batch change the properties of cells, such as background color.
3. When the Tag is set to TREE_COLUMN_HEADERS, it means that all column headers are selected.
4. When ActiveColumn is set to -2, it means all columns are selected; when it is set to -1, it means all column headers are selected.

For example, if you need to set the font of the first column of the Tree control to bold, you can use the code shown in Figure 13. Figure 13 Setting the font of the first column of the Tree control to bold



 

• Top Left Visible Cell Properties

This property is rarely used, so it is introduced separately. It indicates the position of the first cell in the upper left corner of the Tree control. This property is often used when setting the automatic scrolling of the scroll bar of the Tree control. For example, when dynamically adding content to the Tree control, you need to make the Tree scroll bar automatically scroll as the content increases to ensure that the last added content remains visible. You can use this property. You can
try using the method shown in Figure 14, and manually add some content to the Tree control, drag the horizontal and vertical scroll bars at will, and then observe the output value. Figure 14 Top Left Visible Cell property of the Tree control



 

• All Tags Properties and Displayed Items Properties

These two properties are similar, both of which output the Tag value of the Tree control. However, the former means outputting the Tag value of all rows; the latter means outputting the Tag value of the visible rows, that is, only outputting the Tag value of the expanded rows. You can click the "—" symbol on the left side of the second row, so that the third row is hidden. You can easily know the difference between the two by getting the values ​​of these two properties respectively.

1.4 Methods corresponding to the Tree control

Typical methods of the Tree control are shown in Figure 15. There are six categories in total. The previous article described the Point to Row Column method, and the Double Click method indicates which row (or node) is double-clicked, so this section focuses on the other four methods. Figure 15 Tree control methods 1.4.1 Expanding and contracting Tree nodes

1. Open/Close.Open/Close All: Expand or collapse all nodes (rows).
2. Open/Close.Item: Expand or collapse a node (row)
3. Open/Close.Ensure Visible: Allow a child node to be visible. Unlike the above two methods, the input of this method is the Tag of a child node, not the Tag of the parent node.

1.4.2 Retrieve the nodes of the Tree

Navigate Tree contains 5 methods: Get Child, Get Next Item, Get Parent Item, Get Path and Get Previous Item. The function of each method is just like their name, and it is also relatively simple to use.
Get Next Item and Get Previous Item are a pair of relative methods, which are different in use. They refer to the next node and the previous node at the same level. For example, in Figure 16, the next node of node A is B, and the previous node is empty. The next node of node B is E, and the previous node is A, because only node E is at the same level as B, and nodes C and D are at the next level of B. Similarly, the next node of node C is D, and the previous node is empty. Figure 16 Tree control example 1.4.3 Editing the nodes of the Tree

Figure 17 shows all the methods for editing each node of the Tree, of which the first three represent the operation of adding nodes, and the methods are similar. [page] Figure 17 Edit Tree Items method If you need to add a node to the Tree control on the left side of Figure 18 to turn it into the Tree control on the right, you can use the Edit Tree Items. Add Item method. Figure 18 Add a node (Item item) Figure 19 shows the source code for adding a node, where Parent Tag is B, indicating that B is the parent node of the item to be inserted. If the node to be inserted has no parent node, just set it to empty. Child Position indicates the number of child items of the item to be inserted, and it should obviously be filled in with 1. Left Cell String is the string of the first column of the item to be inserted. Child Text is an array, which represents all the strings after the second column of the item to be inserted. Child Tag is the tag value of the item to be inserted, and cannot be set to empty or the same as other tag values. Figure 19 Add a node (Item item) Source code 1.4.4 Customize the symbol of the Tree node

In the Custom Item Symbols method, you can dynamically set or customize the symbol of the node. As mentioned earlier, LabVIEW provides a total of 42 built-in symbols, and each symbol has a unique Index number (starting from 0) from top to bottom and from left to right.
If you need to add a custom symbol to the newly added F node in Figure 18, you can use the code shown in Figure 20. First, use the property node to set the symbol of the F node to symbol No. 1 (the symbol's Index can be queried in the Item Symbol menu item in the right-click shortcut menu); then use the Custom Item Symbol. Set Symbol method to change symbol No. 1 to a custom picture; in this way, all No. 1 symbols in the Tree control will become new symbols. Figure 20 Custom node symbols 1.5 Tree control interface refresh


Download ] is shown in Figure 22. First, use the Edit Tree Items. Delete method to delete all the contents in the Tree control (not connecting the Tag means deleting all the contents); then add a For loop of N=1000, add a new Item item each time the loop is repeated and set the background color of the item. Child Positon is set to -1 to indicate that the newly added item is at the end of the existing items. Figure 22 Tree control example back panel Running the VI, you can find that the program can indeed achieve the corresponding function, but the running time is long. This is mainly due to the refresh of the Tree control. Each time the loop runs, the background color of the node needs to be modified, which makes the refresh speed of the entire interface very slow. In fact, we do not need to observe the process of adding the Tree control, we just need to get the result quickly. For example, when the loop is running, the appearance of the Tree control can be refreshed once after the program is finished. This can greatly improve the speed of the program. The modified code is shown in Figure 23. Figure 23 Tree control example back panel_modified The above figure uses the Defer Panel Updates property provided by LabVIEW, which can delay the refresh of the entire interface (Panel). That is to say, when the value and appearance of the control on the interface are modified, the controls on the interface are not refreshed immediately, but refreshed uniformly at the appropriate time (when LabVIEW redraws the front panel interface). Therefore, set the Defer Panel Updates property to true at the beginning of the run, and set the Defer Panel Updates property to false after the program ends to force the front panel controls to refresh.