Creating Quality UIs

with NI LabVIEW
1
http://bit.ly/labviewui
Simon Hogg
LabVIEW Product Manager
Nitin Thomas
Staff Software Engineer
Agenda
1. Definitions, rules, and advice
(not specific to LabVIEW, but important)
2. Some cool UI techniques for LabVIEW
2
http://bit.ly/labviewui
2. Some cool UI techniques for LabVIEW
(and why you would consider using them in your application)
3. Where to go to download some reusable
components
(because everybody loves free stuff)
What Is a UI?
Literally: User Interface
How user interacts with the program
First thing the user notices
3
http://bit.ly/labviewui
First thing the user notices
Make the users job easier
Do not be frustrating
Some General Rules
1. Do not be innovative
2. Less is more
4
http://bit.ly/labviewui
3. Think about your user
1. Do Not Be Innovative 1. Do Not Be Innovative
Use familiar elements
Buttons
Icons
Use familiar elements
Buttons
Icons
5
http://bit.ly/labviewui
Icons
Terminology
Dialogs
Menus
Icons
Terminology
Dialogs
Menus
1. Do Not Be Innovative 1. Do Not Be Innovative
Still some license for
creativity
Do not change the way
Still some license for
creativity
Do not change the way
6
http://bit.ly/labviewui
Do not change the way
similar looking things
behave
Polish, do not reinvent
Do not change the way
similar looking things
behave
Polish, do not reinvent
2. Less Is More
Too much on screen at once is distracting
Allow your user to focus on what is important
7
http://bit.ly/labviewui
Note: This doesnt mean you get away with less
work!
3. Think About Your User
They probably do not know as much as you
Explain what buttons do
Keep them informed about what your program is doing
8
http://bit.ly/labviewui
Know how the user plans on using your application
Mouse, keyboard?
Touch screen large buttons
Outdoors high contrast
An AC Controller
HOLD PROG FAN SYSTEM
9:26 84.6F
FAN ON
PROGRAM X
SYSTEM COOL
TUESDAY
AUGUST 4
,
2011
9
http://bit.ly/labviewui
OVERRIDE SCHEDULE RESET MODE
FAHREN 2 1
A Better AC Controller
Hold Cool Heat
9:26 84 F COOLING
TUESDAY
10
http://bit.ly/labviewui
Override Schedule Mode
Order
Pizza
2 1
The AC Controller I Really Want
84F
70
80
90
192.168.1.4
11
http://bit.ly/labviewui
On
60
70
50
Off
Windows Desktop App
12
http://bit.ly/labviewui
Tooltips
13
http://bit.ly/labviewui
Tooltips Demo
14
http://bit.ly/labviewui
Recolor Graphs
15
http://bit.ly/labviewui
Recolor Graphs Demo
16
http://bit.ly/labviewui
Hide the LabVIEW Toolbar
17
http://bit.ly/labviewui
Hide the LabVIEW Toolbar Demo
18
http://bit.ly/labviewui
Customizing the Run-Time Menu
19
http://bit.ly/labviewui
Customizing the Run-Time Menu Demo
20
http://bit.ly/labviewui
Spawning Dialogs
21
http://bit.ly/labviewui
Spawning Dialogs Demo
22
http://bit.ly/labviewui
Using Panes
Title Area
Menu/Commands
23
http://bit.ly/labviewui
Status Bar
Expandable
Content Area
Using Panes Demo
24
http://bit.ly/labviewui
Hiding Panes
25
http://bit.ly/labviewui
Status Bar
26
http://bit.ly/labviewui
Busy Cursors
27
http://bit.ly/labviewui
Busy Cursors Demo
28
http://bit.ly/labviewui
Keeping the User Updated
29
http://bit.ly/labviewui
Informative Kiosk Display
30
http://bit.ly/labviewui
Panel Background
31
http://bit.ly/labviewui
Panel Background Demo
32
http://bit.ly/labviewui
Create Decorations in PowerPoint
33
http://bit.ly/labviewui
Create Decorations in PowerPoint Demo
34
http://bit.ly/labviewui
Transparent Indicators
35
http://bit.ly/labviewui
Transparent Indicators Demo
36
http://bit.ly/labviewui
Transparent PNGs in a Picture Ring
37
http://bit.ly/labviewui
Transparent PNGs in a Picture Ring Demo
38
http://bit.ly/labviewui
Heavily Customized Controls
39
http://bit.ly/labviewui
Windmill Monitoring System
Demo
40
http://bit.ly/labviewui
Using Sub Panels
Sub Panel
Separate Panes
41
http://bit.ly/labviewui
Using Sub Panels
Why?
Similar to Tab Control but sometimes superior
Plug-in Architecture
Selectively Run VIs
42
http://bit.ly/labviewui
Selectively Run VIs
Scaling/Resizing
Using Sub Panels Demo
Use Queues, Notifiers etc. to communicate between
VIs.
VI.Ctrl Val.Set can be used to initialize controls.
Front Panel cannot be open when inserting into Sub
43
http://bit.ly/labviewui
Front Panel cannot be open when inserting into Sub
Panel.
Can view Sub Panel Block Diagram from Front
Panel.
Allows probes and highlight execution.
Viewing Tabular Data
44
http://bit.ly/labviewui
Table with Customized Inputs - Demo
Set height and width of control to the be the same as the
specific table cell.
Depending on the application disable ring contents if they are
already in use
45
http://bit.ly/labviewui
already in use
Move control off screen or invert visibility when not in use.
Ready to use framework exists - Type Sensitive Popup code
available at lavag.org (Author: David Saunders)
Array of Clusters Masquerading As
Tables
46
http://bit.ly/labviewui
Set height of elements to be the same (to avoid resizing/scaling issues)
Use unique labels for the elements
Can register user events for elements within the array
Access control properties of the cluster through the Terminal
Array of Clusters - Demo
47
http://bit.ly/labviewui
*Check out Christina Rogers and Simons session today afternoon for more details
Customizing NI LabVIEW Controls and Indicators, Tuesday (August 2) at 4:45 PM in 13A/B.
Resizing Tables
48
http://bit.ly/labviewui
Resizing Tables - Demo
49
http://bit.ly/labviewui
Drag and Drop
50
http://bit.ly/labviewui
Drag and Drop - Demo
51
http://bit.ly/labviewui
Animations
52
http://bit.ly/labviewui
Animations - Demo
53
http://bit.ly/labviewui
Free Stuff UI Interest Group
54
http://bit.ly/labviewui
http://decibel.ni.com/content/groups/ui
Key Takeaways
The Rules
1. Do not be innovative
2. Less is more
3. Think about your user
http://bit.ly/labviewui
Flexible GUI for Vibration
Analysis with LabVIEW
Today, 2:15PM 3:15 PM
Room 11B
55
http://bit.ly/labviewui
Take advantage of what LabVIEW gives you
Transparency
Different controls/control customization
Panes/tabs
UI interest group on the community
Customizing Controls &
Indicators
Today, 4:45 PM 5:45 PM
Room 13 A/B (this room)
User Interface Tips 2.0
Wednesday, 4:45 PM 5:45
PM
Room 13A/B