Part II of
LabVIEW UI Tips and Tricks
<Insert Name Here>
<Insert Title Here>
Before we Begin
Different tastes exist our tips may not always apply This presentation assumes a basic experience level Visit (and join) our UI Community Group to find:
Part I of this presentation online Downloadable demos and examples LabVIEW users passionate about UI (who share)
decibel.ni.com/content/groups/ui
2
Topics
Brush Up: Introduction to UI Design Part One Giving your UI a Custom Look Organization of Complex UIs Indicating Progress of Slow Operations Conclusion
Good artists borrow
great artists steal.
Pablo Picasso
4
Sources of Inspiration
Apple Microsoft Office Applications on your own computer Icon galleries Web design tutorials Your corporate design team Photography, Art Books on:
User interface design User interaction design Usability Graphic design Visualization of information
Three Commandments from Part One
I. Think About Your User
II. Dont Be Innovative
III. Less Is More
I. Think About Your User
Do they know as much as you (they never do)? How will they interact with the application? Why are they using your software?
The software (and UI) should support their goal
II. Dont Be Innovative
Use familiar elements Dont change expected functionality Polish dont reinvent
System controls mimic common operating system controls and are familiar to most users
III. Less Is More
Too much at once is distracting; err toward minimalism Stick to requirements
Dont do what isnt necessary Youll get done sooner Itll cost you less to own it
Focus should be on whats important
Example: Guide the user with color
Guiding the User with Color
The Cereal Box Effect: Which cereal catches your eye first?
Why?
10
It seems that perfection is attained not when there is nothing more to add, but when there is nothing more to remove. Antoine de Saint-Exupry
11
Giving your UI a Custom Look
12
UI Customization Techniques
Front Panel Images and Decorations
Make default controls transparent Add an image via menu Edit Paste Custom Controls Use to customize cosmetics of controls and indicators Access via front panel right-click context menu Advanced Customize XControls Use to customize the functionality or cosmetics of controls and indicators Access via menu File New
13
Adding an Image to the Front Panel
As simple as Copy and Paste! Use an image editor to erase, add transparency Populate native LabVIEW controls
Start: PowerPoint Clipart
14
Control Editor Window Normal Front Panel
Differences in the Control Editor
15
When you should use Controls
To create cosmetically different, reusable controls Example: resizing a Stop button to make it easier to click
When you should use Type Defs
To automatically update data type in custom controls Example: reusing an Enum whose values may change
When you should use Strict Type Defs
To create reusable controls that are identical copies Example: propagating changes to Gauge size and color
16
Edit Mode vs. Customize Mode
Edit Mode
Change size or color of a control or indicator Access a right-click shortcut menu
Customize Mode
Make extensive changes to controls or indicators Change individual parts of a control or indicator
17
Components of a Control (Slide)
Array Index Pixel Increment Housing
Needle, Fill and Scale
Pixel Decrement
Cosmetic
18
Components of a Control (Gauge)
Array Index Housing
Needle, Ramp and Scale
Extra Frame Part
19
Frame
Viewing Control Components
View individual control components using menu Window Show Parts Window
20
Adding a Decoration and Custom Imagery to a Gauge Control
CUSTOMIZING A GAUGE CONTROL
21
When you should use XControls
To create reusable components with dynamic behavior To encapsulate extended functionality or cosmetics
When you should not use XControls
To accomplish pure cosmetic changes When working on a single-shot application
Use Strict Type Defs instead when
You do not need dynamic run-time and edit-time behavior
22
An XControl Example
Design a thermometer control that can represent a single numeric input in either Celsius or Fahrenheit.
Discussion: What makes this a good application for an XControl?
Note: This example XControl is pre-built as part of the default LabVIEW Examples
23
Example XControl Requirements
1. Thermometer must keep track of which temperature unit it represents 2. Thermometer must convert temperature between Fahrenheit and Celsius
3. Thermometer must represent a single numeric value and look (visually) like a thermometer.
24
Using XControls
Manage XControls via the Project Explorer XControls appear as regular terminals You start with shell code
Terminal View
Icon View
Remember you can go a long way without resorting to XControls
25
Structure of an XControl
Properties (Optional)
XControl
Methods (Optional) Abilities (Mandatory)
26
XControl Properties
Allow the user to configure the XControl programmatically via Property Node
27
XControl Methods
Allow the user to engage functionality of the XControl programmatically via Invoke Node
28
XControl Abilities
Required components for proper function Represented by VIs or Controls Four mandatory abilities:
Data State Faade Init
Additional optional abilities may exist
29
XControl Data Ability
Type Definition Control Specifies the data type of the XControl
30
XControl State Ability
Type Definition Control Specifies information other than data type that affect the appearance of the XControl
31
XControl Faade Ability
Defines the appearance of the XControl Invoked after changes to Properties / Methods
32
XControl Faade Ability
Also invoked when:
Data is written to the control Appearance needs updating Changing between Control and Indicator Shortcut menu activates Short menu is selected and more
33
XControl Init Ability
Called upon first placement or load into memory Initializes display state before being displayed Handles control versioning
34
Creating a Simple XControl from Scratch
CREATING AN XCONTROL
35
Gallery of Examples
Credit: Simon Hogg NI Community UI Interest Group
36
Gallery of Examples
Credit: Simon Hogg NI Community UI Interest Group
37
Gallery of Examples
Credit: Jonathan Cohn Bloomy Controls LabVIEW Example Code Contest 2010 UI Controls Category Winner
38
Importance of Visualization Choices
UI Signal to Noise Ratio: Which slide is more effective and why?
39
Organization of Complex UIs
Tab Control Use when controls dont all have to be visible at once Limit to the number of tabs you can gracefully use Loads all controls into memory at once Category and Content View using SubPanels Use to dynamically decide which controls to display No limit to the number you can gracefully interact with You control when the VI is loaded or release from memory
42
Using a Tab Control
1. Add to front panel 2. Customize tab control 3. Populate with controls
More flexible than most people realize
Transparent tabs Vertical tabs Tabs with images
43
Example Tab Control Application
Using LabVIEW to mimic NI DIAdem, software that outshines Excel for data postprocessing
44
Disguising a Tab Control with Transparent or Image Tabs
CUSTOMIZING A TAB CONTROL
45
Using a SubPanel
1. 2. 3. 4. Determine higher level VI screen real estate Develop size appropriate, modular SubVIs Dynamically Run SubVI Dynamically insert SubVI into subpanel
46
Displaying Subpanels based upon User Selections
SUBPANEL OPTIONS DIALOG
47
Gallery of Examples
Credit: Simon Hogg NI Community UI Interest Group
48
Indicating Progress of Slow Operations
Splash screens are effective when applications have a long load time
Provide development and support information
Busy cursors Progress bars
For tips on using busy cursors, view Part I of this presentation available on the NI Community UI Interest Group site
49
Using an Event Structure to Create a Splash Screen
SPLASH SCREEN DEMO
50
Gallery of Examples
For Support, Please Visit: http://www.ni.com/
Sine Wave Tester
Version: 1.0.32 Author: Derrick Snyder
Framework Credit: Mark Ridgley, Logic PD NI Developer Community
51
Key Takeaways
Dont be innovative Less is more Think about your user
Customize controls using Control Editor Encapsulate functionality via XControls Clean up your front panels with tabs, subpanels Disguise load times using splash screens
52
Learn and Share UI Interest Group
decibel.ni.com/content/groups/ui
53
