Community Nugget 02/25/2007

[tst]

The native LabVIEW controls were designed to be readable and easy to use, but they are also quite boring.

There are many ways in which you can change the appearance of your application, ranging from changing the colors of your controls to using system colors and controls to customizing controls to look more interesting.

Today I'm going to discuss another option which most people are not aware of - using external resources while customizing.

Basically, every control is made up of several parts. Some of these pieces have limited options for customization, but the other pieces are usually just images which you can replace with anything you want.

Let's start with Office. LV graphics are vector based graphics, so you can resize them and they will always look sharp. Office graphics are also vector based, so you can copy images created in Word or PowerPoint into LV and your controls will scale nicely. There are probably other programs which can do this, but Office is the one I have most readily available.

An example might be in order. Continuing with the dials theme from my previous nugget, here are two dials where the housing part was replaced with two gradient filled circles created in PowerPoint. As you can see, this can make your front panel look different and much more appealing and should also resize nicely.

Note - at least in LV versions in which I've tried this, the internal LV clipboard does not get the image when you copy it in Office. You need to paste it when you edit your control in customize mode and then right click it and select Copy to Clipboard.

Here's another example, also inspired by something shown in the dials nugget.

On the left you can see how you can create a classic looking clock by using an appropriate background image and replacing the housing of a dial with a square frame (taken from the decorations palette).

In the middle you can see how this can be abused by placing a clown nose on a granite background. It is very important to NOT OVERUSE THIS. A user interface becomes extremely unusable if it is filled with distracting and conflicting colors.

On the right you can see another nice thing - Office images support alpha channel transparency and this is transferred into LV. As you can see in both this picture and the next, this doesn't look too well on my computer, but maybe newer versions of Office\LV handle this better. Also, be careful - LV will usually be much slower when drawing overlapping controls, since it redraws them every single time instead of being smart and only drawing them when needed.
On the same note, you can use transparent GIFs and PNGs to have images with irregular shapes.

Another thing that this image shows (other than the partial transparency) is the reshaping of a numeric control by making the numeric text background transparent and replacing the frame with a shaped image

Attached are three VIs:

• One shows the clocks with a couple of numeric controls with irregular shapes and partial transparency.
• The second shows using an image created in Office and copied into LV to create a Star-Trek like animation.
• The third shows a VI from the NI site which shows using animated GIFs inside custom controls.

I would like to state this again - this should be used wisely. It is extremely easy to make a front panel too crowded. Remember that your users eventually need to use the program and that is the most important thing. These tricks should be used to make the user interface more usable or more appealing, but they should not come at the expense of usability.

To learn the basics of control customization, see this page from the LabVIEW help.

For a list of past nuggets, see here.

If you want to write nuggets yourself, see here.

[altenbach]

Great nugget. 🙂

For LabVIEW 8.20 users it might be worth mentioning that it now supports direct background images, similar to the windows desktop. You can easily expand the selection in the list by placing other images into "...\resource\backgrounds" of your LabVIEW folder (On windows: C:\Program Files\National Instruments\LabVIEW 8.2\resource\backgrounds).

For example you could place the woodgrain background image from your clock display, then simply select to "tile, stretch, or center" the image in the pane background.

Typically you would choose a small "atomic" image that nicely autorepeats a given pattern when tiled. The advantage is that the background will always fill the window, no matter how you size it.

The following menu can be reached by right-clicking on the scroll-bar and selecting "properties" (LabVIEW 8.20 only!).

Message Edited by altenbach on 02-26-2007 12:47 AM

[tst]

By the way, this is what the wooden clock should look like. The other two clocks really get in the way. Unfortunately, it looks like the needle can only be replaced with a line. If you use another image, it will not rotate around its center.

Does anyone have any interesting controls they would like to show?

[Ben]

Wow,

I din't know about this.

Thanks tst!

Ben

[ohiofudu]

Thanks tst,

This is a good one .........nice Nugget.

ohiofudu
CLAD

[Ray.R]

Very nice tst!

I would not have thought of that..

Interesting indeed!!

😄

[Joe_H]

Very very nice nugget. Way to go tst.

Thanks for the info.

[Ben]

I know I am a little behind the curve here but the info in this Nugget let me do this!

Thank you!

Ben

Message Edited by Ben on 05-31-2007 02:57 PM

[tbob]

Pretty!  Can you post the ctl file?  Does the button go in when you click on it?  Does it light up?

[Ben]

It's only half done but you just have to do what tst said and use Christian's suggestion about the FP background.

If you finish it, post it back and save me some time.

Ben

(as LV 8.2.1)