{"id":20357,"date":"2017-05-09T11:16:00","date_gmt":"2017-05-09T18:16:00","guid":{"rendered":"https:\/\/blog.digilentinc.com\/?p=20357"},"modified":"2021-06-11T09:37:10","modified_gmt":"2021-06-11T16:37:10","slug":"tips-for-creating-an-effective-user-interfaces-in-labview","status":"publish","type":"post","link":"https:\/\/digilent.com\/blog\/tips-for-creating-an-effective-user-interfaces-in-labview\/","title":{"rendered":"Tips for Creating an Effective User Interface in LabVIEW"},"content":{"rendered":"<p>When I attended NI week last year, I attended several different workshops that were designed to help increase <a href=\"https:\/\/digilent.com\/shop\/labview-home-bundle\/\">LabVIEW<\/a>\u00a0knowledge and proficiency. My favorite workshop went over tips and tricks for building effective user interfaces in LabVIEW. One of the major benefits of coding in LabVIEW is that provides\u00a0built-in libraries of controls and indicators. Because LabVIEW was designed with engineers and scientists in mind, this library includes context-specific controls such as knobs, dials, and switches along with indicators such as meters, gauges, and thermometers.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-20359 aligncenter\" src=\"https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/picture-1-600x488.png\" alt=\"\" width=\"600\" height=\"488\" srcset=\"https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/picture-1-600x488.png 600w, https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/picture-1-768x624.png 768w, https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/picture-1-1024x832.png 1024w, https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/picture-1-168x137.png 168w, https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/picture-1-800x650.png 800w, https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/picture-1.png 1491w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/>These built-in controls and indicators are very useful but there comes a time when you want to add your own personal touch to your controls and indicators. I was able to find a YouTube video series that covered the information I learned at my workshop and in this blog post, I will cover a few basic topics that will help in designing your own user interface. For every tip, I have also provided a link to a video that provides step by step instructions. These tips can help you create visually-striking\u00a0UIs for your <a href=\"https:\/\/digilent.com\/shop\/labview-home-bundle\/\">LabVIEW<\/a> applications.<\/p>\n<h3>Adding Decals to Buttons<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium aligncenter\" src=\"https:\/\/www.dmcinfo.com\/Portals\/0\/Buttons7.png\" width=\"514\" height=\"382\" \/><\/p>\n<p>Adding decals or icons to your buttons is one easy way to spruce up your user interface. It also provides the benefit of your user not having to read the text on each button, they can simply recognize the icon as performing a certain task. This <a href=\"https:\/\/www.youtube.com\/watch?v=2NdqXh67mak\">video<\/a> demonstrates how to add decals to buttons in LabVIEW.<\/p>\n<h3>Recoloring Graphs<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium\" src=\"https:\/\/i.ytimg.com\/vi\/rOUcBvyHj5E\/maxresdefault.jpg\" width=\"960\" height=\"720\" \/><\/p>\n<p>Changing the colors of your graphs, background, and bordering decorations can impact both the usability and readability of the front panel itself. This\u00a0<a href=\"https:\/\/www.youtube.com\/watch?v=rOUcBvyHj5E\">video<\/a> demonstrates some useful techniques for recoloring the built-in graphs in LabVIEW.<\/p>\n<h3>Hiding the LabVIEW Toolbar<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium aligncenter\" src=\"http:\/\/digital.ni.com\/public.nsf\/$CXIV\/ATTACH-AEEE-937MW4\/$FILE\/Capture.PNG\" width=\"1166\" height=\"651\" \/><\/p>\n<p>For many of your applications, it&#8217;s probably not important that the user sees the standard LabVIEW toolbar. These sometimes add unnecessary complexity to the front panel itself. This\u00a0<a href=\"https:\/\/www.youtube.com\/watch?v=kE3hsw0GbEg\">video<\/a> explores how to customize the look and feel of the VI.<\/p>\n<h3>Customizing the Run-Time Menu<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-20364 aligncenter\" src=\"https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture7-600x454.png\" alt=\"\" width=\"600\" height=\"454\" srcset=\"https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture7-600x454.png 600w, https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture7-768x581.png 768w, https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture7-1024x775.png 1024w, https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture7-800x605.png 800w, https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture7.png 1673w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>One of the most common techniques for creating applications is defining a custom run-time menu. This <a href=\"https:\/\/www.youtube.com\/watch?v=wkpiAmHFddM\">video<\/a> demonstrates how you can customize this run-time menu for a LabVIEW application, and even define your own custom operations.<\/p>\n<h3>Spawning Dialogs<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium aligncenter\" src=\"http:\/\/www.ni.com\/cms\/images\/devzone\/tut\/dialog_example_20090325164823.png\" width=\"363\" height=\"278\" \/><\/p>\n<p>Putting functionality that is only seldom necessary into a dialog can again help to reduce the complexity of the design for the user. This\u00a0<a href=\"https:\/\/www.youtube.com\/results?search_query=labview+Spawning+Dialogs\">video<\/a> discusses how to create and customize dialogs in LabVIEW.<\/p>\n<h3>Using Panes<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-20366 aligncenter\" src=\"https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture9-600x451.png\" alt=\"\" width=\"600\" height=\"451\" srcset=\"https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture9-600x451.png 600w, https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture9-768x577.png 768w, https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture9-1024x770.png 1024w, https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture9-800x601.png 800w, https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture9.png 1345w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>Using panes can help you better organize your front panel. You can create some sections of the front panel that are resizable while leaving others a static size. The following video explores how to use panes in LabVIEW.<\/p>\n<h3>Using the Busy Cursor<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-20367 aligncenter\" src=\"https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture11-600x450.png\" alt=\"\" width=\"600\" height=\"450\" srcset=\"https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture11-600x450.png 600w, https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture11-768x576.png 768w, https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture11-1024x768.png 1024w, https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture11-800x600.png 800w, https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture11-1200x900-cropped.png 1200w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>Using the busy cursors helps you to keep the user informed that your application is indeed running and properly sets expectations. This <a href=\"https:\/\/www.youtube.com\/watch?v=hZ180R7ADto\">video<\/a> demonstrates how to set the cursor to busy or add a progress bar to your application.<\/p>\n<h3>Editing Panel Backgrounds<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-20361 aligncenter\" src=\"https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture5-600x492.png\" alt=\"\" width=\"600\" height=\"492\" srcset=\"https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture5-600x492.png 600w, https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture5-768x630.png 768w, https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture5-1024x839.png 1024w, https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture5-168x137.png 168w, https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture5-800x656.png 800w, https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture5.png 1415w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>Editing panel backgrounds might be useful if you have a corporate template or logo you would like to use across all of your application&#8217;s components. This <a href=\"https:\/\/www.youtube.com\/watch?v=gxXJfonTlFc\">video<\/a> demonstrates how to add a custom background image to your VI.<\/p>\n<h3>Creating Decorations in Microsoft PowerPoint<img loading=\"lazy\" decoding=\"async\" class=\"wp-image-20360 aligncenter\" src=\"https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture4-600x577.png\" alt=\"\" width=\"459\" height=\"441\" srcset=\"https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture4-600x577.png 600w, https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture4-768x739.png 768w, https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture4-1024x985.png 1024w, https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture4-800x770.png 800w, https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/Capture4.png 1319w\" sizes=\"auto, (max-width: 459px) 100vw, 459px\" \/><\/h3>\n<p>Using background images on your front panel can sometimes be detrimental if the image is too busy. This <a href=\"https:\/\/www.youtube.com\/watch?v=30ZUOcbsJDg\">video<\/a> explores using Microsoft PowerPoint to create decorations with gradients and transparency to add to the professionalism of your front panel.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" aligncenter\" src=\"http:\/\/www.ni.com\/cms\/images\/devzone\/tut\/DDV_Fig_6_-_Front_Panel.png\" width=\"613\" height=\"379\" \/><\/p>\n<p>Thank you for reading my blog post, for more information about creating user-friendly\u00a0interfaces for LabVIEW follow this\u00a0<a href=\"http:\/\/www.ni.com\/newsletter\/50686\/en\/\">link<\/a>. If you are interested in trying out LabVIEW for yourself, you can purchase a copy of\u00a0<a href=\"https:\/\/digilent.com\/shop\/labview-home-bundle\/\">LabVIEW 2014 Home Edition<\/a>\u00a0which includes everything you will need to run\u00a0<a href=\"https:\/\/www.labviewmakerhub.com\/doku.php?id=learn:tutorials:libraries:linx:3-0:beaglebone-black-setup\">LINX 3.0<\/a>.\u00a0Please comment below with any questions or comments you may have.<\/p>\n<div class='watch-action'><div class='watch-position align-left'><div class='action-like'><a class='lbg-style6 like-20357 jlk' data-task='like' data-post_id='20357' data-nonce='ee750c7abc' rel='nofollow'><img src='https:\/\/digilent.com\/blog\/wp-content\/plugins\/wti-like-post-pro\/images\/pixel.gif' title='Like' \/><span class='lc-20357 lc'>+3<\/span><\/a><\/div><div class='action-unlike'><a class='unlbg-style6 unlike-20357 jlk' data-task='unlike' data-post_id='20357' data-nonce='ee750c7abc' rel='nofollow'><img src='https:\/\/digilent.com\/blog\/wp-content\/plugins\/wti-like-post-pro\/images\/pixel.gif' title='Unlike' \/><span class='unlc-20357 unlc'>0<\/span><\/a><\/div><\/div> <div class='status-20357 status align-left'><\/div><\/div><div class='wti-clear'><\/div>","protected":false},"excerpt":{"rendered":"<p>Austin shares some tips and tricks to increase speed and efficiency in LabVIEW.<\/p>\n","protected":false},"author":42,"featured_media":20370,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4323,1563],"tags":[],"ppma_author":[4493],"class_list":["post-20357","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software","category-guide"],"jetpack_featured_media_url":"https:\/\/digilent.com\/blog\/wp-content\/uploads\/2017\/05\/DDV_Fig_6_-_Front_Panel.png","authors":[{"term_id":4493,"user_id":42,"is_guest":0,"slug":"astanton","display_name":"Austin Stanton","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/056fddaefc60a1f99c226ea5757a8c41?s=96&d=mm&r=g","author_category":"","user_url":"","last_name":"Stanton","last_name_2":"","first_name":"Austin","first_name_2":"","job_title":"","description":""}],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/digilent.com\/blog\/wp-json\/wp\/v2\/posts\/20357","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digilent.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/digilent.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/digilent.com\/blog\/wp-json\/wp\/v2\/users\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/digilent.com\/blog\/wp-json\/wp\/v2\/comments?post=20357"}],"version-history":[{"count":0,"href":"https:\/\/digilent.com\/blog\/wp-json\/wp\/v2\/posts\/20357\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/digilent.com\/blog\/wp-json\/wp\/v2\/media\/20370"}],"wp:attachment":[{"href":"https:\/\/digilent.com\/blog\/wp-json\/wp\/v2\/media?parent=20357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digilent.com\/blog\/wp-json\/wp\/v2\/categories?post=20357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digilent.com\/blog\/wp-json\/wp\/v2\/tags?post=20357"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/digilent.com\/blog\/wp-json\/wp\/v2\/ppma_author?post=20357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}