Advanced LabVIEW User Interfaces

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

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

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

Advanced LabVIEW User Interfaces

Uploaded by

Copyright:

Available Formats

Advanced LabVIEW User Interfaces

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Advanced LabVIEW User Interfaces

Uploaded by

Copyright:

Available Formats

Part II of

LabVIEW UI Tips and Tricks

Good artists borrow

great artists steal.

Three Commandments from Part One

I. Think About Your User

III. Less Is More

I. Think About Your User

The software (and UI) should support their goal

II. Dont Be Innovative

III. Less Is More

Focus should be on whats important

Example: Guide the user with color

Guiding the User with Color

Giving your UI a Custom Look

Adding an Image to the Front Panel

Start: PowerPoint Clipart

Control Editor Window Normal Front Panel

Differences in the Control Editor

When you should use Controls

When you should use Type Defs

When you should use Strict Type Defs

Edit Mode vs. Customize Mode

Components of a Control (Slide)

Needle, Fill and Scale

Components of a Control (Gauge)

Needle, Ramp and Scale

Extra Frame Part

Viewing Control Components

Adding a Decoration and Custom Imagery to a Gauge Control

CUSTOMIZING A GAUGE CONTROL

When you should use XControls

When you should not use XControls

Use Strict Type Defs instead when

Discussion: What makes this a good application for an XControl?

Example XControl Requirements

Remember you can go a long way without resorting to XControls

Methods (Optional) Abilities (Mandatory)

Additional optional abilities may exist

XControl Data Ability

XControl State Ability

XControl Faade Ability

XControl Faade Ability

XControl Init Ability

Creating a Simple XControl from Scratch

Credit: Simon Hogg NI Community UI Interest Group

Credit: Simon Hogg NI Community UI Interest Group

Importance of Visualization Choices

Organization of Complex UIs

Using a Tab Control

Example Tab Control Application

Disguising a Tab Control with Transparent or Image Tabs

CUSTOMIZING A TAB CONTROL

Displaying Subpanels based upon User Selections

SUBPANEL OPTIONS DIALOG

Credit: Simon Hogg NI Community UI Interest Group

Indicating Progress of Slow Operations

Provide development and support information

Busy cursors Progress bars

Using an Event Structure to Create a Splash Screen