NI-Tutorial-51918-en

Creating an Elegant LabVIEW User Interface: Alpha MasksPublish Date: Jan 19, 20141. Why an Alpha Mask?A successful GUI is intuitive and user friendly, which makes the user more efficient when interacting with the system. Today people interact with GUIs on phones, cars, laptops, and the web and these interfaces have set the standard for what people expect in a GUI. You can use this familiarity with existing GUI concepts to increase the efficiency with which your users interact with your software.A technique that is commonly used in web design is to gray out a webpage when a dialog box pops up. This semitransparent gray layer is called an alpha mask. Using an alpha mask to gray out the webpage brings the user’s focus and attention to the pop-up dialog and typically prevents the user from interacting with UI elements on the webpage while the dialog is up. After the user has finished interacting with the pop-up dialog, the alpha mask disappears and the user can once again interact with the UI elements on the webpage.This article explores how to use the Gnu Image Manipulation Program (), which is a free third-party application used to create an alpha mask that can be imported into NI systemGIMP LabVIEWdesign software. I chose GIMP for this tutorial because it is free and because I am accustomed to using it; however, you can duplicate these ideas in the image manipulation editor of your choosing.2. Creating an Alpha MaskAn alpha mask, for our purposes, is a semitransparent image that we assign to a custom control and use to gray out our interface while displaying a pop-up dialog. We can create the alpha mask using GIMP, and then import it into LabVIEW.Start by opening GIMP. On start-up, GIMP has three windows: the image editing window, the Layers window, and the Toolbox window.Figure 1. GIMP WindowsWithin the image editing window (far left window in Figure 1) go to File>>New, which opens the Create a New Image dialog (Figure 2).Figure 2. Create a New Image DialogOpen the Advanced Options in the Create a New Image dialog and set the “Fill with” field to “Transparency,” as seen in Figure 3, and then click the OK button.Figure 3. Create a New Image Dialog With Advanced OptionsYour image editing window now holds an image with a single transparent layer and should look like the window in Figure 4. You should also now see that you have a layer named “Background” in your Layers window.Figure 4. Image Editing Window With Transparent ImageFigure 5. Layers WindowNow use the Bucket Fill Tool found in the Toolbox window to paint your transparent layer any color you choose. For this exercise, I will paint it gray. Start by selecting the Bucket Fill Tool from the Toolbox window.Figure 6. Select Bucket Fill ToolNext change the foreground color by selecting the foreground color box from the Toolbox window.Figure 7. Select Foreground ColorClicking on the foreground color box brings up the Change Foreground Color dialog. This is where you can select the color you would like to use. I have selected a color with RGB values of R: 66, G: 66, and B: 66. After you have selected your color, click the OK button.Figure 8. Change Foreground Color DialogYou can now use the Bucket Fill Tool to paint your transparent layer in your image editing window. Your transparent layer should now be a solid color as in Figure 9.Figure 9. Painted LayerNow that you have painted your layer your desired color, you can make it semitransparent using the Opacity field on the Layers window as seen in Figure 10. I am going to set my opacity to 50 percent.Figure 10. Setting OpacityNow that you have created your semitransparent image, you need to save it using an image format that is capable of retaining the transparency of the image. You can save your image as a .PNG file, as the PNG format supports an embedded alpha channel. Do this by selecting File>>Export from the image editing window. This brings up the Export Image dialog.Figure 11. Export Image DialogBe sure that the PNG format is selected under the Select File Type drop-down menu. And then click the Export button.The Export Image as PNG dialog pops up. The default options are fine so click Export to continue.Figure 12. Export Image as PNG DialogNow that you have created a semitransparent image and exported it as a PNG file, you can bring it into LabVIEW and use it. You could simply drag the PNG image onto your front panel and use it as a decoration as seen in Figure 13 below, but this wouldn’t give you programmatic control over it.Figure 13. Transparent Image as DecorationInstead, you can create a custom control using the semitransparent PNG that you can then control programmatically using the VI Server. To do this, place a Classic Flat Square button from the Classic Boolean Palette on your front panel. The flat square Boolean from the Classic palette has fewer parts that need to be modified than Booleans from the Modern or Silver palettes.Figure 14. Classic Flat Square BooleanRight-click on the Classic Flat Square Boolean on the front panel and select Advanced>>Customize to open the Control Editor window.Figure 15. Right-Click MenuThe Control Editor window looks like a VI Front Panel, but it is only used for customizing a single control or indicator.Figure 16. Control Editor WindowThere is a Mode Indicator button on the Control Editor window toolbar that shows whether you are in edit or customize mode. Clicking this button toggles between the two modes.There is a Mode Indicator button on the Control Editor window toolbar that shows whether you are in edit or customize mode. Clicking this button toggles between the two modes.Figure 17. Control Editor Window in Edit ModeFigure 18. Control Editor Window in Customize ModeToggle the Mode Indicator button to change to Customize Mode as in Figure 18. While in Customize Mode, you can right-click the Flat Square Boolean and go to Picture Item, which displays the picture item associated with each of the four states of the Boolean control (Off, On, Off to On, On to Off). You need to replace each of these four picture items with your semitransparent PNG.Figure 19. Picture ItemTo replace each picture item with your semitransparent PNG, select the picture item, right-click the Boolean control, and then select Import Image from File…, navigating to the semitransparent PNG that you exported from GIMP.Figure 20. Replacing Picture ItemsBe sure to replace all four picture items with the semitransparent PNG.Figure 21. All Picture Items ReplacedAfter you have replaced all Picture Items, switch back to Edit Mode and save the custom control to disk.You now have an alpha mask custom control that you can act on programmatically. Here is example code for graying out an interface during a pop-up dialog.Figure 22. Sample CodeBelow is what the GUI looks like when code similar to this is called.Figure 23. Front Panel With Alpha Mask InvisibleFigure 24. Front Panel With Alpha Mask VisibleNotice how focus is brought to the pop-up dialog, and how the Save button is no longer accessible to the user because it is underneath the Alpha Mask Boolean.I recommend creating a few alpha mask custom controls of varying colors and saving them as part of your reuse library so that you don’t need to go through the process of creating one every time you need it. Adding them to a reuse library also allows them to be shared among a team of developers.-Jon McBee. McBee is a Senior Project Engineer at , an NI Platinum .Bloomy Controls Alliance PartnerUI Interest Group NI CommunityVisit the on the for more UI how-tos and best practices.。