‘User Interface’ Category Archives


LabVIEW 2018

by Christina in LabVIEW, User Interface

I hope NIWeek 2018 was as fun and exciting for all the attendees as it was for me! If you weren’t able to attend, you can still watch the keynotes online.

One of the big announcements was, of course, LabVIEW 2018. There are many new features, but here are the headliners:

  • Automate software building and execution with the Command Line Interface
  • Call Python code directly with the Python node
  • Prototype FPGA code faster with expanded floating-point support and the 64-bit version of the LabVIEW FPGA Module

My personal favorite new feature, though, is the new style of controls!

NXG Style Controls

The NXG Style palette contains controls with a similar visual styling to those in LabVIEW NXG.

If you haven’t heard of LabVIEW NXG, it’s software that leverages familiar paradigms from LabVIEW 2018 and earlier, but it emphasizes faster automation of measurements and tests through tighter integration with hardware and data. It doesn’t (yet) support all of the G language features and measurement devices as LabVIEW, but it’s expanding with each release!

Because the default panel color in LabVIEW NXG is white, the LabVIEW 2018 NXG Style controls look best on a white background.

And, yes, the NXG style (unlike the Silver style) includes a tab control!

For those of you who like to customize control appearance, check out the NXG Style Text Button. It has hover states like the System button, but it’s colorable!

NXG Style Button in Control Editor

The NXG Style palette is focused on user interfaces, so not all controls are available in it. If you need one that’s not available, let me know so we can try to add it in a future release!

If you want to use NXG style controls all the time, you can make it the default style in Tools>>Options in the Front Panel category under Control Style for New VIs. You can similarly make it the default style for an existing VI using VI Properties and the setting in the Editor Options category.

To make NXG Style controls easily accessible in your right-click palettes, pin a palette and drag the NXG Style category to the top using the “drag” area on the left edge of the category heading.

Palette Categories

Another small but delightful feature in LabVIEW 2018: you can right-click on a target in your project and create a Type Definition. No more having to remember to set Custom Controls to be type definitions before you save!

New Type Definition menu

What new feature has you most excited to upgrade to LabVIEW 2018?


Replace and Paste-Replace

by Christina in "Hidden" Features, LabVIEW, User Interface

There are multiple ways to replace things in your VIs. Knowing your different Replace options can help you choose the one that best fits your needs.

Replace Shortcut Menu

On the front panel, you can right-click on a control and choose one of the options from the Replace menu. This method will preserve some things about the original control. Unfortunately, it’s not obvious what things will be preserved. In most cases, LabVIEW will attempt to preserve the label, caption, value and dataflow direction (control/indicator). It may also try to preserve other things, such as the numeric representation, size or color. It’s hard to say what will be preserved without actually doing the replace.

Luckily, you have Undo if a right-click replace operation doesn’t do you what you want. But what do you try next?

Paste-Replace is a method of replacing a control without preserving any of its appearance attributes. It will, however, preserve things like connector pane placement, wire connection and associated block diagram elements (e.g. local variables and implicitly-linked Property/Method nodes). (By the way, right-click Replace preserves these things as well).

To use Paste-Replace:

  1. Place the control you want.
  2. Use Edit>>Cut (from the menu, or via keyboard shortcut) to put it on the clipboard.
  3. Select the control you want to replace.
  4. Use Edit>>Paste.

Note that Paste-Replace is not available when editing the LabVIEW block diagram. On diagrams, you almost always use right-click Replace. However, some structures (such as loops) have special Replace menu options to replace them with other structures without losing their contents.

Read the rest of this entry »


NI LabVIEW Web UI Builder

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 http://www.ni.com/uibuilder. We would appreciate any feedback you might have.


LabVIEW Radio Buttons without Frames

by Christina in LabVIEW, User Interface

Radio Button Group Example

Radio Buttons

The intended purpose of a radio button group is to select one (and only one) option from a set of choices. Microsoft has a detailed article on radio button usage guidelines on MSDN. (Although I should note that I don’t agree with all their guidelines).

LabVIEW introduced the radio buttons control in version 7.1. [Before then you had to write diagram code to ensure that only one radio button in a group was TRUE at a time, which was very annoying. Individual radio buttons are still in the palettes and I sometimes see them being used inappropriately, e.g. in place of a checkbox].

Unfortunately, the radio buttons control is somewhat confusing to new users. Here are the basics:

  • The group of radio buttons is a single control, with a single terminal on the diagram. Like a cluster, you don’t get terminals for the controls inside the group.
  • The radio buttons value is an enumeration of the contained button labels.
  • Similar to a cluster, you add radio buttons by placing them inside the bounds of the group. (You can also right-click on the group border and select Add Radio Button).

Read the rest of this entry »


Custom Toolbars for LabVIEW VIs

by Christina in LabVIEW, User Interface

Have you ever wanted to make a custom toolbar on a VI?

I put together a small example VI to show how this might be done: Toolbar Example

Read the rest of this entry »


Showing and Hiding Decorations Programmatically

by Christina in LabVIEW, User Interface

Grouping with Recessed Frames

When laying out a panel, you sometimes want to “group” elements together. You can do this by leaving a little empty space around the group. In some cases, however, it’s better to use a decoration such as the Recessed Frame, especially if you want to label the group.

Unfortunately, if you need to show/hide (or move) the group programmatically, you’ll find that you can’t get VI server properties for a decoration like you can for a control.

There are numerous techniques for showing and hiding decorations programmatically. I’ll go over four of them here. Read the rest of this entry »


LabVIEW Splitter Bars

by Christina in LabVIEW, User Interface

VI with splitter bars

I recently saw a discussion on info-labview about scaling objects when you resize the panel.

There are several options for how to do this, with different strengths and weaknesses.

  1. Handle the panel resize event and programmatically resize and position everything. Flexible and powerful, but it’s a lot of work and the resulting code is brittle (which means it “breaks” easily – whenever you change your UI, you have to update your diagram).
  2. Scale all objects on front panel as the window resizes (in VI Properties>>Window Size). Easy, but rarely does what you want. In most cases, you probably want some (but not all) of the controls to scale with the window. Also, this option has problems when the panel gets very small and then large again in that controls don’t return to their original size and position. If you use this setting, make sure you set a reasonable minimum panel size in VI Properties.
  3. Scale Object with Pane (in control’s right-click menu). Easy, but limited to a single scaling object per panel unless you use splitter bars.
  4. Splitter bars combined with object scaling options. This is a fairly easy, powerful technique. I’ll go over this one in more detail.

Read the rest of this entry »


LabVIEW Boolean Control with Labeled States

by Christina in "Hidden" Features, LabVIEW, User Interface

Comments Off on LabVIEW Boolean Control with Labeled States Comments

A friend asked me “what is the best control to use for a Boolean subVI input that has special true/false values, e.g. enabled/disabled?” She was dissatisfied with the “Enabled?” checkbox approach because it didn’t give an explicit name to the other state. Similarly, using the boolean text part with a switch only showed the name of the current state. She wanted a switch that showed the labels for both states.

I gave her this control and asked if it was what she was looking for. She said that it was!

She had known that you could put free labels next to the switch, but not that you could make them “owned” by the control.

You can add decorative elements (e.g. images, decorations, and text) to a control using the Control Editor (Edit>>Customize Control or right-click Advanced>>Customize). When you add them in the Control Editor, they become parts of the control. Then when you use the control on a front panel, it acts as a single item when moving, deleting, etc.

Now, another thing you should consider when making a subVI input with named states is whether it would be better to use an enumeration. This can make the diagram that calls the subVI easier to read. If you do want an enumeration, however, I highly recommend you make it a type definition as well. That way you can edit it later and automatically update all the places it’s used.


LabVIEW Graph Annotations

by Christina in LabVIEW, User Interface

I recently talked to a student who would print out his LabVIEW graphs for his homework and then circle and label a point on them before handing them in.

While that approach certainly gets the job done, there is a simple way to label important graph points within LabVIEW: annotations.

LabVIEW Graph with Annotation

You can right-click on a LabVIEW graph at edit time and select Data Operations>Create Annotation. (On a graph in a running VI, Create Annotation is in the top-level right-click menu).

You’ll get a dialog that lets you define the annotation name and some attributes. After you dismiss this dialog and create the annotation, you can right-click on it and change other attributes (e.g. color). (Important note: right-click on the annotation point, not the label).

Did you know that the LabVIEW Help is available on ni.com? You can read more about Graph Annotations there, and also rate the help topic and leave comments that help NI improve the documentation in future versions!


Making Prettier LabVIEW Graphs

by Christina in LabVIEW, User Interface

Two LabVIEW Graphs with Different Styling

I’d like to feature another video from Simon Hogg’s presentation “Creating Quality UIs with NI LabVIEW – Developer Days 2010 Presentation.”

Here’s the video: LabVIEW UI Tips – Recoloring Graphs (YouTube)

In the video, Simon makes a LabVIEW graph look more like one you might find in Microsoft Office.

Here are the steps demonstrated in the video, along with my additional comments:

  1. Place a graph on a front panel. I usually customize controls from the Classic palette, but in this case the Modern one works as well.
  2. Color any parts you want to “disappear” to Transparent color using the Set Color (paintbrush) tool.
  3. Use the Properties dialog:
    • to show/hide parts of the graph;
    • to change the plot colors, line widths, point styles and fills;
    • to change the colors of the major and minor grid lines. To hide grid lines, color them transparent.
  4. Color the background of the plot area using the Set Color (paintbrush) tool.
  5. Set the plots to anti-aliased, if desired. This makes the plots smooth. Set this by right-clicking on the plot in the Plot Legend.

Some people are surprised by how much customization of plots is possible in LabVIEW. I have seen some really neat versions of various industry-specific graphs over the years. Do you have one to share? Send it to me and I’ll make a gallery!