Basic LabVIEW UI Control Customization

Basic LabVIEW UI Control Customization

A common gripe about using LabVIEW is that the user-interface (UI) is not very attractive. Well, that is only true if you do not know how to customize LabVIEW controls to make them look truly modern and visually appealing.

Fortunately, there is a way to change the default LabVIEW controls!

While National Instruments and many other LabVIEW developers have documented this process before, for completeness, I will go through the basics with lots of screenshots before posting some of my tips for more advanced control customization techniques.

Customizing Controls

To customize any control, just right-click and then select Customize… in the Advanced menu.

Customizing Control Menu

The Control editing window will pop up with just the control you selected.

There is a decent amount to discuss in this view, but the most important thing is the Wrench button in the Toolbar.

Edit Mode

You will notice that by clicking the Wrench, you can enter Customize Mode. Entering this mode exposes all the "parts" of the control so you can edit each individually. 

The wrench also changes to Tweezers, which symbolize how you can manipulate each individual part of the control. With the Tweezers, you have the power to customize just about anything to do with the Control or Indicator.

Edit Mode

Once in this view, the easiest way to see all the different parts is to open the Parts Window, which is an option under the Window menu bar.

Show Parts Window

As you can see in the image below, the modern Numeric Control has 6 parts:

  • Name Label
  • Numeric Text
  • Increment
  • Decrement
  • Radix
  • Frame

You can do simple operations such as Resizing and Recoloring each part in this window, but the real customization comes from replacing individual parts.

Show Parts Window Elements

Replacing Individual Parts

Let’s say I want to replace the 3D frame with a flat box for a more modern appearance. Luckily, a Flat Box decoration already exists in the Modern Decorations palette.

  1. Drop a Flat Box onto the Control Editing Interface.
  2. Size the Flat Box decoration to the same size as the frame. 
  3. Copy the decoration.
  4. Paste it over the frame. 

Decoration Replacement

The decoration has now become the frame! 

Finish modernizing the frame by:

  1. Make the Numeric Text part transparent.
  2. Recolor the new frame to better colors. Remember, colors are very important to the overall look of a UI.

You will already notice how much nicer this control looks.

Partially Customized Control

You can do the same thing with the other control parts, most notably the Increment and Decrement buttons. 

What you will notice when you right-click on the Increment or Decrement button is that it is really just a two state Boolean. It has two picture images: one for the pressed state and one from the depressed state. You will also notice that in that popup menu, there is an option to import a picture from file

All you have to do to replace the default increment/decrement images is:

  1. Select the picture item you want to change. 
  2. Click the Import Picture from File… option in the popup menu.

You might also want to Import Picture from File at Same Size… if you are worried about resizing issues. Note that LabVIEW does not always scale your images the way you want, so it’s best to create the image to import at the proper size. For true Vector Image rescaling, we will have to wait for LabVIEW NextGen.

Modifying Incrementor Images

After importing the image that I created for the increment and decrement buttons, I have a new and improved Numeric Contro! Compare the two and see how we were able to do to customize the original Numeric Control. 

It now looks modern, has a flat appearance, and the Increment and Decrement buttons are much more attractive than what we started with. Now, I’ll never have to customize that control again since I can always re-use this one!

Finished Control Customization

The Numeric Control is just an example, but you can apply these customization and replacement techniques for all kinds of controls!

For more, explore our 6 Tips for LabVIEW UI and UX Design

Learn more about DMC's LabVIEW programming expertise.


# Liana
Great work...
Hi Mr. steven dusting it is very good article on Labview Customization this blog is very useful for customizing, you are providing very clear explanation on control window with screenshots.
Thank you
# Mohammad
Acually the control editing window will pop up is very difficult to set control panel but you are explain extremely awesome Thank you

Jesse Batsche
# Jesse Batsche
These tips are quite helpful, some of these lesser known techniques really open the doors on what's possible in LV UI design. Extra powerful when you combine them with a great UI suite as a foundation:

Post a comment

Name (required)

Email (required)

Enter the code shown above:

Related Blog Posts