creating quality uis with labview
TRANSCRIPT
![Page 1: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/1.jpg)
1
Creating Quality UIs
with LabVIEW
Minh Tran – Oregon Field Sales
Engineer
Prepared for Oregon LabVIEW Oregon User
Group Meeting Dec. 2010 – www.ni.com/portland
![Page 2: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/2.jpg)
2
Agenda
1. Definitions, rules and advice(not LabVIEW specific, but important)
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)
![Page 3: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/3.jpg)
3
What is a UI?
• Literally: User Interface
• How user interacts with program
• First thing user notices
• Make the user’s job easier
• Don’t be frustrating
![Page 4: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/4.jpg)
4
UI and Usability
Superfluous
eye candy
UI
Usability
Background
Task or Process
Visual elements that
help the user perform
a task in an efficient
manner
![Page 5: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/5.jpg)
5
Some General Rules
1. Don’t be innovative
2. Less is more
3. Think About Your User
![Page 6: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/6.jpg)
6
1. Don’t Be Innovative
Use familiar elements
Buttons
Icons
Terminology
Dialogs
Menus
![Page 7: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/7.jpg)
7
1. Don’t Be Innovative
Still some license for
creativity
Don’t change the way
similar looking things
behave
Polish, don’t reinvent
![Page 8: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/8.jpg)
8
2. Less is More
• Too much on screen at once is distracting
• Allow your user to focus on what is important
![Page 9: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/9.jpg)
9
3. Think About Your User
• They probably don’t know as much as you Explain what buttons do
Keep them informed about what your program is doing
• Know how the user plans on using your application Mouse, Keyboard?
Touch Screen Large Buttons
Outdoors High Contrast
![Page 10: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/10.jpg)
10
Let’s Take a Look at Some UIs
• Windows Desktop App
• Small Touch Screen App
• Informative Kiosk Display
![Page 11: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/11.jpg)
11
Windows Desktop App
![Page 12: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/12.jpg)
12
Applying the Rules
Don’t be innovative
• Use System Controls
• Add familiar icons to task buttons
• Use X to close application
Less is more
• Allow user to hide less important displays
• Hide the LV toolbar
• Don’t persist one-time configuration controls for no reason use temporary dialogs
• Customize the run-time menu
Think About Your User
• Create a status bar and use the busy cursor to update user
• Use tooltips to clarify functionality
• Allow the user to cancel long tasks
• Use panes to let user resize your application
Desktop Windows Application
![Page 13: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/13.jpg)
13
Use Appropriate Controls
You can change your default type in Tools»Options»Front Panel
![Page 14: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/14.jpg)
14
Add Decals to Buttons
![Page 15: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/15.jpg)
15
Add Decals to Buttons – How To
How to Add Decals to Buttons
1. Drop a System OK Button on the front panel.
2. Right click on the control and select Advanced»Customize…
3. Edit»Import Picture to Clipboard and select your image -
• PNG files work best since transparency is preserved
4. Right click on the control and select Import Picture from Clipboard»Decal
5. Click the wrench icon to change customize mode
6. Move the decal or the text so they aren’t overlapping
7. Save your custom control
Reuse tip:
If you give your customized control an icon and save it in <LabVIEW>\user.lib it will show up in
the controls palette under User Controls.
http://www.youtube.com/watch?v=2NdqXh67mak
![Page 16: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/16.jpg)
16
Tooltips
![Page 17: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/17.jpg)
17
Tooltips – How to
1.Right- click on control > Properties2.Select Documentation Tab3.Fill-in Tip Strip field
http://www.youtube.com/watch?v=NGeElmr1q2g
![Page 18: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/18.jpg)
18
Hide the LabVIEW Toolbar
![Page 19: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/19.jpg)
19
Hide the LabVIEW Toolbar - Demo
1. VI Properties > Window Appearance
http://www.youtube.com/watch?v=2CbKuBVGzo0
![Page 20: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/20.jpg)
20
Customizing the Run-Time Menu
![Page 21: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/21.jpg)
21
Customizing the Run-Time Menu - Demo
1.Edit > Run-Time Menu
2.Create Event handling code
http://www.youtube.com/watch?v=wkpiAmHFddM
![Page 22: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/22.jpg)
22
Spawning Dialogs
![Page 23: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/23.jpg)
23
Spawning Dialogs - Demo
1.VI Properties > Window Appearance > Dialog
2.VI Properties > Window Run-Time Position
http://www.youtube.com/watch?v=L-hNmzQ9tFc
![Page 24: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/24.jpg)
24
Using Panes Title Area
Status Bar
Menu /
Commands
Expandable
Content Area
![Page 25: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/25.jpg)
25
Using Panes – Demo
1. Right-Click on Front Panel > System > Containers >
Vertical/Horizontal Splitters
2. Right-click on Splitters, configure properties
3. Right-click on objects, Scale Object with Pane
http://www.youtube.com/watch?v=hZ180R7ADto
![Page 26: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/26.jpg)
26
Hiding Panes
![Page 27: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/27.jpg)
27
Status Bar
![Page 28: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/28.jpg)
28
Busy Cursors
![Page 29: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/29.jpg)
29
Busy Cursors - Demo
1.Right-click Block Diagram > Dialog & User
Interface > Cursor
2.Set Busy/Unset Busy VI
http://www.youtube.com/watch?v=_mosr-oTgRM
![Page 30: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/30.jpg)
30
Keeping the User Updated
![Page 31: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/31.jpg)
31
Small Touch Screen App
![Page 32: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/32.jpg)
32
Applying the Rules
Don’t be innovative
• Use large controls & indicators that resemble their physical equivalents
• Simple is best
Less is more
• Screen real-estate is valuable, use it wisely
• Use trays, tabs or different screens to stretch screen space
Think About Your User
• Glare may be an issue use more contrast
• Touch screens require more spacing
• Users fingers may obscure part of the screen
Small Touch Screen
![Page 33: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/33.jpg)
33
Tab Controls
• Tab controls are a familiar way to put
more information on a screen than
would otherwise fit
• Since the tabs themselves can be
hidden and changed
programmatically they are also useful
for some less obvious UI techniques
![Page 34: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/34.jpg)
34
“Hidden” Tab Controls
Main Content Tab Control
Sliding Tab Control
![Page 35: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/35.jpg)
35
Sliding a Control – Move.vi
• Moves an object to the Desired Position
• Moving half the remaining distance in each loop
iteration gives a natural sliding appearance
![Page 36: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/36.jpg)
36
Putting It TogetherWhen the Menu Button
is clicked slide the
invisible tab control
into view.
Store the old position
of the menu so we can
slide it back.
When a new view is
selected, change the
Main Content Tab
Control to the selected
page
Again, store the old
position of the menu so
we can slide it back.
![Page 37: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/37.jpg)
37
Informative Kiosk Display
![Page 38: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/38.jpg)
38
Applying the Rules
Don’t be innovative
• Take inspiration from TV, websites or similar applications
Less is more
• Show only the important information in an instantly recognizable way
Think About Your User
• Passive audience visual appeal is more important
Informative Console Display
![Page 39: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/39.jpg)
39
Panel Background
![Page 40: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/40.jpg)
40
Panel Background - Demo
1. Right-click on Scroll Bar > Properties
2. Pane Properties > Browse
3. Select Position
http://www.youtube.com/watch?v=gxXJfonTlFc
![Page 41: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/41.jpg)
41
Create Decorations in PowerPoint
![Page 42: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/42.jpg)
42
Create Decorations in PowerPoint - Demo1. Open Microsoft PowerPoint
2. Insert Tab > Shapes
3. Right-Click > Format Shape
4. Gradient Fill
5. Select Gradient Top 1
6. Adjust Stop Position and Transparency
7. Select Gradient Stop 2
8. Adjust Stop Position and Transparency
9. Select Line Color
10. Adjust parameters
11. Select Shadow
12. Adjust Paramaters
13. Right-click on Shape, select Save as Picture, Save as PNG to preserve Transparency
14. In LabVIEW go to Edit > Import Picture to ClipBoard > Select File Created
15. CTRL+ V
16. Reposition as necessary, right click Move To Back
http://www.youtube.com/watch?v=gjYfqhlv2hQ
![Page 43: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/43.jpg)
43
Transparent Indicators
![Page 44: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/44.jpg)
44
Transparent Indicators - Demo
1. Classic String Indicator
2. Toolbox > Color Selector > Transparent
3. Click Indicator
http://www.youtube.com/watch?v=jgUB1oDmf-4
![Page 45: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/45.jpg)
45
Transparent PNGs in a Picture Ring
![Page 46: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/46.jpg)
46
Transparent PNGs in a Picture Ring - Demo
1. Classic Picture Ring
2. Edit > Import Picture to Clipboard
3. Right Click on Picture Ring > Import Picture After
4. Recolour Tool > Select Background of Picture Ring and
make Transparent
5. Right-Click Picture Ring > Visible Items > Uncheck all
http://www.youtube.com/watch?v=AmDLCsnOegw
![Page 47: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/47.jpg)
47
Heavily Customized Controls
![Page 48: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/48.jpg)
48
Free Stuff - UI Interest Group
http://decibel.ni.com/content/groups/ui
![Page 49: Creating Quality UIs With LabVIEW](https://reader035.vdocuments.us/reader035/viewer/2022081801/54fbc35d4a7959f9348b4e73/html5/thumbnails/49.jpg)
49
Key Take Aways
• The “Rules”1. Don’t be innovative
2. Less is more
3. Think about your user
• Take advantage of what LabVIEW gives you: Transparency
Different Controls/Control Customization
Panes/Tabs
• UI Interest Group on the community