You will now create a Web application to monitor the Measurement Studio Signal Filtering Windows application.
- Select File»New»Web Site. The New Web Site dialog box launches.
- In the Templates window, select NI ASP.NET Web Site. For the Location, select File System and specify a file path you wish to save to by clicking Browse and navigating to the directory of your choice.
- Use the drop-down box to select Visual C# or Visual Basic, depending on your language preference.
- Click OK. The Measurement Studio ASP.NET Web Site Wizard launches.
- Select Analysis, Network Variable Communication, and Web Forms User Interface Controls. This will automatically add the appropriate Measurement Studio assemblies to your project.
Note The exact name of the Analysis library depends on which edition of Measurement Studio is installed.
- Click Finish to display Default.aspx in the Web Forms Designer.
- You can rename the title of your Web page. Click inside the <title> tag and rename the title to Signal Filtering.
Configuring Network Variables for Web Applications
Click Design in the lower left corner to switch from Source View to Design View.
Select View»Toolbox to display the Toolbox. Over 15 Web Forms controls are available with Measurement Studio.
- Expand the Measurement Studio group in the Toolbox.
- Select the NetworkVariableDataSource control in the Toolbox and drag and drop it on the form. The Web Forms NetworkVariableDataSource can bind to the same network variables used in a Windows Forms application.
- Click the NetworkVariableDataSource smart tag and select Edit Bindings to launch the NetworkVariableBinding Collection Editor dialog box.
Tip To access the smart tag, left click on a control to select it and then left click on the arrow button in the upper right corner of the control.
- Select Add.
- Add the OriginalSignal network variable by setting the following options on the NetworkVariableBinding Collection Editor: select Read for BindingMode, Object for BindType, set DefaultReadValue to 0, and type OriginalSignal for Name.
- For the Location, browse to the \\localhost\Signal Filtering\OriginalSignal path in the Select Network Item dialog box. Click OK.
- Add the FilteredSignal network variable by setting the following options on the NetworkVariableBinding Collection Editor: select Read for BindingMode, Object for BindType, set DefaultReadValue to 0, and type FilteredSignal for Name.
- For the Location, browse to the \\localhost\Signal Filtering\FilteredSignal path in the Select Network Item dialog box. Click OK.
- Add the Cutoff network variable by setting the following options on the NetworkVariableBinding Collection Editor: select ReadWrite for BindingMode, Object for BindType, set DefaultReadValue to 0, and type Cutoff for Name.
- For the Location, browse to the \\localhost\Signal Filtering\Cutoff path in the Select Network Item dialog box. Click OK.
Adding ASP.NET Controls to the Web Interface
- Expand the Data group on the Toolbox. Select the FormView control and drag and drop it on the Designer.
- Click the FormView smart tag and select NetworkVariableDataSource1 from the Choose Data Source drop-down list.
Note You can bind controls to network variables by using the Microsoft Form View control. The Form View control is a container that binds to a set of network variables, and each control that is placed in the Form View control can access the associated network variable.
- On the FormView smart tag, select Edit Templates. Select Item Template from the Display drop-down list.
Note The controls placed in the Item Template will be displayed on the Web site. You can drag and drop the ASP.NET controls you want to use into the template view.
- Delete the default contents of the Item Template. To better visualize measurement data, we will use the Measurement Studio graph and slide controls.
- Select the WaveformGraph control in the toolbox and drag and drop it on the form.
- Click the WaveformGraph smart tag and select Edit DataBindings to launch the NetworkVariableBinding Collection Editor dialog box.
- Enter Original Signal for the Caption.
- In the Edit Bindings Collection Editor dialog box, bind the waveform graph to a network variable by setting the Bound to option to OriginalSignal from the drop-down list.
- Click OK.
- Repeat steps 5 through steps 9, but bind WaveformGraph2 to FilteredSignal and enter Filtered Signal for the Caption.
- The following image shows the final result.
Setting Up the Edit FormView
- Set the Display option to EditItemTemplate on the FormView smart tag .
Note You can non-programmatically write to network variables with controls placed in the EditTemplate view. You can have controls write to network variables and controls that read from network variables all on the same view if you programmatically bind the controls to network variables.
Delete the text boxes from the EditItemTemplate view.
- Drag a Slide from the Measurement Studio group in the Toolbox onto the EditItemTemplate, next to Cutoff label.
- Click on the slide smart tag and select Invert Orientation.
- Change the Range of the slide to 0,50.
Click the slide smart tag and select Edit DataBindings to launch the NetworkVariableBinding Collection Editor dialog box.
In the Edit Bindings Collection Editor dialog box, bind the slide to a network variable by setting the Bound to option to Cutoff from the drop-down list.
Select OK. The following image shows the final result.
Select End Template Editing on the FormView smart tag.
Select the AutoRefresh control in the Toolbox and drag and drop it on the form. You can use the AutoRefresh control to update a Web control or a group of Web controls on the client at a specified interval.
Click the AutoRefresh smart tag and check Enabled. Set Interval to 00:00:01.000 to refresh the page every second. Select Edit Default Refresh Items to launch the RefreshItem Collection Editor dialog box.
Select Add. Enter WaveformGraph1 for the ItemID.
Select Add. Enter WaveformGraph2 for the ItemID.
Select Add. Enter Slide1 for the ItemID and click OK.
The following image shows the final FormView control.
Running the Web Site
- Select File»Save Default.aspx to save your application.
- Select Debug»Start Without Debugging to run the application. This will launch your program in your default Web browser.
Note Visual Studio includes a built-in test Web server. When you run the application, the built-in ASP .NET
Web server loads the previously designed Web site.
Run the Signal Filtering Windows application.
Select the Edit button on the Web site.
- Change the value of the slide to 20. This sets the cutoff frequency displayed in the Signal Filtering Windows application from the web.filter in the Windows Form from the Web Form.
2. Next Steps
- View the 90-Second Network Variable Express Demo
- View a Webcast on Creating Remote Monitoring and Control Applications with ASP .NET and Network Variables
- See the Performance Benefits of ASP .NET AJAX and Try For Yourself
- Visit the Measurement Studio Resource Page