Creating Quality UIs With NI LabVIEW

Creating Quality UIs

with NI LabVIEW

1http://bit.ly/labviewui

Simon HoggLabVIEW Product Manager

Nitin ThomasStaff Software Engineer

Agenda

1. Definitions, rules, and advice(not specific to LabVIEW, but important)

2. Some cool UI techniques for LabVIEW


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


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


3. Think about your user

1. Do Not Be Innovative1. Do Not Be Innovative

Use familiar elements

Buttons

Icons

Use familiar elements

Buttons

Icons


Icons

Terminology

Dialogs

Menus

Icons

Terminology

Dialogs

Menus

1. Do Not Be Innovative1. Do Not Be Innovative

Still some license for

creativity

Do not change the way

Still some license for

creativity




similar looking things

behave

Polish, do not reinvent


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


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


Know how the user plans on using your application Mouse, keyboard?

Touch screen large buttons

Outdoors high contrast

An AC Controller

HOLD PROGFANSYSTEM

9:26 84.6FFAN ONPROGRAM X

SYSTEM COOL

TUESDAYAUGUST 4,2011


OVERRIDE SCHEDULERESETMODE

FAHREN21

A Better AC Controller

HoldCoolHeat

9:26 84 F COOLINGTUESDAY


Override ScheduleMode

Order Pizza21

The AC Controller I Really Want

84F70

80

90

192.168.1.4


On60

70

50Off

Windows Desktop App


Tooltips


Tooltips Demo


Recolor Graphs


Recolor Graphs Demo


Hide the LabVIEW Toolbar


Hide the LabVIEW Toolbar Demo


Customizing the Run-Time Menu


Customizing the Run-Time Menu Demo


Spawning Dialogs


Spawning Dialogs Demo


Using Panes Title Area

Menu/Commands


Status Bar

Expandable

Content Area

Using Panes Demo


Hiding Panes


Status Bar


Busy Cursors


Busy Cursors Demo


Keeping the User Updated


Informative Kiosk Display


Panel Background


Panel Background Demo


Create Decorations in PowerPoint


Create Decorations in PowerPoint Demo


Transparent Indicators


Transparent Indicators Demo


Transparent PNGs in a Picture Ring


Transparent PNGs in a Picture Ring Demo


Heavily Customized Controls


Windmill Monitoring System

Demo


Using Sub Panels

Sub Panel

Separate Panes


Using Sub Panels

Why?

Similar to Tab Control but sometimes superior

Plug-in Architecture

Selectively Run VIs


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


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


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


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


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


*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


Resizing Tables - Demo


Drag and Drop


Drag and Drop - Demo


Animations


Animations - Demo


Free Stuff UI Interest Group


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

Key Takeaways

The Rules1. 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


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

Creating Quality UIs With NI LabVIEW

Documents

Transcript of Creating Quality UIs With NI LabVIEW