Custom Toolbars for LabVIEW VIs

Aug 17th, 2010 by Christina in LabVIEW, User Interface

Have you ever wanted to make a custom toolbar on a VI?

I put together a small example VI to show how this might be done: Toolbar Example

Separating an area of the panel for a toolbar was one of the primary target use cases in the design of Splitter Bars. The basic idea in this example is to use a Horizontal Splitter Bar, set to “stick” to top, to create the toolbar space. The toolbar itself is just a set of buttons. (Note: when you use a Splitter Bar, you divide the panel into two “panes.” You can further subdivide a pane using another Splitter Bar).

Splitter bars and panes also let you define how objects grow and move when the VI is resized. This is what the example looks like when I grow the window:

There are several other tricks (that I admit I picked up from other folks) incorporated into this example, including:

  • The toolbar buttons are from Simon Hogg’s UI Interest Group on ni.com/Community. The icons come from the Open Icon Library Project – http://openiconlibrary.sourceforge.net/
  • The separator line between the toolbar and the main area of the VI is implemented using another pane. This lets me put any decoration I want into that pane and have it scale.
  • A vertical Splitter Bar separates the Info button from the rest of the toolbar. This Splitter Bar “sticks right” so that the Info button stays with the right edge of the window during resizing.
  • The graph is set to “Fit to Pane” so that it fills the main area of the VI.
  • The panes with resizing objects are set to “Scale Objects While Resizing” to get smooth visual feedback when the window is resized.
  • The Splitter Bars are invisible at run-time because they are Classic style and colored the same color as the background of the VI. They are also locked so that they cannot be dragged around.
  • The VI has a Minimum Panel Size set in its VI Properties so that it cannot be resized small enough to hide any of the toolbar buttons.

One awkward thing about looking at an example like this is that, in its finished form, the VI has elements that are difficult to manipulate. The splitter bars are very thin and hard to see, and thus difficult to right-click on. However, if you know approximately where they are, you can see them at edit time by looking for “gaps” in the alignment grid.

Here is what the demo VI looks like at edit time:

And here I have colored the splitter bars purple so that they are easier to see. (I will often work with a VI like this until it is “done” and color the Splitter Bars to the background color as a final step).

If you have more tips for custom VI toolbars, please share them in the Comments!

15 Comments

  • From the front panel, right-click on a splitter bar and use Create-> Reference. This switches you to the block diagram and drops a reference to the selected splitter.

    You can use this to programatically set the foreground and background colors.

    Combine this with the Application.Kind property node and a case statement to configure your splitter bar(s) at run-time.

  • Things that are hard to find in edit mode are annoying.

    I added an idea for this in the exchange:

    Show splitter bars more clearly in edit mode

    I also linked there to an older idea about showing hidden controls and asked for ideas for other things which could use displaying at edit time.

  • Nice presentation (as we’ve come to expect!).

    When this was e-mailed to my Exchange mailbox, and opened in Outlook 2007, the first two images only showed the top of the Window frame (I could see the top half of the words “Tool Bar Example.vi Front Panel*”). The final two images rendered fine. FireFox is my “chosen” browser (Version 3.6.8).

    I’d suggest putting a link to the Blog (perhaps with a label “Read directly from my Blog”) in the e-mail message just in case others have similar viewing glitches.

  • Phillip – cool tip, thanks for sharing!

    Yair – interesting idea, thanks for putting it on Exchange! It’s always a little difficult to decide how non-WYSIWYG the edit-time panel should be, so it’ll be good to hear everyone’s opinions.

    Bob – Thanks, I’m glad you enjoyed the post! The e-mail image problem was probably a temporary server issue. The article title in the e-mail should be a link to the post on the web. Unfortunately, I don’t have the ability to add another link because the e-mail is generated by the Feedburner service.

  • Smashing blog post!
    The final product looks great.
    Keep em coming.

  • Christina, there’s nothing preventing R&D people from posting on the idea exchange (and from voting for ideas they like, nudge, nudge, say no more). Some R&D people do this (most notably AQ, but you can find also find Jeff K.’s vote on numerous ideas) and their contributions are invaluable, even when they only bring up points for consideration.

  • But I don’t want to bias people’s feedback! 🙂

  • Your opinion is just as valid as that of any other user, if not more. Users need to have their opinions biased. I can attest to not considering all the options when I first see an idea. The more feedback is available, the better informed I am.

    As for the influence R&D has, I will admit that I’m more likely to vote for a suggestion Stephen makes on the exchange than that of a random user, but if you’ll ask him, I think you’ll find that we give him a hard time a lot more than we agree with him (often through no fault of his own, since he simply conveys old design decisions).

    Seriously, R&D involvement would be excellent.

  • How to you change background color of graph? Default is black and I can not change it

    • You should be able to color it with the Coloring tool. Shift-right click (or use the View menu) to see the Tools palette. Select the paintbrush. Then right-click on the graph’s background area. (Be careful not to click the grid lines). Select the color you want from the color picker dialog.

  • This is a nifty UI idea. Can be used in many laboratory testing projects. Keep those coming, Christina 🙂

  • Abdulla Ghouse

    Nice UI. How the toolbar buttons are highlighted Whenthe mouse is moved over?

  • System buttons have a “mouse over” state that shows the highlight. You can customize System buttons to use other images but still have the mouse-over state.

  • It’s a very simple control. Some complicated controls can also be created in “LabVIEW”, for more information, you can click this link to study more on the NI website.

    http://zone.ni.com/reference/en-XX/help/371361B-01/lvconcepts/custom_cont_ind_type/

  • […] This post was mentioned on Twitter by LabVIEW and Christina Rogers, Phillip Brooks. Phillip Brooks said: Custom Toolbars for #LabVIEW VIs « Eyes on VIs http://bit.ly/9iosJe […]

 

Comments have been closed for this post.