UI Interest Group Blog

Community Browser
cancel
Showing results for 
Search instead for 
Did you mean: 

Re: Creating an Office 2007-like Ribbon in LabVIEW

SimonH
NI Employee (retired)

Initially I dismissed the idea of recreating the "Office Fluent Interface" (more commonly referred to as the "ribbon") in LabVIEW as being more trouble than it was worth.  Typically the types of applications that we create with LabVIEW aren't the option heavy editor type applications that the ribbon was designed to help simplify and the only thing worse than an ugly user interface is one that is needlessly fancy (and consequently less usable).  Now the question keeps coming up every once in a while so I decided to take another look at it. 

Besides hiding behind ideology I admit that it sounded pretty difficult at first.  I have used Microsoft's .NET ribbon when I was playing around with WPF and, coming from the LabVIEW world, it wasn't what you would call intuitive to set up (you need to interact at the XAML-source or programming API level - it isn't all drag-and-drop, even in Visual Studio, and I'm still very new to XAML).  Add to that the complications of trying to communicate custom UI events efficiently between LabVIEW and .NET and it became apparent that re-using the .NET component would indeed be problematic.  If anyone has gone down this route please do let us know how well you faired in the comments.

Instead I decided to create most of the ribbon's look and feel using native LabVIEW controls and a few custom graphics created in my favourite UI mockup tool (aka PowerPoint).  Here's a screenshot of what I managed to come up with:

LabVIEW Ribbon.png

While I didn't implement every feature of the ribbon it still feels pretty authentic.  Moving the mouse over the tab controls and buttons gives the familiar yellow glow, groups highlight slightly when the mouse enters, clicking on the current tab will minimize the ribbon and move all the content up, clicking on a tab again will bring it back, etc.  Best part about it is it is all one small VI - no XControls, .NET controls or subpanels required.  I have attached a zip file containing the VI and all the source graphics as usual (LabVIEW 2009 format - sorry for those of you with older versions, I only keep the latest version installed since my laptop has a small HDD and developing without quickdrop and diagram cleanup is just frustrating having used it for a while now).

It's getting late so I won't go into all the implementation details but here are the basics for those trying to figure out what I did:

  • The main part of the ribbon is a transparent tab control with the tabs hidden
  • The "tabs" that you see are actually customized system buttons (to get the mouseover effect and the custom behavior)
  • The groups are also transparent tab controls with only one page (this gives me a nice container to trigger mouse enter and leave events from)
  • The ribbon occupies the top pane of my VI (with the splitter shrunk to 1-pixel and made a nice shade of blue to blend in) - repositioning the splitter let's me "minimize" the ribbon.

Hopefully this gives you some ideas for you own projects.

Happy wiring,

Simon

Comments
npoling
Member

Very impressive.  I agree that "typically" applications built in LabView are not a good fit for this style of program command, however, as LabView expands and grows I believe that applications built on LabView will not be so "typical".  The more NI can do to increase the functionality for large atypical applications the better, for NI and the community.

battler.
Active Participant

Great work.  Have some questions about the implementation of your custom buttons.

Also the powerpoint file you included; how did you gain your images from that?

I'd like to resize the Tabs and groups you have used, what is the best way to do this?

I'm still unsure how you've managed to achieve all the functionality from 1 event case.

I'm no expert at customizing controls.  How did you get them to display the colour when the mouse is over them (i.e. without an event case)?

Thoric
Trusted Enthusiast

battler,

see here (and scroll down) for information on making custom controls using Powerpoint.

Thoric (CLA, CLED, CTD and LabVIEW Champion)


Thoric
Trusted Enthusiast

This is an excellent demonstration on the use of custom controls to achieve a very fluid responsive GUI. Ingenius use of a picture ring inside an invisible tab control too...

Thoric (CLA, CLED, CTD and LabVIEW Champion)


SimonH
NI Employee (retired)

Also the powerpoint file you included; how did you gain your images from that?

Right click on an item or group of items in PowerPoint and select "Save As Picture", save as a PNG file which you can then import into LabVIEW using the Edit»Import Picture to Clipboard option.  This will give you your PowerPoint image with transparency intact.

I'd like to resize the Tabs and groups you have used, what is the best way to do this?

For the best results: resize the images in PowerPoint, save them as PNG files and import them in place of the existing imagery.  For the tab buttons right click on the button and go Advanced»Customize to bring up the control editor and swap out the images for each state of the button.  For the groups you will need to replace the two images in the picture ring control (this can be done just by right clicking on them), then resize the picture ring to display the full image (the invisible tab control surrounding the picture right should resize to accommodate - make sure that you resize the inner of the two controls, since both are invisible this can be tricky).

I'm still unsure how you've managed to achieve all the functionality from 1 event case.

Using the CtrlVal reference let's you handle events in a more abstract way (i.e. you don't need an event case for each control that may fire a particular kind of event).  The only two kinds of events in my example: 1. you click on a tab, and 2. your mouse enters or leaves a group.  In either case you can work out what needs to be done with a little logic by knowing which control was the source of the event and what value that control currently has (i.e. if the mouse enters or leaves group 1 and group 1 is currently not highlighted, highlight it and vice versa).

I'm no expert at customizing controls.  How did you get them to display the colour when the mouse is over them (i.e. without an event case)?

Use the system OK button as your starting point.  The system buttons have 6 states (true, false, mousedown true, mousedown false, mouseover true and mouseover false) as opposed to the normal 3 or 4 you get with the modern and classic controls.

Hope this helps.

battler.
Active Participant

"swap out the images for each state of the button" - How is this done?

Know of a good tutorial on creating custom controls to this advanced level?

BTW thank you very much!

SimonH
NI Employee (retired)

This was the best tutorial I could find with a quick Google search - http://labviewdownunder.blogspot.com/2009/11/custom-controls.html

KvZ
Active Participant
Active Participant

Great Post Simon. It triggered me to have a look at how one could actually use the Ribbon in LabVIEW.

First you need to get a hold of the Ribbon Binaries here, This is the Assembly that contains the ribbon and all it's sub components. You need to licence them which is free but it does come with a detailed specifications document which your application needs to follow in order to use the Ribbon.

Secondly the Ribbon is actually a Microsoft Windows Presentation Foundation (WPF) Control. This is the next generation UI technology. It's actually pretty cool but unfortunately not backwards compatible with Windows Forms (lets call this the current generation UI technology). For a LabVIEW point of view this means we can't directly use it in a .Net Container. We need to use the Windows Forms Control ElementHost (From the System.Windows.Forms.Integration Namespace) that can Host a WPF Control and Insert the Ribbon. For details see this FAQ

One thing to look out for is that many UI Components (Windows Forms or WPF) require the thread that they run in to be marked STA (Single Threaded Apartment). This basically means that they run in a single threaded environment to ensure thread safety. If you create the Ribbon from a regular LabVIEW VI it will throw an exception. The LabVIEW UI Thread is marked STA so the VI that calls the Ribbon constructor must run in the User Interface Execution system (VI Properties -> Execution).

Down site of this is also that you can't use XAML to create your user interface, You will need to create, add and configure every component of the ribbon manually which means a lot of coding. In my opinion the most efficient way to use the Ribbon in LabVIEW until LabVIEW comes with Native WFP support would be to create a WFP UserControl using Visual Studio and host this WFP UserControl in the Windows Forms ElementHost Control. This will enable you to use XAML and hide a lot of internal handeling inside the WFP UserControl and only expose a simple interface to LabVIEW.

Hope this helps

Karsten

battler.
Active Participant

Yes it does sound involved.  It's good that there is interest in the topic.  I knew there would be, even after the response I got for proposing it in the forums.  Thanks for the info Karsten.  Need some exampl code once someone manages it.  To be honest I have considered converting to Visual Studio to gain the ribbon functionality.  In my business of public software appearance means a lot.

As a result of this posting by Simon I have manaed to implement an adhoc ribbon in one of my applications.  It actually works nicely and looks very appealing.  One tip about Simons code is that the Tabs in the ribbons should highlight rather than be dulled when the mouse is over them.  This can be done by changing the default value of the picture ring.

Hope to see more developments in this area and some contributions by NI.

BTW one drawback of using the Microsoft ribbon is that you must agree to adhere to their layout standards (i.e. you can't just build the ribbon as you like).

KvZ
Active Participant
Active Participant

Here is the VI I used to play with the ribbon. It's not much, just create and insert into a ElementHost Control that's in a .Net container on the Front Panel.

Ribbon BD.png

Ribbon FP.PNG

Russ_Evans
Member

Great post Karsten. Another approach occurred to me I was wondering if you could comment on it. I have been toying around with using Adobe Flex to build front ends to some of my LabVIEW apps in conjunction with LabVIEW web services. I decided on Flex over others because of maturity, documentation etc but one could go with Silverlight instead. I thought that Silverlight used WPF controls and hence you could build a Silverlight front end gui to your LabVIEW app. I assume it would take care of thread safety for you since your not running the gui in LabVIEW. I just don't know enough about Silverlight to know if this would work but if a ribbon was that important to me I think I would check this approach out. Perhaps some Silverlight experts could shed some light on the topic.

--Russ

KvZ
Active Participant
Active Participant

Hi Russ,

I'm no Silverlight expert but as far as I know it's a sub set of WPF that does not require a full .Net Framework install on a client. I don't see any issue with using a web service in LabVIEW and a frondend using Silverlight. Thread safety with regards to creating UI controls should be taken care of in the Silverlight Application, I'm not sure if this is done automatically because the Silverlight app will run in the client browser or not. WPF is also able to run in a Browser using a Browser Application (xbap) this does require a full .net framework install on the client tough. XBAPs is probably over kill for your applications unless some controls you like to use in the cleint are not supported in Silverlight.

--Karsten

battler.
Active Participant

Karsten, I have no idea how you've done that.  I've never used .Net.  Could you please post the VIs?

KvZ
Active Participant
Active Participant
Michael_N.
Member

Russ/Karsten,

Based on your discussion of Silverlight, I wanted to let you know about an NI software product (currently in beta) that you may be interested in. It's called Web LabVIEW UI Builder, and it's designed for building thin client applications with dynamic, modern GUIs like the ones you can create in Adobe Flex or Silverlight.

In fact, the software is built on top of Silverlight and the applications that you build are actually Silverlight applications. However, the programming is all graphical just like regular LabVIEW. All of the I/O is through LabVIEW web services.

You can check out this video for more information:

http://zone.ni.com/wv/app/doc/p/id/wv-1700/upvisited/y

If you're interested in being a beta user, please let me know. My email is michael.neal@ni.com.

Regards,

Mike Neal

Senior LabVIEW Product Manager

battler.
Active Participant

"Down side of this is also that you can't use XAML to create your user interface, You will need to create, add and configure every component of the ribbon manually which means a lot of coding."

There is a free XML compiler provided by Microsoft http://msdn.microsoft.com/en-us/library/dd316924(VS.85).aspx.  Any use?

Can you provide an example of comfiguring a series of components manually?  I might just do it.

NJKirchner
Active Participant

Use the system OK button as your
starting point.  The system buttons have 6 states (true, false,
mousedown true, mousedown false, mouseover true and mouseover false) as
opposed to the normal 3 or 4 you get with the modern and classic
controls.

Simon,

You said start with the system OK button, but failed to mention how to get a 'Boolean Glyph' into that system button.

There was a video post that was done on JKISoft a while back about this very thing , but they needed to start with LabVIEW 7.1 in order to achieve this kind of behavior and was very laborious. So I definetly understand the concept of replacing the 6 states of images, but fail to see how you were able to get a glyph on the button as well.

For those of you who might not know, if you just copy an image into a custom control edito, it just shows up as a decoration, which you can not click on to activate the boolean. So you can have this great graphic, but it blocks 75% of your button rendering it useless. But if it's a boolean glyph, then it's technically possible.

So Simon, Did you do the same kind of steps that are shonw in that video to accomplish this?

KvZ
Active Participant
Active Participant

The Microsoft Tool seems to wrap the ribbon functionality into a  COM object (ActiveX). I've not used this before but it could be a good path to try out. The .Net Objects are designed to be used with XAML. They can be used manually but the classes are build in such a way that they can be easaly described with XAML. The constructors don't have any arguments, and the objects are configured using propeties which match with the XAML attributes. The COM object you could potentially use with the LabVIEW ActiveX support, which is very similar to doing .Net in LabVIEW and could be more usable because this API does not need to be descriped with XAML.

As for using the Ribbon .Net components I suggest you start looking at the following to get familiar with how to use .Net components in LabVIEW:

http://zone.ni.com/devzone/cda/tut/p/id/4888

http://zone.ni.com/devzone/cda/epd/p/id/6047

When your confertble using .Net then you can start creating components for the Ribbon. As for how to use the Ribbon components it self you sould read the documentation from Microsoft.

--Karsten

SimonH
NI Employee (retired)

Nope, no need to in LabVIEW 2009 (although I'm not sure when we added in this functionality).

To be clear this is what I did:

  1. Drop a System Button
  2. Right click on the button and select Advanced»Customize
  3. Import the picture you wish to use as a decal to the clipboard by selecting Edit»Import Picture to Clipboard.
  4. Right click on the button and select Import Picture from Clipboard»Decal.

Voila!

npoling
Member

Has anyone had any luck furthering this?  I am able to easily create a single tab, but I have been frustrated unsuccessful beyond that.  When it comes to adding a second tab or a group within the first tab I get the following error:

Error 1172 occurred at Error calling method System.Collections.ObjectModel.Collection`1[[Microsoft.Windows.Controls.Ribbon.RibbonTab, RibbonControlsLibrary, Version=3.5.31016.1, Culture=neutral, PublicKeyToken=31bf3856ad364e35]].Add of ObjectId handle: 0x610175C for obj 0x1F1128C[System.Collections.ObjectModel.ObservableCollection`1[Microsoft.Windows.Controls.Ribbon.RibbonTab]] in domain [LabVIEW Domain for Run] and thread 10148, (System.Reflection.TargetInvocationException: Exception has been thrown by the target of an invocation.
    Inner Exception: System.ArgumentException: Specified Visual is already a child of another Visual or the root of a CompositionTarget.
) in Ribbon.vi

I have also tried creating the UI Element (multiple tabs) prior to adding it to the Element Host, but my system hangs indefinately.  Any pointers would be much appreciated!

KvZ
Active Participant
Active Participant

Hi,

The Exception indicates a incorrect argument for some Method. "Specified Visual is already a child of another Visual or the root of a CompositionTarget" This will probably make more sense if you know the exact method that causes the exception and the objects involved.

The term Visual probably refers to a element in the Visual Tree. This is a concept from WPF, see: http://www.wpftutorial.net/LogicalAndVisualTree.html. Unfortunally this is where my WPF knowledge ends...

I think you need to expand your understanding of WPF inorder to fully understand what's going on.

Hope this helps,

Thanks

Karsten

jlokanis
Active Participant

Nice demo.  Now, if you could get it to scale with the window as it gets resized and maximized, I will really be impressed.

While trickery like this is cool, it just makes me wish NI would support standard UI development standards in LabVIEW even more!

-John
------------------------
Certified LabVIEW Architect
RichE
Member

Hi Mike,

I would like to give the Web LabVIEW UI Builder Beta a try, I have sent you a pm.

regards,

Richard Elliott

qzxin
Member

Hi,SimonH

I can‘t open the link. Could you attach the page here?

Thanks

SimonH
NI Employee (retired)
Balaji_DP
Active Participant

helle simonH,

                             i really appreciate you have done..! congrats... also i was searching this same task to implement one of my big application... unfortunately i am using labview 8.6 version. if possible could you downgrade this code for lv 8.6...?

it will be very use to me...

thanks a lot

Regards,
Balaji DP
JCC_(SK)
Active Participant

nice demo!

thank you

Hooovahh
Proven Zealot

For the heck of it I made an attempt at creating a ribbon interface, using a 2D picture control.  I like some aspects of this, like being able to update the UI at runtime, but there are several limitations.  I intended on making it into an XControl but ran out of time and interest.  Here is a demo:

http://screencast.com/t/daan9D78vqV

And the source on LAVA.

https://lavag.org/topic/19386-labview-ribbon-interface/

Thoric
Trusted Enthusiast

Nice work Brian, good stuff.

Thoric (CLA, CLED, CTD and LabVIEW Champion)