Building LabVIEW User Interfaces

Concept

A user interface gives users a way to interact with the source code. It allows the user to change the values passed to the source code and see the data that the source code computes. In LabVIEW, the user interface is the front panel. It is important to identify the inputs and outputs of a software development problem during the design phase of the development method. This identification leads directly to the design of the front panel window.

You can acquire the inputs of the problem using the following methods:

1.       Acquiring from a device such as a data acquisition device or multimeter

2.       Reading directly from a file

3.       Manipulating controls

You can display the outputs of the problem with indicators such as graphs, charts, or LEDs, or you can log the outputs to a file. You can also output data to a device using signal generation.

Designing Controls and Indicators

When choosing controls and indicators, make sure that they are appropriate for the task you want to perform. For example, when you want to determine the frequency of a sine wave, choose a dial control, and when you want to display temperature, choose a thermometer indicator.

Labels and Captions

Make sure to label controls and indicators clearly. These labels help users identify the purpose of each control and indicator. Also, clear labeling helps you document your code on the block diagram. Control and indicator labels correspond to the names of terminals on the block diagram.

Captions help you describe a front panel control. They do not appear on the block diagram. With captions, you can document the user interface without cluttering the block diagram with additional text. Open a blank VI and make a label and a caption for a thermometer indicator.

1.       Put the thermometer indicator on the block diagram.

2.       By default, only the label is visible. To change the label, double-click it and type in a new label that is short but descriptive.

3.       Right-click the thermometer indicator and select Properties.

In the Properties dialog box, put a check in the Visible checkbox under the Caption section of the Appearance tab. Type Indoor Temperature in the Caption text box. Click OK to save the changes and exit the dialog box. You can also change the label from the Properties dialog box.

4.       Notice that the caption now appears on the front panel above the indicator. Switch to the block diagram and note that only the label appears.

Control and Indicator Options

The front panel offers many options for controls and indicators that you can view by right-clicking on the thermometer indicator and browsing through the shortcut menu and submenus. Complete the following steps to create a temperature control and set the default value.  

1.       Put a numeric control on the front panel beneath the thermometer indicator. Make a caption for it that says “Indoor Temperature Control.”

2.        Enter the desired value.

3.        Right-click the control and select Data Operations»Make Current Value Default from the shortcut menu.

4.       Because you have a good caption for the temperature control, hide the label by right-clicking the control and selecting Visible Items»Label from the shortcut menu. Do the same for the thermometer indicator.

Using Color

The proper use of color can improve the appearance and functionality of your user interface. Using too many colors, however, can result in color clashes that cause the user interface to look too busy and distracting. LabVIEW provides a color picker that can help with determining the appropriate colors. Select the Coloring tool from the tools palette and right-click an object or workspace to display the color picker. With the color picker open, you can move your cursor to different colors and watch the objects or workspace change as you move over different colors.  

The top of the color picker contains a grayscale spectrum and a box you can use to create transparent objects. The second spectrum contains muted colors that are well-suited for backgrounds and front panel objects. The third spectrum contains colors that are well-suited for highlights. Moving your cursor vertically from the background colors to the highlight colors helps you select appropriate highlight colors for a specific background color.

Spacing and Alignment

White space and alignment are probably the most important techniques for grouping and separation; the more items that your eye can find on a line, the cleaner and more cohesive the organization seems. When items are on a line, the eye follows the line from left to right or top to bottom. This is related to the script direction. Although some cultures view items right to left, almost all follow top to bottom. When you design the front panel, consider how users interact logically with the VI and group controls and indicators. If several controls are related, add a decorative border around them or put them in a cluster.

Centered items are less orderly than items aligned to the left or right. A band of white space on one side acts as a very strong means of alignment. Centered items typically have ragged edges, and users cannot determine the order as easily.

Placing front panel objects too close together can be problematic. Leave some blank space between objects to make the front panel easier to read. Blank space also prevents users from accidentally clicking the wrong control or button.

In general, use common sense and develop your own style of design for your user interfaces. Also refer to these guidelines to help you successfully create user-friendly front panels. Notice the difference between the following two simple user interfaces. Proper labeling, alignment, and spacing can make a big difference.

User Interface Tips and Tools

Some of the built-in LabVIEW tools for creating user-friendly front panel windows include tab controls and decorations.

Tab Controls

Physical instruments usually have effective user interfaces. Borrow heavily from their design principles but use smaller or more efficient controls, such as ring controls or tab controls, where appropriate. Use tab controls to overlap front panel controls and indicators in a smaller area.

To add more pages to a tab control, right-click a tab and select Add Page Before or Add Page After from the shortcut menu. Relabel the tabs with the Labeling tool and place front panel objects on the appropriate pages. The terminals for these objects are available on the block diagram, as are terminals for any other front panel object (except decorations). Complete the following steps to create a tab control with a thermometer indicator, temperature control, fan speed control, and sector alarm for a building with three sectors. Start with a new VI.

1.       Create a new VI by selecting File»New VI from the menu bar.

2.       Add one round LED and label it Sector 1 Alarm, add one thermometer indicator and label it Sector Temperature, and add one dial control and label it Fan Speed Control. Your front panel should look like this. (This tutorial does not include examples featuring block diagrams.)

3.       Add a tab control from the Controls palette as shown.

4.       Expand the tab control and add one additional tab after the second tab by right-clicking the tab and selecting Add Page After. Label each tab appropriately by double-clicking and typing a label for each of the three sectors of the building.

5.       Add the various controls and indicators to each tab. Remember you can hold <Ctr> while you click and drag an object to copy it. Arrange the objects logically and rescale them if needed. Your VI may look something like this.

Decorations

Use the decorations located on the Decorations subpalette to group or separate objects on a front panel with boxes, lines, or arrows. The objects on the Decorations palette do not display data or show up on the block diagram. Try adding some decorations to the front panel you just made.

It is important to create visually appealing and organized user interfaces.  Since the user interface is generally what the end user will be working with, it is very important to make it as straight forward and intuitive as possible.