Getting Started with the LabVIEW Web UI Builder, Part 1: Creating and Running a VI

You use the LabVIEW Web UI Builder to design thin-client applications. These applications allow other users to view Web service data over a network without having to install LabVIEW on their computers. By completing the exercises in this tutorial, you will become familiar with the environment, functionality, and workflow of the LabVIEW Web UI Builder.

In Part 1 of this tutorial, contained in this topic, you create and run a VI. The front panel of this VI is the user interface for data coming from a Web service. The block diagram of this VI is the code that actually retrieves data from the Web service. This part of the tutorial requires that your PC have an operating system and Web browser that the Web UI Builder supports. You also must install Microsoft Silverlight in order to launch the LabVIEW Web UI Builder.

In Part 2 of this tutorial, you build the VI as a thin-client application. You also deploy this application to an execution target, called the application host, that is running the LabVIEW Web server. Finally, you connect to this application as if you were another user. This part of the tutorial requires that you have LabVIEW 2009 or later running on your PC. LabVIEW provides the Web server that hosts the thin-client application. This part also requires that you have another computer connected to the same network as your PC. This second PC also must have Silverlight installed.

Refer to Basics: The LabVIEW Web UI Builder Workflow topic for an overview of the process of using the Web UI Builder.

Exploring the LabVIEW Web UI Builder

The first step is exploring the LabVIEW Web UI Builder working environment.

1. Launch the editor from the Product Information for NI LabVIEW Web UI Builder or the NI LabVIEW Web UI Builder Developer Resources page.
2. Take a moment to familiarize yourself with the working environment:
   

   

   The previous image shows the following components of the LabVIEW Web UI Builder editor:
   

1. Quick Access Toolbar—Displays buttons for commonly-used actions like creating a new VI, saving the current VI, and so on. Move the cursor over each button to display a description of that button.
2. Application Button—Displays options that relate to the LabVIEW Web UI Builder as a whole.
3. Ribbon tabs—Displays common operations you can perform on a VI or project. New tabs appear when you select objects, such as front panel controls, that you can configure. In the previous image, the Project tab is selected.
4. Groups—Subdivisions of ribbon tabs that organize options by the operations they perform. From left to right the groups on the Project tab are Files, Import, Project, and Build.
5. Palette pane—Displays palette items, such as front panel control and indicators.
6. Working area—Displays the front panel, block diagram, or VI icon that you are editing or running. Use the tabs at the top of the working area to switch between open documents. In the previous image, this area displays the Welcome tab.
7. Project pane—Displays items, such as VIs and Web service references, in the current project. Each VI in the LabVIEW Web UI Builder is associated with one or more projects.
8. Pane tabs—Use these tabs to display panes, such as the Errors & Warnings pane.

   Note  To show and hide panes, click the View Panes icon, which is located on the View tab in the Workspace group.

9. Status bar—Displays a slider for zooming in and out of the working area. You also can press the <Ctrl> key and scroll the mouse wheel to zoom. This option is available only when you display a VI or VI icon in the working area.
10. Properties pane—Displays the properties available for the front panel or the front panel object you select.

Creating a VI and Building the Front Panel

1. On the Quick Access Toolbar, click New VI.
   

   

   
   A new, blank front panel appears below the ribbon. Notice this front panel is attached to a tab labeled Untitled, which is the current name of the VI.
2. If you do not see the Palette pane to the left of the working area, click the Palette tab on the left edge of the window.
   

   

   
   This pane displays a list of objects you can add to the front panel.

   Note  If you do not see the Palette tab, click the View Panes icon, which is located on the View tab in the Workspace group, and select Palette from the drop-down list.

3. Create the three numeric indicators that will display the Web service data.
   1. In the Palette pane, click Numerics. A list of numeric front panel objects appears.
   2. Click Numeric Indicator and move the cursor over the front panel. Notice that a numeric indicator is pinned to the cursor.
   3. Click the front panel to add the numeric indicator to the front panel. The Web UI Builder selects this object by default, which causes a new ribbon tab to appear. You use this tab to configure commonly-used properties of controls and indicators, such as the data type and numeric format. For now, leave the values at their default settings.
   4. Press and hold the <Ctrl> key and drag the indicator to a new place on the front panel to create a copy of the indicator.
   5. Repeat step d. The front panel now is comprised of three numeric indicators.
4. Double-click the label of the first numeric indicator you created and enter Hours as the new name.
5. Change the labels of the remaining indicators to Minutes and Seconds, respectively.
6. Arrange the numeric indicators to resemble the following image:
   

   

   
   Notice that as you drag the indicators around, they snap to the edges of the other indicators. This behavior helps you align front panel objects. You can change this behavior on the View tab in the Alignment group.

Saving the Project and VI

The next step is saving the project and the VI. National Instruments recommends saving files at regular intervals to avoid losing work.

1. On the Quick Access Toolbar, click Save All.
   

   

   
   The Web UI Builder displays a dialog box to save the project and VI.
2. Enter WebUIBuilderTutorial in the Project Name text box.
3. Enter Clock in the Filename text box and click the Save button. The Web UI Builder saves the VI and returns to the working environment. Notice the Untitled tab now displays the name and extension of the VI, Clock.vix.

The project and VI are now saved in NI Web Storage. You can access these files at any time by logging in to your NI Hosted Services account.

Importing a Web Service

Recall that the VI you are creating is designed to be the user interface for data coming from a Web service. For this tutorial, National Instruments provides a sample Web service that publishes clock data. This Web service simulates measurements being made on a device. In a real-world application, you would run a Web service on an execution target, such as a real-time controller. This Web service would be publishing data it receives from a device.

1. On the Project tab of the ribbon, click Import Web Service to display the Import Web Service dialog box.
2. Enter http://nobel.niwsc.com/ts-1.0/ in the Server URL text box.
3. Click the Connect button. The Web UI Builder populates the Web Service drop-down list with Web services available on the server.
4. Select TimeServer from the Web Service drop-down list.
5. Click the Import button. The Web UI Builder queries the Web service and displays the status of the query in the Import Web Service dialog box. This dialog box displays a success message when the Web UI Builder completes the import operation.
6. Click the Close button.
7. In the Project pane, expand the TimeServer item to display the VIs the Web UI Builder generates to help you call a LabVIEW Web service.
8. Click Save All to save the project and VI.

Building the Block Diagram

The next step is creating the block diagram code that calls the Web service and displays Web service data on the front panel. You will use the currentTime VI you just generated.

1. Click Block Diagram , located in the upper-left corner of the working area, to switch to the block diagram. You also can press the <Ctrl+E> keys to switch between the front panel and block diagram.
2. Display the Project pane and drag currentTime.vix item to the block diagram.
3. Note the upper-left corner of the diagram contains three parameters, Hours, Minutes, and Seconds. Drag these items to the block diagram to the right of the currentTime VI.
4. Wire the outputs of the currentTime VI to the block diagram parameters.
   1. Move the cursor over the VI icon to display the inputs and outputs of the VI.
   2. Move the cursor over the circle at each output. Notice the Web UI Builder highlights each output as you move the cursor over it. The cursor also changes to the wiring tool.
   3. Click the circle at the hour output to begin wiring.
   4. Move the cursor over the Hours parameter. Notice a circle appears to the left of the parameter.
   5. Click the parameter to complete the wire. The block diagram now resembles the following image:

      

      Note  If you make a mistake during the wiring operation, press <Esc> to cancel the operation. You also can select a misplaced wire and press <Delete> to remove it.

   6. Wire the minute output to the Minutes parameter.
   7. Wire the second output to the Seconds parameter. The block diagram now resembles the following figure:
      

      

      
      If you ran the VI now, the front panel would display only one data point. The next step is modifying the VI to display data points continually. You make this modification by using a While Loop.
5. Enclose the code in a While Loop.
   1. In the Palette pane, select Structures»While Loop.
   2. Move the cursor over the block diagram. Notice a While Loop is pinned to the cursor.
   3. Click the block diagram to the upper-left of the currentTime VI and hold the mouse button down.
   4. Drag the cursor to the lower-right of the existing code. The While Loop expands to enclose the existing code.
   5. Release the mouse button to add the While Loop around the existing code. The block diagram now resembles the following figure:
      

      

   6. In the Palette pane, select Boolean»Boolean Terminal and place the terminal to the left of the conditional terminal.
   7. In the mini-toolbar that appears, click Change Terminal Direction and select Read from the drop-down list.
   8. Wire the Boolean terminal to the conditional terminal inside the While Loop.
   9. Switch to the front panel. Notice the Boolean control docked to the left side of the working area.
   10. Place the Boolean control below the Seconds indicator.
   11. In the Show group of the Design tab of the ribbon, remove the checkmark from the Label checkbox to hide the label.

       Note  If you ran the VI now, the While Loop would cause the VI to ping the Web service as fast as possible. This behavior could overload the Web service host and slow down traffic for all users. To address this issue, National Instruments recommends using the Wait (ms) function to delay the execution of the code in the loop.

6. Control the timing of the While Loop.
   1. Switch to the block diagram.
   2. In the Palette pane, select Timing»Wait (ms) and add this function to the block diagram inside the While Loop.
   3. Move the cursor over the Wait (ms) function until the circles appear.
   4. Click the milliseconds to wait input to display the mini-toolbar, and select Create Constant  .
   5. Click to place the numeric constant and enter 1000 as the value. The block diagram now resembles the following image:

      

      
      The VI now is ready to test.
7. Save the VI.

Testing the VI in the LabVIEW Web UI Builder Editor

The next step is testing the VI.

1. Run the VI.
2. Notice the values of the front panel controls change to display the data from the Web service.
3. Click the Stop button on the front panel to stop the VI.

Summary

Part 1 is complete. In this part, you learned about the following concepts and tasks:

• Launching the LabVIEW Web UI Builder
• Navigating the LabVIEW Web UI Builder
• Adding objects to the front panel and block diagram
• Importing a Web service
• Wiring terminals on the block diagram
• Saving VIs and projects
• Testing VIs by running them in the editor

Where to Go from Here

In Part 2 of this tutorial, you build the VI as a thin-client application and deploy it to the application host.