WebVIs: Developing your Web-based LabVIEW User Interface

In this video, you will learn about WebVIs, which are part of the LabVIEW NXG Web Module. You will learn how to make a Web Application and a WebVI from scratch, what components comprise a WebVI, see some of the high-performance engineering widgets that are available, see how to bring in other content from the web, and how to use CSS to customize the WebVI to a certain style.

Software Requirements

This video references code that you can use to follow along. To run this example code, you will need LabVIEW NXG 2.0 or later and the LabVIEW NXG Web Module. You can download the required installers and code from the links below. 

• Download the LabVIEW NXG Web Module
• Download Sample Code for this Video

Concepts Covered in this Video

• LabVIEW NXG Web Module—The LabVIEW NXG Web Module expands the LabVIEW systems engineering software to enable the creation of engineering user interfaces (UIs) that run in any modern web browser without plug-ins or installers. Engineers and scientists can use the LabVIEW NXG Web Module to quickly visualize data from distributed systems through drag and drop engineering widgets, intuitive communication mechanisms, and secure hosting, all based on industry standard technologies.  
• WebVIs—Use WebVIs to design UIs with standard web technologies (HTML, CSS, JavaScript) through drag-and-drop high-performance engineering widgets. Leverage the openness of WebVIs to import content from across the internet or to export code to mainstream web development tools. Program WebVIs in a similar manner to programming normal VIs, but with the added HTML tab that allows custom HTML modifications.
• Web Application—Use the WebApp.GCOMP document to define the application output. This document includes the WebVI document in the project hierarchy.
• High-Performance Engineering Widgets—Standard user interface widgets such as gauges, sliders, progress bars, buttons, LEDs, graphs, and charts are available on the WebVI panel. These widgets are optimized for high performance data visualization. Specifically, these widgets can support high-precision data types, such as doubles, high update rates, and zoom/pan/ and cursor functionality.  See Examples.
• How to bring in other content from the web—Modify the HTML to include a Google Map using an iframe. For other ideas on bringing in 3rd party web content into a WebVI, See Examples.
• How to use CSS for customizing the WebVI—Modify the background color of the WebVI using CSS, manually and through an included CSS file. For other ways to change style of the WebVI with CSS, See Examples.  
• How to develop for multiple devices—Adjust the layout of the WebVI panel for use on different devices such as a desktop, smart phone, or tablet. Note that at this time, the layout of the WebVI panel does not automatically adjust to the client-side device.