Cool GUI Stuff: Look What I Can Do

Cool GUI Stuff: Look What I Can Do!

LabVIEW provides some powerful GUI components that you can use to make your application look very slick! Why should using software be boring? Let's take a look at some graphical user interface components that will add a certain "wow!" factor to your applications.

System Controls and Colors

System controls (called dialog controls prior to LabVIEW 8) and system colors change with the operating system and desktop theme/style a user has selected. This is a very useful feature for several reasons. First, it makes your application look and feel like "real software." Large companies like Microsoft, Apple, and IBM spend millions of dollars figuring out what looks good, so why not leverage off their investmentthese companies even publish user interface standards based on their research. Second, because the dialog controls and colors change depending on the theme the user has selected, your application will respond to those changesthis is a bonus feature of your application that you get for free! It is important to realize that sometimes users select specific desktop themes for reasons other than what they think looks good or appealing. Some users have special eye-sight or other physical needs that are accommodated by large fonts, high contrast, or specific color combinations. Giving users control over how your software appears opens up a large market of users who might not otherwise be able to use your software. System controls and colors may help you meet "accessibility standards."

System colors are found on the color dialog (see Figure 13.125), in the lower-right corner. The word "System" is directly above this row of colors.

Figure 13.125. Color dialog, showing System colors in the lower-right

System controls are found on the System subpalette of the Controls palette (see Figure 13.126).

Figure 13.126. System palette

Figures 13.127 through 13.129 show examples of how system controls appear on the different platforms.

Figure 13.127. System controls on Mac OS X

Figure 13.128. System controls on Windows XP (XP Silver Theme)

Figure 13.129. System controls on Linux

Make sure to open your VIs and inspect the front panels on any platforms on which you anticipate your software might be used. The sizes of fonts and controls can vary slightly, so you will want to make sure that there are not problems with overlapping text or controls. We will discuss more cross-platform considerations in Chapter 17.

Drag and Drop

Drag and drop is a very exciting feature in LabVIEW. It is very powerful, allowing you to drag and drop data to and from any control or indicatoreven between different VIs! This is a very advanced topic, and we will not go into great detail on how everything works, but we will give you an overview of the key components.

There are several components of this feature:


1.	The control Start Drag method (see Figure 13.130). This method starts a drag and drop operation using the control as the source. You get to specify Data, which is an array of clusters containing data name (a string) and drag data (a variant, which can be anything you wish). The data names are very important; you will use the Get Drag Drop Data function (item #3 in this list) to access the drag data by name. Figure 13.130. Start Drag method

2.	The Drag and Drop events, available for controls via the Event Structure. There are several drag and drop events that are available for all controls: Drag Ended Drag Enter Drag Leave Drag Over Drag Source Update Drop Each of these has an event data element called Available Data Names, which is an array of strings containing the data names that you defined when you called the Start Drag method. Some of these events also have event filter data, allowing you to do things such as rejecting a drop event, for example.
3.	The Get Drag Drop Data function, shown in Figure 13.131, is found on the Programming>>Application Control palette. This function returns drag data from LabVIEW when you perform a drag and drop operation. Only use this function when it is necessary to access the drag data, not just to examine the data type. If a drag and drop operation is not in progress, LabVIEW returns an error. If the data requested is unavailable, LabVIEW returns an error. Figure 13.131. Get Drag Drop Data function

For some excellent drag and drop LabVIEW examples, look in the examples\general\dragdrop folder in your LabVIEW installation.

Tree Control

The tree control may be one of the best user interface widgets ever invented. It displays a hierarchical list of items that the user can interact with by selecting items, dragging and dropping items, expanding and contracting items, etc. You've already experienced tree controls when using NI Example Finder, Measurement & Automation Explorer (MAX), the LabVIEW Help documentation, and several other applications on your computer. Using tree controls is very easy; programming tree controls is a little trickier. It's hard work making things so easy for your application's users; but somebody has to do it, so let's get started!

You can create and edit tree controls only in the LabVIEW Full and Professional Development Systems. If a VI contains a tree control, you can run the VI in all LabVIEW packages, but you cannot configure the control in the Base Package.

You can find the Tree Control on the Modern>>List & Table palette (see Figure 13.132).

Figure 13.132. List & Table palette

Place a tree on the front panel of a VI and you will notice that it appears similar to a multi-column listbox (see Figure 13.133) and its terminal is a string data type (see Figure 13.134). The value of that string is the tag of currently selected item. Before we define what a tag is, let's add some items to our tree control.

Figure 13.133. Tree control on the front panel

Figure 13.134. Tree control terminal on the block diagram

Using the Labeling tool, enter an item name in the first column of the first row of the tree control and press the <Enter> key. You have just created your first item in the tree! And, when you created the item, LabVIEW also created a tag for the itemthe tag is the text that you entered, unless an item already had that tag (in which case, LabVIEW will append a number, in order to make the tag unique). You can't see the tag, but it is important for programmatically controlling the tree and interpreting user actions with the tree's items.

Now create a few more items. All of the items in your tree are at the same level, but you can create a hierarchy (tree) by indenting items, which makes them child-nodes of the items above them. To indent (or outdent) an item, right-click on the item and select Indent Item (or Outdent Item) from the shortcut menu. You should now have a hierarchy of items, similar to the one shown in Figure 13.135.

Figure 13.135. Tree control showing a hierarchy of items

Another way to create a hierarchy is to drag and drop items. Using the Operating tool, you can drag an item onto another item to make the first item a child of the second item. For example, you might wish to move the "USB-6008" DAQ device from the "Hardware Library" into the "Laptop" system, as shown in Figures 13.136 and 13.137.

Figure 13.136. Drag and drop (before)

Figure 13.137. Drag and drop (after)

You can allow users to edit the cell string values of a tree control at run-time. Pop up on a tree control and select Editable Cells from the shortcut menu to enable this feature. You also can use the Allow Editing Cells property (using a property node) to programmatically allow users to edit cells in a single-column listbox, multicolumn tree control. Use the Edit Cell event (using an Event Structure) to handle the event that occurs when a user changes the text.

Activity 13-11: Capturing Mouse Events on a Tree Control

In this activity you will build a VI that captures mouse events on a tree control.


1.	Build a front panel with a tree control, as shown in Figure 13.138. Figure 13.138. Front panel of the VI you will create during this activity
2.	Use the Labeling tool to add elements to the tree and use the Operating tool to drag elements so that they become child-nodes of other elements.

3.	Build the block diagram so that it has a While Loop with an Event Structure, as shown in Figure 13.139. Add an event for the `stop` button's Value Changed event. Place the `stop` button terminal inside this event case and wire it to the While Loop's Conditional Terminal, which should be configured as stop if true. Figure 13.139. Your VI's Event Structure after you add the "stop": Value Change event

4.	Add an event for the `TRee` control's Mouse Down event, as shown in Figure 13.140. Create an Invoke Node that calls the `TRee` control's Point To Row Column method, and wire the Coords event data into the Point argument of the methodthis will convert the mouse coordinates into information about where the mouse is currently located on the tree control. Figure 13.140. Your VI's Event Structure after you add the "Tree": Mouse Down event The Point To Row Column method converts a pixel coordinate to a tag-column pair in the coordinates of the control. This method also returns whether the point is inside the bounds of the content rectangle and whether the point is within the custom symbol of the cell. Wire the Tag output to the `Clicked Item` indicator terminal.

5.	Add an event for the `tree` control's Mouse Move event, as shown in Figure 13.141. Build this case, in the same way as the Mouse Down case. Wire the Tag output to the `Hovered Item` indicator terminal. Figure 13.141. Your VI's event structure after you add the "Tree": Mouse Move event
6.	Save your VI as `tree Control Mouse Events.vi`. If you use the Event Structure's Duplicate Event Case . . . pop-up option, instead of Add Event Case . . ., to create the new event case from the Mouse Down case, the `Clicked Item` indicator (which is inside the Mouse Down case) will be duplicated. Sometimes you will want to use this technique to save some editing steps. For example, you could rename it `Hovered Item`.
7.	Run the VI. Notice how the `Hovered Item` indicator displays the item that the mouse is hovering over and how the `Clicked Item` indicator displays the item that the user clicks with the mouse.

This example just scratches the surface of what the tree control can do. For more exciting examples, look in the LabVIEW examples\general\controls\treecontrol folder.

Tab Control

The tab control (found on the Modern>>Containers subpalette of the Controls palette) is a very useful control that can be used to both group and hide other front panel controls (see Figure 13.142).

Figure 13.142. Placing a Tab Control onto a VI's front panel from the Modern>>Containers palette

You can place any number of controls and indicators on each page of the tab control, as shown in Figures 13.143 and 13.144. The user can mouse-click on the page that he would like to make visible.

Figure 13.143. Controls and indicators on the first page of a tab control

Figure 13.144. Controls and indicators on the second page of a tab control

If we look at the block diagram, we will see that, although the front panel controls and indicators are grouped, the block diagram terminals are not grouped (see Figure 13.145).

Figure 13.145. Block diagram containing the terminal of a tab control, as well as the terminals of the controls and indicators contained on the pages of the tab control

A tab control is not like a cluster; it does not bundle the controls together into its data. Rather, a tab control is an enum, with the possible values being the labels (names) of its pages. To see this, pop up on the tab control's block diagram terminal and select Create Constant, and then inspect its possible values (as shown in Figures 13.146 and 13.147).

Figure 13.146. Tab control terminal and an enum constant created by selecting Create Constant from the tab control's pop-up menu

Figure 13.147. Viewing the item names from the pop-up menu of the enum constant to show that it contains items for each page of the tab control

The value of the tab control is the tab that is currently being displayed (frontmost). So, this means that we can programmatically change the visible tab by writing to the value of the tab control (for example, by passing a value to its terminal or a local variable). Note, however, that all controls on all the tabs are always "active"selecting a particular value for the tab control only affects which tab is displayed; it does not in any way affect the value of the controls in all the other tabs.

Another feature to note about the tab control is that it can contain both controls and indicators at the same time. This is very different from a cluster, which can contain either controls or indicators, but not both.

If you do not want the user to be able to see the tabs of a tab control, you can hide them by unchecking the Visible Items>>Tabs option from the tab control's pop-up menu (or set the Tabs Visible? property to FALSE, programmatically using a property node). Then the tab control will appear similar to a Raised Box decoration. You can programmatically change the value of the tab control, to switch between the pagesthis is a great way to have several "screens" in a single VI.

If you want the tabs of a tab control to be visible, but you do not want the user to be able to switch pages, make the tab control an indicatorthat won't affect the controls or indicators on the pages. (Also, you can't just disable the tabthat disables all the controls on it as well.)

Figure 13.148. Tab control with page tabs hidden

You can create a "wizard" style of user interfaceyou know, the kind with "Back," "Next," and "Finish" buttons that cycle you to different "screens." Hiding the tabs of a tab control and changing the visible page programmatically is a very clever way to create such a user interface. Give it a try! Figure 13.149 shows the front panel of such a VI.

Figure 13.149. A "wizard" user interface created using a tab control with hidden tabs

Subpanels

The subpanel control (found on the Modern>>Containers subpalette of the Controls palette) displays the front panel of another VI, inside a frame that looks similar to a cluster. Figure 13.150 shows an empty subpanel control.

Figure 13.150. Subpanel control on a VI's front panel

On the block diagram, the subpanel has no terminal. Instead, when you drop a subpanel onto the front panel of your VI, LabVIEW creates an invoke node on the block diagram with the Insert VI method selected. This method is used to insert a VI into the subpanel.

To use a subpanel, you will need to provide a VI Reference to the VI you are inserting. VI References are discussed in Chapter 15, where we will learn about the VI Server.

For examples of how to use the subpanel, open some of the VIs that ship with LabVIEW in examples\general\controls\subpanel.llb.

Figure 13.151. Subpanel invoke node on a VI's block diagram

You can create and edit subpanel controls only in the LabVIEW Full and Professional Development Systems. If a VI contains a subpanel control, you can run the VI in all LabVIEW packages, but you cannot configure the control in the Base Package.

Splitter Bars

Splitter bars (found on the Modern>>Containers subpalette of the Controls palette) are used to divide a VI's front panel into panes. In fact, a VI's front panel can be thought of as a single pane. Use a Vertical Splitter Bar to divide a pane into a Left Pane and Right Pane. Use a Horizontal Splitter Bar to divide a pane into an Upper Pane and Lower Pane. There is no limit to the number of panes that you can create using splitter bars. Figure 13.152 shows a front panel divided into three panes using one horizontal splitter bar and one vertical splitter bar.

Figure 13.152. A VI Front panel devided into three panes using splitter bars

When you place a control onto the front panel of a VI that is divided into panes, you will place the control into one of the panes. That pane will then own the control.

Panes have several properties that affect how the pane size will change as the front panel is size is changed, as well as how the size and position of objects on the pane will change when the pane is resized. You can change a pane's properties from the pop-up menu of an adjacent splitter bar. In the pop-up menu of a vertical splitter bar (not the adjacent scrollbar), there are Left Pane and Right Pane submenus. Likewise, in the pop-up menu of a horizontal splitter bar, there are Upper Pane and Lower Pane submenus.

Splitter bars also have several properties that affect how the user will interact with them and how they behave as the panes are resized. For more examples of how to use splitter bars, open some of the VIs that ship with LabVIEW in examples\general\controls\splitter.llb. Also, the LabVIEW documentation has a lot of useful information on this powerful feature.

Scrollbars

Scrollbars can be found on many of LabVIEW's controls. For example, the string control, array control, listbox, tree control, and many others all have built-in scrollbars. But sometimes you only need a scrollbarnot the control that it is built into. For those occasions, use the vertical scrollbar or horizontal scrollbar (found on the Modern>>Numeric subpalette of the Controls palette) shown in Figure 13.153).

Figure 13.153. A vertical scrollbar and horizontal scrollbar

It is important to understand the different parts of a scrollbar. Figure 13.154 shows all of the parts of a scrollbar.

Figure 13.154. Scrollbar controls

One thing that is very important to notice about the vertical scrollbar is that the decrement button is at the top and the increment button is at the bottomthis might seem counter-intuitive, but it will make sense in a second. The vertical scrollbar was originally designed for scrolling through lines (and pages) of text. The value of a scrollbar is a numeric that can be thought of as the line of text at the top of the page that the scrollbar is controlling. If we think about the increment button as incrementing the line number, which is visible at the top of a page full of text, then it all starts to make sense. Conversely, the decrement button decrements the line number that is at the top of the page.

In order to take full advantage of a scrollbar, we will need to set some of its properties using a property node, which can be created from the pop-up menu of the scrollbar (or its block diagram terminal) by selecting a property from the Create>>Property Node submenu.

The following properties will be useful in configuring the behavior of the scrollbar:

Doc Min The minimum value of the scrolling range. Think of this as the minimum line number. Usually this should be zero.
Doc Max The maximum value of the scrolling range. Think of this as the total number of lines in our document.
Increment The increment value of the scrolling range. When you click the increment and decrement arrows, the scrollbar value adds or subtracts the increment value to move the scroll box toward the arrow that you click.
Page Size The page size of the scrolling range. When you click the spaces between the scroll box and the arrows, the scrollbar value changes by the page size. Think of this as the number of lines in a page of text.
Housing Length The length of the housing in pixels. This is the height of a vertical scrollbar and the width of a horizontal scrollbar.

Clicking on the page-down region increments the scrollbar value (or line number, if you will) by the page size, and the page-up region decrements the scrollbar by the page size. Also, the size of the scroll thumb (see Figure 13.154), relative to the Housing Length, is equal to the page size (in lines) relative to the total document size (Doc Max Doc Min = Total Number of Pages in Document).

Open examples\general\controls\Cluster with Scrollbar.vi for an example of using a vertical scrollbar to simulate a cluster scrollbar.

Graphics and Sound

With LabVIEW being a graphical programming language, it only seems natural that it has the capacity to work with and manipulate front panel graphics.

LabVIEW can works with graphic images on the front panel in two ways:

Static graphics, such as a logo, can be imported into LabVIEW and placed on the front panel.
For programmatic generation, control of dynamic graphics, LabVIEW provides the Picture control, a powerful object with a comprehensive set of functions.

Importing Graphics

LabVIEW allows you to import graphics by copying and pasting from the clipboard (on Windows and Mac OS X only), and using the Edit>>Import Picture from File . . . menu option. You can learn more about importing graphics in Chapter 17.

Picture Control

The Picture control (found on the Modern>>Graph>>Controls palette) is a very powerful LabVIEW control for drawing pictures and graphics of anything you can think of (see Figure 13.155).

Figure 13.155. Placing a Picture control onto the front panel from the Modern>>Graph>>Controls palette

In order to draw pictures in the Picture control, use the picture function located in the Programming>>Graphics & Sound>>Picture Functions palette (Figure 13.156).

Figure 13.156. Picture Functions palette

For example, you can draw geometric shapes (as shown in Figure 13.157), text, lines, images read from filethere's really no limit!

Figure 13.157. Drawing a circle in a picture control

There are a lot of good examples on how to use the picture control in the examples\picture folder of your LabVIEW installation.

The picture data type is also very useful for embedding images in the plot area of a graph, as shown in Figure 13.158. This is an example VI that may be found at examples\general\graphs\Plot Images.vi.

Figure 13.158. Plot Images.vi front panel

Embedding plot images is easy; just write a picture into one of the following properties of a graph:

PlotImages.Front is drawn in front of the plot data.
PlotImages.Middle is drawn between the grid lines and the plot data.
PlotImages.Back is drawn behind the grid lines.

Sound

A very nice or very obnoxious feature to have in many applications is sound, depending on how you use it. An audible alarm can be very useful in situations where an operator cannot look at the screen continuously during some test. A beep for every warning or notification, however, can be downright annoying. So use sounds with some thought to how often they will go off.

Beep.vi

Beep.vi (Programming>>Graphics & Sound palette) gives you access to the operating system's beep.

LabVIEW also has the ability to record and playback sound files, using the WAVE (.wav) file format. Use the functions found in the Programming>>Graphics & Sound >> Sound subpalette (shown in Figures 13.159 and 13.160) to perform these operations and browse the sound examples with LabVIEW to get a feel for how they work. Note that the Sound palette and VIs are slightly different in Windows than they are in Linux and Mac OS X.