Pointers and Recommendations for a "Wow!" Graphical Interface It's the attention to detail that often makes a graphical interface so startling that people go, "Wow!" To achieve this, we've collected a "bag o' tricks" over the years from experience and from observing other people's fancy VIs. Many VIs start out as a scratchpad with no concern for order or aesthetics, and never get cleaned up later. Believe me, it is worth the effort; even if you're not out to impress anybody, you and others will have an easier time working with your own VI. What if you have to modify that graphical spaghetti you threw together last year? The following list is just a set of recommendations for a cool GUI; they don't necessarily always apply to your particular situationperhaps you'll find better onesbut they should help you get started. Panel Layout If possible, make your top-level front panel and window size such that it fills up the whole screen, as long as you know that's the monitor size and resolution it will be used on. Try to use neatly aligned rectangular decorations as "modules" on the front panel, neatly aligned to group objects (see Figure 17.23). Figure 17.23. A VI with a good modular layout of controls  If you have empty space, consider filling it up with a decoration "module" as something you could use later; or fill it up with your company's logo or some cool picture. "Consider" it but don't cram the panel with meaningless stuff; some "white space" is good. (For example, there's a lot of judicious white space in the VI front panel shown in Figure 17.24.) Figure 17.24. Use your company logo and its color scheme to work with your VI GUI. 
Text, Fonts, and Color Use color, but don't overdo it and be consistent with a coloring scheme that is maintained throughout the entire application. If you use red for a "hi" alarm in one panel, use the same red for the "hi" alarms in other panels (and please, no puke green or other weird colors . . .). Choose a background color different from your decoration box colors. Often a darker gray or black background adds a nice border effect. Alternatively, if you don't use the decoration modules, you may find that white or a soft, light color works best for the background. Select the "transparent" option for object label boxes from the Options... command under the Tools menu. Labels generally look much better without their gray box, as shown in Figure 17.25. Figure 17.25. Using transparent label background to make the text more readable  For many labels in general, and especially for the display text of numeric indicators and controls, coloring the background of the text black and making the text a vivid green or yellow makes them stand out. Choosing bold for the text usually helps as well. Use bright, highlighted colors only for items that are very important, such as alarms or error notifications. LabVIEW has three standard fonts (Application, System, and Dialog font). In general, stick to these if you are writing a cross-platform application. A custom font style or size you selected on a Windows machine may look very different (usually too big or too small) on Mac and Linux (and vice versa).
Graphs and Imported Pictures Make your panel look truly customized by importing your company's logo picture somewhere onto the front panel. Be aware that pictures and graph indicators can significantly slow down the update of your VI, especially if you have placed any controls or indicators on top of a picture or graph indicator. In general, you will want to select the Use Smooth Updates option from the Options . . . command to avoid the nasty "flickering" that would otherwise appear on graphs and other image-intensive operations.
Miscellaneous Include units on numerical controls if appropriate. Remember, LabVIEW has built-in units: If you choose to use these, you can show the unit label for numeric control or indicator by popping up on it and selecting Visible Items>> Unit Label. See Chapter 15, "Advanced LabVIEW Features," for a discussion of units. This allows the end user to quickly change the units of a control or indicator at run-time without you having to write any fancy code for converting the display units. They simply use the mouse to select the text in the Unit Label of the control or indicator, and then use the keyboard to type in the new unitsLabVIEW will validate that the typed units are of the required base units. (End users really love this featureespecially scientists and engineers.) Include custom controls when you can for neat visual effects. If you want to get really creative, for multimedia-type effects, use sounds and property nodes such as the position property. Use property nodes to hide or "gray out" controls when you want to indicate that these controls shouldn't be used. The VI Properties options, discussed in Chapter 15, are very useful for making your front panel fill the screen, center itself, and so on. Never forget to spend enough time on the icon editor, discussed in Chapter 5, "Yet More Foundations"make effective icons! Use a mixture of text and glyphs that are intuitive, professional, and easy to read (see Figure 17.26). They not only look better, but also make your code much easier to read and debug, especially if you are looking at a VI Hierarchy window. (On Windows, use 10-point [or 8-point all UPPERCASE] small font for easy-to-read, compact text.) Figure 17.26. Using glyphs in VI icons helps you recognize them.  When you see a good front panel design, learn and imitate!
If you're interested in learning more about LabVIEW GUI design, check out LabVIEW GUI: Essential Techniques by David J. Ritter (2002, McGraw Hill).
Some Final Words on the GUI... Most of you at some time or another have probably had to give a presentation to your manager or some other audience about how your software works. The success of this "dog and pony show," in my experience, usually depends far more on the razzle and dazzle of the GUI than on whether the software is efficient or even works properly. Perhaps it shouldn't be this way, but that's often the way projects get accepted or rejected. The story goes that, at one large semiconductor manufacturer, some engineers had recently decided to revise a piece of software written in C that had taken two years to develop. Another engineer put together a LabVIEW front panel that demonstrated what the new software should look like. One of the top executives in the company was so impressed by the GUI that he immediately approved the engineer's proposal for all their worldwide plantsdespite the fact that the front panel was just a demo and didn't do anything yet! The moral of the story is this: Spend some time making the best, coolest graphical interface you can. You never know how far it might carry you. |
