Craft Better Custom Controls!

Time for a little hands-on! Let's get down to the basics: custom controls. LabVIEW clearly isn't the perfect tool to design custom controls but it does allow for a number of interesting operations, even though it requires a few tweaks. Let's expose some of these tricks and craft a flat enum (after all, flat is sooooo trendy~).

Control Editor Essentials

Firstly, when you are using the LV control editor, you have to be super comfortable with the edit and customize modes. Switch between one another only clicking the (first) icon in the toolbar. The customize mode is particularly interesting: it shows all the layers (named parts in the editor) for a given control.

Secondly, you have to know how to properly use the Control Parts window. It's somewhat hidden in a menu that we don't use much - the Window menu!

Get familiar with the different parts types: frame, text, increment/decrement, label, boolean button...

You are now ready for exploration. I could only advise you to open all the existing LabVIEW controls and see what they are made of. It is vital to do so because the same control in the 4 native palettes will most be composed by very different parts.

Make Your "Own" Layers?

You can edit existing parts (resize, move, replace from a file or the clipboard), remove them, but when it comes to parts creation, it really boils down to decorations. Well, that's a start and we'll take advantage of it: we can import parts from other controls into another custom control. Some properties of these parts will then persist after the copy. For instance, you can copy the Non-Colorable Decal part from the Silver buttons to your control to give some opacity to your background, and you could optionally import a transparent PNG file in that decal. If you do so, coloring the decal will color the part behind it, very handy to pretend you're painting your PNG background!

Back to our enum. We'll use the modern enum as the base. We don't want the increment/decrement buttons but we'll deal with these later. Look at the parts (use the Parts window!): the label, the frame, and the ring text. The ring text is the core element here: it responds to a user click by displaying the list of enum items. The frame is the parent part: all the other parts move and grow relative to it. It is usually the background part.

Main Steps

So, we want our enum to be flat, so add a flat rectangle decoration to the front panel.

Switch to Customize Mode and copy the decoration to your clipboard.

Select the frame part and Ctrl-V (or right-click Import from Clipboard) then remove the original decoration. Boom! The old-fashioned 3D frame is now FLAT!

Give colors that don't blow to your new frame (edge and center colors).

Make the ring text background transparent so the actual color of your enum only depends on the frame.

Adjust the position and size of the ring text using the Part window so it fits into the frame.

For a better readability, you may want to grow the enum font (to 20 or 22pt?).

Your enum starts getting decent. But we need more hidden customizations from now on for a polished result.

Open your LabVIEW.ini file in the <Program Files>\National Instruments\LabVIEW 20xx folder, and add the following line:

EnableSecretPopups = True

Save your work and restart LabVIEW. The said secret popups are in fact additional popup menus for the control editor. They allow for some advanced options when working with parts.

Extra Steps

Reopen your unachieved flat enum.

Find a suitable drop-down arrow on internet (PNG or EMF with a transparent background preferred).

Add the PNG as a decoration to your front panel.

Place the arrow behind the ring text and before the frame (use the Part window and the Reorder tool in the toolbar). This will enable the user to click the arrow and still see the enum items.

Right-click your new decoration (in customize mode): new choices unlocked!!! Set the options as follows. It prevents the decoration from growing, or from being selected. It will still move correctly as the user resizes the enum when using it.

Place the decoration accordingly (that now became a "Custom Cosmetics" in the Parts window), on the far right of the control. Set its size if needed.

Time to remove the increment/decrement buttons. Right-click each one, select Disconnect Decoration, and just delete the parts (you now can!).

TA-DAA! Use the Edit mode to check your control reacts as expected. If it does, you may want to save your flat enum as a template control. To do this, save it with a *.ctt extension so you can abuse it anytime you need a flat enum.

There's just one small hiccup using this enum. You have to point to the frame to correctly recolor the control (be accurate!!). If you point inside the enum, you will recolor the ring text and the drop-down arrow will disappear (as it sits behind the ring text layer). I hope that will not stop you and that you will use some of these tips in your next custom controls!

Small gift - here is the *.ctt I built when writing this tutorial ;)

My other personal resources for clean custom controls:

JKI Flat UI Controls

Flatline Controls