2-2 hmi for labview programming
TRANSCRIPT
![Page 1: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/1.jpg)
撰寫優質人機介面的 LabVIEW 程式
Jimmy Ko (柯璟銘)
NI Marketing Engineer
![Page 2: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/2.jpg)
Agenda
1. Definitions, rules, and advice
2. Some cool UI techniques for LabVIEW2. Some cool UI techniques for LabVIEW
3. Some reusable components / resources
![Page 3: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/3.jpg)
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 user’s job easier
• Not be frustrating
![Page 4: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/4.jpg)
UI and Usability
Superfluous eye candy
UIVisual elements that
help the user eye candy
Usability
Backgroundtask or process
help the user perform a task in an
efficient manner
![Page 5: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/5.jpg)
Some General Rules
1. Do not be innovative
2. Less is more
3. Think about your user
![Page 6: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/6.jpg)
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
![Page 7: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/7.jpg)
1. Do Not Be Innovative1. Do Not Be Innovative
Still some license for
creativity
� Do not change the
Still some license for
creativity
� Do not change the � 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
![Page 8: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/8.jpg)
2. Less Is More
• Too much on screen at once is distracting
• Allow your user to focus on what is important
![Page 9: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/9.jpg)
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
![Page 10: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/10.jpg)
Let’s Take a Look at Some UIs
• Windows Desktop App
• Small Touch Screen App
• Informative Kiosk Display
![Page 11: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/11.jpg)
Windows Desktop App
![Page 12: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/12.jpg)
Applying the Rules
Do not be innovative
• Use system controls
• Add familiar icons to task buttons
Less is more
• Allow user to hide less important displays
• Hide the LabVIEW
Think about your
user
• Create a status bar and use the busy cursor to update user
Desktop Windows OS Application
• Add familiar icons to task buttons
• Use X to close application
• Hide the LabVIEW toolbar
• Do not persist one-time configuration controls for no reason � use temporary dialogs
• Customize the run-time menu
user
• Use tooltips to clarify functionality
• Allow the user to cancel long tasks
• Use panes to let the user resize your application
![Page 13: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/13.jpg)
Use Appropriate Controls
You can change your default type in Tools»Options»Front Panel
![Page 14: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/14.jpg)
Add Decals to Buttons
![Page 15: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/15.jpg)
Tooltips
![Page 16: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/16.jpg)
Recolor Graphs
![Page 17: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/17.jpg)
Hide the LabVIEW Toolbar
![Page 18: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/18.jpg)
Customizing the Run-Time Menu
![Page 19: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/19.jpg)
Spawning Dialogs
![Page 20: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/20.jpg)
Using PanesTitle Area
Menu/Commands
Status Bar
Menu/Commands
ExpandableContent Area
![Page 21: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/21.jpg)
Hiding Panes
![Page 22: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/22.jpg)
Status Bar
![Page 23: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/23.jpg)
Busy Cursors
![Page 24: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/24.jpg)
Keeping the User Updated
![Page 25: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/25.jpg)
Small Touch Screen App
![Page 26: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/26.jpg)
Applying the Rules
Do not be
innovative
• Use large controls and indicators that
Less is more
• Screen real estate is valuable; use it
Think about your
user
• Glare may be an issue � use more contrast
Small Touch Screen
indicators that resemble their physical equivalents
• Simple is best
valuable; use it wisely
• Use trays, tabs, or different screens to stretch screen space
more contrast
• Touch screens require more spacing
• Users’ fingers may obscure part of the screen
![Page 27: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/27.jpg)
Tab Controls
• Tab controls are a familiar way to
put more information on a screen
• Because the tabs can be hidden • Because the tabs can be hidden
and changed programmatically,
they are also useful for some less
obvious UI techniques
![Page 28: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/28.jpg)
“Hidden” Tab Controls
Sliding Tab Control
Main Content Tab Control
![Page 29: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/29.jpg)
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 30: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/30.jpg)
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 31: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/31.jpg)
Informative Kiosk Display
![Page 32: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/32.jpg)
Applying the Rules
Do not be
innovativeLess is more
Think about
your user
Informative Console Display
• Take inspiration from TV, Web sites or similar applications
• Show only the important information in an instantly recognizable way
• Passive audience �visual appeal is more important
![Page 33: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/33.jpg)
Panel Background
![Page 34: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/34.jpg)
Create Decorations in Other Tools
![Page 35: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/35.jpg)
Transparent Indicators
![Page 36: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/36.jpg)
Transparent PNGs in a Picture Ring
![Page 37: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/37.jpg)
Heavily Customized Controls
![Page 38: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/38.jpg)
Useful Stuff – UI Interest Group
http://decibel.ni.com/content/groups/ui
![Page 39: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/39.jpg)
Useful Stuff – LabVIEW Pro
![Page 40: 2-2 HMI for LabVIEW Programming](https://reader033.vdocuments.site/reader033/viewer/2022051108/545caf28b1af9ff8378b46fe/html5/thumbnails/40.jpg)
Key Takeaways
• The “Rules”1. Do not be innovative
2. Less is more
3. Think about your user
• Take advantage of what LabVIEW gives us– Transparency
– Different controls / control customization
– Panes / tabs
• UI Interest Group & LabVIEW Pro