NI LabVIEW Web UI Builder

Nov 5th, 2010 by Christina in User Interface

Please join me in welcoming guest blogger Scott Postma, Senior Software User Interaction Designer in the LabVIEW R&D group at National Instruments!

I’ve invited him to Eyes on VIs to tell everyone about the latest companion product for LabVIEW, the NI LabVIEW Web UI Builder. If you have an application that uses web services and you want to make a web-based user interface for it, you might be interested in this Early Access release. Not only does it make web-based UIs… the editor itself runs entirely in the web browser!

Take it away, Scott!

Christina invited me to share a few unique features that we’re introducing with LabVIEW Web UI Builder.

About LabVIEW Web UI Builder

Imagine you’re looking to quickly create a thin client user interface on Windows or Real-Time targets.  Perhaps you are looking to deploy a remote system to monitor and control from anywhere, anytime using a web browser running Silverlight.  There are plenty of options around, but none of them offer the ability to access web services while leveraging your existing knowledge of LabVIEW programming.  Enter LabVIEW Web UI Builder.

Sample Applications Created by LabVIEW Web UI Builder

NI LabVIEW Web UI Builder Sample Application

A Few Features that We Are Introducing

A while back, we asked ourselves how LabVIEW might behave as a web based UI builder.  So we began designing and iterating.  Countless iterations have given LabVIEW Web UI Builder a new and unique experience that is still complementary to LabVIEW.  We have learned a lot from our iterations.  In fact, we are still gathering data to help grow it into a final release.  Here is a screenshot of the development environment along with a few features:

Development Environment

NI LabVIEW Web UI Builder Development Environment

New Front Panel Control and Theme Designs

NI LabVIEW Web UI Builder Controls and Themes

The Ribbon

The most obvious feature of WUIB is the ribbon.  It’s located at the top of the application and houses the commands you use 80% of the time. We selected the ribbon for its extensibility and discoverability.

NI LabVIEW Web UI Builder Ribbon

Contextual adorners

Context adorners appear when blocks or Front Panel controls are selected. This is where you will find your most frequently used commands.  We hope this will complement the right mouse click menu when it becomes supported.

Contextual Adorners


Zooming makes it easy to navigate your diagram, perform wiring operations, or view your Front Panel and Block Diagram holistically. By default, you can use the slider at the bottom right or hold down the control key and scroll your mouse wheel to zoom.

NI LabVIEW Web UI Builder Zooming

The Palette

The palette is docked on the left by default, but you can place it anywhere you would like.

NI LabVIEW Web UI Builder Palette

A Multiple Document Interface

Each document has its own tab in the IDE.

Document tabs

The Unused Items Tray

After dropping a Front Panel control or indicator, its corresponding block on the diagram becomes is easy to find in the Unused Items tray.

Unused Items Tray

We’re introducing a lot of useful concepts with LabVIEW Web UI Builder.

Give it a try at We would appreciate any feedback you might have.



Comments have been closed for this post.