Sie sind auf Seite 1von 15

Build a Better LabVIEW UI: Part II, Drop Shadows

Publish Date: Apr 22, 2014

Introduction
This article is part II in a series on building better LabVIEW UIs. Here, build on what you learned about alpha masks in part I and walk through how to create a user interface (UI) element with a
drop shadow effect using the Gnu Image Manipulation Program (GIMP). Then learn how to bring the UI element into NI LabVIEW software.
Previously, we discussed how you can use alpha masks to gray out an interface to bring attention to a pop-up dialog window. By adding a drop shadow to a UI element, you can achieve a similar
effect without graying out the rest of the interface. In this article, focus on the use case of creating a vertical menu bar that moves in and out of the field of view, depending on where the operators
mouse is on the interface. Learn how you can use a drop shadow effect to draw attention to the menu bar when it is in the field of view.
Also explore how to use GIMP, a free third-party application, to create a UI element that you can import into LabVIEW. You can download GIMP at www.gimp.org. This tutorial uses GIMP;
however, you can duplicate these ideas in the image manipulation editor of your choice.

Use Case
This walkthrough uses the LabVIEW UI shown in Figure 1. It is a standard LabVIEW UI layout with a header that illustrates the company and application names, a footer that displays system
status information, a vertical menu bar that is on the left side of the interface, and a main body. In some applications, you may want to free up the space on the left side of the interface by making
the vertical menu bar visible or invisible programmatically. This is similar to what the Windows OS does with the start menu. Clicking on the Windows icon displays the start menu along the left side
of the display. After an item has been selected or the operator clicks off the menu, it disappears.
To achieve this effect in LabVIEW, you need to place navigation controls onto a GObject so you can have programmatic control over its location on the front panel. For our GObject, we use a tab
control with a single page. We can make the tab control transparent and can place an image on the tab control, beneath the navigation controls, to give our UI the look we are after.

Figure 1. Sample UI

Prepping the UI
First create the single page tab control. After you create the tab control, you can move the navigation controls onto its single page, and appropriately size the tab control to fit. You will need the
dimensions of the tab control so you can create the correct-sized image in the GIMP.
Place a tab control from the Modern Palette onto the front panel.
1. Name it Vertical Menu Bar
2. Remove the second page
3. Rename Page 1 to Main
Move your navigation controls onto the tab control.
Size the tab control to fit the space left by your navigation controls.

1/15

www.ni.com

Figure 2. UI With Tab Control


Make the page names invisible by right-clicking on the border of the tab control and clicking Visible ItemsTabs.
Right-click on the border and click Properties to bring up the Tab Controls Properties window where you can make note of the size of the tab control. The Appearance page of the window tells the
height and width of the tab control in the Tab Size fields.

Figure 3. Tab Control Properties


Lastly, make your tab control transparent. From the LabVIEW menu bar, go to ViewTools Palette to bring up the Tools window.

Figure 4. LabVIEW Tools Window


The bottom of the Tools window contains a paintbrush with two color boxes, one for foreground color and one for background color. Click on each color box and set the color to Transparent, which
is found in the upper right-hand corner of the color selection window.

2/15

www.ni.com

Figure 5. Color Selection Window


After you have set both the foreground and background colors to transparent, use the paintbrush to paint the tab control transparent.

Figure 6. Transparent Tab Control

Creating an Image With a Drop Shadow


Now that you have prepped the UI and know the size of the UI element you need to create, you can delve into GIMP.

Start by opening GIMP. On startup, GIMP has three windows: Image Editing, Layers, and Toolbox.

Figure 7. GIMP Windows


Within the Image Editing window (far left window in Figure 7), go to FileNew to open the Create New Image dialog. Set the width and height to match the size of the tab control.
Open the Advanced Options in the Create New Image dialog and set the Fill with field to Transparency, as seen in Figure 8. Then click the OK button.

3/15

www.ni.com

Figure 8. Create New Image Dialog


Your Image Editing window now holds an image with a single transparent layer and should look like Figure 9. You should also now see that you have a layer named Background in your Layers
window.

Figure 9. Image Editing Window With Transparent Image

Figure 10. Layers Window


Right-click on the Background layer in the Layers window and select Edit Layer Attributes to open the Layer Attributes window. Change the layer name to Semi-Transparent.

Figure 11. Layer Attributes Window


Select the Bucket Fill Tool found in the Toolbox Window to paint the Semi-Transparent layer white.

4/15

www.ni.com

Select the Bucket Fill Tool found in the Toolbox Window to paint the Semi-Transparent layer white.

Figure 12. Select Bucket Fill Tool


Select the foreground color box from the Toolbox window to change the foreground color.

Figure 13. Foreground Color


Click on the foreground color box to bring up the Change Foreground Color dialog and select the color you want to use. The example in Figure 14 uses a color with RGB values of R: 255, G: 255,
and B: 255. After you have selected your color, click the OK button.

Figure 14. Change Foreground Color Dialog


Use the Bucket Fill Tool to paint the Semi-Transparent layer in your Image Editing window. The Semi-Transparent layer should now be solid white as shown in Figure 15.

5/15

www.ni.com

Figure 15. Painted Layer


Now that you have painted the Semi-Transparent layer white, you can make it semi-transparent using the Opacity field on the Layers window as shown in Figure 16. In this example, the opacity is
set to 75 percent.

Figure 16. Setting Opacity


You can give your semi-transparent image slightly rounded corners and a border. Add a new layer by navigating to LayerNew Layer from the menu bar.

Figure 17. Create New Layer


This opens the New Layer dialog box. Make sure that the Layer Fill Type is set to Transparency and change the layer name to Transparent.

6/15

www.ni.com

This opens the New Layer dialog box. Make sure that the Layer Fill Type is set to Transparency and change the layer name to Transparent.

Figure 18. New Layer Dialog Box


You have now added a Transparent layer to your image, but you need to make sure that it is below the Semi-Transparent layer that you already created. If you look at the Layers window, you can
see that it is currently on top of the Semi-Transparent layer. Left-click on the Transparent layer to highlight it, and click on the green down arrow to move it below the Semi-Transparent layer.

Figure 19. Transparent Layer on Top


To round the corners, first go to the menu SelectSelect All.

Figure 20. Select All


Next, from the menu, go to SelectShrink and make sure that Shrink from image border is checked. Set border width to 1 pixel.

7/15

www.ni.com

Figure 21. Shrink Selection


From the menu, go to SelectRounded Rectangle and set the Radius (%) to 10.

Figure 22. Rounded Rectangle Dialog Box


From the menu, go to SelectInvert. This changes the selected area to be everything that is not the rounded semi-transparent rectangle.
At this point, make sure that the Semi-Transparent layer is highlighted in the Layers window.
From the menu, go to EditClear. This deletes everything that is not part of the Semi-Transparent rectangle.

Figure 23. Rounded Semi-Transparent Layer


Now add a border. From the menu, go to SelectInvert. This reselects your rounded semi-transparent rectangle.
From the menu, go to SelectBorder. Set the border selection to be 1 pixel in width.

Figure 24. Border Selection Dialog


There should now be a 1 pixel wide border highlighted inside the semi-transparent rounded rectangle. You can see it when you zoom in.

8/15

www.ni.com

Figure 25. Selected Border at 800% Zoom


Use the Bucket Fill Tool to paint the border black. Do this by setting the foreground color to black, selecting the Bucket Fill Tool, and clicking on the highlighted section in your image.

Figure 26. Black Border


Zoom back out and you should have a semi-transparent rounded rectangle with a black border. None of this is strictly necessary for the creation of a drop shadow, but all of it is useful to know.

9/15

www.ni.com

Figure 27. Semi-Transparent Rounded Rectangle With Black Border


To add a drop shadow, make sure that the Semi-Transparent layer is selected in the Layer window.

Figure 28. Layer Window Selection


On the menu bar, go to FiltersLight and ShadowDrop Shadow

10/15

www.ni.com

Figure 29. Drop Shadow


Experiment with and select the settings you want to implement on the Drop Shadow dialog box.

Figure 30. Drop Shadow Dialog Box


You now have a drop shadow layer named Drop Shadow, but notice how the drop shadow shows through the white Semi-Transparent layer. This isnt desirable, and should be fixed.

Figure 31. Drop Shadow


In the Layers window, make sure that the Semi-Transparent layer is selected. On the Toolbox window, select the Fuzzy Select Tool.

11/15

www.ni.com

Figure 32. Fuzzy Select Tool


With the Fuzzy Select Tool, click on the white Semi-Transparent layer to highlight everything inside the black border.

Figure 33. Semi-Transparent Layer Selected


In the Layers window, make sure that the Drop Shadow layer is selected. On the menu, go to EditClear. This deletes any part of the drop shadow that was underneath the white
Semi-Transparent layer, without deleting the entire drop shadow.

12/15

www.ni.com

Figure 34. Semi-Transparent Rounded Rectangle With Border and Drop Shadow
Now that you have created your Semi-Transparent image, save it using an image format that can retain the transparency of the image. You can save your image as a *.PNG file, as the PNG
format supports an embedded alpha channel. To do this, select FileExport from the Image Editing window to bring up the Export Image dialog.

Figure 35. Export Image


Be sure that the PNG format is selected under the Select File Type menu. Then click the Export button.
The Export Image as PNG dialog pops up. The default options are fine so click Export to continue.

13/15

www.ni.com

Figure 36. Export Image as PNG

Bringing the UI Element Into LabVIEW


Now that you have created your UI element of a semi-transparent rounded rectangle with border and drop shadow, you can bring it into LabVIEW. Simply drag the exported PNG from Windows
Explorer onto the front panel of your VI. In this case, drag it onto the transparent tab control and then place the navigation controls on top. A little fine tuning and you end up with Figure 37.

Figure 37. Update UI


So why go through all the trouble of making the vertical menu bar semi-transparent? Now you can extend the main body of the UI all the way to the left, and having the vertical menu bar
semi-transparent means you can see through it when it is visible on the UI.

Figure 38. Semi-Transparent Vertical Menu Bar

14/15

www.ni.com

Finally, on the block diagram of your UI, you need to write some code to move the single page tab control programmatically. You can do all of this using the VI Server.

Motion in the UI
You can use the Position property of the tab control to establish both a Start position off screen, and a Stop position to the left side of the screen.

Figure 39. Block Diagram


At startup, you can set the position of the tab control to the Start position, ensuring that it is just off to the left side of the visible UI. When the operator clicks on the LabVIEW icon in the lower
left-hand corner of the UI, the tab control is set to the Stop position.

Figure 40. LabVIEW Mouse Up Event


The movement of the tab control on the UI is taken care of by the Move GObject.vi.

Figure 41. Move GObject.vi Block Diagram


The Move GObject.vi accepts a reference to any GObject as well as a desired position on a front panel. It then iterates through a calculation that takes the difference of current position and desired
position, and then divides it in half and moves the GObject to the halfway point. The act of moving the object half way to the desired location on each iteration causes it to appear to move quickly at
first and slow down as it reaches its destination.

-Jon McBee. McBee is a Senior Project Engineer at Bloomy Controls, an NI Platinum Alliance Partner.
Visit the UI Interest Group on the NI Community for more UI how-tos and best practices.
Download sample code from this tutorial.

15/15

www.ni.com