There is a large value to creating customised LabVIEW User Interfaces, in that operators and managers view them as professional applications and can have less resistance and frustration when using a well-designed software application.
There are some simple steps, and some more complex when customising your LabVIEW application.
Step #1 – Customised Controls and Indicators
I use a graphics editor (Inkscape) to create custom .png icons for buttons and strings. You can easily import custom icons into LabVIEW controls and indicators.
Use the Classic palette whenever possible, Simple String, and Flat Buttons are the most easily customisable, as you can just replace the entire control with a custom icon.
Create icons in an image editor, then import png’s into LabVIEW Controls editor.
Any control or indicator can be customised by right clicking the control and selecting Advanced > Customize. Import an image into the Controls Editor by menu item Edit > Import from Clipboard.
The Controls Editor Window allows you to change the appearance of controls and indicators
Then change to Customize mode (change the icon to Tweezers) and you can paste your imported images onto the background image of the control.
Tip: There are 4 background images for Boolean controls (True; False; True/False; False/True), you must customise as a minimum the False & True images. The transition images are seen briefly, and sometimes can be left as default as they suggest a changed in state, try it and decide for yourself if all images need to be changed.
Step #2 – Customise Strings
Customising strings is very similar to Booleans, in that you can import a custom image as the background to the control.
I start with a Simple String control from the Classic palette, and make it transparent in the Controls Editor. Then import a custom image behind the string control in the editor.
I ensure that the background image is paced behind the control, then align it so that the background border is aligned with the string control.
A caveat of this method is that problems occur when the string control gets Key Focus in LabVIEW. Unfortunately, an unsightly black border highlights the string control which detracts from the design of the application.
Key Focus causes a black border around the string control
The only workaround I have found to this is overlaying a decoration that will mask the black border. You can use a property node to get the co-ordinates and size of the string control, then use a reference to the decoration to size it and align it exactly to the string control.
Step #3 – Resizing with Splitters
Professional, well designed software applications should resize elegantly for different sized displays. There are some easy steps to implement this in LabVIEW, and some tougher steps.
Splitters are an easy to implement solution, and can solve 50% of your resizing issues. The image below shows how a splitter bar has been used to make a menu bar on the left-hand side of the screen. A splitter has then been used to divide the front panel, and a graph placed on the right-hand side.
Using a splitter to resize a graph, and making it stick left to dock the menu controls
By right clicking the graph and selecting ‘Fit to Pane’, when the front panel resizes, LabVIEW will automatically make the graph scale to fit the new size of the front panel.
Splitter sizing options are important, as they define whether the splitter sticks to the left, right, top or bottom of a front panel. By selecting your splitters thoughtfully, you can create a front panel that will scale elegantly, but keep important controls and indicators docked in sensible places around the front panel.
When it comes to adding the final touches to splitters, you can make a splitter look transparent by using a Classic splitter, and making its colour match the front panel background.
A ‘Transparent’ splitter made by using a Classic splitter, whose colour matches the Front Panel