creating quality uis with labview

49
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

Upload: wulfi183

Post on 07-Mar-2015

172 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: Creating Quality UIs With LabVIEW

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

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

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

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

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

6

1. Don’t Be Innovative

Use familiar elements

Buttons

Icons

Terminology

Dialogs

Menus

Page 7: Creating Quality UIs With LabVIEW

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

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

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

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

11

Windows Desktop App

Page 12: Creating Quality UIs With LabVIEW

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

13

Use Appropriate Controls

You can change your default type in Tools»Options»Front Panel

Page 14: Creating Quality UIs With LabVIEW

14

Add Decals to Buttons

Page 15: Creating Quality UIs With LabVIEW

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

16

Tooltips

Page 17: Creating Quality UIs With LabVIEW

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

18

Hide the LabVIEW Toolbar

Page 19: Creating Quality UIs With LabVIEW

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

20

Customizing the Run-Time Menu

Page 21: Creating Quality UIs With LabVIEW

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

22

Spawning Dialogs

Page 23: Creating Quality UIs With LabVIEW

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

24

Using Panes Title Area

Status Bar

Menu /

Commands

Expandable

Content Area

Page 25: Creating Quality UIs With LabVIEW

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

26

Hiding Panes

Page 27: Creating Quality UIs With LabVIEW

27

Status Bar

Page 28: Creating Quality UIs With LabVIEW

28

Busy Cursors

Page 29: Creating Quality UIs With LabVIEW

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

30

Keeping the User Updated

Page 31: Creating Quality UIs With LabVIEW

31

Small Touch Screen App

Page 32: Creating Quality UIs With LabVIEW

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

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

34

“Hidden” Tab Controls

Main Content Tab Control

Sliding Tab Control

Page 35: Creating Quality UIs With LabVIEW

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

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

37

Informative Kiosk Display

Page 38: Creating Quality UIs With LabVIEW

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

39

Panel Background

Page 40: Creating Quality UIs With LabVIEW

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

41

Create Decorations in PowerPoint

Page 42: Creating Quality UIs With LabVIEW

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

43

Transparent Indicators

Page 44: Creating Quality UIs With LabVIEW

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

45

Transparent PNGs in a Picture Ring

Page 46: Creating Quality UIs With LabVIEW

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

47

Heavily Customized Controls

Page 48: Creating Quality UIs With LabVIEW

48

Free Stuff - UI Interest Group

http://decibel.ni.com/content/groups/ui

Page 49: Creating Quality UIs With LabVIEW

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